Cara Menambahkan Daftar Isi di Postingan Blogspot
Cara Menambahkan Daftar Isi di Postingan Blogspot
Dalam artikel kali ini, saya akan menunjukkan bagaimana Anda dapat menambahkan Daftar Isi dalam posting blog blogspot Anda. Seperti yang Anda ketahui, Blogger tidak mendukung Plugin seperti WordPress, Namun, jika Anda memiliki sedikit pengetahuan teknologi, Anda dapat dengan mudah membuat toc ringan yang dirancang khusus untuk blog Anda.
Jadi saya posting ini saya akan menunjukkan metode langkah demi langkah untuk membuat TOC untuk posting blog Anda dan halaman.
Tetapi sebelum kita mulai, mari kita bahas beberapa manfaat memiliki TOC di posting blog Anda.
Manfaat SEO dari TOC
Seperti yang Anda tahu Google menyukai posting blog dan halaman web yang sangat rinci dan terstruktur dengan baik . Dan dengan menambahkan toc di posting blog Anda, Anda dapat membuat posting blog Anda lebih terstruktur.
Dan Jika posting blog Anda terstruktur dengan baik maka google dapat menampilkan Langsung ke tautan dalam deskripsi meta di Halaman Hasil Pencarian.
Yang merupakan manfaat SEO yang sangat besar!
Sekarang, Ini adalah contoh Google Jump to links.
Peningkatan Pengalaman Pengguna
Pengalaman pengguna adalah bagian lain yang sangat penting dari sebuah blog yang tidak diperhatikan oleh banyak Blogger. Tapi di sini adalah gamenya,
Menurut sebuah studi pengalaman pengguna adalah kunci untuk mendapatkan peringkat yang lebih tinggi di SERP.
Dan Daftar Isi akan membantu Anda, meningkatkan pengalaman pengguna situs web Anda.
Menurut sebuah penelitian oleh NN Group, lebih dari 79% dari total pembaca web adalah pemindai yang hanya membaca poin-poin penting dari suatu halaman web.
Oleh sebab itu Optimasi Internal Link Untuk SEO Website Anda akan menjadi sangat penting untuk kualitas blog anda.
Oleh sebab itu Optimasi Internal Link Untuk SEO Website Anda akan menjadi sangat penting untuk kualitas blog anda.
Dan menambahkan TOC akan memungkinkan pembaca Anda untuk melompat ke bagian penting dari posting blog. Yang bisa menjadi terobosan untuk pengalaman pengguna situs web Anda.
Sekarang, mari kita bahas dulu bagaimana Anda dapat secara otomatis menambahkan daftar isi di posting blogger google.
Inilah Cara Membuat Daftar Isi Secara Otomatis di Blogger
Saya akan membagi alur kerja membuat TOC menjadi 5 langkah mudah sehingga akan menjadi sangat mudah bagi Anda untuk menerapkannya.
Langkah 1: Sekarang, hal pertama yang perlu Anda lakukan adalah Masuk ke dasbor Blogger Anda dan kemudian pergi ke Editor tema.
Dan klik tombol Edit Html.
Dasbor Blogger >> Tema >> Edit Html
Ini akan membawa Anda banyak kode di layar Anda.
Di sini, Anda harus menempelkan kode yang diberikan di bawah ini
Tepat di atas tag heading tutup </head>
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
function mbtTOC() {var mbtTOC=i=headlength=gethead=0;
headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)
{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}
//]]>
</script>Langkah 2: Pada langkah ini, kita akan menata daftar isi kita.
Untuk melakukan itu, Anda perlu menempelkan kode CSS ini
.mbtTOC{ border:5px solid #f7f0b8; box-shadow:1px 1px 0 #EDE396; background-color:#FFFFE0; color:#707037; line-height:1.4em; margin:30px auto; padding:20px 30px 20px 10px; font-family:oswald, arial; display: block; width: 70%; } .mbtTOC ol,.mbtTOC ul { margin:0; padding:0; } .mbtTOC ul { list-style:none; } .mbtTOC ol li,.mbtTOC ul li { padding:15px 0 0; margin:0 0 0 30px; font-size:15px; } .mbtTOC a{ color:#0080ff; text-decoration:none; } .mbtTOC a:hover{ text-decoration:underline; } .mbtTOC button{ background:#FFFFE0; font-family:oswald, arial; font-size:20px;position:relative; outline:none; cursor:pointer; border:none; color:#707037; padding:0 0 0 15px; } .mbtTOC button:after{ content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px; }
Temukan ]] </ b: skin> di layar Anda dan tempel kode CSS tepat di atas ]] </ b: skin>
Langkah 3: Di sini Anda hanya perlu mengubah satu atau dua baris kode di tema blogger. Cari kode <data: post.body /> dan ganti dengan kode yang diberikan di bawah ini.
Jika Anda menemukan lebih dari satu <data: post.body /> maka ganti semua dengan kode yang diberikan di bawah ini .
Langkah 4: Sekarang, Pada langkah ini, kita akan mengaktifkan TOC di posting blog kita.
Ini cukup sederhana dan mudah dilakukan.
Hal pertama yang perlu Anda lakukan adalah menempelkan kode Html yang diberikan di bawah ini di posting blog, di mana Anda ingin menampilkan daftar isi.
Saya akan merekomendasikan Anda untuk menempelkan kode setelah paragraf pertama dari posting blog Anda.
<div class="mbtTOC"> <button onclick="mbtToggle()">Contents</button> <ol id="mbtTOC"></ol> </div>
Langkah 5: Dan ini adalah langkah terakhir di sini, Anda perlu menempelkan kode JS ini di bagian paling bawah dari posting blog atau halaman di mana Anda ingin menampilkan daftar isi.
<script>mbtTOC();</script>Itu saja sudah selesai!
Anda telah berhasil membuat toc otomatis untuk posting blog Anda.
Tetapi perlu diingat bahwa daftar isi ini hanya dibuat dengan kode XML dan Javascript, sehingga dapat membuat blog Anda terlalu berat untuk dimuat.
Dan juga tidak bergaya untuk dilihat ...
Bagaimana cara menambahkan Daftar Isi di Blogger dengan HTML dan CSS
Ini bisa menjadi tugas yang mudah untuk membuat Toc dalam Html dan CSS untuk pengembang web tetapi itu tidak bisa menjadi tugas yang mudah untuk orang yang tidak kurang memahami coding.
Tapi di sini, saya akan menunjukkan kepada Anda metode langkah demi langkah yang akan mudah bagi anda.
Langkah 1: - Pada langkah ini, Anda harus menyalin semua kode CSS yang diberikan di bawah ini dan menempelkannya ke root tema blogger Anda.
/* Starting of TOC Css Codes */
.mb-toc {
border: 2px solid #ddd;
background: #ececec;
padding: 5px 20px 20px;
margin: 40px 0;
font-size: 18px;
overflow: hidden;
border-radius: 5px;
}
.mb-toc h2 {
margin: 10px 20px;
font-size: 30px;
}
.mb-toc ul {
margin: 0;
list-style: none;
float: left;
width: 100%;
}
.mb-toc ul ul li a {
padding-left: 45px;
}
.mb-toc ul ul li {
background: none;
}
.mb-toc li {
list-style-type: none;
position: relative;
margin: 0;
cursor: pointer;
background: #f7f7f7;
float: left;
width: 100%;
}
.mb-toc li:nth-child(odd) {
background: #fff !important;
overflow: hidden;
clear: both;
}
.mb-toc li:nth-child(odd) li:nth-child(odd) {
background: none;
}
.mb-toc li:nth-child(even) {
background: #f7f7f7 !important;
overflow: hidden;
clear: both;
}
.mb-toc li:nth-child(even) li:nth-child(odd) {
background: none;
}
.mb-toc ul>li:hover>a {
background: #fffcd1;
}
.mb-toc li a {
color: inherit;
padding: 8px 0 8px 25px;
float: left;
border-bottom: 1px solid #ddd;
width: 100%;
text-decoration: none;
}
/* Ending of TOC css Code */
Langkah 2: - Untuk menempelkan kode CSS, buka dashboard blog blogger Anda lalu buka Tata Letak dan kemudian Desainer Tema. ...
Dashboard >> Tata Letak >> Desainer Tema.
Kemudian di desainer tema klik ke Advanced dan pergi ke Tambahkan CSS
Advanced >> Tambahkan CSS
Sekarang rekatkan semua kode CSS di sini
Langkah 3: - Pada langkah ini, Anda harus menempelkan kode HTML yang diberikan di bawah ini ke halaman dan posting blog Anda. Anda perlu menempelkan kode ini di posting dan halaman blog Anda setiap kali Anda ingin menampilkan Daftar Isi.
<div id="toc" class="mb-toc">
<h2>Table Of Contents</h2>
<ul>
<li><a href="#headingid1">1. Your heading text </a></li>
<li><a href="#headingid2">2. Your heading text</a></li>
<li><a href="#headingid3">3. Your heading text</a></li>
<li><a href="#headingid4">4. Your heading text</a></li>
<li><a href="#headingid5">5. Your heading text</a></li>
</ul>
</div>Langkah 4: - Sekarang Anda harus menambahkan Id unik ke tag heading Anda di posting blog Anda.
Langkah 5: - Setelah menambahkan id unik ke tag heading Anda, ganti Id dalam kode Html dan ubah anchor text.
Boom
Anda telah berhasil membuat daftar isi yang terlihat gaya dan mudah dimuat untuk blog Anda.
Kalau Lebih Mudah nya simplenya lagi tidak perlu bingung dengan kode-kode tersebut hanya dengan Template yang sudah menyediakan fitur Table Of Content (TOC) otomatis.
Posting Komentar untuk "Cara Menambahkan Daftar Isi di Postingan Blogspot"