membuat widget buka / tutup

Silahkan bagikan :

۞ السَّــــــلاَمُ عَلَيْــــــكُمْ وَرَحْمَــةُ اللــــهِ وَبَرَكَاتُــــــــــهُ ۞

۞ بســـــــــــــم اللّـــه الرّحمٰن الرّحيـــــــــــــم ۞

-------------------------------------------------------------

membuat widget buka / tutup

assalamualaikum wr wb......
bila anda ingin menghemat sekaligus agak mempercepat loading blog mungkin tips ini bisa
membantu, kalki ini saya akan membahas tentang cara membuat kotak buka / tutup atau spoiler pada widget
( sidebar )
bukan pada link atau laini sebagainya.....ngerti kan sob
kalau ngerti kita lanjut

oke langsung aja ikuti langkah 2 berikut....!!

Log In ke blog anda 
pilih Design/rancangan
kemudian pilih widget yang akan anda berikan spoiler atau tombol Buka Tutup
lalu klik EDIT

Setelah terbuka, lihatlah pada address bar widget tersebut, di sanalah terdapat ID widget tersebut,

anda bisa lihat gambar berikut ini yang tanda html1 adalah id dari judul widget atau sidebar anda

Setelah ID Widget ditemukan, klik cancel untuk kembali. 

Kemudian buka halaman Edit HTML,Centang Expand Widget Template 

(jangan lupa backup template dulu dengan klik Download Template)

Kemudian cari kode ID Widget yang baru anda dapatkan, sebagai contoh pada gambar di atas kan kode nya HTML1 jadi anda cari di edit html kode HTML1 seperti gambar di bawah ini

Setelah ID Widget ditemukan, lalu cari kode yang berwarna hijau berikut

<h2 class='title'><data:title/></h2>

Setelah ketemu, ganti kode hijau tersebut dengan kode di bawah ini

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

kemudian masukan kode berikut di atas kode  </b:includable>

<script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script> 

dan jika di gabung keseluruhannya akan menjadi seperti ini

<b:widget id='HTML1' locked='false' title='Recent Post' type='HTML'>

<b:includable id='main'>

  <!-- only display title if it's non-empty -->

  <b:if cond='data:title != &quot;&quot;'>

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

  </b:if>

  <div class='widget-content'>

    <data:content/>

  </div>

  <b:include name='quickedit'/> 

<script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script> 

</b:includable>

</b:widget>

</b:section>

</div>

                

lalu simpan template dan lihat hasilnya

۞ الحمد لله ربّ العٰلمين ۞

-------------------------------------------------------------

• Tweet
• Share
• Share
• Share
• WhatsApp