Blogger Jquery Haber Manşet Slider

Merhaba arkadaşlar, biliyorsunuzki javascript ile manşet alanı birçok sitede kullanılan bir yöntem. Bu yazımda sizlerle javascript'in bir kütüphanesi olan jquery kullanarak birçok haber sitesinde görebileceğiniz bir slider paylaşacağım. Tıklanabilir linkler, tıklanabilir slayt, numaralı geçişleri tanımlayabilirsiniz. Haber makale başlıklarınızı ister resimlerinizde isterseniz altyazı bülümünde yazabileceğiniz çok şık bir haber manşet slider eklentisi. Birçok internet tarayıcısı (Internet Explorer, Firefox, Google Chrome, Safari) ile test edilen eklenti sorunsuz olarak çalışmaktadır.

1. Adım

Blogger panelinize giriş yapın > Şablon > HTML'yi Düzenle
Ctrl+F yardımı ile ]]></b:skin> kodunu aratıp bulun ve hemen üstüne aşağıdaki kodları kopyalayıp yapıştırın.

/*---jQuery Haber Manşet Slider by www.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_nVx-tlj6JJO1cAsX8m3xlJtpiGhNnuJFSyPMvY6EG4adHYjn1veiWdHK2yrzKLlbk66QPkgBh5E5OktG-bcpF779V8z3zi1HPW_eC5EaVdpANRZwrFquOTUL23OhvFepzpOBdDlLLnQ/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_nVx-tlj6JJO1cAsX8m3xlJtpiGhNnuJFSyPMvY6EG4adHYjn1veiWdHK2yrzKLlbk66QPkgBh5E5OktG-bcpF779V8z3zi1HPW_eC5EaVdpANRZwrFquOTUL23OhvFepzpOBdDlLLnQ/s1600/caption-bg.png) repeat scroll 0 0 transparent;}

2. Adım

Tekrar Ctrl+F yapıp </head> kodunu buluyoruz ve hemen üstüne aşağıdaki javascript kodlarını kopyalayıp yapıştırıyoruz.
Şablonu Kaydet diyip çıkın.

<script src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'></script>
<script src='http://meftun-mede.googlecode.com/svn/trunk/JQuery_Haber_Manset_Slider.js' type='text/javascript'></script>

3. Adım

Ş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.

<div class="MEFmanset">
<ul class="manset_resimler">
<li  class="eleman">
<a href="Haber_Linki.html" title="Haber_Başlığı" target="_blank"><img src="Resim_Linki.jpg" alt="Resmin tanımı" width="Resmin orjinal genişliği" height="Resmin orjinal yüksekliği"/></a>
<!--Örnek-1 Başlık-resim altyazısı bölümü başla-->
<span>Başlık-resim altyazısı</span>
<!--Örnek-1 Başlık-resim altyazısı bölümü bitiş-->
</li>
<!--Örnek-1 bölümü bitiş-->
<li >
<a href="http://www.örnek.com/örnek_yazi.html" title="Örnek yazı" target="_blank"><img src="http://www.örnek.com/images/örnek_yazi.jpg" alt="Örnek yazı" width="580" height="385"/></a>
<span>Örnek yazı</span>
</li>
<!--Örnek-2 bölümü bitiş-->
<li >
<a href="http://www.meftun-demo.blogspot.com/2014/08/googledan-kontakt-lens-kamera.html" title="Google'dan kontakt lens kamera" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqMCcVOzq48bXZQAxN6BxTPg48Unvd8UJ1X13UyeExxt9lXh3JYASBd5yOAz-9XOlD-iN4Lt-NjmeLtxGuR7kkXKjGb8L5CRuwyClhOP2JOiWTnT7_zyV2fNLNktnwkWx8pqNFp86L0EM/s1600/contact-lens-google-glass-eyeball-670.jpg" alt="Google'dan kontakt lens kamera" width="670" height="440"/></a>
<span>Google'dan kontakt lens kamera</span>
</li>
<!--Örnek-3 bölümü bitiş-Burdan itibaren istediginiz kadar çoğaltabilirsiniz-->
</ul>
<!--manşet resimler bölümü bitiş-->

<ul class="manset_butonlar">
<li class="aktifbuton">
<a href="Haber Linki.html" title="Haber Başlığı" target="_blank">1</a></li>
<li>
<a href="http://www.örnek.com/örnek_yazi.html" title="Örnek yazı" target="_blank">2</a></li>
<li>
<a href="http://www.meftun-demo.blogspot.com/2014/08/googledan-kontakt-lens-kamera.html" title="Google'dan kontakt lens kamera" target="_blank">3</a></li>
<!--Burdan itibaren istediginiz kadar çoğaltabilirsiniz-->
<li class="tumu">
<a href="#" title="Tüm Haberler" target="_blank">TÜMÜ</a></li>
</ul>
</div>

Ö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.