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:
- Ö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>
İndir
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.
