Membuat Buku Tamu Tersembunyi di kanan atas

Berikut langkah-langkahnya

1. Login di blogger dengan ID anda

2. Klik menu Layout

3. Klik Page Elements

4. Klik Add a Page Element

5. Klik ADD TO BLOG pada menu HTML

6.Lalu Copy kode berikut dan Pastekan Pada kotak HTML



<span class="Apple-style-span" style="background-color: yellow;">&lt;style type="text/css"&gt;</span>
<span class="Apple-style-span" style="background-color: yellow;">#gb{</span>
<span class="Apple-style-span" style="background-color: yellow;">position:fixed;</span>
<span class="Apple-style-span" style="background-color: yellow;">top:50px;</span>
<span class="Apple-style-span" style="background-color: yellow;">z-index:+1000;</span>
<span class="Apple-style-span" style="background-color: yellow;">}</span>
<span class="Apple-style-span" style="background-color: yellow;">* html #gb{position:relative;}</span>
<span class="Apple-style-span" style="background-color: yellow;">
</span>
<span class="Apple-style-span" style="background-color: yellow;">.gbtab{</span>
<span class="Apple-style-span" style="background-color: yellow;">height:100px;</span>
<span class="Apple-style-span" style="background-color: yellow;">width:30px;</span>
<span class="Apple-style-span" style="background-color: yellow;">float:left;</span>
<span class="Apple-style-span" style="background-color: yellow;">cursor:pointer;</span>
<span class="Apple-style-span" style="background-color: yellow;">background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje0DKffo67gCc3cUdzSDhCQTUwUPYhlz-sHuIfkEOwC2VZHTHT63yPzfPtKwut2ZymHGRkuE-ElAQk_AAT_fipYLgUF8WPxm0dLFizKAYu2q-P0IfVS72nGlZDWzJf-ZKILvxtDfvHaz2p/') no-repeat;</span>
<span class="Apple-style-span" style="background-color: yellow;">}</span>
<span class="Apple-style-span" style="background-color: yellow;">.gbcontent{</span>
<span class="Apple-style-span" style="background-color: yellow;">float:left;</span>
<span class="Apple-style-span" style="background-color: yellow;">border:2px solid #A5BD51;</span>
<span class="Apple-style-span" style="background-color: yellow;">background:#F5F5F5;</span>
<span class="Apple-style-span" style="background-color: yellow;">padding:10px;</span>
<span class="Apple-style-span" style="background-color: yellow;">}</span>
<span class="Apple-style-span" style="background-color: yellow;">&lt;/style&gt;</span>
<span class="Apple-style-span" style="background-color: yellow;">
</span>
<span class="Apple-style-span" style="background-color: yellow;">&lt;script type="text/javascript"&gt;</span>
<span class="Apple-style-span" style="background-color: yellow;">function showHideGB(){</span>
<span class="Apple-style-span" style="background-color: yellow;">var gb = document.getElementById("gb");</span>
<span class="Apple-style-span" style="background-color: yellow;">var w = gb.offsetWidth;</span>
<span class="Apple-style-span" style="background-color: yellow;">gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);</span>
<span class="Apple-style-span" style="background-color: yellow;">gb.opened = !gb.opened;</span>
<span class="Apple-style-span" style="background-color: yellow;">}</span>
<span class="Apple-style-span" style="background-color: yellow;">function moveGB(x0, xf){</span>
<span class="Apple-style-span" style="background-color: yellow;">var gb = document.getElementById("gb");</span>
<span class="Apple-style-span" style="background-color: yellow;">var dx = Math.abs(x0-xf) &gt; 10 ? 5 : 1;</span>
<span class="Apple-style-span" style="background-color: yellow;">var dir = xf&gt;x0 ? 1 : -1;</span>
<span class="Apple-style-span" style="background-color: yellow;">var x = x0 + dx * dir;</span>
<span class="Apple-style-span" style="background-color: yellow;">gb.style.right = x.toString() + "px";</span>
<span class="Apple-style-span" style="background-color: yellow;">if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}</span>
<span class="Apple-style-span" style="background-color: yellow;">}</span>
<span class="Apple-style-span" style="background-color: yellow;">&lt;/script&gt;</span>
<span class="Apple-style-span" style="background-color: yellow;">
</span>
<span class="Apple-style-span" style="background-color: yellow;">&lt;div id="gb"&gt;</span>
<span class="Apple-style-span" style="background-color: yellow;">
</span>
<span class="Apple-style-span" style="background-color: yellow;">&lt;div class="gbtab" onclick="showHideGB()"&gt; &nbsp; &lt;/div&gt;</span>
<span class="Apple-style-span" style="background-color: yellow;">
</span>
<span class="Apple-style-span" style="background-color: yellow;">&lt;div class="gbcontent"&gt;</span>
<span class="Apple-style-span" style="background-color: yellow;">
</span>
<span class="Apple-style-span" style="background-color: red;">&lt;!-- Ganti ini dengan kode buku tamu kamu --&gt;</span>
<span class="Apple-style-span" style="background-color: yellow;">
</span>
<span class="Apple-style-span" style="background-color: yellow;">&lt;br/&gt;</span>
<span class="Apple-style-span" style="background-color: yellow;">Mau punya buku tamu seperti ini?&lt;br/&gt;</span>
<span class="Apple-style-span" style="background-color: yellow;">Klik di</span>
<span class="Apple-style-span" style="background-color: yellow;">&lt;a href="<a href="http://irwansyah-hukum.blogspot.com/2011/09/membuat-buku-tamu-tersembunyi-di-kanan.html">http://irwansyah-hukum.blogspot.com/2011/09/membuat-buku-tamu-tersembunyi-di-kanan.html</a>"&gt;</span>
<span class="Apple-style-span" style="background-color: yellow;">sini (Info Blog)</span>
<span class="Apple-style-span" style="background-color: yellow;">&lt;/a&gt;</span>
<span class="Apple-style-span" style="background-color: yellow;">
</span>
<span class="Apple-style-span" style="background-color: yellow;">&lt;div style="text-align:right"&gt;</span>
<span class="Apple-style-span" style="background-color: yellow;">&lt;a href="javascript:showHideGB()"&gt;</span>
<span class="Apple-style-span" style="background-color: yellow;">[tutup]</span>
<span class="Apple-style-span" style="background-color: yellow;">&lt;/a&gt;</span>
<span class="Apple-style-span" style="background-color: yellow;">&lt;/div&gt;</span>
<span class="Apple-style-span" style="background-color: yellow;">
</span>
<span class="Apple-style-span" style="background-color: yellow;">&lt;/div&gt;</span>
<span class="Apple-style-span" style="background-color: yellow;">
</span>
<span class="Apple-style-span" style="background-color: yellow;">&lt;/div&gt;</span>
<span class="Apple-style-span" style="background-color: yellow;">
</span>
<span class="Apple-style-span" style="background-color: yellow;">&lt;script type="text/javascript"&gt;</span>
<span class="Apple-style-span" style="background-color: yellow;">var gb = document.getElementById("gb");</span>
<span class="Apple-style-span" style="background-color: yellow;">gb.style.right = (30-gb.offsetWidth).toString() + "px";</span>
<span class="Apple-style-span" style="background-color: yellow;">&lt;/script&gt;</span>


yang berwarna merah diatas ganti dengan&nbsp;<span class="Apple-style-span" style="background-color: #e5e5e5; color: #4d4d4d; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"><a href="http://www.shoutmix.com/" style="color: #6699cc; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a>&nbsp;anda klo belum punya klik link ini&nbsp;</span><a href="http://www.shoutmix.com/main/">http://www.shoutmix.com/main/</a>
7.Save Widget tersebut.

Jika langkah tersebut sudah anda lakukan,anda dapat melihat hasilnya pada blog anda masing-masing