Pilih Warna Baground Yang Anda Suka
Latest

Cara Membuat Tombol Show atau Hide di Sidebar Blog

kevinservis 27 Mar 2013

http://2.bp.blogspot.com/-RmQitewn_n4/UTljK91M6PI/AAAAAAAAAxo/YKc5dcvY7DY/s320/show.png

Bagi Kamu yang bingung bagaimana cara membuat tombol show/hide atau lihat/tutup pada sidebar blog, nah kali ini Saya akan share caranya. Dengan menggunakan tombol ini, bukan hanya membuat blog lebih cantik, dan juga Kamu dapat menghemat pemakaian ruang di sidebar blog, seperti yang kalian lihat sidebar punya blog Saya, yang ada di sebelah kanan blog Saya.

Untuk caranya ikuti tutorial dibawah ini :
  1. Log in ke blogger Kamu
  2. Pilih template, klik edit html
  3. Centang expand template widget
  4. Cari judul sidebar blog Kamu, misalkan Tutorial Blog (untuk mencari tekan ctrl + F atau tekan F3) , cari yang hampir sama dengan dibawah ini :
  5. <b:widget id='HTML2' locked='false' title='Tutorial Blog' 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>
    Keterangan :
    • Ganti kode berwarna hijau dengan kode dibawah 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>

    • Lalu masukan kode dibawah ini sebelum kode yang berwarna biru :
    • <script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script>

  6. Dan ini adalah contoh hasil dari blog Saya :
    <b:widget id='HTML2' locked='false' title='Tutorial Blog' 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>
       
  7. Sekarang klik pratinjau, apakah sudah berhasil atau belum 
  8. Jika sudah berhasil, klik simpan dan lihat hasilnya 
  9. Mudahkan, Selamat Mencoba,,,


Share this article :

Ditulis Oleh : kevinservis ~ http://kevinservis.blogspot.com/

Artikel Cara Membuat Tombol Show atau Hide di Sidebar Blog ini diposting oleh kevinservis pada hari 27 Mar 2013. Terimakasih atas kunjungan Sobat serta kesediaan Sobat membaca artikel ini, Kritik dan saran dapat Sobat sampaikan melalui kotak komentar , Mohon jangan pasang Link hidup di komentar contoh Link hidup google , yahoo , bing , alexa yang diperbolehkan di kotak komentar contoh Link http://blogspot.com Terimakasih



Artikel terkait:

 

Posting Komentar

 
Copyright © 2013. Cikevin - All Rights Reserved
Powered By Blogger