Hai... Bagi Yang Suka Tukar Link Ama Website Yang Lainnya Kan Bingung Link Sudah Penuh Banner Udah Penuh Mau Dipasang Dimana Lagi,Solusinya Hanya Di Sini Dengan Cara Membuat Tombol Friends Link . Klik Tombol .Demo Dulu Ya..
Bagaimana Sudah Melihat Demonya.Ikuti Cara Cara Berikut Ini Untuk Membuat Tombol Friends Link
1. Masuk Ke Blogger2. Klik Template >> Edit HTML >> Cari Kode <head> Biar Lebih Cepat Klik CTRL + F Taruh Kode Di Bawah Ini Tepat Di Atas Kode <head>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
4. Cari Kode ]]></b:skin> Taruh Kode Di Bawah Ini Tepat Di Atas Kode ]]></b:skin>
/* Tombol Link Teman By 46004600.blogspot.com */
.flink {
float: right;
margin: 15px 10px 0 0;
position: relative;
}
.flink > a {
border: 1px solid #000000;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
color: #FFFFFF;
display: inline-block;
font-size: 11px;
font-weight: bold;
line-height: 1.5;
margin-left: 10px;
padding: 4px 15px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.flink > a.tombhol {
background:#0088B9;
background-image: linear-gradient(bottom, #006395 0%, #0088B9 100%);
background-image: -o-linear-gradient(bottom, #006395 0%, #0088B9 100%);
background-image: -moz-linear-gradient(bottom, #006395 0%, #0088B9 100%);
background-image: -webkit-linear-gradient(bottom, #006395 0%, #0088B9 100%);
background-image: -ms-linear-gradient(bottom, #006395 0%, #0088B9 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #006395),color-stop(1, #0088B9));
}
.flink > a.tombhol:hover {background:#0088B9 !important;}
5. Kode HTML,Boleh Di Taruh Di Menu Navigasi Anda Atau Yang Lainnya
<div class='flink'>
<a class='tombhol' href='javascript:void(0);' onclick='showHideAT()'><i class="icon-thumbs-up icon-large"></i>Link Teman</a>
</div>
Catatan:
Warna Yang Biru Boleh Anda Ganti Dengan Kata Kata Anda Sendiri
6. Sekarang Masuk Ke Tata Letak >> Tambahkan Gadget >> Pilih HTML/Javascript,Masukkan Kode Di Bawah Ini
<style type="text/css">
#at{
position:fixed;
right:35%;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:0px;
width:0px;
float:top;
cursor:pointer;
background:url(url);
}
.atcontent h2{
text-align: center;
padding: 20px 5px;
border-radius: 5px 5px 0px 0px;
padding-left: 15px;
color: #fff;
text-transform: uppercase;
background: #05BEFF;
font-weight: bold;
font-family: 'Nova Square', cursive;
font-size: 13pt;
}
.atcontent{
float:left;
width:300px;
height:400px;
border:5px solid #ccc8cc;
background:#fff repeat-x bottom center scroll;
-moz-border-radius:10px;
padding:10px;
}
.atcontent:hover{
border:5px solid #ff0000;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div style="background:#fff;">
<h2>Friend's Link</h2>
<ul>
<li><a href="http://46004600.blogspot.com/" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://46004600.blogspot.com/" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://46004600.blogspot.com/" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://46004600.blogspot.com/" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://46004600.blogspot.com/" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://46004600.blogspot.com/" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://46004600.blogspot.com/" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://46004600.blogspot.com/" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://46004600.blogspot.com/" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://46004600.blogspot.com/" href" title="klik disini!! ">Tukar Link</a></li></ul>
<a href="http://46004600.blogspot.com/" title="friend's Link">Link Lainnya...</a>
</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><i class='icon-remove-circle icon-2x'/> </i></a></div>
</div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.bottom = (-620-at.offsetWidth).toString() + "px";
</script>
Kode Di Atas Juga Boleh Di Taruh Di Atas Kode </body>
7. Klik Simpan Template
Artikel keren lainnya:
kebetulan nih,ijin coba mas...
ReplyDeleteSip Silakan
ReplyDeletefungsinya buat apa gan? saya masih bingung :(
ReplyDeleteLihat Aja DI Demo
ReplyDelete