Blog Konsultasi (7) Tentang Scroll

Bila kita membahas tentang scroll sebenarnya akan banyak sekali berkembang seiring permasalahan nyata. Bukan sekedar menambah scroll untuk script yang lewat penambahan gadget html, namun beberapa blogger ingin scroll melengkapi widget bawaan blogger yang berarti mereka tak bisa mengeditnya lewat elemen halaman

Masalah yang sedikit berhubungan adalah tentang kode verifikasiyang hanya separuh, beberapa blogger tentu tak menyadari sedangkan penggemar mereka kesulitan untuk komen. Salah satu solusi adalah dengan menambahkan scroll. Blog konsultasi datang pagi ini, dan semoga mencerahkan dengan semua hal tentang scroll.

Mengapa Kita Membutuhkan Scroll
Beberapa widget bisa jadi sangat panjang dan akan menghabiskan tempat. Tidak enak di mata dan terkesan sidebar boros namun disisi lain widget akan sangat berguna seperti archives. Nah, inilah fungsi scroll, mempersempit ruang namun tak menghilangkan konten.

Yang Berlebihan Selalu Tidak Baik
Satu pesan saya, jangan terlalu banyak scroll pada template Anda atau orang akan merasa terganggu jika melihat blog Anda. Gunakan saja secukupnya.

Bagaimana Membuat Widget Dengan Scroll
Cara ini digunakan untuk memberi scroll pada teks atau html kode. Nah, caranya mudah sekali. Silahkan gunakan script seperti ini:

    <div style="overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">
    Tambahkan teks atau script disini
    </div>

yang berwarna merah adalah pengaturan lebar dan tinggi widget Anda. Dan masukkan teks atau script Anda pada yang bercetak tebal.

Menambahkan Scroll Pada Widget Bawaan Blogger
Kasus lain, ketika Anda ingin menambahkan scroll pada widget bawan blogger seperti archives. Tentu saja ketika Anda ke elemen halaman da klik edit, maka akan muncul pengaturan otomatis dan bukan script. Bagaimana Anda mencari scriptnya dan menambah scroll?

- Masuk ke tata letak, pilih Edit HTML.
- Jangan lupa centang Expand Widget Templates
- Cari kode widget yang Anda inginkan
(cara mencari yang paling mudah adalah dengan ctrl+f lalu masukkan judul gadget di kotak pencari (di bagian bawah untuk firefox dan di atas untuk google chrome). Jika sudah ketemu perhatikan contoh pemasangan script untuk gadget recent posts advanced berikut ini:

<b:widget id='Gadget1' locked='false' title='Recent Posts' type='Gadget'>
<b:includable id='main'> 
  <!-- only display title if it's non-empty -->
  <b:if cond='data:renderingUrl != &quot;&quot;'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2 class='title'><data:title/></h2>
    </b:if>
<div style='border: 0px solid #F5003D; overflow: auto; width: 310px; height: 100px; text-align: left;'>
    <b:if cond='data:gadgetSnippet != &quot;&quot;'>
       <data:gadgetSnippet/>
    <b:else/>
      <div class='widget-content'>
   ...............................................................

..................................................................
      </div>
    </b:if>
</div>
  <b:else/>
    <data:errorMessage/>
  </b:if>
  <b:include name='quickedit'/>
...............................................

yang berwarna merah adalah tambahan kode scroll yang harus Anda tambahkan, dan yang berwarna hitam adalah rambu-rambu bagaimana Anda menambahkan. Perhatikan benar posisinya.

Menambahkan Scroll Pada Setiap Postingan
Bagi Anda yang tak ingin setelah readmore artikel tetep terlihat pendek sehingga tidak memnajang ke bawah, tambahkan saja kode scroll pada setiap postingan Anda secara otomatis. Mudah saja untuk cara ini, tinggal Anda tambahkan kode css seperti di bawah ini.

.post {
height:200px;
overflow:auto;
}

Jika Ingin Hanya Pada Postingan Tertentu
Untuk kasus ini sebenarnya bisa dilakukan dengan cara pertama yaitu penambahan scroll pada text atau html code. Namun akan lebih mudah jika Anda membuat atributnya dengan css dan Anda bisa memanggilnya kapan saja dengan mudah.
 
Masukkan kode dibawah ini di atas ]]></b:skin>

.scrollpost {
height:100px;
width:400px;
overflow:auto;
}

Nah, ketika Anda menulis sebuah postingan awali postingan dengan model penulisan seperti berikut ini.

<div class="scrollpost">

Tulis postingan Anda disini

</div>

Kode tersebut bisa diletakkan ditengah postingan tergantung bagian postingan mana (misal paragraf kedua, berarti gunkan kode tersebut untuk apit paragraf kedua) yang akan di beri scroll.

Permasalahan Scroll Pada Kode Verifikasi Komentar
Untuk permasalahan satu ini sangat mudah membenarkannya.
- Login blogger
- Tata Letak
- Edit HTML
- Centang Expand templates widget
- Cari kode berikut  <div class='comment-form'>
- Nah rubah kode scroll dari 'no' menjadi 'yes' perhatikan script lengkap di bawah ini

<div class='comment-form'>
    <a name='comment-form'/>
    <h4 id='comment-post-message'><data:postCommentMsg/></h4>
    <p><data:blogCommentMessage/></p>
    <data:blogTeamBlogMessage/>
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
    <iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='yes' src='' width='100%'/>
    <data:post.iframeColorizer/>
  </div>

Jika Anda tidak menemukan, Beberapa template bukan menggunakan kode comment-form namun menggunakan kode comment-editor
Alternatif lain untuk memperbaiki kotak komentar dengan verifikasi error adalah dengan menambah tinggi form, menghilangkan verifikasi atau membuat isian komen pada jendela baru. Baca di: Cek Form Komentar Sebelum Jauh.

Semoga bermanfaat dan memberi pencerahan...