Slayt Görünümlü Demo ve Download Butonları Yapma

10/14/2015
Slayt Görünümlü Demo ve Download Butonları Yapma

Slayt Görünümlü Demo ve Download Butonları Yapma - Slayt görünümlü DEMO ve DOWNLOAD butonları yapma. Bloglarınızda yazılara link vererek sayfa yönlendirme yada indirme linkleri vererek içerik oluşturuluyordu. Bu da blogunuzun blogunuzun kötü görünmesine neden oluyordu.

Şimdi sizlerle paylaşacağım yeni blogger eklentisi bu gibi yazılara link vermektense blogunuza slayt görünümlü buton yaparak göze daha iyi hitap eden bir blogunuz olsun. İllaki slayt olmasına gerek yok renkli bir butonda oluşturabilirsiniz.

Blogger Demo ve Download Slayt Butonları


1- Şimdi ilk olarak blogger'a giriş yapın ve hangi blogunuzda uygulamak istiyorsanız o blogunuzu seçin ve Şablon sekmesine tıklayın. Ardından HTML'i Düzenle sekmesine tıklıyoruz. Açılan şablon kısmında yani kodların bulunduğu bölümde herhangi bir yere bir kez tıklayın ve CTRL + F tuşlarına basın ve ]]></b:skin> veya </style> kodunu aratın ve bu kodu bulun. Bu kodun hemen üst kısmına aşağıdaki CSS kodlarını ekleyin ve ardından şablonu kaydedin.

#bebuton{margin:20px auto;text-align:center}
#bebuton br{display:none}
.buton-be,.buton-be2{position:relative;display:inline-block;height:50px;width:200px;line-height:50px;padding:0;border-radius:50px;background:#fefefe;border:2px solid #0792c1;margin:10px;transition:.5s}
.buton-be2{border:2px solid #f37a0f}
.buton-be:hover{background:#0792c1}
.buton-be2:hover{background:#f37a0f}
.buton-be:hover span.circle,.buton-be2:hover span.circle2{left:100%;margin-left:-45px;background:#fefefe;color:#0792c1}
.buton-be2:hover span.circle2{color:#f37a0f}
.buton-be:hover span.keyw,.buton-be2:hover span.keyw2{left:40px;opacity:0}
.buton-be:hover span.keyw-hover,.buton-be2:hover span.keyw-hover2{opacity:1;left:40px}
.buton-be span.circle,.buton-be2 span.circle2{display:block;background:#0792c1;color:#fff;position:absolute;float:left;margin:5px;line-height:42px;height:40px;width:40px;top:0;left:0;transition:.5s;border-radius:50%}
.buton-be2 span.circle2{background:#f37a0f}
.buton-be span.keyw,.buton-be span.keyw-hover,.buton-be2 span.keyw2,.buton-be2 span.keyw-hover2{position:absolute;left:90px;text-align:center;margin:0 auto;font-size:15px;font-weight:bold;color:#0792c1;transition:.5s}
.buton-be2 span.keyw2,.buton-be2 span.keyw-hover2{color: #f37a0f;left:80px}
.buton-be span.keyw-hover,.buton-be2 span.keyw-hover2{left:80px;opacity:0}
.buton-be span.keyw-hover,.buton-be2 span.keyw-hover2{color:#fff}

NOT: Arkadaşlar şablona kod eklerken mutlaka kodları önce not defterinde açın.

2- Şimdi butonları oluşturmak için hazır olun. Butonlardan sadece birini kullanmak istiyorsanız öncelikle yeni yayın oluştur bölümünü açıyoruz ve Oluştur - HTML kısmından HTML'e tıklıyoruz. Ve eklemek istediğimiz yere aşağıdaki kodları yerleştiriyoruz. Nerede görünmesini istiyorsanız oraya yerleştirin ve ön izleme yapın.

<div id="bebuton">
<a href="#" class="buton-be" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="keyw">Demo</span>
  <span class="keyw-hover">Buraya Tıkla</span>
</a>
<a href="#" class="buton-be2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="keyw2">Download</span>
  <span class="keyw-hover2">Buraya Tıkla</span>
</a>
</div>

Mavi olan yere (#) bağlantı linkleri ekliyorsunuz.


Sizlere elimden geldiğince yardımcı olmaya çalıştım ve bu güzel eklentiyi sizlerle tanıştırmış oldum. Blogumuza takip etmeye devam edin daha bir çok yenilikler geliyor. İsterseniz blogumuzun altında bulunan abone ol menüsünden abone olabilirsiniz ve tüm yeniliklerden haberdar olun.

Kategori İçerikleri



Blogger
Disqus
Yorum Ekle

1 yorum

paylaşım için teşekkürler

Cevap