Blogunuza Gölge Efektli Öne Çıkan Yazılar Ekleyin

Bir internet sayfasına ilk girişinizde dikkatinizi çekecek bazı unsurlar vardır.Sayfanıza girinler güzel bir tema ile karşılandığında daha sonra ilk ilgilenecekleri kısım öne çıkan yazılarınız ve populer yazılarınızdır.Bu yazılarınız onlara ne kadar kaliteli gelirse sitenizi takip etme konusunda onları ikna etmiş olacaksınız.İşte bu yüzden öne çıkan yazılar elemanını görsel açıdan zenginleştirmeli ve okuyucularınıza sunmalısınız.

>>>>>Blogger Etikete Bağlı Manşet Eklentisi Nasıl Yüklenir

Sizlere öne çıkan yazılarınız için farklı alternatif olacak bir gadget tanıtmak istiyorum.Blogumu takip edenler bilirler önceleri yatay olarak gölge efektli öne çıkan yazılar gadget ın blogumda kullanmıştım.Aynı gadget ı blogumuza nasıl ekleriz onu sizlerle paylaşacağım :

fatured-content

Yatay Gölge Efektli Öne Çıkan Yazılar Nasıl Eklenir ?

  • Her zamanki gibi blogunuza giriş yapın.
  • Yerleşim>>>Gadget Ekle diyerek HTML/Javascript ekle seçeneğini seçin.
  • Aşağıdaki kodları kendi blogunuza uygun olarak değiştirerek düzenleyip açılan pencereye yapıştırın:

<div id="top-stories-home" class="mb-3" data-vr-zone="Photo Features">
<ul id="topstories" class="clearfix">
<li data-vr-contentbox="">
<div class="shadow">
<a class="frame" href="http://www.ehliblog.com/2011/06/tek-gmail-hesabyla-snrsz-e-mail-adresi.html">
<img class="attachment-top_stories_site wp-post-image" width="193" height="103" src="resim adresi " />
</a>
</div>
<div class="media-data">
<a class="title" href="http://www.ehliblog.com/2011/06/tek-gmail-hesabyla-snrsz-e-mail-adresi.html">
Yazı Başlığı</a>
</div>
</li>
<li data-vr-contentbox="">
<div class="shadow">
<a class="frame" href="http://www.ehliblog.com/2012/06/windows-8-release-preview-urun-anahtari.html">
<img class="attachment-top_stories_site wp-post-image" width="193" height="103" src="resim adresi" />
</a>
</div>
<div class="media-data">
<a class="title"  href="http://www.ehliblog.com/2012/06/windows-8-release-preview-urun-anahtari.html">Yazı Başlığı</a>
</div>
</li>
<li data-vr-contentbox="">
<div class="shadow">
<a class="frame" href="http://www.ehliblog.com/2009/10/officee-tab-ozelligi-nasl-eklenir.html">
<img class="attachment-top_stories_site wp-post-image" width="193" height="103" src="Resim Adresi" />
</a>
</div>
<div class="media-data">
<a class="title"  href="http://www.ehliblog.com/2009/10/officee-tab-ozelligi-nasl-eklenir.html">Yazı Başlığı</a>
</div>
</li>
<li class="last-child" data-vr-contentbox="">
<div class="shadow">

<a class="frame" href="http://www.ehliblog.com/2012/01/feedburner-email-satr-nasl-degistirilir.html">
<img class="attachment-top_stories_site wp-post-image" width="193" height="103" src="Resim adresi" />
</a>
  
 
</div>
<div class="media-data">
<a class="title" href="http://www.ehliblog.com/2012/01/feedburner-email-satr-nasl-degistirilir.html">Yazı Başlığı</a>
  
</div>
</li>

<li class="last-child" data-vr-contentbox="">
</li></ul>
</div>

<style>
 

#topstories {
    margin: 0;
    padding: 0;
}
#topstories li {
    display: inline-block;
    float: left;
    margin: 0 50px 0 0;
    position: relative;
    width: 200px;
}
#topstories li.last-child {
    border-left: medium none;
    margin-right: 0;
}
#topstories .frame {
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.8);
    padding: 4px;
}
#topstories .shadow {
    background: none repeat scroll left bottom transparent;
    padding-bottom: 7px;
}
#topstories .shadow img {
    max-height: 103px;
    max-width: 193px;
}
#topstories .media-data {
    -moz-transition: background 0.3s ease-in 0s;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4);
    left: 5px;
    position: absolute;
    top: 5px;
}
#topstories .media-data:hover {
    background: none repeat scroll 0 0 transparent;
}
#topstories .media-data .title {
    color: #FFFFFF;
    display: block;
    font-size: 18px;
    height: 85px;
    overflow: hidden;
    padding: 9px 14px;
    text-shadow: 1px 0 2px black;
    width: 165px;
}
#topstories .media-data .title:hover {
    text-decoration: none;
}
#top-stories-article {
    margin-bottom: 22px;
}
#top-stories-article #topstories {
    padding-left: 15px;
}
#top-stories-article #topstories li {
    border-right: 1px solid #EBEBEB;
    font-size: 11px;
    height: 80px;
    overflow: hidden;
    padding-right: 15px;
    width: 290px;
}
#top-stories-article #topstories li:last-child {
    border-right: 0 none;
    padding-right: 0;
}
#top-stories-article #topstories li.last-child {
    border-right: 0 none;
    padding-right: 0;
}
#top-stories-article .shadow {
    background-position: right bottom;
    padding-bottom: 0;
}
#top-stories-article .shadow img {
    border-radius: 6px 6px 6px 6px;
    max-height: 122px;
    max-width: 280px;
}
#top-stories-article .shadow .frame {
    border: 0 none;
    box-shadow: none;
    height: 80px;
    overflow: hidden;
    padding: 0;
    width: 280px;
}
#top-stories-article .media-data {
    border-radius: 6px 6px 6px 6px;
    left: 0;
    top: 0;
}
#top-stories-article .media-data .title {
    height: 62px;
    width: 252px;
}
 
  a {
    text-decoration: none;
}
  #topstories .frame {
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.8);
    padding: 4px;
}
  .frame, .post img {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E0E0E0;
    box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.8);
    display: inline-block;
    padding: 3px;
}
</style>

 

Renkli kısımları kendi yazılarınıza göre düzenleyip.Daha sonra kaydet diyerek blogunuzu görüntüleyin.Biraz Html bilgisi ile farklı görünümler sağlayabilirsiniz.

Yazılarınızda öne çıkanlar (featured content) gadget ına yer veriyor musunuz ?

Ozan Başer

Merhaba ben Ozan Başer. EhliBlog'da ve elbette Ehliforum (Blogculara Özel Forum)'da yazıyorum. Blogger, seo, adsense, sosyal medya ve google ürünleri hakkında faydalı ve kaliteli içeriği okuyucularıma sunmaya çalışıyorum. C#, PHP, Javascript gibi uğraşılarım var. Web ve online teknolojiler ile ilgili birçok konuda fikirlerimi sizlerle paylaşıyorum.

2 yorum:

  1. hocam senin şu en altdaki benzer yazıların kodu ney acaba yada bunu nerden bulabiliriz

    YanıtlaSil
    Yanıtlar
    1. İlerleyen günlerde paylaşacağım.Takipte kalın

      Sil

Yorumunuza gelecek cevabı takip etmek "beni bilgilendir" kutucuğuna işaretleyebilirsiniz.