Demo Ve Download Butonları Oluşturma
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.
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:
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:
Ş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:
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.
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.
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.
Güzel eklenti :)
YanıtlaSilFaydalı bir yazı :)
YanıtlaSilfayadalı çok teşekkurler :)
YanıtlaSilişime yaradı teşkkür ederim..
YanıtlaSilprogram indirme sitemde çok faydalı olacağını düşünüyorum, teşekkürler...
YanıtlaSilHocam, 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ıtlaSilSen paylaşta alem görsün hocam :)
SilSerdar kardeş eline sağlık. Paylaşımların son derece okunaklı ve anlaşılır. Sitemi ziyaret edip eksiklerimi belirtmeni önemle arz ederim
YanıtlaSilhttp://www.blogdershanesi.com/
Aradığınız bütün Temaları veya Eklentileri burada bulabilirsiniz. Bir göz atın derim.
Sitenizi çok beğendim sürekli faydalanıyorum benim bloğumu da izleyip takip eder misiniz www.dahamutluyuz.com :)
YanıtlaSilAz 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ıtlaSilGüzelmiş, WordPress'in kendi butonları var, işinize yarayabilir.
YanıtlaSil[button color="red" size="medium" link="http://yayınlamak istediğiniz URL" ][/button]
adamın dibisin ya :D
YanıtlaSilyararlı paylaşım takipteyiz
YanıtlaSilGüzel bilgi, teşekkürler.
YanıtlaSilTeşekkürler. :)
YanıtlaSilsadece yazı var
YanıtlaSil