Cara Membuat Blog Archive dengan Scroll

Mr. VJa
2 minute read
Tujuannya selain meminimalisir halaman blog, juga memberikan kenyamanan pada pengunjung untuk melihat penataan blog dengan rapi.
Jadi jika anda memiliki daftar isi blog, atau posting yang terlalu banyak dan memanjang ke bawah, tidak ada salahnya memasang scrolling.
A. Cara Memasang Widget Arsip Blog
  1. Login dengan akun blog anda
  2. Pilih menu Tata Letak, kemudian klik Tambah Gadget atau Add Gadget
  3. Kemudian cari widget Archive Blog, lalu klik
  4. Setelah itu akan muncul menu pengaturan untuk tampilan widgetnya, saudara bisa merubahnya sesuai selera anda.
  5. klik Simpan
Setelah anda memasang widget Archive Blognya, saudara tinggal mengikuti langkah-langkah berikut untuk memberikan Srolling pada widget Archive Blognya:
B. Memasang Scroll Pada Arsip Blog
  1. Pastikan anda telah login
  2. Masuk ke menu Template Blog, lalu klik tombol Edit HTML
  3. Cari kode <div id='ArchiveList'>
  4. Klik pointer pada kolom edit HTML, kemudian tekan Ctrl+F atau F3 untuk mempemudah pencarian kode <div id='ArchiveList'>
  5. Jika sudah ketemu, Simpan kode di bawah ini tepat di atas kode <div id='ArchiveList'>
 <div style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 200px; background-color: #FFFFFF;">
  • Jangan lupa berikan tag penutup </div> seperti contoh yang berwarna merah di atas
  • Klik simpan template
Keterangan Kode Berwarna Merah di Atas:
  1. Kode height adalah kode yang menentukan tingginya scrolling pada blog arsip.
  2. #FFFFFF adalah warna background,anda bisa mengubahnya sesuai ke inginan anda. Lihat di sini " Kode Warna HTML Lengkap"
Jika anda melakukan langkah-langkah di atas dengan benar, maka hasilnya kurang lebih akan seperti ini:

Cara Memasang Kolom Scroll Pada Postingan Blog

  1. Pastikan anda telah login
  2. Masuk ke menu Post
  3. Simpan kode di bawah :


<div style="border: 1px solid #000000; height: 700px; overflow: auto; padding: 10px; width: 700px;">Masukkan Tulisan atau teks sobat disini</div>

Keterangan !!!!

100px : untuk mengatur tinggi kolom scroll

400px : kode untuk mengatur lebar kolom scroll

Masukkan Tulisan atau teks sobat disini : silahkan anda ganti dengan teks atau tulisan yang anda inginkan.

Posting Komentar

0Komentar
Posting Komentar (0)