Membuat Daftar Isi Blog Lengkap Dan Support HTTPS

Membuat Daftar Isi Blog Lengkap Dan Support HTTPS

Bola Hero Gawai

Membuat Daftar Isi Blog Lengkap Dan Support HTTPS

Membuat Daftar Isi Blog Lengkap Dan Support HTTPS
Sebenarnya postingan ini muncul dari pertanyaan kang +Yandi Novriandi mengenai sitemap atau daftar isi blog seperti daftar isi yang digunakan di Kompi Ajaib tidak muncul di koneksi SSL / HTTPS. Kemudian saya mencoba untuk memperbaikinya dan alhamdulillah berhasil tampil di HTTPS dengan ikon gembok hijau di address bar browser.

Sebenarnya daftar isi yang digunakan di Kompi Ajaib ini dari postingan mas +Indra DP di blog infonya.indradp.com dengan sedikit penyesuaian.

Nah jika Anda tertarik untuk mencoba menggunakan daftar isi seperti Kompi Ajaib dan support HTTPS, silahkan ikuti langkahnya di bawah ini.


1. Langkah Pertama
Silahkan buat halaman statis atau PAGE untuk daftar isi dan silahkan simpan kode HTML dan javascript di bawah ini pada editor postingan mode HTML.


<div id="table-outer">
  <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>
<br />
<header id="result-desc"></header>
<br />
<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:window.location.origin,maxResults:10,numChars:270,thumbWidth:140,thumbHeight:95,navText:"Tampilkan artikel selanjutnya &#9660;",resetToc:"Kembali ke Awal",noImage:"//2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/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('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(/.*?:\/\//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.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>

2. Langkah Kedua
Silahkan simpan kode CSS di bawah ini di atas kode </head> dan ganti kode URL PAGE DAFTAR ISI DI SINI dengan URL Page Daftar Isi yang dibuat pada langkah pertama tadi.


<b:if cond='data:blog.url == &quot;URL PAGE DAFTAR ISI DI SINI&quot;'>
<style type='text/css'>
#table-outer{padding:7px 10px;margin:0 auto}
#table-outer table{width:auto;margin:0 auto;border:none!important;}
#table-outer table td{border:none!important;padding:0!important}
#table-outer form{font:inherit}
#table-outer label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0}
#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:0;padding:5px;font-family: Roboto,sans-serif!important;font-size:16px!important;font-weight:500!important;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#table-outer select option{min-height:1.4em!important;}
#table-outer input#feed-q{padding:5px 10px!important;}
#feed-container{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none}
#feed-container li{list-style:none;margin:0;padding:0;border-top:1px solid #eee;color:#555;width:auto;float:left;display:inline}
#feed-container li .inner{margin:15px 0;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}
#feed-container li a{text-decoration:none;color:#2C2C2C;font-weight:500}
#feed-container li a:hover{text-decoration:none;color:#E94141}
#feed-container li .news-text{margin-top:5px;line-height:1.3em!important}
#feed-container li img{margin:0 15px 5px 0;padding:7px 7px 7px 0;float:left;display:block;width:140px!important;}
#result-desc{margin:0;padding:0;}
#result-desc div,#result-desc span{display:block;margin:0;padding:5px 0 7px;color:#D64D52}
#result-desc div{color:inherit}
#feed-nav{margin:10px 0 30px;text-align:center;font-weight:500}
#feed-nav a,#feed-nav span{border:1px solid #dedede;border-radius:5px;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 (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!important}
}

.post-body{min-height:300px;background:url(https://lh6.googleusercontent.com/-UKClHRpzskg/VfOm1eLfT7I/AAAAAAAAiQw/1pwwhEsT49I/w220-h19-no/ajax-loader%2B%25281%2529.gif)50% 50% no-repeat!important;}
</style>
</b:if>

Jika Daftar Isi-nya tidak muncul, silahkan masuk ke Dashboard > Settings > Other > Site Feed, rubah Allow blog feed menjadi SHORT. Atau jika feed blognya di redirect ke FeedBurner, silahkan hapus redirect FeedBurner pada Post Feed Redirect URL.

Update:
Ada koreksi untuk bagian Filter artikel berdasarkan kategori jika labelnya lebih dari 1 kata maka spasinya akan berupa %20, dan untuk tabel di atas tampil dengan garis di beberapa blog. Untuk itu kode-kode di atas sudah saya perbaiki, jika Anda mengalami hal ini silahkan copy ulang kode di atas.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

40 Comments Add Comment

Hehehe tiasana mung ngoprek-ngoprek hungkul kang :) teu acan tiasa ngadamel nyalira :D

Balas

Mantap Kang Adhy ijin simpan..
Eee OOT kang susunan komentarnya dirubah ya..? dulu Disqus,Blogger,Facebook. Sekarang Bloggernya lebih dulu
cara merubahnya gimana kang...?
Maaf ngrepotin terus hehehe

Balas

Keren mas. salut dah :-bd

Balas

Tinggal di pindahkan tag konsionalnya pada template mas. Atau mungkin mas admin bisa lrbih substantif lagi penjelasannya

Balas

Pada css ini
.blogger-box,.facebook-box{display:none}
ganti .blogger-box dengan .disqus-box

Kemudian kode html ini rubah posisi menjadi di bawah disqus-bar
<div class='blogger-bar commentbtn' onclick='toggleVisibility(&apos;blogger-box&apos;)'>
Blogger
</div>


Dan pindahkan juga kode btncurrent dari disqus-bar ke html blogger-bar.

Balas

Saya mah hanya bisa berdecak kagum sama Kang Adhy dan para mastah disini, palinter pisan ngadamel CSS model beginian, saya mah gak nyampe ahh, hehehe...

Balas

bae, batur weh nu nyarieunan mah...wekekekekkk :D

Balas

Mantep tips nya om kompi.. Btw minta artikel membuat template blog sendiri beserta pengertian b: ind b include b if dan keluarganya dong om kompi..

Balas

Kang Adhy kalo sempet. Tolong buatin cara membuat multi komentar kaya di blog ini dong!!! Biar blog jadi lebih keren. :D

Balas

Kang Adhy kalo sempet. Tolong buatin cara membuat multi komentar kaya di blog ini dong!!! Biar blog jadi lebih keren. :D

Balas

sitemap full version, fast loading terima kasih mas adhi yg sllu kreatif dan inovatif

Balas

walah rupanya saya kemarin nyoba" di CSS yang nggak dirubah .blogger-box dengan .disqus-box hehehe.. oh ya mas yad, cara nambahin kolom parse di komentar blogger gimana ya? hehehe

Balas

Terus belajar kang, kita semua belajar :)

Balas

Mudah-mudahan bisa di lain kesempatan :)

Balas

Coba di sini mas http://www.kompiajaib.com/2016/02/memasang-komentar-disqus-blogger.html

Balas

Sama-sama mas, semoga bermanfaat :)

Balas

Hehehe...iya kalau ga diganti yang tampil tetap disqus.

Balas

Untuk konversi tool coba di sini http://www.kompiajaib.com/2014/01/membuat-tool-konversi-kode-di-atas.html

Balas

Boleh dicoba kang...
Ditunggu tutor selanjutnya....

Balas

Jadi pengen ganti sitemap ini..kerem

Balas

yahh keduluan komen nya , nanti lah praktek nya ;)
lastman follow up :D

Balas

Visit my blog : https://zulpc.blogspot.com/

Balas

Mantap kang?,.. ada pertanyaan sedikit kang :)
https://3.bp.blogspot.com/-cezhkkJcPAk/V7WZoHX9X3I/AAAAAAAAJ50/qJZkxnJDCakfEWutZUDRCnn4eQZL5kb1QCLcB/s1600/Pertanyaan%2Bkompi.jpg

Balas

Coba copy sekali lagi kodenya kemudian di sisi kanan editor postingan pada untuk option pilih Show HTML literally atau tunjukan HTML apa adanya.

Balas

Makasih banyak kang ady

Balas

Makasih banyak kang ady

Balas
This comment has been removed by the author.
This comment has been removed by the author.

Kalau untuk hanya masukin 1 label tertentu saja gimana yah mas ? tolong pencerahannya
Terima kasih :)

Balas

Coba di postingan ini mas http://www.kompiajaib.com/2016/04/recent-post-by-label-untuk-mengganti.html

Balas

Udh saya coba, tapi gk muncul* mas artikelnya, cuman loading aj trus. . .

Balas

Jika Daftar Isi-nya tidak muncul, silahkan masuk ke Dashboard > Settings > Other > Site Feed, rubah Allow blog feed menjadi SHORT.

Balas

Udh jadi mas
Terima kasih banyak atas rekomendasinya
boleh mampir mas k blog saya
he he he . . .

Balas

Wah keren mas, ternyata punya dealer mobil ya?
Mudah-mudahan usahanya tambah sukses dan barokah, amiin.

Balas

terima kasih kang berhasil :)

Balas
This comment has been removed by the author.
This comment has been removed by the author.

om bisa bikin kayak gini gk oms untuk di blok
tapi silder berita sesuai lebel pilihan 3 lebel kita pengen nampilin di silder tersebut
contonya kayak gini ni lebelnya berbeda dalam satu silder
https://4.bp.blogspot.com/-FNMb1JzsOgw/V8nCsrclzBI/AAAAAAAAHE4/h-jT_MmelT4h_CDv3ZvIi59RKfwB3N7XwCLcB/s640/Untitled-1.jpg

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×