Blogger Css ile Dönen Resimlerle Menü Oluşturmak

Blogger Dönen Resimlerle Menü Oluşturmak 

Blogger derslerinde sizler için görünen resmin üzerine geldiğinizde arka satırda ki açıklaması ve linki gelen bir menü oluşturma konusundan bahsedeceğim.  Anlatması zor bir menü çeşidi olduğu için hemen sizler için demo halini ekliyorum .

Blogger Dönen Resimlerle Menü Oluşturmak Demo 

Blogger Dönen Resimlerle 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 aşağıda ki Blogger dönen resimlerle menü oluşturma kodlarını ekliyoruz.

 .ch-item {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: relative;
    cursor: default;
    -webkit-perspective: 900px;
    -moz-perspective: 900px;
    -o-perspective: 900px;
    -ms-perspective: 900px;
    perspective: 900px;}
.ch-info{
    position: absolute;
    width: 150px;
    height: 150px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.ch-info > div {
    display: block;
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-position: center center;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    transition: all 0.4s linear;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}
.ch-info .ch-info-front {
    box-shadow: inset 0 0 0 6px rgba(0,0,0,0.3);
}
.ch-info .ch-info-back {
    -webkit-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    -moz-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    -o-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    -ms-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    background: #000;
    opacity: 0;
}
.ch-img-1 {
    background-image: url(http://2.bp.blogspot.com/-y-PSGHs3h4Y/UHJTamw4Q1I/AAAAAAAAExU/8OgFZUINT_c/s1600/chip_cake.jpg);
}
.ch-img-2 {
    background-image: url(http://2.bp.blogspot.com/-olmTWtTSYEc/UHJTZS1WJKI/AAAAAAAAExM/eUZibMhAwrs/s1600/Blogger.png);
}
.ch-img-3 {
    background-image: url(http://2.bp.blogspot.com/-1RcvxtTNP7U/UHJTbnH6gdI/AAAAAAAAExc/7Y8HpfDmdTM/s1600/photo-7.png);
}
.ch-info h3 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 24px;
    margin: -10px 15px;
    padding: 60px 0 0 0;
    height: 110px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow:
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);}
.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: -95px; 30px;
    font-size: 12px;}
.ch-info p a {
    display: block;
    color: #fff;
    color: rgba(255,255,255,0.7);
    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;}
.ch-info p a:hover {
    color: #fff222;
    color: rgba(255,242,34, 0.8);}
.ch-item:hover .ch-info-front {
    -webkit-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -moz-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -o-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -ms-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    opacity: 0;}
.ch-item:hover .ch-info-back {
    -webkit-transform: rotate3d(1,0,0,0deg);
    -moz-transform: rotate3d(1,0,0,0deg);
    -o-transform: rotate3d(1,0,0,0deg);
    -ms-transform: rotate3d(1,0,0,0deg);
    transform: rotate3d(1,0,0,0deg);
    opacity: 1;}
.ch-grid {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
    width: 100%;}
.ch-grid:after,
.ch-item:before {
    content: '';
    display: table;}
.ch-grid:after {
    clear: both;}
.ch-grid li {
    width: 150px;
    height: 150px;
    display: inline-block;
    margin: 4px;
}
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="ch-grid">
<li>
         <div class="ch-item">
                
             <div class="ch-info">
                 <div class="ch-info-front ch-img-1">
</div>
<div class="ch-info-back">
                                    <h3>
 Demo </h3>
<a href="http://www.bloggerdersleri.com/search/label/Webmaster%20Terimleri">Blog Terimleri </a><br />

                                </div>
</div>
</div>
</li>
<li>
                        <div class="ch-item">
                            <div class="ch-info">
                                <div class="ch-info-front ch-img-2">
</div>
<div class="ch-info-back">
                                    <h3>
Demo</h3>
<a href="http://www.bloggerdersleri.com/search/label/Blogger%20Dersleri"> Blogger Dersleri </a><br />

                                </div>
</div>
</div>
</li>
<li>
                        <div class="ch-item">
                            <div class="ch-info">
                                <div class="ch-info-front ch-img-3">
</div>
<div class="ch-info-back">
                                    <h3>
Demo</h3>
<a href="http://www.bloggerdersleri.com/search/label/Blogger%20Seo"> Blogger Seo </a><br />

                                </div>
</div>
</div>
</li>
</ul>
</section>

Blogger Dönen Resimli Menü Üzerinde Yapmanız Gereken Değişiklikler

  • İlk kod dizini olarak ]]></b:skin> üzerine eklenecek kodlarda belirlenen Kırmızı ile yazılmış olan resim linkleri, demo örneğinde inceleyebileceğiniz gibi menünün görünür resim linkleridir. Kullanmak istediğiniz resim linkleri ile değiştirmeniz yeterlidir. 
  • İkinci kod dizinin de ise mavi ile yazılmış linkler resimler üzerine gelince altta beliren link yazısının gideceği sayfayı belirler. 
  • İkinci kod dizinin de pembe olarak verilmiş olanlar ise resim yerine gelecek menü açıklamasıdır. 
  • İkinci kod dizinin de kırmızı olarak yazılmış alanlar resimler yerine gelecek açıklama satırının altında yazacak olan linkin görünür metnidir. 




Makaleyi Paylaş :
 

Yorum Gönder

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