Blogger Otomatik Slider ( Manşet ) Eklentisi

Blogger Otomatik Slider ( Manşet ) Eklentisi

Son yıllarda blog yazarlarının sayısının artması ile rekabetin de arttığını görebiliriz. Bu rekabet ortamı içerisinde blog yazarları okuyucularının blogları üzerinde daha fazla zaman geçirmelerini sağlamaya çalışmaktadır. Blog yazarları ziyaretçilerin blogda daha fazla geçirmeleri için kimi zaman tasarımı değiştirerek kimi zamanda bazı eklentiler aracılığıyla ziyaretçileri bloglarda uzun süre tutmaya çalışmakta.


Okuyucuların genellikle arama sorguları üzerinden doğrudan içeriğimize ulaştığını düşünürsek. Aylar önce yazdığımız bir yazıyı arama motoru üzerinden bulan ve ziyaret eden bir okuyucu en son yazdığımız yazıları görebilmesi için blogumuzun ana sayfasını ziyaret etmesi gerekmektedir. Okuyucumuzun son içeriğimizi görebilmesini sağlamak için de onun dikkatini çekebilmek önemlidir. Okuyucularımızın bu şekilde dikkatini çekebilmek için blog düzenimiz içerisinde ona son yazılarımızı göstermek önemlidir.

Eklentiyi eklemek için öncellikle </head>   kodunu buluyoruz ve hemen altına aşağıdaki kodu ekliyorsunuz.
 <script type='text/javascript' src='https://mywepblogger.googlecode.com/svn/Slider.js'/>  

Yukardaki kodu ekledikten sonra ise hemen ]]></b:skin> kodunu bulup üstüne gelecek şekilde aşağıdaki Css kodlarını ekliyorsunuz
 #featured-wrap{border-bottom:1px solid #000;box-shadow:0 1px 0 0 #333;background:#111;position:relative;height:175px;margin:0 auto}  
 #featured{border:2px solid #444;outline:1px solid #000;position:relative;width:88%;height:150px;overflow:hidden;top:10px;margin:0 auto}  
 #featured ul{width:9999px}  
 #featured ul,#featured li{list-style:none;padding:0;margin:0;overflow:hidden}  
 #featured li{width:150px;display:inline-block;float:left;height:150px;background:#222;border-left:1px solid #111;border-right:1px solid #333;}  
 .thumb-featured{width:140px;height:100px;margin:5px auto;overflow:hidden;border:1px solid #000}  
 .thumb-featured img{display:block;width:134px;height:94px;border:3px solid #444;}  
 .title-featured{text-align:center;position:relative;margin-top:-20px}  
 .title-featured h4{font-size:90%;max-height:45px;overflow:hidden}  
 .arrow{position:absolute;display:block;background:#111 url(https://lh5.googleusercontent.com/-fgJF4xfwZiI/Uo9o8L5lRLI/AAAAAAAAGnw/YItb5JVccVM/h120/icon-sprite.png)no-repeat;background-position:0 50%;width:35px;height:60px;top:50px;text-indent:-9999px;border:1px solid #000;box-shadow:0 0 0 1px rgba(51, 51, 51, 1)inset}  
 .arrow.back{background-position:0 50%;left:10px}  
 .arrow.forward{background-position:100% 50%;right:10px}  
 span.slideryükleniyor{background-image:url(https://lh5.googleusercontent.com/-lMCTbMrvSCM/Uo-ClIXhv4I/AAAAAAAAGoY/5JDUhG_-HYA/h42/loading.gif);background-repeat:no-repeat;background-position:50% 50%;text-indent:-9999px;margin:50px auto}  

Css kodlarınıda ekledikten sonra şimdi son aşama geldik şimdi son olarak   <div id='main-wrapper'> bulup aşağıdaki kodları kodun altına veya üstüne ekleyebilirsiniz...
 <b:if cond='data:blog.url == data:blog.homepageUrl'>  
 <div id='featured-wrap'>  
 <div id='featured'>  
 <span class='slideryükleniyor'>yükleniyor...</span>  
 </div>  
 </div>  
 </b:if>  
Eklenti ilgili sorunlarınızı yorumda sorabilirsiniz... İyi bloglamalar

Daha Fazlası: RSS Feed | Email Aboneliği Yayın Sayısı :