إضافة أزرار" تابعني " لمدونات بلوجر

إضافة أزرار" تابعني " تقفز من داخل السلة لمدونات بلوجر
(Twitter-Facebook-RSS-YouTube-Delicious)

سوف نقوم بإضافة أزرار "تابعني"  بشكل جديد، هذه الأزرار تسمح لزوار مدونتك بمتابعتك من خلال (Twitter-Facebook-RSS)، هذه الإضافة عبارة عن سلة تحتوى على هذه الأزرار وتقوم بالقفز من السلة عند النقر عليها,ثم تعود داخل السلة عند النقر مرة ثانية، ويمكنك أيضا التحكم في موضع هذه الأداة حسب تنسيق مدونتك.

الخطوات:

1-    انتقل إلى لوحة تحكم مدونتك

2-    اختر التبويب "تصميم"، ثم اختر منه التبويب الفرعي "تحرير HTML"

3-    ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم و لا تنسى أن تأخذ نسخة احتياطية لمدونتك تجنبا لأية أخطاء.

4-    اضغط على CTRL+F ثم قم بالبحث عن الكود التالي:

]]></b:skin>

5-    قم بلصق هذا الكود قبله :

.stack {
position: fixed;
bottom: -5px; right: 940px; }
.stack > img { position: relative;
cursor: pointer;
padding-top: 28px;
z-index: 2;
}
.stack ul { list-style: none;
position:absolute;
top: 5px;
cursor: pointer; z-index: 1;
}
.stack ul li { position: absolute;
}
.stack ul li img { border: 0;
}
.stack ul li span { display: none;
}
.stack .openStack li span { font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
display:block;
height: 0px;
position:absolute;
top: 17px;
right:60px;line-height: 14px;border: 0;background-color:transparent;padding: 0px 0px;
border-radius: 10px;-webkit-border-radius: 0px;
-moz-border-radius: 0px;color: #4F3939;text-align: center;
text-shadow: #000 1px 1px 1px;opacity: .85;filter: alpha(opacity = 85);
}/* IE Fixes */.stack { _position: absolute; }.stack ul { _z-index:-1; _top:-15px; }.stack ul li { *right:5px; }

الكود المكتوب باللون الأحمر أعلاه يمكنك من اختيار موضع الأداة في مدونتك يمينا أو يسارا و كذلك تغيير المقاسات.

6-    انتقل إلى لوحة تحكم مدونتك، اختر "تصميم" ثم إضافة أداة ثم اختر HTML/JavaScript الصق الكود التالي :

<div class="stack">
<img alt="stack" src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/stack.png" ilo-full-src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/stack.png" /><ul id="stack">

<li><a href=" 1"><span></span><img alt="Facebook" src="http://1.bp.blogspot.com/_JUJEXEamsyU/SseBy0fACpI/AAAAAAAAAko/mVIO1rP2a7g/s320/facebook.png" ilo-full-src="http://1.bp.blogspot.com/_JUJEXEamsyU/SseBy0fACpI/AAAAAAAAAko/mVIO1rP2a7g/s320/facebook.png" /></a></li>

<li><a href="2"><span></span><img alt="RSS" src="http://www.trables.com/social_images/rss.png" ilo-full-src="http://www.trables.com/social_images/rss.png" /></a></li>

<li><a href="3"><span></span><img alt="youtube" src="https://easyjet.custhelp.com/euf/assets/images/youtube.png" ilo-full-src="https://easyjet.custhelp.com/euf/assets/images/youtube.png" /></a></li>

<li><a href="4"><span></span><img alt="technorati" src="http://2.bp.blogspot.com/_JUJEXEamsyU/SseBvuXqEbI/AAAAAAAAAkY/sZbUDV5zNH0/s320/twitter.png" ilo-full-src="http://2.bp.blogspot.com/_JUJEXEamsyU/SseBvuXqEbI/AAAAAAAAAkY/sZbUDV5zNH0/s320/twitter.png" /></a></li>



<li><a href="5"><span></span><img alt="delicious" src="http://1.bp.blogspot.com/_JUJEXEamsyU/SseB3LY7lkI/AAAAAAAAAk4/1lsxOZ_klP4/s320/delicious.png" ilo-full-src="http://1.bp.blogspot.com/_JUJEXEamsyU/SseB3LY7lkI/AAAAAAAAAk4/1lsxOZ_klP4/s320/delicious.png" /></a></li></ul></div>

<!-- end div .stack --><script src="https://sites.google.com/site/mohamedabuiyad/button/jquery.min.js" type="text/javascript"></script><script src="https://sites.google.com/site/mohamedabuiyad/button/fisheye-iutil.min.js" type="text/javascript"></script>

<span ><a href="http://abu-iyad.blogspot.com/" target="_blank"></a></span>

الكود المكتوب باللون الأزرق أعلاه هو عبارة عن روابط لصورة السلة، لا تقم بتبديلها لأنك إذا فعلت ذلك لن يظهر لك شيء مكان الأداة.

7-    قم بوضع الروابط الخاصة بك مكان الأرقام المكتوبة باللون الأحمر و ذلك على النحو التالي:

ضع مكان الرقم (1) رابط صفحة الـFacebook الخاصة بك.

ضع مكان الرقم (2) رابط الخلاصات RSS.

ضع مكان الرقم (3) رابط قناتك الخاصة على Twitter.

ضع مكان الرقم (4) رابط Twitter.

ضع مكان الرقم (5) رابط الــ Delicious.