Cara membuat Elemen Tersembunyi

Unknown - Senin, 06 Desember 2010 - 10.39.00 wita

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/AVvXsEgl7gitKfUnWHP0jk7QiC6SbzLj-WTKYXdL6qAgIIWGpNDTy_QkVAM1Ec3yPf-a9mWUiCOz0bTakapOIZHDAwEsn-uOyWr8Q4Z3NeEx7kbgIcEzxG8bpp1Qj_qSzdhyphenhyphenbI1elU6o4hWyFKM/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/AVvXsEgl7gitKfUnWHP0jk7QiC6SbzLj-WTKYXdL6qAgIIWGpNDTy_QkVAM1Ec3yPf-a9mWUiCOz0bTakapOIZHDAwEsn-uOyWr8Q4Z3NeEx7kbgIcEzxG8bpp1Qj_qSzdhyphenhyphenbI1elU6o4hWyFKM/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 








Berbagi Artikel :

Cara membuat Elemen Tersembunyi
Rate this posting:
{[["☆","★"]]}

Kalau pada Artikel Cara membuat Elemen Tersembunyi
kurang jelas atau ada Artikel, Link yang tak jalan / rusak bisa disampaikan lewat Komentar
mudah-mudahan saya bisa segera memperbaiki
---ooOOOoo---
P.pw - Shorten urls and earn money!

Artikel Menarik Lainnya

About me


Saya hanyalah Manusia Biasa ingin memberi kan yang Terbaik, walau itu belum tentu Terbaik bagi Kawan....

2 Komentar pada : “Cara membuat Elemen Tersembunyi”

BERIKAN KOMENTAR SESUAI TOPIK
DENGAN BAHASA YANG SOPAN,
JANGAN MENGHINA, SARA / ETNIS DAN SPAM

Klik Emoticon untuk melihat Kodenya

Dapatkan Update Terbaru
BlogBego Creation di Email Kawan




BANNER [300x250]
© 2013 - BC INFO | Powered by Blogger
Design Template by : Blogger Edan