Kumpulan Sitemap Manual Untuk Blogger Pemula

pada tanggal
ipitblog.blogspot.com
Kali ini aku akan membuat contekan tentang sitemap atau bahasa indonesianya peta situs.


 Peta situs dianggap penting karena dengan adanya peta situs, pengunjung dapat mengetahui apa saja yang sudah diposting oleh penulis blog.

 Ada macam-macam jenis peta situs yang ditawarkan para master blogging, dan IB akan memberi tahu beberapa diantaranya yang sudah berhasil di uji cobakan oleh IB.

 Baca Juga:


 Semua script yang siap di copy paste dalam artikel ini merupakan script html yang bisa langsung sobat terapkan pada laman atau entri posting. Tentunya harus diletakkan pada pilihan html, bukan pada compose.

 Selain itu, perlu juga diketahui tampilannya tidak akan terlihat saat mengubah tempat penulisan dari html ke compose. Tampilannya akan terlihat setelah diterbitkan dan dilihat melalui web browser, atau dengan pratinjau.

 Perlu juga menjadi perhatian, bahwa sitemap ini hanya berfungsi kalau sobat memberi label kepada setiap postingan yang ingin didaftarkan pada halaman peta situs blog sobat IB.

Berikut Script Untuk Membuat Peta Situs

1. Sitemap Model Menu

Saya menyebutnya 'Sitemap Model Menu' karena tampilannya seperti template khusus. Daftar label di sebelah kiri, yang apabila salah satu tombol label di klik, judul posting akan ditampilkan di sebelah kanan.

Sangat cocok dengan template yang elegan.

Pengaplikasian script sitemap model menu ini tanpa ada yang harus diubah, langsung publish setelah kodenya di letakkan di halaman, dan selesai.

<style type="text/css">
.tabbed-toc {margin:0 auto;background-color:#2f77bd;box-shadow: 0 0 7px rgba(5, 5, 5, 0.34);overflow:hidden;
position:relative;color:#333;border: 1px solid #9C9C9C;}
.tabbed-toc .loading {display:block;padding:10px 12px;font:normal bold 12px/normal Helmet,FreeSans,Sans-Serif;
color:white;}
.tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li {margin:0;padding:0;list-style:none;}
.tabbed-toc .toc-tabs {width:20%;float:left;}
.tabbed-toc .toc-tabs li a {display:block;font:normal bold 12px/28px Helmet,Freesans,Sans-Serif;overflow:hidden;text-overflow:ellipsis;color:#fff;text-transform:uppercase;text-decoration:none;
padding:7px 15px;cursor:pointer;box-shadow: 0px 1px 1px rgb(255, 255, 255);}
.tabbed-toc .toc-tabs li a:hover {background-color:#4086E0;color:white;box-shadow: 0 0 7px rgba(0,0,0,.7);}
.tabbed-toc .toc-tabs li a.active-tab {background-color:#FFF;color:black;box-shadow: 0 0 7px rgba(0,0,0,.7);
z-index:5;margin:0 -1px 0 0;/* cursor:text; */}
.tabbed-toc .toc-content,.tabbed-toc .toc-line {width:80%;float:right;background-color:white;border-left:5px solid #1E84BC;box-sizing:border-box;}
.tabbed-toc .toc-line {float:none;display:block;position:absolute;top:0;right:0;bottom:0;box-shadow:0 0 7px rgba(0,0,0,.7);}
.tabbed-toc .panel {position:relative;z-index:5;font:normal normal 10px/normal Helmet,FreeSans,Sans-Serif;}
.tabbed-toc .panel li a {display:block;position:relative;font-weight:bold;font-size:12px;color:#000;line-height:20px;padding: 10px 12px;
text-decoration:none;outline:none;overflow:hidden;}
.tabbed-toc .panel li time {display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right;}
.tabbed-toc .panel li .summary {display:block;padding:10px 12px 10px;font-style:italic;
border-bottom:4px solid #275827;overflow:hidden;}
.tabbed-toc .panel li .summary img.thumbnail {float:left;display:block;margin:0 8px 0 0;padding:4px;
width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa;}
.tabbed-toc .panel li:nth-child(even) {background-color:#66A9FF}
.tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li a:hover time,.tabbed-toc .panel li.bold a {
background-color:#333;color:white;outline:none;}
.tabbed-toc .panel li.bold a:hover,
.tabbed-toc .panel li.bold a:hover time {background-color:#222}
.post ol li::before {content: none;}
.post ol li {margin:0;}
@media (max-width:700px) {
.tabbed-toc {border:2px solid #333}
.tabbed-toc .toc-tabs,.tabbed-toc .toc-content {overflow:hidden;width:auto;float:none;display:block;}
.tabbed-toc .toc-tabs li {display:inline;float:left;}
.tabbed-toc .toc-tabs li a,.tabbed-toc .toc-tabs li a.active-tab {background-color:#2f77bd;box-shadow:2px 0 7px rgba(0,0,0,.4);}
.tabbed-toc .toc-tabs li a.active-tab {background-color:white;color:#333;}
.tabbed-toc .toc-content {border:none}
.tabbed-toc .toc-line,
.tabbed-toc .panel li time {display:none}
.tabbed-toc .panel li a{height: auto;}
</style>
<div class="tabbed-toc" id="tabbed-toc">
<span class="loading">Memuat…</span></div>
<script>
var tabbedTOC = {
blogUrl: "/", // Blog URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
thumbSize: 40, // Thumbnail size
noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
monthNames: [ // Array of month names
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
newTabLink: true, // Open link in new window?
maxResults: 99999, // Maximum post results
preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
sortAlphabetically: true, // `false` to sort posts by published date
showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
newText: ' &ndash; <em style="color:red;">Baru!</em>' // HTML for the "New!" text
};
</script>
<script src="https://cdn.jsdelivr.net/gh/tovic/dte-project@2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js">
</script>

2. Sitemap Responsive Elegan 1

Menurutku bentuknya lumayan elegan dengan border yang menarik dan  tetap responsive.

Untuk menerapkan sitemap ini sobat bisa langsung pastekan script berikut pada mode HTML, lalu ganti tulisan yang berwarna merah dengan url blog sobat kemudian publish, dan selesai.

<style type="text/css">
#toc{width:99%;margin:5px auto;border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}
.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;
padding:1px 0 2px 11px;background: #3498DB;
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}
.labl a{color:#fff;}
.labl:first-letter{text-transform:uppercase;}
.new{color:#FF5F00;font-weight:bold;font-style:italic;}
.postname{font-weight:normal;background:#fff;margin-left: 35px;}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>
<div id="toc">
<script src="https://cdn.jsdelivr.net/gh/penaindigo/Pena-Indigo-Code@a134f9def601a6f77332eccc35d3d20e0d3c7e49/sitemappenaindigo.js" type="text/javascript"></script>
<script src="https://www.ipitblog.online/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

3. Sitemap Responsive Elegan 2

Sedikit berbeda dengan sitemap responsive elegan 1, sitemap responsive elegan 2 ini tampilannya lebih berwarna. Dan juga ada variasi border yang keren, dan juga terbukti sangat responsive.

Untuk menerapkan sitemap ini sobat bisa langsung pastekan script berikut pada mode HTML, lalu ganti tulisan yang berwarna merah dengan url blog sobat kemudian publish, dan selesai.

<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>
<div id="toc">
<script src="https://makingdifferent.github.io/blogger-widgets/sitemappage.js" type="text/javascript"></script>
<script src="https://www.ipitblog.online/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

4. Sitemap Sederhana 1

Lumayan sederhana, dan IB ga tau bagaimana menjelaskannya. Lihat langsung ke 'DEMO' aja ya sob..

Untuk menerapkan sitemap ini sobat bisa langsung pastekan script berikut pada mode HTML, lalu ganti tulisan yang berwarna merah dengan url blog sobat kemudian publish, dan selesai.

<div id="toc">
<script src="https://makingdifferent.github.io/blogger-widgets/sitemappage.js" type="text/javascript"></script>
<script src="https://www.ipitblog.online/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

5. Sitemap Sederhana 2

Secara bentuk, hampir sama saja dengan sitemap sederhana 1, sepertinya perbedaannya cuma pada tempat js tersimpan dan tampilan icon 'New!' yang di sitemap sederhana 1 berwarna hitam, di sitemap sederhana 2 ini berwarna merah.

Untuk menerapkan sitemap ini sobat bisa langsung pastekan script berikut pada mode HTML, lalu ganti tulisan yang berwarna merah dengan url blog sobat kemudian publish, dan selesai.

<script src="https://cdn.rawgit.com/mowdot/mysitemap/master/sitemapku.js"></script>
<script src="https://www.ipitblog.online/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

6. Sitemap Sederhana 3

Dan pada sitemap sederhana 3 ini hampir persis sitemap sederhana 2, hanya lebih nasionalis saja. Icon 'New!' pada sitemap sederhana 2 sudah di translate kedalam bahasa Indonesia menjadi 'baru!'. Sepertinya hanya itu saja perbedaan pada tampilannya.

Untuk menerapkan sitemap ini sobat bisa langsung pastekan script berikut pada mode HTML, lalu ganti tulisan yang berwarna merah dengan url blog sobat kemudian publish, dan selesai.

<div style="margin:0 auto;padding:0;display:block"><script src="https://rawgit.com/bungfrangki/sitemap/master/daftarisi.js"></script><script src="https://ipitblog.blogspot.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

7. Sitemap Daftar Isi (Resent Post)

Sitemap terakhir saya sebut sitemap daftar isi karena sitemap ini hanya menampilkan judul artikel sesuai urutan diterbitkannya. Terbitan yang paling baru diletakkan paling atas. 

Bentuknya memang terlihat lebih rapi, dan keuntungan menggunakan sitemap ini tidak akan ada artikel yang dimunculkan ganda seperti yang terjadi pada sitemap sebelumnya.

Walaupun sebuah artikel terdiri dari beberapa label yang mana pada sitemap sebelumnya, sebuah artikel yang memiliki beberapa label akan ditampilkan di setiap label yang dimilikinya.

Setelah diselidiki, ternyata sitemap yang satu ini tidak menggunakan feed label, tapi menggunakan feed yang sama dengan recent post.

Sehingga, ada label atau tidak, sitemap ini akan berfungsi dengan baik.

Untuk menerapkan sitemap ini sobat bisa langsung pastekan script berikut pada mode HTML, lalu ganti tulisan yang berwarna merah dengan url blog sobat kemudian publish, dan selesai.

<script type="text/javascript">
var numposts = 100;
var standardstyling = true;
function showrecentposts(json) {
  for (var i = 0; i < numposts; i++) {
    var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }}
    posttitle = posttitle.link(posturl);
    if (standardstyling) document.write('<li>');
    document.write(posttitle);}
    if (standardstyling) document.write('</li>');
}
</script>
<ul>
<script src="https://www.ipitblog.online/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script>
</ul>


Nah itulah kumpulan script sitemap yang sudah IB uji dan terbukti work. Untuk memastikan masih berfungsi atau tidak, bisa sobat lihat langsung dengan menekan tombol "DEMO" di bawah masing-masing kotak script.

 Semoga bermanfaat, and happy blogging..!!!

Komentar

Posting Komentar