Blogger Resim Vurgu Efektli Çember Menü - CSS

Blogger Resim Vurgu Efektli Çember Menü
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ü Demo 

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(http://2.bp.blogspot.com/-4XCvJshy9x8/UIDjlYZiXDI/AAAAAAAAFQY/ttkRA-S1f6g/s1600/bloggertrix-image+1.jpg);}
.Btrix-img-2 {
    background-image: url(http://2.bp.blogspot.com/-Jb6h8JyvgY0/UIDkIf-Qz6I/AAAAAAAAFQg/mkh-ENaD86c/s1600/bloggertrix-image+2.jpg);}
.Btrix-img-3 {
    background-image: url(http://3.bp.blogspot.com/-Ll04NZIOfmk/UIDkJV5vrtI/AAAAAAAAFQo/fYqC8FW7g7U/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. 
3 )  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 :


<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. 




Makaleyi Paylaş :
 

Yorum Gönder

 
Hakkında : kredi kartı borcu taksitlendirme
Copyright © 2012 - 2013. Blogger Dersleri - All Rights Reserved | Proudly powered by Blogger