Blog Slayt Buton Eklentisi

3/04/2016
Blog Slayt Buton Eklentisi

Blog Slayt Buton Eklentisi - Blog eklentileri olarak bir çok yerde eklentilerin renklerini değiştirerek yada isimlerini faklı yazarak sunulan blog eklentileri insanları yormaya başlamış ve bir çok blogda aynı eklentilere rastlamak mümkün olur hale gelmeye başladı.

Blogger gruplarının ortak kullandığı bir çok eklenti var. Fakat bir blogunuz varsa ve sizin içerik olarak paylaşımlarınızı karşılayabilecek olan eklentileri blogunuza eklemeniz en doğrusu olacaktır. Benim blogumda da paylaşmış olduğum eklentileri blogunuza eklemek zorunda değilsiniz. Blogunuzu sade yani karışık olmayan bir blog haline getirmeye çalışmalısınız.

Şimdi sizinle paylaşıcam eklentinin en güzel tarafı istediğiniz içerikte kullanabilirsiniz. Yani istemediğiniz içeriklerde kullanmaya bilirsiniz. Bu da şu demek oluyor; bir yayın oluşturdunuz ve butonlara ihtiyacınız yok ama butonlar içerik altında gelmekte ve ziyaretçiler için de kullanılmayan buton için blogunuz hakkında olumsuz düşünebilir. Bunlara sebebiyet vermemek için en güzeli ihtiyacınız olan eklentileri ihtiyacınız olduğu zaman ve yerde kullanmanız blogunuz açısından da ziyaretçiler açısından da olumlu olacaktır. Şimdi sizinle küçük bir eklenti paylaşacağım.

Blogger Blogspot Slayt Tarzı Butonlar


Bir yayın oluşturdunuz ve bu yayın için bir buton eklemek istiyorsunuz. İster bağlantı butonu ister indirme butonu, aşağıda paylaşmış olduğum CSS kodunu öncelikle style dosyamızın içine atmamız gerek.

1- Blogger kumanda panelinden Tema > HTML Düzenle diyoruz ve CTRL+F yardımıyla ]]></b:skin> yada </style> kodunu buluyoruz ve ]]></b:skin> yada </style> kodunun hemen bir satır üzerine aşağıda paylaşmış olduğumuz CSS kodunu ekliyoruz ve şablonu kaydet diyoruz.

#wrap {
    margin: 20px auto;
    text-align: center;
}
a.btn {
    display: inline-block;
    position: relative;
    font-family: 'Open Sans', sans-serif;
    text-decoration: none;
    font-weight: 700;
    background: #30abd5;
    letter-spacing: .5px;
    padding: 10px 20px;
    margin: 10px;
    color: #fff;
    box-shadow: inset 0 0 0 #22313F;
    font-size: 16px;
    text-transform: uppercase;
    border-radius: 3px;
    transition: all 0.3s ease-out;
}
a.btn:hover {
    background: #30abd5;
    color: #fff;
    box-shadow: inset 0px -50px 0px #22313F;
}
a.btn:active {
    color: #05555e;
    box-shadow: inset 0px -50px 0px #f5f7fa;
}
a.btn.warn {
    background: #f5f7fa;
    color: #05555e;
    box-shadow: inset 0 0 0 #30abd5;
}
a.btn.warn:hover {
    background: #f5f7fa;
    color: #fff;
    box-shadow: inset 0px -50px 0px #30abd5;
}
a.btn.warn:active {
    color: #fff;
    box-shadow: inset 0px -50px 0px #30abd5;
}
0px -50px 0px #30abd5;
}

2- Şimdi butonları kullanmak istediğimiz içeriklerin altına ekliyoruz. Aşağıda paylaşmış olduğumuz kodları istediğiniz içerikte (yayında) kullanabilirsiniz.

<div id="wrap"><a class="btn" href="#">Buton</a></div>
<div id="wrap"><a class="btn warn" href="#">Buton</a></div>

Bilgi: Butonların renklerini değiştirmek için kod içerisinde renk olan renk kodlarını değiştirerek istediğiniz renkleri oluşturabilirsiniz.


HTML kod içerisinde mavi renk ile belirtilmiş (#) yere bağlantılarınızı ekleyin.

Kategori İçerikleri

Blogger
Disqus
Yorum Ekle

Hiç yorum yok