ilginç ve güzel bir eklenti olan , css açılır kapanır yazı eklentimiz blogunuza hoş bir görüntü sağlayabilir , blog yazılarınıza bu eklentiyi ekleyerek özellikle belirgin olamasını istediğiniz yazıları yada başlıkları ziyaretçilerinize daha faklı bir şekilde gösterebilirsiniz , bu eklentiyi blogger blogunuza eklemek için aşağıdaki adımları takip edip blogunuza ekleyebilirsiniz.
Blogunuzda </head> kodunu bulun ve hemen üstüne aşağıdaki kodları yapıştırın.
<style type='text/css'>@import url(http://fonts.googleapis.com/css?family=Lato:900);
*, *:before, *:after{
box-sizing:border-box;
}
body{
font-family: 'Lato', sans-serif;
;
}
div.foo{
width: 90%;
margin: 0 auto;
text-align: center;
}
.letter{
display: inline-block;
font-weight: 900;
font-size: 70PX;
margin: 0.2em;
position: relative;
color: #00B4F1;
transform-style: preserve-3d;
perspective: 400;
z-index: 1;
}
.letter:before, .letter:after{
position:absolute;
content: attr(data-letter);
transform-origin: top left;
top:0;
left:0;
}
.letter, .letter:before, .letter:after{
transition: all 0.3s ease-in-out;
}
.letter:before{
color: #fff;
text-shadow:
-1px 0px 1px rgba(255,255,255,.8),
1px 0px 1px rgba(0,0,0,.8);
z-index: 3;
transform:
rotateX(0deg)
rotateY(-15deg)
rotateZ(0deg);
}
.letter:after{
color: rgba(0,0,0,.11);
z-index:2;
transform:
scale(1.08,1)
rotateX(0deg)
rotateY(0deg)
rotateZ(0deg)
skew(0deg,1deg);
}
.letter:hover:before{
color: #fafafa;
transform:
rotateX(0deg)
rotateY(-40deg)
rotateZ(0deg);
}
.letter:hover:after{
transform:
scale(1.08,1)
rotateX(0deg)
rotateY(40deg)
rotateZ(0deg)
skew(0deg,22deg);
}</style>
Blogunuzda Şablonunuzu kaydedin ve çıkın , Yapmanız gereken bundan sonraki yazılarınızda aşağıdaki etiketleri kullanmak
<div class="foo">
<span class="letter" data-letter="E">E</span>
<span class="letter" data-letter="K">K</span>
<span class="letter" data-letter="L">L</span>
<span class="letter" data-letter="E">E</span>
<span class="letter" data-letter="N">N</span>
<span class="letter" data-letter="T">T</span>
<span class="letter" data-letter="i">i</span>
<span class="letter" data-letter="S">S</span>
<span class="letter" data-letter="E">E</span>
<span class="letter" data-letter="L">L</span>
</div>
SHARE US →