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

يمكنك إضافة أزرار المواقع الإجتماعية  مثل تابعني على الفيسبوك وتويتر وجوجل بلس  والاشتراك في خدمة 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/AVvXsEiJ0v1SzxoAdzFWSS5fOtPcILHnsyVdWDZxol7tgceNPfPMELCTGylLae8v6kjZomja-_wBnQ5Smd_iMvTSRq23T-ExBV8JyOmflM1Cj2zxXKN9V4xWISmsap4Rhu6BP2tD1_7EqOE6dBY/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/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/AmineM"target="blank">Follow us on Twitter</a></li>

<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="http://www.pinterest.com/amine/"target="blank">Follow us on Pinterest</a></li>

<li data-alt="Subscribe via RSS"><a class="icon rss" href="http://feeds.feedburner.com/KIS29"target="blank">Follow us on Pinterest</a></li>

</ul>

   

قم بإستبدال الروابط الملونة بالأزرق بروابط مواقعك الخاصة :

https://www.facebook.com/amine.526875
https://plus.google.com/u/0/108510761823631656796/posts
https://twitter.com/AmineM
http://www.pinterest.com/amine/
http://feeds.feedburner.com/KIAS29