Cara Membuat Elemen Sembunyi di-Sisi Kanan

Minggu, 14 Oktober 2012
Pada saat 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 :y;

Cara membuatnya sebagai berikut :
  • Seperti biasa masuk ke Account Blogger dengan ID kawan
  • Pada Dasbor pilih Tata Letak - Tambah Gadget - HTML / JavaScript
  • Masukkan Script berikut kedalamnya
<style type="text/css">
#bb{
position:fixed;
top:50px; z-index:+1000;}* html #bb{position:relative;}
.bbtab{
height:152px;
width:30px;
float:left;
cursor:pointer;
background:url('http://4.bp.blogspot.com/-s33B_ENq-PE/UHyuq49Nj0I/AAAAAAAAFaU/8pWqrwiaLOs/s1600/Daftar+isi.png') no-repeat;}
.bbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;}
</style><script type="text/javascript">
function showHideBB(){
var bb = document.getElementById("bb");
var w = bb.offsetWidth;bb.opened ? moveBB(0, 30-w) : moveBB(20-w, 0);
bb.opened = !bb.opened;}function moveBB(x0, xf){
var bb = document.getElementById("bb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;bb.style.right = x.toString() + "px";if(x0!=xf){
setTimeout("moveBB("+x+", "+xf+")", 10);}}
</script><div id="bb">
<div class="bbtab" onclick="showHideBB()"></div>
<div class="bbcontent">
<center>=======SIMPAN DISINI FILE KAWAN=======</center>
<div style="text-align:bottom">
<a href="javascript:showHideBB()">[close]</a>
</div>
<script type="text/javascript">
var bb = document.getElementById("bb");bb.style.right = (30-bb.offsetWidth).toString() + "px";
</script>
</div></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,
  3. Simpan Blog kawan dan lihat hasilnya 

0 komentar:

Posting Komentar