16 Ağustos 2016 Salı

Demo Ve Download Butonları Oluşturma

13 yorum
Blog yazarlığı ile uzun süre uğraşan herkes zamanla kendi tasarımlarını, temalarını, kodlarını düzenlemeye başlıyor. Bu çalışmalarını blogunda paylaşmak istediklerinde ise DEMO yani Önizleme ve DOWNLOAD yani İndirme butonlarından faydalanıyorlar.

Blogunda Blogger temaları paylaşan bir takipçim benden slide efektli görsel yönden etkileyici butonlar için kod istemişti. İlgilenenler ve ihtiyacı olanla çıkabilir düşüncesiyle buradan herkesle paylaşmanın daha doğru olacağını düşündüm.

demo download butonları


Paylaşacağımı bu demo ve download butonlarında sadece hiç grafik kullanılmadığı için oldukça hızlı yükleniyor ve çalışıyor. Butronların üzerindeki ikonlar için font awesome ikonları kullanılmış. Diğer tüm her şey CSS kodları ile halledilmiştir.



Bu butonları blog yazılarınızdaki paylaşımlarınızda kullanmak için öncelikle font awesome’ın blogunuzda tanımlı olması gerekir. Eğer şablonun HTML kodlarına daha önce fontawesme kodu eklemediyseniz Şablon > HTML’yi Düzenle diyerek şablonunuzun HTML kodlarının olduğu pencereyi açın ve burada <head> kodunun altına şu kodu ekleyin:

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

Daha sonra download ve demo butonlarının CSS kodlarını şablona eklemelisiniz. Bunun için ]]></b:skin> kodunu bulun ve bunun üzerine şu stil kodlarını ekleyin:

#buton {     margin: 20px auto;     text-align: center; }
#buton br {     display: none; }
.mbg-btn-slide, .mbg-btn-slide2 {     position: relative;     display: inline-block;     height: 50px;     width: 200px;     line-height: 50px;     padding: 0;     border-radius: 50px;     background: #fdfdfd;     border: 2px solid #00CC00;     margin: 10px;     transition: .5s; }
.mbg-btn-slide2 {     border: 2px solid #FF3300; } .mbg-btn-slide:hover {     background-color: #00CC00; } .mbg-btn-slide2:hover {     background-color: #FF3300; }
.mbg-btn-slide:hover span.circle, .mbg-btn-slide2:hover span.circle2 {     left: 100%;     margin-left: -45px;     background-color: #fdfdfd;     color: #00CC00; }
.mbg-btn-slide2:hover span.circle2 {     color: #FF3300; }
.mbg-btn-slide:hover span.title, .mbg-btn-slide2:hover span.title2 {     left: 40px;     opacity: 0; }
.mbg-btn-slide:hover span.title-hover, .mbg-btn-slide2:hover span.title-hover2 {     opacity: 1;     left: 40px; }
.mbg-btn-slide span.circle, .mbg-btn-slide2 span.circle2 {     display: block;     background-color: #00CC00;     color: #fff;     position: absolute;     float: left;     margin: 5px;     line-height: 42px;     height: 40px;     width: 40px;     top: 0;     left: 0;     transition: .5s;     border-radius: 50%; }
.mbg-btn-slide2 span.circle2 {     background-color: #FF3300; }
.mbg-btn-slide span.title,   .mbg-btn-slide span.title-hover, .mbg-btn-slide2 span.title2,   .mbg-btn-slide2 span.title-hover2 {     position: absolute;     left: 90px;     text-align: center;     margin: 0 auto;     font-size: 16px;     font-weight: bold;     color: #FF3300;     transition: .5s; }
.mbg-btn-slide2 span.title2,   .bsd-btn-slide2 span.title-hover2 {     color: #00CC00;     left: 80px; }
.mbg-btn-slide span.title-hover, .mbg-btn-slide2 span.title-hover2 {     left: 80px;     opacity: 0; }
.mbg-btn-slide span.title-hover, .mbg-btn-slide2 span.title-hover2 {     color: #fff; }

Şablonun HTML kodlarında yapılacaklar bu kadar. Bundan sonra demo ve download butonlarını kullanacağınız yazının HTML kodu bölümünü açın ve butonların gözükmesini istediğiniz yere butonların kodlarını ekleyin:

<div id="buton"> <a href="https://bloghocam.blogspot.com" class="mbg-btn-slide" target="_blank">   <span class="circle"><i class="fa fa-rocket"></i></span>   <span class="title">Demo</span>   <span class="title-hover">Önizle</span> </a> <a href="https://bloghocam.blogspot.com" class="mbg-btn-slide2" target="_blank">   <span class="circle2"><i class="fa fa-download"></i></span>   <span class="title2">Download</span>   <span class="title-hover2">İndir</span> </a> </div>

Burda ilk mavi yere demo butonuna tıklandığında açılacak sayfanın urlsini, ikinci mavi yere download butonuna tıklandığında açılacak sayfanın urlsini yazın.

Faydalı olması ümidiyle, herkese iyi bloglar.

13 yorum:

  1. işime yaradı teşkkür ederim..

    YanıtlaSil
  2. program indirme sitemde çok faydalı olacağını düşünüyorum, teşekkürler...

    YanıtlaSil
  3. Hocam, bu 2 sene önceki bir eklenti. Daha yenilikçi bir buton paylaşsaydınız kullanmak isteyenler için daha iyi olurdu. Yine de güzel butonlar, kullanmak isteyenlerin işini görecektir.

    YanıtlaSil
    Yanıtlar
    1. Sen paylaşta alem görsün hocam :)

      Sil
  4. Serdar kardeş eline sağlık. Paylaşımların son derece okunaklı ve anlaşılır. Sitemi ziyaret edip eksiklerimi belirtmeni önemle arz ederim

    http://www.blogdershanesi.com/

    Aradığınız bütün Temaları veya Eklentileri burada bulabilirsiniz. Bir göz atın derim.

    YanıtlaSil
  5. Sitenizi çok beğendim sürekli faydalanıyorum benim bloğumu da izleyip takip eder misiniz www.dahamutluyuz.com :)

    YanıtlaSil
  6. Az biraz bilginiz olduktan sonra kolaylıkla photoshop aracılığı ile yapılabilir. Önemli olan bir konuda png olarak kayıt yapmak gerekiyor. Anlattığınız gibi yapılırsa güzel çalışmalar ortaya çıkar.

    YanıtlaSil
  7. Güzelmiş, WordPress'in kendi butonları var, işinize yarayabilir.

    [button color="red" size="medium" link="http://yayınlamak istediğiniz URL" ][/button]

    YanıtlaSil
  8. yararlı paylaşım takipteyiz

    YanıtlaSil

Picardes

LİNKLER