Blogger buton ekleme (buton eklentisi)

Blogger buton eklentisi

Web sayfalarımıza, bloglarımıza gelen ziyaretçiler her ne kadar almak istediğine en kısa sürede ve en doğru şekilde ulaşmak istese de, görsel açıdan da zengin bir sayfayı ziyaret etmek isteyeceklerdir. Özellikle bazı durumlarda cezbedici görsel zenginliğin tercih sebebi olduğunu bilerek temalarımıza ve sayfalarımıza müdahale etmemiz gerekir. Blogger bloglarımıza ya da web sayfalarımıza ekleyeceğimiz buton eklentisi de görsel açıdan zengin olması gereken eklentiler arasında.

Daha önce basit HTML kodları ile nasıl buton oluşturulur konusuna değinmiştim. O yazımda belirttiğim gibi;

<button type="button">BUTON</button>

Kodlarını HTML kısmına eklediğimizde;

Şeklinde bir buton görüntüsü elde edebiliyoruz.

Blogger buton eklentisi

Bu yazımda ise biraz daha zengin bir görünüme sahip bir buton eklentisine yer vermek istedim. Yukarıda butonun görseli yer almakta. Peki bu buton eklentisini nasıl Blogger bloglarına eklenir?

Blogger (blogspot) bloglarına nasıl buton eklenir?

İlk olarak Tema kısmına ulaşıp HTML alanında Ctrl F yardımıyla

]]></b:skin>

kodunu bulmamız gerekir. Bulduğumuz bu kodun hemen üstüne ise;

input.Buton {
width: 100%;
padding: 10px;
height: 40px;
cursor: pointer;
font: normal normal 16px Helvatica, Arial, sans-serif!important;
    font-size: 16px!important;
    font-weight: 600!important;
    font-style: normal!important;
background: #3cafe0;
color: #fff;
border: 1px solid #242424;
border-radius: 2px;
}
input.Buton:hover {
color: #fff;
background: #242424;
border: 1px solid #242424;
}

bu kodları ekleyip temamızı kaydediyoruz. Daha sonra ise Yerleşim kısmında dilediğimiz alan için Gadget Ekle seçeneği ile;

Blogger gadget ekle

Aşağıda yer alan kodları HTML/JavaScript kısmına ekliyoruz.

<form>
<input class="Buton" type="button" value="BUTON" onclick="window.location.href='BUTON-LİNKİ-BURAYA'" />
</form>

Son olarak eklentiyi kaydedip blogumuzu kontrol edebiliriz.

Düzenleme kısmına gelince; Eklediğiniz butonun rengini, kenar çizgilerini, mouse üstüne gelince görünen rengini, yazı şeklini ve diğer değerleri dilediğiniz gibi düzenleyebilirsiniz. En son kısımda mavi ve kırmızı renkle belirttiğim alanı da düzenlemeyi unutmayın. Sorularınız olursa yorum yaparak bildirebilirsiniz.