Blogger blogunuzda yazdığınız yazılarda yada link vermek istediğiniz kelimeleri özelleştirmek için bu eklentiyi kullanabilirsiniz , yazının yada linkin üstüne fare ile gelindiğinde , ziyaretçilerinize hoş bir efekt sergileyebilirsiniz. Sizde bu eklentiyi Blogger blogunuza eklemek için aşağıdaki adımları takip edebilirsiniz.
Blogunuzda ]]></b:skin> kodunu bulun ve hemen üstüne aşağıdaki kodları yapıştırın.
.yaz {
outline: none;
text-decoration: none;
position: relative;
font-size: 6em;
line-height: 1;
color: #9e9ba4;
display: inline-block;
}
.yaz--efekt {
text-transform: uppercase;
font-weight: 900;
overflow: hidden;
line-height: 0.75;
color: #b2b0a9;
}
.yaz--efekt:hover {
color: #b2b0a9;
}
.yaz--efekt::after {
content: '';
position: absolute;gi
height: 16px;
width: 100%;
top: 50%;
margin-top: -8px;
right: 0;
background: #F9F9F9;
transform: translate3d(-100%,0,0);
transition: transform 0.4s;
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.yaz--efekt:hover::after {
transform: translate3d(100%,0,0);
}
.yaz--efekt::before {
content: attr(data-letters);
position: absolute;
z-index: 2;
overflow: hidden;
color: #424242;
white-space: nowrap;
width: 0%;
transition: width 0.4s 0.3s;
}
.yaz--efekt:hover::before {
width: 100%;
}
Şablonunuzu kaydein ve çıkın. Artık Bloggerda yeni yazı yazarken yada widget olarak yerleşim panelinden eklemek isterseniz aşağıdaki örnekteki gibi kullanmanız yeterli.
Örnek
<a class="yaz yaz--efekt" href="#" data-letters="eklentisel">Buraya Yazınızı Yazınız</a>
üstteki # yerine tıklandığında gitmesini istediğiniz sayfayı yazabilirsiniz.
SHARE US →