Cara Membuat Kotak Buka Tutup Super SEO Di Blog

Haloo haloow sob... ketemu lagi ni. Setelah posting tentang bagaimana Cara Membuat Kotak Scroll Super SEO Di Blog, Maka pada kali ini saya akan posting tentang bagaimana Cara Membuat Kotak Buka Tutup Super SEO Di Blog.

Hemmm hampir sama kan sob judulnya, sama² ada Super SEO nya. hehehee. Itu karena kotak yang akan di buat kali ini juga gak kalah menarik dengan Kotak Scroll, sama² cantik dan bervariasi.,

Okey, bagi para bloggers pemula, mungkin ini tutorial yang cocok. Tapi bagi pemula lo yaa,. Kalau bagi para master² cara ini sudah di luar kepala. hehehehehee..

Gak usah berpanjang lebar, mari kita langsung cekidot.

Seperti ini ni sob contoh dari kotak buka tutup yang akan di buat.
 

 Haloo haloow sob... ketemu lagi ni. Setelah posting tentang bagaimana Cara Membuat Kotak Scroll Super SEO Di Blog, Maka pada kali ini saya akan posting tentang bagaimana Cara Membuat Kotak Buka Tutup Super SEO Di Blog.

http://famagulz.blogspot.com

Hemmm hampir sama kan sob judulnya, sama² ada Super SEO nya. hehehee. Itu karena kotak yang akan di buat kali ini juga gak kalah menarik dengan Kotak Scroll, sama² cantik dan bervariasi.,
Okey, bagi para bloggers pemula, mungkin ini tutorial yang cocok. Tapi bagi pemula lo yaa,. Kalau bagi para master² cara ini sudah di luar kepala. hehehehehee..

Gimana soob, SEO dan Cantik banget kan... hehehehehee...

Langsung saja sob, ini nih kodenya.

Klik buka untuk mendapat codenya ;

<!---Start code show hide by;"famagulz.blogspot.com"--->
<div style="margin-bottom: 2px;">
<div style="margin-top: 5px; text-align: center;">
<input 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'; }" style="font-size: 12px; margin-top: 5px; width: 60px;" type="button" value="Buka" /> </div>
<div style="background-color: white; border-bottom: 2px solid #ff0000; border-left: 20px solid #ff6600; border-right: 2px solid #ff0000; border-top: 2px solid #ff0000; margin: 0px; padding: 6px;">
<div style="display: none;">
<span style="color: black; font-style: italic;">
... Isi Teks Sobat...
</span></div>
</div>
</div>
<!---End code show hide by;"famagulz.blogspot.com"--->

Keterangan ;

Code; <div style="margin-top: 5px; text-align: left;"> ; merupakan code untuk penempatan tombol Buka Tutupnya.. Mau sobat taruh di sisi kiri dengan code left. Untuk ditengah dengan code center. Untuk di sisi kanan dengan code right. ingat, hanya ubah yang berwarna merah aja ya soob.

Code; Tulisan  Tutup  Buka  Buka  yang berwarna merah, silakan sobat ganti debgan sesuka sobat.

Code; width: 60px ; Yang berwarna merah tersebut Merupakan nilai ukuran lebar dari tombol Buka Tutup tersebut.. Silakan juga sobat rubah sesuai keinginan sobat.Tapi hanya sobat rubah nilainya saja yaa.

Code; ... Isi Teks ... ; Ganti dengan Isi artikel sobat sendiri, atau terserah sobat lah... hehehehehee.

Ingat ya soob. sobat bisa merubah code di atas hanya yang saya paparkan aja..

Untuk pemasangan kotak buka tutup tersebut, itu terserah sobat. mau sobat gunakan untuk apa aja, bisa buat kotak tulisan, buat kotak image..Penempatan kotak buka tutup, sobat bisa lihat di sidebar dan footer blog saya. atau juga bisa di postingan seperti ini.. hehehehehee.

Gimana sob. mudah kan sob.. Semoga sukses ya sob.. Salam Bloggers Indonesia..

Oh iya sob, kalau sobat berkenan, kunjungi juga ni Cara Membuat Kotak Scroll Super SEO Di Blog