Cara Membuat Tombol Friend's Link Versi Go! Blog

Cara Membuat Tombol Friend's Link Versi Go! Blog - Halo sobat kembali lagi saya update artikel setiap hari, saya hampir sempat kehabisan ide mau posting artikel apa namun saya teringat banyak sekali teman facebook yang minta untuk saya memposting cara membuat Friend's Link seperti yang ada di blog ini pada paling kanan menu navigasi. Tutorial yang saya buat ini yaitu Friend's Link berfungsi untuk menaruh link teman ataupun dari Exchange Link Berikut bukti temen saya yang meminta saya untuk membuat artikel ini, tapi hanya 1 doank yang saya ingat heheh yang lain udah pada lupa maklum saya orangnya pelupa XD.

horeee.. \ :v / Selamat yang masuk tipi hehehe.
Oke singkat waktu bagi sobat yang ingin mengetahui cara pembuatannya ikuti cara berikut.

Login Blogger
Masuk Dashboard -> Template -> Edit Html
Jika sobat sudah memasang Css Font Awesome silahkan lewati langkah ini dan jika belum memasang Css Font Awesome silahkan masukkan kode dibawah ini diatas <head> atau dibawah meta tag

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

Kita mulai dengan membuat tombolnya dahulu, Masukkan Kode dibawah ini diatas ]]></b:skin>

/* Tombol Friend's Link www.g-bloog.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;}

Kemudian letakkan HTML dibawah ini tepat di dalam HTML Menu Navigasi sobat

<div class='flink'>
<a class='tombhol' href='javascript:void(0);' onclick='showHideAT()'><i class="icon-thumbs-up icon-large"> Friend's Link</a>
</div>

Jika sobat masih belum mengerti tempat meletakkannya, nih saya kasih contoh misalnya html navigasi saya seperti dibawah ini.

Awal

<div id='menuku'>
<ul>
<li class='selected'><a expr:href='data:blog.homepageUrl' title='Home'><i class='icon-home'/> Home</a></li>
<li><a class='menu' href='/p/sitemap.html'><i class='icon-sitemap icon-large'/> Sitemap</a>
</li>
<li><a class='menu' href='/p/anonymouse-revenge.html'><i class='icon-random icon-large'/> Exchange</a>
</li>
<li><a class='menu' href='/p/forum-diskusi-go-blog.html'><i class='icon-envelope icon-large'/> Forum</a>
</li>
<li><a class='menu' href='#'><i class='icon-cog icon-large'/> Tools</a>
<ul>
<li><a href='/p/meta-tag-generator.html'>Meta Tag Generator</a></li>
<li><a href='/p/komentar-fontnormal-11px.html'>Lorem Ipsum Generator</a></li>
</ul>
</li>
</ul>
</div>
</div>

Setelah Dimasukkan HTML Tombol Friend's Link

<div id='menuku'>
<ul>
<li class='selected'><a expr:href='data:blog.homepageUrl' title='Home'><i class='icon-home'/> Home</a></li>
<li><a class='menu' href='/p/sitemap.html'><i class='icon-sitemap icon-large'/> Sitemap</a>
</li>
<li><a class='menu' href='/p/anonymouse-revenge.html'><i class='icon-random icon-large'/> Exchange</a>
</li>
<li><a class='menu' href='/p/forum-diskusi-go-blog.html'><i class='icon-envelope icon-large'/> Forum</a>
</li>
<li><a class='menu' href='#'><i class='icon-cog icon-large'/> Tools</a>
<ul>
<li><a href='/p/meta-tag-generator.html'>Meta Tag Generator</a></li>
<li><a href='/p/komentar-fontnormal-11px.html'>Lorem Ipsum Generator</a></li>
</ul>
</li>
</ul>
<div class='flink'>
<a class='tombhol' href='javascript:void(0);' onclick='showHideAT()'><i class='icon-thumbs-up icon-large'/> Friend's Link</a>
</div>
</div>

Nah lihat perbedaan sebelum dan sesudah ditambahkan Kode HTML Friend's Link.

Sekarang Simpan.

Eitss.... Belum selesai sob karena ini baru tombolnya jadi belom bisa digunakan. Untuk menggunakannya berikut caranya.

Sekarang Masuk Ke Tata Letak
Tambahkan Gadget -> Kemudian pilih Javascript/ Html
Masukkan Kode dibawah 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://www.klikzfajri.com/p/anonymouse-revenge.html" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://www.klikzfajri.com/p/anonymouse-revenge.html" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://www.klikzfajri.com/p/anonymouse-revenge.html" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://www.klikzfajri.com/p/anonymouse-revenge.html" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://www.klikzfajri.com/p/anonymouse-revenge.html" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://www.klikzfajri.com/p/anonymouse-revenge.html" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://www.klikzfajri.com/p/anonymouse-revenge.html" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://www.klikzfajri.com/p/anonymouse-revenge.html" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://www.klikzfajri.com/p/anonymouse-revenge.html" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://www.klikzfajri.com/p/anonymouse-revenge.html" href" title="klik disini!! ">Tukar Link</a></li></ul>
<a href="http://www.klikzfajri.com/p/anonymouse-revenge.html" href" 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>

Nah selanjutnya tinggal sobat otak- atik yang saya kasih warna ^_^.
Sekarang Simpan.

Sekarang lihat hasilnya.

Sekian artikel yang saya buat hari ini semoga bermanfaat, jika ada hal yang kurang jelas silahkan sobat dapat mengajukan pertanyaan melalui komentar dibawah ini.

Title : Cara Membuat Tombol Friend's Link Versi Go! Blog
Description : Cara Membuat Tombol Friend's Link Versi Go! Blog - Halo sobat kembali lagi saya update artikel setiap hari, saya hampir sempat kehabi...

Postingan Populer

Cara Membuat Tombol Friend's Link Versi Go! Blog

Awal

Setelah Dimasukkan HTML Tombol Friend's Link