Skip to main content

Cara membuat Sitemap Keren Untuk Blogger

Cara untuk membuat dan memasang sitemap urutkan berdasarkan Label / kategori yang cukup Keren di lengkapi dengan gambar Thumbanil ,Bisa menampilkan postingan terbaru,dan bisa juga menggunakan Pencarian kata Kunci - Kali ini mywapgoblog akan menshare sebuah kode HTML yang bisa di gunakan untuk membuat sitemap Pada blog.Sitemap itu sendiri merupakan sebuah SEO blog dengan memanfaatkan susunan link seacar menyeluruh,Efek memasang sitemap ini mungkin akan memudahkan blog untuk di jelajah oleh para pengunjung blog dalam mencari artikel yang di butuhkan. Untuk itu,sitemap pada kali ini bermodel dengan show klik,artinya harus di klik terlebih dahulu baru akan memunculkan semua isi postingan berdasarkan label atau kategori,Misalkan sebuah blog menggunakan label "Tutorial" dan di label tersebut sangat banyak sekali postinga,maka jika membuka sitemap kali ini,ketika mengklik tutorial ,maka akan muncul sejumlah postingan pada kategori tersebut. Untuk di ketahui juga,Sitemap dengan

Cara membuat Sitemap Keren Untuk Blogger

Cara untuk membuat dan memasang sitemap urutkan berdasarkan Label / kategori yang cukup Keren di lengkapi dengan gambar Thumbanil ,Bisa menampilkan postingan terbaru,dan bisa juga menggunakan Pencarian kata Kunci - Kali ini mywapgoblog akan menshare sebuah kode HTML yang bisa di gunakan untuk membuat sitemap Pada blog.Sitemap itu sendiri merupakan sebuah SEO blog dengan memanfaatkan susunan link seacar menyeluruh,Efek memasang sitemap ini mungkin akan memudahkan blog untuk di jelajah oleh para pengunjung blog dalam mencari artikel yang di butuhkan.

Untuk itu,sitemap pada kali ini bermodel dengan show klik,artinya harus di klik terlebih dahulu baru akan memunculkan semua isi postingan berdasarkan label atau kategori,Misalkan sebuah blog menggunakan label "Tutorial" dan di label tersebut sangat banyak sekali postinga,maka jika membuka sitemap kali ini,ketika mengklik tutorial ,maka akan muncul sejumlah postingan pada kategori tersebut.

Untuk di ketahui juga,Sitemap dengan model begini JUga di gunakan Oleh Blog https://www.helmykediri.com dan jika kamu ingin melihat Demonya silahkan saja langsung Klik di bawah ini.



Cara membuat sitemap bermdel show click seperti pada gambar di atas untuk blog blogspotmu,sangat mudah untuk kamu terapkan dan buat di halaman statis Blogmu,Kamu juga perlu mengetahui fungsi lebih untuk sitemap ini ialah,seperti.
  • Bisa mengetahui jumlah keseluruhan postingan / artikel suatu Blog.
  • Menigkatkan traffik Blog dan merupakan Seo Off Page.
  • Mudah untuk di buat,
  • Tampilannya bisa mendetail semua postingan,lengkap dengan label.
  • Tampilanya cukup keren di lengkapi dengan Gambar thumbanil.
  • Cocok untuk Blog Nice banyak, (Blog gado-gado)

Cara Dan kode untuk membuat sitemap Blog keren di lengkapi Gambar dan juga show Click.

Cara untuk membuat serta memasang sitemap yang seperti gambar di atas,bisa kamu pasangkan untuk blog blogger (blogspot) dengan menggunakan Kode HTML khusus yang sudah berhasil work dan tampil pada Blog mywapgoblog,Dan kode html untuk membuat sitemap ini di ambil dari blog yaitu https://panduaneka.blogspot.com/2018/07/cara-membuat-sitemap-keren.html yang sudah menshare kodenya secara gratis dan bisa langsung untuk di pasangkan oleh para pengguna blogger yang ingin punya sitemap blog model seperti gambar dan link di atas.

Baca Juga.
Baiklah jika kamu ingin membuat dan memasang sitemapnya pada Blogmu,berikut ini adalah cara yang bisa di lakukan untuk pengguna Blogger.(blogspot.com) simak tutorialnya dan juga kodenya untukdi copy.

1. Pertama tama silahkan kunjungi Blogger ,Login sampai halaman dasbhord.

2. Kemudian ,langsung menuju Halaman dan Pilih Buat halaman Baru / new pages.

3. Kemudian copy kode HTML sitemapnya di bawah ini,Dan jangan Lupa menghaspus Link https://mywapgoblog.blogspot.com/ dan ganti atau masukan link Url blogmua yang valid,perhatikan pada penggunaan Https ,Http ,dan www. dan juga tanda ( / ) pada akhiran Link.

<html>
Loading...
<head>
<title>Sitemap</title>
<style> /* Sitemaps */
#sitemap-tab{padding:10px 10px;margin:0 auto 20px}
#sitemap-tab table{width:auto;margin:0 auto}
#sitemap-tab form{font:inherit}
#sitemap-tab label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0}
#sitemap-tab select[disabled]{opacity:.4}
#post-searcher{display:block;margin:0;padding:0}
#sitemap-tab input{width:100%;border:1px solid #dedede;border-radius:0px;margin:0;padding:5px;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#sitemap-tab select{width:100%;border:1px solid #dedede;border-radius:0px;margin:0 0 5px;padding:5px;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#sitemap-tab select option{min-height:1.4em!important;}
#sitemap-tab input#feed-q{padding:5px 10px!important;}.news-text {font-size:14px;line-height:1.5em;}
#sitemap-container{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none}
#sitemap-container li{list-style:none;margin:0;padding:0;display:inline}
#sitemap-container li a{text-decoration:none;color:#2C2C2C;font-weight:bold;font-size:18px}
#sitemap-container li a:hover{text-decoration:none;color:#F62459}
#sitemap-container li img{float:left;margin:0 15px 15px 0;padding:0;width:70px;height:50px;!important}
#sitemap-nav{margin:10px 0 30px;text-align:center;font-weight:500;width:100%} #sitemap-nav a,#sitemap-nav span{color:#F62459;text-decoration:none;display:block;opacity:.8} #sitemap-nav a:hover,#sitemap-nav span:hover{opacity:1}
#sitemap-nav span{cursor:wait}
@media (max-width:600px){
#sitemap-tab table{margin:0 auto;width:100%}
#sitemap-container,#sitemap-tab{margin:0 auto}
#sitemap-container li .inner{margin:5px auto;height:auto;}
#SitemaContainer li{float:none;display:block;width:auto;height:auto}
#sitemap-container li .news-text, #sitemapContainer:after,#sitemap-container li img{display:none!important}
</style>
</head>
<body>
<div id="sitemap-tab">
<table>
<tbody>
<tr>
<td>
<label for="feed-order">Urutkan artikel berdasarkan:</label>
</td>
<td>
<select id="feed-order">
<option selected="" value="published">Artikel terbaru</option>
<option value="updated">Artikel yang terakhir di update</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="label-sorter">Filter artikel berdasarkan kategori:</label>
</td>
<td>
<select disabled="" id="label-sorter"><option selected="">Loading....</option> </select>
</td>
</tr>
<tr>
<td>
<label for="feed-q">Cari artikel dengan kata kunci:</label>
</td>
<td>
<form id="post-searcher">
<input id="feed-q" placeholder="Ketik dan tekan ENTER" type="text" /></form>
</td>
</tr>
</tbody>
</table>
</div>
<header id="result-desc"></header>
<ul id="sitemap-container"></ul>
<div id="sitemap-nav"></div>
<script type="text/javaScript"> document.write;var loadToc,loadCategories,_toc={init:function(){var cfg={url:'https://mywapgoblog.blogspot.com/',maxResults:10,numChars:270,thumbWidth:140,thumbHeight:95,navText:"Tampilkan artikel selanjutnya &#9660;",resetToc:"Kembali ke Awal",noImage:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4KedpG6Vtj_CGyr-ng90YhGdC5Ow4ErN4rKayKUXUbBf1DoPDIwCZuOapVAOv0ZZZvlQEitfky27Ws5zdH5vE7gXLODSQ_vFinfa1FaTWWGbN__dAHBM5GEB-DFlyLyiMy31mm0dY7CWm/s1100/no-thumbnail.png",loading:"<span>Memuat...</span>",counting:"<div> Memuat artikel...</div> ",searching:"<span>Mencari...</span>"},w=window,d=document,el=function(id){return d.getElementById(id);},o={a:el('feed-order'),b:el('label-sorter').parentNode,c:el('post-searcher'),d:el('feed-q'),e:el('result-desc'),f:el('sitemap-container'),g:el('sitemap-nav'),h:d.getElementsByTagName('head')[0],i:0,j:null,k:'published',l:0,m:""},fn={a:function(){old=el('temporer-script');old.parentNode.removeChild(old);},b:function(param){var script=d.createElement('script');script.type="text/javascript";script.id="temporer-script";script.src=param;if(el('temporer-script'))fn.a();o.h.appendChild(script);},c:function(mode,tag,order){o.i++;o.e.innerHTML=cfg.counting;o.g.innerHTML=cfg[mode==1?"searching":"loading"];if(mode===0){fn.b(tag!==null?cfg.url+'/feeds/posts/summary/-/'+ tag+'?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&orderby='+ order+'&callback=loadToc':cfg.url+'/feeds/posts/summary?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&orderby='+ order+'&callback=loadToc');}else if(mode==1){fn.b(cfg.url+'/feeds/posts/summary?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&q='+ tag+'&orderby='+ order+'&callback=loadToc');} o.j=(tag!==null)?tag:null;o.l=mode;o.a.disabled=true;o.b.children[0].disabled=true;},d:function(json){var _h;o.g.innerHTML="";o.e.innerHTML=o.l==1?'<span>Hasil penelusuran untuk kata kunci <b>&#8220;'+ o.m+'&#8221;</b> ('+ json.feed.openSearch$totalResults.$t+' Hasil)</span>':'<div> Total: '+ json.feed.openSearch$totalResults.$t+' Artikel</div> ';if("entry"in json.feed){var a=json.feed.entry,b,c,_d,e="0 Komentar",f="",g;for(var i=0;i<cfg.maxResults;i++){if(i==a.length)break;b=a[i].title.$t;_d=("summary"in a[i])?a[i].summary.$t.replace(/<br ?\/?>/ig," ").replace(/<(.*?)>/g,"").replace(/<iframe/ig,"").substring(0,cfg.numChars):"";g=("media$thumbnail"in a[i])?a[i].media$thumbnail.url.replace(/.*?:\/\//g , "//").replace(/\/s[0-9]+\-c/,"\/s"+ cfg.thumbWidth+""):cfg.noImage.replace(/\/s[0-9]+\-c/,"\/s"+ cfg.thumbWidth+"");for(var j=0,jen=a[i].link.length;j<jen;j++){c=(a[i].link[j].rel=="alternate")?a[i].link[j].href:"#";} for(var k=0,ken=a[i].link.length;k<ken;k++){if(a[i].link[k].rel=="replies"&&a[i].link[k].type=="text/html"){e=a[i].link[k].title;break;}} _h=d.createElement('li');_h.innerHTML='<div class="inner"> <img style="width:'+ cfg.thumbWidth+'px;height:'+ cfg.thumbHeight+'px;" src="'+ g+'" alt="'+ b+'"><a class="toc-title" href="'+ c+'" target="_blank" title="'+ b+'">'+ b+'</a><div class="news-text"> '+ _d+'&hellip;<br style="clear:both;"></div> </div> ';o.f.appendChild(_h);} _h=d.createElement('a');_h.href='#load-more';_h.innerHTML=cfg.navText;_h.onclick=function(){fn.c(o.l,o.j,o.k);return false;};}else{_h=d.createElement('a');_h.href='#reset-content';_h.innerHTML=cfg.resetToc;_h.onclick=function(){o.i=-1;o.e.innerHTML=cfg.counting;o.f.innerHTML="";fn.c(0,null,'published');o.a.innerHTML=o.a.innerHTML;o.b.children[0].innerHTML=o.b.children[0].innerHTML;return false;};} o.g.appendChild(_h);o.a.disabled=false;o.b.children[0].disabled=false;},e:function(json){var a=json.feed.category,b='<select id="label-sorter"><option value="" selected disabled>Pilih Kategori...</option>';for(var i=0,len=a.length;i<len;i++){b+='<option value="'+ encodeURIComponent(a[i].term).replace(/%20/g, " ")+'">'+ encodeURIComponent(a[i].term).replace(/%20/g, " ")+'</option>';} b+='</select>';o.b.innerHTML=b;o.b.children[0].onchange=function(){o.i=-1;o.f.innerHTML="";o.g.innerHTML=cfg.loading;fn.c(0,this.value,o.k);};}};loadToc=fn.d;loadCategories=fn.e;fn.b(cfg.url+'/feeds/posts/summary?alt=json-in-script&start-index='+(o.i+ 1)+'&max-results='+ cfg.maxResults+'&orderby=published&callback=loadToc');fn.b(cfg.url+'/feeds/posts/summary?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories');o.a.onchange=function(){o.i=-1;o.f.innerHTML="";o.g.innerHTML=cfg.counting;o.b.children[0].innerHTML=o.b.children[0].innerHTML;fn.c(0,null,this.value);o.k=this.value;};o.c.onsubmit=function(){o.i=-1;o.f.innerHTML="";o.m=o.d.value;fn.c(1,o.d.value,o.k);return false;};}};_toc.init();
</script>
<div class="clear"></div>
<div class="inline-ad"></div>
</body>
</html>

4. Pilih Mode peulisan Menggunakan Mode HTML lalu pastekan kode yang sudah di copy di atas tersebut pada halaman pages ,Buatkan judul dengan Judul Sitemap Dan jika sudah,silahakn klik publikasikan.

5. Dan terakhir ,silahkan lihat hasilnya pada Blogmu,Jika terjadi erorr,pastikan url blog yang si masuakan valid atau benar.

Baiklah itulah kode dan cara memasang sitemap untuk blog dengan model tampilan sitemap yang cukup keren,di lengkapi dengan gambar,kategori label dan update blog paling baru.Mungkin hanya itu saja postingan pada kali Ini semoga bermanfaat dan selamat mencoba.Mohon maaf bila adak kesilapan dan kesalahan dalam penyajia.

wassallam.

Comments

Popular posts from this blog

Inilah Cara menghilangkan Powered By Blogger Pada Template Blog

Cara untuk menghilangkan atau menyembunyikan Kredit footer Powered By Blogger Di template bawaan asli Blogger untuk Blog blogspot - Menghilangkan dan menyembunyikan Kredit footer pada template blog mungkin kamu inginkan jika menggunakan template bawaan asli dari blogger saat pertama kali membuat Blog di blogger.Tujuan ini bisa jadi hanya ingin agar blog mu terlihat lebih resfonsife dan lebih simpel.Jika kamu lebih menyukai penampilan blog yang lebih dinamis dan simpel,maka menghilangkan kredit footer bisa jadi solusinya. Jika membahas mengenai Seo untuk blog dari efek mnyembunyikan kredit footer template  ini mungkin tidak terlalu berpengaruh,karena ini hanya bertujuan untuk memperkenalkan nama pembuat template, desainer template dan Platform Blog.Kadang - kadang ini juga di perlukan agar setiap yang melihat bog kita bisa mengetahui ,kalau blog kita menggunakan Builder dari website mana. Seperti gambar di atas ,menjelaskan sebuah kedit footer template dari blog mywapgoblog.blo

Mengatasi Masalah Tidak Dapat Mengambil Peta Situs

Jika kamu mengggunakan Google Search console sebagai Tool untuk optimasi SEO blogmu,Mungkin juga kamu pernah mengalami dan menemukan sejumlah kesalahan atau erorr yang terjadi,Misalkan seperti saat mensubmit Peta situs, dan yang terjadi ialah erorr atau tidak dapat mengambil peta situs.Maka blog mywapgoblog akan menyajikan tutorial yang bisa di jadikan refrensi jika masalah tersebut muncul,Dan postingan kali ini membahas mengenai Sitemap Google Search Consloe. Mensetting Blog mulai dari tampilan ,Widget ,Isi konten belum lah cukup untuk menjadikan para webmasterya cukup puas,jika hasil web blogya tidak masuk dan tidak dapat di temukan pada sebuah mesin pencari seperti google,Dan untuk membuat blog dan semua isi postingannya bisa muncul di butuhkan beberapa tekhnik seperti Masukan dari Backlink ,Serp dan juga optimasi melalui Web search engine seperti Google webmaster tool ( Google search console) ,Bing webmaster dan situs web master tool lainnya. Okey,Jika selama ini kamu mengguna

Cara Membuat Kotak Area Copy Paste Html / Javascript scroll

Dalam membuat sebuah postingan yang barkaitan dengan Bahasa program seperti Html / Javascript pada blogger,Tentu membutuhkan sebuah kode pembentuk untuk menampilkan atau tempat kode HTML yang akan di publikasikan,dan kode itu sering di seubut dalam dunia blogging yaitu Kotak area copy paste.Dalam mengenal kotak area copy paste ini ada banyak sekali macamnya,Mulai dari yang bisa untuk di scroll,non scroll dan lain sebagainya. Cara membuat kotak area copy paste scroll Untuk blogger Blogspot - Cara yang di butuhkan hanyalah mengetahui cara menempatkan kodenya saja dan kode yang di butuhkan juga harus ada ,seperti sebuah Kode html Kotak area copy paste.Dan untuk itu blog mywapgoblog akan menyajikan sejumlah kode yang bisa di gunakan dan di pasangkan ke dalam postingan blog untuk membuat dan mearuh kode seperti Html ,Javascript ,Text biasa dan bahasa program lainnya. Mengapa harus menggunakan kotak area copy paste ? Ini mungkin agar bisa membedakan mana tulisan biasa dengan kode html p

Begini Cara memasang Baca Juga Artikel Lainnya Di Bawah Artikel Blog

Memasang link untuk semua postingan Berdasarkan Label untuk blogger ,Yang secara umum di sebut link , Related Post ,Artikel Terkait ,Artikel baca juga di dalam template Blog - Memasang link artikel terkait pada blog kali akan di share dengan model artikel link model susunan Link dan tanpa gambar.Model artikel terkait ini bisa di temukan pada Blog dengan option Baca juga artikel terkait laiinya ,dan posisinya tepat berada di bawah artikel blog atau di akhiran Postingan saja. Link artikel terkait ini akan menampilkan sejumlah link yang akan mengarah ke postingan dan di kategoriakn berdasarkan Label atau kategori Blog.Misalkan membuat label untuk Tutorial blogspot ,maka jika salah satu page dari label tersebut di buka,maka semua postingan yang terkait dengan label tutorial Blogspot yang ada pada label tersebut akan Muncul. mebmbuat dan memasang artikel terkait model begini tidak lah mudah,hanya menggunakan ketelitian untuk penempatan Kode - kode htmlnya saja. Memasang dan mena

Membuat Blog Terasa Halus Saat Di Scroll

Memasang effect mooth scroll pada Blogger agar blog terasa halus saat di scroll - Smooth scroll ini biasa akan di temukan pada website builder wordpress yang apabila kita melakukan scrolling ke bawah atau atas ,maka akan terasa smooth ( sedikit halus dan licin ) .Effect ini tentunya juga bisa di pasangkan ke dalam Blogger blogspot. Apabaila kamu menemukan sebuah blog yang saat di scroll terasa ada efek halusnya,bisa kemungkinan blog tersebut memasang effect smooth scroll js di dalam templatenya ,dan ini tentunya teruntuk blogger.Keuntungan dari memasang effect ini pada blog ialah bisa menstabilkan halaman page postingan blog ,dan untuk pembaca blog akan di mudahkan jika ingin menscroll halaman tersebut,alias tidak terasa tersendat atau macet,baik karena faktor iklan maupun yang lainnya.Namun tidak semuanya bisa berjalan lancar,jika terlalu banyak iklan ,blog akan terasa tersendat juga saat di scroll. Namun jika kamu ingin tahu kode jS untuk smooth scrollnya ,tidak ada salahnya un