Best Sitemap Semua Tutorialku for Blogger

Best Sitemap Semua Tutorialku for Blogger - Sitemap atau dalam bahasa indonesia yang biasa disebut dengan istilah Peta Situs, adalah salah satu widget yang harus ada dalam sebuah website atau blog dimana peta situs ini dapat memudahkan pengunjung untuk mengeksplorasi semua artikel yang kita miliki dengan sebuah tabel yang manarik.

Sitemap juga merupakan salah satu widget yang banyak digunakan karna fungsinya yang sangat penting tersebut untuk menunjang profesionalis sebuah website. Nah, oleh karna itu, pada kesempatan kali ini saya akan berbagi sebuah sitemap untuk anda semua. Sitemap yang akan saya bagikan kali ini merupakan salah satu sitemap terbaik yang pernah saya publish diblog saya, karna sitemap kali ini memiliki semua fitur pada sitemap-sitemap sebelumnya yang pernah saya bagikan dan ditambah beberap fitur lainnya yang membuat sitemap kali ini terlihat lebih manarik.

Best Sitemap Semua Tutorialku for Blogger - tutorial ini juga saya buat berdasarkan permintaan dari rekan sesama blogger, yang menginginkan sitemap seperti yang saya gunakan pada blog saya ini. Baiklah, untuk anda yang ingin memasang sitemap menarik dari Blog Semua Tutorialku, silahkan ikuti langkah-langkahnya dibawah ini.

Feature of Best Sitemap Semua Tutorialku for Blogger:

1. Pengunjung bisa melihat semua artikel terbaru
2. Postingan akan tampil dalam 2 kolom
3. Pengunjung juga bisa melihat jumlah komentar dalam setiap artikel
4. Pengunjung juga bisa melihat postingan berdasarkan label tertentu
5. Postingan berdasarkan label dilengkapi dengan Expend Load More / Infinity Loop
6. Pengunjung bisa memilih postingan dengan navigasi yang mudah
7. Pengunjung juga bisa mencari artikel dengan keywords tertentu
8. Sitemap ini tidak membutuhkan Loading yang lama alias sangat ringan
9. Dan blog anda akan terlihat lebih profesional dengan widget ini.

Cara Membuat Best Sitemap Semua Tutorialku for Blogger
1. Masuk ke Dashboard Blogger
2. Pada dashboard blog, pilih tab Halaman/Pages > kemudian buat halaman baru
3. Selanjutnya pada Mode HTML, Paste semua kode dibawah ini kedalam tab HTML tersebut

CSS kode Sitemap

 <style>
/* CSS Sitemap  by http://semua-tutorialku.blogspot.com */
#table-outer table {width:100%;margin:0;padding:0;}
#table-outer input, #table-outer select {padding:4px;font:inherit;background:#fff;width:170px;box-sizing:border-box;border:none;color:#444;border:1px solid #eaeaea;transition:all 0.6s;}
#table-outer select {cursor:pointer;outline:none}
#table-outer input:focus{outline:none;background:#fff;border-color:#dadada;}
#resultDesc {margin-bottom:10px;}
#feedContainer {overflow:hidden;margin-top:20px;}
#feedContainer strong {font-size:10px;}
#feedContainer, #feedContainer li {padding:0;margin:0;list-style:none;}
#feedContainer li {float:left;width:50%;margin-bottom:5px;position:relative;z-index:0;}
#feedContainer .inner {display:block;height:72px;padding:10px;margin:5px 5px 0 5px;position:relative;background-color:#fff;box-shadow:0 0 0 1px #eaeaea;opacity:0.9;transition:all 0.6s;}
#feedContainer .inner:hover {opacity:1;box-shadow:0 0 0 1px #dadada;}
#feedContainer img {float:left;margin: 0 8px 0 0;max-width:100%;padding:1px;background:#ddd;}
#feedContainer .toc-title {max-height:33px;overflow:hidden;color:#444;font-weight:400;}
#feedContainer .toc-title:hover {color:#404040;}
#feedContainer .news-text {font-size:11px;display:none;}
#feedNav a, #feedNav span {display:block;text-align:center;color:#fff;
background-color:#444;padding:5px 0;width:100%;margin: 0 auto;margin-top:10px;transition:all 0.3s linear;}
#feedNav a:hover, #feedNav span:hover {background-color:#444;transition:all 0.3s linear;}
#feedContainer .date {display:none;position:absolute;bottom:0;right:0;background-color:transparent;color:#fff;font-size:9px;padding:3px 2px;width:35px;}
#feedContainer .date .dd {font-size:9px;line-height:5px;font-weight:bold;}
#feedContainer .date span {display:inline-block;line-height:5px;text-align:center;
margin-left:5px;}
</style> 

HTML kode Sitemap

 <div dir="ltr" style="text-align: left;" trbidi="on">
<div id="table-outer">
<table><tbody>
<tr><td><label>Sort posts by : </label></td><td><select id="orderFeedBy"><option selected="" value="published">New post</option><option value="updated">Post updated</option></select></td></tr>
<tr><td><label>Filter posts by category : </label></td><td><span id="labelSorter"><select disabled=""><option selected="">Loading...</option></select></span></td></tr>
<tr><td><label>Search by keyword : </label></td><td><form id="postSearcher">
<input type="text" /></form>
</td></tr>
</tbody></table>
</div>
<br />
<header id="resultDesc"></header><br /><br />
<ul id="feedContainer"></ul>
<div id="feedNav">
Loading...</div> 

Javascript kode Sitemap

 <script src="https://googledrive.com/host/0B3jgs-7rv9eUMUwwZTZZaWVxbms" type="text/javascript"></script> 

4. Setelah anda menambahkan semua kode diatas untuk sitemap, sekarang anda dapat Publish Sitemap anda, jangan lupa untuk memberi judul halaman dengan nama Sitemap anda.
Enjoy Best Sitemap! :)

Untuk anda yang ingin melihat DEMO Best Sitemap Semua Tutorialku for Blogger, silahkan anda ikuti link dibawah ini,

Live demo

 

Saya rasa sekian artikel kali ini tentang 'Best Sitemap Semua Tutorialku for Blogger', semoga artikel ini dapat membatu anda dalam membuat sebuah sitemap blog yang manarik dan interaktif kepada pengunjung blog anda. Jika anda memiliki pertanyaan atau masalah, silahkan ajukan di kotak koemntar dibawah.
Semoga bermanfaat..