Rabu, 14 September 2011

Buka Tutup Buku Tamu

Assalamualaikum Mas bro ...
heheheh ... malam ini mau mau buat artikel tapi gak ada bahan, coba coba browsing , eh nemu widget tersembunyi untuk link exchange, saya ubah aja dikit digunakan untuk buku tamu, asik asik buat tutorial, eh ada nyamuk masuk telinga,, haduh .... jadi bunyi bunyi ne tlinga.. langsung kaya pusing eh .. haduhhhhhhhhhhhhhh jadi curhat, ckckckc ..
ok langsung aja ke tutor ..


liat DEMO nya disini

Berikut langkah - langkah nya
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan,
3. Tambah gatget HTMLjavascript
4. Pastekan Kode di Bawah ini Ke Dalam nya

KODE:
KODE:
<style type='text/css'>.cboxjaparus {z-index: 1000;height: 15px;width: 280px;border: 2px solid #FF0000;background: #FF0000 -moz-linear-gradient(top,#000,#D11717);background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#D11717));border-radius: 12px;-moz-border-radius: 12px;-webkit-border-radius: 12px;-o-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out;padding: 5px 5px;margin: 15px auto;font: 11px Arial;color: #FF0000;overflow: hidden;box-shadow: 0 1px 8px #B30000;-moz-box-shadow: 0 1px 8px #000;-webkit-box-shadow: 0 1px 8px #000;}.cboxjaparus:hover {min-height: 270px;border: 2px solid #B30000;background: #000;box-shadow: 0 1px 15px #000;-moz-box-shadow: 0 1px 15px #000;-webkit-box-shadow: 0 1px 15px #000;color: #000; text-shadow: 0 1px 1px #888;}.cboxjaparus h3, .cboxjs h3 {font-size: 14px;font-family: Droid Serif;font-weight: bold;color: #ffffff;text-align: center;text-shadow: 0px 1px 1px #fff; margin: 3px 5px;background: #000;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border: 1px solid #999;-o-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out;}.cboxjaparus h3:hover {box-shadow: 0 1px 8px #000;-moz-box-shadow: 0 1px 8px #000;-webkit-box-shadow: 0 1px 8px #000;}.cboxjaparus img.mini, .cboxjaparus img.minianima {width: 70px;border: 4px solid #666;padding: 3px;border-radius: 6px;-moz-border-radius: 6px;-webkit-border-radius: 6px;float: left; margin: 0 10px 5px 0;background: #222;-o-transition: all 1.5s;-moz-transition: all 1.5s;-webkit-transition: all 1.5s;}.cboxjaparus img.mini:hover, .cboxjaparus img.minianima:hover {box-shadow: 1px 1px 15px #000;-moz-box-shadow: 1px 1px 15px #000;-webkit-box-shadow: 1px 1px 15px #FF0000;border: 4px solid #CCCCCC;background :#666;-o-transform: scale(1.4);-moz-transform: scale(1.4);-webkit-transform: scale(1.4);margin-top: 20px;margin-left: 15px;}.cboxjaparus img.minianima:hover {-o-transform: scale(1.4) rotate(360deg) translate(0px);-moz-transform: scale(1.4) rotate(360deg) translate(0px);-webkit-transform: scale(1.4) rotate(360deg) translate(0px);}.cboxjs {margin-top: 15px;height:225px;overflow: auto;padding: 0 5px;-o-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out; background:#ddd -moz-linear-gradient(top,#ddd,#000);background:-webkit-gradient(linear, left top, left bottom, from(#ddd), to(#000));}.cboxjs:hover {background: #333;color: #eee;text-shadow: 0 0px 1px #fe0303;}.cboxjs h3 {margin: 20px 0;max-width: 224px;margin-left:10px;background: #FF0000;box-shadow: 0 1px 12px #eee;-moz-box-shadow: 0 1px 12px #eee;-webkit-box-shadow: 0 1px 12px #eee;}.columns{clear:both;line-height:22px;padding:0 0 20px;width:250px}.colleft{float:left;line-height:22px;width:120px}.colright{float:right;line-height:22px;width:120px}.cboxjs h3:hover {background: #FF0000;border: 3px solid #FF0000;box-shadow: 0 1px 12px #fff;-moz-box-shadow: 0 1px 12px #fff;-webkit-box-shadow: 0 1px 12px #fff;}.cboxjs ul {padding: 0;margin: 0;list-style: none;}.cboxjs li {padding: 0;margin: 0;list-style: none;border-bottom:1px dotted #FF0000;}.cboxjs li a{color: #FF0000;padding: 0;margin: 0;text-decoration:none;font-size: 12px;-o-transition: all 1.5s;-moz-transition: all 1.5s;-webkit-transition: all 1.5s;}.cboxjs li a:hover {-o-transform: scale(1.1);-moz-transform: scale(1.1);-webkit-transform: scale(1.1);color: red;text-shadow: 0 1px 1px #FF0000;margin-left: 20px;}.cboxjaparus {height: 17px; float:right ;margin-top:0px;z-index: 10000;position: fixed;top:0px;margin-left:690px;} .cboxjaparus h3, .cboxjs {font-size: 13px;}</style>
<div class='cboxjaparus'>
<h3>BUKU TAMU</h3>
<div class='cboxjs'>
<h3>JANGAN SPAM ya BRO</h3>
<!-- ShoutBox --> MASUKAN KODE SHOUTBOX DISINI <!-- End ShoutBox -->
</div>
</div>

</div>


5. Simpan

KET ..
1. Kode ukuran shoutbox anda width (lebar)nya jadi 250 dan height (panjang )nya TERserah anda
2. Dibagian kode shoutbox bisa masbro ganti apa aja misalkan link-link sahabat, aboutme, info jejaringan sosial, dll ... itu terserah mas bro ..
3. doakan telinga ane gak apa apa ya mas bro, nyamuknya mati .. ckckckck

0 komentar:

Poskan Komentar