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

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

كما أنك تستطيع التحكم في مكان القائمة.فإذا أردتها في:
 أعلى المدونة ضع   top
أسفل المدونة ضع    bottom
على يسار المدونة ضع   right
على يمين مدونة ضع   left

طريقة الإضافة
اذهب للوحة تحكم مدونتك >> التخطيط >> اضافة أداة JAVA/HTML.
ضع بها الكود التالى وقم بالحفظ.

  <div id='social-sidebar'> <ul> <li> <a class='entypo-twitter' href='https://twitter.com/رابط تويتر' target='_blank'> <span>Twitter</span> </a></li> <li> <a class='entypo-gplus' href='https://plus.google.com/رابط جوجل بلاس' target='_blank'> <span>google+</span> </a></li> <li> <a class='entypo-tumblr' href='http://www.tumblr.net/رابط تمبلار' target='_blank'> <span>tumblr</span> </a></li> <li> <a class='entypo-facebook' href='http://www.facebook.net/https://www.facebook.com/رابط فيسبوك' target='_blank'> <span>facebook</span> </a></li> <li> <a class='entypo-rss' href='http://feeds.feedburner.com/رابط فيد' 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 { right: 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 { right: 130%; /* ---------- مكان القائمة ---------- */ opacity: 1; } #social-sidebar ul li a span { border-radius: 3px; line-height: 24px; right: -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; right: -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>

;
غير الروابط فى الكود أعلاه بما يناسبك ، إذا وجهتك أي صعوبة فضعها في تعليق.