Cara Memasang Daftar Isi 2 Kolom dengan Navigasi
Snippet WidgetCara 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 ►",
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.
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.