Blogger dersleri yazı dizisine devam ediyoruz. Bu sefer anlatacağım eklenti ise şu şekilde; Blogunuzun yan tarafına, Anasayfa linki, mailve rss iconları ekliyor. Dolayısı ile hem blogunuzun görselleşmesini hem de rss ve iletişim bilginizi ziyaretçilerinizin kolayca görmesini sağlıyorsunuz. Sayfa aşağıya indikçede, yan menü aşağıya iniyor. Yani, çok kullanışlı bir eklenti olduğunu düşünüyorum. Kullanımı ise çok basit, aşağıdaki adımları uygulamanız yeterli olacaktır. Şimdiden kolay gelsin arkadaşlar.Öncelikle, Widget Şablonlarını Genişlet seçeğinin yanındaki kutucuğu işaretliyoruz.
Daha sonra ise, aşağıdaki kodu buluyoruz,
]]></b:skin>Daha sonra, yukarıdaki koddan önce aşağıdaki kodları ekliyoruz;
.fixed_menu {
position: fixed; /*set the position type for non IE systems*/
top: 140px;
left: 0px;
width: auto;
margin: 0 0px 0px 0px;
background: #ffffff;
opacity:.900;
filter: alpha(opacity=90);
padding: 7px 5px 5px 5px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 0px;
}
.fixed_menu a:hover img {
position: relative;
top: 2px;
left: 2px;
border-top: 1px solid #b3b3b3;
border-left: 1px solid #b3b3b3;
border-bottom: 2px solid #999999;
border-right: 2px solid #999999;
}
.fixed_menu a { display: block; } /*Optional : This puts each link in the menu on a new line, remove if you want a horizontal menu*/
* html .fixed_menu {position:absolute;} /*IE only change the position mode of the menu*/Son olarak aşağıdaki kodu buluyoruz;
<body>Ve yukarıdaki koddan sonra aşağıdaki kodu ekliyoruz;
<div class='fixed_menu'>
<a href='http://blogunuzunlinki' title='Anasayfa'>
<img src='http://i46.tinypic.com/33be0cg.png'/></a>
<a href='mailto:mailadresiniz' title='Mail'>
<img src='http://i45.tinypic.com/6glawh.png'/></a>
<a href='http://blogunuzunadi.blogspot.com/feeds/posts/default' title='Yazılar için RSS!'>
<img src='http://i49.tinypic.com/2ym8u10.png'/></a>
<a href='http://blogunuzunadi.blogspot.com/feeds/comments/default' title='Yorumlar için RSS!'>
<img src='http://i46.tinypic.com/24e2fc7.png'/></a>
</div>Yukarıda yer alan kırmızı renkli linkleri, kendi blogunuza göre değiştirmeyi unutmayınız.
0 yorum:
Yorum Gönder