اضافة الشريط الجانبى المتحرك لشبكات التواصل الاجتماعى فيس بوك وتويتر وجوجل بلس بشكل انيق وجذاب

بسم الله الصلاة والسلام على رسول الله , السلام عليكم احبائى وااخوانى متابعي مدونة تقنيه 
هل تعتقد ان بلوجر تفتقر الى الاضافات المميزة؟؟

 هذا الاعتقاد خاطئ.فهناك كثير من الاضافات الاحترافيه التي تمكنك من تخصيص مدونتك وتطويرها لتظهر بشكل جذاب واحترافي ,واليوم باذن الله سوف نكسر هذا المعتقد بهذه الاضافه الاحترافيه والتي هي عباره عن شريط جانبي على شكل قائمه عموديه  تتضمن خمس من اشهر مواقع التواصل الاجتماعي  (twitter ,Facebook ,Google+, feedburner, tumblr  )والتي تتميز بشكلها الرائع والانسيابي والذي بدوره يزيد من جمالية المدونه واحترافيتها

طريقة اضافة هذه القائمه الى مدوناتكم

• اذهب إلى لوحة تحكم مدونتك
• إختر "تخطيط" ثم إضافة أداة ثم اخترHTML/Javascript
•  والآن الصق داخل المستطيل الكود التالي 

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55"><div id='social-sidebar'>
<ul><li>
<a class='entypo-twitter' href='https://twitter.com/MDiabyan' target='_blank'>
<span>Twitter</span>
</a></li><li>
<a class='entypo-gplus' href='https://plus.google.com/u/0/b/116411742657674307736' target='_blank'>
<span>google+</span>
</a></li><li>
<a class='entypo-tumblr' href='http://www.tumblr.net/mohamedshoman' target='_blank'>
<span>tumblr</span>
</a></li><li>
<a class='entypo-facebook' href='http://www.facebook.net/mido.7s' target='_blank'>
<span>facebook</span>
</a></li><li>
<a class='entypo-rss' href='http://feeds.feedburner.com/blogspot/CfbLr' target='_blank'>
<span>feedburner</span>
</a></li></ul></div>
<style type='text/css'>
/*<![CDATA[*/
@charset "utf-8";
/* CSS Document */
/* ---------- ENTYPO ---------- *//* ---------- Digital Hub Inc : /---------- */
@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>
</p></div></form>

تخصيص الاضافه

1- استبدال ماباللونblogspot/CfbLr باسم حسابك في فيدبرنر
 2- استبدال ماباللون MDiabyan باسم حسابك في تويتر
 3- استبدال ماباللونMido.7s باسم صفحتك في فيس بوك 4- استبدال ماباللون116411742657674307736 باسم حسابك جوجل بلس
 5- استبدال ماباللونmohamedshomani باسم حسابك في تمبلر

المصدر : مدونة الجعفرى