Cara Buat Scroll Komentar Keren Pada Blog

Ada yang bertanya tentang tips yang satu ini yaitu Buat Scroll Komentar Blog, walau tidak sesuai judul pertanyaan yang diberikan kepada Saya tapi Saya pikir maksudnya adalah 3 Cara Buat Scroll Komentar Keren Pada Blog yang akan Saya bagikan kali inim udah-mudahan gak salah ambil kesimpulan :D akhirnya Saya putuskan untuk memposting artikel seputar Rancangan Web Log ini.

Banyak diantara teman-teman sekalian yang Saya lihat design komentarnya ok punya dan untuk tutorial blog yang satu ini pastinya tidaklah asing bagi mereka cacatan yang memang sudah tau.. tapi kalo yang belum pasti ini sangat membantu. Tujuan dari tutorial ini dibuat selain mempercantik tampilan blog Anda dari segi kotak komentar, ini juga dapat membantu menghemat ruang halaman blog Anda, 10, 100, 1000 dan seterusnya bayangkan jika komentar blog Anda mencapai tahap maksimal pastinya memerlukan banyak tempat bukan begitu? Tutorial ini tepat untuk Anda yang memang tujuan utamanya adalah untuk design dan menghemat ruangan blog Anda dari komentar pengunjung Anda.
OK langsung saja ya? sedang kurang enak untuk panjang lebar lagi ini. Soal design yang satu ini memiliki beberapa cara, Saya akan coba Tiga Cara saja.., langsung saja lihat langkah-langkahnya dibawah ini.

3 Cara Buat Scroll Komentar Keren Pada Blog

Fungskikan Halaman Yand di Gunakan Semenarik Mungkin Dan Hemat Tempat Blog Anda

Cara Pertama.

1. Login blogger.com atau draft.blogger.com2. Pilih icong "Go to post list"3. Template ->> Backup template ->> Edit HTML ->> Processed4. Centang "Expand Template Widget" sebelum melakukan pengeditan5. Tekan Ctrl+F untuk mencari kode berikut, kode Dofollow milik Saya

#comments h4 { margin:1em 0; font-weight: bold; line-height: 1.4em; letter-spacing:.1em; color: $sidebarcolor;}

#comments-block { margin:1em 0 1.5em; line-height:1.6em;}
#comments-block .comment-author { margin:.5em 0; }

6. Ingat.. Fokus! Tambahkan kode berikut tepat diatas kode #comments h4

#comments {
height:200px;
overflow:auto;

}

Hasilnya akan seperti pada kode dibawah ini.

#comments {
height:200px;
overflow:auto;

}

#comments h4 { margin:1em 0; font-weight: bold; line-height: 1.4em; letter-spacing:.1em; color: $sidebarcolor;}

#comments-block { margin:1em 0 1.5em; line-height:1.6em;}
#comments-block .comment-author { margin:.5em 0; }

Perhatikan: Kode yang berwarna biru bisa Anda rubah itu untuk mengatur tinggi scroll kotak komentar yang Anda diingikan sesuai kebutuhan, dan yang berwarna merah itu adalah kunci kode agar fungsi scroll berfungsi.

8. Simpan template.
Karena fungsi kode diatas itu tidak selalu sama dengan template blog Anda, jika masih gagal atau bingung dengan kode Saya diatas ada cara kedua yang cukup mudah kok untuk diikuti lihat sebagai berikut.

Cara Kedua

1. Tekan Ctrl+F untuk mencari kode Kedua sebagi berikut

<dl id='comments-block'>

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
      <b:loop values='data:post.backlinks' var='backlink'>
        <div class='collapsed-backlink backlink-control'>
          <dt class='comment-title'>
            <span class='backlink-toggle-zippy'> </span>
            <a expr:href='data:backlink.url'><data:backlink.title/></a>

2. Fokuskan pandangan Anda pada kode yang berwarna biru karena itu kuncinya, lalu letakkan kode berikut tepat diatas kode warna biru diatas <div style='overflow:auto; width:ancho; height:300px;'>
3. Tambahkan kode penutup tag DIV yaitu </div> sebelum atau sesudah kode penutup tag DL yaitu </dl>, dicari ya kode DL-Nya.. harus ketemu, biasanya didapat 1-15 baris kode.
4. Jika sudah alangkah baiknya pratinjau terlebih dahulu sebelum disimpan jika tidak ada error berarti berhasil lalu simpan.
Nah untuk tips yang Ketiga ala ZERO punya nih! Simple dah pokoknya, hampir mirip seperti cara Kedua, tapi tips Ketiga ini berlaku jika kode template kita sama ya..?? :) intinya pilihlah yang membuat Sahabat sekalian merasa mudah untuk diimplementasikan.

Cara Ketiga

Cari kode <dl expr:class='data:post.avatarIndentClass' id='comments-block'> tambahkan kode ini <div style='border: 1px solid rgb(230, 230, 230); padding: 10px; overflow: auto; width: auto; height: 400px;'> tepat diatas kode berwarna biru.

Jangan lupa tambahkan kode penutup tag untuk DIV yaitu </div> letakkan sesudah kode </dl>

Selesai sudah tinggal pilih dan selamat mencoba jika berhasil selamat jika belum jangan ragu untuk bertanya, malu bertanya ya gagal terus.. :D Salam.

Anda baru saja membaca artikel tentang - Cara Buat Scroll Komentar Keren Pada Blog. Silahkan baca artikel berikutnya Tentang - - Jangan lupa g+1 / fb / twit :)