7/13/2017

Cara Mudah Membuat Sitemap Daftar Isi Blog Amp Html

Cara mudah membuat sitemap daftar isi untuk template blog Amp Html.Sitemap yang satu ini kusus untuk template amp (acceleration mobile page).kelebihan yang ada pada sitemap kali ini yaitu ada 3 tabel pilihan yang senaja di buat untuk memudahkan penguna mencari konten blog. pada widget sitemap kali ini anda bisa mengurutkan daftar sitemap berdasarkan artikel terbaru dan artikel yang sudah di update.Selain ini anda juga dengan mudah mencari daftar isi berdasarkan kategory tertentu dan terdapat form pencari untuk memudahkan mencari conten blog.

Langsung saja ke cara mudah membuat sitemap untuk blog amp html.Seperti biasanya karena memakai template amp html tidak bisa merepkan kode javascript,maka kita harus menghosting kode sitemap-nya ini di github.Cara menghostingkan kode css html dan java script di githab bisa anda ikuti link ini.Untuk sitemap blog amp html seperti sitemap blog ini anda bisa terus mengkopi kode berikut 



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sitemap</title>
<meta content='width=device-width, initial-scale=1' name='viewport'>
<style>
tr{border:1px solid#000}
#table-outer{padding:7px 10px;margin:0 auto;border:1px solid #ddd;background:#eee}
#table-outer p {color:#555;border-bottom:1px solid #ccc;margin-bottom:20px;padding:0 0 10px 0;font-family: Droid Sans,Arial,sans-serif;font-size:12px;}
#table-outer table{width:auto;margin:0 auto;}
#table-outer form{font:inherit}
#table-outer label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0;font-family: Droid Sans,Arial,sans-serif;font-size:14px;}
#table-outer select[disabled]{opacity:.4}
#post-searcher{display:block;margin:0;padding:0}
#table-outer input,#table-outer select{width:100%;border:1px solid #dedede;border-radius:5px;margin:5px;padding:5px;font-family: Droid Sans,Arial,sans-serif;font-size:14px;font-weight:500;text-transform:capitalize;outline:0;color:#333;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#table-outer select option{min-height:1.4em;}
#table-outer input#feed-q{padding:5px 10px;}
#feed-container{background:#fff;display:block;clear:both;border:1px solid#ddd;margin:0;padding:0 5px;list-style:none;overflow:hidden;position:relative;border-top:none}
/*discripsinya*/
#feed-container li{list-style:none;margin:0;padding:0;border-top:1px solid #eee;color:#555;width:100%;float:left;display:inline}
#feed-container li .inner{margin:15px 0;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}
/*judul post*/
#feed-container li a{text-decoration:none;color:#2C2C2C;font-weight:500;font-family: Droid Sans,Arial,sans-serif;font-size:20px;}
#feed-container li a:hover{text-decoration:none;color:#E94141}
#feed-container li .news-text{margin-top:5px;line-height:1.3em;font-family: Droid Sans,Arial,sans-serif;font-size:13px}
#feed-container li img{margin:0 15px 5px 0;padding:7px 7px 7px 0;float:left;display:block;}
#result-desc{margin:0;padding:0;}
#result-desc div,#result-desc span{display:block;background:#ddd;border:1px solid#ddd;margin:0;padding:5px 0 7px 5px;color:#D64D52;font-family: Droid Sans,Arial,sans-serif;font-size:11px;}
#result-desc div{color:inherit}
#feed-nav{background:#ddd;margin:0px 0 30px;text-align:center;font-weight:500;font-family: Droid Sans,Arial,sans-serif;font-size:14px;}
#feed-nav a,#feed-nav span{border:1px solid #dedede;border-radius:0px;padding:0;color:#757575;text-decoration:none;display:block;height:30px;line-height:32px}
#feed-nav a,#feed-nav span:hover{color:#1B1B1B}
#feed-nav a:active,#feed-nav a:hover{color:#555}
#feed-nav span{cursor:wait}
@media screen and (max-width:600px){#table-outer table{margin:0 auto;width:100%}
#feed-container,#table-outer{margin:0 auto}
#feed-container li .inner{margin:5px auto;height:auto}
#feedContainer li{float:none;display:block;width:auto;height:auto}
#feed-container li .news-text, #feedContainer:after,#feed-container li img{display:none}
#feed-container li a{font-size:14px}
}
</style>
</head>
<body>
<div id="table-outer">
<p><b>SITEMAP DAFTAR ISI BLOG OTOMOLOGI</b></p>

<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" type="text" placeholder="Ketik dan tekan ENTER"/>
</form>
</td></tr>
</tbody></table>
</div>
<header id="result-desc"></header>
<ul id="feed-container"></ul>
<div id="feed-nav">
</div>
<script type='text/javaScript'>
document.write;var loadToc,loadCategories,_toc={init:function(){var cfg={homePage:"https://otomologi.blogspot.com",maxResults:10,numChars:270,thumbWidth:140,thumbHeight:95,navText:"Tampilkan artikel selanjutnya &#9660;",resetToc:"Kembali ke Awal",noImage:"http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",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('feed-container'),g:el('feed-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.homePage+'/feeds/posts/summary/-/'+ tag+'?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&orderby='+ order+'&callback=loadToc':cfg.homePage+'/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.homePage+'/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(/\/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)+'">'+ encodeURIComponent(a[i].term)+'</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.homePage+'/feeds/posts/summary?alt=json-in-script&start-index='+(o.i+ 1)+'&max-results='+ cfg.maxResults+'&orderby=published&callback=loadToc');fn.b(cfg.homePage+'/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>
</body>
</html>
Salin/copy semua kode diatas kemudian buka program notepad dan paste-kan.Caranya,klik menu edit pada notepad dan klik paste atau dengan cara yang lebih cepat dengan shotcut keyboard yaitu tekan tombol ctrl+V saja.Setelah kode berhasil anda paste selanjutnya cari kode yang di tandai warna kuning di atas.kurang lebih kodenya seperti ini https://otomologi.blogspot.com Cara yang cepat menemukan code tersebut dengan shortcut keyboard tekan saja Shift+F kemudian masukan link url warna kuning di atas dan tekan enter untuk menemukan.jika sudah ketemu lalu ganti dengan url link blog anda sendiri kemudian "save as" filenya beri nama apa saja yang penting pada format html.Contohnya sitemap.html

Langkah selanjutnya kita hanya perlu menghostingkan file-nya di github.caranya kunjungi situs github kemudian Sign in ke github atau register kalau belum punya akaun.Kemudian upload file yang anda beri nama dalam format html tadi.Setelah berhasil anda upload kemudian ambil url linknya.Contoh url link dari github "https://github.com/wanwakek/Amp/blob/master/ampsitemapv1.html" copy ambil url link dari github tadi kemudian buka situs rawgit.com Pada situs rawgit langkah selanjutnya masukan url link dari github ke input text.Setelah itu anda akan dapatkan dua url kurang lebih screenshot-nya sebagai berikut:

Situs Rawgit.com[img:Otomologi]

Copy/salin salah satu link tersebut untuk dihostingkan.Saya merekomendasi untuk pilih link yang production url sebelah kiri.contoh url linknya akan menjadi seperti ini "https://cdn.rawgit.com/wanwakek/Amp/7c107054/ampsitemapv1.html" link ini lah yang akan kita gunakan membuat sitemap di blog.Sampai di sini sebenarnya sitemap anda sudah jadi.Anda juga bisa mereview penampilan sitemap-nya dengan cara menyalin/copy link yang dari rawgit tadi dan pastekan ke addres bar di browser yang biasa anda gunakan seperti chrome,firework atau opra.

Baca Juga
  • Cara Membuat Tool Direct Link Generator Google Drive Dropbox Dan Onedrive
  • Tips Cara Perawatan Kompresor Angin
  • Cara Daftar Dan Hosting File Css,HTML,Javascript Di Github
  • Tips Perawatan Mesin Diesel Supaya Awet Tahan Lama

    • Selanjutnya Memasang widget sitemap di blog amp html

    Untuk membuat sitemap di blog amp html,langkah selanjutnya adalah login ke blogger.com di dasbor kemudian klik laman seterusnya laman baru dan pilih mood HTML pada postinganya.Langkah selanjutnya salin/copy kode ini dan paste-kan di postingan html.Bukan compres..!
    Selamat datang kedunia sitemap blog otomologi blog amp html silakan cari daftar isi blog otomologi di bawah ini <amp-img height="400" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2OOrOg7zoO7WnLPcESm_U9NqH0r-zjzngMSzT28-vXXuMEh2zTB5h7QArpMF5coFmHAhaNsyCz8_sXXAjeMN2wnkCXN38iRNqDyXA5difjW6kgUKOnup6HqCHs-gVe0mNUPc2QWiB8E0/s1600/OtomologiLogo.png" width="556"></amp-img> <amp-iframe allowfullscreen="" frameborder="0" height="1000" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" src="https://cdn.rawgit.com/wanwakek/Amp/e08d0493/ampsitemapv1.html" width="556"> </amp-iframe>
    Ganti kode yang bergaris bawah "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2OOrOg7zoO7WnLPcESm_U9NqH0r-zjzngMSzT28-vXXuMEh2zTB5h7QArpMF5coFmHAhaNsyCz8_sXXAjeMN2wnkCXN38iRNqDyXA5difjW6kgUKOnup6HqCHs-gVe0mNUPc2QWiB8E0/s1600/OtomologiLogo.png" dengan URL gambar anda sendiri.Dan untuk code yang di tandai dengan warna kuning adalah url link sitemap punya saya.Gantikan kode yang di tandai warna kuning dengan url link yang anda ambil dari rawgit tadi dan selanjutnya klik pratinjau/preview sekiranya sudah sesuai kemudian publikasikan.Sampai di sini seharusnya sitemap anda sudah bisa tampil.

    Demo Sitemap
    Related Posts

    Tambahkan Komentar Sembunyikan