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

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

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

اضافات بلوجر

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

صورة للاضافة

الطريقة

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

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

ابحث عن

]]></b:skin>

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

</span></font></div>
<div>
<font color="#134f5c"><span style="line-height: 19.1875px;">/*Social Sprite Css*/</span></font></div>
<div>
<font color="#134f5c"><span style="line-height: 19.1875px;">#head-soc ul li {list-style :none; padding: 0 0 0 12px; float: right;}</span></font></div>
<div>
<font color="#134f5c"><span style="line-height: 19.1875px;">#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/AVvXsEhZpz-06oJciwgOPB4WPIRQLPeuPEsSwizab1CfeC9mVaQmuivDPYh-5toiW6YYrREzFh2aCzIxj2cpETpoyoxUzWJVHWoSliZ4WVIudJ9gMmxIYsKccYfHoWGS0Q9Dk8OTEVbCtueOFUQY/s1600/spice-up-blog-sprite.gif) no-repeat; display: block;}</span></font></div>
<div>
<font color="#134f5c"><span style="line-height: 19.1875px;"><br></span></font></div>
<div>
<font color="#134f5c"><span style="line-height: 19.1875px;">#head-soc li#g a {background-position: 0px 0px;} </span></font></div>
<div>
<font color="#134f5c"><span style="line-height: 19.1875px;">#head-soc li#g a:hover {background-position: 0px -32px;}</span></font></div>
<div>
<font color="#134f5c"><span style="line-height: 19.1875px;"><br></span></font></div>
<div>
<font color="#134f5c"><span style="line-height: 19.1875px;">#head-soc li#rss a {background-position: -32px 0px;}</span></font></div>
<div>
<font color="#134f5c"><span style="line-height: 19.1875px;">#head-soc li#rss a:hover {background-position: -32px -32px;}</span></font></div>
<div>
<font color="#134f5c"><span style="line-height: 19.1875px;"><br></span></font></div>
<div>
<font color="#134f5c"><span style="line-height: 19.1875px;">#head-soc li#sub a {background-position: -64px 0px;}</span></font></div>
<div>
<font color="#134f5c"><span style="line-height: 19.1875px;">#head-soc li#sub a:hover {background-position: -64px -32px;}</span></font></div>
<div>
<font color="#134f5c"><span style="line-height: 19.1875px;"><br></span></font></div>
<div>
<font color="#134f5c"><span style="line-height: 19.1875px;">#head-soc li#fb a {background-position: -96px 0px;}</span></font></div>
<div>
<font color="#134f5c"><span style="line-height: 19.1875px;">#head-soc li#fb a:hover {background-position: -96px -32px;}</span></font></div>
<div>
<font color="#134f5c"><span style="line-height: 19.1875px;"><br></span></font></div>
<div>
<font color="#134f5c"><span style="line-height: 19.1875px;">#head-soc li#twit a {background-position: -128px 0px;}</span></font></div>
<div>
<font color="#134f5c"><span style="line-height: 19.1875px;">#head-soc li#twit a:hover {background-position: -128px -32px;}</span></font></div>
<div>
<font color="#134f5c"><span style="line-height: 19.1875px;"><br></span></font></div>
<div>
<font color="#134f5c"><span style="line-height: 19.1875px;">#head-soc li#li a {background-position: -160px 0px;}</span></font></div>
<div>
<font color="#134f5c"><span style="line-height: 19.1875px;">#head-soc li#li a:hover {background-position: -160px -32px;}</span></font></div>
<div>
<font color="#134f5c"><span style="line-height: 19.1875px;"><br></span></font></div>
<div>
<font color="#134f5c"><span style="line-height: 19.1875px;">#head-soc li#youtube a {background-position: -192px 0px;}</span></font></div>
<div>
<font color="#134f5c"><span style="line-height: 19.1875px;">#head-soc li#youtube a:hover {background-position: -192px -32px;}</span></font></div>
<div>
<font color="#134f5c"><span style="line-height: 19.1875px;"><br></span></font></div>
<div>
<font color="#134f5c"><span style="line-height: 19.1875px;">/*Social Sprite Css http://egnology.blogspot.com */</span></font></div>
<div>
<font color="#134f5c"><span style="line-height: 19.1875px;">

ثانيا -

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

ثم اختر اضافة

HTML/JavaScript

وضع هذا الكود

</div>
<div style="text-align: center;">
</div>
<div style="text-align: center;">
<div id="head-soc">
</div>
<div style="text-align: center;">
<ul></div>
<div style="text-align: center;">

<li id="g"><a href="https://plus.google.com/b/gplus/posts">Google+</a></li>
</div>
<div style="text-align: center;">

<li id="sub"><a href="http://feedburner.google.com/fb/a/#?uri=SpiceUpYourBlog&loc=en_US">Subscribe</a></li>
</div>
<div style="text-align: center;">

<li id="fb"><a href="http://facebook.com/Mido.7s">Facebook</a></li>
</div>
<div style="text-align: center;">

<li id="twit"><a href="http://twitter.com/MDiabyan">Twitter</a></li>
</div>
<div style="text-align: center;">

<li id="li"><a href="http://www.linkedin.com/profile/view?id=linktech">LinkedIn</a></li>
</div>
<div style="text-align: center;">

<li id="youtube"><a href="http://www.youtube.com/user/MHShoman">YouTube</a></li>
</div>
<div style="text-align: center;">
</ul>
</div>
<div style="text-align: center;">
</div>
</div>
<div style="text-align: center;">
<br></div>
<div style="text-align: center;">
</div>
<div style="text-align: center;">

بدل gplus بايميلك على جوجل بلس
بدل Mido.7s بايميلك على الفيس بوك
بدل MDiabyan بايميلك على تويتر
بدل linktech بايميل على لينكد ان
بدل MHShoman بايميلك على اليوتيوب

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

بقلم محمد شومان

مواضيع ذات صله

0 التعليقات :

المتابعون

اصدقاء المدونه على الفيس بوك