Friday, June 29, 2012

Cara Menyembunyikan/Menampilkan Kotak Komentar di Blogger

11:20 PM Hzndi 10 comments



Kesibukan yang ada tidak membuat saya menduakan blog saya tercinta hehe. Oke pada kesempatan kali ini saya akan membagikan sebuah tutorial tentang bagaimana caranya menyembunyikan kotak komentar pada blogger. Dengan menggunakan widget ini tentu saja akan mengehemat ruangan pada blog kamu sehingga tidak memerlukan raungan yang banyak. Lihat caranya di bawah ini :

1. Masuk ke Blogger.com

2. Klik Template --> Edit HTML --> Klik Lanjutkan --> Centang Expand Template Widget --> Cari kode <head> lalu kamu copas kode dibawah ini dan letakkan di bawah kode <head>. Oh iya jangan lupa kamu backup dahulu template blog kamu !

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

3. Setelah itu kamu cari lagi kode ]]></b:skin>, kamu salin lagi kode di bawah ini dan letakkan diatas kode ]]></b:skin>.

/*----- Comment Box by www.MybloggerTricks.com ----*/
h3.trigger {
background: url(http://mybloggertricks.googlecode.com/files/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;
 }
/*----- share by www.hzndi.blogspot.com ----*/

NOTE :
- width: 518px adalah lebarnya, kamu bisa atur sesuka kamu

4. Kemudian kamu cari lagi kode <b:includable id='comment-form' var='post'>, lalu kamu copas lagi kode di bawah ini dan kamu taruh di bawah kode <b:includable id='comment-form' var='post'>.

<h3 class='trigger'>Click Here To add Comment</h3>
<div class='toggle_container'>
<div class='block'>

5. Cari lagi kode </b:includable> dan kamu copas kode di bawah ini dan diletakkan diatas kode </b:includable>.

<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://hzndi.blogspot.com' style='color:#CAC8C8;'><i>Tutorial Blog</i></a></p>
</div>
</div>

6. Simpan dan kamu lihat hasilnya,  thanks to mybloggertricks.com untuk kodenya :D

Postingan Terkait:

Blogger

Posted in: ,

10 comments:

  1. Full Software MediafireJune 30, 2012 at 12:50 AM

    wuih keren juga nih sob, kapan-kapan ane coba ..

    ReplyDelete
    Replies
    1. HzndiJune 30, 2012 at 10:15 PM

      silakan gan :) ini juga buat mengehamt ruangan blog ente juga loh hehe

      Delete
  2. Blog KeperawatanJune 30, 2012 at 6:00 AM

    Terima kasih sahabat atas berbagi pengetahuannya serta tipsnya nih...
    Jadi keren tampilannya bila dijadikan seperti ini sahabat

    ReplyDelete
  3. Ammethe BersandarJune 30, 2012 at 7:07 AM

    mantab bro ,,,, keren juga tuh kalo tampilanya sprti itu ...

    ReplyDelete
  4. Vpie ◥TwekzLibz◤ MahaDhifaJune 30, 2012 at 11:34 AM

    . . pengen. he..86x. tapi kalo kayak gitu kasihan bagi yang membuka lewat hape . .

    ReplyDelete
    Replies
    1. HzndiJune 30, 2012 at 10:19 PM

      kalau membuka lewat hape, widget2 tidak akan keliatan neng :)

      Delete
  5. UnknownMay 19, 2013 at 8:59 AM

    Keren Mas Bro..

    Thanks ya

    ReplyDelete
  6. UnknownNovember 21, 2013 at 10:35 AM

    Oke Bos, di coba...

    ReplyDelete

Komentarmu menunjukan kecerdasanmu, Kalau komentar cuma buat cari link buat apa ? :)

Twitter Delicious Facebook Digg Stumbleupon Favorites More