Blogger CSS Demo ve İndir Butonu

DEMO

INDIR

Blogseverlere yeni bir css destekli kod daha !
{Blogger CSS Demo ve İndir Butonu}

Çoğunlukla webmaster bloglarında işe yarayacağını düşündüğüm bu kodu sizlerle paylaşmak istedim. İstediğiniz gibi renklendirebilir, şekillendirebilir ve kodları değiştirebilirsiniz. Hadi blogumuza ekleme yöntemini görelim;

• Blogger kontrol panelinizdeyken sırasıyla " Şablon » HTMLyi düzenle " tıklayın. CTRL ve F kombinasyonu'nu kullanarak sayfada " ]]></b:skin> " aratın ve bu kodun üstüne aşağıda verilen kodu ekleyin.;

.download {
color:#fff;}

.download a{
background: #33CCFF url(https://cdn2.iconfinder.com/data/icons/officeicons/PNG/32/Download.png) 5px 50% no-repeat;
padding: 10px 20px 10px 65px;
display:inline;
list-style:none;float:left;margin:0;
width: 200px;
height: 20px;
font-family:Arial Black;
color:#fff;
font-size: 12px;
    border-top: 2px #cce3ff solid;
    border-left: 2px #cce3ff solid;
    border-bottom: 2px #31557f solid;
    border-right: 2px #31557f solid;
  border-radius: 10px;}
.download a:hover{
background: #99FFFF url(https://cdn2.iconfinder.com/data/icons/free-basic-icon-set-2/300/20-32.png) 5px 50% no-repeat;
padding: 10px 20px 10px 65px;
width: 200px;
height: 20px;
font-family:Arial Black;
color:#3A64BF;
font-size: 12px;
    border-top: 2px #cce3ff solid;
    border-left: 2px #cce3ff solid;
    border-bottom: 2px #31557f solid;
    border-right: 2px #31557f solid;
  border-radius: 10px;}
text-shadow: -1px 0px 10px rgba(20, 114, 217, 1);
}



.demo {
float:center;
color:#fff;}

.demo a{
background: #D1FD98 url(https://cdn2.iconfinder.com/data/icons/basicset/search_32.png) 5px 50% no-repeat;
padding: 10px 20px 10px 65px;
display:inline;
list-style:none;float:left;margin:0;
width: 200px;
height: 20px;
font-family:Arial Black;
color:#23AFFF;
font-size: 12px;
    border-top: 2px #cce3ff solid;
    border-left: 2px #cce3ff solid;
    border-bottom: 2px #31557f solid;
    border-right: 2px #31557f solid;
  border-radius: 10px;}
.demo a:hover{
background: #E6FFC5 url(https://cdn2.iconfinder.com/data/icons/free-funktional-icons/32/10_Search_32x32.png) 5px 50% no-repeat;
padding: 10px 20px 10px 65px;
width: 200px;
height: 20px;
font-family:Arial Black;
color:#3A64BF;
font-size: 12px;
    border-top: 2px #cce3ff solid;
    border-left: 2px #cce3ff solid;
    border-bottom: 2px #31557f solid;
    border-right: 2px #31557f solid;
  border-radius: 10px;}
text-shadow: -1px 0px 10px rgba(20, 114, 217, 1);
}

• Yazılarınızda göstermeniz için gereken kodlar(Yeni yazı gönderme sayfasında HTML sekmesi aktifken kodları ekleyiniz.)

DEMO BUTON KODU

<div class="demo" target="_blank">
<a href="#">DEMO</a></div>

İNDİR BUTON KODU

<div class="download" target="_blank" >
<a href="#">INDIR</a></div>

Yazıyla alakalı etiketler;
blogger, blogspot, blog, eklenti, widget, gadget, eklenti, eklentiler, eklentileri, eklentisi
blogger eklenti, blogspot eklenti, blogger eklentisi,
blogger eklentileri, blogger eklentiler, blogger widget, blogger widgets, blogger gadget,
blogger 2015, blogger 2016, blogger eklenti indir, blogger kodu, blogger kodları,