Apa itu sitemap? Sitemap jikalau 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 yakni 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 yakni dikemas dalam bentuk widget, kustomisasinya sangat terbatas, estetika tata letaknya pun sulit untuk diatur.
Oleh alasannya yakni itu, pada artikel kali ini blog Teknomia akan membuatkan 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 :
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 eksklusif ditampilkan menyerupai halaman posting. Pada URL halaman statis juga tidak terdapat isu waktu kapan halaman tersebut di-publish.
Berikut yakni tutorial menciptakan halaman khusus untuk sitemap blog.
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.
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 yakni website tersebut sudah tidak aktif, maka creditnya saya hilangkan.
BlogToc merupakan kependekan dari Blog Table of Contents yang jikalau 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 aksesori pada BlogToC :
Sitemap blog yang satu ini mempunyai desain yang sangat keren, oleh alasannya yakni 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.
Tunggu update selanjutnya, masih bersambung... Sumber https://duarupa.blogspot.com/
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 yakni 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 yakni dikemas dalam bentuk widget, kustomisasinya sangat terbatas, estetika tata letaknya pun sulit untuk diatur.
Oleh alasannya yakni itu, pada artikel kali ini blog Teknomia akan membuatkan 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 eksklusif ditampilkan menyerupai halaman posting. Pada URL halaman statis juga tidak terdapat isu waktu kapan halaman tersebut di-publish.
Berikut yakni tutorial menciptakan halaman khusus untuk sitemap blog.
- Pada Dashboard Blogger, pilih Pages, lalu pilih New Page untuk menciptakan halaman baru.
- Isikan judul halaman pada kolom Judul, pada masalah 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 aneka macam versi desain, tampilan, dan fungsi sanggup Anda temukan di bab bawah artikel ini.
- 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 yakni website tersebut sudah tidak aktif, maka creditnya saya hilangkan.
Script Sitemap (Daftar Isi) Sederhana Abu Farhan
<script style="text/javascript" src="https://cdn.rawgit.com/teknomia/sitemap/eded6943/sitemap-sederhana.js"></script>
<script src="/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
<script src="/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
Sitemap BlogToC Beautiful Beta, Blogger Plugins, Arlina Design
BlogToc merupakan kependekan dari Blog Table of Contents yang jikalau 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 aksesori 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/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
</style>
#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/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
</style>
Sitemap Blog Keren Fast Responsive Mas Tamvan
Sitemap blog yang satu ini mempunyai desain yang sangat keren, oleh alasannya yakni 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&alt=json-in-script&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>
<script src="https://cdn.rawgit.com/teknomia/sitemap/2ad476de/sitemap-keren.js"></script>
<script src="/feeds/posts/default?max-results=9999&alt=json-in-script&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>
Tunggu update selanjutnya, masih bersambung... Sumber https://duarupa.blogspot.com/