Memasang Buku Tamu Tersembunyi di Menu Navigasi

Trik Blogger kali ini akan membuat buku tamu tersembunyi di sebuah link pada navigasi bar blog kita. contohnya bisa anda lihat di bagian navbar blog Trik Blogger Ini. jika anda klik "Buku Tamu"  di  lis menu navigasi, maka si buku tamu tersebut akan muncul tiba tiba. :D
pada umumnya, Navbar Blog digunakan untuk mengalihkan sebuah link alamat url. Tapi bisa juga kita ubah fungsinya menjadi seperti tutorial kali ini.
langsung saja kita mulai tutorialya.

Langkah Pertama yang harus anda lakukan adalah, download template yang anda gunakan sekarang, guna menjaga dari kesalahan saat mempraktekan tutorial ini. kemudian


Login - dashboard blogger. pilih Template
Klik Gambar Untuk Memperjelas



Pilih Rancangan »» edit HTML
Klik Gambar Untuk Memperjelas
Beri tanda centang pada tulisan Expand Template Widget




kemudian anda cari deretan link navbar yang akan di rubah fungsinya. contoh pada blog ini  "Buku Tamu" gunakan ctrl+f untuk mempermudah pencarian.
<div id='nav-bar'>
<a href='trik-bloger.blogspot.com' title='This Blog Address'>Home</a>
<a href='mailto:sanieride@gmail.com'>Contact me</a>
<a href='trik-bloger.blogspot.com'>Buku Tamu</a>
<a href='trik-bloger.blogspot.com'>Feeds RSS</a>
keterangan
(merah)alamat pengalihan Menu Navigasi
(biru) teks yang akan ditampilkan

pada baris
<a href='trik-bloger.blogspot.com'>Buku Tamu</a>

ganti alamat pengalihan (warna merah) dengan
javascript:void(0)' onclick='showHideAT()' title='Click here to open Guest Book'

perhatikan tanda kutip [ ' ] jangan sampai ikut terganti
jika sudah silahkan save template anda

kemudian pasang widget baru,
Blogger - Tata Letak - Tambah Gadget - pilih HTML/Java Script

<style type="text/css"> #at{ position:fixed; left:-160px; z-index:+1000; } * html #at{position:relative;} .attab{ height:300px; width:180px; float:left; cursor:pointer; background:url(); } .atcontent{ float:left; border:2px solid #000000; background:#FFFFFF repeat-y center; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; padding:10px; } </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.top = 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 align="center"><div style="#000000 no-repeat;">
KODE BUKU TAMU ANDA
</div></div> <div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://4.bp.blogspot.com/-6Kxxf6DsdMY/TzO4ffD_odI/AAAAAAAAAOU/TBQUuVh2vOY/s1600/moblin-close.png" alt="close" title="Click here to Close Cbox" /></a></div></div>  <script type="text/javascript"> var at = document.getElementById("at"); at.style.top = (-200-at.offsetWidth).toString() + "px"; </script>  <a href="javascript:void(0);"onclick="showHideAT()"/><img alt="WEARCREAF"  style="display:scroll;position: fixed; top:62px;right:-200px; height="120px" width="38px" /></a></div> <div class='clear'></div><span class='widget-item-control'> <span class='item-control blog-admin'>  </span> </span> <div class='clear'></div><div id='rsidebar-wrapper'><div style='height:10px;clear:both;'></div><div class='sidebar section' id='sidebarright'></div></div>
ganti KODE BUKU TAMU ANDA dengan script buku tamu anda miliki. Jika belum mempunyai kode buku tamu kunjungi www.cbox.ws  silahkan mendaftar untuk mendapatkan kode.

jika ada pertanyaan, silahkan tanyakan lewat form komentar dibawah.
Semoga bermanfaat..



Rekomendasi Post


+ komentar + 4 komentar

4 Maret 2012 pukul 09.15

Mantap nih sob triknya :-)

thanks ya

Terimakasih Fikri atas Komentarnya di Memasang Buku Tamu Tersembunyi di Menu Navigasi
5 Maret 2012 pukul 12.18

Nice Blog Post

php web development

Terimakasih Cambay Hotels & Resorts atas Komentarnya di Memasang Buku Tamu Tersembunyi di Menu Navigasi
15 Maret 2012 pukul 19.12

Terimakasih buat tutor membuat buku tamu tersembunyinya sob.

Terimakasih Sigodang Pos atas Komentarnya di Memasang Buku Tamu Tersembunyi di Menu Navigasi
22 Maret 2012 pukul 14.19

seperti yang di blog ini ya?? bagus,, enteng tuh

Terimakasih ale kaleng atas Komentarnya di Memasang Buku Tamu Tersembunyi di Menu Navigasi
Cara Berkomentar untuk yang tidak memiliki blog:
1. Klik select profile --> pilih Name/URL
2. Isi nama kamu dan Kosongkan URL atau isi dengan alamat fb kamu
3. Klik Lanjutkan
4. Ketik komentar kmau
5. Masukan kode yang muncul dan Klik Publish

Posting Komentar

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( :-p =))