Cukup Tambahkan (+) 1 Baris Kode HTML Ini, Tampilan Widget Post Blog Mu Jadi Berscroll, SEO dan Cantik.
I. Pendahuluan.
Perhatikan Gambar dibawah ini. Ya, itu adalah tampilan berscroll dari widget postingan, seperti widget 'popular post', 'related post', 'artikel lainnya:', 'artikel unggulan' dan sebagainya. Terlihat cantik bukan. Seperti pada tampilan di Blog SCT ini. Anda hanya butuh sebaris kode HTML untuk membuat tampilan seperti tersebut.
 |
| Screenshoot tampilan Popular Post dengan tipe Scroll |
II. Keuntungan Tampilan Widget Post Berscroll.
Namun sebelum masuk kepembahasan dan penambahan kode HTML tersebut, Blog SCT akan berbagi beberapa keuntungan jika menggunakan Widget Berscroll dan kenapa harus pakai tipe yang berscroll. Adapun keuntungan menggunakan Widget bertipe Scroll yaitu :
1. Tampilan situs Blog Mu Lebih Cantik.
2. Memudahkan navigasi bagi Pembaca untuk men-scroll judul-judul artikel di situs Blog Anda.
3. Anda bisa dengan leluasa menampilkan banyak judul Artikel tanpa khawatir memakan ruangan di situs Blogspot Anda.
Itulah beberapa keutungan menggunakan Widget Post tipe Ber-Scroll. Selanjutnya Blog SCT akan memandu Anda menambahkan kode HTML tersebut ke dalam Blog. Simak di bawah ini.
III. Menambahkan Kode HTML Ber-Scroll di Blog.
Berikut panduan untuk membuat tampilan Widget Postingan Ber-Scroll di Blog, yaitu :
- 1. Langkah pertama silahkan login ke akun Blogspot Anda.
- 2. Masuk ke Dashboard Blog Anda.
- 3. Pilih Template. Sebaiknya Anda backup/cadangkan dulu template/thema Blog Anda sebelum di Edit. Tujuannya, jika Anda salah dalam mengedit nanti, Thema Blog Anda masih bisa dipulihkan dari cadangan backup tadi.
- 4. Jika sudah di backup, selanjutnya Pilih dan Klik Edit HTML.
- 5. Muncul Jendela Edit HTML.
- 6. Cari kode seperti ini :
<b:widget id='PopularPosts2' locked='false' title='Entri Populer' type='PopularPosts'>
* Catatan : 'PopularPost2' , 'entri populer' , 'Popularposts' tersebut bisa juga memiliki nama id, title atau type yang berbeda. Tergantung dari jenis Widget yang Anda edit. Kalau Widget Artikel Lainnya yang Anda edit, maka bisa jadi id, title atau type nya akan menampilkan : 'popularpost1' , 'artikel lainnya' , 'artikel populer'. Yang terpeting adalah bahwa sebaris tulisan kode HTML tersebut menampilkan <b:widget id='......................dst.....................> .
- 7. Ketemu ? Jika sudah ketemu, cari di bawahnya kode ini :
<div class='widget-content popular-posts'>
- 8. Sudah ditemukan ? Jika sudah ditemukan, Copy/salin kode di bawah ini dan letakkan atau paste-kan tepat dibawah kode tersebut di atas.
Untuk lebih jelas lihat gambar di bawah ini.<div style='overflow:auto; width:ancho; height:500px;'> .....<<<.....(copy kode ini)
 |
| menambahkan kode HTML untuk membuat Widget Post berscroll |
**height:500px = Ganti nilai tersebut sesuai selera Anda untuk merubah ukuran tinggi layar scroll Widget postingan tersebut.
- 9. Selanjutnya salin/copy kode dibawah ini dan tempatkan tidak jauh di bawah kode HTML scroll tadi. Untuk lebih jelasnya lihat seperti pada petunjuk gambar di bawah ini.
</div> .......<<<.....(copy kode ini)
 |
| Tempatkan kode </div> seperti pada gambar diatas. |
- 10. Langkah berikutnya jangan lupa simpan template yang sudah Anda edit tadi.
- 11. Silahkan buka situs Blog Anda di tab baru. Perhatikan perubahannya. Jika sudah benar Anda menempatkan kode HTML nya, maka jenis widget postingan yang Anda edit tadi akan berubah tampilannya menjadi berscroll.
Demikian tutorial Cukup +1 Baris HTML Ini, Widget Postingan Blog Mu Tampil Cantik dan SEO. Dan.....
Artikel Terkait Lainnya : >> Lihat Disini <<
.....Selamat Mencoba. Jika di dalam tutorial Blog SCT ini ada yang tidak "work" atau "miss", dimohonkan kepada Anda untuk mengingatkan Kami dan silahkan tulis atau ajukan saran/pertanyaan di kolom komentar. Jika Anda punya referensi lain yang lebih akurat dari tutorial ini, mohon sekiranya bisa tinggalkan alamat url tersebut di kolom komentar agar bisa menjadi bahan referensi untuk Kami dan untuk kesempurnaan Turorial-tutorial yang ada. Semoga Bermanfaat and Have a nice day all.
