Cari Artikel Blog Ini

Total Tayangan Halaman

MENGHEMAT RUANG BLOG DENGAN MENU TUTUP BUKA

Banyak usaha yang dapat anda lakukan untuk menampilkan blog kelihatan lebih menarik bagi para pengunjung.
Salah satu trik untuk kearah itu dapat anda lakukan dengan menggunakan menu tutup buka sehingga isi dari menu tersebut akan tersembunyi, dan akan terbuka jika pengunjung mengklik menu tersebut. Selain dapat menambah keindahan blog tips ini juga dapat menghemat ruang pada blog serta dapat diletakkan pada postingan maupun pada elemen halaman.
Sebagai contoh, coba anda perhatikan menu dibawah ini :



Jika anda berminat, anda tinggal copy script dibawah kemudian paste pada blog anda, baik pada postingan maupun pada elemen halaman.


<div><div style="margin: 5px;"><div class="normalfont" style="margin-bottom: 2px;"><input value="BUKA" style="margin: 0px; padding: 5px; width: 30%; font-size: 11px; background:#0066CC; color:#ffffcc; border:1px dashes yellow;" 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"><div style="display: none;"><div style="border: 2px dashes white; color:blue;background-color:NONE; text-align: justify; padding:10px; ">TEMPAT MENGISI IMAGE ,TULISAN ATAU APA SAJA </div>


Selanjutnya anda tinggal mengganti kode yang berwarna kuning dengan keinginan anda, agar tampil lebih menarik :
  1. value="BUKA" = dapat anda ganti dengan kata lain misalnya : OPEN
  2. . Kata BUKA ada 2 buah , silahkan anda ganti keduanya.
  3. width: 30%; = merupakan ukuran dari lebar menu, dapat anda ganti dengan px

  4. font-size: 11px; = merupakan ukuran huruf yang tampil pada menu

  5. border:1px dashes yellow;" = merupakan border menu berupa garis ganda berukuran ipx dan berwarna kuning

  6. background:#0066CC; = merupakan warna latar dari menu

  7. value = 'TUTUP'; = dapat anda ganti dengan kata lain misalnya CLOSE

  8. border: 2px dashes white; color:blue;background-color:NONE; = menunjukkan bahwa border yang muncul setelah diklik berupa garis ganda dengan ukuran 2 px dan berwarna putih, tulisan berwarna biru serta tidak ada background, silahkan anda ganti seperlunya, dapat anda ganti dengan solid atau dotted

  9. TEMPAT MENGISI IMAGE ,TULISAN ATAU APA SAJA = dapat anda ganti dengan apa saja yang ingin anda tampilkan


Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
13 Comments

13 komentar :

Nova Imoet mengatakan...

wah keren juga ni...
makasih ya...

Ades mengatakan...

percobaan....:l:

Blogger Terpanas mengatakan...

makasih tipsnya mas, selamat malam. berkunjung lagi ke sini. kunjung balik ya?

Economic development projects Panama mengatakan...

meski g ngerti computer tetep di bookmark jaga2 kl compi hang

cosmeticdentistryguide.co.uk mengatakan...

Thanks for sharing a nice blog.I really like your post. The picture you have posted here is really very nice. Great post!

Dwi Pct mengatakan...

sip..lengkap banget, mksh gan

PPOB NASIONAL mengatakan...

numpang lapak gan...

bagi teman-teman bloger yg ingin nambah penghasilan ...membuka pembayaran pln dll dng BRI
GRATIS di www.loket-bri.co.cc

MY CEREBRUM mengatakan...

salam kenal,ya. makacih banyak utk info tutorialnya, sgt membantu saya.

DEBRIAN RUHUT BLOG mengatakan...

keren nih..kayak bikin spoiler ya.. thanks

Liga Prima Indonesia mengatakan...

Makasih tipsnya...

KICK HANS mengatakan...

lakasih gan....!

aat mengatakan...

Thanks ya gan tutornya :)

raihangokil12 mengatakan...

kren

Posting Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!