Cara membuat Elemen Sembunyi disisi Kanan

Pada Artikel sekarang ini saya akan mencoba ber-Kreasi pada Cara Membuat Elemen Sembunyi disisi Kanan Blog :r
yang mana kegunaannya agar Blog kita tampil Simple dan kelihatan Rapi [ini hanya selera saya saja - maaf], artinya cara menyembunyikan Elemen Artikel pada Blog dan yang akan kelihatan hanya Judulnya saja disisi kanan Blog, kalau judul itu di Klik maka akan keluar isinya ke tengah body Blog :@
Cara membuatnya sangat gampang, tinggal copy-paste (copas) saja.
OK langsung saja :
  • Seperti biasa masuk ke Account dengan ID kawan
  • Pada Dasbor pilih Rancangan
  • Pada Perancang Template pilih 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('http://3.bp.blogspot.com/_Wk-34eI57Rk/TPdFt4TauAI/AAAAAAAAAsI/NlKYOLrwlLM/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. http://3.bp.blogspot.com/_Wk-34eI57Rk/TPdFt4TauAI/AAAAAAAAAsI/NlKYOLrwlLM/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  :D
  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 dan kalau kawan menaruh atau menyimpan Shoutbox atau yang lain yang ada ukuran nya,  maka Kode <div style="overflow:auto;width:250px;height:500px;padding:10px;border:1px solid #00f"> tidak diperlukan - bisa dihilangkan.
  5. Simpan Blog anda dan lihat hasilnya 


Description: Cara membuat Elemen Sembunyi disisi Kanan - Rating: 4.5

Reviewer: Putu BlogBego - Itemreviewed: Cara membuat Elemen Sembunyi disisi Kanan


Kawan sedang berada pada Artikel
» Cara membuat Elemen Sembunyi disisi Kanan
di Blog ini dibolehkan COPY-PASTE untuk disebar-luaskan
asal kawan menyertakan Link / Sumber Artikelnya

Artikel Menarik Lainnya :


0 komentar

Post a Comment