Membuat Show Hide Comment

Comen show hide, buka tutu7p komen, komen hide

Membuat Show Hide Comment-Sebuah blog kebanyakan menerapkan kolom berkomentar, namun sangat banyak sekali blog atau web yang memiliki pengunjung banyak dan komentar di blog tersebut pun begitu menumpuk, hal ini mungkin salah satu penyebab loading blog agak lama, karena blog harus menampilkan semua komentar secara bersamaan dengan pembukaan suatu artikel.

Atas dasar itu maka Kolom Tutorial™ pada sore ini akan membahas tentang cara pembuatan Kotak Komentar yang memiliki efek Show Hide alias Terbuka dan tertutup.

VIEW A DEMO

Untuk Tutorialnya Silakan di Simak:-

1. Log in ke Akun Blogger > Template > Edit HTML
2. Masukan kode berikut ini sebelum kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var panelSelector = '#comments',
openPanelText = "Show Comments",
closePanelText = "Hide Comments",
slideDownPanelSpeed = 600,
slideUpPanelSpeed = 400;

jQuery(function() {
    jQuery(panelSelector).hide()
        .addClass('kerenPanel')
            .before('<a class="openpanel" href="#">' + openPanelText + '<em></em></a>')
                .after('<div class="paneline"></div>');
    jQuery('a.openpanel').toggle(function() {
        jQuery(this).addClass('active').html(closePanelText + '<em></em>');
        jQuery('div.kerenPanel').slideDown(slideDownPanelSpeed);
        return false;
    }, function() {
        jQuery(this).removeClass('active').html(openPanelText + '<em></em>');
        jQuery('div.kerenPanel').slideUp(slideUpPanelSpeed);
        return false;
    });
});

//]]>
</script>

3. Masih di edit HTML Masukan kode CSS dibawah ini diatas kode ]]></b:skin>

a.openpanel {
  display:block;
  width:100%;
  height:40px;
  padding:0 0;
  text-align:center;
  font-weight:bold;
  line-height:30px;
  background:#ffffff;
  url()repeat-x;
  -webkit-transition:all .15s ease-in-out;
  -webkit-transform-origin:50% 1px;
  position:relative;
}

a.openpanel em {
  width:0;
  height:0;
  display:block;
  position:absolute;
  top:15px;
  right:15px;
  border:6px solid transparent;
  border-top-color:white;
}

a.openpanel.active {
  background-color:#ffffff;
}

a.openpanel.active em {
  top:6px;
  border color:#222222;
}

div.paneline {
  height:0;
  -webkit-transition:all .15s ease-in-out;
  -webkit-transform-origin:50% 1px;
}

div.kerenPanel {
  padding:10px 20px 20px;
  margin:0 0 !important;

Note :

Jika ingin seperti pada demo silakan ganti :


Show Comments dengan URL Image

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj7wrdb6qg7RzhZBawZ4c8AAHvGwvGa4oQH0SHTONvaCftuxnhh2HYFvikMSG3F4DN7La4An05QXhIY7OdTNbKym8TRBpvYF_kJFaWq5l25NUUtePArfhONmA9WFurC5T11c_WoeRbpzRL/s1600/Show+Comment+alexjoen.png'/>

Hide Comments dengan URL Image

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcFUxlkdMVQIyQYUm9qSor1tSdQyY9PReqBpnvBXm16Xz3ANL3iKF8LDoHft9Oqk_xSb21qTC5el3467Hzxn300UIpS2a8-EjPpfsZxUoA-8VKbf17h8l5LZrH7dCk5jD07nzvSDjBEx0h/s1600/Hide+Comment+alexjoen.png'/>

Demikian artikel sore ini semoga bermanfaat..............