Vanestorz Blog: Membuat Shoutmix Keren

Membuat Shoutmix Keren

2:37 PM

Vanestorrz

Pernah tidak melihat sebuah blog yang di samping kanan atas ada tulisan Buku Tamu dengan background hijau, yang kalau diklik akan keluar form isian yang menanyakan Nama, Website dan Message. Buku Tamu tersebut melayang artinya tidak terpengaruh oleh scroll mouse, walaupun mouse digulir ke bawah Buku Tamu tersebut tetap nampak. Mau tahu caranya?

1. Sign in ke blogger dan silahkan Login dengan Account Anda

2. Pilih Layout/Tata Letak

3. Pilih Page Elemen/Elemen Halaman

4. Klik Add a Gadget/Tambah Gadget

5. Lalu pilih "HTML/JavaScript"

Kemudian Copy-Paste kode di bawah ini :

<style type="text/css"><br />#gb{<br />position:fixed;<br />top:50px;<br />z-index:+1000;<br />}<br />* html #gb{position:relative;}<br /><br />.gbtab{<br />height:100px;<br />width:30px;<br />float:left;<br />cursor:pointer;<br />background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-jfh4qQktzOfIVTBTRp-OluXviyjvjt6HFgWqnCSi48H6-nH7sYwxLh8uAxI9PCUahJAI0Rdr9XpkV1eVhIKjTqjIMzeU6U4a1w0G5hGU72Duvi57rKn-lLdoUms2qDEbvDJc9l3BADzt/') no-repeat;<br />}<br />.gbcontent{<br />float:left;<br />border:2px solid #A5BD51;<br />background:#F5F5F5;<br />padding:10px;<br />}<br /></style><br /><br /><script type="text/javascript"><br />function showHideGB(){<br />var gb = document.getElementById("gb");<br />var w = gb.offsetWidth;<br />gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);<br />gb.opened = !gb.opened;<br />}<br />function moveGB(x0, xf){<br />var gb = document.getElementById("gb");<br />var dx = Math.abs(x0-xf) > 10 ? 5 : 1;<br />var dir = xf>x0 ? 1 : -1;<br />var x = x0 + dx * dir;<br />gb.style.right = x.toString() + "px";<br />if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}<br />}<br /></script><br /><br /><div id="gb"><br /><br /><div class="gbtab" onclick="showHideGB()"> </div><br /><br /><div class="gbcontent"><br /><br /><span style="font-style:italic;"></span>ISI DENGAN KODE SHOUTMIX KAMU<br /><br /><br/><br />Anda berminat buat Buku Tamu seperti ini?<br/><br />Klik di<br /><a href="http://vanestorrz.blogspot.com/2009/12/pernah-tidak-melihat-sebuah-blog-yang.html"><br />Klik Di Sini Vanestorz Blog </a><br /><br /><div style="text-align:right"><br /><a href="javascript:showHideGB()"><br />[tutup]<br /></a><br /></div><br /><br /></div><br /><br /></div><br /><br /><script type="text/javascript"><br />var gb = document.getElementById("gb");<br />gb.style.right = (30-gb.offsetWidth).toString() + "px";<br /></script>

CATATAN :
# Ganti tulisan yang "ISI DENGAN KODE SHOUTMIX KAMU" dengan kode yang anda peroleh dari ShoutMix

# Icon Buku Tamu dapat anda ganti sesuka hati dengan terlebih dahulu merancangnya di Photoshop atau di CorelDraw, setelah itu upload di hosting image seperti photobucket dsb. lalu ambil URLnya dan pasang di background.

# Selamat Mencoba

Posted in Tutorial Blog

2 Response to "Membuat Shoutmix Keren"

Sohra Rusdi said...: December 24, 2009 at 9:30 PM; tutorial yang sangat bermanfaat sahabat memang cantik kalau buku tamu bisa disembunyikan seperti itu
Anonymous said...: January 25, 2011 at 1:09 PM; kode shout mix saya? yang man? bingung....

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

Post a Comment

Silahkan Komentarnnya Mas, Tapi Jangan SPAM!!!

Subscribe to: Post Comments (Atom)

Newsletter

Home

Copyright © 2010 Vanestorz Blog | Converted by Best Theme | Designed by Free CSS Templates