AsalSuka: Membuat Content Tersembunyi

Membuat Content Tersembunyi

Hi sahabat blogger. Kali ini "Asal Suka" akan berbagi trik mempercantik Blog/Web Anda dengan menaruh content yang tersembunyi..^^
Jika Anda tahu, ini merupakan cara yang sering diposting oleh para Blogger dengan judul seperti: "Membuat Buku Tamu Tersembunyi" dan lainnya. Tetapi disini Asal Suka memposting dengan judul "Membuat Content Tersembunyi" dan pastinya ada alasanya, yaitu: Tips kali ini tidak hanya bisa kita gunakan hanya untuk menaruh buku tamu, melainkan dapat kita taruh dengan content yang lainnya.
Jadi, untuk mempersingkat postingan Asal Suka kali ini, Asal Suka akan membagi kode yang perlu untuk Anda salin di widget Anda ^^, disini Anda dapat mengganti link gambar/tulisan "Buku Tamu" dengan gambar Anda.
Untuk kode Content tersembunyi (kanan)

<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/AVvXsEjx2ZwGuA8Qbk6ho2oVDlV7CiqtAtZJcsf2-urMcg_GW2xTxXnHh4yaObRr_vkP5G6v200Fs_xqHjh0_zz7k4AdwFEqwo_wz3KjZpAxP8IKypSaMKSYtaj2mn4jBdVa6ITAtwqlyU8PIw72/s1600/bukutamuright.png') 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">

<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>

Untuk kode Content tersembunyi (kiri)

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

.gbtab{
height:100px;
width:30px;
float:right;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoNtUEmucnstsJstuCYNcyaXw02-sRomvCpBxHN7er27Px6PBpmOsuyaf22NuUJCDIc_w-RzAzBzj-4Li9vIbllscd0V0TxpPBK4U7HnXwZWQRjFiQ00jTJu-ootsB_5FKPktIvOZajs-9/s1600/bukutamuleft.png') no-repeat;
}
.gbcontent{
float:right;
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.left = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()">   </div>
<div class="gbcontent">

<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.left = (30-gb.offsetWidth).toString() + "px";
</script>

Untuk kode Content tersembunyi (void)

<style type="text/css">
  .gb_fixed{
      position:fixed;
      top:0px;
      right:0px;
   bottom:;
   left:;
      z-index:+1000;
  }
  * 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()">[Close]</a> </div>
      <div style="text-align:right; font-size:10px">
      </div>
  </table>
</div>
<div class="gb_fixed" style="z-index:+5">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
  <img border="0" style="border:0px"
       src="Your picture" />
  </a>
</div>

<script type="text/javascript">
var gb_obj = document.getElementById("hidden_gb2");
var gb_finish = false;
function gb_setInitBehaviour(){
    gb_obj.isHidden = true;
    gb_setOpacity(gb_obj, "0.01");
}
function gb_setOpacity(obj, opacity){
    opacity = opacity.substr(0, 4);
    obj.style.opacity = opacity;
    obj.style.filter = "alpha(opacity="+(Math.floor(parseFloat(opacity)*100)).toString()+")";
    //writex(opacity);
}
function gb_showGB(){
    gb_obj.style.display = "block";
    gb_changeOpacityTo(1, "");
    gb_obj.isHidden = false;
}
function gb_hideGB(){
    gb_changeOpacityTo(0.01, "gb_obj.style.display = \"none\"");
    gb_obj.isHidden = true;
}
function gb_changeOpacityTo(fin, funcStr){
    var init = parseFloat(gb_obj.style.opacity.substr(0, 4));
    var d = init <= 0.2 ? 0.04 : init <= 0.6 ? 0.08 : 0.20;
    var m = fin>init ? 1 : -1;
    var opacity = init + d * m;
    if((fin-opacity)*(fin-init)<0){opacity = fin;
}
    gb_setOpacity(gb_obj, opacity.toString());
    if(opacity != fin){setTimeout("gb_changeOpacityTo("+fin.toString()+", '"+funcStr+"')", 50);
}
    else{eval(funcStr);
 }}
function gb_showHideGB()
{
    if(gb_obj.isHidden){gb_showGB();
}
   else{gb_hideGB();}
}
function writex(str)
{
    document.getElementById("wx").innerHTML += str + " ";
}
gb_setInitBehaviour();
</script>

Inilah postingan Asal Suka kali ini.
Mohon maaf jika kurang detail, karena sudah larut malam dan besoknya masih ada kegiatan kuliah..
Jika Anda memiliki perntanyaan, Asal Suka siap membantu...^^

Terima kasih sudah berkunjung...
Happy Blogging ^^...