Cara Menambahkan Daftar Isi di Postingan Blogspot

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.

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.


Menurut sebuah penelitian oleh NN Group



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 

Masuk ke dasbor Blogger Anda dan kemudian pergi ke Editor tema.  Dan klik tombol 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 terlihat ... 

Tapi jangan khawatir, saya akan membantu Anda membuat TOC yang mudah dimuat dan bergaya dengan hanya HTML dan CSS.


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.
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.

Kesimpulan: -  Ahha Anda selesai, Anda telah membuat daftar isi SEO friendly dan tampan untuk posting dan halaman blog blogger Anda. 
Cara Menambahkan Daftar Isi di Postingan Blogspot dirancang khusus ini akan membantu Anda untuk menarik perhatian pengguna. 
Namun, beri tahu saya jika Anda mengalami masalah? 

0 Response to "Cara Menambahkan Daftar Isi di Postingan Blogspot"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel