Langsung ke konten utama

Cara Membuat Spoiler (Tombol Buka/Tutup)

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.... 

Komentar

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

    BalasHapus

Posting Komentar

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



TULISKAN KOMENTAR DI BAWAH!!!

Postingan populer dari blog ini

Tips Latihan Memperbaiki Tulang Punggung Belakang Bungkuk

Beberapa kebiasaan yang tanpa Anda sadari bisa menjadi faktor seseorang memiliki postur tubuh yang kurang cantik. Sehingga ini membuat penampilan Anda menjadi kurang cantik dan terkadang membuat Anda menjadi malu dan tidak percaya diri.
Postur tubuh yang buruk ini biasanya disebabkan oleh cara duduk yang salah, sering membawa tas berat, tidur dengan bantal tinggi, sering menggunakan sepatu hak tinggi atau kelebihan berat badan. Dengan postur tubuh yang buruk akan menimbulkan beberapa efek seperti sakit pinggang, nyeri pada punggung dan juga mudah lelah.
Ini semua bisa Anda perbaiki dengan latihan ringan untuk menjadikan penampilan kembali menarik dan membuat Anda percaya diri, sbb tips-tipsnya:

Pertama. Melakukan beberapa latihan peregangan (streching) secara teratur untuk membantu melebarkan bahu sehingga tidak condong ke depan dan dapat meningkatkan fleksibilitas.

Kedua. Latihlah berdiri dan duduk dengan posisi tulang belakang lurus serta letak pundak dan bahu yang tegak dengan kedua tela…

Cara Melacak Nomor Handphone (No. HP) Seseorang

Jika kamu sering dimisscall orang, di isengin orang MARAH! Kamu bisa mengecek lokasi mereka, mendeteksi di daerah mereka tinggal, kota penelpon kita . .
Silahkan pakai HLR Lookup Search

Nah disitu kita tinggal memasukkan no telepon yang mau kita lacak lalu klik search.
Berikut Daftar Operator yang dapat dideteksi : 1. Telekomunikasi Selular [Kartu Halo, Simpati, Kartu AS] 2. Indosat (Cellular) [IM3, Mentari, Matrix] 3. Indosat (Fixed) [Starone] 4. Excelcomindo Pratama [XL] 5. Hutchison CP Telecommunications [Three] 6. Natrindo Telepon Seluler [Axis] 7. Bakrie Telecom [Esia] 8. Telekomunikasi Indonesia [PSTN, Flexi] 9. Mobile-8 Telecom (Cellular) [Fren] 10. Mobile-8 Telecom (Fixed) [Hepi] 11. Smart Telecom [Smart] 12. Sampoerna Telekomunikasi Indonesia [Ceria] 13. Pasifik Satelit Nusantara [Byru]
NB: Kelemahan HLR Lookup yaitu : lokasi yang dapat dilacak hanya lokasi pendaftarannya saja. Jadi kalo pemilik HP uda lari ke tempat lain ya nda bekal ketemu deh
Hasil deteksinya pun Sangat Akurat.

Ini adalah has…

Menambah Font Style pada MS Office

Menambah Font Style pada MS Office | Font-font pada Ms Office, misalnya Word, Powerpoint, dan Excel memiliki berbagai macam Font Style. Namun, font style bawaan mereka terlalu sedikit dan monoton atau terlalu simpel. Jadi, jika ingin membuat dokumen dengan font style yang lebih stylish kita harus menambahkannya sendiri. Bagaimana caranya? Caranya cukup mudah.



Pertama download dulu font style nyadisini.
Karena file nya berbentuk .RAR maka harus di ekstrak terlebih dahulu.Buka foldernya, kemudian Select all dengan cara menekan tombol CTRL+A pada keyboard, lalu copySelanjutnya, klik start pada windows>Control Panel>Paapearence and Personalization>FontLalu paste file tadi di situ. SELESAI!!! Anda dapat mengeceknya dengan membuka MS Offici. Font ini akan otomatis tersimpan pada windows, jadi sebenarnya tidak hanya menambah font style pada Ms Office saja, namun juga akan menambah font style pada setiap program yang menggunakan teks. Misalnya Photoshop. Corel, dan lain-lain...