Minggu, 19 Juni 2011

Cara Membuat Spoiler (Tombol Buka/Tutup)

| Minggu, 19 Juni 2011 | 1 komentar

Inilah Cara Membuat Spoiler atau Tombol Buka/Tutup pada blog yang disimpan di sidebar atau dalam postingan , selan itu sekalian juga Cara Membuat Spoiler Show/Hidden Widget .


Cara Membuat Spoiler Pada Sidebar atau Postingan

Sebenarnya Spoiler bisa ditempatkan dimana saja di Sidebar, Komentar atau di postingan , Dengan Spoiler kita bisa menghemat tempat dll. Cara membuatnya  sama saja tinggal menggunakan kode HTML  seperti di bawah ini :



<div style="margin-bottom: 2px;">Judul Spoiler <div style="margin-top: 5px; text-align: center;"><input value="Buka" style="margin-top: 5px; width: 60px; font-size: 10px;" 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 style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;"> Silahkan masukan Isi Spoiler disini,  Bisa teks atau gambar / foto  </div></div></div>
Perhatikan tulisan berwarna merah, itu bisa diganti sesuai keinginan. dan isi pokok dari spoiler bisa berupa teks atau gambar. 

Cara Membuat Spoiler Show / Hidden Widget


Untuk Membuat Spoiler Show/Hidden Widget  kita harus merubah kode HTML langsung pada template blog., widgetnya bisa yang mana saja.. misalnya pada Daftar Isi, Label , Komentar atau Link Sahabat dll.
Langkah membuatnya :
  1. Masuk ke Blogger , pilih Design atau Layout , lalu Edit HTML
  2. Sebaiknya backup dulu dengan Download full template
  3. Centang Expand Widget Templates
  4. Cari kode widget yang akan di rubah .. nah berdasarkan pengalaman sebaiknya tiap widget itu diberi nama, jadi mudah untuk mencarinya.. tinggal Ctl+F lalu ketik nama widgetnya langsung ketemu deh.
  5. Contoh yang akan saya buat Spoilernya adalah Link Sahabat.,
    Widget Link Sahabat kodenya seperti ini :


    <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'>
    <b:widget id='HTML8' locked='false' title='Link  Sahabat'type='HTML'>
    <b:includable id='main'>
      <!-- only display title if it's non-empty -->
      <b:if cond='data:title != &quot;&quot;'>
        <h2 class='title'><data:title/></h2>   </b:if>
      <div class='widget-content'>
        <data:content/>
      </div>
      <b:include name='quickedit'/> </b:includable> </b:widget>
  6. Ganti kode yang berwarna pink dengan script berikut
    <h2 class='title'><script type='text/javascript'> /* <![CDATA[ */ 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;" style="float:right;margin-right:0px;">[Show/Hidden]<\/a>'); /* ]]> */ </script><data:title/></h2><script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script>
  7. Copy kode dibawah ini & simpan diatas kode </b:includable>
    <script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script>
  8. Bila kodenya digabungkan maka  akan seperti ini :
    Klik Kotak Spoilernya untuk melihat :
  9. Sampai disini urusan Spoiler selesai, tinggal Save Templates
Selamat mencoba, Cara Membuat Spoiler ( Buka/Tutup)  dan Cara Membuat Spoiler Show /  Hidden Widget . Semoga bermanfaat.... 

Silahkan Share yah sob! :
Anda sedang membaca artikel tentang Cara Membuat Spoiler (Tombol Buka/Tutup) dan anda bisa menemukan artikel Cara Membuat Spoiler (Tombol Buka/Tutup) ini dengan url http://zidiyuto.blogspot.com/2011/06/cara-membuat-spoiler-tombol-bukatutup.html, anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Spoiler (Tombol Buka/Tutup) ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link Cara Membuat Spoiler (Tombol Buka/Tutup) sumbernya.

1 komentar:

  1. pinjem kodenya kawan, follback juga ya
    ane followers no 100

    BalasHapus

Silahkan berkomentar kepada sobat blogger semua. Diharapkan komentar yang berkaitan dengan isi dari blog ini. Terima Kasih.



TULISKAN KOMENTAR DI BAWAH!!!

Related Posts Plugin for WordPress, Blogger...
 

Sobat Blogger

About Me

Foto Saya
Saya adalah seseorang yang senang berbagi. Oleh karena itu mari kita saling berbagi informasi di dunia maya ini.

My Status

© Copyright 2012. zidiyuto.blogspot.com . All rights reserved | zidiyuto.blogspot.com is proudly powered by Blogger.com | Template by o-om.com - zoomtemplate.com