Membuat Kotak Scroll pada Postingan di WordPress


Saya sering mengarsip artikel mengenai tips blog dalam mempercantik tampilan di blog . Hal yang paling sering saya lakukan dilakukan adalah melakukan editing di bagian template blog itu sendiri. Nah bagian dari artikel yang kemungkinan sering keluar adalah mengenai script/kode yang akan dimasukkan/ditambahkan ke dalam template blog itu sendiri.

Contoh Script/Kode :

<b:if cond=’data:blog.pageType == &quot;item&quot;’>

<H2>Artikel Terkait:</H2>

<DIV class=’rbbox’>

<DIV style=’margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;’>

<DIV id=’albri’/>

<SCRIPT type=’text/javascript’>

Script ini masih bisa lebih panjang lagi😦. Nah tentu hal ini akan sangat mengganggu para pembaca👿 karena harus melakukan scroll ke bawah yang cukup panjang. Kita bisa menyingkat kode tadi dengan meletakkannya ke dalam kotak scroll seperti berikut ini :

<b:if cond=’data:blog.pageType == &quot;item&quot;’>

<H2>Artikel Terkait:</H2>

<DIV class=’rbbox’>

<DIV style=’margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;’>

<DIV id=’albri’/>

<SCRIPT type=’text/javascript’>

 Pasti akan terlihat singkat kan🙂.Nah bagaimanakah cara membuat kotak scroll itu ?

Langkah untuk membuat kotak scroll di wordpress adalah sebagai berikut :

  1. Masuk ke akun worpdress – buat postingan baru – masuk di bagian editing html
    (editing html tombol di sebelah visual)
  2. Gunakan kode berikut ini : </div style=”overflow: scroll; width: 400px; height: 200px;”/>Isi teks di dalam postingan</div>
  3. Hilangkan “/” yang berwarna merah
  4. Selamat mencoba dan semoga berhasil🙂

6 Comments Add yours

  1. Mr.R4w4 says:

    Mantap Boss

    1. Hanggar PS says:

      hatur nuwun atas mantabnya bossss

  2. Imam says:

    jadi kalw mau buat untuk paragraf selanjutnya gimana???

    1. Hanggar PS says:

      dengan dienter tidak bisakah mas ?

  3. asweety16 says:

    thanks ya gan..

    1. Hanggar PS says:

      sama sama gan, moga bermanfaat banyak

Komentar adalah wujud apreasiasi atas artikel saya ^_^

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s