Cari Blog Ini

My Best Friend

Diberdayakan oleh Blogger.

Label

Traffic Visitor

Flag Counter
15 Jan 2013

Cara Membuat Komentar Slide Panel Dengan JQuery

Cara Membuat Komentar Slide Panel Dengan JQuery


Cara Membuat Komentar Slide Panel Dengan JQuery |  Hay sobat apa kabar kalian semua ? Kali ini Acep-Computer akan berbagi tutorial seputar blog. Tutorial kali ini adalah Cara Membuat Komentar Slide Panel Dengan JQuery. Meskipun tutorial membuat slide panel ini sudah banyak bertebaran di si mbah google, Tapi biarkan saya membagikan tutorial ini kepada sobat yang belum tahu dengan komentar slide panel ini.

Cara Membuat Komentar Slide Panel Dengan JQuery

Sebelum anda mererapkan di blog anda, alangkah baiknya sobat buka demonya dulu biar lebih paham dengan komentar slide panel. Tinggal buka demonya DISINI. Setelah melihat demonya, pasti anda akan mencoba memasangnya di blog anda. Simak baik - baik tutorial Cara Membuat Komentar Slide Panel Dengan JQuery dibawah ini :

1. Buka blogger
2. Masuk Template => Edit Template
3. Cari kode ini ]]></b:skin> dengan menekan tombol ctrl+f  biar lebih cepat
4. Setelah ketemu, copy kode dibawah ini tepat DIATAS kode ]]></b:skin>



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

5. Kemudian temukan kode </head> dan copy kode ini tepat DIATAS kode </head>

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

Ingat, kode yang Saya beri garis bawah bewarna aqua adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, hapus kode tersebut !
6. Simpan atau Save Template sobat.

Coba di lihat dulu apakah sudah work 100% atau tidak? Jika tutorial diatas tidak work, silahkan anda berkomentar di bawah ini agar kodenya bisa dengan segera saya perbaiki. Oke cukup sekian saja tutorial Cara Membuat Komentar Slide Panel Dengan JQuery dari saya, semoga tutorial diatas bisa bermanfaat.

0 komentar: