Cara Membuat Tombol Friend's Link Versi Go! Blog - Hmm.. Sobat pasti tau blog ini kan [G-bloog.com]. Nah, coba deh anda lihat tombol Friend's Link -nya, keren bukan. Fajri pun juga tertarik melihatnya, hehehe.
Tutorial ini saya dapat dari blognya langsung, yaitu Go-Bloog. Thanks Gan, udah bagi tutorial keren ini :D
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.net/p/about.html" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://www.klikzfajri.com/p/about" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://www.klikzfajri.net/p/about.html" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://www.klikzfajri.net/p/about.html" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://www.klikzfajri.net/p/about.html" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://www.klikzfajri.net/p/about.html" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://www.klikzfajri.net/p/about.html" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://www.klikzfajri.net/p/about.html" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://www.klikzfajri.net/p/about.html" href" title="klik disini!! ">Tukar Link</a></li><li><a href="http://www.klikzfajri.net/p/about.html" href" title="klik disini!! ">Tukar Link</a></li></ul>
<a href="http://www.klikzfajri.net/p/about.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.
0 Response to "Cara Membuat Tombol Friend's Link Versi Go! Blog"
- Sebelum berkomentar, bacalah dahulu Cara Berkomentar Dengan Baik.
- Komentar yang mengandung Spam langsung di hapus.
- Komentar dari Anonymous tidak akan Admin balas
- Apabila artikel yang berjudul "Cara Membuat Tombol Friend's Link Versi Go! Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode Follow Blog Archive