اضافة Social Bookmark بشكل عمودي

2

سم الله الرحمان الرحيم

السلام عليكم اخواني واخواتي اليوم ساطرح درس جديد واضافة مميزة بشكلها الانيق انها اضافة Social Bookmark بشكل عمودي الاضافة جميلة وتضيف الى المدونة رونق خاص كما انها تسهل من عملية النشر على الشبكات الاجتماعية

مثال على ذلك :

لنبدأ على بركة الله :
الخطوة الاولى
ندخل الى المدونة ثم نتجه الى design=>html ثم نبحث عن :
]]></b:skin>
ثم قبلها مباشرة نضع الكود الموالي :

#divStayTopLeft {left:5px;position:absolute;top:15px;}



.sidetab {}



.sidetab ul {list-style-type: none;margin: 0;margin-top: 220px;margin-left: -2px;padding: 0;}



.sidetab ul li {border-bottom: 0;margin-bottom: 0;padding: 0;}



.sidetab a {background: none;display: block;height: 25px;margin-top: 0px;padding: 2px;width: 25px;}



.sidetab a:link, .navlist a:visited {color: #555;text-decoration: none;}



.sidetab a:hover {border: none;background: #e8e8e8;}



.sidetab .button a {background:none;height: 25px; width: 25px;}

الخطوة الثانية

نبحث عن :</body>
ثم قبلها نضيف هذا الكود:

<DIV id='divStayTopLeft'>



<div class='sidetab'>



<ul class='navlist'>







<li  class='button'><a  href='http://bdlab.blogspot.com/feeds/posts/default'><img  height='25' src='http://upic.me/i/ci/rss_48.png' title='Subscribe to RSS  feed' width='25'/></a></li>



<a  class='addthis_button_facebook'><img alt='Facebook' height='25'  src='http://upic.me/i/8n/facebook_32.png' width='25'/></a>



<a  class='addthis_button_delicious'><img alt='Delicious' height='25'  src='http://upic.me/i/k6/delicious.png' width='25'/></a>



<a  class='addthis_button_email'><img alt='Email' height='25'  src='http://upic.me/i/bo/emailsmall.jpg' width='25'/></a>



<a  class='addthis_button_favorites'><img alt='Favorites' height='25'  src='http://upic.me/i/ij/favorites.png' width='25'/></a>



<a  class='addthis_button_twitter'><img alt='Twitter' height='25'  src='http://upic.me/i/bx/twitter_32.png' width='25'/></a>



<a  class='addthis_button_google'><img alt='Google' height='25'  src='http://upic.me/i/fm/gsmall.jpg' width='25'/></a>



<a  class='addthis_button_digg'><img alt='Digg' height='25'  src='http://upic.me/i/0v/mdigg.png' width='25'/></a>



<a  class='addthis_button_more'><img alt='More' height='25'  src='http://upic.me/i/5e/wmore.png' width='25'/></a>



</ul>



</div>



</DIV>



<script src='http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a65e1d93cd75e94' type='text/javascript'/>



<script src='http://hackublog.googlecode.com/files/FloatingMenu.js' type='text/javascript'/>