طريقة اضافة ازرار للمتابعة على المواقع الاجتماعية لمدونات بلوجر مع ميزة الانزلاق عند التأشير عليها

الطريقة :

 1. لوحة التحكم

2.    تصميم 

3.  اضافة اداة

4. اضافة اداة HTML / JavaScript

5. انسخ الكود اسفله داخلها

<style>

ul#navigation {

position: fixed;

margin: 0px;

padding: 0px;

top: 0px;

right: 0px;

list-style: none;

z-index:999999;

width:721px;

}

ul#navigation li {

width: 103px;

display:inline;

float:left;

border:0;

}

ul#navigation li a {

display: block;

float:left;

margin-top: -2px;

width: 100px;

height: 25px;

background-color:#eeeeee;

background-repeat:no-repeat;

background-position:50% 10px;

border:1px solid #BDDCEF;

-moz-border-radius:0px 0px 10px 10px;

-webkit-border-bottom-right-radius: 10px;

-webkit-border-bottom-left-radius: 10px;

-khtml-border-bottom-right-radius: 10px;

-khtml-border-bottom-left-radius: 10px;

text-decoration:none;

text-align:center;

padding-top:80px;

opacity: 0.96;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

}

ul#navigation li a:hover{

background-color:#CAE3F2;

}

ul#navigation li a span{

letter-spacing:2px;

font-size:11px;

color:#60ACD8;

font-family:trebuchet-ms, arial, tahoma, Sans-Serif;

font-weight:bold;

text-shadow: 0 -1px 1px #fff;

}

ul#navigation .rss a{

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3wNCvRWZNJY7ga4ic340hNGYObw6XwodDoKywZIyaLW7zUQc1uJE9EiwKE4Kg6d6lkvpF1MB9QNwLJz1tcNVvgATN0bJAC0qmTR41AWejoY4pcX4-mkSCuAJmSRn7Tou94vdW0PfrUaD4/s400/rss_64x64.png);

}




ul#navigation .facebook a {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2kz1ItrJGPMgy3sWjPiiIesGpddQHMw4PzRKm-DUbzrYfdY2liLDwvU9ZQ2okzA_vU4xrxiso2hA61rcTNgnsJjD1oftgbNooR1PkffLTEDXFZUG8Xnpq41sgNPXm8jH6O8EqX-AIMWav/s400/facebook_64x64.png);

}

ul#navigation .twitter a {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyj3huKJOzK8gsZLYC2MfhJsnOnWab0WbsLVHLIb44Y4_-sBb5m1d7dTiwgsDFTSr0VGXoB-VWpMxEhV7oRw8ISaHygRyfJj5an6rq8WXjOl1XDMeOKK5so_iye-kXMYf5Z26MhyphenhyphenuIhxsS/s400/twitter_64x64.png);

}

ul#navigation .googlebookmarks a {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQTNI_GdP0IChREi1T_hNWWttjn_GSM0ATs_8GkKo-3_ZAir2a-wo29OFvIlp4__KQCaCZlWwiHcCddJEsI72TsanKLkI8tUmwE_BIiAhGxbNLIy3H4N8GdzoUWe3TpaA23RPhQAjtFdBc/s1600/google_64x64.png);

}




</style>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript">

</script>

<script type="text/javascript">

$(function() {

var d=300;

$('#navigation a').each(function(){

$(this).stop().animate({

'marginTop':'-80px'

},d+=150);

});

$('#navigation > li').hover(

function () {

$('a',$(this)).stop().animate({

'marginTop':'-2px'

},200);

},

function () {

$('a',$(this)).stop().animate({

'marginTop':'-80px'

},200);

}

);

});

</script>

<ul id="navigation">

<li class="rss"><a href="http://feeds.feedburner.com/ilmondoo/rInPq">RSS Feed</a></li><li class="facebook"><a href="http://facebook.com/ilmondooblogger">Facebook</a></li><li class="twitter"><a href="http://twitter.com/ilmondoo">Twitter</a></li><li class="googlebookmarks"><a href="https://plus.google.com/005111763875634408355">Google puls</a></li>

</ul>