**سنتناول في هدا الشرح اضافة تضفي على المدونة شكلا جميلا ,هي تحتوي على أزرار للمتبعة على المواقع الاجتماعية ويكون المكان الذي توضع فيه هو الهيدر يعني رأس الصفحة ,الأزرار تكون مصطفة بشكل أفقي وعند التأشير على أي زر ينزلق وبه أيقونة الموقع الاجتماعي .وطريقة التركيب سهلة.
طريقة التركيب
1 اذهب للوحة التحكم
هدا هو الكود
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/AVvXsEjCd7XAeJZjgxiLM-d-FLY1HnZe46E7wh9G1IU_GFssinsW9Gj3yY2wogsyIWOSoGmggYRWe83NC46z5K3IwT7cpf0lhsYqiejyl6prwi13oFJN0iytT3fFakFxBdzqh2iLaN6-uiLlwyKv/s400/rss_64x64.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7P1w_-KrccGMz8p6LP091ZK1bNjyiQbL297S9dAAT15-SLpGs05RREsifx7bQSVrcQR0ArDvevkqKlbMU-u-tfrJkNVvsKQuLMHbXGgEE4qQdbwUndKt9MEPOcXvhnTNtbs9fLnqzIB7Z/s400/facebook_64x64.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbjo7ZOESKmevHn-UK8DbC0RS6qpd-3U6kPXZnK5ojEQssOFa3cq99mscSUthNSI7O8r6qK-F7Wmh6ex7lM9Ce-94gMNSJoXkCnYCdeNFbwF9Ce3EdujTC6noTgdDy6IRWpJ6UfyCdjqZC/s400/twitter_64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1VGwwpVPC0AWBIOn7jiu6nlUeF8OEPD1qGZazgLzPpJjel4FtFFL8FTdg33fJLcbT-kgHjOvpRyRS5fb_djRwctnxGKV9mkxqJUppUoZv5Can38qenUm6-bf5OvtUa0TfM6aJeggLXmqh/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
-قم بتبديل chamelcool/rInPq بعنوان التغدية الخاص بموقعك و التي ستجدها في اخر رابط التغدية الخاص بمدونتك
-غير 105111763875634408359 بالأرقام الموجودة في رابط صفحتك على جوجل على google plus
*ثم احفض الأاداة.
0 التعليقات:
إرسال تعليق