BLOG DESIGN, WIDGET PANEL SITEMAP BY LABEL

Ref. : Arlina Design

Jangkr*k.... sempat nulis artikel ini sebelumnya, sudah published, terus maksud hati mau ngrapiin lagi penulisannya biar tidak terlalu panjang (pake textarea container), berhubung saya jagoan IT yang sudah kondang seantero jagad raya (baca: newbie! qiqiqiqiq), bolak-balik click "Compose" - "HTML", ctrl+C sini ctrl+V sana, dll.... dan hasil akhirnya: postingan saya lenyap! HAHAHAHA asiyunguyuuuh... 😂 ^%$*)(&#!$^>#@

Ya wis, berhubung saya orangnya easy-come-easy-go yah let-it-go lah, lah wis piye.... ape diapakno neh, barang wis kebacut 😁 Maka, ya beginilah - dengan semangat belajar yang berkobar² sesuai instruksi bapak menteri Pendidikan dan Kebudayaan (yang disingkat dengan indahnya menjadi Depdikbud) - terpaksa saya harus mengetik ulang artikel tersebut. "Untungnya" saya tidak mempunyai backup catatan atau notepad sama sekali tentang artikel tersebut, cuma modal ingatan yang masih tersimpan di sel penjara otak, jadi ya semakin asiklah kegiatan saya ngetik-mengetik ngeblog-mengeblog ini..... hihihihi

OK, let's start again guys.... cemunguuud (kata anak² alay jaman now)

Catatan, berhubung ini nulis ulang, sebelum ku bosan sebelum kau muntah (lagunya Iwan Fals yah?? 🙉) maka mohon maaf untuk urusan detail teknis yang terlalu "awam" saya skip-skip saja kali ini yah, langsung ke point² pentingnya saja. Bagi yang masih bingung coba cari tiang terdekat, sapa tau bisa nyanyi lagu india disitu.... 😛

OK, sesuai judul, artikel kali ini adalah tentang Blog Design : membuat widget panel SITEMAP berdasarkan label postingan. Contoh penampakan bisa anda lihat seperti pada tab SITEMAP blog ini, silahkan ke tekapeh.

Untuk membuatnya sangat sangat sangat mudah, tidak diperlukan keahlian programming tingkat dewa, cukup satu langkah sederhana saja. Ikuti caranya dibawah ini : 👇

Langkah Pertamax, masuk ke Blogger, tap "Pages" pada side panel sebelah kiri, lalu buat halaman baru "New Page". Beri judul pada Title (misal "Sitemap", "Daftar Isi", "TOC" atau "Beranak Dalam Kubur" setra njenengan). Berikutnya - ini penting - pilih mode HTML (lihat pada bagian sebelah kiri atas, ada 2 tombol toggle "Compose" dan "HTML"). Kemudian pada bagian isi halamannya copy-paste kan kode html dibawah ini 👇

<div dir="ltr" style="text-align: left;" trbidi="on"> <style scoped="" type="text/css"> .table-of-content{background-color:#222;color:#ddd;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,.1)} .table-of-content .toc-header{color:#fff;font-family:inherit;font-weight:400;font-size:14px;background-color:#333;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-top:1px solid #444;border-bottom:1px solid #222;transition:initial} .table-of-content .toc-header:hover{background-color:#3a3a3a} .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{background:#3a3a3a;color:#fff} .table-of-content .toc-header.active:before{border-color:#fff 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:#222!important;transition:initial} .table-of-content a{color:#aaa;text-decoration:none;font-size:86%;transition:initial} .table-of-content a:visited{color:#666;transition:initial} .table-of-content a:hover,.table-of-content a:visited:hover{color:#fff;text-decoration:none;transition:initial} .post ol li:before{display:none} </style> <br /> <div class="table-of-content" id="table-of-content"> <span class="loading">Sedang memuat. Tunggu bentar ya....</span></div> <script> var toc_config = { url: 'https://pokokepok.blogspot.com/', containerId: 'table-of-content', showNew: 5, newText: ' <b style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#009fef;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">NEW</b>', 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://cdn.jsdelivr.net/gh/Arlina-Design/redvision@master/daftar-isi-tea.js"></script> </div>

Langkah Kedua adalah customisasi. Paling pokok adalah ganti dulu alamat blog yang menjadi target, sesuaikan dengan alamat blog anda sendiri. Cari dan ganti kode ini → url: 'https://pokokepok.blogspot.com/'. Jumlah showNew: 5 juga bisa anda ubah sesuai selera, menunjukkan berapa jumlah posting yang akan ditandai dengan label "NEW". Labelnya sendiri bisa anda pilih sesuai style blog, misalnya diganti dengan label "BARU" atau "ANYAR" terserah. Untuk menggantinya cari ekspresi ini : >NEW</b>. Untuk customisasi hal² lain seperti warna, ukuran, dll silahkan oprek sendiri keseluruhan kode html-nya, jika anda tertarik dan punya waktu.... kalau saya pribadi sih makaseeh 😀 ini saja sudah keren kok.... DWYOR ya (do with your own risk).

Langkah terakhir "Save" page anda, dan "Publish". Kemudian atur penempatan tab-nya di pengaturan "Layout". Selesai.

CATATAN :
Jika setelah anda melakukan langkah² tersebut diatas anda mengalami masalah seperti saya, panel sitemap muncul tapi dalam keadaan freeze terexpand semua tombol segitiga kecilnya (seharusnya hanya satu label yang terexpand pada satu waktu, yang lain "tertutup"), maka.... berdasarkan hasil diskusi dengan mbak Arlina sebagai pemilik program, kemungkinan belum "terinstall" jQuery pada theme yang anda gunakan sebagai template blog. Dalam hal ini anda harus memasangkannya terlebih dahulu. Caranya : ketikkan kode dibawah ini 👇 ke template blog anda. Masuk ke "Theme", lalu click/tap "Edit HTML". Ketikkan sebelum/diatas <head> (gunakan fungsi search ctrl+F untuk mencari jika males melototin satu persatu kode html-nya).

/* CSS PEMASANGAN JQUERY VERSI 3.3.1 */ <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>

Selesai, problem's fixed.... Insya Allah 😊 


Jangan pernah berhenti belajar
SALAM PUSTAKA

You might also like :