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
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
(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
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
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..
+ komentar + 4 komentar
Mantap nih sob triknya :-)
Terimakasih Fikri atas Komentarnya di Memasang Buku Tamu Tersembunyi di Menu Navigasithanks ya
Nice Blog Post
Terimakasih Cambay Hotels & Resorts atas Komentarnya di Memasang Buku Tamu Tersembunyi di Menu Navigasiphp web development
Terimakasih buat tutor membuat buku tamu tersembunyinya sob.
Terimakasih Sigodang Pos atas Komentarnya di Memasang Buku Tamu Tersembunyi di Menu Navigasiseperti yang di blog ini ya?? bagus,, enteng tuh
Terimakasih ale kaleng atas Komentarnya di Memasang Buku Tamu Tersembunyi di Menu Navigasi1. 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