إضافة المفضلات الإجتماعية بشكل أنيق لمدونات بلوجر

في هذه التدوينة  أحببت أن أشاركك إضافة من أضافات الجميلة.وهذه الإضافة هي إضافة المفضلات الإجتماعية لمدونات blogger.فهي تعطي رونقا جميلا جدا وهذا ما يساهم في إنشاء مدونة ناجحة.
صورة الإضافة:

لإضافة الكود لمدونات بلوجر:

1.اذهب إلى لوحة التحكم
2.تخطيط أو تصميم
3.عناصر الصفحة
4.أضف أداة
5.أختار HTML/JAVASCRIPT
6.إستبدال الروابط الملونة باللون الأزرق بما يناسبك

<style>
#BT_social {width: 260px;margin: 5px 20px;padding:5px;}#BT_social li {cursor: pointer;height: 48px;position: relative;list-style-type: none;}#BT_social .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfGtS5bSucBXSLMmFE5yYhMERsqAxBpOWX-DRQIpA_oQKQCK5nxSW1S1iDrGBJBHfQo0H0PsL-YAtDsEr6NxYQTlgk5ZCFHi5XKaocB1rZW_cKYZ8ZUk5ZTQpCIGekhepzDZVKoHGIVcU/s1600/Social_Button.png') 0 0 no-repeat;background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;color: #0033CC;float:none;height: 48px;line-height: 48px;margin: 5px 0;position: relative;text-align: left;text-indent: 90px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5;-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;-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;-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;text-decoration: none;}
#BT_social span:hover {visibility: hidden;}
#BT_social span {display: block;top: 15px;position: absolute;left: 90px;}
#BT_social .icon {color: #fafafa;overflow: hidden;}
#BT_social .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -190px;}
#BT_social .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -238px;}
#BT_social .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -286px;}
#BT_social .rss {background-color: rgba(204, 0, 0, .42);background-position: 0 -333px;}
#BT_social li:hover .icon {width: 250px;}
#BT_social li:hover .icon {background-color: #d91e76;}
#BT_social li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}
#BT_social li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}
#BT_social li:hover .google {background-color: #A70000;background-position: 0 -94px;}
#BT_social li:hover .rss {background-color: #EC5601;background-position: 0 -142px;}
#BT_social .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}
</style>

<br />
<ul id="BT_social">
<li><a class="icon fb" href="http://www.facebook.com/chahidna">Like us on Facebook</a></li>
<li><a class="icon twit" href="https://twitter.com/chahidna">Follow us on Twitter</a></li>
<li><a class="icon google" href="https://plus.google.com/">Follow us on Google+</a></li>
<li><a class="icon rss" href="http://www.feedburner.com/chahidna">Subscribe via RSS</a></li>
</ul>