Blogunuza Önemli Kelimeler İçin Buton Nasıl Eklenir

Eğer blogunuzda standart olarak bazı kelimeler kullanıyorsanız bu kelimeleri özelleştirmek için buton kullanmanız görsel açıdan şık bir görüntü kazandıracaktır.Örneğin blogunuzda bir dosya indirmek için link verdiğinizde indir şeklinde butonun olması ya da herhangi bir kodun-şablonun önizlemesi için önizle veya google,blogger gibi okuyucularınızın hesabına girmesi gereken yerlere buton şeklinde vererek farklılık oluşturabilirsiniz.

Eğer blogunuza bu türden kelimelere sıklıkla yer veriyor ve bunlara buton eklemek istiyorsanız aşağıdaki adımları ugulayarak bunu gerçekleştirebilirsiniz:

blogger-buton-ekle

  • Öncelikle blogger hesabına giriş yapın.
  • Şablon Düzenle kısmına gelerek aşağıdaki kodu arayın.

]]></b:skin>

Bu kodun hemen üzerine aşağıdaki kodu ekleyin :

button.ui-button{-webkit-border-radius:2px;-webkit-box-align:stretch;-webkit-box-sizing:content-box;-webkit-transition:all .2s;-webkit-user-select:none;background: -webkit-gradient(linear, left top, left bottom, from(whiteSmoke), to(#F1F1F1));border:1px solid rgba(0,0,0,0.1);border-radius:2px;box-sizing:content-box;color:#222;cursor:pointer;font-size:11px;font-weight:700;height:27px;line-height:26px;margin:0;padding:0 10px;position:relative;text-align:center;vertical-align:middle}button.ui-button:hover{-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.1);-webkit-transition:all 0;background: -webkit-gradient(linear, left top, left bottom, from(#F8F8F8), to(#F1F1F1));border:1px solid rgba(0,0,0,0.2);box-shadow:0 1px 1px rgba(0,0,0,0.1);color:#222;text-decoration:none}

Şimdi şablonunuzu kaydedebilirsiniz.Gerekli CSS kodlarımzı blogumuza ekledik.Şimsi sıra geldi butona yazımızda yer vermeye.Yazınızı yazarken html moduna geçerek aşağıdaki kodu ekleyin :

<button class="ui-button"><a href=http://www.ornek.com target="_blank">Indir</a></button>

imageIndir kısmına buton üzerinde yazması gereken ifadeyi ve ornek.com yerine de butona basıldığında gidilmesi gereken sitenin URL sini verin.Yazınızı yayınladığınızda ilgili kelimenin buton halinde görüntülendiğini göreceksiniz.

Eğer biraz CSS bilginiz varsa yukarıdaki koldarı isteğinize göre düzenleyebilirsiniz.Size önerim online html/css editörleri yardımıyla bu işlemi gerçekleştirmeniz.

Ozan Başer

Merhaba ben Ozan Başer. EhliBlog'da ve elbette Ehliforum (Blogculara Özel Forum)'da yazıyorum. Blogger, seo, adsense, sosyal medya ve google ürünleri hakkında faydalı ve kaliteli içeriği okuyucularıma sunmaya çalışıyorum. C#, PHP, Javascript gibi uğraşılarım var. Web ve online teknolojiler ile ilgili birçok konuda fikirlerimi sizlerle paylaşıyorum.

Hiç yorum yok:

Yorum Gönder

Yorumunuza gelecek cevabı takip etmek "beni bilgilendir" kutucuğuna işaretleyebilirsiniz.