Şablonu düzenleye gelerek ctrl ve f tuşuna basın sonrasında " ]]> " kodunu yazın ve bulun. Hemen üzerine şu kodları ekleyin ve kaydedin;
/*---jQuery Haber Manşet Slider bywww.meftunmede.com--- */
.MEFmanset{border:1px solid #dcdbdb;width:648px;height:302px;}
.eleman{display:block!important;}
.MEFmanset .manset_resimler img{border:0 none;text-decoration:none;width:630px;height:265px;}
.MEFmanset .manset_resimler a,.MEFmanset .manset_butonlar a{text-decoration:none;color:#6f6f6f;display:block;font-size:11px;padding:0;}
.MEFmanset .manset_butonlar a{display:block;text-align:center;}
.MEFmanset .manset_resimler a{padding:0;}
.MEFmanset .manset_resimler,.MEFmanset .manset_butonlar{list-style:none;margin:0;padding:0;}
.MEFmanset .manset_butonlar{border-top:1px solid #ccc;border-bottom:0 none;height:24px;}
.MEFmanset .manset_resimler li,.MEFmanset .manset_butonlar li{list-style:none;background-color:#FFF;font-size:14px;font-family:Arial,sans-serif;-webkit-font-smoothing:antialiased;text-align:center;margin:0;padding:0;}
.MEFmanset .manset_resimler{width:648px;height:277px;}
.MEFmanset .manset_resimler li{position:relative;width:648px;height:277px;display:none;}
.MEFmanset .manset_resimler li img{width:640px;height:270px;margin:4px;}
.MEFmanset .manset_butonlar li{float:left;width:29px;line-height:24px;height:24px;border-right:1px solid #ccc;background:linear-gradient(tobottom,#efeded0,#fff7f750%,#efeded100%);font-family:Arial,sans-serif;}
.MEFmanset .manset_butonlar li.tumu{width:47px;height:24px;border-right:0 none;background-color:#f8f8f8;}
.MEFmanset .manset_butonlar li.tumu a{color:#6F6F6F;}
.MEFmanset .manset_butonlar li.tumu:hover{background:#fd0000!important;}
.MEFmanset .manset_butonlar li.aktifbuton,.MEFmanset .manset_butonlar li:hover{background:#fd0000 url(http://i.imgur.com/FgOGXrJ.gif?1) no-repeat top center;color:#FFF!important;}
.MEFmanset .manset_butonlar li.aktifbuton a,.MEFmanset .manset_butonlar li:hover a{color:#FFF;border:1px solid #900;border-top:0 none;}
/*-----Altyazı bölümü-----*/
.MEFmanset span{width:640px;height:40px;background:url(http://3.bp.blogspot.com/-0I_ABlVtjNY/U5xzR3zJxRI/AAAAAAAAAvU/-59qhk7Slq0/s1600/caption-bg.png) repeat scroll 0 0 transparent;display:block;text-shadow:1px 1px 0 #000;font-size:20px;color:#FFF;font-family:Arial,sans-serif;font-weight:400;overflow:hidden;top:225px;left:4px;text-align:center;position:absolute;z-index:4;margin:0;padding:8px 0 0;}
.MEFmanset span:hover{color:#CCC;background:url(http://3.bp.blogspot.com/-0I_ABlVtjNY/U5xzR3zJxRI/AAAAAAAAAvU/-59qhk7Slq0/s1600/caption-bg.png) repeat scroll 0 0 transparent;}
Sonrasında
kodunu aynı yöntem ile bulup üzerine şu kodları ekleyip kaydedin;
<script></script>
SON ADIM
Şimdi Blogger panelinizden Yerleşim > Gadget Ekle > HTML/JavaScript yolunu takip edin.
Ve aşağıdaki kodları Online HTML Editör ile isteğinize göre ayarlayarak, istediğiniz bölüme kopyalayıp yapıştırın.
Kaydet diyip çıkın.
Bir sitede gezerken gördüm, daha önceden bu slideri isteyen çok kişi olmuştu o yüzden konuda paylaşmak istedim.
kaynak
Özelleştirme
Style kodlarında Kırmızıyla işaretli yerlerde;
1 - width:648px; slider çercevesi genişliği, height:302px; slider çercevesi yüksekliği
Mavi işaretli yerlerde;
2 - width:640px; Resmin genişliği, height:270px; Resmin yüksekliği
Yeşil işaretli yerlerde;
3 - width:640px; Başlık-resim altyazısı bölümü şerit genişliği, height:40px; Başlık-resim altyazısı bölümü şerit yüksekliği
4 - Eğer altyazı başlık şerit'ini istemezseniz; 1. adımdaki style kodlarından işaretlemiş olduğum bölümü ve 3. adımdaki span kodlarını silebilirsiniz.
5 - Bu haber manşet slider'ındaki style kodları 20 resim ve konuya göre ayarlanmıştır. isterseniz bunu çoğaltabilir veya azaltabilirsiniz. Buna göre style kodlarında yukarıda belirttiğim width ve height değerlerini değiştirmelisiniz.
6 - Yapamayanlar yorum kısmına "yapamadım" yazmak yerine, Lütfen bana iletişim bölümünden resim liklerini, yazı linklerini, boyutlarını vs. ayrıntılı bi şekilde yazarak göndersinler. Ben istediğiniz şekilde hazırlayıp geri gönderirim sizlere. Ondan sonra güzel bi yorum yazabilirsiniz:)
DEMO
