Beranda · Games · Software · Berita · Film · Islam · Template · Tutorial Blog · Windows ·
» » Cara Membuat Tombol Friends Link

Cara Membuat Tombol Friends Link

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 Blogger
2. 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:

Ditulis oleh pada tanggal Thursday, 19 June 2014

4 Tanggapan untuk "Cara Membuat Tombol Friends Link"

Peraturan berkomentar di blog ini :

- Dilarang SPAM.
- Dilarang menautkan link aktif atau link mati kecuali admin.
- Dilarang menggunakan huruf "Kapital" secara keseluruhan.
- Dilarang berkomentar yang mengandung SARA.
-Dilarang Berkampanye
- Jika ingin bertanya silahkan berikan pertanyaan yang jelas agar mudah dijawab oleh admin.


Jika ada beberapa point diatas yang tidak anda patuhi dalam berkomentar otomatis komentar Anda Otomatis akan Di Hapus Dari blog ini.