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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiET1cfLZ9R8VvHqTperMT-3wiB3OGsTzILLUmM3BRbK4dbsV0WjeMFFwkXS5_cQJus7ODwz8RdZfe6nhgyh6dYXUBd9jtmZTRlkNaJXXB1gPI4qwB6QPYvpF5bObjODElFBzn5YYEagp0/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 :
- Top : 50px adalah jarak dari atas dengan judul yang kelihatan.
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXZqWpm1Z713HUFbC39zBh0oOc8fEy0eohbIcn-fpaAP8rf6be_Q1CZWtidGII6TbuRgGBoZKriu-39hOqPezS7cn8IRTQ8flCbei-1lZotoYlngzGorwzUImYfyUPQiEdYatDZcXyWP4/s1600/Untitled-5.png ini adalah judul yang akan kelihatan - silahkan ganti untuk menyesuaikan dengan isinya,
- Simpan Blog kawan dan lihat hasilnya
No comments:
Post a Comment