Trick n Tips Blogger | Widget Blogger | Template Blogger

Cara Menyembunyikan dan Tampilkan Kotak Komentar Bergaya Di Blog

by Irsyad Aslam , at 2/12/2013 , has 2 komentar
collapsible comment box
Kotak Komentar Dibutuhkan oleh pengunjung untuk bisa melampiaskan perasaan suka atau tidak suka pada posting. Kotak Komentar Dianggap Mengganggu oleh pengunjung apalagi komentar yang ditampilkan sangat banyak. tentu menggangu bukan?. Kotak Komentar adalah salah satu tampilan Komentar pada setiap blog. Menyembunyikan dan Menampilakan adalah salah satu cara untuk menghiasi Kotak komentar. Keuntungan dari Style Kotak Kementar ini adalah Tampilan yang sangat bagus, Dan Jika
pengunjung mengeklik Tombol ini akan Tampil Kotak Komentar ini, Dan Style Kotak Komentar ini juga tidak banyak memakan tempat. Untuk itulah saya akan menjelaskan cara untuk membuatnya. Jika Anda Berminat membuatnya anda perlu mengedit HTML anda. Dan tolong Backup template anda, jika sewaktu-waktu ada kesalahan dan anda tidak bingung. Setelah di backup ikuti Cara-Cara Berikut ini:

expand/collapse blogger comment box
  • Silahkan Login Ke Blogger Anda.
  • Setelah itu, Klik Menu Template --> Klik Tombol Edit HTML.
  • Centang Expand Template Widget, Lalu Cari Kode <head> dengan menekan CTRL+F atau dengan F3.
  • Paste Kode Berikut ini Dibawah kode <head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
 
    $(&quot;.toggle_container&quot;).hide();
    $(&quot;h3.trigger&quot;).click(function(){
        $(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
    });
});
</script>
  • Setelah itu, Cari Kode ]]></b:skin> dengan menekan CTRL+F atau dengan F3.
  • Paste Kode Berikut ini di atas kode ]]></b:skin> :

/*----- Comment Box by your-belajarblog.blogspot.com ----*/
h3.trigger { 
background: url(http://4.bp.blogspot.com/-w6rbdy4LCtI/UKdcV7jX1aI/AAAAAAAAIAw/ekWT8oI7JZw/s1600/comment-boxbg.png) no-repeat; 
height: 44px; 
line-height: 46px; 
width: 518px; border-radius:4px; 
font-family:Arial; 
font-size: 1.4em; font-weight: bold; 
text-align:left; 
color:#A1A1A1; 
float: left; 
cursor:pointer; 
box-shadow: #333 0px 1px 3px; 
padding:0 0 0 50px; 
margin:10px 0px 10px 10px; 
}
h3.active { 
background-position: bottom left; 
color:#ddd; 

.toggle_container { 
padding-left:10px; 
overflow: hidden; 
clear: both; 
}



Keterangan:
Jika Anda ingin Mengatur Lebar Tombol Silahkan atur pada tulisan yang berwarna kuning.

  • Setelah itu, Cari Kode <b:includable id='comment-form' var='post'> dengan menekan CTRL+F atau dengan F3.
  • Paste Kode Berikut ini dibawah kode <b:includable id='comment-form' var='post'> :

<h3 class='trigger'>Klik Untuk Menambahkan</h3>
<div class='toggle_container'>
<div class='block'>
Keterangan:
Ganti Tulisan Klik Untuk Menambahkan dengan Judul Tombol yang anda mau
  • Lalu, Cari Kode Berikut ini </b:includable> dengan menekan CTRL+F atau dengan F3.
  • Paste Kode Berikut ini diatas kode </b:includable> :

<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://your-belajarblog.blogspot.com/' style='color:#CAC8C8;'><i>Blogger TricksnTips</i></a></p>
</div>
</div>
  • Setelah itu, Klik Tombol Pratinjau untuk meninjau kesalahan, Jika Tidak ada kesalahan, Klik Tombol Simpan Template.

Selamat Mencoba,
Salam Sukses.




Your-BelajarBLOG
Irsyad Aslam
About
Cara Menyembunyikan dan Tampilkan Kotak Komentar Bergaya Di Blog - written by Irsyad Aslam , published at 2/12/2013, categorized as Widget . And has 2 komentar
2 komentar Add a comment
plus minus nya apa ya klo kotak komentar di sembunyikan ???
makasih om irsyad sebelumnya
Kalau untuk plusnya agar menghemat tempat komentar,
dan minusnya lebih berat dikit karena memuat plugins jquerynya.

Selamat Mencoba,
Salam Sukses,


Your-BelajarBLOG
Delete
Reply Delete

Catatan:

• Dilarang Menaruh Link Aktif
• Dilarang Nyepan/Promosi Di Komentar
• Dilarang Berkata Tidak Sopan
• Untuk Menyisipkan Kode, Gunakan Tag <i rel="code">... KODE ...</i>
• Untuk Menyisipkan Kode Panjang, Gunakan Tag <i rel="pre">... KODE ...</i>
• Untuk Menyisipkan Catatan, Gunakan [catatan].. TEKS ...[/catatan]
• Untuk Menyisipkan Gambar, Gunakan [img]URL GAMBAR[/img]

Sebelum Menyisipkan Kode Harap Konversi Kode Sebelum Menuliskan Di Komentar

Bck
Cancel Reply

Followers

Komentar Terbaru

Copyright ©2013 Your-BelajarBLOG by
Theme designed by Damzaky - Published by Proyek-Template
Powered by Blogger