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.
  1. Hocam dediklerinizi harfiyen yaptım ancak birtürlü eklentiyi calıştıramadım kodlar ilede oynadım gene olmadı yardımcı olabilirmisiniz ?

    YanıtlaSil
    Yanıtlar
    1. Mustafa bey demo sitede kodları kontrol ettim herhangi bir sorun bulunmamakta..

      Sil