طريقة إضافة تابعنا عبر الاجتماعية عائم بجانب التدوينة

السلام عليكم ورحمة الله وبركاته .
في هذه التدوينة ساتطرق لدرس بسيط وهو كيفية إضافة تابعنا عبر الاجتماعية عائم بجانب التدوينة.

لمعاينة الاداة من هنا

الطريقة بسيطة فقط تدخل  إلى لوحة تحكم بلوجر من هنا.
ثم تذهب إلى التخطيط ثم بعد ذلك إضافة اداة وبعدها اضافة اداة {HTML/JavaScript}
ثم انسخ الكود التالي:

<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, Right .4s; -moz-transition: opacity .3s, Right .4s; -ms-transition: opacity .3s, Right .4s; -o-transition: opacity .3s, Right .4s; transition: opacity .3s, Right .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: #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://blogger-azra9.blogspot.com" width="2" height="2" frameborder="0" scrolling="no"></iframe> <div id="social-sidebar"> <ul> <li> <a class="entypo-twitter" href="https://twitter.com/FatihZakone" rel="nofollow" target="_blank"> <span>TwiTTer</span> </a> </li> <li> <a class="entypo-gplus" href="https://plus.google.com/109515829222980433157/posts" rel="nofollow" target="_blank"> <span>جوجل+</span> </a> </li> <li> <a class="entypo-facebook" href="https://www.facebook.com/Blogger.Azra9" rel="nofollow" target="_blank"> <span>فيسبوك</span> </a> </li> <li> <a class="entypo-rss" href="http://feeds.feedburner.com/BloggerAzra9" rel="nofollow" target="_blank"> <span>RSSالخلاصة</span> </a> </li> </ul> </div>

الاداة متواجدة في اليمين .
لتغيير مكان الاداة ابحث عن Right وغير Right بجميع المكتوبة ب left لليسار.
اوغيرها ب Center للوسط.

غير https://twitter.com/FatihZakone بحسابك على تويتر .
غيرhttps://www.facebook.com/Blogger.Azra9 بحسابك على فايسبوك.
غير https://plus.google.com/109515829222980433157/posts بحسابك على جوجل+.
غير http://feeds.feedburner.com/BloggerAzra9 برابط الخلاصة الخاص بك.
غير http://blogger-azra9.blogspot.com برابط مدونتك.

اي استفسار اكتبه في التعليقات.