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

شاركه على +Googleأضفه الى Deliciousشاركه على Twetter شاركه على Facebookأضفه الى StumbleUpon أضفه الى Digg

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

طريقة التركيب
1 اذهب للوحة التحكم

2. تخطيط 

3.عناصر الصفحة

4. اضف اداة

6.اختار  Html/Javascript

 هدا هو الكود

<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/AVvXsEh3WEtXy6eD_jhEQDVpmtflHsnBjNSmCA7gLVNTVDIzuQAv8jkk00b5UpJmKpyB2aarMSXeOFWKnI7m0C0XLIF52QFAxRPJfCVj_smEjTmgnP7G-YCCnn8WXBrAabg2VlqPSYml71PEISAP/s400/rss_64x64.png);

}

ul#navigation .facebook a {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb2UucCNfm8dpf1_L8_I_GKPK8eNYRHpEk0tzwg8xScTdbVZyzWAWhl_4HbOix0nQ5bY4uP6gQr0_BHlOeSr-4FfBxOlHZoJuCN5uajMgP3MwKLP5K_PNAFx_blArIFfqH4T7BJ31F_wrL/s400/facebook_64x64.png);

}

ul#navigation .twitter a {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit80bSnIVuhwVybUjrnvPUMhsRnX-nSKGGNUNske4lPLGQxBFpuHNpD8SNZQpe2gN_43RqPqji8xCFY-p735QkdvfAT2H_cfXdexCf5rOwJ1AukmIg6OtFg0SFFQbhAJ8nErVLj_zhi3sP/s400/twitter_64x64.png);

}

ul#navigation .googlebookmarks a {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihbSSAnSwfDJ3zb-BK13DpcfEiRJt0438fXPurisH6t31HsxV7NAFJYFd2j2hgmjtCU4SpybYmFov0pLV-FNvHJ9bNgNnbnC0zWPciq-FA1JBnNE3lzrKUZzBjZe6IxnKV_2xaUYccunem/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/chamelcool/rInPq">RSS Feed</a></li><li class="facebook"><a href="http://facebook.com/chamelcoolblogger">Facebook</a></li><li class="twitter"><a href="http://twitter.com/chamelcool">Twitter</a></li><li class="googlebookmarks"><a href="https://plus.google.com/105111763875634408359">Google puls</a></li>

</ul>

*ملاحظة :

-غير chamelcool  باسم صفحتك على twitter

-غير chamelcoolblogger باسم صفحتك على    facebook

-اذا كان اسم صفحتك طويل جدا و عبارة عن أصفار  قم الدخول هنا  Facebook.com/username  واختر اسم لصفحتك

-قم بتبديل chamelcool/rInPq   بعنوان التغدية الخاص بموقعك و التي ستجدها في اخر رابط التغدية الخاص بمدونتك

-غير 105111763875634408359   بالأرقام الموجودة   في  رابط صفحتك على جوجل على google plus

*ثم احفض الأاداة.

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


كما ترى طريقة التركيب سهلة والاداة خفيفة ,والى هنا ينتهي موضوعنا والسلام عليكم

Tweet

Social Sharing Widget bychamelcool

التصنيف : أدوات بلوجر