Membuat efek scroll pada blog sangat membantu untuk merapikan widget blog yang tampilannya terlalu tinggi ataupun terlalu lebar sehingga tampilan blog lebih rapi dan teratur. Pada pembahasan kali ini akan dijelaskan cara membuat efek scroll langsung dalam postingan secara langsung, membuatefek scroll pada widget label, membuat efek scroll pada widget lain.

Membuat efek scroll langsung dalam postingan, caranya sebagai berikut:

1. Pada saat menulis artikel untuk bahan postingan blog, bagian kiri atas terdapat pilihan Compose dan HTML, pilih HTML.
2. Setelah itu copy kode berikut ini di antara text yang ingin di buatkan efek scroll.
   <div style='height:250px;width:auto;overflow:auto;'>
   Ini adalah contoh teks yang diberikan efek scroll. Blog ini membahas tutorial blog, tutorial photoshop, jasa pembuatan blog, jasa edit blog, jasa ganti domain dengan harga murah . silahkan cek di sini.
   </div>
   
   • Ganti tulisan warna merah dengan tinggi efek scroll yang anda inginkan
   • Ganti warna hijau dengan lebar efek scroll yang anda inginkan. Biarkan auto jika anda ingin lebarnya menyesuaikan sendiri.
   • Tambahkan kode css jika anda ingin menambahkan efek seperti border, padding, box shadow dan lain-lain.
   Berikut ini hasilnya:
   
   Ini adalah contoh teks yang diberikan efek scroll. Blog ini membahas tutorial blog, tutorial photoshop, jasa pembuatan blog, jasa edit blog, jasa ganti domain dengan harga murah . silahkan cek di sini.

Membuat efek scroll pada arsip blog

1. Langkah pertama, masuk ke template > edit HTML
2. Ctrl + F, kemudian cari kode
   <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
   scroll sedikit ke bawah dan cari kode di bawah ini
   <div class='widget-content'>
3. Copy kode di bawah ini tepat di bawah kode <div class='widget-content'>
   <div style='height:250px;width:auto;overflow:auto;'>
4. Sroll lagi kebawah dan cari kode <b:include name='quickedit'/>, kemudian tambahkan kode </div> tepat diatasnya, sehingga susunannya menjadi seperti di bawah ini
   

       <div class='widget-content'>
       <div style='  height:250px;width:auto;overflow:auto;'>    <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
       <b:if cond='data:style == &quot;HIERARCHY&quot;'>
       <b:include data='data' name='interval'/>
       </b:if>
       <b:if cond='data:style == &quot;FLAT&quot;'>
       <b:include data='data' name='flat'/>
       </b:if>
       <b:if cond='data:style == &quot;MENU&quot;'>
       <b:include data='data' name='menu'/>
       </b:if>
       </div>
       </div></div>
       <b:include name='quickedit'/>
   

   Yang berwarna merah adalah kode tambahan untuk membuat efek scroll

Membuat efek scroll pada label blog

1. Masuk pada edit HTML dan cari kode <b:if cond='data:display == &quot;list&quot;'>, kemudian copy kode <div style='height:250px;width:auto;overflow:auto;'> tepat di atasnya.
2. Setelah itu, scroll ke bawah dan cari kode <b:include name='quickedit'/> dan tambahkan kode penutup </div>
3. sehingga kodenya seperti di bawah ini
   

   <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
   <div style='height:250px;width:auto;overflow:auto;'>
       <b:if cond='data:display == &quot;list&quot;'>
         <ul>
         <b:loop values='data:labels' var='label'>
           <li>
             <b:if cond='data:blog.url == data:label.url'>
               <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
             <b:else/>
               <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
             </b:if>
             <b:if cond='data:showFreqNumbers'>
               <span dir='ltr'>(<data:label.count/>)</span>
             </b:if>
           </li>
         </b:loop>
         </ul>
       <b:else/>
         <b:loop values='data:labels' var='label'>
           <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
             <b:if cond='data:blog.url == data:label.url'>
               <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
             <b:else/>
               <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
             </b:if>
             <b:if cond='data:showFreqNumbers'>
               <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
             </b:if>
           </span>
         </b:loop>
       </b:if></div>
       <b:include name='quickedit'/>

4. Selesai

 Menambahkan efek scroll pada widget yang lain pada blog

Caranya sama saja, intinya tambahkan kode <div style='height:250px;width:auto;overflow:auto;'>

diantara kode penyusun widgetnya. Kode di atas adalah untuk membuat efek scroll horisontal, lantas bagaimana jika ingin membuat efek scroll vertikal. Langkah-langkahnya sama saja, hanya saja kode yang digunakan adalah

 <div style="height: 100px; overflow-x: scroll; overflow-y: hidden; width: 200px;"> 
<div style="width: 250px;">
contoh text
 </div> 
</div>
 

contoh text yang menggunakan text efek scroll secara vertikal, ini adalah blog yusran dante tentang tutorial blog. nama saya adalah muhammad yusran dan tinggal di makassar. contoh text yang menggunakan text efek scroll secara vertikal, ini adalah blog yusran dante tentang tutorial blog. nama saya adalah muhammad yusran dan tinggal di makassar contoh text yang menggunakan text efek scroll secara vertikal, ini adalah blog yusran dante tentang tutorial blog. nama saya adalah muhammad yusran dan tinggal di makassar contoh text yang menggunakan text efek scroll secara vertikal, ini adalah blog yusran dante tentang tutorial blog. nama saya adalah muhammad yusran dan tinggal di makassar

sekian, let's practice. blogging.