Blogger Demo ve Download Buton Eklentisi

Bu makalemde sizlere demo ve download butonlarını blogger - blog sitenize nasıl ekleyeceğinizi göstereceğim. Butonlar gayet güzel ve gösterişlidir.

1. Blogger kumanda panelinize giriş yapın.

2. Şablon yazan seçeneğe tıklayın.

3. Html'yi Düzenle seçeneğine tıklayın.

4. Ctrl + F yardımı ile ]]></b:skin> aratın ve üst kısmına alttaki kodları ekleyin.

5. Kodları ]]></b:skin> üst kısmına ekledikten sonra şablonu kaydedin.

.button { -moz-border-radius:5px 5px 5px 5px; -webkit-border-radius:5px 5px 5px 5px; border-radius:5px 5px 5px 5px; -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25); -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25); box-shadow:0 1px 3px rgba(0, 0, 0, 0.25); background:url("http://www.zurb.com/images/overlay-button.png") repeat-x scroll 0 0 #222222; border-bottom:1px solid rgba(0, 0, 0, 0.25); color:#FFFFFF !important; cursor:pointer; font-weight:bold; line-height:1; overflow:visible; font-size:17px; padding:8px 19px 9px; position:relative; text-decoration:none; text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25); width:auto; } .demobutton { background-color:#999999; text-align:center; width:150px; } .demobutton:hover { background-color:#00A0EE; } .downloadbutton { background-color:#91BD09; text-align:center; width:150px; } .downloadbutton:hover { background-color:#00AC00; } .button:hover { -moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45); -webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45); box-shadow:0 1px 11px rgba(0, 0, 0, 0.45); }

Demo Buton Kodu

<a class="demobutton button" href="YOUR DEMO LINK HERE" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Live Demo</span></a> 

Download Buton Kodu

               <a class="button downloadbutton" href="YOUR DOWNLOAD LINK HERE" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Download</span></a>

Yukardaki demo ve download kodlarını ekleyeceğiniz yer ise örneğin yeni yayın oluşturalım ve yayın başlığının altında Oluştur HTML seçenekleri yer almakta HTML seçeneğine tıklayıp kodları yapıştırıyoruz.

Blogda Demo

Tıklayın