Blogger Resimli Üst Menü Oluşturmak

Neyden konuştuğumuz anlaşılsın diye hemen demo örneğini sunayım. 

Blogger Resimli Üst Menü Demo 
Bloglarda yaşanan sorunlardan bir tanesi, zamanla geliştikleri için eski konular faydalı olsalar bile   yeterli ilgiyi görmez. Ayrıca arama motorlarından ziyaretçi elde edebilmeniz için kişinin konunun varlığından haberdar olup, arama yapması gerekir buda her zaman mümkün olan bir durum değil.

Bu sebeple sizlere tavsiyem resimli üst menüyü yayınların üzerinde kullanarak, eski konularınıza link vermeniz.  Yayınlar üstünden kastım :

Böylece eski konularınızı yada hakkettiği ilgiyi görmediğine inandığınız konuları yeni kullanıcılarınız ile paylaşabilirsiniz. Kullanıcılar bloglarınız da daha fazla zaman geçirir ve daha çok sayfa ziyaret etmiş olurlar, bu durum size Seo yönünden de katkı sağlayacaktır.  Durumunuza göre 3'lü tasarlanmış menüyü sık sık değiştirmelisiniz , 3 veya 4 gün bunun için idealdir. Bir nevi eski konuları duyurmak için kullanabileceğiniz manşet eklentisi gibi düşünebilirsiniz.

Her sayfada bulunacağı için blog iç linklendirme konusunda da size yardımcı olacağı kanaatindeyim. ( Blogger Yayın İçi Link İnşası >> )

Blogger Resimli Üst Menü Oluşturmak 

1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle kodlarımızı açıyoruz. Widget şablonlarını genişlet kutucuğunu işaretliyoruz.

 2 ) Ctrl + F yardımı ile ]]>

 kodunu bularak aşağıdaki kodu hemen üzerine ekliyoruz.

#topstories {
    margin: 0;
    padding: 0;
}
#topstories li {
    display: inline-block;
    float: left;
    margin: 0 22px 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;
}

3 ) Blogger Kontrol Paneli > Yerleşim > Gadget Ekle > HTML/Javascript seçeneğini kullanarak menüyü görmek istediğiniz yere aşağıdaki kodları ekleyin. 

A



 Sol Resimin Yönlenmesini İstediğiniz Link ">
Sol Resmin img Uzantılı Adresi">

Sol Yazının Yönlenmesini İstediğiniz Link

"> Sol Resmin Üzerinde Görünecek Olan Yazı

Orta

Resimin Yönlenmesini İstediğiniz Link "> Orta Resmin img Uzantılı Adresi">

Orta Yazının Yönlenmesini İstediğiniz Link

"> Orta Resmin Üzerinde Görünecek Olan Yazı

Sağ esimin Yönlenmesini İstediğiniz Link

"> Sağ Resmin img Uzantılı Adresi">

Sağ Yazının Yönlenmesini İstediğiniz Link">Resmin Üzerinde Görünecek Olan Yazı</a>

Blogger Üst Menü Kullanımı 

• Kırmızı olarak verilmiş olan kısımlar konunuzun link kısımlarıdır. Tıklanınca ulaşılması istediğiniz sayfaların linklerini ekleyin.
• Mavi olanlar resim dosyalarının linkleri, göstermek istediğin resim linklerini ekleyin 
• Pembe olanlar resimlerin üzerinde görünecek başlıklar, kendinize göre düzenleyin. 

x