Blogger Resim Vurgu Efektli Çember Menü

Sizler için bir çok menü kombinasyonu incelemeye çalıştıysam da şüphesiz içlerinde en etkili olanlar hareketli css ile tasarlanmış resim içeren menü zincirleri oldu. CSS ile tasarlanmış şık bir menü tablosunu göstermeye çalışacağım.

Blogger Resim Vurgu Efektli Çember Menü Oluşturmak

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

2 ) Ardından CTRL+F yardımı ile ]]></b:skin> kodunu bularak hemen üzerine Blogger Resim Vurgu Efektli Çember Menü kodlarını ekliyoruz.

.Btrix-item { width: 150px; height: 150px; border-radius: 50%; position: relative; cursor: default;} .Btrix-info-wrap, .Btrix-info{ position: absolute;border: 1px solid #8D8D8D;margin-top: -1px;width: 150px; height: 150px; border-radius: 50%;} .Btrix-info-wrap { background: #07CFE0 url(../images/bg.jpg); box-shadow: 0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px rgba(115,114, 23, 0.8); } .Btrix-info > div { display: block;position: absolute;width: 150px;height: 150px; border-radius: 50%; background-position: center center; -webkit-backface-visibility: hidden; /*Just for webkit to have a smooth font*/ } .Btrix-info .Btrix-info-front { -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .Btrix-info .Btrix-info-back { opacity: 0;background: #07CFE0;pointer-events: none; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); -webkit-transition: all 0.4s ease-in-out 0.2s; -moz-transition: all 0.4s ease-in-out 0.2s; -o-transition: all 0.4s ease-in-out 0.2s; -ms-transition: all 0.4s ease-in-out 0.2s; transition: all 0.4s ease-in-out 0.2s; } .Btrix-img-1 { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixWgJydLp_Lu9Wuhf0e7rPz-uu6-Gc_tRIEiat2G7qd8laQXw1EkcIDJpW5YtekDIYLm7IQ6CAXgttBzKU_VC8tRLfMlWuiF0nVs9SvSkmXP7H_rnxf7nCVOjL0f34oPbwKbxONLavu78/s1600/bloggertrix-image+1.jpg);} .Btrix-img-2 { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXCoyRF5YoOOXGayWmLsFjyk8YhleQbbcweYW6o_97FDVR2JBvlGpQ1AthXOpWHq_zDvD_SQlvAS9nRuYD52qX0K4_ogGCzie5xubkhUtlqmOC0MgAgnRtgoCA1Kcq0PyzO1bybGM8Xnk/s1600/bloggertrix-image+2.jpg);} .Btrix-img-3 { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT7h0N9cD1gy7hRu0JXhlkD-AxG__O1VUODyAd7IW3DeYj1GUrq3GAesZYjJTmKC2ybKJmxffDFwA4H3TVjwI3abKiiY06jtgoAn0Qch2PCBbzJHkAdm2Fx7rdlZS9eaFNxlPdQ77ECyA/s1600/bloggertrix-image+3.jpg);} .Btrix-info h3 { color: #fff; text-transform: uppercase;letter-spacing: 2px;font-size: 16px;margin: -20px 15px; padding: 40px 0 0 0; height: 80px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); } .Btrix-info p { color: #fff; padding: 10px 5px 0; font-style: italic; margin: -60px 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); } .Btrix-info p a { display: block;color: #e7615e;font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif; } .Btrix-info p a:hover { color: #fff; } .Btrix-item:hover .Btrix-info-front { -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); opacity: 0; } .Btrix-item:hover .Btrix-info-back { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; pointer-events: auto;} .Btrix-grid { margin: 20px 0 0 0; padding: 0; list-style: none; display: block; text-align: center; width: 100%;} .Btrix-grid:after, .Btrix-item:before { content: ''; display: table;} .Btrix-grid:after { clear: both;} .Btrix-grid li { width: 150px; height: 150px; display: inline-block; margin: 4px; }

***Kırmızı ile yazılmış resim linkleri menüde görünecek olan resimlerdir kendinize göre düzenleyebilirsiniz. Resimlerin oval olmasına gerek yok, kodlar otomatik olarak oval bir açıyla gösterim sunacaktır.
Daha sonra Menüyü isterseniz Gadget ekle diyerek yada yayın yaparken HTML bölümüne geçerek Blogger ile tasarlanmış temalarda kullanabilirsiniz. Kullanmak istediğiniz yerde eklemeniz gereken kod dizini aşağıdaki kodlardır.

<section class="main"> <ul class="Btrix-grid"> <li> <div class="Btrix-item Btrix-img-1"> <div class="Btrix-info-wrap"> <div class="Btrix-info"> <div class="Btrix-info-front Btrix-img-1"> </div> <div class="Btrix-info-back"> <h3> Kodlar</h3> Blogger Kodları <a href="Buraya Konu Etiketini Ekle"><br />Tüm Kodları Gör</a><br /> </div> </div> </div> </div> </li> <li> <div class="Btrix-item Btrix-img-2"> <div class="Btrix-info-wrap"> <div class="Btrix-info"> <div class="Btrix-info-front Btrix-img-2"> </div> <div class="Btrix-info-back"> <h3> Şablonlar</h3> Blogger Şablonları <a href="Buraya Konu Etiketini Ekle"><br />Tüm Şablonları Gör</a><br /> </div> </div> </div> </div> </li> <li> <div class="Btrix-item Btrix-img-3"> <div class="Btrix-info-wrap"> <div class="Btrix-info"> <div class="Btrix-info-front Btrix-img-3"> </div> <div class="Btrix-info-back"> <h3> Eklentiler</h3> Blogger Eklentileri <a href="http://etralibela-61.blogspot.com/"><br />Tüm Eklentileri Gör</a><br /> </div> </div> </div> </div> </li> </ul> </section>

Blogger Resim Vurgu Efektli Çember Menü Değişiklikleri:

Mavi olarak yazılmış olan alanlar mouse ile menü üzerine geldiğinizde, açılacak olan menü başlığı.
Pembe olarak verilmiş olanlar menü açıklaması.
Kırmızı verilmiş yerler menünün içerisinde yer alacak link yazısı ve linkin ulaşacağı adres.

Blogger Resim Vurgu Efektli Çember Menü