Halo !!! Saya Kang Ismet, ini adalah blog tentang AMP HTML dan cara penerapannya

Cara Membuat Tombol Show Hide Komentar

Sebelum :


Sesudah





  • Login ke Dasbor >> Tamplate
  • Untuk berjaga-jaga Backup dulu tamplate sobat
  • Pilih Edit HTML >> lanjutkan >> Centang "Expand Template Widget"
  • Cari kode ]]></b:skin> untuk mempermudah gunakan F3 atau Ctrl F
  • Setelah ketemu kode tersebut,, taruh kode di bawah ini tepat di atas kode  ]]></b:skin> 



#comments {
display : none;
}
.stylewadah {background: #none;
padding: 5px;
}

#comments {
display : none;
}
.stylewadah {background: #none;
padding: 5px;
}
a.tombol-komentar{background: #FFFFFF   url(http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/plus.gif) 85% 55% no-repeat;display:block;padding:15px 40px 15px 15px;border:1px solid #000000}
a.tombol-komentar:hover{background: #f4f8fc url(http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/plus.gif) 85% 55% no-repeat;display:block;padding:15px 40px 15px 15px;border:1px solid #000000;}
a.active.tombol-komentar{background: #f4f8fc url(http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/minus.gif) 85% 55% no-repeat;border:1px solid #000000}



  • 5. setelah itu,, cari kode </head>
  • 6. setelah itu,, Taruh kode di bawah ini tepat di atasnya kode </head>



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
    $(&quot;.tombol-komentar&quot;).click(function(){
        $(&quot;#comments&quot;).slideToggle(&quot;slow&quot;);
        $(this).toggleClass(&quot;active&quot;);
        return false;
    });
});
</script>


  • Setelah itu Carilah kode <b:includable id='comments' var='post'> selengkapnya di bawah ini


</b:includable>
<b:includable id='comments' var='post'>


  • Terakhir, Letakkan kode dibawah ini, tepat di bawah kode <b:includable id='comments' var='post'>


<center>
<div class='stylewadah'>
<a class='tombol-komentar' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 0'>Silahkan Berkomentar Disini<b:else/><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></b:if>
</a>
</div>
</center> 

12 komentar:

  1. Keren tipsnya Sobat ,,,

    salam blogwalking

    BalasHapus
  2. boleh lah coba saya coba trik nya makasih yah
    salam blog walking

    BalasHapus
  3. simple dan menarik..

    cocok buat yang suka minimalis.. :)

    BalasHapus
  4. Balasan
    1. oke sob..tapi lain kali jangan pake live link ya...

      Hapus
  5. Iya, Kenapa Ga di Terapin Di Blog Ini?..

    BalasHapus
    Balasan
    1. menurut saya ini tidak cocok untuk di tampilkan di blog saya..

      Hapus
  6. posts and your blog is very interesting article, I'll be back to see your blog posts and articles later .. thanks for the info

    BalasHapus
  7. komentar nya di blog saya malah hilang?

    BalasHapus