468x60 Ads

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/AVvXsEjqmXYsM6q0yJ57Ikg4bwLSK8DR0B1ksAXZTyHSSzX_Zds_dKn1umLFZOP3TMbhp5DxzJR1YIpYDS7WYfZZW_gui-13sLL3F8ii8t8XaLYoUGwM2zXWdvMxeD4CpHOnud-EDe7nNNWq3wI/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. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo7DSHKcDASceB64PWWJAf591Ri-l9zzDezsbSLaq9QKajMw7hgEjPp0U8DoFEYdrPLX2c0-US-fBVvojTnko9qUPSUxTSxRZ0WhJIuovtXF34SPp8LUVKOxTBPDVhJsA3b9PexjGi-Ms/s1600/Untitled-5.png ini adalah judul yang akan kelihatan - silahkan ganti untuk menyesuaikan dengan isinya,
  3. Simpan Blog kawan dan lihat hasilnya 

0 Kommentare:

Kommentar veröffentlichen