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

zaman:
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 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


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 altına 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkRIsd8-OnqqwT-gn_RuaUjzj_TlCZ0hlCEBoNhIN4KUGdRXBQ2DLnPN-0FkQ6aU0KfhwhyphenhyphenHzyol7IFwbgSok_hyuauAiz5ND7aeNX_z97CA5I4_qqn2La7OnqVV9PTAtAqfySZnKb-vY/s1600/chip_cake.jpg);
}
.ch-img-2 {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiggrPshRySOKkgeiYlsZK8Nbj5WgN9KnMcdiLQV0pA-n-hP3-VAMRMyAs4MCWUgqik9gfm-l5dE21Zc8XgW-nZ5_KOZoY8jSBlzUbOqzidLUL9UMjS-yDdGDIul9XT8iMd_6WNopNOWYk/s1600/Blogger.png);
}
.ch-img-3 {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQnG-ye5rRYgIR7mAwxO43fHVYGM0rcNoy1UDWHhGSoAzs7NPzT0bX4JJbeDD-UxkIxi8dS_7xAF6nswEDeHtIIlEuZPhvCWFt6WAKwlTHFTFLolrLKU8M0A8SXHmljJyJUbtUGEpYpJM/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.webtegez.blogspot.com/">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.webtegez.blogspot.com/"> 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.webtegez.blogspot.com/"> 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. 


, , , , , , , , , , ,
Share To:
Batuhan Pol

Batuhan P.

12'li yaşlarda tanıştığım bu sektöre şuanla beraber olmak üzere 10 yıldır sürdürmekteyim. Küçük yaşlarda milyonların girdiği projeler yapsamda çocukluk aklım ve imkanlar dolayısıyla erken biten maceralar oldu. Şimdi ise yerlerinde başkaların yaptığı projeler var. Yoksa bende milyoner olurdum heralde :)

2012 blogger css css css dersleri css kodları css menü css menüler css menüleri en güzel css menüleri profesyonel css menüleri profesyonel web site menüleri ücretsiz css menüleri

Post A Comment:

0 comments:

Kaydol: Kayıt Yorumları (Atom)