Untuk di perjumpaan kali ini Oto Website akan berbagi sebuah tutorial blogger. Jika Anda sering kemari maka Anda pasti pernah melihat kotak komentar blog ini menggunakan Komentar Slide Panel, yang di mana bila kita ingin berkomentar kita harus menekan panel tersebut menggunakan cursor untuk membuka kotak komentar yang di sembunyikan di dalam panel tersebut.
Tutorial tersebutlah yang kali ini akan Oto Website bagikan kepada Anda. Untuk cara pembuatannya sendiri kita membutuhkan bantuan dari jQery agar Komentar Slide Panel ini berjalan dengan semestinya.


Sceenshot dan Cara kerja




1. Cara Menginstal di Blogger
2. Masuk ke akun Blogger Anda.
3. Pada Dasor pilih Template >> Edit HTML.
4. Lalu temukan tag-tag berikut:

5. Letakkan tag berikut di bawah tag <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>

6.  Letakkan di atas ]]></b:skin>

/*----- Komentar Slide Panel by www.otowebsite.com ----*/
h3.trigger {
background: url(https://code-otowebsite.googlecode.com/svn/trunk/komentar slide panel.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;
}

  • Untuk mengganti tombol panel cukup rubah kode ini 518
  • Anda juga dapat menyesuaikan kode yang lainnya sesuai keinginan Anda, contoh kode yang di block kuning adalah kode untuk mengganti jenis font huruf.

7. Selanjutnya cari tag berikut:

<b:includable id='comment-form' var='post'>

lalu letakkan tag berikut di bawahnya

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

8. Scroll sedikit kebawah dan letakkan tag berikut di atas tag </b:includable>

<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://otowebsite.blogspot.com/2013/04/komentar-slide-panel.html' style='color:#CAC8C8;'><i>Oto Website</i></a></p>

</div>
</div>

Penampilan peletakkan tag/kode nomer 7 dan 8 adalah seperti ini:


9. Simpan Tempalate Anda.


Dari Meja Editor
Saya rasa cukup sekian untuk tutorial blogger kali ini yang membahas Komentar Slide Panel, mudah-mudahan dapat bermanfaat untuk teman-teman semua. Bila ada kesulitan dalam peenginstalan Komentar Slide Panel maka silahkan ajukan pertanyaan Anda dalam komentar.

Poskan Komentar Blogger Disqus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top