Şık Tasarımlı Demo ve Download Butonu Oluşturmak

Merhaba ;

Özellikle indirme ve tema paylaşımı yapan blog veya sitelerin kullandığı indirme ve demo görünüm butonunu sizlerle paylaşmak istedim.
Oldukça şık ve dinamik bir yapıya sahip olan bu eklentiyi nasıl sitenize veya bloğunuza eklemeniz gerektiğini anlatıcam.

1. K.Paneli > Şablon > Html Düzenle adımlarını takip ediyoruz ve ( ctrl+f ) yardımıyla </head> etiketini buluyoruz , hemen üstüne aşağıdaki kodu yapıştırıyoruz ...

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

2. Yine aynı sayfadan ctrl+f yardımıyla " </style> " kodunu buluyoruz ve hemen üstüne aşağıdaki kodu yapıştırıyoruz.

.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. Şablon kısmına eklememiz gereken kodlar bu kadar.
Aşağıda verdiğim kodları yazılarınızda bu butonları nerede görüntülemek istiyorsanız oraya yapıştırmanız gerekiyor.

<div class="bstbutondemo">
<a href="http://bloggereklentideposu.blogspot.com">Demo</a>
<span class="up">Demo için tıklayın</span></div>
<div class="bstbuton">
<a href="http://bloggereklentideposu.blogspot.com">Download</a>
<span class="up">İndirmek için tıklayın</span>
<span class="down">Bloggereklentideposu.blogspot.com</span></div>

Bütün işlem bu kadar.Hayırlı olsun :)

Devamı >

Blogger Kayıt Şablonu Nedir ? Ne İşe Yarar ?

Merhaba ;

Blogger altyapısı ile blog sahibi olan birçok kişinin bilmediği ve yaygın olmamasına rağmen kullananların vazgeçilmezi olan kayıt şablonunu sizlere anlatmak istedim.

* Kayıt Şablonu Nedir ?

Öncelikle kayıt şablonu ; Bütün yazılarımızda kullandığımız kalıplaşmış olan ve sürekli kullandığımız cümleleri otomatik olarak yazılarımıza eklenmesini sağlayan blogger'a özel bir eklentidir.

Örneğin ben her yazımın başına "Merhaba ;" , sonuna ise "Bütün işlem bu kadar.Hayırlı olsun" cümlelerini ekliyorum.

Kayıt şablonu sayesinde bu kelimeler otomatik olarak yazımın başlangıcına ve sonuna ekleniyor.

Benim için vazgeçilmez değil ancak yazılarını belli kalıp üzerinde , sabit giriş ve sonuç cümleleri olan  blogger arkadaşlarımın işini kolaylaştıracağından eminim.

* Kayıt Şablonunu Nasıl Kullanabilirim ?

Blogger K.Paneli  > Ayarlar  > Yayınlar ve Yorumlar  > Kayıt Şablonu yanındaki " Ekle " Butonuna tıklıyoruz ve açılan pencereye yazılarımızda sürekli kullandığımız veya kullanacağımız cümleleri yazıyoruz ve sağ üst köşede bulunan " Ayarları Kaydet " butonuna tıklıyoruz.

Bütün işlem bu kadar.Hayırlı Olsun :)

Devamı >