 |
| Blogger Resimli Üst Menü Oluşturmak |
Blogger Dersleri kategorisinde sizlere resimli üst menü oluşturma konusunda yardımcı olamaya çalışacağım. Üst menüyü dilediğiniz gibi kullanma imkanınız olsa da size naçizane bir iki tavsiyede bulunmak istiyorum. Neyden konuştuğumuz anlaşılsın diye hemen demo örneğini sunayım.
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 ]]></b:skin> 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.
<div id="top-stories-home" class="mb-2" data-vr-zone="Photo Features"> <ul id="topstories" class="clearfix"> <li data-vr-contentbox=""> <div class="shadow"> <a class="frame" href=" A Sol Resimin Yönlenmesini İstediğiniz Link "> <img class="attachment-top_stories_site wp-post-image" width="193" height="103" src="Sol Resmin img Uzantılı Adresi"> </a> </div> <div class="media-data"> <a class="title" href="Sol Yazının Yönlenmesini İstediğiniz Link"> Sol Resmin Üzerinde Görünecek Olan Yazı </a> </div> </li> <li data-vr-contentbox=""> <div class="shadow"> <a class="frame" href="Orta Resimin Yönlenmesini İstediğiniz Link "> <img class="attachment-top_stories_site wp-post-image" width="193" height="103" src="Orta Resmin img Uzantılı Adresi"> </a> </div> <div class="media-data"> <a class="title" href="Orta Yazının Yönlenmesini İstediğiniz Link"> Orta Resmin Üzerinde Görünecek Olan Yazı</a> </div> </li> <li class="last-child" data-vr-contentbox=""> <div class="shadow"> <a class="frame" href="Sağ esimin Yönlenmesini İstediğiniz Link"> <img class="attachment-top_stories_site wp-post-image" width="193" height="103" src="Sağ Resmin img Uzantılı Adresi"></a> </div><div class="media-data"> <a class="title" href="Sağ Yazının Yönlenmesini İstediğiniz Link">Resmin Üzerinde Görünecek Olan Yazı</a></div></li></ul></div>
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.
Yorum Gönder