Daha önce hiçbir yerde rastlamadığınız yada Nadiren rasladığınız hem yukarıdaki görselde hem de aşağıdaki demolarda görmüş olduğunuz harikulade indirme butonlarını Blogger'a nasıl ekleyeceğinizi anlatacağım.
- İlk olarak Blogger panelinden Tema ve ardından HTML'yi düzenle seçeneklerine tıklayın.
- Karşınıza çıkan kodların bulunduğu alana bir kez tıklayıp Ctrl+F tuşlarına basın.
- Gelen arama yerine ]]></b:skin> yazıp Enter tuşuna basın. Ardından ]]></b:skin> kodunun bir üst satırına aşağıda vermiş olduğum kodları kopyalayıp yapıştırın.
/*IMG Buttons v1.0.1 */
.imgButton {
display: inline-block;
font-size: 12px;
padding: 1.2em calc(50px + 1.2em) 1.2em 1.2em;
border-radius: 4px;
position: relative;
background-color: #263238;
color: #fff !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .5);
margin: 5px;
overflow: hidden
}
@media (min-width: 560px) {
.imgButton {
font-size: 14px;
}
}
@media (min-width: 768px) {
.imgButton {
font-size: 16px;
}
}
/*fontastic (Custom)*/
@font-face {
font-family: animated-buttons;
src: url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAc4AAsAAAAACfAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAABCAAABAEAAASyihZ4J0ZGVE0AAAUMAAAAGgAAABx2tSgiR0RFRgAABSgAAAAdAAAAIAA0AARPUy8yAAAFSAAAAEcAAABgUB1er2NtYXAAAAWQAAAATQAAAVgCjQanaGVhZAAABeAAAAApAAAANguVxk9oaGVhAAAGDAAAABgAAAAkBC8CA2htdHgAAAYkAAAAEgAAABIEAwBkbWF4cAAABjgAAAAGAAAABgAHUABuYW1lAAAGQAAAAOgAAAHyDHIgHnBvc3QAAAcoAAAAEAAAACAAAwABeJxlkk1sG0UUx3cT7+7Ishwn6rYEhbUa9YSIFXEopYJDeygFKoqgIgkHiO1Esd3UDm4SxyHJ7tqN493n9cf6Y5OoIR+YhpY0BZI0kJYKISgpUIEoB8Shh/TMicOsNAdYYwFSmCfNvJn3fv/3RjM0ZbNRNE03e8PBC97h/r4O38jwcCR8kaIbKJo6YR5uMNsbzcdsGQcNjkZw2AQ71fp6y58A/zoOTgWzbJaYNmqjqY2iXG3Ul81t1mJbaaFQTYah7JSTaqF46gmqg3rePxgc8g9GRvoiQ/3hwWD4/HhwqC8SCw9GvH37+/hfXxRFz9BpWqFVGugMxdX0G6gibafHGg42vtH4k9PsNjv5TS+84PMhEiADjLf3nBT5EEWroTUm+n7582oV4QE8wFy7dj22FrweGn43PoaIh3RcuIo7sIfJaoqqFybmY+W0gsiApSBJ6dFcGq2F5ifKMlNMXi1cuVLXqFZhI1pFZ3eZaNUP0ejfFS2dWmxr80fY9CGn+dT3PPmF7dEDP8Bn8MXHGzsFVOEe/fxgT7gP3/hXzqDyO8zd5K0ueBWd8p9+RSA2fJoHmN29WR3f8a2+CS9DVxe8BHI2oSVQ8XyoyAT08EUIofByz4qA77FbH9z9dKP/I697IsOOJ/qVsYhV1mN6eeJlJ0BMyXJCTokwhYiPg8m8WJbLspGaA4S97BwY+bI18gbMWXsO5lKGFS6L+UlApGQjXmwZS3aJh+8mHham8mJFLktGatbiPXeIB3tYpwmmizdEiIsiIk2kiRHFOEgGGl3ELuw69pC4iCu2yIgGLBgGss6amIqxAIaIjpB7/GKM2c+KhuVbWf8QNd+oE4uxmtrDY8zSH7xY2R+uSBCXLCHXf0048SN8i68Uk5Kb2DkpmZAEcpuVE6WKG9u5SqlYFrCDPM4vcRlFUwQvbD9gMpAB9zynKRlVOMkqqqq4RzlrowmfwFsnGVBVABVNcYpmHf3KalpGc+8cxLY6MVwniK2OrLCZWvz327yu58pgQCVVuVRI6nLWeh2Q1KRqpauWHmmsCWYsQMtYwI08V3ueYhGFNnm9qEjydEpyz6yy+AQ+xa8H34vBKCKr3NuBQK9AZLZ3YH3b/d3GGW7kcnxZwDK7tLCw7MYlzkocE87Wr/wtBwtweTKHyBF2ZDw+4ibtftzObd9Yvyngp9klWBxbC+RTls3U5lzK+ktJq9zxr7ph78VOYFRQ1HQaxV4jHoh9zShZJZMG1Al793vg+DlmMjkt5sbR3HOMNp2dLszoqYJSBGQeZXXQtUK+kMsVtAKa+43RCqqeLqb1mcKlLDqMn+WfwYeeJIeOsriVNONW3Mw4zdIB4O/Mmgdmt0osOOx/AToUCtgAAAB4nGNgYGBkAIIztovOg+ir1odWwmgATgsHcgAAeJxjYGRgYOADYgkGEGBiYARCNiBmAfMYAASMADkAAAB4nGNgZmJgnMDAysDB6MOYxsDA4A6lvzJIMrQwMDAxsHIywAAjAxIISHNNYXBgSGRIZ3zw/wGDHhOSGsZHQEIBCBkB2FAKcgB4nGNgYGBmgGAZBkYGEAgC8hjBfBYGMyDNAYRMYJlkhvT//8GsRIZUCOv/PLBaNrAoG5ANVMkI5EGMoiFgY2RiYGZhpbU15AIAVAoIOAAAAHicY2BkYGAA4sKi+d/i+W2+MnAzMYDAVetDK5FpJgawOAeEAgAqNgkrAAAAeJxjYGRgYGIAAj0wCWIzMqACJgAF0AA5AgAAAAIAAB0AAwAzAAAAFAAAAAAAAFAAAAcAAHicnY/BSsNAFEXPtElFFOnKnTC4E5yQiRShW6Eb98VtSkPJohlIp7/iH/hDfosf4E0cXXQjNDC8w53z3rwA17xjGD7DnPvEEy54STzlkY/EmZyvxDlX5i7xjLl5lWmySyV27Bp4wg1Piae88etkcj4T59yaPPEMax6o6WjZq0Yatjg2HMWRoJsD1F27r2OzdZtjjKFTciL85asxiWPt2WmcpaKgVF3q/PfUj+XV41joVOr0PGtw6OIq9LvGVkVpl/Z0JUW+cgtXlV72GX+0ltjrqh2VYYdha9ZNf2hDZ31RnjP2G9/jVX94nGNgZkAGjAxoAAAAjgAF) format("woff");
font-weight: 400;
font-style: normal
}
.imgButton[class*=" icon-"]:before,
.imgButton[class^=icon-]:before,
.imgButton[data-icon]:before {
font-family: animated-buttons!important;
font-style: normal!important;
font-weight: 400!important;
font-variant: normal!important;
text-transform: none!important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.imgButton.icon-clip:before {
content: "\62"
}
.imgButton.icon-cloud:before {
content: "\63"
}
.imgButton.icon-open:before {
content: "\65"
}
.imgButton.icon-link:before {
content: "\66"
}
.imgButton.icon-zip:before {
content: "\67"
}
.imgButton.icon-download:before {
content: "\61"
}
.imgButton::after,
.imgButton::before {
position: absolute;
right: 0;
top: 0;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 50px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.imgButton::before {
font-size: 18px;
z-index: 5;
}
@media (min-width: 560px) {
.imgButton::before {
font-size: 20px;
}
}
@media (min-width: 768px) {
.imgButton::before {
font-size: 22px;
}
}
.imgButton::after {
background-color: #00BCD4;
content: "";
}
.imgButton:active,
.imgButton:focus,
.imgButton:hover {
text-decoration: none!important;
color: #fff !important;
}
.imgButton--cyan,
.imgButton--red,
.imgButton--green,
.imgButton--amber,
.imgButton--purple,
.imgButton--indigo,
.imgButton--teal {
border-width: 2px;
border-style: solid;
}
.imgButton--cyan {
background-color: #224851;
border-color: #00BCD4
}
.imgButton--red {
background-color: #532f30;
border-color: #f44336
}
.imgButton--red::after {
background-color: #F44336
}
.imgButton--green {
background-color: #3e4935;
border-color: #8bc34a
}
.imgButton--green::after {
background-color: #8BC34A
}
.imgButton--amber {
background-color: #554927;
border-color: #ffc107
}
.imgButton--amber::after {
background-color: #FFC107
}
.imgButton--purple {
background-color: #362d4b;
border-color: #673AB7
}
.imgButton--purple::after {
background-color: #673AB7
}
.imgButton--indigo {
border-color: #3f51b5;
background-color: #2e324a
}
.imgButton--indigo::after {
background-color: #3f51b5
}
.imgButton--teal {
border-color: #009688;
background-color: #224041
}
.imgButton--teal::after {
background-color: #009688
}
[class*=imgButton--cover] {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
box-shadow: 0 -100px 100px -80px rgba(0, 0, 0, .3) inset, 0 1px 2px 0 rgba(0, 0, 0, .5);
font-weight: 700;
}
[class*=imgButton--cover].imgButton--cyan {
box-shadow: 0 -100px 100px -80px #00BCD4 inset, 0 1px 2px 0 rgba(0, 0, 0, .5)
}
[class*=imgButton--cover].imgButton--red {
box-shadow: 0 -100px 100px -80px #f44336 inset, 0 1px 2px 0 rgba(0, 0, 0, .5)
}
[class*=imgButton--cover].imgButton--green {
box-shadow: 0 -100px 100px -80px #8bc34a inset, 0 1px 2px 0 rgba(0, 0, 0, .5)
}
[class*=imgButton--cover].imgButton--amber {
box-shadow: 0 -100px 100px -80px #ffc107 inset, 0 1px 2px 0 rgba(0, 0, 0, .5)
}
[class*=imgButton--cover].imgButton--purple {
box-shadow: 0 -100px 100px -80px #673AB7 inset, 0 1px 2px 0 rgba(0, 0, 0, .5)
}
[class*=imgButton--cover].imgButton--indigo {
box-shadow: 0 -100px 100px -80px #3f51b5 inset, 0 1px 2px 0 rgba(0, 0, 0, .5)
}
[class*=imgButton--cover].imgButton--teal {
box-shadow: 0 -100px 100px -80px #009688 inset, 0 1px 2px 0 rgba(0, 0, 0, .5)
}
@-webkit-keyframes shake {
from, to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
10%,
70% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0)
}
40% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0)
}
}
@keyframes shake {
from, to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
10%,
70% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0)
}
40% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0)
}
}
.imgButton--shake:hover::before {
-webkit-animation: shake 1s;
animation: shake 1s
}
@-webkit-keyframes rubber {
from, to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
30% {
-webkit-transform: scale3d(1.25, .75, 1);
transform: scale3d(1.25, .75, 1)
}
40% {
-webkit-transform: scale3d(.5, 1.25, 1);
transform: scale3d(.5, 1.25, 1)
}
50% {
-webkit-transform: scale3d(1.2, .85, 1);
transform: scale3d(1.2, .85, 1)
}
65% {
-webkit-transform: scale3d(.9, 1.05, 1);
transform: scale3d(.9, 1.05, 1)
}
75% {
-webkit-transform: scale3d(1.05, .95, 1);
transform: scale3d(1.05, .95, 1)
}
}
@keyframes rubber {
from, to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
30% {
-webkit-transform: scale3d(1.25, .75, 1);
transform: scale3d(1.25, .75, 1)
}
40% {
-webkit-transform: scale3d(.5, 1.25, 1);
transform: scale3d(.5, 1.25, 1)
}
50% {
-webkit-transform: scale3d(1.2, .85, 1);
transform: scale3d(1.2, .85, 1)
}
65% {
-webkit-transform: scale3d(.9, 1.05, 1);
transform: scale3d(.9, 1.05, 1)
}
75% {
-webkit-transform: scale3d(1.05, .95, 1);
transform: scale3d(1.05, .95, 1)
}
}
.imgButton--rubber:hover::before {
-webkit-animation: rubber 1s;
animation: rubber 1s
}
@-webkit-keyframes rotate {
from {
-webkit-transform-origin: center;
transform-origin: center
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 360deg);
transform: rotate3d(0, 0, 1, 360deg)
}
}
@keyframes rotate {
from {
-webkit-transform-origin: center;
transform-origin: center
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 360deg);
transform: rotate3d(0, 0, 1, 360deg)
}
}
.imgButton--rotate:hover::before {
-webkit-animation: rotate 1s;
animation: rotate 1s
}
@-webkit-keyframes flip {
from {
-webkit-transform: rotate3d(0, 1, 0, -360deg);
transform: rotate3d(0, 1, 0, -360deg)
}
40% {
-webkit-transform: rotate3d(0, 1, 0, -190deg);
transform: rotate3d(0, 1, 0, -190deg)
}
50% {
-webkit-transform: rotate3d(0, 1, 0, -170deg);
transform: rotate3d(0, 1, 0, -170deg)
}
to {
-webkit-transform: rotate3d(0, 1, 0, 0deg);
transform: rotate3d(0, 1, 0, 0deg)
}
}
@keyframes flip {
from {
-webkit-transform: rotate3d(0, 1, 0, -360deg);
transform: rotate3d(0, 1, 0, -360deg)
}
40% {
-webkit-transform: rotate3d(0, 1, 0, -190deg);
transform: rotate3d(0, 1, 0, -190deg)
}
50% {
-webkit-transform: rotate3d(0, 1, 0, -170deg);
transform: rotate3d(0, 1, 0, -170deg)
}
to {
-webkit-transform: rotate3d(0, 1, 0, 0deg);
transform: rotate3d(0, 1, 0, 0deg)
}
}
.imgButton--flip:hover::before {
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-animation: flip 1s;
animation: flip 1s
}
.imgButton--cover1 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWlKdu09QHgC8DXKgk8gtKaGYHPUErMdlz5RTwwWS_CFoggGsXs3D7Boh88_GlX5VjXLBgvEVCj3PV0prxHLgWWY5I1sQ_8TGeKAlrkTmsghYnFooheVrYWYCs_176vPrbeh2xepdGf1o/s1600/cover6.png)
}
.imgButton--cover2 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK0DkVG0tVmYFyUZQ-jICOSbuHp-qhtpqkg0LGhICLvlk9XTpcSrgtymd-hX_FxAZZSaLCbqm9UOJseOODYoneIo3I0D1PnZj_DGBl9PQTRYj8gtA-ajJcOQyKwLBnxlrX5rP1Jy7nSI/s1600/cover2.png)
}
.imgButton--cover3 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKfZSP2knHOhmXfJ98_A9SH9kjmkYlmMq7vC28WvNlOV8Klyy1U9HkH4d7-P9OLwcKaOSJ7_eibKJtLeJUwRY4fteTuCENAmYjqjyimjTFYAC16cYbHGBWIjDHGKeE4EZovIrBiOj0seM/s1600/cover3.png)
}
.imgButton--cover4 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4-8Wd1X-uxwvDcomaQv5IOeSWLoSfdLxcr6mr7V3pkPHGqzxRUKwbp4vElro4eTpMz6r-xubFKaLXlXCGOjRZvYMkCaMT4DbMeQLOF1yO6yPts7TY3pXwCp-7FaqyAMwgks_FxnlboCs/s1600/cover4.png)
}
.imgButton--cover5 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiki1QcROMJnhCo4pmR8M7axikhyWxLXNr9Ufiy1LVlIIEZyIhfx8YD6QUKQKDcha1MTerpiAL2sYeWd45E1Z1NSjXb0F5XL2NAXfD5NDK42ClyA5H2aKdIbidoVZOEHGTRbuYsRXtZPNo/s1600/cover5.png)
}
Neredeyse işlemler bitti. Son olarak yapmanız gereken şey Blogger'da yazı editörünün HTML sekmesine tıklamak ve buton kodlarını istediğiniz alana yapıştırmak. İşte o buton kodlarını aşağıda teker teker vereceğim.
1. Temel Buton
Bildiğiniz klasik sade bir buton. Bi numarası yok yani. Kenarları ovalleştirilmiş, yanında ikonu bulunan çift renkli minimal bir buton isteyenlere göre. İkonunu değiştirmek için kod içerisinde bulunan download yerine zip, open, cloud, clip veya link yazabilirsiniz. Butonun ismini değiştirmek için ise kodun en sonunda bulunan "Temel Buton" yerine istediğinizi yazabilirsiniz.
<a class="imgButton icon-download" href="#">Temel Buton</a>2. Renkli Buton
Bu da yukarıdakinin biraz renklenmiş hali. Geriye kalan her şey aynı. Aşağıya "green" renkte olan butonun kodunu veriyorum. Eğer rengini değiştirmek istiyorsanız "green" yerine red, cyan, amber, purple, indigo veya teal yazabilirsiniz. Aklınızda bulunsun; temel butonun koduna imgButton--green ekledik ve butonumuz renkli oldu
<a class="imgButton imgButton--green icon-download" href="#">Renkli Buton</a>
3. Animasyonlu Buton
Böylece 1 numaradaki temel butonumuza biraz görsellik katmış olduk. Aşağıya "rubber" efektli butonun kodunu veriyorum. Siz "rubber" yerine flip, rotate veya shake yazabilirsiniz ve yine aklınızda bulunsun. Temel butonun koduna imgButton--rubber ekledik ve butonumuz animasyonlu oldu.
Şimdi bir geriye dönelim ve temel butonumuzu hem animasyonlu hem de renkli yapalım. Aklınızda bulunsun diye ne demiştim? Temel butonun koduna imgButton--green ekleyince butonumuzun renkli olduğunu. O zaman aşağıda bulunan animasyonlu buton koduna imgButton--green ekleyince hem animasyonlu hem de renkli hal alacak butonumuz.
<a class="imgButton imgButton--rubber icon-download" href="#">rubber</a>4. Resimli Buton
Bu da temel butonumuza resim eklenmiş hali. Görsellik açısından güzel duruyor. Aşağıya "cover1" yazan butonun kodunu veriyorum. Resmini değiştirmek istiyorsanız kod içerisinde bulunan "cover1" yerine cover2, cover3... yazabilirsiniz.
Kod içerisinde 5 farklı resim bulunuyor. Bu resimleri nasıl değiştirip 6,7,8... diye artıracağınıza da birazdan geçeceğim. Her şey sırayla.
<a class="imgButton imgButton--cover1 icon-download" href="#">cover1</a>
Ayrıca yukarılarda butonumuza renk ve animasyon ekleyebileceğinizi söylemiştim. Şimdi kod içerisine imgButton--green ve imgButton--rubber kodlarını ekleyeceğim ve butonu ortaya karışık hale getireceğim. Hatta yeri gelmişken ilk başta bahsettiğim ikon değiştirme olayını da halledelim. Kod içerisinde "download" yerine "open" yazacağım ve ikonu da değiştireceğim.
<a class="imgButton imgButton--green imgButton--rubber imgButton--cover5 icon-open" href="#">cover5</a>Buton Görselini Değiştirme ve Yeni Görseller Ekleme
Sayfanın en başında CSS kodları vermiştim. Kodun en altında sarı renk ile işaretlediğim yerler var. Bu işaretli yerdeki görselin adresini silip yerine butonda göstermek istediğiniz görselin adresini yapıştırın.
Yeni görseller eklemek istiyorsanız yukarıdaki CSS kodunun altına aşağıda vermiş olduğum kodları ekleyin. Diyelim 6. resmi eklediniz. 7. bir resim daha eklemek istiyorsanız, aşağıdaki kodu yapıştırıp "cover6" yazan kısmı "cover7" yapın. "image.jpg" yazan yere ise görünmesini istediğiniz görselin adresini yapıştırın.
/*Custom IMG*/
.imgButton--cover6 {
background-image:url(image.jpg);
}Son Sözler
Bu muhteşem butonlarla nasıl blogunuzu daha güzel hale getirebileceğinizi tüm ayrıntılarıyla anlatmaya çalıştım. Dilerim işinize yarar ve kullanmaya başlarsınız. Anlamadığınız ve takıldığınız bir yer olduğunda yorum ve iletişim bölümünden bana ulaşabilirsiniz.
YORUMLAR