Cara Membuat Spoiler di Wordpress Pake JQuery

Nemu tutorial dari blog mas M Alwi bab cara bikin spoiler,, kodenya:

<script style="display:none" language="Javascript" type="text/javascript">

  function togglegambar(showHideDiv, switchImgTag) {

  var ele = document.getElementById(showHideDiv);

  var imageEle = document.getElementById(switchImgTag);

  if(ele.style.display == "none") {

  ele.style.display = "block";

  imageEle.innerHTML = '<img class="aligncenter" title="Sembunyikan" src="http://i690.photobucket.com/albums/vv270/alwi/minus.png" alt="tanda minus" width="24" height="24" />';

  }

  else {

  ele.style.display = "none";

  imageEle.innerHTML = '<img class="aligncenter" title="Tampilkan" src="http://i690.photobucket.com/albums/vv270/alwi/plus.png" alt="tanda plus" width="24" height="24" />';

  }

  }

  </script>
<a id="imageDivLink" href="javascript:togglegambar('contentDivImg', 'imageDivLink');"><img class="aligncenter" title="Tampilkan" src="http://www.randomsnippets.com/wp-includes/images/plus.png" alt="tanda plus" width="24" height="24" /></a>


<div id="contentDivImg" style="display: none;padding:5px;border:1px solid #666666;width:583px;margin-bottom:15px">Ini contoh membuat tombol spoiler (Show Hide Element) menggunakan gambar (+) dan minus (-)</div>





Model lainnya adalah pake kode ini:

<div id="spoiler">
<div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" name="button" type="button" value="CONTOH SPOILER DENGAN BORDER DAN WARNA BACKGROUND" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<div style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;">
<p style="text-align: justify;">TULIS KALIMAT YANG AKAN DISEMBUNYIKAN DI SINI.</p>
</div><div id="hide"></div></div></div> 

Bisa JUga INI:
<div id="spoiler"><div>
<input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" name="button" type="button" value="CONTOH SPOILER UNTUK GAMBAR" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<img class="aligncenter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghc0t-TaW-Ob672JlSHeJMpBMrepk-3WDs2u-Ov-dRlCIWiRWUnY7eJaSf9XIL__Vr3V8QI3Qc9NTB5IVCz-8vqQGeuKazUHAbEHPs_BaPceRT9j28d3QSbcznxtzDyYuzYhtChhMJU54/s320/monyet.jpg" alt="monyet" width="300" height="280" />
</div><div id="hide"></div></div></div>

Cara Agar Permalink Hidup Di Local Host

Muncul pertanyaan bagaimana Cara Agar Permalink Hidup Di Local Host. Kita tahu kalau kita menggunakan appserv di local host itu permalinknya di rubah maka hasilnya akan berantakan?

lalu bagaimana solusinya?
Mudah sih aslinya.

Buka file yang ada di tampilan berikut ini pake notepad:

 

Keterangan,,,
Kamu masuk ke C / area kamu install Appservnya, masuk ke folder apachenya seperti yang ditunjukan angka #1. Lalu cari httpd.conf (ditunjukan panah #2).

 

httpd.conf itu kamu klik kanan, buka pake notepad. kalau udah kebuka, di tampilan yang ada cari ( gunakan CTRL F aja) kata kata ginian: #LoadModule rewrite_module modules/mod_rewrite.so

Udah ketemu? kalau udah, pada kata #LoadModule rewrite_module modules/mod_rewrite.so, delete  tanda kresnya (#).  maka filenya tinggal:

LoadModule rewrite_module modules/mod_rewrite.so

 

Oke, tahap selanjutnya: cari kata kata AllowOverride None, lalu delete, kamu ganti dengan kata: AllowOverride All

 

Mudah kan? sekarang restart apachemu. masuk ke start, appserv, control server by servis, klik apache restart. semoga beruntung ya :D. makasih. Inget like fanspage saya ketika tutorial ini bermanfaat: Fanspageku di sini

Cara Menampilkan Jumlah Queries Database Wordpress

Aku penasaran sama beberapa blog yang bisa menampilkan itungan queri dalam footernya, nah bagaimana sih sebenarnya Cara Menampilkan Jumlah Queries Database Wordpress?

Pertama, anda harus memasang :

PLugin DB Cache Reloaded Fix

download di: http://wordpress.org/extend/plugins/db-cache-reloaded-fix/

Lalu, aktifkan dan ikuti prosedur pengaktifannya di dalam plugin itu.

Kemudian, setelah aktif bisa dirimu buka menu appereance- edit- footer.php (kalau mau nampilkan di footer), lalu masukan kode/script php dibawah ini tepat di atas </body>. lalu save. Kita cek hasilnya:

 <?php echo $wpdb->num_queries; ?> queries. <?php timer_stop(1); ?> seconds.

Cara Anjrah Memasang YM Di Wordpress

Cara Anjrah Memasang YM Di Wordpress merupakan tema sederhana, namun sengaja aku kupas karena aku sering pake, cuman kadang pas googling lagi, nemu script YM yang nggak work..

so, daripada ane muter muter lagi, blog ini sebagai salah satu tempat ane naruh catetan catetan, aku pasang aja di sini.. Apa scriptnya?

<a href="ymsgr:sendIM?aidi_ym_anda_disini">
<img border="0" src="http://opi.yahoo.com/online?u=aidi_ym_anda_disini&m=g&t=2"/>

Pada area aidi_ym_anda_disini, masukan di situ Username YM anda. maka kalau bener cara pasangnya akan jadi penampakan bentuk YM bulat yang seperti di sebelah kanan tulisan YM pada gambar di bawah ini:

Mudah ya?...Ketika ada kesulitan silakan komen di bawah ini ajah ya,, :)

Membuat Header Web Dengan PhotoScape

Membuat Header Web Dengan PhotoScape merupakan solusi bagi yang blm begitu paham design. Menurutku hasilnya bagus juga, cek deh seperti berikut ini:

Wah, keren kan? hehe,, Sip deh, tadi tu sekedari design sederhana, anda yang mahir bisa eksplore lebih jauh lagi.

Cara Install Plugin Wordpress Video

Cara Install Plugin Wordpress bisa dilihat pada Video Youtube Berikut
Semoga bermanfaat

Rangkuman cara bikin spoiler Mirip Kaskus

Dari cari-cari ilmu mengenai kaskus, maka bisa disimpulkan teknik sederhananya adalah menggunakan kode javascript seperti:

Contoh Penggunaan Spoiler

[raw]<br />
[ spoiler title="Test" ]<br />
Hello ini adalah text yang disembunyikan<br />
[ /spoiler ][/raw]

Contoh diatas ditulis tanpa menggunakan spasi setelah tanda kurung buka [ dan sebelum tanda kurung tutup ]




Cara Menginstal Pluginnya
Upload dan extract File Zip berikut ke dalam folder wp-content/plugins di WordPress Anda melalui FTP. Atau langsung Upload dari wp-admin => Plugins => Add New Kemudian Aktifkan

Downloads WordPress Plugin Spoiler

Download WP Kaskus Spoiler

cc: http://takien.com