Modifications Shoutmix (2)

If you have established with various modifications shoutmix (1), then what you do is take your script back. Login to Shoutmix ago, Towards the first box, Quick Start select the get codes

On the width and height specify the width to height to determine your guest box. Customize with your blog template.

1. Modifications Script

Suppose you get a code like the blue code below:

<!-- Begin ShoutMix - http://www.shoutmix.com -->

<iframe title="facetutorial" src="http://www5.shoutmix.com/?facetutorial" width="160" height="400" frameborder="0" scrolling="auto">

<a href="http://www5.shoutmix.com/?facetutorial">View shoutbox</a>

</iframe>

<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />

<!-- End ShoutMix -->

If you have an interesting tutorial about how to manufacture shoutmix, you can change

First Red color with the URL to the tutorial for to create shoutmix, if you do not have to replace it http://www.face-tutorial.co.cc/2010/01/create-shout-box-chatting-on-blog.html

The second red with Message That Appears When the link is in the Highlight

The third red with Create Guest Book Like This

2. Advanced Modifications

Easy way:

- Login into blogger

- Layout

- Elements Page

- Add Gadget

- JavaScript / HTML

To code select between two types of modification as follows:

Modification of Type One: Creating a Guest Book Hidden.

<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/AVvXsEgjRmKSon4VRs3u5hTLJNoucLVkVXId23bDZtKli721dbJuXOXiZ7xvpqrbK_GS_8Owc1fYVolWF0CWtcBIh_E_0Zt7GQ1yuqpubiVApDCZj1DhPqYaBmcpOxTAun5A4tMw_TGd2ac_H7QF/') 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">

Replace With Your Guest Book Code

<br/>
Want to have a guest book like this?<br/>
Click
<a href="http://www.face-tutorial.co.cc/2010/01/modifications-shoutmix-2.html">
here (Info Blog)
</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>

This type of guest book will make you a book with a hidden button on the right side of your blog page. Appear after the click. Do not forget to replace Replace With Your Guest Book Code with the guest book script that you modified and taken from shoutmix.

To set the key position in your blog, just change the Top line in the script, adjust the numbers.

Modification of Type Two: Create a Guest Book Ghost.

<style type="text/css">
.gb_fixed{
position:fixed;
top:0px;
right:0px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:2px solid #88C900;
background:#E5E5E5;
padding:10px;
padding-top:0px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div> <a href="javascript:void(0)" onclick="gb_showHideGB()">[x]</a> </div>

Replace With Your Guest Book Code

<div style="text-align:right; font-size:10px">
widget by
<a href="http://www.face-tutorial.co.cc/2010/01/modifications-shoutmix-2.html">
Info Blog
</a>
</div>
</table>
</div>

<script src="http://sites.google.com/site/copycatgroup/Home/jsfile/hiddengb2.js">

<div class="gb_fixed" style="z-index:+5">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" style="border:0px"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLd6_N3rSwLq-QzUaXL_OGI87RWa5Ifw3as-ecBOc0FByWpWAx61SBd34puCaj6igs24EfifBSxOok_nLl0HpZ6OtN_vPzgnLWgAImts5oIdx9H1Vv_LZwE6JwINJ3H3yuyptzKJC1nv4H/" />
</a>
</div>
</script>

This type of guest book will make you book with buttons hidden. When the clicks will come slowly. Do not forget to replace Replace With Your Guest Book Code with the guest book script that you modified and taken from shoutmix.

So. It seems very complete. Hopefully useful.

If you liked the article on this blog, Please click here Subscribe for free via email, so you'll get a delivery of articles to every article published in www.face-tutorial.co.cc

Related Post :