Cara Membuat Kolom Scroll Pada Blog Archive

Masih berkaitan dengan artikel sebelumnya tentang Kolom Scroll Untuk Komentar, maka kali ini kita akan Membuat Kolom Scroll Pada Blog Archive. Sama halnya dengan komentar yang apabila memiliki lebih dari 50 komentar, akibatnya akan membuat blog panjang ke bawah, nah Blog Archive ini pun sama.

Sewaktu teman-teman memposting suatu artikel dan di-archive-kan secara Hierarki dan Judul Artikelnya ditampilkan, maka semua artikel yang ada di Blog Archive tersebut akan tampil memanjang ke bawah. Nah untuk membuatnya terlihat sedikit rapi agar tidak memanjang terlalu ke bawah, maka kita akan membuat Kolom Scrollnya.

lihat pict



Untuk membuatnya silahkan ikuti langkah-langkah di bawah ini:

1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Centang Expand Widget Templates,

3. Cari kode berikut <div id='ArchiveList'> atau ArchiveList


Note
: Untuk menemukan kode <div id='ArchiveList'> atau ArchiveList maka teman-teman harus memasang Blog Archive nya terlebih dahulu dengan cara, klik Design/Rancangan >> Page Element >> Add a Gadget >> Blog Archive >> Save. Jika teman-teman sudah memasang Blog Archive nya maka langsung saja mencari kodenya tadi.

4. Selanjutnya tambahkan kode yang berwarna merah seperti di bawah ini:


....

<div class='widget-content'>

<div style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 200px; background-color: #FFFFFF;">

<div id='ArchiveList'>

<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'/>
</div>
</b:includable>

...

5. Harap disesuaikan saja kodenya, karena tidak semua templates sama,

6. Untuk merubah tinggi kolom scrollnya, silahkan ganti pada kode
height: 200px,
7. Jika sudah klik Save templates dan lihat hasilnya.

Seperti itulah Cara Membuat Kolom Scroll Pada Blog Archive, semoga bisa bermanfaat untuk teman-teman semua dan selamat mencoba.

40 comments:

Elvin mengatakan...

yeaaaah !! siip dah !!,, nyedot ah,, biar blog ane tambah keren hehehe :)

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
2012 mengatakan...

Waw.... mantabb
tapi sayang.. blog ane gx ada archive nya...
tapi thanks.... udah share ilmunya....
Keep up buat mas angga ;)

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
etam grecek mengatakan...

thanks ya kang atas info tutornya ini....aku jg belum masang nh....

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
nuu mengatakan...

wah,sip...
mau cek dulu ahh...
nice info...

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
tomo mengatakan...

pagi gan.
Tengkyu tutornya.
Btw aku lebih suka Yg default saja gan.gak neko2

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
Asis Sugianto mengatakan...

Wah kalo yang ini sob saya udah posting juga, cara membuat scrollbar pada widget arsip blog, cuman caranya aja yang bedah sob,,, tapi saya dapat ilmu baru lagi dari sobat,,,,,

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
Warna Tulisan mengatakan...

mantabs tips dan memang terkesan rapi, salam

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
Indahnya Kebersamaan mengatakan...

Owh gini to caranya, ok ni yang aku cari maklum punya teman Q arsipnya panjang bangets jadi makan tempat

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
Muhammad Chandra mengatakan...

mantab bung, . . .
kalau saya melihat lihat artikel yang anda punya, sepertinya anda posting agar anda ingat ama semua apa yang telah anda lakukan. .( kalau saya seperti itu)

Batch file programming | Keajaiban Om Google |Tips dan Trick Komputer | Free Software

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
Ferdinand mengatakan...

Pagi Sobat...

wah tutor baru lagi nie... kayanya emank udah di praktekin sendiri nie.....terbukti semua bagian blog ini ada Scrollnya.... bagun nie buat hemat tempat.....

thnx 4 share Sob...happy blogging!!

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
Pakies SM mengatakan...

>kangen berkunjung ke rumah sahabat yang ahli tutorial. ane banyak belajar dari rumah ente sob

>Link ane tempel + follow, tempel balik ya Sob

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
ELANG ANTARNUSA mengatakan...

OK sob tipsnya. dapat memperhemat lahan halaman blog y sob

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
ndolem mengatakan...

punyaku ga ada archive nya sob, nanti di coba trmksh

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
hanumuslem mengatakan...

wah.. terimakasih ni tipsnya.. tapi punya saya sudah satu paket sama tab view.. jadinya udah ke scroll...
nice info...

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
Halaman Samping-nya Inung Gunarba mengatakan...

(lagi-lagi) makasih sobat Angga yang (lagi-lagi) bermurah hati berbagi ilmunya :D

Menghemat tempat dan makin rapi bro :D langsung aku bookmark nih, Bravo!

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
Anggasona mengatakan...

@ all: trims untuk semua komennya, maap ga bs bls atu2, lagi lemot soal e :D slmt mencoba semua tutorial di sini, n happy blogging :))

oempak mengatakan...

asiiiik.. pake scroll biar hemat tempat

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
deny mengatakan...

cocok banget buat ngirit halaman,wah seneng banget kesini,infonya sangat luar biasa

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
mixedfresh mengatakan...

Benar banget sob bisa hemat banyak tempat tuh pakai scrool. Btw aku request donk sob cara bikin link teman yang ga terbuka di halaman home gitu (buka halaman baru gitu)

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
om rame mengatakan...

setuju sob, dengan scroLL akan menghamat tempat juga memudahkan pengunjung untuk tau isi dari menu tersebut.
terima kasih atas sharenya.

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
mixedfresh mengatakan...

Mampir lagi nih sob, bukan yg tadi sob. Tapi itu loh msl cr bikin "link Teman" yg daftar linknya tidak ada di home.

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
Karlz mengatakan...

q juga udah pake ini nich sob..
nice tutor ^^

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
zen-zen mengatakan...

Nyoba kok ga bisa.
Kodenya ga ada...

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
Ferdinand mengatakan...

Siank Sobat... koQ belum nongol Sob??? gy banyak kerjaabn toh???

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
Anggasona mengatakan...

@ all: makasie sob, smg bermanfaat ya :)

@ mixedfresh: ok sob, ntr ditunggu aj y, sy carikan dl caranya ;)
@ zenzen: sblm cari kodenya dipasang dl blog archivenya, trs baru di edit HTML codenya, jgn lupa dicentang expand templates widget, kl ga dipasang dl blog archivenya, kode nya ga bakal ktmu sob :)
@ ferdinand: maap sob, td sy masih ada kejaan di kampus, jdnya br s4 ngeblog skrg ;)

defchania mengatakan...

terima kasih slalu brbagi sob

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
Muhammad Yandri mengatakan...

lama gak berkunjung and comment sob, coz ada kerjaan. pokoknya partamax infonya.

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
Yohan Wibisono mengatakan...

"Nice artikel, inspiring ditunggu artikel - artikel selanjutnya, sukses selalu, Tuhan memberkati anda, Trim's :)"

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
elhaq mengatakan...

bl0g-ku jadi lebih rapi, thx mas....
ditunggu tips&trick simple lainnya.........

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
procms mengatakan...

wah.. artikelnya mantab bangetzz....
ijin sedot gan....

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
kampung online mengatakan...

Yang otomatis ada gak???
lagi butuh...

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
ubinkayu mengatakan...

Wah komentarnya juga dibuat Scroolling, Nice info gan, Mantab

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
Chazz Leonheart mengatakan...

di blog q kok gk ada
< div id='ArchiveList'>
??

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
pri crimbun mengatakan...

mantap... makasih gan

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
BUTUT mengatakan...

sori...
wa nyoba cara diatas tp kena kendala seperti ini

Kami tidak dapat menyimpan template Anda.
Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The element type "div" must be terminated by the matching end-tag "

Mohon pencerahannya...

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
ALBENIZ IBENZ mengatakan...

maaf gan, ane udah test di html, tapi napa gak cocok ya gan?

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
ahmad maryuki mengatakan...

wah gan. Kalau scrol mah biasa ah. lo yang diberi icon gimana gan? yang ada cuma labelnya bukan pada archive. ane dah muter2 gak nemu.

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
SMASH - I Heart You mengatakan...

SMASH - I heart You - Free download Mp3 SMASH - I heart You

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
BOCAH DOKO mengatakan...

siiiipppppp (y)

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona
VIAN mengatakan...

makasi ilmunya mas brooo mudah mudahan dapat berguna nihhh...dah aku coba mantab...
main gan ke rumah ane
http://gratis-software-computer.blogspot.com/

Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Anggasona

Poskan Komentar

Sebelum berkomentar, harap artikelnya dibaca dulu agar komentarnya nyambung dengan Topik, komentar yang tidak relevan dengan artikel akan dihapus !

Dan jangan menaruh link (Nyepam) di sini... Trims...

[Buku Tamu ada di halaman Home Page]

[ Form Komentar Klasik ]

 
Back To Top