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.


ÖNİZLEME

1. Adım

  1. Blogger panelinize giriş yapın > Şablon > HTML'yi Düzenle
  2. 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(https://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/AVvXsEirpl5gx6PVhnnHcdinT12RO5YE37S3ZraUTG47pnFLPsL05huLKZ_LW3MaxUgQ27WE_Cg3mD1eWWE7o0iWL_eEdOhwC_iy0NLNg5iCJPB5YLuHDcJbZnFAs1wqjdhR5VC1dCO3eSV4G2c/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/AVvXsEirpl5gx6PVhnnHcdinT12RO5YE37S3ZraUTG47pnFLPsL05huLKZ_LW3MaxUgQ27WE_Cg3mD1eWWE7o0iWL_eEdOhwC_iy0NLNg5iCJPB5YLuHDcJbZnFAs1wqjdhR5VC1dCO3eSV4G2c/s1600/caption-bg.png) repeat scroll 0 0 transparent;}

2. Adım

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

<script src='https://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'></script>
<script src='https://meftunmede.github.io/javascripts/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="https://www.örnek.com/örnek_yazi.html" title="Örnek yazı" target="_blank"><img src="https://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="https://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/AVvXsEia9Iqym729oiDD7j_IjNcKPS2mCFjivZrErFOnPxbwXbOprZnJxXEuQuHIqP3lAkLYwnRAz9WRAYjttot9b-lhcG2lP4rU5VPoQwSxmnITRcWs_yCASI_XAlHd3wi9dbNr7P1xKMzrQ14/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="https://www.örnek.com/örnek_yazi.html" title="Örnek yazı" target="_blank">2</a></li>
<li>
<a href="https://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.
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:)
Barış, huzur, sağlık ve bereket Arkadaşlar! Herkeze kolay gelsin. iyi bloglamalar...

16 Yorumlar

Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

  1. yazı fontlarınını kendi sitemin fontuna göre ayarlıyor.. sizinkisi gibi yapmam için ne yapmam gerek acaba ?

    YanıtlaSil
    Yanıtlar
    1. Eklentideki Yazı fontu için aşağıdaki google font kodunu şablonunuzda <head> kodunun hemen altına kopyalayıp yapıştırın.
      <link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css'/>
      Ve style kodlarından font-family: olan olan yerlere ilk font olarak oswald ekleyin. Tabiki bu fontu sadece bu eklentide değil bütün blogunuzda (Başlıklar, menü vs.) kullanabilirsiniz. Kolay gelsin. iyi çalışmalar.

      Sil
  2. Etiket sayesinde otomatik manşette çıkıyor mu ?

    haberkazan.blogspot.com

    YanıtlaSil
  3. hocam dreamweaver da site yapmayı öğreniyorum daha yeniyim ve birkaç ders izleyerek yaptım bişeyler ama bunu direk ekleyince sadece kodlar gözüyor canl görünüm yaptğımda yaptığım projeyi size iletsem siz yerleştirseniz kodları

    YanıtlaSil
  4. Bu manşet html koduna uygunmudur , eğer uygun degılse nasıl yapabılırız ?

    YanıtlaSil
  5. Meraba resimlerle cerceveyi tam oturtamıyorum...

    YanıtlaSil
  6. Bunu indirme şansımız yok mu ?

    YanıtlaSil
  7. Dostum çok güzel bunlar hoş allah razı olsun ama birer demo koyuversen şunlara fena olmaz hani :) Bu arada uzun zamandır senin blogun ismini "meftundede" olarak okuyormuşum şimdi onu farkettim :D

    YanıtlaSil
  8. hocam bu slider'i blogger değilde kendi siteme koymak istiyorum.Parça parça değilde bir bütün olarak kodları verebilirisiniz acaba şimdiden teşekkürler

    YanıtlaSil
  9. bunu wordpress e uygulayabilirm iyim lütfen yardım edermisiniz

    YanıtlaSil
  10. Hocam merhaba, bu manşeti php sitemde kurmak istiyorum. Yönetim panelinden nasıl manşete yazı ve resim ekleyebilir im.

    YanıtlaSil
  11. DÖNÜP DOLAŞIP GELİYOR-BAKIYORUM--- GÖZLERİM PARLIYOR--- AĞZIM SULANIYOR--- YAPAMIYORUM--- CAHİL CÜHELA BİR ACEMİYİM--- ALLAH BENİ KAHRETSİN--- NE GEREKSİZ BİR WEB CİYİM BEN ---- AYLARDIR CİĞERE BAKAN KASAP KEDİSİ GİBİ HİSSEDİYORUM---- BLOGUMUN BOYNU BÜKÜK--- MAHSUUUUN

    YanıtlaSil
  12. mehaba bonu mobil uyumlu nasıl yapabiliriz

    YanıtlaSil
  13. yeni açılan sayfada görünmemesini nasıl sağlarım?

    YanıtlaSil
  14. wordpress de nasıl kullanabilirim

    YanıtlaSil
  15. Hocam .eleman tagını responsive çevirirken hata alıyoruz. !important yapmışsınız. Bunu nasıl değiştiririz ?

    YanıtlaSil

Yorum Gönder

Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

Önceki Makale Sonraki Makale