Admin kembali lagi untuk membagikan tutorial di blog ini. Tutorial kali ini adalah tentang bagimana cara mudah membuat halaman arsip seperti yang telah Admin terapkan di blog Admin sendiri.
Ilustrasi Arsip |
Halaman arsip diperlukan di blog agar pembaca setia blog dapat menemukan dengan mudah artikel yang telah dipublikasi di blog. Dengan adanya halaman arsip, pembaca juga dapat melihat semua tulisan artikel yang sudah ditulis oleh pemilik blog.
Langsung saja untuk langkah-langkah dalam membuat halaman arsip adalah sebagai berikut:
- Membuat halaman untuk menampilkan Arsip
- Membuat halaman baru di menu Pages/Halaman di tampilan menu blogger.
- Untuk membuat halaman baru, silahkan klik tombol New page. Setelah itu akan ditampilkan halaman baru yang masih kosong. Silahkan ketikan nama halaman yang akan digunakan dalam blog.
- Setelah selesai menuliskan nama halaman, klik Publish untuk mempublikasikan halaman baru yang telah dibuat. Jika berhasil, halaman baru yang telah dibuat akan tampil dalam daftar halaman seperti pada tampilan berikut.
- Dalam tampilan di atas, halaman yang telah kita buat masih kosong. Untuk melihat link/url halaman baru tersebut kita dapat melakukan hover pada daftar halaman baru dan melakukan klik pada menu View seperti berikut.
- Link/url tersebut nantinya akan kita gunakan untuk pembuatan menu horizontal halaman arsip. - Membuat menu horizontal untuk menampilkan menu Arsip
Untuk membuat menu horizontal, silahkan teman-teman membaca tulisan Admin sebelumnya pada link di bawah ini:
- Menaruh kode blog di halaman Arsip
Langkah terakhir adalah menaruh kode blogger untuk menampilkan halaman Arsip. Silahkan copy paste kode di bawah ini pada mode HTML halaman arsip yang telah dibuat seperti pada tampilan berikut:
- Berikut ini adalah kode nya. Silahkan copy & paste pada mode HTML halaman arsip yang telah dibuat.
<!-- <div id="bp_toc"> Sedang membuka arsip....</div> <script src="http://t4belajarblogger.googlecode.com/files/arsip-t4belajarblogger.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript"></script> --> <script type="text/javascript"> function LoadTheArchive(TotalFeed) { var PostTitles = new Array(); var PostURLs = new Array(); var PostYears = new Array(); var PostMonths = new Array(); var PostDays = new Array(); if("entry" in TotalFeed.feed) { var PostEntries=TotalFeed.feed.entry.length; for(var PostNum=0; PostNum<PostEntries ; PostNum++) { var ThisPost = TotalFeed.feed.entry[PostNum]; PostTitles.push(ThisPost.title.$t); PostYears.push(ThisPost.published.$t.substring(0,4)); PostMonths.push(ThisPost.published.$t.substring(5,7)); PostDays.push(ThisPost.published.$t.substring(8,10)); var ThisPostURL; for(var LinkNum=0; LinkNum < ThisPost.link.length; LinkNum++) { if(ThisPost.link[LinkNum].rel == "alternate") { ThisPostURL = ThisPost.link[LinkNum].href; break } } PostURLs.push(ThisPostURL); } } DisplaytheTOC(PostTitles,PostURLs,PostYears,PostMonths,PostDays); } function DisplaytheTOC(PostTitles,PostURLs,PostYears,PostMonths,PostDays) { var MonthNames=["January","February","March","April","May","June","July","August","September","October","November","December"]; var NumberOfEntries=PostTitles.length; var currentMonth = ""; var currentYear = ""; for(var EntryNum = 0; EntryNum < NumberOfEntries; EntryNum++) { NameOfMonth = MonthNames[parseInt(PostMonths[EntryNum],10)-1] if (currentMonth != NameOfMonth || currentYear != PostYears[EntryNum]) { currentMonth = NameOfMonth; currentYear = PostYears[EntryNum]; document.write("<div class='dateStyle'><br />" + currentMonth+" "+currentYear+" </div>"); } document.write('<a href ="'+PostURLs[EntryNum]+'"><div class=dayStyle>'+parseInt(PostDays[EntryNum],10)+": </div> "+PostTitles[EntryNum]+"</a><br />"); } } </script> <script src="http://w-eko.blogspot.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=LoadTheArchive" /> </script> <!--CUSTOMIZATION--> <style type="text/css"> .dateStyle { color:#000; font-weight:bold; font-size: 15px; font-family: Arial, sans-serif; margin: 0; } .dayStyle { color:#000; font-weight:bold; font-family: Arial, sans-serif; display: inline-block; } </style>
- Menaruh link halaman Arsip pada menu horizontal yang telah dibuat
Langkah terakhir adalah menaruh link/url halaman arsip yang telah dibuat pada menu horizontal seperti gambar berikut.
- Copy link/url halaman arsip yang telah dibuat.
- Tambahkan menu horizontal baru pada dengan melakukan klik pada + Add external link.
- Masukkan link/url halaman arsip yang telah dibuat pada menu horizontal baru.
- Jangan lupa centang pada checkbox menu horizontal halaman arsip yang telah dibuat untuk menampilkannya pada menu horizontal di blog.
- Lakukan pengurutan/order yang sesuai dari menu horizontal yang telah dibuat. Klik Save untuk menyelesaikannya.
Sekian tutorial yang dapat Admin bagikan, semoga dapat bermanfaat dan bisa diterapkan di blog teman-teman semua. Terimakasih.