Membuat tabel/kolom scrol di postingan

Tabel/kolom ini sangat berguna sekali, dan mempunyai fungsi tersendiri selain untuk menghemat lahan yang sudah mulai sempit juga bisa digunakan sebagai tanda pemisah yang membedakan apa yang ada di dalam tabel dengan yang berada diluar. seperti dalam postingan ini.
untuk membuat tabel ini sangat mudah sekali.

Copy kode dibawah ini kemudian paste didalam postingan atau HTML.

<div style="border: 1px solid #aaa;background-colo r:#f9efef; width:350px; height:250px; overflow:auto; color:#FFF;"><p>paste teks teks sobat disini</p>
</div>



Untuk mengatur lebar dan tinggi kotak tinggal mengubah ukuran di weight dan heightnya
selamat mencoba !


Membuat shoutmix melayang di samping

kadang kita merasa kalo blog kita terlihat sumpek, mampet, pokonya penuh dengan widget sehingga ngga ada lahan yang cukup lagi untuk menaruh buku tamu atau widget shoutmix.
tapi santai aja sobat, karena sobat bisa mengakalinya dengan menjadikan widget shoutmix bersembunyi di samping. mau tau jawabannya ? Oke langsung aja kita caw... :D
  1. masuk ke akun blogger pilih tata letak > Elemen Laman.
  2. Klik add gadget > trus pilih HTML/Java script.
  3. Copy paste kode di bawah ini > trus simpan.
<style type="text/css">

#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
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="text-align:right">
<a href="javascript:showHideGB()">
[Close]
</a>
</div>
<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="kokobota" src="http://www5.shoutmix.com/?kokobota" width="475" height="400" frameborder="0" scrolling="auto">
<a href="http://www5.shoutmix.com/?kokobota">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br/>
<!-- End ShoutMix -->
<div style="text-align:right; font-size:10px">
Dapatkan Buku Tamu Seperti Ini di
</div>
<div style="text-align:right; font-size:10px">
<a href="http://sevenfrogz.blogspot.com/">
sevenfrogz.com</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Untuk kode yang berwarna merah silahkan ganti dengan shoutmix kode sobat.
Selamat mencoba !


Related Posts Plugin for WordPress, Blogger...