Etiket Duyarlı Son Yayınlananlar Blog Haberleri Widget Eklentisi

17.5.17
Etiket Duyarlı Son Yayınlananlar Blog Haberleri Widget Eklentisi

Etiket Duyarlı Son Yayınlananlar Blog Haberleri Widget Eklentisi - Blogger siteleri için etiket duyarlı blog haberleri eklentisi ile ilgili kod ve ipuçları paylaşacağım. Bazı blog sitelerinde blogcuların yayınladığı en son yayınlar veya bir etikete sahip olan yayınları site başlığının hemen altında yayın başlıklarının dikey veya yatay efekti ile hareket ettiğini görürsünüz. Bu şekilde blog ziyaretçilerinin ilgisini çekerek blogunuzda bulunan diğer yayınların da tıklanmasını sağlayacaksınız.

Blog haber eklentisi, yayın başlığı, görseli ve etiketi ile zengin bir görüntü sergileyen widget 2 farklı özellikte çalışmakta; blogunuza eklediğiniz son yayınların görüntülenmesi ve blogunuzda bulunan bir kategoriye ait etikete duyarlı olarak çalışmaktadır. Yani blogunuzda bulunan kategorileri içeriklerini de haber widget'inde görüntüleyebilirsiniz.

Blog Haber Widget'i Nasıl Eklenir?


Blog haber widget'ini eklemek için aşağıdaki adımları takip edin.

1- Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinde bulunan Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon kodları sayfasını açın. Açılan sayfada CTRL+F yardımıyla ]]></b:skin> veya </style> kodunu bulun ve aşağıdaki CSS kodlarını ]]></b:skin> veya </style> kodunun bir satır üzerine ekleyin.

.news-headline {
    margin: 0;
    width: auto;
}
.daring .title {
    float: left;
    height: 40px;
    background: #e74c4c;
    font-size: 15px;
    color: #fff;
    line-height: 40px;
    font-weight: 400;
    overflow: hidden;
    padding: 0 10px
}
.daring .title .fa {
    margin-right: 10px;
    transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -o-transform: rotate(-30deg)
}
.daring .widget-content {
    height: 40px;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0 4px;
    border: 1px solid #eee
}
.daring .widget-content li {
    float: left;
    margin-left: 30px;
    display: inline-block;
    height: 38px;
    line-height: 38px;
    padding: 0
}
.daring .widget {
    border-bottom: 1px solid #e0e5e8;
    background: #f5f5f5;
    max-width: 1063px;
    margin: 0 auto;
    overflow: hidden
}
.recent-thumb {
    float: left;
    margin: 4px 10px 0 0
}
.dr-img {
    position: relative;
    display: block;
    width: 35px;
    height: 30px;
    overflow: hidden
}
.daring .post-tag {
    display: inline-block;
    background: #ffa401;
    color: #fff;
    margin-right: 10px;
    font-weight: 400;
    border-radius: 2px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    font-size: 10px;
    position: relative;
    margin-top: 10px;
    float: left
}
.daring .recent-title {
    font-size: 14px;
    font-weight: 400;
    display: inline-block
}
.daring .recent-title a {
    color: #222222
}
.daring .recent-title a:hover {
    color: #e74c3c
}
.daringcontainer,
.daringcontainer .mask,
ul.newsdaring {
    -webkit-transition: all 0 linear;
    -moz-transition: all 0 linear;
    -o-transition: all 0 linear;
    transition: all 0 linear;
    list-style: none;
    margin: 0
}
.daringcontainer {
    margin: 0;
    padding: 0;
    overflow: hidden
}
.daringcontainer .mask {
    position: relative;
    overflow: hidden
}
.newsdaring {
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0
}
ul.newsdaring {
    -webkit-transition: all 0s linear;
    -moz-transition: all 0s linear;
    -o-transition: all 0s linear;
    transition: all 0s linear;
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0
}
.daringoverlay-left {
    display: none
}
.daringoverlay-right {
    display: none
}

2- Aşağıdaki javaScript kodunu blogunuzun </body> kapanış kodunun bir satır üzerine ekleyin.

<script src='https://rawgit.com/Bloggeritunes/jQuery/master/daring.js'/>

3- Aşağıdaki Gadget HTML kodunu blogunuzun header ile main arasında uygun bir yere ekleyin ve şablonu kaydedin.

<div class='news-headline'>
<b:section class='daring' id='daring' maxwidgets='1' name='Blog Haberleri' showaddelement='yes'/>
</div>

4- Blogunuzun kumanda panelinden yukarıdaki eklemiş olduğunuz Gadget ile HTML/JavaScript oluşturun. Oluşturduğunuz HTML/JavaScript içerisine aşağıdaki kodları ekleyerek eklentiyi çalıştırabilirsiniz.

Blogunuzu güncel tutuyorsanız ve son eklenen yayınların gösterilmesini istiyorsanız aşağıdaki kodu HTML/JavaScript "widget" içerisine ekleyin.

<span data-type="recent" data-no="5"></span>

Eğer blogunuzda bulunan bir kategoriye ait yayınların gösterilmesini istiyorsanız aşağıdaki kodu kullanın. Kod içerisinde işaretli (Etiket) renkli yere kategorinize ait etiketi ekleyin.

<span data-type="label" data-label="Etiket" data-no="5"></span>

Yukarıdaki HTML kodlar içerisinde işaretli olan data-no="5" kod blog haber widget'inde gösterilecek olan yayın sayısını belirtir.


Bu eklentiyi bir ziyaretçimizin isteği üzerine blog sitemizde yayınladık. Bu vesile ile tüm blogcuların faydalanabileceği bir blog haber widget'ini paylaşmış olduk. Blogunuzda görmek istediğiniz eklenti ve widget tasarımları ile ilgili görüş ve önerilerinizi yorum bölümünden bizimle paylaşabilirsiniz.
Faydalı mı?
Blogger
Disqus
Yorum Ekle

11 yorum

iki dakika içinde uygulanabiliyor ve cillop gibi duruyor hem mobil hem masaüstü bilgisayarda elinize sağlık bloglarımın hepsine uyguluyorum

https://denkgelirse.blogspot.com.tr

Cevap

Eyvallah hocam ama https ile çalışıyor mu. Bazıları çalışmıyor da

Cevap

Çalışıyor, URL: https://manueltema.blogspot.com

Cevap

Eyvallah hocam. En kısa zamanda bloga ekleyeceğim.

Cevap

scripti async filan yapsak acaba AMP olur mu?

Cevap

AMP'de harici js kullanımı olmuyor. Yani olsa da AMP hata verir. async ile alakası yok öyle birşey olmuş olsa zaten neler yapılmazdı ki

Cevap

En çok aradığım kodlar dan birisi bu iste suzden bir ricam slider kodları paylaşırmısınız??

Cevap

Her adımı dikkatle uyguladım. Ancak bir türlü çalışmadı. Yerleştirdiğim alanda sadece boşluk mevcut. Çözüm öneriniz var mıdır acaba? Web sitenizde bulunan slideri kullanıyorum. js'lerin çakışma ihtimali var mıdır?

Cevap

Teşekkür ederim

Cevap

Merhaba, blog sitenizde <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> kodu var mı? Kontrol edin, eğer yoksa kodu blog sitenize ekleyin ve eklentinin çalışıp çalışmadığını kontrol edin.

Cevap

Çok teşekkürler. Ben bu kodu çook önceden ekledim zannediyordum. Meğer yokmuş. Ekleyince sorunsuz bir şekilde çalıştı.

Cevap