المواقع الاجتماعية بتقنية Css - بلوجر

بسم الله الرحمن الرحيم


السلام عليكم ورحمة الله




اضافات بلوجر


المواقع الاجتماعية بتقنية  Css





صورة للاضافة 

 الطريقة


اولا - ادخل هناا

القالب - تحرير html

ابحث عن

]]></b:skin>

ثم هذا الكود فوقه

/*Social Sprite Css*/
#head-soc ul li {list-style :none; padding: 0 0 0 12px; float: right;}
#head-soc ul li a {text-indent: -9999px; font-size: 0; line-height: 0; overflow: hidden ; height: 32px; width: 32px ;border: 0; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqjVPa9qfSSwxnuieCmsSBm7zAiEhOGD53Xz47RVUmMx9bi05lfD7fTb_ts1XQarShqC_3PYMj0GSdT51RXf90hL-68Fy0hm9GeDmB8IvS1J1TkRqnhno7cYard4O1WvaJDC66ZZR6pdPQ/s1600/spice-up-blog-sprite.gif) no-repeat; display: block;}

#head-soc li#g a {background-position: 0px 0px;} 
#head-soc li#g a:hover {background-position: 0px -32px;}

#head-soc li#rss a {background-position: -32px 0px;}
#head-soc li#rss a:hover {background-position: -32px -32px;}

#head-soc li#sub a {background-position: -64px 0px;}
#head-soc li#sub a:hover {background-position: -64px -32px;}

#head-soc li#fb a {background-position: -96px 0px;}
#head-soc li#fb a:hover {background-position: -96px -32px;}

#head-soc li#twit a {background-position: -128px 0px;}
#head-soc li#twit a:hover {background-position: -128px -32px;}

#head-soc li#li a {background-position: -160px 0px;}
#head-soc li#li a:hover {background-position: -160px -32px;}

#head-soc li#youtube a {background-position: -192px 0px;}
#head-soc li#youtube a:hover {background-position: -192px -32px;}

/*Social Sprite Css http://hassan-elbaghdadi.blogspot.com */

ثانيا -


التخطيط - إضافة أداة

ثم اختر اضافة 

HTML/JavaScript



وضع هذا الكود

<!--Social Sprite Html-->
<div id="head-soc">
<ul>
<li id="g"><a href="https://plus.google.com/b/#/posts">Google+</a></li>
<li id="rss"><a href="http://feeds.feedburner.com/#">RSS Feed</a> </li>
<li id="sub"><a href="http://feedburner.google.com/fb/a/#?uri=SpiceUpYourBlog&loc=en_US">Subscribe</a></li>
<li id="fb"><a href="http://facebook.com/#">Facebook</a></li>
<li id="twit"><a href="http://twitter.com/#">Twitter</a></li>
<li id="li"><a href="http://www.linkedin.com/profile/view?id=#">LinkedIn</a></li>
<li id="youtube"><a href="http://www.youtube.com/user/#">YouTube</a></li>
</ul>
</div>

<!--Social Sprite Html http://hassan-elbaghdadi.blogspot.com-->

غير علامة # بالروابط الخاصة بك

-------------------------------
هل اعجبك الموضوع ؟ شاركه مع اصدقائك