Cara Menciptakan Sitemap (Daftar Isi) Di Blog Versi Lengkap

Apa itu sitemap? Sitemap bila diterjemahkan ke dalam Bahasa Indonesia berarti Peta Situs, yakni kumpulan link atau tautan yang mengarah ke postingan-postingan blog. Singkatnya sitemap merupakan daftar isi yang memuat semua konten (postingan) dalam sebuah blog.

Sitemap mempunyai fungsi yang cukup penting dalam sebuah blog, yaitu untuk memudahkan pengunjung dalam mencari konten yang ingin dibaca. Dalam hal ini sitemap juga berperan sebagai alat navigasi yang mengarahkan pengunjung untuk menemukan artikel yang mereka cari dengan lebih cepat. Selain itu sitemap juga memudahkan pengunjung untuk mencari artikel yang berkaitan dengan artikel yang sedang beliau baca alasannya biasanya konten di dalam sitemap sudah dikelompokkan menurut kategori atau label masing-masing konten.

Pada Blogger sendiri bergotong-royong sudah disediakan widget Archive yang memuat arsip seluruh artikel blog menurut waktu publish. Namun alasannya dikemas dalam bentuk widget, kustomisasinya sangat terbatas, estetika tata letaknya pun sulit untuk diatur.

Oleh alasannya itu, pada artikel kali ini blog Teknomia akan mengembangkan tutorial perihal bagaimana cara menciptakan sebuah halaman khusus sitemap (daftar isi) blog yang gampang dikustomisasi baik tampilan maupun fungsinya.

Beberapa kelebihan sitemap yang akan kita buat :

• Responsif ketika dibuka pada perangkat mobile
• Update otomatis
• Tampilan simpel, keren, dan sederhana
• Ringan, tidak memberatkan loading blog
• Fast Loading, cepat
• Artikel dikelompokkan per kategori atau label
• 100% SEO friendly
• Valid HTML 5
• Valid CSS
• Tanda khusus pada artikel paling baru

Cara Membuat Halaman Daftar Isi Blog

Untuk menciptakan sebuah halaman khusus untuk sitemap (daftar isi) sanggup dilakukan dengan memanfaatkan Pages Blogger. Pages ini merupakan halaman yang berjenis halaman statis, yaitu halaman yang tidak secara pribadi ditampilkan menyerupai halaman posting. Pada URL halaman statis juga tidak terdapat info waktu kapan halaman tersebut di-publish.

Berikut yakni tutorial menciptakan halaman khusus untuk sitemap blog.

1. Pada Dashboard Blogger, pilih Pages, lalu pilih New Page untuk menciptakan halaman baru.
   
   
   
   
   
2. Isikan judul halaman pada kolom Judul, pada kasus ini saya cukup memakai judul Sitemap. Kemudian masukkan script sitemap pada Post Editor. Jangan lupa untuk mengubah mode Post Editor menjadi HTML, bukan Compose. Jika sudah klik Publish untuk merilis halaman.
   
   
   
   
   Script sitemap dengan banyak sekali versi desain, tampilan, dan fungsi sanggup Anda temukan di bab bawah artikel ini.
   
   
3. Anda sanggup melihat halaman sitemap blog yang gres saja Anda buat dengan menentukan View.
   
   
   
   
   

Demikian tutorial menciptakan halaman sitemap blog memakai Pages Blogger.

Sekarang saatnya menentukan script sitemap yang ingin Anda terapkan pada blog Anda. Pilih salah satu versi sitemap di bawah ini.

Sitemap (Daftar Isi) Sederhana Abu Farhan

Script sitemap yang pertama yakni buatan seorang Blogger berjulukan Abu Farhan. Sitemap ini mempunyai desain yang simpel. Karena desainnya yang sangat sederhana dan ringan, waktu load sitemap ini pun sangat cepat.

Sebenarnya di bab simpulan sitemap ini terdapat credit berupa link menuju website Abu Farhan. Namun alasannya website tersebut sudah tidak aktif, maka creditnya saya hilangkan.

Script Sitemap (Daftar Isi) Sederhana Abu Farhan

<script style="text/j4vascript" src="https://cdn.rawgit.com/teknomia/sitemap/eded6943/sitemap-sederhana.js"></script>

<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

DEMO

Sitemap BlogToC Beautiful Beta, Blogger Plugins, Arlina Design

BlogToc merupakan abreviasi dari Blog Table of Contents yang bila diterjemahkan ke dalam Bahasa Indonesia berarti Daftar Isi Blog. Script BlogToc pertama kali dirilis oleh blog Beautiful Beta pada tahun 2007. Kemudian dimodifikasi oleh Aneesh dari situs Blogger Plugins pada tahun 2011.

Oleh blog Arlina Design, BlogToC versi Blogger Plugins dipopulerkan dengan memodifikasi desain tampilannya.

Beberapa fitur embel-embel pada BlogToC :

• Sortir judul urut menurut abjad
• Sortir tanggal posting mulai dari yang terbaru/terlama
• Sortir label atau kategori posting yang sejenis

Script Sitemap (Daftar Isi) BlogToC Arlina Design

<style type="text/css">
#bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#aaa;font-family:'Open Sans';font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}
</style>

<div id="bp_toc">
</div>

<script src="https://cdn.rawgit.com/teknomia/sitemap/95c4a4a6/sitemap-blogtoc.js" type="text/j4vascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/j4vascript"></script>

<style scoped="" type="text/css">
#comments {display:none;}
</style>

DEMO

Sitemap Blog Keren Fast Responsive Mas Tamvan

Sitemap blog yang satu ini mempunyai desain yang sangat keren, oleh alasannya itu saya menyebutnya sitemap blog keren. Selain itu sitemap ini juga cepat loadingnya dan sangat responsive, ukuran font-nya sanggup membesar atau mengecil menyesuaikan besar layar.

Terima kasih kepada blog Mas Tamvan (Teja Sukmana) yang telah menciptakan script sitemap keren ini.

Script Sitemap Keren Mas Tamvan

<div class='jontor'>
<script src="https://cdn.rawgit.com/teknomia/sitemap/2ad476de/sitemap-keren.js"></script>
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=teknomia_Load"></script>
</div>
<style type='text/css'>.jontor{width:100%;border-collapse:collapse;text-align:left;overflow:hidden;margin:0 auto;}
.jontor a{color:black;}
.jontor p .teknomia_Label{background:#4ECDC4;display:block;padding:12px;}
.jontor ol li{position:relative;display:block;padding:.4em .4em .4em .8em;margin:.5em 0 .5em 2.5em;background:#d9f4f2;color:#666;text-decoration:none;transition:all .3s ease-out;}
user agent stylesheetli{display:list-item;text-align:-webkit-match-parent;}
.jontor ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#0fa9cd;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}
.jontor ol li:hover:after{left:-.5em;border-left-color:#0fa9cd;}
.jontorol li:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all 0.3s cubic-bezier(.25,.8,.25,1);}
.jontor ol li:after{position:absolute;content:'';border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
ol{counter-reset:li;list-style:none;font:15px 'Arial';padding:0;margin-bottom:4em;text-shadow:0 1px 0 rgba(255,255,255,.5);margin-left:26px;}
.teknomia_Postname li:nth-of-type(odd){background:#f1f3f3;}
.new{color:red!important;font-weight:700;font-style:italic;}
user agent stylesheetol{display:block;list-style-type:decimal;-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:40px;}
</style>

DEMO

Tunggu update selanjutnya, masih bersambung...
Sumber http://duarupa.blogspot.com

Share this post