Cara Membuat Daftar Isi di Blogger Keren Terbaru 2018

  • Whatsapp
Cara Membuat Daftar Isi di Blogger Keren Terbaru 2018

Hay sahabat lapaklama.com, Pada kesempatan kali ini saya ingin berbagi panduan mudah Cara Membuat Daftar Isi di Blogger Keren Terbaru 2018. Daftar isi adalah merupakan daftar artikel yang ada didalam suatu blog/website dengan memberikan internal link kepada semua artikel tersebut. Dengan daftar isi ini akan mempermudah pengunjung menemukan artikel yang mereka inginkan.

Sebenarnya saya tidak hanya pertama kali saja membuat artikel daftar isi seperti ini, Pada kesempatan-kesempatan sebelumnya saya juga sudah pernah membuat panduan cara membuat daftar isi di blog blogger ataupun wordpress, Namun diartikel ini daftar isi yang akan kita buat memiliki desain yang keren yang penuh dengan warna yang bisa menarik pengunjung untuk membaca artikel-artikel di blog kita.

Panduan Cara Membuat Daftar Isi di Blogger Keren Terbaru 2018 ini saya dapatkan dari blog Namima. Jika kamu tertarik dengan daftar isi seperti gambar dibawah ini. Silahkan simak tutorial Cara Membuat Daftar Isi di Blogger Keren Terbaru 2018 dibawah ini.

Cara Membuat Daftar Isi di Blogger Keren Terbaru 2018

Cara Membuat Daftar Isi di Blogger Keren Terbaru 2018

Langkah 1: Masuk kedalam dasboard blogger kamu menggunakan akun Gmail yang sudah kamu miliki.

Langkah 2: Kemduian pilih Menu Halaman dan Tambah Halaman Baru. dan pindahkan mode penulisan dari Compose ke HTML.

Baca Juga: Cara Membuat Sitemap Blog dengan Gaya Timeline

Langkah 4: Tambahkan Script dibawah ini kehalaman Tersebut dan ganti Link https://lapaklama.com/ dengan link blog yang kamu miliki. Selesai.

<div class="tabbed-toc" id="tabbed-toc"></div>
<script>
var tabbedTOC={blogUrl:"https://lapaklama.com/",containerId:"tabbed-toc",activeTab:1,showDates:!0,showSummaries:!1,numChars:200,showThumbnails:!0,thumbSize:60,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:7,newText:' – <em style="color:red;">New</em>'};
</script>
<script src="https://rawcdn.githack.com/Indzign/InSEO/master/daftarisikeren.js"></script>
<style scoped="" type="text/css">
.tabbed-toc{margin:0 auto;position:relative;background:linear-gradient(-45deg,#EE7752,#E73C7E,#23A6D5,#23D5AB);background-size:400% 400%;animation:Gradient 15s ease infinite}
.tabbed-toc .loading{display:block;padding:2px 12px;color:#fff}
.tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li{margin:0;padding:0;list-style:none}
.tabbed-toc .toc-tabs{width:20%;float:left}
.tabbed-toc .toc-tabs li a{display:block;overflow:hidden;color:#fff;text-decoration:none;padding:12px;font-size:13px;transition:all .3s}
.tabbed-toc .toc-tabs li a:hover{background-color:rgba(0,0,0,0.05)}
.tabbed-toc .toc-tabs li a.active-tab{background:rgba(0,0,0,0.05);position:relative;z-index:5;margin:0 -1px 0 0}
.tabbed-toc .toc-content,.tabbed-toc .toc-line{width:80%;float:right;background-color:#fff;box-sizing:border-box}
.tabbed-toc .toc-line{float:none;display:block;position:absolute;top:0;right:0;bottom:0}
.tabbed-toc .panel{position:relative;z-index:5}
.tabbed-toc .panel li a{color:#1277cb;display:block;position:relative;font-weight:500;font-size:14px;padding:6px 12px;overflow:hidden}
.tabbed-toc .panel li time{display:block;font-weight:normal;font-size:11px;color:#666;float:right}
.tabbed-toc .panel li .summary{display:block;padding:10px 12px 10px;font-size:13px}
.tabbed-toc .panel li .summary img.thumbnail{float:left;display:block;margin:5px 8px 0 0;width:72px;height:72px;background-color:#fafafa}
.tabbed-toc .panel li{background-color:#f9f9f9;margin:0}
.tabbed-toc .panel li:nth-child(even){background-color:#fff}
.tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li.bold a{background-color:rgba(0,0,0,0.03);outline:none}
.tabbed-toc .panel li a em{background:#f39c12;color:#fff!important;font-style:initial;font-size:11px;margin:0 0 0 5px;padding:2px 10px;border-radius:22px}
.tabbed-toc .panel li:before{display:none}
@-webkit-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@-moz-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@media (max-width:768px){.tabbed-toc .toc-tabs,.tabbed-toc .toc-content{overflow:hidden;width:auto;float:none;display:block}.tabbed-toc .toc-tabs li{display:inline;float:left}.tabbed-toc .toc-tabs li a.active-tab{background-color:rgba(64,64,64,0.1)}.tabbed-toc .toc-content{border:none}.tabbed-toc .toc-line,.tabbed-toc .panel li time{display:none}}
</style>

Nah itulah panduan mudah Cara Membuat Daftar Isi di Blogger Keren Terbaru 2018, Jika kamu suka dengan konten seperti ini, Silahkan share artikel ini kemedia sosial yang kamu miliki. Terimakasih.

Nilai

Pos terkait

Loading...

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *