Memasang Indikator ToC pada Template Median Ui

Hallo semua, pada halaman ini saya akan membagikan cara memasang indikator table of conten. Sebagai contoh kalian bisa melihat pada samping kanan pada postingan ini. Jika kamu tertarik silahkan simak baik-baik.

Sebenarnya membuat toc atau table of content cukup mudah dan simple. Namun tak dipungkiri banyak para pemula yang baru terjun ke dunia blogging dan masih butuh bimbingan. Meskipun sudah banyak yang membagikan cara ini, akan tetapi sebagai orang yang suka bersaing saya tetap membagikannya juga agar ikut bersaing pada mesin pencarian.

Memasang Indikator ToC pada Template Median Ui

Pertama buka dashboard blogger > tema > edit html lalu salin kode css dibawah ini dan letakan diatas kode </style> atau ]]</b:skin>

Indikator ToC Median Ui V1.7

.tocB span:before{content:'';display:block;width:12px;height:12px;background-color:var(--lightLink);border:2px solid var(--themeBg);border-radius:50%;position:absolute;top:5px;left:12px;animation:indicator 1s ease infinite;-webkit-animation:indicator 1s ease infinite;z-index:1;}
@-webkit-keyframes indicator{0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}}
@keyframes indicator{0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}}

Indikator ToC Median Ui V1.6

.tocC:before{content:'';display:block;width:12px;height:12px;background-color:var(--linkC);border:2px solid var(--bodyB);border-radius:50%;position:absolute;top:5px;left:12px;animation:indicator 1s ease infinite;-webkit-animation:indicator 1s ease infinite;z-index:1}
@-webkit-keyframes indicator{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@keyframes indicator{0%{opacity:0}50%{opacity:1}100%{opacity:0}}

Indikator ToC Median Ui V1.5

.Blog .post-tocContainer .show:before{content:unset;display:block;position:absolute;width:10px;left:13px;border-radius:50px;top:7px;height:10px;background:#555;webkit-animation:indicator 1s ease infinite;-moz-animation:indicator 1s ease infinite;animation:indicator 1s ease infinite}
@-webkit-keyframes indicator{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@-moz-keyframes indicator{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@keyframes indicator{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.tableOfIcon:before { content: ''; display: block; width: 12px; height: 12px; background-color: var(--link-color); border: 2px solid var(--content-bg); border-radius: 50%; position: absolute; top: 8px; left: 15px; animation: indicator 1s ease infinite; -webkit-animation: indicator 1s ease infinite;}

Penutup

Untuk memasang indikator toc pada template median ui yang lainnya, sebenarnya sama aja hanya perlu menyesuaikan kode css diatas.

Sekian pembahasan kali ini, jika ada yang ingin ditanyakan jangan ragu untuk menuliskannya pada kolom komentar. Dan baca juga artikel lainnya untuk mendapatkan informasi dan tips seputar blogging.