Contoh hasil bisa Anda lihat seperti dibawah ini :
Dan untuk demonya anda bisa lihat di blog saya, Tepat pada pojok kanan
Caranya membuatnya sebagai berikut :
Login di blogger Anda
* Masuk ke Dasbor
* Pilih Tata Letak / Rancangan Dan Edit HTML
* Klik "Expand Template Widget"
* Jangan lupa untuk memback-up template anda terlebih dahulu
Kemudian
1. Cari code : ]]></skin>
Sisipkan code berikut di Atas-nya :
2. Cari code : </head>
.panel2{position:fixed;top:20px;right:0;background:#000;-moz-border-radius-topleft:10px;-webkit-border-top-left-radius:10px;-moz-border-radius-bottomleft:10px;-webkit-border-bottom-left-radius:10px;border:1px
solid
#940000;width:350px;height:350;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:10px
60px 10px 30px}
.panel2 p{color:#ffffff;margin:0 15px 0 0;padding:0}
.panel2 a,.panel2 a:visited{color:#940000;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel2 a:hover,.panel2 a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger2{position:fixed;text-decoration:none;top:50px;right:0;font-size:16px;letter-spacing:-1px;font-family:verdana,
helvetica, arial,
sans-serif;color:#fff;font-weight:700;background:#333
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYFRE05IVxxQDjTLP_zWcMnZ5eEWsMLcmVU-DRUstyBRFKpYfZBNTckUH2I4orkPKKUI9QXpuk6mgEi_N2YzE0JDWGRypf4Z6MnOkFPGBZshAfwuMnjwGVnlYa5fWwlpTS93aoqruDGzg/)
85% 55% no-repeat;border:2px solid
#940000;-moz-border-radius-topleft:10px;-webkit-border-top-left-radius:10px;-moz-border-radius-bottomleft:10px;-webkit-border-bottom-left-radius:10px;-moz-border-radius-bottomright:0;-webkit-border-bottom-right-radius:0;display:block;padding:10px
35px 10px 10px}
a.trigger2:hover{position:fixed;text-decoration:none;top:50px;right:0;font-size:16px;letter-spacing:-1px;font-family:verdana,
helvetica, arial,
sans-serif;color:#fff;font-weight:700;background:#222
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQtH2BrW4LXPfaC0oVJd9eLaDblQFAXGAZqAf7zMBSpYCULBa-nEWQAiQo9_I1bL_Rj3hllM-qb9BSVEzEx_tGvywfe4sOcdDpwlBW0bDTO6AwaRh_zSqJSW3LrXZKnB4kxfpaZUs0CgI/)
85% 55% no-repeat;border2px solid
#940000;-moz-border-radius-topleft:10px;-webkit-border-top-left-radius:10px;-moz-border-radius-bottomleft:10px;-webkit-border-bottom-left-radius:10px;-moz-border-radius-bottomright:0;-webkit-border-bottom-right-radius:0;display:block;padding:10px
40px 10px 10px}
a.active.trigger2{background:#222
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQtH2BrW4LXPfaC0oVJd9eLaDblQFAXGAZqAf7zMBSpYCULBa-nEWQAiQo9_I1bL_Rj3hllM-qb9BSVEzEx_tGvywfe4sOcdDpwlBW0bDTO6AwaRh_zSqJSW3LrXZKnB4kxfpaZUs0CgI/)
85% 55% no-repeat}
.columns2{clear:both;width:330px;line-height:22px;padding:0 0 0 20px}
a:focus{outline:none}
.panel2 img{background-color:#262626;border:1px solid #333;float:left;margin:3px 3px 6px 8px;padding:5px}
.panel2 h3{border-bottom:1px solid
silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
Sisipkan code berikut di Atas nya :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".triger2").click(function(){
$(".panel2").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
3. Selanjutnya cari code : </body>
Dan masukan code berikut di Atas-nya juga :
<div class='panel2'>. Warna yang di block hijau, bisa anda ganti shout box milik anda.
<h3>Buku Tamu</h3>
<= Isikan dengan Buku Tamu Anda =>
</div>
<a class='triger' href='#'>SHOUT</a>
. Selamat mencoba, dan semoga berhasil . . .