Cara Memasang Daftar Isi 2 Kolom dengan Navigasi

Cara Memasang Daftar Isi 2 Kolom dengan Navigasi

Snippet Widget

Namina Kiky

6/22/2017

Kali ini saya akan share Cara Memasang Daftar Isi 2 Kolom dengan Navigasi di Blogger. Tutorial Ini bersumber dari DTE, saya hanya memodifikasi sedikit CSS nya agar bisa tampil menjadi 2 kolom dan lebih menarik.

Cara Memasang Daftar Isi 2 Kolom dengan Navigasi

Buat post baru di halaman statis blog > Setelah itu pilih mode HTML bukan Compose > Selanjutnya salin kode berikut dan paste di kolom HTML :

<style scoped="" type="text/css">
#toc-outer{color:black;font:normal 11px/14px Arial,Sans-Serif;height:auto;margin:0 auto;overflow:hidden;padding:0;text-align:left}
#loadingscript{padding:0 0;height:37px;text-indent:-9999px;color:transparent;background:#fff url('data:image/gif;base64,R0lGODlhEAALALMMAOXp8a2503CHtOrt9L3G2+Dl7vL0+J6sy4yew1Jvp/T2+e/y9v///wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCwAMACwAAAAAEAALAAAEK5DJSau91KxlpObepinKIi2kyaAlq7pnCq9p3NZ0aW/47H4dBjAEwhiPlAgAIfkECQsADAAsAAAAAAQACwAABA9QpCQRmhbflPnu4HdJVAQAIfkECQsADAAsAAAAABAACwAABDKQySlSEnOGc4JMCJJk0kEQxxeOpImqIsm4KQPG7VnfbEbDvcnPtpINebJNByiTVS6yCAAh+QQJCwAMACwAAAAAEAALAAAEPpDJSaVISVQWzglSgiAJUBSAdBDEEY5JMQyFyrqMSMq03b67WY2x+uVgvGERp4sJfUyYCQUFJjadj3WzuWQiACH5BAkLAAwALAAAAAAQAAsAAAQ9kMlJq73hnGDWMhJQFIB0EMSxKMoiFcNQmKjKugws0+navrEZ49S7AXfDmg+nExIPnU9oVEqmLpXMBouNAAAh+QQFCwAMACwAAAAAEAALAAAEM5DJSau91KxlpOYSUBTAoiiLZKJSMQzFmjJy+8bnXDMuvO89HIuWs8E+HQYyNAJgntBKBAAh+QQFFAAMACwMAAIABAAHAAAEDNCsJZWaFt+V+ZVUBAA7') no-repeat 50% 50%}
.itemposts{float:left;height:auto;overflow:hidden;width:47%;box-shadow:1px 1px 5px #C3C3C3;background:none repeat scroll 0% 0% #F9F9F9;border:1px solid #FFF;margin:3px 5px 8px;padding:0 3px}
.itemposts h6{border-bottom:1px solid #CCC;color:#333;font:bold 12px Arial;height:15px;overflow:hidden;text-transform:none;margin:0 0 5px;padding:2px 6px!important}
.itemposts h6 a:hover{color:#38f;text-decoration:none}
.itemposts img{background-color:#fff;border:1px solid #ccc;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;float:left;height:65px;margin:0 7px 5px 0;padding:3px;width:65px;z-indent:99999px}
.itemposts .iteminside{}
.itemposts .itemfoot{border-top:1px solid #CCC;clear:both;overflow:hidden;padding:4px 5px}
.itemposts .itemfoot a.itemrmore{color:#333;float:right;font-weight:bold;text-decoration:none}
.itemposts .itemfoot a.itemrmore:hover{text-decoration:underline}
#itempager{clear:both;padding:10px 0}
#pagination,#totalposts{color:#000;display:block;font:bold 10px Verdana,Arial,Sans-Serif;margin-bottom:10px;text-align:center;padding:0}
#pagination span,#pagination a{color:#FFF;display:inline;margin:0 1px;padding:2px 5px;text-indent:0;background-color:#068BC9;background-image:linear-gradient(#068BC9 0%,#3161C2 50%,#3059AB 51%);border:1px solid #3161C2;text-decoration:none;border-radius:10px}
#pagination a:hover{background-color:#333}
#pagination span.actual{background-color:black}
#pagination span.hidden{display:none}
</style>
<script>
var showPostDate   = true,
showComments   = true,
idMode         = true,
sortByLabel    = false,
labelSorter    = "JQuery",
loadingText    = "Loading...",
totalPostLabel = "Jumlah posting:",
jumpPageLabel  = "Halaman",
commentsLabel  = "Komentar",
rmoreText      = "Selengkapnya &#9658;",
prevText       = "Sebelumnya",
nextText       = "Berikutnya",
siteUrl        = "https://www.naminakiky.com",
postPerPage   = 10,
numChars       = 150,
imgBlank       = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC";
</script>
<script src="https://cdn.jsdelivr.net/gh/Indzign/theme@master/daftarisidua.js"></script>

Ganti https://www.naminakiky.com dengan url blog Anda.

• DEMO

Opsi	Nilai	Keterangan
showPostDate	true	Ganti nilainya menjadi false jika Anda tidak ingin menampilkan bulan terbit artikel.
	false
showComments	true	Ganti nilainya menjadi false jika Anda tidak ingin menampilkan jumlah komentar pada artikel.
	false
idMode	true	Jika bernilai true, sistem penaggalan artikel akan menjadi berbahasa Indonesia. Jika bernilai false sistem penanggalan artikel akan berubah menjadi berbahasa Inggris.
	false
sortByLabel	true	Digunakan untuk memfilter artikel/posting. Jika ingin menampilkan posting dengan kategori tertentu saja, pilihlah nilai true. Setelah itu tentukan nama label pada variabel labelSorter.
	false
labelSorter	"JavaScript", "Widget", ... (nama label)	Tentukan nama label jika opsi sortByLabel bernilai true.
totalPostLabel	"Jumlah posting:", ... (teks)	Tentukan keterangan jumlah posting (yang di bawah navigasi).
jumpPageLabel	"Halaman", ... (teks)	Tentukan keterangan lompatan posting (yang di bawah navigasi).
commentsLabel	"Komentar", "Comments", ... (teks)	Digunakan untuk menentukan label jumlah komentar (contoh: 10 Komentar).
rmoreText	"Baca Selengkapnya", "Read More", ... (teks)	Digunakan untuk menentukan label link menuju posting asli.
prevText	"Sebelumnya", "Previous", ... (teks)	Digunakan untuk menentukan label navigasi mundur.
nextText	"Berikutnya", "Next", ... (teks)	Digunakan untuk menentukan label navigasi maju.
siteUrl	(URL Blog)	Ganti URL ini dengan URL blog Anda.
postsPerPage	10, 30, ... (numerik)	Digunakan untuk menentukan jumlah posting yang tampil pada satu halaman.
numChars	100, 200, ... (numerik)	Digunakan untuk menentukan jumlah karakter ringkasan posting.
imgBlank	no-image.jpg (URL Gambar)	Gambar cadangan jika posting yang tampil tidak memiliki gambar.

Demikian tutorial Cara Memasang Daftar Isi 2 Kolom dengan Navigasi di Blogger, selamat mencoba.

Namina Kiky