Cara Buat Sitemap Blogger Keren Dan Menarik Terbaru!

Sitemap merupakan halaman yang berbentuk statis dan berisi data tentang artikel yang ada dalam suatu blog atau website biasanya berisi artikel dan menampilkan artikel berdasarkan label yang telah diurutkan, tentunya keberadaan sitemap ini membatu para pengguna / pengunjung blog untuk mencari artikel yang sedang ia cari ibaratnya pengganti dari kolom search yang biasanya ada pada sudut atas baik kiri ataupun dolanan meskipun ini belum sepenuhnya mengganti kolom search namun setidaknya ada fitur yang dimiliki oleh blog anda yang dapat memudahkan pengunjung anda.

Daftar isi

  1. Cara Memasang Sitemap (daftar isi) Untuk Blog
  2. Kode Halaman Sitemap Untuk Blog Amp
  3. Kode Sitemap ala Sederhana Namun Modern
  4. Sitemap Blogger Ala Blog Igniel
  5. Kesimpulan

Jadi keberadaan dari sitemap bukan hanya semata untuk fitur fitur semata tetapi sebagai alat yang dapat membantu para pengguna / pengunjung blog anda untuk lebih leluasa untuk mencari konten yang mereka cari dengan mudah, membuat halaman sitemap pun cukup mudah bahakan orang gak tau blogger pun mungkin akan paham dengan mudah dan langkah langkah pembuatanya sudah dibahas pada bagain dibawah berikut.

Cara Memasang Sitemap (daftar isi) Untuk Blog

Berikut merupakan langkah langkah awal cara memasang sitemap blogger dengan mudah.

  • Buka browser lalu ketikkan Blogger.com dan klik tombol masuk atau sign untuk memulai langkahnya.
  • Klik menu halaman dibawah menu coment lalu klik menu halaman baru pada pojok kanan bawah.
  • Beri judul halaman sesuai dengan yang anda inginkan biasanya akan diberi nama sitemap atau daftar isi terserah mau apa namanya tak masalah.
  • Ubah halaman kemode html dan masukkan kode dibawah sesuai kenginan anda
  • Jika ingin menambah setelan lanjutan tak apa atau ingin langsung publish juga tak apa.

bagaimana mudah bukan untuk memasang menu halaman sitemap blogger, tak perlu belajar coding cukup tempel kode yang telah disediakan dan mengubah sedikit kodenya dan halaman sitemap pun sudah bisa anda gunakan.

Kode Halaman Sitemap Untuk Blog Amp

Blog amp merupkan blog yang memiliki perambahan khusus yang membuat blog tersebut memiliki kecepatan yang luar biasa dan diberi peringkat baik oleh google, biasanya blog amp ditandai dengan gambar petir samping nama domain ketika hasil pencarian muncul. Untuk memasang amp pada blog ada dua cara yang dapat anda lakukan yaitu dengan cara mendownload plugin bagi pengguna wordpress dan bagi pengguna blogger agak sedikit saja atau bahkan sangat sulit anda harus mengotak Atik template mengubah kerangka dan data data lain namun sekarang sudah tersedia template blogger yang sudah valid amp sehingga tidak usah lagi otak atik template.

Namun penggunaan blog amp tidak semudah yang anda kira diperlukan skill untuk menjalankan blog ini seperti caontohnya ingin valid kata yang ada didalam artikel harus diuabah dari <div> menjadi <P> dan untuk paragraf baru diharuskan menggunakan <br> tentunya hal ini sangat merepotkan bukan hanya itu saja gambar memiliki kode tersendiri jadi bukan hanya asal upload seperti gambar pada gambar harus memiliki tag amp seperti <amp-image> yang pastinya hal itu harus dilakukan secara manual yakni dengan mengedit bagian baginya satu persatu.

Satu hal lagi yang perlu anda ingat satu pantangan yang perlu anda jauhi ketika menggunakan blog amp yaitu jangan masukkan kode Script karena itu bisa membuat blog anda tidak valid amp, contonya saja halaman sitemap anda tidak boleh sembarang memasukkan kode tersebut kecuali menggunakan sitemap khusus.

<amp-iframe title="Sitemap"
src="https://cdn.rawgit.com/KompiAjaib/kompi-html/master/sitemaps-amp.html?url="https://www.idrakyat.my.id/"
height="750"
layout="fixed-height"
frameborder="0"
sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups">
<amp-img src="https://2.bp.blogspot.com/-rRo__E6FsPs/Ws7U-IT8KNI/AAAAAAAAw_Q/qCwa6vKHgTIB-ytesdA4FlKrXMRYt5NMACLcBGAs/s1600/placeholder.png"
layout="fixed-height"
height="360"
width="auto"
placeholder>
</amp-img>
</amp-iframe>

Kode diatas merupakan kode sitemap yang pastinya valid amp karena dibuat oleh orang sudah pandai dan mahir dalam blog amp yaitu Adhy Suryadi pemilik dari kompiajaib.com yang pastinya tidak asing lagi dikalangan blogger amp banyak template amp yang menjadi karyanya dan banyak kode kode yang ia buat salah satunya ialah kode sitemap diatas, untuk penerapan kode diatas sama seperti cara diatas anda hanya perlu mengubah kode yang diberi tanda warna merah diatas menjadi url blog anda dan tinggal publish halaman saja.

Kode Sitemap ala Sederhana Namun Modern

Untuk membuat sitemap yang terlihat sederhana tetapi memiliki tampilan yang modern ini dapat dibuat dengan kode dibawah ini penerapannya pun cukup mudah yakni anda hanya perlu mempaste kode dibawah dan mengikuti langkah langkah diatas.

<div class="tabbed-toc" id="tabbed-toc">
<span class="loading">Memuat…</span></div>
<script>
var tabbedTOC = {
blogUrl: "https://www.idrakyat.my.id/", // Blog UR
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: true, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
showThumbnails: true, // `true` to show the posts thumbnails (Not recommended)
thumbSize: 60, // 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;">New!</em>' // HTML for the "New!" text
};
</script> <script src="//cdn.rawgit.com/tovic/dte-project/2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js"></script>

Itu dia kodenya nah anda hanya perlu mengubah kode yang telah ditandai dengan warna merah diatas dengan url dari blog anda itu saja setelah itu tinggal publish saja dan hasilnya bisa anda lihat pada halaman ini https://www.idrakyat.my.id/p/klaim-hak-cipta.html nah bagaimana, seharusnya sitemap tersebut ditaruh pada halaman sitemap namun untuk memudahkan laporan jadi sitemap tersebut diletakkan pada halaman klaim hak cipta pada blog ini.

Sitemap Blogger Ala Blog Igniel

Igniel merupakan blog yang dikelola dan dimiliki oleh blogger perempuan yang bernama igniel, blog ini sudah memiliki beberapa penghargaan yang bisa dibilang luar biasa contohnya Iwa yaitu ajang bergengsi bagi website lebih tepatnya suatu penghargaan. Blog ini juga dikenal oleh banyak sekali orang karena berkat admin blog yaitu igniel yang dikenal kerena sering membagikan tips triknya seputar dunia blogging ia juga dikenal karena dia jago coding salah satu karyanya adalah template igplex, template ini gak usah diragukan lagi kehebatannya mulai dari fitur dan tampilan semuanya memiliki hal yang menarik salah satunya adalah sitemap dari template ini banyak orang yang ingin mencari tau tentang cara membuat sitemap ala igniel ternyata setelah ditelusuri pada template ternyata menggunakan kode dibawah ini.

/* Blogger Sitemap Ala igniel by Taqil Sarwat idrakyat.my.id */
#sitemap1 {background-color:#fff; color:#1d2129; font-weight:400; border:1px solid #ccc;}
#sitemap1 .loading {padding:10px 15px; color:#666;}
#sitemap1 .judul {background-color:#008c5f; color:#fff; font-size:125%; font-weight:600; padding:15px; cursor:pointer; border-bottom:1px solid #fff; letter-spacing:1px; transition:all .3s ease;}
#sitemap1 .judul:last-child {border-bottom:0px;}
#sitemap1 .judul:hover {background-color:#1d2129;}
#sitemap1 .judul:after {content:''; width:0px; height:0px; position:relative; float:right; top:10px; right:10px; border:5px solid transparent; border-color:#fff transparent transparent; transition:all .3s ease}
#sitemap1 .judul.aktif {background-color:#1d2129;}
#sitemap1 .judul.aktif:after {border-color:#fff transparent transparent; top:5px; -webkit-transform:rotate(-180deg); -moz-transform:rotate(-180deg); -ms-transform:rotate(-180deg); -o-transform:rotate(-180deg); transform:rotate(-180deg)}
#sitemap1 .konten ol, #sitemap1 .konten ol li {list-style:none; list-style-type:none; margin:0px; padding:0px; font-weight:400;}
#sitemap1 .konten ol li:nth-of-type(even) {background-color:#e9e9e9;}
#sitemap1 .konten ol li:nth-of-type(odd) {background-color:#fff}
#sitemap1 .konten ol li a {text-decoration:none; padding:10px 15px; display:block; color:#666; line-height:1.5em; transition:all .3s ease;}
#sitemap1 .konten ol li a:hover {color:#000;}

Langkah selanjutnya adalah mengedit template pada bagian menu tema dan carilah kode </style> dan letakkan kode diatas persis pada bagian yang dimaksud langkah selanjutnya adalah menyalin kode berikut.

<div id="sitemap1"><div class="loading">Loading....</div></div>
<script> //<![CDATA[
/* Blogger Sitemap Ala igniel by Taqil Sarwat idrakyat.my.id */
var toc_config = {containerId:'sitemap1', showNew:0, sortAlphabetically:{thePanel:true, theList:true}, activePanel:1, slideSpeed:{down:400, up:400}, slideEasing:{down: null, up: null}, slideCallback:{down:function(){}, up:function(){}}, clickCallback:function(){}, jsonCallback:'sitemap1',delayLoading: 0};
window.onload = function(){
!function(e,o){var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head")[0],n=[];e[toc_config.jsonCallback]=function(e){for(var o,c,i=e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for(var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&&r<toc_config.showNew+1&&(i[r].title.$t+=" %new%");i=toc_config.sortAlphabetically.theList?i.sort(function(e,o){return e.title.$t.localeCompare(o.title.$t)}):i,toc_config.sortAlphabetically.thePanel&&n.sort();for(var g=0,h=n.length;h>g;++g){l+='<div class=\"judul\">'+n[g]+'</div>',l+='<div class=\"konten\"><ol>';for(var _=0,p=i.length;p>_;++_){o=i[_].title.$t;for(var w=0,u=i[_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel){c=i[_].link[w].href;break}for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+='<li><a href=\"'+c+'\" title=\"'+o.replace(/ \%new\%$/,"")+'\">'+o.replace(/ \%new\%$/,"")+'</a></li>')}l+='</ol></div>'}t.innerHTML=l,"undefined"!=typeof jQuery&&($("#"+toc_config.containerId+" .konten").hide(),$("#"+toc_config.containerId+" .judul").click(function(){$(this).hasClass("aktif")||(toc_config.clickCallback(this),$("#"+toc_config.containerId+" .judul").removeClass("aktif").next().slideUp(toc_config.slideSpeed.up,toc_config.slideEasing.up,toc_config.slideCallback.up),$(this).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))}).eq(toc_config.activePanel-1).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))};var i=o.createElement("script");i.src="https://www.igniel.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){c.appendChild(i)}:e.setTimeout(function(){c.appendChild(i)},toc_config.delayLoading)}(window,document);

}
//]]> </script>

Kode diatas merupkan kode yang salanjutya yang anda harus anda terapkan pada halaman baru dengan cara seperti yang sudah dibahas diatas, perlu kalian ingat bahwa kode diatas tidak boleh anda ubah karena biasanya kode anda tidak akan valid dan sitemap ala igniel pun tidak akan jadi.

Kesimpulan

Dari ketiga sitemap diatas semuanya memiliki kelebihan dan kekuran masing masing seperti yang pertama jika anda memiliki blogspot yang valid atau ingin menjadikannya blog amp harus menggunakan kode sitemap pada kode yang pertama karena untuk kode kode khususnya Script tidak boleh memasukkan asal kode mengapa demikian karena blog inipun dulunya juga merupakan blog amp cuman karena beberapa hal amp dinonaktifkan pada blog ini, intinya jika anda memiliki blog amp lebih baik menggunakan yang pertama karena sudah pasti valid amp tapi bukan karena itu saja anda harus mau tidak mau harus menggunakan kode yang pertama karena blog amp tidak dapat menggunakan asal kode harus memiliki kode khusus.

Sekarang kita akan membahas sitemap yang kedua sitemap ini merupakan sitemap yang sangat sederhana hanya mengubah sedikit kode hanya url dan sudah dapat diterapkan dari cara menerapkan dan tampilan pun sangat sederhana namun memiliki tampilan yang cantik meskipun tanpa warna, tapi jangan salah template ini memiliki fitur yang tak kalah dengan kedua sitemap diatas.

Yang terakhir ada sitemap ala igniel nah mungkin diantara dua sitemap dan cara penerapannya sitemap ala igniel lah yang paling ribet untuk diterapkan karena harus edit template terlebih dahulu untuk memasangnya tapi pastinya mulai dari fitur dan tampilan sitemap inilah yang menjadi juaranya.

Nah bagaimana anda memilih untuk menggunakan yang mana yang pertama kedua atau malah yang ketiga semua keputusan ada pada tangan anda ingin yang ribet boleh atau yang simpel juga boleh.

0 Response to "Cara Buat Sitemap Blogger Keren Dan Menarik Terbaru!"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel