Şimdi Düğmelerin eklenti işlemlerine geçelim ;
Öncelikle Blogger Şablon sayfamıza gidelim Html Düzenle bölümüne tıklayın.
Html kod editör sayfamızda Ctrl+F yardımıyla <head> kodunu aratalım ve bulduğumuz kodun hemen altına gelecek şekilde aşağıda ki kodu kopyalayıp yapıştırın.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">Daha sonra yine Html şablon editör sayfamızda yine Ctrl+F yardımıyla ]]></b:skin> kodunu aratalım ve bulduğumuz kodun üzerine gelecek şekilde aşağıda ki CSS kodunu ekleyelim.
#wrap { margin:20px auto; text-align:center; }
#wrap br { display:none; }
.bie-slide,.bie-slide2 { position:relative; display:inline-block; height:50px; width:200px; line-height:50px; padding:0; border-radius:50px; background:#fdfdfd; border:2px solid #F9690E; margin:10px; transition:.5s; }
.bie-slide2 { border:2px solid #36D7B7; }
.bie-slide:hover { background-color:#F9690E; }
.bie-slide2:hover { background-color:#36D7B7; }
.bie-slide:hover span.circle,.bie-slide2:hover span.circle2 { left:100%; margin-left:-45px; background-color:#fdfdfd; color:#F9690E; }
.bie-slide2:hover span.circle2 { color:#36D7B7; }
.bie-slide:hover span.title,.bie-slide2:hover span.title2 { left:40px; opacity:0; }
.bie-slide:hover span.title-hover,.bie-slide2:hover span.title-hover2 { opacity:1; left:40px; }
.bie-slide span.circle,.bie-slide2 span.circle2 { display:block; background-color:#F9690E; color:#fff; position:absolute; float:left; margin:5px; line-height:42px; height:40px; width:40px; top:0; left:0; transition:.5s; border-radius:50%; }
.bie-slide2 span.circle2 { background-color:#36D7B7; }
.bie-slide span.title,.bie-slide span.title-hover,.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { position:absolute; left:90px; text-align:center; margin:0 auto; font-size:16px; font-weight:bold; color:#F9690E; transition:.5s; }
.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { color:#36D7B7; left:80px; }
.bie-slide span.title-hover,.bie-slide2 span.title-hover2 { left:80px; opacity:0; }
.bie-slide span.title-hover,.bie-slide2 span.title-hover2 { color:#fff; }Eklentileri ekledikten sonra şablonumuzu kaydet diyelim.
Şimdi Yayın sayfamıza Demo ve Download butonlarını eklemeye geldi.
Öncelikle Demo sayfamızı yayın sayfamıza eklemek için HTML bölümüne geçelim ve aşağıda ki kodları Demo butonunun nerede görünmesini istiyorsak oraya ekleyelim.
Demo<div id="wrap">
<a class="bie-slide" href="Link Adresini Ekleyin" target="_blank">
<span class="circle"><i class="fa fa-laptop"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
</div>
Şimdi sıra da Download Butonunun kodların da ,
Download<div id="wrap">
<a class="bie-slide2" href="Link Adresini Ekleyin" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Click here</span>
</a>
</div>
Veya Demo ve Download butonlarını birarada kullanmak istiyorsanız aşağıda ki eklentiyi kullanabilirsiniz.
<div id="wrap">
<a class="bie-slide" href="Link Adresi" target="_blank">
<span class="circle"><i class="fa fa-laptop"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
<a class="bie-slide2" href="Link Adresi" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Click here</span>
</a>
</div>Bütün işlemler bu kadar herkese kolay gelsin.