Sitene Sürgülü Buton Ekleme Kodu

     Sitemizde daha önceden farklı şekillerde Blogger sitenize ekleyebileceğiniz HTML buton Kodlarını paylaşmıştık.Şimdi bunlara yeni bir tanesini daha ekliyoruz,yukarıda ki resimde de gördüğünüz gibi bir görünümü ÖNİZLEME tıklayarak nasıl bir özelliğe sahip olduğunu görebilirsiniz.

     Bu butonu diğer butonları kullandığımız gibi yazı içerisinde sayfalarda veya gadget ekleme yöntemi ile ekleyerek sitenizde kullanabilirsininiz.Gadget ekleme yöntemini pek kullanmanızı tercih etmiyorum çünkü her temada düzgün çalışmayabiliyor.Genelde yazı içerlerinde kullanılmasını tavsiye ederim.Bu butonla isterseniz sayfa yönlendirme,program indirme,Önizleme gibi farklı konularda kullanabilir.

Blogger Sürgülü Buton Ekleme ve Kurulumu:

*Önce blogger hesabınıza giriş yapın.
*Kumana Panelinden Şablon sekmesine tıklayın
*HTML Düzenle diyerek CTRL+F tuşları ile aşağıda ki  kodunu aradın.

]]></b:skin>

*Hemen bir satır üst kısmına altta ki kodları ekleyin.
*Şablonunuzu kaydedin.

.a-btn{<br /> background:#80a9da;<br /> background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));<br /> background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%);<br /> background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%);<br /> background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%);<br /> background:linear-gradient(top, #80a9da 0%, #6f97c5 100%);<br /> filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 );<br /> padding-left:20px;<br /> padding-right:80px;<br /> height:38px;<br /> display:inline-block;<br /> position:relative;<br /> border:1px solid #5d81ab;<br /> -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);<br /> -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);<br /> box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);<br /> -webkit-border-radius:20px;<br /> -moz-border-radius:20px;<br /> border-radius:20px;<br /> float:left;<br /> clear:both;<br /> margin:10px 0px;<br /> overflow:hidden;<br /> -webkit-transition:all 0.3s linear;<br /> -moz-transition:all 0.3s linear;<br /> -o-transition:all 0.3s linear;<br /> transition:all 0.3s linear;<br /> }<br /> .a-btn-text{<br /> padding-top:8px;<br /> display:block;<br /> font-size:18px;<br /> white-space:nowrap;<br /> text-shadow:0px 1px 1px rgba(255,255,255,0.3);<br /> color:#446388;<br /> -webkit-transition:all 0.2s linear;<br /> -moz-transition:all 0.2s linear;<br /> -o-transition:all 0.2s linear;<br /> transition:all 0.2s linear;<br /> }<br /> .a-btn-slide-text{<br /> position:absolute;<br /> height:100%;<br /> top:0px;<br /> right:52px;<br /> width:0px;<br /> background:#63707e;<br /> text-shadow:0px -1px 1px #363f49;<br /> color:#fff;<br /> font-size:18px;<br /> white-space:nowrap;<br /> text-transform:uppercase;<br /> text-align:left;<br /> text-indent:10px;<br /> overflow:hidden;<br /> line-height:38px;<br /> -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;<br /> -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;<br /> box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;<br /> -webkit-transition:width 0.3s linear;<br /> -moz-transition:width 0.3s linear;<br /> -o-transition:width 0.3s linear;<br /> transition:width 0.3s linear;<br /> }<br /> .a-btn-icon-right{<br /> position:absolute;<br /> right:0px;<br /> top:0px;<br /> height:100%;<br /> width:52px;<br /> border-left:1px solid #5d81ab;<br /> -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;<br /> -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;<br /> box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;<br /> }<br /> .a-btn-icon-right span{<br /> width:38px;<br /> height:38px;<br /> opacity:0.7;<br /> position:absolute;<br /> left:50%;<br /> top:50%;<br /> margin:-20px 0px 0px -20px;<br /> background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXifyO4CV7e_-ZUYtWLPDu6dRcvbzjUKksX2c0mnRQV86c5BlZUamME5I_uJ4ynJjapBhwQBBWWTxDdl_SnH60iCo6zbVNo7XXfW19fwfq6-Itt-z9JLbyCJCj_YE6x5xKEyXDTrQjthY/s1600/arrow_right.png) no-repeat 50% 55%;<br /> -webkit-transition:all 0.3s linear;<br /> -moz-transition:all 0.3s linear;<br /> -o-transition:all 0.3s linear;<br /> transition:all 0.3s linear;<br /> }<br /> .a-btn:hover{<br /> padding-right:180px;<br /> -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);<br /> -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);<br /> box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);<br /> }<br /> .a-btn:hover .a-btn-text{<br /> text-shadow:0px 1px 1px #5d81ab;<br /> color:#fff;<br /> }<br /> .a-btn:hover .a-btn-slide-text{<br /> width:100px;<br /> }<br /> .a-btn:hover .a-btn-icon-right span{<br /> opacity:1;<br /> }<br /> .a-btn:active{<br /> position:relative;<br /> top:1px;<br /> background:#5d81ab;<br /> -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;<br /> -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;<br /> box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;<br /> border-color:#80a9da;<br /> }

Blogger Sürgülü Buton Kullanımı:

Bu butonu kullanabilmeniz için aşağıda ki kodu Yazı kısmında "HTML" bölümüne tıklayarak ekleyin ve düzenleyin.Yazınıza "Oluştur" kısmından devam edin.Eğer her zaman bu butonu kullanmak isterseniz altta ki kodu kullanmak zorundasınız.
Kod içerisinde yer http://etralibela-61.blogspot.com.tr/ linki yerine siz istediğiniz bir şeyin linkini ekleyebilirsiniz
Blogger ve Tıkla metin yerlerine de siz istediğiniz linke göre başlık girebilirsiniz.

<div class="button-wrapper"> <a class="a-btn" href="http://etralibela-61.blogspot.com.tr/"><br /> <span class="a-btn-text">Blogger</span><br /> <span class="a-btn-slide-text">TIKLA</span><br /> <span class="a-btn-icon-right"></span><br /> </a><br /> </div>

Bizi Takip Edin...
Pinterest>>Facebook>>Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın...