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.

11 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
  3. Merhaba ben bunu arattığımda bulamıyorum tema html de ( ]]> )

    YanıtlaSil
    Yanıtlar
    1. Merhaba, blogunuzun adresi nedir?

      Sil
    2. gerek kalmadı teşşekür ederim sonunda çözdüm araştırdıkça ayrıntılı öğreniyorum bilgiler için teşekkür ederim çok faydası oldu :D ben Life goes on yaoi bu arada :D

      Sil
  4. Teşekkürler emeğinize sağlık

    YanıtlaSil
  5. paylaşımınız çok işime yaradı teşekkür ederim

    YanıtlaSil

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

Copyright © 2016 - 2024 Blog Tecrübem. All rights reserved. Powered by Dijidal.com and Blogger. I Google
Sitede yer alan tüm içerikler Blog Tecrübem'e aittir, kullanım koşulları çerçevesinde alıntı yapılabilir.