Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Cara Membuat Show-Hidden atau Expand-Colapse di Widget Blog

Ini adalah sebuah cara untuk membuat halaman blog yang terlalu penuh dengan widget menjadi lebih longgar. Beberapa widget mungkin dapat kita tampilkan dalam box tersembuyi dan hanya akan terlihat ketika seorang pengunjung menginginkannya saja. Ya ... sebuah button (atau bentuk yang lain) bisa digunakan sebagai fungsi pembuka widget yang kita sembunyikan. Pemanfaatan show-hidden box, selain membuat halaman blog menjadi tidak terlalu berjejalan, diharapkan juga mampu memberi peluang blogger untuk memunculkan tampilan baru yang lebih indah. Dengan membuat "tombol" atau button yang bagus, aku kira apa yang diharapkan pasti akan dapat diwujudkan. Berbagai bentuk button, baik berupa gambar biasa atau animasi, css3 button, teks dan box dengan shadow efects juga bisa kita pakai buat membuat tampilan berbeda. Bahkan sampeyan juga bisa memanfaatkan opacity effect untuk menambah daya tarik show-hidden box ini.

Sekali lagi, javascript akan menjadi "pelakon utama" fungsi "show-hidden". Tidak rumit untuk menggunakannya. Semua javascript kita gunakan langsung di kolom dimana widget akan kita sembunyikan, tanpa perlu menyentuh halaman edit html. Dengan cara yang teramat praktis ini, diharapkan semua blogger, bahkan yang masih dalam tahap belajar pun dengan mudah mampu memanfaatkannya.

Cara Membuat Show-Hidden Box di Widget Blogspot

Javascript

<script type='text/javascript'>
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;">');
</script>
<center>
<div style="background:#b3c8ce url(http://1.bp.blogspot.com/_2ye1u3ms7LI/S8mUZgw3IgI/AAAAAAAAADk/OjYzr5AlHFI/s320/Untitled-55-copy.gif) left top repeat-x;width:260px;padding:2px 0;">
<p style="background:#98d6e5 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgBlueFadeV71H1.gif) left top repeat-x;font-size:14px;font-weight:bold;color:#012750;font-family:Tahoma;padding:4px;border:1px solid #333;margin:5px;">Judul/Nama Widget<br />
<img src="http://i964.photobucket.com/albums/ae124/gubhugreyot/Mart10/template-GR/Show-HideH115V34.jpg" width="112" height="28" style="margin:2px auto;" /></p>
<script type='text/javascript'>
document.write('<div id="' + rnd + '" style="display:none;padding:8px;background:#e1eaf1;margin:0 5px 8px;">');
</script>

Letakkan widget yang akan di sembunyikan di sini!

<script type='text/javascript'>
document.write('<\/div>');
</script>
</div>
</center>

Langkah menggunakan Show-Hidden Widget

  1. Login to BloGGeR.
  2. Setelah masuk di halaman Dasboard, KLIK link Design/Rancangan.
  3. Design/Rancangan : KLIK Add Gadget/Tambah Gadget (box yang bergaris putus-putus).
  4. KLIK HTML/Javascript.
  5. Pastekan seluruh Javascript Show-Hidden dan kode HTML Widget yang akan dipasang.
  6. KLIK SAVE/Simpan, kemudian lihat hasilnya dengan membuka blog.

Keterangan :

  1. Ganti Teks yang bertuliskan Letakkan widget yang akan di sembunyikan di sini! dengan Kode HTML Widget yang akan di pasang.
  2. Sebagai contoh, coba pasang kode HTML di bawah ini untuk menggantikan teks tersebut :
  3. <img src="http://img.theomegaproject.org/thumbs/2009/05/192.jpg" width="300" />
  4. Ganti Judul/Nama Widget sesuai widget yang digunakan.
  5. width:260px; merupakan lebar show hidden. Sampeyan dapat merubahnya sesuai ruang yang tersedia. Semakin kecil maka akan semakin sempit.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :


» Happy Blogging - gubhugreyot «

Semoga Panduan dan Tutorial BloGGeR ini bermanfaat dan blog bertambah manis!

12 komentar:

  1. makasih atas sarannya dan ilmunya.jam yang mengikuti kursor Alhamdullillah berhasil dipakai..

    ini hasilnya: http://www.asaloy.co.cc

    untuk komentar bisa ko mas walaupun pakai browser mozilla maupun chrome..

    BalasHapus
  2. makasih atas infonya ane coba ya...izin Copas Scripnya

    BalasHapus
  3. izin copat scriptnya y gan....
    ane coba dulu.... hehe...
    moga tambah sukses...
    nice blog...

    BalasHapus
  4. Gan ?? ane izin shar postingan ente ya? masih newbie nih.. hehe salam kenal

    BalasHapus
  5. gan ko tiny picnya udh id remove??

    BalasHapus
  6. kok di blog saya ga fungsi ya....

    BalasHapus
  7. keren gan,....suuupeeererrrr mantab
    pengin dah kayk gini,pa lagi efek hilang2 itu
    mampir juga ke blog gua gan

    BalasHapus
  8. Ini sangat bermanfaat bro..,,thanks you

    BalasHapus
  9. numpang lewat ya gan... :D

    BalasHapus

 
GR | Edited by | gubhug reyot