CSS demo ve indir butonları nasıl eklenir, yapılır - Blogbeyin | Yazmaya gönüllü arkadaş topluluğu

24 Şub 2019

CSS demo ve indir butonları nasıl eklenir, yapılır


Bir çok sayfada karşınıza çıkan Demo ve İndir butonları nasıl yapılır onu ele alacağız. CSS ve HTML kodları kullanarak hazırlayacağımız bu kodlar sayesinden sade düz bir görünüm veyahut görsel üzerine verilen linkler ile uğraşmayacaksınız. Kodların basit olması yanında kullanışlı olması sayfanıza gelen ziyaretçiler içinde avantaj sağlıyor.Gelelim nasıl yapacağımıza öncelikle Blogger kullanıcısı olarak Blogger da nasıl kullanırız onu anlatalım.

  • Her ihtimale karşı yedek alalım!
  • İlk olarak Blogger>Şablon>HTML'yi Düzenle açıyoruz. Kolay olması CTRL+F klavye kombinasyonu ile ]]></b:skin> aratıyoruz. Bulduğumuz sonuç sonrasında bu kodun üzerine aşağıda yer alan CSS kodlarını yerleştirelim.
  • CSS kodlarını yerleştirdikten sonra Şablonıu Kaydet diyerek bu ekrandan çıkabiliriz.
/* CSS Shortcodes */
.button{list-style:none;text-align:center;border:0;margin:10px 0;clear:both;text-decoration:none}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0 3px;padding:0;list-style:none}
.button li a.demo,.button li a.download{font-family:sans-serif;padding:10px 12px;color:#fff;font-weight:400;font-size:13px;text-align:center;letter-spacing:.5px;border-radius:3px;transition:background-color .2s ease-out}
.button li a.demo {background-color:#f64c3b;}
.button li a.download {background-color:#5faae3;}
.button li a.demo:hover {background-color:#e24131;color:#fff}
.button li a.download:hover {background-color:#4e99d2;color:#fff;}
.first-letter{float:left;color:#f64c3b;font-size:75px;line-height:60px;padding-top:4px;padding-right:8px;padding-left:3px;font-family:Georgia}
#flippy {text-align:center;}
#flippy button{margin:10px auto;cursor:pointer;background-color:#aaa;color:#fff;padding:10px 12px!important;text-transform:uppercase;border:none;border-radius:3px;transition:all .3s ease-out}
#flippy button:hover, #flippy button:focus {background-color:#999;color:#fff;outline:none;opacity:1;}
#flippanel {padding:1px;text-align:left;background:#fafafa;border:1px solid #e3e3e3;}
#flippanel {padding:24px;display:none;}
#flippanel img {background:#f5f5f5;margin:10px auto;}
.bagitiga{position:relative;display:block;-webkit-column-count:3;-moz-column-count:3;column-count:3;}
.bagitiga img{-webkit-backface-visibility:hidden;margin-bottom:15px;max-width:100%;}
.bagitiga br {display:none;}
.makesticking{background:none!important;position:fixed!important;top:10px;z-index:99;-webkit-transform:translateZ(0);}
  • Butonlarımızı tasarladıktan sonra sayfada görüntülemek için Kayıtlar>Görüntülenecek Kayıt> HTML bölümüne geçerek aşağıda yer alan kodları üzerinden mavi renk ile belirtilmiş alanları doldurarak yapabilirsiniz.  
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="ÖNİZLE ADRESİ" target="_blank">ÖNİZLE</a></li>
<li><a class="download" href=" İNDİRME ADRESİ" target="_blank">İNDİR</a></li>
</ul>
</div>
<div class="clear"></div>
Yorumlar


EmoticonEmoticon

Kapat