Cara membuat Elemen Tersembunyi

Pada Artikel sekarang ini saya akan mencoba berbagi dengan anda hasil jalan-jalan dari Blog ke Blog (wah seperti lagunya Ebiet G Ade saja = dari Pintu ke Pintu) yaitu cara menyembunyikan Elemen Artikel pada Blog, artinya yang kelihatan hanya Judulnya saja.

Tujuannya adalah untuk membuat tampilan Blog tidak terlalu sumpek dan memerlukan tempat sedikit, contohnya seperti di kanan atas Blog saya ini, kalau anda berminat caranya sangat gampang, tinggal copy-paste (copas) saja.

OK langsung saja :

• Seperti biasa masuk ke Account dengan ID anda


• Pada Dasbor pilih Rancangan


• Tambah Gadget


• Klik tambah HTML / JavaScript


• Masukkan Kode JavaScript berikut kedalamnya

<style type="text/css">

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:150px;

width:50px;

float:left;

cursor:pointer;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrS2ZKsZP2Waivznu_D5UeUARR75KDEEkiQfeRX_-b12bssfFarieZNE8i9SvNAhgG0T6sxAOIIQSBPCQkFXo7o4lKqx6Z6o31v-1fIr_JSFv5qH5BekO8jzIfOB5mCMFaLhLTlAoPQ6w/s1600/Untitled-5.png') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #7ca9c0;

background:#d4e3ea;

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="overflow:auto;width:250px;height:500px;padding:10px;border:1px solid #00f">

===========TARUH DISINI IKLAN, SHOUTBOX, KOMENTAR, JUDUL ARTIKEL  DLL, SESUKA ANDA YANG PENTING NYAMBUNG DENGAN JUDUL YANG KELIHATAN ==============





<div style="text-align:bottom">

<a href="javascript:showHideGB()">

[close]

</a></div>





<script type="text/javascript">

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

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

</script></div>

Keterangan tambahan :

1. Top : 50px adalah jarak dari atas dengan judul yang kelihatan.


2. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrS2ZKsZP2Waivznu_D5UeUARR75KDEEkiQfeRX_-b12bssfFarieZNE8i9SvNAhgG0T6sxAOIIQSBPCQkFXo7o4lKqx6Z6o31v-1fIr_JSFv5qH5BekO8jzIfOB5mCMFaLhLTlAoPQ6w/s1600/Untitled-5.png ini adalah judul yang akan kelihatan - silahkan ganti untuk menyesuaikan dengan isinya, caranya buat judul berupa image dan copas kode scriptnya (caranya bisa di postingan selengkapnya baca disini )


3. #7ca9c0; dan #d4e3ea; adalah garis pinggir dan latar belakang 


4. <div style="overflow:auto;width:250px;height:500px;padding:10px;border:1px solid #00f"> ini lebar dan panjang jarak dan garis pinggir (border) kolom yang tersembunyi - silahkan dirubah sesuai selera anda. 


5. Kalau anda menaruh atau menyimpan Shoutbox atau yang lain yang ada ukuran nya pada elemen / kolom ini  maka kode script ini  <div style="overflow:auto;width:250px;height:500px;padding:10px;border:1px solid #00f"> tidak diperlukan - bisa dihilangkan.


6. Usahakan menaruh Gadget yang berisi script ini di sebelah kiri Blog baik diatas maupun dibawah tidak masalah, karena tidak akan kelihatan (tujuannya biar judul yang kelihatan mau mepet di pinggir kanan). 


7. Simpan Blog anda dan lihat hasilnya