أزرار الفيس بوك وتويتر للمدونة بطريقة إنسيابية

لإضافة أزرار المواقع الإجتماعية مثل تابعني على الفيسبوك وتويتر وجوجل بلس والاشتراك في RSS وبطريقة إنسيابية وجميلة أصبح أمرا سهلا

والكود يتم تركيبه عن طريق التخطيط ثم إختيار أداة ثم نختار JAVA /Script ونضع الكود داخل الإطار الكبير ونضغط حفظ ويمكنك جعل الأزرار أسفل المدونة أو في أي جانب فقط قم بسحب الأداة

الكود :

<style>

#abt{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}

#abt a{text-decoration:none; font-family:trebuchet ms,sans-serif;}

#abt li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}

#abt .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJB0v_dzu2zxk0nmfAhYjeAtuyJNzfMdbzHry2gW4I7QXtlYCQeJ2b_2ZYklJMHgDpHKUW1Frg48pMd5Xbh_tlMG_KU233EvUVpFs1cEaHHZmWrXGYR28SsSMqdsyD0RK8FV2YhGnQoVI/w35-h158-no/facebook+and+google%252B+.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}

#abt li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}

#abt .icon{overflow:hidden; color:#fafafa;}

#abt .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}

#abt .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}

#abt .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}

#abt .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}

#abt .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}

#abt li:hover .icon,

.touch #abt li .icon{width:210px;}

.touch #abt li .facebook, #abt li:hover .facebook{background-color:rgba(59,89,152,1);}

.touch #abt li .twitter, #abt li:hover .twitter{background-color:rgba(64,153,255,1);}

.touch #abt li .googleplus, #abt li:hover .googleplus{background-color:rgba(228,69,36,1);}

.touch #abt li .pinterest, #abt li:hover .pinterest{background-color:rgba(174,45,39,1);}

.touch #abt li .rss, #abt li:hover .rss{background-color:rgba(255,102,0,1);}

</style>

<ul id="abt">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="https://www.facebook.com/mohammed.amine.526875"target="blank">Follow us on Facebook</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/u/0/108510761823631656796/posts"target="blank">Follow us on Google+</a></li>
<li data-alt="Follow us on twitter"><a class="icon twitter" href="https://twitter.com/Amine041M"target="blank">Follow us on Twitter</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="http://www.pinterest.com/amine041/"target="blank">Follow us on Pinterest</a></li>
<li data-alt="Subscribe via RSS"><a class="icon rss" href="http://feeds.feedburner.com/KINAS29"target="blank">Follow us on Pinterest</a></li>
</ul>

قم بإستبدال الروابط التالية والموجودة داخل الكود بروابط مواقعك الخاصة :

https://www.facebook.com/mohammed.amine.526875
https://plus.google.com/u/0/108510761823631656796/posts
https://twitter.com/Amine041M
http://www.pinterest.com/amine041/
http://feeds.feedburner.com/KINAS29