Deny Listianto | Februari 17, 2018

Cara Memasang Link Sumber Otomatis

Cara Memasang Link Sumber Otomatis

Cara Otomatis Menambahkan Link Sumber - Kali ini saya akan berbagi sedikit tips yang saya pelajari dari blog mbak Arlina Design di blognya www.arlinadzgn.com.

Tips ini berfungsi agar pengunjung sebuah blog yang menyalin sebuah teks pada blog tersebut lalu mempublikasikan di blognya, seharusnya ia menambahkan link sumber dari situs yang ia salin teksnya. Namun, banyak juga yang mengabaikan hal seperti ini.

Nah, sobat jangan khawatir untuk menghindari hal itu, disini saya akan memberikan kode yang akan secara otomatis memunculkan link sumber dari teks yang ia salin.

Dengan cara ini maka artikel kita yang di copy paste oleh orang lain akan muncul link sumbernya secara otomatis. Sebetunya cara ini sangat sederhana sekali kok hanya dengan menambahkan beberapa kode script ke dalam blog kita.

Link ini dapat di hapus dengan mudah. Namun, setidaknya ini akan memberi sedikit peringatan bagi yang menyalin teks dalam blog sobat.

Bagi yang ingin mencoba Tips ini, silahkan ikuti tutorial berikut :

Cara Otomatis Menambahkan Link Sumber

Login Blogger > Tema > Edit HTML > Kemudian tambahkan kode dibawah sebelum kode ]]></body> > Simpan Tema

Versi 1

<script type='text/javascript'>
//<![CDATA[
// Copy Text
function nocopas(){var e=window.getSelection();pagelink="Read more :"+document.location.href,copytext=e+pagelink,newdiv=document.createElement("div"),newdiv.style.position="absolute",newdiv.style.left="-99999px",document.body.appendChild(newdiv),newdiv.innerHTML=copytext,e.selectAllChildren(newdiv),window.setTimeout(function(){document.body.removeChild(newdiv)},100)}document.addEventListener("copy",nocopas);
//]]>
</script>

Versi 2

<script type='text/javascript'>
//<![CDATA[
!function(e,t){var n="getSelection",o="removeAllRanges",i="addRange",l="parentNode",a="firstChild",d="appendChild",r="removeChild",s="test",c="innerHTML";if(e[n]){var p,g,f,h,u,y;t.addEventListener("copy",function(C){for(g=C.target;3===g.nodeType;)g=g[l];if(h=t.createElement("div"),(p=e[n]())&&p.rangeCount&&(p=p.getRangeAt(0))&&(f=p.cloneRange(),p=p.cloneContents())){for(;u=p[a];)h[d](u);if(!/^(pre|code)$/i[s](g.nodeName||"")&&!/(^|\s)no-attribution(\s|$)/i[s](g.className||"")){var v=e.location.href;h[c]+="<br><br>&copy; "+t.title+'<br>Source: <a href="'+v+'">'+v+"</a>"}y=t.createRange(),t.body[d](h),y.selectNodeContents(h),p=e[n](),p[o](),p[i](y),setTimeout(function(){h[l][r](h),p[o](),p[i](f)})}},!1)}}(window,document);
//]]>
</script>

Sobat Bisa mengganti tulisan yang saya tandai

Demikian Tips kali ini. Semoga Bermanfaat...

Source : http://www.arlinadzgn.com/2017/09/cara-otomatis-menambahkan-link-sumber.html

Deny Listianto | Februari 12, 2018

Cara Buat Lazy Load Seperti Arlina Design 2018

Cara Buat Lazy Load Seperti Arlina Design 2018

Hallo para blogger, kali ini saya akan berbagi plugin untuk mempercepat loading blog. Dengan cara menambahkan atau memasang Plugin Lazy Load di blog kita.

Lazy Load untuk kita para pemula sering di sebuat Effek Loading Gambar di blog, yang bisa di artikan sebagai sebuah plugin atau script yang dibangun dan dikembangkan khusus untuk platform Blogger.

Fungsinya untuk menunda pemanggilan objek ketika objek masih belum dibutuhkan. Dengan kata lain, gambar, video, dan komponen lain yang ada dalam blog tidak akan dimuat sebelum anda menyentuh atau mengarahkan kepada konten tersebut.

Sehingga dengan ini, loading blog akan sedikit berkurang karena hanya memuat halaman yang terbuka saja, ketika anda scroll cursor anda ke bawah, baru disini semua halaman akan dimuat secara keseluruhan.

Tentunya jika blog anda semakin cepat untuk diakses semakin berpotensi untuk menarik perhatian visitor karena blog tidak membutuhkan waktu yang lama untuk memuat seluruh halaman, sehingga para pengunjung pun akan semakin betah berselancar di blog anda.

Yosh, sudah menegertikan apa itu Lazy Load. Baiklah mari kita mulai cara pasangnya di blogger kita.

Cara Pasang Lazy Load Seperti Arlina Design 2018

1. Buka Dasbor Blogger sobat.

2. Pilih menu Tema lalu Edit HTML

3. Cari Kode </body> dan pastekan kode di bawah ini di atasnya.

<script type="text/javascript">
//<![CDATA[
// Lazy Load
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container:window})"})})(jQuery);$(function(){$(".post img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjavTh8UbzxNoi2TshT3hr2KJVTI6gbbVDo3ZPuASqleaxOPX9fj1UYE7KGyTJREnuphFK5dGrNCNOnp1QirvldLPctEd4ERA89cbmXlUeqjcHyyK2LZ97WayGp6u5e3hAAFUoVZw7Z81I/s320/LazyLoading.gif",effect:"fadeIn",threshold:"0",effectTime:"2000"})});
//]]>
</script>

Anda juga dapat mengganti effek loadingnya dengan cara mengganti url yang saya tandai di atas dengan url gambar (.jpg,.gif,.png,dll) yang telah di upload

Tampilan Lazy Load-nya seperti gambar di bawah :

Ok, silahkan di coba semoga berhasil...

Deny Listianto | Februari 05, 2018

Pengenalan Docker

Pengenalan Docker

Hai Semua,,, Kali ini kita akan belajar Docker. Docker?apa itu.. sebenarnya saya baru saja mengenal Docker.

Saat belajar bereng Kulgram Docker-Aliansi Pengajar Administrasi Server (https://t.me/aliansipengajarcerdas) oleh pak Samsul Ma'arif. Baiklah mari kita mulai...

Docker?

Docker adalah Aplikasi open source yang menyediakan platform terbuka dalam bentuk teknologi virtualisasi berbasis wadah/container.

Manfaat utamanya adalah mengemas aplikasi di "Container," yang memungkinkannya portabel di antara sistem yang menjalankan sistem operasi Linux (OS). Mirip seperti Virtual Machine (VM) namu lebih ringan karena Docker tidak membawa keseluruhan sistem operasi, melainkan berbagi sistem dengan host induknya.

Komponen Docker

Docker memiliki banyak komponen, setiap komponen itu saling membutuhkan satu sama lain, berikut adalah komponen pembentukan docker:

• Docker Image, sebuah paket ringan yang berdiri sendiri dan dapat dieksekusi, yang mencakup semua yang dibutuhkan untuk menjalankannya perangkat lunak, termasuk kode, runtime, pustaka, variabel lingkungan, dan berkas konfigurasi.

• Docker Container, adalah sebuah runtime dari sebuah image. Image akan berada di memori ketika benar-benar dieksekusi.

• Docker Registry, merupakan sebuah server yang menyimpan image di publik/private repository agar dapat diakses oleh pengguna lain.

• Docker File, merupakan sebuah skrip otomasi (builder) yang membangun sebuah image. Sebuah Docker file merupakan text atau skrip yang berisi semua perintah yang biasanya kita lakukan manual untuk membangun sebuah image.

• Repository,Docker menggunakan kata ini mirip dengan yang digunakan pada Github dan source control system lainnya, namun jenis yang berbeda. Repository berupa ID untuk setiap image yang disimpan dalam registry. Ketika kita menjalankan perintah docker commit makan image itu akan kita beri nama dengan format namafile/nama_image.

• Docker index terkait dengan Docker Hub Registry, meski keduanya memiliki fungsi yang berlainan. Index mengatur user account, permission, search, tagging dan hal lain yang tersimpan oada web interface public. Ketika kita melakukan eksekusi perintah docker run untuk menjalankan suatu docker image, hail itu digunakan untuk mencari data pada index bukan registry.

Selanjutnya, kita akan pelajari perbedaan antara VM (Virtual Machine) dengan Container.

VM (Virtual Machine) adalah perangkat lunak yang dapat mengisolasi sebuah mesin komputer serta dapat menjalankan semua program yang sama seperti pada komputer aslinya atau biasa disebut duplikat dari sebuah mesin komputer asli. Container dalam bahasa komputer adalah suatu teknologi yang dapat mengisolasi sebuah proses dari proses yang lainnya yang akan mengisolasi library dan aplikasi yang digunakan saja tanpa mengisolasi seluruh komponen seperti perangkat keras, kernel, sistem operasi, dan lain – lain.

Walaupun keduanya sama-sama berjalan pada virtualisasi, namun VM dan Container ini memiliki beberapa perbedaan. Diantaranya yaitu :

• Salah satu perbedaan terbesar antara container dengan VM adalah container berbagi kernel sistem milik host dengan container lainnya. Sedangkan, VM yang memiliki sistem operasi masing-masing, tentu saja memiliki sistem kernel masing-masing pula. 

• Container lebih efektif dan ringan dibandingkan dengan VM (Virtual Machine). Karena container hanya mengisolasi library dan aplikasi yang akan dijalankan saja. Berbeda dengan Virtual Machine yang mengharuskan untuk mengisolasi seluruh komponen seperti, perangkat keras, kernel, sistem operasi, dan lain – lain.

• Container dapat melakukan efisiensi resource dengan sebaik – baiknya pada system. Berbeda dengan VM, Container ini dapat melakukan efisiensi penggunaan resource dengan sangat baik. Sehingga, ketika salah satu container sedang siap, maka container yang satunya bisa menggunakan resource milik container yang sedang iddle, begitupun sebaliknya.

Adapun perbedaan Lainya, yang lebih mudah dipahami :

Mesin Virtual (VM)	Container
Representasi virtualisasi level perangkat keras	Representasi virtualisasi level sistem operasi
Berat	Ringan
Penyediaan lambat	Penyediaan waktu-nyata dan skalabilitas
Performa terbatas	Performa asli
Terisolasi penuh dan karenanya lebih aman	Isolasi level proses dan karenanya kurang aman

Deny Listianto | Februari 02, 2018

Download Template Blogger Mirip PanduanIM

Download Template Blogger Mirip PanduanIM

Hallo Sobat, kali ini saya akan berbagi template free atau gratis buatan Bung Franki (bungfrangki.com) yang sangat mirip dengan template PanduanIM (panduanim.com), penasaran apa nama templatnya dan bagamana tampilanya.

Template diberi nama Gridisme dengan loading yang super cepat dan tampilan yang cukup keren. Yang penasaran dengan tampilanya bisa melihatnya dengan link di bawah ini :

• DEMO

Sebenarnya blog PanduanIM menggunakan platform Wordpress Self Host yang artinya struktur templatenya jelas beda dengan Blogger. Dan kami menemukan Template yang mirip dengan PanduanIM yang bisa digunakan untuk template Blogger sobat.

Template ini sekilas memang mirip dengan template blog panduanim seperti pada header, Single post page, Sidebar, dll. Tetapi template ini tidak sama persis.

Ada juga perbedaanya:

• Warna
• Fungsi Elemen
• Font
• Tampilan home page : Gridisme: tampilan grid sedangkan milik blog panduanim list.

Yosh... Langsung saja lihat fiturnya :

Features	For Free	Premium
Full Responsive Design Cek	Yes	Yes
Fully SEO Optimized - Cek	Yes	Yes
Mobile Friendly Design - Cek	Yes	Yes
Google Testing Tool Validator - Cek	Yes	Yes
Valid HTML5 - Cek	Yes	Yes
Valid CSS3 - Cek	Yes	Yes
Mobile Menu Customize (can see with mobile access)	Yes	Yes
Dynamic Heading	Yes	Yes
Fastest Loading	Yes	Yes
Dynamic Heading	Yes	Yes
Grid Style	Yes	Yes
Advance Search Engine Optimization	Yes	Yes
Auto resize thumbnail image	Yes	Yes
Breadcrumbs SEO	Yes	Yes
Well Documentation	Yes	Yes
Social Share Button Responsive	Yes	Yes
Threaded Comment Responsive	Yes	Yes
Ads Ready	Yes	Yes
Auto Author Image	Yes	Yes
Custom Error 404 Page	Yes	Yes
Light Base Theme Color	Yes	Yes
Related Posts with Thumb Responsive	Yes	Yes
Custom Contact Form Widget (static page)	Yes	Yes
Recent Posts Widget	Yes	Yes
Custom Post Table	Yes	Yes
Sticky Widget Sidebar	Yes	Yes
Share Button Responsive	Yes	Yes
Navigation with Number (home page)	Yes	Yes
Remove Footer Credit	No	Yes
No Encrypted Scripts	No	Yes
Lifetime Template Updates	No	Yes
Sell (resell) template	No	No

Bagi yang ingin membeli atau mendownloadnya bisa kunjungi http://www.themeindie.com/ .

Deny Listianto | Januari 21, 2018

Cara Memasang Contact Form Pada Halaman Statis

Cara Memasang Contact Form Pada Halaman Statis

Untuk memudahkan pengunjung blog kita menghubungi kita. Mulai dari mengirimkan saran dan kritikan terhadap blog, bertanya kepada admin blog.

Bahkan sebagai sarana pembuka obrolan sampai curhat-curhatan masalah pacar, rumah tangga, keuangan dan kejombloan.

Cara ini bisa di terapkan untuk blog sobat semua terutama blog jual beli, marketing, dll.

Contact form pada dasarnya sudah di sediakan di blogger yang berbentuk widget. Jadi, kita bisa menempatkanya pada sidebar blog kita namun kali ini kita mencoba menempatkanya di halaman statis blog, ini kedengaranya sedikit sulit jika belum mempraktekanya.

Ok langsung saja disini saya tidak akan membahas mengenai fungsi dan kenapa widget formulir kontak mempunyai peran yang penting pada sebuah blog tapi disini saya akan berbagi tips tentang cara memasang formulir kontak pada halaman statis blogger, silahkan disimak.

Cara Memasang Formulir Kontak Pada Halaman Statis 

1. Login ke blogger dan pilih blog > Tata Letak > Tambahkan Gadget > Gadget Lainnya > Formulir Kontak. Perhatikan gambar berikut ini.

Sebelumnya Anda sudah memasang font awesome pada template, jika belum silahkan tambahkan link dibawah ini sebelum </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

2. Selanjutnya silahkan buka Template > Edit Template > terapkan kode di bawah ini sebelum  </style> atau ]]></b:skin>

#ContactForm1 {
display: none;
}

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
width: 300px;
height: auto;
margin: 10px auto;
padding: 10px;
background: #fdfdfd;
color: #666;
border: 1px dashed #ddd;
transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-email-message {
width: 450px;
height: 175px;
margin: 10px auto;
padding: 10px;
background: #fdfdfd;
color: #666;
font-family: 'Roboto',sans-serif;
border: 1px dashed #ddd;
transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
background: #fff;
outline: none;
border: 1px dashed #f8a82a;
}

#ContactForm1_contact-form-submit {
font-family: 'Roboto';
font-size: 15px;
width: 101px;
height: 35px;
float: left;
color: #fff;
padding: 0;
margin: 10px 0 3px 0;
cursor: pointer;
background: #aaa;
border: none;
border-radius: 2px;
transition: background 0.4s linear;
}

#ContactForm1_contact-form-submit:hover {
background: #f8a82a;
}

#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message {
width: 450px;
margin-top: 35px;
}

3. Simpan template.

4. Perhatikan kembali menu di dasbor blog, klik Laman > Laman Baru > HTML. Kemudian hapus kode yang ada, lalu ganti dengan kode berikut ini.

<form name="contact-form">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-user"></i> Nama</span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  

<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-envelope"></i> Alamat Email <span style="color: red; font-weight: bolder;">*</span></span> 
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  

<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-pencil"></i> Isi Pesan <span style="color: red; font-weight: bolder;">*</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> 
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />  
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

5. Publikasikan dan lihat hasilnya.

Untuk font yang digunakan dan lainnya silahkan sesuaikan kembali dengan template Anda.

Referensi :
http://blog.kangismet.net/2013/05/memasang-widget-contact-form-blogger-pada-halaman-statis.html
http://www.arlinadzgn.com/2014/11/memasang-formulir-kontak-pada-halaman-statis.html

Deny Listianto | Januari 20, 2018

Membuat Daftar isi Otomatis Berdasarkan Label

Membuat Daftar isi Otomatis Berdasarkan Label

Untuk memudahkan para pengunjung kita, yang kebingungan mencari artikel yang mereka butuhkan inilah suatu cara membantu para pengunjung blog yang kebingungan itu dengan cara membuat halaman Daftar Isi atau Sitemap artikel blog kita.

Daftar isi atau sering di sebut sitemap ini, bisa membantu para pengunjung blog kita yang mecari artikel yang mereka butuhkan

Sitemap juga bisa di fungsikan untuk menginformasikan kepada search engine ( Google misalnya ) tentang halaman-halaman pada situs kita yang bisa di crawl.

Bentuk paling sederhana Sitemap adalah berupa file .xml yang berisi daftar url sebuah situs beserta metadata-nya masing-masing. Metadata misalnya : kapan terakhir di-update.

Biasanya file sitemap.xml ini sudah otomatis ada dan bisa sobat lihat melalui URL ini:

http://namablogmu.blogspot.com/sitemap.xml

Penampakan file sitemap.xml tersebut kurang lebih seperti ini:

Sitemap bisa kita buat di halaman statis blog kita dengan cara berikut ini.

Widget yang saya bagikan ini merupakan hasil modifikasi dari widget yang dibuat oleh Arlina Design di blognya www.arlinadzgn.com.

Ok, Langsung saja berikut caranya :

Membuat Daftar isi Otomatis Berdasarkan Label

1. Buka Dasbor Blogger.
2. Buka Menu Halaman lalu buat Halaman Baru. 
3. Pindah ke HTML Lalu masukkan kode berikut:

<div dir="ltr" style="text-align: left;" trbidi="on">
<style scoped="" type="text/css">
.table-of-content{background-color:#fff;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.2)}
.table-of-content .toc-header{color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #ccc;transition:initial}
.table-of-content .toc-header:hover{background-color:#fdfdfd}
.table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}
.table-of-content .toc-header.active{color:#4e6cef}
.table-of-content .toc-header.active:before{border-color:#666 transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-of-content .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}
.table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#444359!important;transition:initial}
.table-of-content a{color:#d9d9d9;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#a2a2a9;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#4e6cef;text-decoration:none;transition:initial}
.post ol li:before{display:none}
</style>

<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span></div>
<script>
var toc_config = {
    url: 'https://www.denylistianto.com/',
    containerId: 'table-of-content',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#5c5a78;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">baru</strong>',
    sortAlphabetically: {
        thePanel: true,
        theList: true
    },
    maxResults: 9999,
    activePanel: 1,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
    slideCallback: {
        down: function() {},
        up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: '_toc',
    delayLoading: 0
};
</script>
<script src="https://rawgit.com/Deny-Listianto/tips/master/Sitemap1.js"></script>
</div>

Ganti Kode url: 'https://www.denylistianto.com/' dengan url blog sobat, dan showNew: 15 adalah jumlah artikel yang akan di tampilkan dengan tulisan Baru/New

Terakhir Publikasikan dan lihat hasilnya.

Demo

Demikian tutorial Membuat Daftar isi Otomatis Berdasarkan Label, semoga bermanfaat, semoga bermanfaat.

Deny Listianto | Januari 16, 2018