 |
| 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
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHFMK9uzDzE4yhWbrA3ESkIEx0JpcleM7gxKSsyhLCO47XF23PWPsVwDoePsVJZiCPRmHZaKBXbqGfVl7raN8fREmsdfhlXh6un5Y5BdxfHQWY6zWJQTlMTsmque5t4yGztQlQlZj514A/s1600/chip_cake.jpg);
}
.ch-img-2 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDVhafYAtmD9mx86unW6kpu3JMjXKLzPBgh4hvrkqWxE5ZqPpAR8QEDc-kKHQdYk3tT0u36OjIyETNDC97gUIwySStEbSUPnJO_m_PgB4j-O5txmbKKQrKSGkFPB43zkZ8XFAqT97DdA0/s1600/Blogger.png);
}
.ch-img-3 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqim6ZT6H9F3Q4_KNBMiOJrkl1H3EBDqgBygTWibhln-cDa99AsxdkJgVHC75ij6pElDtoYqF0j2ob-VeKtYSV2D1pubeykme5L_gyvf10ERwZhzIh1QwrF2ZqE0JR_wKFrNU5-9Z4CtY/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;
}
<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.
Hiç yorum yok:
Yorum Gönder