Blogger Animasyonlu Üst Menü

BLOGGER İÇİN ANIMASYONLU ÜST MENÜ

Sizlere resimli üst menü oluşturma konusunda yardımcı olmaya çalışacağım. Üst menüyü dilediğiniz gibi kullanma imkanınız olsa da size  bir iki tavsiyede bulunmak istiyorum. Neyden konuştuğumuz anlaşılsın diye hemen altta demo örneğini vereyim...

                                                      


Bloggerde  yaşanan sorunlardan bir tanesi ise, zamanla geliştikleri için eski konular faydalı olsada 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.Yada sizin blogger sitenizi ziyaret ettiğinde aradığı konu veya yeni konuları görebilmesi için farklı ve değişik eklentiler ve yöntemler vardır.Bu konuda googlede aratırsanız bir çok secenek elde edersiniz.Şimdi bu konumuzda bunlara benzer bir eklentiyi ele alacaz ve blogger sitemizde ön planda farketilmesi için tabi animasyon efektli olmasını sunacaz.

Bu üst menü eklemek için her hangi bir zorluk aşaması yok.Tek yapılması gereken aşağıdaki anlatımda mevcuttur.

Önce Blogger Kontrol Paneline giriş yapalım,

Daha sonra Şablon>Html Düzenle yolunu takip ederek Şablonunuzun HTML kodlarına ulaşıyorsunuz,

Şİmdi Ctrl+F tuşlarıyla ]]></b:skin> kodunu aradın.Bulduğunuz ]]></b:skin> kodunun hemen üst kısmına aşağıdaki kodları ekleyerek şablonu kaydedin.

#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; }

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. 

Bizi Takip Edin
Pinterest Facebook Twitter
© by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakabilirsiniz...