Cara Membuat Tombol Friend's Link Versi Go! Blog

Home » Tips dan Cara » Tutorial Blog » Cara Membuat Tombol Friend's Link Versi Go! Blog

Cara Membuat Tombol Friend's Link Versi Go! Blog

Monday 25 November 2013

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"></i> 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'/></i> 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.g-bloog.com/p/anonymouse-revenge.html" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://www.g-bloog.com/p/anonymouse-revenge.html" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://www.g-bloog.com/p/anonymouse-revenge.html" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://www.g-bloog.com/p/anonymouse-revenge.html" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://www.g-bloog.com/p/anonymouse-revenge.html" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://www.g-bloog.com/p/anonymouse-revenge.html" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://www.g-bloog.com/p/anonymouse-revenge.html" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://www.g-bloog.com/p/anonymouse-revenge.html" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://www.g-bloog.com/p/anonymouse-revenge.html" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://www.g-bloog.com/p/anonymouse-revenge.html" href" title="klik disini!! ">Tukar Link</a></li></ul>
<a href="http://www.g-bloog.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.

Share artikel ke: Facebook Twitter Google+ Linkedin Digg

9 comments

Balas

Rohis Facebook

25 November 2013 at 16:36

scriptx panjang jg ya.., tp hasilx keren lho!.., makasih *smile

Balas

Unknown

25 November 2013 at 16:39

lumayan neh...
coba buat ah...
sbelumnya thx.. :3

Balas

Anonymous

25 November 2013 at 16:50

Tanks Gan ^_^

Balas

Unknown

26 November 2013 at 17:45

gak berhasil -.-
pas di kopi yang bagian tata letak tu gak bisa, jadi nya lain

Balas

Anonymous

3 December 2013 at 23:08

Yang Di Gadgetnya Gak Bisa Di Copy -,-

Balas

Asfar

4 December 2013 at 16:43

bisa kok sob... saya sudah tes semuanya.

Balas

Perdant Lad

9 December 2013 at 14:31

thank you mastah arul ^^

Balas

Raka Ikhsanul Rahmat

10 December 2013 at 19:56

oke sob, bagus triknya ,
Berhasil (Trust Me :v :v )
jangan lupa kombek lur

Balas

Unknown

22 December 2013 at 01:24

makasi :D
akhirnya sekarang berhasil :)

Gunakanlah bahasa yang sopan
Tidak mengandung SARA (Agama, Suku, Dll)
Tidak menyertakan link aktif.
Jika melanggar syarat diatas komentar akan saya anggap SPAM
Konvert Kode Member Aktif Join This Blog

Go! Blog

Baca Artikel Go! Blog Biar Gak Goblog