Cara Membuat Buku Tamu Auto Hide di Blog

Auto hide Shuotbox adalah efek yang akan membuat buku tamu muncul tanpa di klik dan tersembunyi tanpa di klik pula ( di lewati pointer mouse ), hanya beda sedikit dengan buku tamu show / hide. Sobat yang tertarik memasang widget ini, silahkan masukkan kode berikut di HTML/Javascript blog sobat.
<style type="text/css"> #gb{ position:fixed; top:20px; z-index:+1000; }* html #gb{position:relative;} .gbtab{ height:150px; width:50px; float:left; background:url('http://i1108.photobucket.com/albums/h405/christian410/ghtrf.png') no-repeat; } .gbcontent { float:left; border:1px solid #000000; -moz-border-radius-bottomleft:5px; -webkit-border-radius-bottomleft:5px; -o-border-radius-bottomleft:5px; -khtml-border-radius-bottomleft:5px; -moz-border-radius-topright: 5px; -moz-border-radius-topleft: 5px; background: #F2F2F2; url() no-repeat bottom; padding:10px; } </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0); gb.opened = !gb.opened; }function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);} }</script> <div id="gb"> <div class="gbtab" onmouseover="showHideGB()"> </div> <div class="gbcontent"> <center> ISI KODE SOURCE CHAT BOX DISINI <br /> <div style="text-align:center"> <span style="float:right; color:#000000;">Get this <a target="_blank" href="http://christiantatelu.blogspot.com/2012/03/cara-membuat-buku-tamu-auto-hide-di.html"> widget! </a></span> </div> </center> </div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (50-gb.offsetWidth).toString() + "px"; </script> </div>

Caranya :

1. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
2. Masukkan kodenya di kotak yang di sediakan.
3. Klik Save 

Cara Membuat Text Area Pada Blog

Apa itu text area ?? kalau mau tau, lihat aja langsung contohnya di bawah. pasti langsung tahu. Text area juga bisa di sebut elemen pada blog yang mendukung agar postingan kita terlihat lebih rapi dan memudahkan pembaca untuk meng-copy suatu bagian tertentu, misalnya meng-copy source code yang kita posting. Text area bisa di modif sedemikian rupa sesuai kebutuhan dan template blog. disini andryemos akan berbagi macam-macam text area yang sudah di modif dan tentunya text area yang masih asli juga.

Untuk memberikan text area pada postingan blog cukup mudah. masuk atau buat artikel yang ingin di beri text area, pilih tab HTML dan masukkan source code text area nya. source codenya bisa di lihat di bawah ini.

Kode Text Area dan Tampilannya 1

<#textarea cols="50" rows="5">isi textnya disini<#/textarea>

Kode Text Area dan Tampilannya 2

<#textarea name="code" rows="5" cols="50" style="background:black;color:green;border:3px ;border-left:20px solid #CA3DD9;line-height:1.5em;padding:5px;">isi textnya disini<#/textarea>

Kode Text Area dan Tampilannya 3

<#textarea cols="20" rows="5" style="border: 2px dashed ; height: 113px; width: 429px;">isi textnya disini<#/textarea>

Dan masih banya lagi yang lainnya, silahkan berkreasi sendiri ya gan. :D

catatan : hilangkan tanda # pada script.

Cara Membuat Spoiler (AutoHide) di Blog

Cara Membuat Spoiler (AutoHide) di Blog. Berhubung ada sahabat blogger yang bertanya bagaimana Cara Membuat Spoiler di Blog seperti dalam postingan blog, maka kali ini saya akan mensharenya. Spoiler atau AutoHide sering kita jumpai jika sobat sering berkunjung di situs2 forum seperti kaskus yang membuat AutoHide untuk memaksimalkan ruang postingan jika terdapat tulisan, foto, link yang banyak demi menghemat tempat. Atau biasanya ada juga blogger yang jail dengan bermaksud untuk membuat pembaca menjadi penasaran akan isinya. 

Cara Membuat Spoiler di Postingan Blog sendiri sangat mudah sekali. Yang perlu kita lakukan hanya memasang kode script pada postingan yang ingin dipasang AutoHide. Dari pada penasaran baiknya kita langsung praktekan saja dibawah ini, sebelumnya berikut contoh Spoiler (Buka Tutup) yang saya terapkan pada beberapa tulisan di blog ini :

Berikut caranya :

1. Seperti biasa Login ke akunnya masing2

2. Buat Entri Baru/New Post = Membuat postingan

3. Jika sudah, pada menu Entri, Pilih mode penulisan HTML (Bukan Compose) jika ingin menerapkan Spoiler/AutoHide. Jika dipasang pada Mode Compose maka tidak akan berfungsi code scriptnya.

4. Lalu copas Script dibawah ini pada postingan yang akan dipasang autohide

<div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;"> <b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button"> </div> <div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"> <div style="display: none;"> Letakkan teks atau kode script (gambar atau video), link di sini <br> </div> </div> </div>

5. Kita dapat merubah Judul Spoiler, Buka, Tutup dengan bahasa kita masing2, dan Letakkan Teks, gambar, video, kode2 script, atau link yang ingin dimasukkan didalam Spoiler

6. Publikasikan ! dan lihat hasilnya

Contoh yang saya buat :

Buka Gambar:

Selamat Mencoba !!!