Blogger buton ekleme (buton eklentisi)

03 Ocak, 2019
Blogger 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
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
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.

5 yorum:

  1. Blogunuzdan çok istifade ediyorum teşekkürler.

    YanıtlaSil
    Yanıtlar
    1. Faydalı olabiliyorsam ne mutlu bana. Ben teşekkür ederim değerli yorumunuz için.

      Sil
  2. Merhaba Link Kopyalama butonu benzeri bir kod nerede bulabilirim?

    YanıtlaSil
    Yanıtlar
    1. Merhabalar, örnek gösterebileceğiniz bir sayfa var mı?

      Sil
    2. https://www.dlsftskit.com/2018/10/uc-sampdoria-dls-kits-and-logo.html

      Sil

Yorum yaparken:
1. İçerik konusuyla alakalı olmasına özen gösterin.
2. Aktif link bırakmayın, aksi taktirde yorumunuz silinir.
3. Yazım ve dil bilgisi kurallarına uymayı ihmal etmeyin.
Konu ile ilgili olmayan sorularınız için ise Blogger Yardım veya İletişim sayfalarını kullanınız.

Copyright © 2016 - 2019 www.blogtecrubem.com · İletişim · Yasal Uyarı