Blogger İçin Demo ve İndir Butonları

Bu yazıda sizlere demo-indir yazılarını basit kodlamayla nasıl şık bir hale getireceğimizi anlatacağım. Bloglarımızdaki paylaşımların altına yeri geldiğinde "indir" veya "demo" yazmayı biliyoruz, fakat bu butonlarla daha güzel bir görüntü oluşturacağız. Aşağıda butonların önizlemesi ve onun altında da sitenize nasıl uygulayacagınızla ilglili bilgiler var, 2 adımda siz de demo ve indir butonu yapabilirsiniz. Bir sorunla karşılaşırsanız bu sayfaya yorum yaparak bildirin, kısa süre içinde size yardımcı olacağım..

Demo ve İndir Butonları Nasıl Yapılır ?

İlk olarak Şablon > HTML’yi düzenle yolunu takip edin ve Ctrl + F tuş kombinasyonunun yardımıyla arama kutusunu açarak ]]></b:skin>  kodunu bulun üzerine aşağıdaki kodları yapıştırın.

.tbbutton{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;} .tbbutton ul {margin:0;padding:0} .tbbutton li{display:inline;margin:0;padding:0} .tbdemo {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; } .tbİndir {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;} .tbdemo:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 } .tbİndir:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }

Aşağadaki kodu paylaştığınız yayınlarda HTML moduna yapıştırın, gerekli düzenlemeleri yaparak kullanın...

<div style="text-align: center;"> <ul class="tbbutton"><li><a class="tbdemo" href="http://gamewinsome.blogspot.com" target="_blank">Demo</a></li><li><a class="tbİndir" href="http://gamewinsome.blogspot.com" target="_blank">İndir</a></li></ul></div><div class="clear"></div>

Sosyal Medyada Paylaş