 |
| Blogger Resim Vurgu Efektli Çember Menü |
Blogger Dersleri kategorisinde 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. Daha önce sizlere Dönen CSS Menü Yapımı başlığında hayli şık bir menü modelini sunmuştum. Bu gün ise ona çok benzer farklı bir efekt içeren CSS ile tasarlanmış şık bir menü tablosunu göstermeye çalışacağım.
Blogger Resim Vurgu Efektli Çember Menü Oluşturmak
1 ) Blogger kumanda paneline gelip Ş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/AVvXsEgNQMx_WjeizaI_gwlaJ6fwxtWbb6WiXK92AB7j0ChmgcGf7kZWooEfO2tM-HiK6J5p9CK0FQ_qZm97oNXL1CfdVVxxU-ItAJRIGLcmxXhOwHVOeQDuGp1M8CT_0b1HmtPoEo5IGAeTc3o/s1600/bloggertrix-image+1.jpg);} .Btrix-img-2 { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMaevFwl6x7hBfAnuSMGadDrJChJWxwtPaDMpfrslUeia8Kn1PoVsFdsaIR5eotSS93GSJWqMqUvM4N2ACQqxw6SuNoiHh1BZS0Mg_QnYAb3l_JmVsgGLPffeDYiHAlupp-qCfGtXMKYc/s1600/bloggertrix-image+2.jpg);} .Btrix-img-3 { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXrc609RuZyRPVsFm9eS_8QdKhlkwrFViwXqkltGgt9O-q4MfTNjGSai6NEfzZ9nmBiTaFdoCE58FbxL_W3lveOctSU0OnJYUOHZ1qbblDxFtGXzE6crL7PWQ_1vgogOnOU7WfZt6U0bM/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.
<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>
Eklenti</h3>
Blogger Eklentileri <a href="http://www.bloggerdersleri.com/search/label/Blogger%20Eklentiler"><br />Tüm Ekletileri 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>
Dersler</h3>
Blogger Dersleri <a href="http://www.bloggerdersleri.com/search/label/Blogger%20Dersleri"><br />Tüm Dersleri 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>
Temalar</h3>
Blogger Temaları <a href="http://temalar.bloggerdersleri.com/"><br />Tüm Temaları 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.
Yorum Gönder