Basit Demo ve Dowload Butonu

4/20/2016
Blogger blogunuzda paylaşmış olduğunuz içeriklere link yada bağlantı vererek içeriklerin görselliğini sergilemek ve ziyaretçilerinize daha iyi sunum yapmaya çalışmaktasınız. Blogunuzu ne kadar kullanışlı yani basit hale getirirseniz ziyaretçiler o kadar rahat blog içi dolaşım yapabilir.

bloggereklentileri

Basit Demo ve Dowload Butonu - Blogger Eklentileri

Yönetmiş olduğunuz blog basit blog içi dolaşıma sahip olacağı gibi blogunuzun farklı bir tasarımda da görünmesi blog ziyaretçilerinin ilgisini çekecektir. Basit Demo ve Dowload Butonlarını blogunuzda kullanmak için aşağıdaki CSS ve HTML kodlarını blogunuza eklemeniz gerekir.

1. Eğer daha önce blogunuza eklemişseniz aşağıdaki HTML font kodunu tekrar eklemenize gerek yok. Eğer bloğunuzda ekli değilse bu kodu </head> kodunun hemen bir satır üzererine ekleyin.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
2. Blogger hesabınızdan blog kumanda paneline gelerek Şablon > HTML'i Düzenle ve CTRL+F tuşları yardımıyla </style> kodunu bulun ve aşağıdaki CSS kodunu </style> konunun bir satır üzerine ekleyin ve şablonu kaydet butonuna basın.
.bstbuton{margin:20px auto;padding:20px 0;width:200px}
.bstbuton a{background:#fff;color:#666;display:block;font-size:17px;font-weight:700;font-family:'Arial',Verdana,sans-serif;height:50px;line-height:50px;text-align:center;text-decoration:none;text-transform:uppercase;width:200px;position:relative;z-index:2}
.bstbuton a:before{content:'\f019';font-family:FontAwesome;font-weight:normal;padding:8px;margin-left:-12px;margin-right:6px}
.bstbuton span{background:#444;color:#fff;display:block;font-size:12px;font-family:'Arial',Verdana,sans-serif;height:40px;line-height:40px;text-align:center;width:200px;z-index:1;text-transform:uppercase;font-weight:bold}
.bstbuton .up{background:#e25734;margin:-30px auto;opacity:0;border-radius:0 0 5px 5px;transform:translate(0,-50px);transition:350ms}
.bstbuton .down{margin:-30px auto;opacity:0;border-radius:5px 5px 0 0;transform:translate(0,-50px);transition:350ms}
.bstbuton:hover .up{opacity:1;transform:translate(0,0)}
.bstbuton:hover .down{opacity:1;transform:translate(0,-90px)}
.bstbutondemo{margin:20px auto;padding:20px 0;width:200px}
.bstbutondemo a{background:#e25734;color:#fff;display:block;font-size:17px;font-weight:700;font-family:'Arial',Verdana,sans-serif;height:50px;line-height:50px;text-align:center;text-decoration:none;text-transform:uppercase;width:200px;position:relative;z-index:2;transition:350ms}
.bstbutondemo a:before{content:'\f08e';font-family:FontAwesome;font-weight:normal;padding:8px;margin-left:-12px;margin-right:6px}
.bstbutondemo a:hover{color:#fff}
.bstbutondemo span{background:#444;color:#fff;display:block;font-size:12px;font-family:'Arial',Verdana,sans-serif;height:40px;line-height:40px;text-align:center;width:200px;z-index:1;text-transform:uppercase;font-weight:bold}
.bstbutondemo .up{background:#444;margin:-28px auto;opacity:0;border-radius:0 0 5px 5px;transform:translate(0,-50px);transition:350ms}
.bstbutondemo:hover .up{opacity:1;transform:translate(0,0)}
3. Basit Demo ve Dowload Butonları blogunuza eklenmiş oldu. Aşağıdaki HTML kodları paylaşacağınız blog yayınlarına göre uygun olanı içeriğiniz altına yada içeriğinizde bulunan resimlerin altına ekleyebilirsiniz. İsterseniz her ikisini de aynı anda kullanabilirsiniz.
a- Bağlantıların yeni sayfada açılması için aşağıdaki HTML kodu kullanmalısınız.
<div class="bstbutondemo">
<a href="#" target="_blank">Demo</a><br>
<span class="up">Demo için tıklayın</span></div><br>
<div class="bstbuton">
<a href="#" target="_blank">Download</a><br>
<span class="up">İndirmek için tıklayın</span><br>
<span class="down">1.8MB .rar</span></div>
b- Bağlantıların aynı sayfada açılması için aşağıdaki HTML kodu kullanmalısınız.
<div class="bstbutondemo">
<a href="#">Demo</a>
<span class="up">Demo için tıklayın</span></div>
<div class="bstbuton">
<a href="#">Download</a>
<span class="up">İndirmek için tıklayın</span>
<span class="down">1.8MB .rar</span></div>
4. HTML kodları içerisinde renkli olan (#) yerlere eklemek istediğiniz linkleri yada URL buraya eklemelisiniz.
5. Sonuç olarak blogunuzda kullanmak istediğiniz basit butonları başarılı bir şekilde eklemiş oldunuz. Butonların yapısal olarak görünümünde bozulma olması durumunda CSS kodları içerisinde yer alan sarı renkli yerlerden düzenleyebilirsiniz.

Kategori İçerikleri



Blogger
Disqus
Yorum Ekle

1 yorum