إضافة ازرار للمواقع الاجتماعية للبلوجر jQuery

اليوم اقدم لكم اضافة جميلة وتضفي بهجة لمدونتك علي البلوجر لتعدد الوانها وتقنية jQuery  المستخدمة فيها انها ازرار للمواقع الاجتماعية توضع علي جانب المدونة ذات شكل جذاب والوان زاهية

معاينة الاضافة

اذا اعجبتك الاضافة وتريد تركيبها في مدونة بلوجر الخاص بك من لوحة التحكم بمدونتك قم بالضغط علي التخطيط ثم اضافة أداة>> Html/java script بلصق الكود ثم قم بلصق الكود التالي : 

<style type="text/css">

.btnt-chronicl-social {  width: 320px;  margin: -10px;  }

.btnt-chronicl-social ul {  margin: 0;  padding: 0;  }

.btnt-chronicl-social ul li {  list-style:none;   padding: 0; text-transform: none; }

.btnt-chronicl-social ul li a {   color: #fff;   display:block;  }

.btnt-chronicl-social ul li a:hover {  color: #c9c9c9;  background-color: #333;   }

.btnt-chronicl-social ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 17.5px 45px; }

.btnt-chronicl-social ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 17.5px 45px;}

.btnt-chronicl-social ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 17.5px 45px; }

.btnt-chronicl-social ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 17.5px 45px; }

.btnt-chronicl-social ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; background-size: 20px; padding: 17.5px 45px; }

</style>

<div class="btnt-chronicl-social">

<ul>

<li><a class="rss" href="http://feeds.feedburner.com/technawy">Subscribe to the RSS Feed</a></li>

<li><a class="twitter" href="https://twitter.com/ta3lemblog">تابعنى على تويتر</a></li>

<li><a class="facebook" href="https://www.facebook.com/ta3lemblog">تابعنا على فيس بوك Facebook</a></li>

<li><a class="google" href="https://plus.google.com/ta3lemblog">Join me on Google+</a></li>

<li><a class="linkedin" href="http://in.linkedin.com/in/ta3lemblog">اتصل بى من خلال LinkedIn</a></li>

</ul>

</div>

 غير ما بالون الاحمر بروابط صفحاتك علي المواقع الاجتماعية وأخيرا،قم بحفظ النموذج