Thursday, November 26, 2009

Make a hidden floating division


are you have to view a shoutbox or ShoutMix was hidden?!?, hehehe... The tutorial has a lot of writing, but why do I still write it ?!? I don't know about it?!? wuakkakaka


How to Make it :




In a HTML,,


Put this Code into the file CSS :


#gb{

position:fixed;

top:50px;

z-index:+1000;

}

*html #gb {
position:relative;}

.gbcontent{


float:left;

border:2px solid #A5BD51;

background:#F5F5F5;

padding:10px;

}


and this Code apart of Body... [ <body>...</body> ]


<script type="text/javascript">

function shoutmix(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 0-w) : moveGB(0-w, 0)

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 15 ? 10 : 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="gbcontent">

<!-- this content with content that you want, to reply can not be removed under the credit, Ok!!!... please -->

<br>

<br>

<a href="http://balidimataku.blogspot.com">Get Hidden Floating Objek</a>

</div>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (0-gb.offsetWidth).toString() + "px";

</script>

</div></div>


( explanation sometime, ok?!? this is important so let me quickly, hehehe )



for Blogger


first, you must login into the blogger


both in the edit HTML, edit pages and create a new gadget select html text

The third copy code below:
:

<style type="text/css">

<!--


#gb{

position:fixed;

top:50px;

z-index:+1000;

}

*html #gb {
position:relative;}

.gbcontent{


float:left;

border:2px solid #A5BD51;

background:#F5F5F5;

padding:10px;

}




-->

</style>


<script type="text/javascript">

function shoutmix(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 0-w) : moveGB(0-w, 0)

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 15 ? 10 : 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="gbcontent">

<!-- this content with content that you want, to reply can not be removed under the credit, Ok!!!... please -->

<br>

<br>

<a href="http://balidimataku.blogspot.com">Get Hidden Floating Objek</a>

</div>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (0-gb.offsetWidth).toString() + "px";

</script>

</div></div>


and then save, finish it


the explanation :


function shoutmix(){


above code is very important, [shoutmix function () (], the bold can be replaced with anything (just do not symbol weird), shoutmix code is the JavaScript function called when using the tag [href].


I explain this further explanation related to...


and then... how to call it...


<a href="javascript:shoutmix()">ShoutMix</a>, this is the example...


For contents, located on the red text, replace it with content that you want to ...

Tips slightly, if the template you have menu bar, add the href code earlier, as

<li><a href="javascript:shoutmix()">ShoutMix</a></li>, rata-rata template di blogger pake tag <li> ... </li> so the whole tag like that ... hehehe


I hope you can understand with my explanation...


Sometime I'll try to make articles like objek hiddennya multiple...


0 comments:

CopyRights Narayana Yein dengan coding template dari kendhin's blog, Narayana yein 2009. Hosting by 000webhost and domain from www.co.cc