Home » » Membuat Komentar Menjadi Slider Style di Blog

Membuat Komentar Menjadi Slider Style di Blog

Written By Unknown on Monday, August 27, 2012 | 12:08 PM


Membuat Komentar Menjadi Slider Style di Blog - Dengan membuat komentar menjadi slider style, maka akan lebih menghemat tempat dan lumayan mempercepat loading blog kita. Pada kesempatan kali ini saya akan share tentang cara membuat komentar menjadi slider style di blog yang saya ambil (bersumber) dari blog hompimpaalaihumgambreng by Taufik Nurrohman. Berikut adalah langkah-langkahnya :

1. Login ke blogger.com menggunakan akun anda.
2. Langsung menuju ke Template » Edit HTML » Lanjutkan, centang Expand Template Widget.


3. Kemudian cari kode ]]></b:skin> dan letakkan script berikut di atasnya :

a.openpanel {
  display:block;
  clear:both;
  width:auto;
  padding:0px 0px;
  text-align:center;
  font-weight:bold;
  line-height:32px;
  background-color:#39f;
  color:white;
  text-decoration:none;
  margin:0px 0px;
  -webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
  box-shadow:0px 1px 1px rgba(0,0,0,0.2);
  position:relative;
}

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

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

a.openpanel.active em {
  top:6px;
  border-color:transparent transparent white transparent;
}

div.paneline {
  height:0px;
  border-bottom:4px solid #39b;
}

div.hompiPanel {
  padding:10px 20px 20px;
  -webkit-box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
  -moz-box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
  box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
  margin:0px 0px !important;
}

4. Lalu cari kode </head> dan letakkan script berikut di atasnya :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
var panelSelector       = '#comments',
    openPanelText       = "Poskan Komentar",
    closePanelText      = "Tutup Komentar",
    slideDownPanelSpeed = 600,
    slideUpPanelSpeed   = 400;
//]]>
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/blogger-slide-panel-comments.js' type='text/javascript'></script>

5. Klik simpan/save template, dan selesai.

Untuk previewnya bisa dilihat pada gambar yang ada diatas. Saya akhiri postingan ini, cukup sekian dan terima kasih atas kunjungan anda pada kesempatan kali ini. Special thanks to Taufik Nurrohman.

0 comments:

Post a Comment