Adblock Algılandı

Lütfen reklam engelleyicileri devre dışı bırakarak bizi destekleyebilirsiniz.

Reklam engelleyicinizin pasif olduğundan emin olun. Daha fazla bilgi


Blogger kullanıcıları için birbirinden değişik ve şık buton kodlarını bu yazımızda bir araya topladık. Sitenizde şık butonlar kullanmak önemlidir. Hem görünüm açısından hem kullanım kolaylığı açısından linklerinizi buton içerisinde göstermek daha pozitif bir hava katacaktır.
Ekleyeceğimiz CSS ve Html kodları sayesinde  butonların üzerine gelindiğinde ve tıklandığında şık bir görünüm vermiş olacağız.
Blogger CSS Renkli Buton Kodlarını eklemeyi adım adım anlatarak sorunsuz çalışmasını sağlamaya çalışacağız.

1. Blogger CSS Renkli Buton Kodlarını Ekleme

CSS kodlarını tema kodlarının arasına eklenmesi gerekmektedir.
1. Blogger hesabınıza giriş yapınız. 
2. Tema ayarlarına gelin, Html Düzenle'ye giriş yapın.
3. Ctrl+F yaparak kodlar içerisinde arama yapın.
4. ]]></b:skin> kodunu aratarak bulun ve CSS kodlarını bir satır üzerine yapıştırın.

Blogger Paneli ➤ Tema ➤ Html Düzenle ➤ Ctrl+F ➤ ]]></b:skin>

İkinci adıma geçmeden önce Blogger CSS Renkli Buton Kodları Nasıl Eklenir videosunu izleyebilirsiniz.
Adımları uygulamadan önce şablonun yedeğini almayı unutmayın.

 
:root {
    --bg: #3C465C;
    --primary: #78FFCD;
    --solid: #fff;
    --btn-w: 200px;
    --dot-w: calc(var(--btn-w)*.2);
    --tr-X: calc(var(--btn-w) - var(--dot-w));
}
* {box-sizing: border-box;}
*:before, *:after {box-sizing: border-box;}

.btn {
    height: 50px;
    display: block;
    justify-content: center;
    align-items: center;
    flex-flow: wrap;
    background: var(--bg);
    font-size: 20px;
    font-family: 'Titillium Web', sans-serif;
}
h1 {
    color: var(--solid);
    font-size: 2.5rem;
    margin-top: 600rem;   
}
.btn {
    position: absolute;
    margin: 0 auto;
    width: var(--btn-w);
    color: var(--primary);
    border: .15em solid var(--primary);
    border-radius: 5em;
    text-transform: uppercase;
    text-align: center;
    font-size: 1.3em;
    line-height: 2em;
    cursor: pointer;    
}
.dot {
    content: '';
    position: absolute;
    top: 0;
    width:0;
    height: 100%;
    border-radius: 100%;
    transition: all 300ms ease;
    display: none;
}
.dot:after {
    content: '';
    position: absolute;
    left: calc(50% - .4em);
    top: -.4em;
    height: .8em;
    width: .8em;
    background: var(--primary);
    border-radius: 1em;
    border: .25em solid var(--solid);
    box-shadow: 0 0 .7em var(--solid),
                0 0 2em var(--primary);
}
.btn:hover .dot,
.btn:focus .dot {
    animation: atom 2s infinite linear;
    display: block;
}
@keyframes atom {
    0% {transform: translateX(0) rotate(0);}
    30%{transform: translateX(var(--tr-X)) rotate(0);}
    50% {transform: translateX(var(--tr-X)) rotate(180deg);}
    80% {transform: translateX(0) rotate(180deg);}
    100% {transform: translateX(0) rotate(360deg);}
}

2. Blogger Html Kodlarını Ekleme

Bu adımda butonu nerede kullanmak istiyorsanız oraya Html kodlarını eklemelisiniz. Blogger widgetlerinde kullanmak istiyorsanız aşağıdaki Html kodunu gadget içerisine yapıştırın. Her hangi bir sayfada kullanmak istiyorsanız sayfanın Html kodlarının arasına eklemeniz yeterli olacaktır.

Html - Kodu

Butonu eklemek istediğiniz yere aşağıdaki Html kodlarını ekleyiniz. 
<div class="btn">BilgiMaks<div class="dot"></div></div>
Sonuç aşağıda yer alan örnekteki gibi olacaktır.


  /* CSS Button */
input.MyButton {
width: 270px;
padding: 4px;
cursor: pointer;
font-weight: bold;
font-size: 80%;
background: #5dbcd2;
color: #000;
border: 5px solid #5dbcd2;
border-radius: 14px;
}
input.MyButton:hover {
color: #ffffff;
background: #000;
border: 10px solid #000;
}

input.My2 {
width: 270px;
padding: 4px;
cursor: pointer;
font-weight: bold;
font-size: 80%;
background: #26a65b;
color: #fff;
border: 5px solid #26a65b;
border-radius: 14px;
}
input.My2:hover {
color: #ffffff;
background: #1e824c;
border: 10px solid #1e824c;
}

input.My3 {
width: 270px;
padding: 4px;
cursor: pointer;
font-weight: bold;
font-size: 80%;
background: #cf000f;
color: #fff;
border: 5px solid #cf000f;
border-radius: 14px;
}
input.My3:hover {
color: #ffffff;
background: #96281b;
border: 10px solid #96281b;
}

input.My4 {
width: 270px;
padding: 4px;
cursor: pointer;
font-weight: bold;
font-size: 80%;
background: #ffcc33;
color: #000;
border: 5px solid #ffcc33;
border-radius: 14px;
}
input.My4:hover {
color: #000;
background: #ffcc22;
border: 10px solid #ffcc22;
}
input.My5 {
width: 270px;
padding: 4px;
cursor: pointer;
font-weight: bold;
font-size: 80%;
background: #097054;
color: #fff;
border: 5px solid #097054;
border-radius: 14px;
}
input.My5:hover {
color: #000;
background: #097064;
border: 10px solid #097064;
}

input.My6 {
width: 270px;
padding: 4px;
cursor: pointer;
font-weight: bold;
font-size: 80%;
background: #9A3334;
color: #fff;
border: 5px solid #9A3334;
border-radius: 14px;
}
input.My6:hover {
color: #000;
background: #9A2234;
border: 10px solid #9A2234;
}


Butonu nerede kullanmak istiyorsanız oraya Html kodlarını eklemelisiniz. 
Blogger widgetlerinde kullanmak istiyorsanız aşağıdaki Html kodunu gadget içerisine yapıştırın. Her hangi bir sayfada kullanmak istiyorsanız sayfanın Html kodlarının arasına eklemeniz yeterli olacaktır.


Html - Kodu

Butonları eklemek istediğiniz yere aşağıdaki Html kodlarını ekleyiniz. 
<form><input class="MyButton" onclick="window.location.href='#'" type="button" value="BilgiMaks 1" /></form> 
<form><input class="My2" onclick="window.location.href='#'" type="button" value="BilgiMaks 2" /></form> 
<form><input class="My3" onclick="window.location.href='#'" type="button" value="BilgiMaks 3" /></form> 
<form><input class="My4" onclick="window.location.href='#'" type="button" value="BilgiMaks 4" /></form> 
<form><input class="My5" onclick="window.location.href='#'" type="button" value="BilgiMaks 5" /></form> 
<form><input class="My6" onclick="window.location.href='#'" type="button" value="BilgiMaks 6" /></form> 

Sonuç aşağıda yer alan örnekteki gibi olacaktır.
See the Pen oJKrwm by BilgiMaks (@bilgimaks) on CodePen.


.button {
 background-color: white;
 border: 2px solid #09F;
 border-radius:8px;
 color: #09F;
 padding: 16px 32px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 12pt;
 font-family:Verdana;
 margin: 4px 2px;
 transition:all 0.4s; 
 -webkit-transition:all 0.4s;
 -moz-transition:all 0.4s;
 -o-transition:all 0.4s;
}
.button:hover{
 box-shadow: 0 4px 8px 0 gray, 0 6px 20px 0 gray;
 }

Butonu nerede kullanmak istiyorsanız oraya Html kodlarını eklemelisiniz. 
Blogger widgetlerinde kullanmak istiyorsanız aşağıdaki Html kodunu gadget içerisine yapıştırın. Her hangi bir sayfada kullanmak istiyorsanız sayfanın Html kodlarının arasına eklemeniz yeterli olacaktır.

Html - Kodu

Butonu eklemek istediğiniz yere aşağıdaki Html kodlarını ekleyiniz. 
<a class="button" href="#">BilgiMaks</a>

Sonuç aşağıda yer alan örnekteki gibi olacaktır.
See the Pen QzePaB by BilgiMaks (@bilgimaks) on CodePen

Umarım faydalı olmuştur. Görüş ve sorunlarınızı yorum formunda bizimle paylaşabilirsiniz. Görüşleriniz bizim için değerlidir.

Blogger CSS Renkli Buton Kodları


Blogger kullanıcıları için birbirinden değişik ve şık buton kodlarını bu yazımızda bir araya topladık. Sitenizde şık butonlar kullanmak önemlidir. Hem görünüm açısından hem kullanım kolaylığı açısından linklerinizi buton içerisinde göstermek daha pozitif bir hava katacaktır.
Ekleyeceğimiz CSS ve Html kodları sayesinde  butonların üzerine gelindiğinde ve tıklandığında şık bir görünüm vermiş olacağız.
Blogger CSS Renkli Buton Kodlarını eklemeyi adım adım anlatarak sorunsuz çalışmasını sağlamaya çalışacağız.

1. Blogger CSS Renkli Buton Kodlarını Ekleme

CSS kodlarını tema kodlarının arasına eklenmesi gerekmektedir.
1. Blogger hesabınıza giriş yapınız. 
2. Tema ayarlarına gelin, Html Düzenle'ye giriş yapın.
3. Ctrl+F yaparak kodlar içerisinde arama yapın.
4. ]]></b:skin> kodunu aratarak bulun ve CSS kodlarını bir satır üzerine yapıştırın.

Blogger Paneli ➤ Tema ➤ Html Düzenle ➤ Ctrl+F ➤ ]]></b:skin>

İkinci adıma geçmeden önce Blogger CSS Renkli Buton Kodları Nasıl Eklenir videosunu izleyebilirsiniz.
Adımları uygulamadan önce şablonun yedeğini almayı unutmayın.

 
:root {
    --bg: #3C465C;
    --primary: #78FFCD;
    --solid: #fff;
    --btn-w: 200px;
    --dot-w: calc(var(--btn-w)*.2);
    --tr-X: calc(var(--btn-w) - var(--dot-w));
}
* {box-sizing: border-box;}
*:before, *:after {box-sizing: border-box;}

.btn {
    height: 50px;
    display: block;
    justify-content: center;
    align-items: center;
    flex-flow: wrap;
    background: var(--bg);
    font-size: 20px;
    font-family: 'Titillium Web', sans-serif;
}
h1 {
    color: var(--solid);
    font-size: 2.5rem;
    margin-top: 600rem;   
}
.btn {
    position: absolute;
    margin: 0 auto;
    width: var(--btn-w);
    color: var(--primary);
    border: .15em solid var(--primary);
    border-radius: 5em;
    text-transform: uppercase;
    text-align: center;
    font-size: 1.3em;
    line-height: 2em;
    cursor: pointer;    
}
.dot {
    content: '';
    position: absolute;
    top: 0;
    width:0;
    height: 100%;
    border-radius: 100%;
    transition: all 300ms ease;
    display: none;
}
.dot:after {
    content: '';
    position: absolute;
    left: calc(50% - .4em);
    top: -.4em;
    height: .8em;
    width: .8em;
    background: var(--primary);
    border-radius: 1em;
    border: .25em solid var(--solid);
    box-shadow: 0 0 .7em var(--solid),
                0 0 2em var(--primary);
}
.btn:hover .dot,
.btn:focus .dot {
    animation: atom 2s infinite linear;
    display: block;
}
@keyframes atom {
    0% {transform: translateX(0) rotate(0);}
    30%{transform: translateX(var(--tr-X)) rotate(0);}
    50% {transform: translateX(var(--tr-X)) rotate(180deg);}
    80% {transform: translateX(0) rotate(180deg);}
    100% {transform: translateX(0) rotate(360deg);}
}

2. Blogger Html Kodlarını Ekleme

Bu adımda butonu nerede kullanmak istiyorsanız oraya Html kodlarını eklemelisiniz. Blogger widgetlerinde kullanmak istiyorsanız aşağıdaki Html kodunu gadget içerisine yapıştırın. Her hangi bir sayfada kullanmak istiyorsanız sayfanın Html kodlarının arasına eklemeniz yeterli olacaktır.

Html - Kodu

Butonu eklemek istediğiniz yere aşağıdaki Html kodlarını ekleyiniz. 
<div class="btn">BilgiMaks<div class="dot"></div></div>
Sonuç aşağıda yer alan örnekteki gibi olacaktır.


  /* CSS Button */
input.MyButton {
width: 270px;
padding: 4px;
cursor: pointer;
font-weight: bold;
font-size: 80%;
background: #5dbcd2;
color: #000;
border: 5px solid #5dbcd2;
border-radius: 14px;
}
input.MyButton:hover {
color: #ffffff;
background: #000;
border: 10px solid #000;
}

input.My2 {
width: 270px;
padding: 4px;
cursor: pointer;
font-weight: bold;
font-size: 80%;
background: #26a65b;
color: #fff;
border: 5px solid #26a65b;
border-radius: 14px;
}
input.My2:hover {
color: #ffffff;
background: #1e824c;
border: 10px solid #1e824c;
}

input.My3 {
width: 270px;
padding: 4px;
cursor: pointer;
font-weight: bold;
font-size: 80%;
background: #cf000f;
color: #fff;
border: 5px solid #cf000f;
border-radius: 14px;
}
input.My3:hover {
color: #ffffff;
background: #96281b;
border: 10px solid #96281b;
}

input.My4 {
width: 270px;
padding: 4px;
cursor: pointer;
font-weight: bold;
font-size: 80%;
background: #ffcc33;
color: #000;
border: 5px solid #ffcc33;
border-radius: 14px;
}
input.My4:hover {
color: #000;
background: #ffcc22;
border: 10px solid #ffcc22;
}
input.My5 {
width: 270px;
padding: 4px;
cursor: pointer;
font-weight: bold;
font-size: 80%;
background: #097054;
color: #fff;
border: 5px solid #097054;
border-radius: 14px;
}
input.My5:hover {
color: #000;
background: #097064;
border: 10px solid #097064;
}

input.My6 {
width: 270px;
padding: 4px;
cursor: pointer;
font-weight: bold;
font-size: 80%;
background: #9A3334;
color: #fff;
border: 5px solid #9A3334;
border-radius: 14px;
}
input.My6:hover {
color: #000;
background: #9A2234;
border: 10px solid #9A2234;
}


Butonu nerede kullanmak istiyorsanız oraya Html kodlarını eklemelisiniz. 
Blogger widgetlerinde kullanmak istiyorsanız aşağıdaki Html kodunu gadget içerisine yapıştırın. Her hangi bir sayfada kullanmak istiyorsanız sayfanın Html kodlarının arasına eklemeniz yeterli olacaktır.


Html - Kodu

Butonları eklemek istediğiniz yere aşağıdaki Html kodlarını ekleyiniz. 
<form><input class="MyButton" onclick="window.location.href='#'" type="button" value="BilgiMaks 1" /></form> 
<form><input class="My2" onclick="window.location.href='#'" type="button" value="BilgiMaks 2" /></form> 
<form><input class="My3" onclick="window.location.href='#'" type="button" value="BilgiMaks 3" /></form> 
<form><input class="My4" onclick="window.location.href='#'" type="button" value="BilgiMaks 4" /></form> 
<form><input class="My5" onclick="window.location.href='#'" type="button" value="BilgiMaks 5" /></form> 
<form><input class="My6" onclick="window.location.href='#'" type="button" value="BilgiMaks 6" /></form> 

Sonuç aşağıda yer alan örnekteki gibi olacaktır.
See the Pen oJKrwm by BilgiMaks (@bilgimaks) on CodePen.


.button {
 background-color: white;
 border: 2px solid #09F;
 border-radius:8px;
 color: #09F;
 padding: 16px 32px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 12pt;
 font-family:Verdana;
 margin: 4px 2px;
 transition:all 0.4s; 
 -webkit-transition:all 0.4s;
 -moz-transition:all 0.4s;
 -o-transition:all 0.4s;
}
.button:hover{
 box-shadow: 0 4px 8px 0 gray, 0 6px 20px 0 gray;
 }

Butonu nerede kullanmak istiyorsanız oraya Html kodlarını eklemelisiniz. 
Blogger widgetlerinde kullanmak istiyorsanız aşağıdaki Html kodunu gadget içerisine yapıştırın. Her hangi bir sayfada kullanmak istiyorsanız sayfanın Html kodlarının arasına eklemeniz yeterli olacaktır.

Html - Kodu

Butonu eklemek istediğiniz yere aşağıdaki Html kodlarını ekleyiniz. 
<a class="button" href="#">BilgiMaks</a>

Sonuç aşağıda yer alan örnekteki gibi olacaktır.
See the Pen QzePaB by BilgiMaks (@bilgimaks) on CodePen

Umarım faydalı olmuştur. Görüş ve sorunlarınızı yorum formunda bizimle paylaşabilirsiniz. Görüşleriniz bizim için değerlidir.

Diğer Yayınlar

Bültenimize Abone Ol

Bildirimler

Disqus Logo