Make Hidden Guestbook

One more trick for you all, that is how to create a widget blogger guest book hidden on the right wing blog, such as this example my guestbook. With this trick we can save space and add beauty to our blog.

Actually, the trick is not just a guest book that you can show, but can include images or other widgets. Please select which one you think is most suitable for display.

Here is how:

# Login to Blogger with your ID.
# Select the Layout.
# Select the Page Elements.
# Click Add Gadget.
# Click the + sign on the HTML / JavaScript.
# Copy the code below and paste in the available space.

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM9_O1KgumBcY4o90vGjRtJ4XUfXH-T4yvZUHQq3eikPcvYG_SqNKb5k6rJPe3MDYtEY431ax29OAITNAC75IoLmmtUs4Y9l9dWD8Y7EpjNSOCXfsoI4u74twJeTKCFwDihCSD7h-HLPKb/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

INPUT YOUR guestbook code HERE

<br />
Want to have a guest book like this?<br />
Click
<a href="http://situsmelky.blogspot.com/2012/11/make-hidden-guestbook.html">
Here
</a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[CLOSE]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>


* Klik tombol Simpan.
* Lihat Pemapilan Blog anda sekarang.

The explanation:
thumbnail_mode var = "float"; (we can decide whether the location of the thumbnail is (float) left or if not, please replace the (no-float)
summary_noimg = 250; (Define how many characters will be displayed in the post without a picture / thumbnail)
summary_img = 250; (Define how many characters will be displayed in the post with the image / thumbnail)
img_thumb_height = 120; (Thumbnail 'height in pixels)
img_thumb_width = 120; (thumbnails' width in pixels)

Categories: Blogging, Blogspot, Tips and Trick, Tips dan Trik