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

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