Hey! Saya Nabieel S.R.

Contact Form

Name

Email

Message

Video

Cara Membuat Table of Content (TOC) di BlogSpot

Artikel kali ini kita akan ketahui cara membuat Table of Content (TOC) di BlogSpot. Table of Content ini adalah jadual kandungan yang dibuat secara manual dengan perlu meletakkan coding di beberapa bahagian blog.

Cara Membuat Table of Content (TOC) di BlogSpot


    Kepentingan Table of Content (TOC)

    Kepentingan Table of Content (TOC) adalah lebih memberi pilihan kepada pelawat untuk terus ke perenggan yang mereka betul-betul minat untuk tahu dengan klik pada jadual yang tertera dan memberi kesan click-through rates (CTR) pada blog kita serta meningkatkan Search Optimization Engine (SEO).

    Bagaimana Jadual Table of Content (TOC) Tercipta?

    Jadual Table of Content (TOC) di Blogspot tercipta adalah daripada code yang perlu diletakkan di Theme blog dan juga di setiap post blog. Perbezaan TOC antara BlogSpot dan WordPress, BlogSpot perlu dibuat secara manual setiap kali post berbanding WordPress dibuat secara automatik oleh plugin yang telah di Install pada blog tersebut.

    Cara Meletakkan Code Table of Content (TOC) di Theme BlogSpot

    Permulaan anda perlu klik pada Theme blog dan Edit HTML.

    Cara Membuat Table of Content (TOC) di BlogSpot



    Klik pada ruangan code Theme, tekan Ctrl+F dan taip </head>

    Cara Membuat Table of Content (TOC) di BlogSpot


    Setelah jumpa </head>  , paste code ini di atas ></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[           
    //*************TOC plugin by MyBloggerTricks.com           
    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>

    Kemudian tekan sekali lagi Ctrl+F dan cari code ini ]]></b:skin> 

    Cara Membuat Table of Content (TOC) di BlogSpot

    Paste code ini di atas ]]></b:skin> 

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

    Klik Ctrl+F dan cari code <data:post.body/>. Ia ada lebih dari satu code sebegini dalam 1 Theme.

    Cara Membuat Table of Content (TOC) di BlogSpot

    Gantikan code <data:post.body/> ini kepada code baru :-

    <div id="post-toc"><data:post.body/></div>

    Setelah semua code ini digantikan dengan yang baru, tekan butang save.

    Cara Membuat Table of Content (TOC) di BlogSpot


    Cara Meletakkan Code Table of Content (TOC) di Blog Post

    Karang dahulu artikel pada post yang berkenaan dengan mengikuti cara membuat blog posting yang betul.

    Dibahagian setiap pecahan tajuk di dalam Blog Post anda tukarkan saiz tajuk kepada Heading atau H2, supaya Table of Content dapat mengesan tajuk yang akan dimasukkan secara automatik ini.

    Ketahui kedudukan untuk meletakkan code yang pertama ini di dalam Blog Post anda :-

    Cara Membuat Table of Content (TOC) di BlogSpot



    <div class="mbtTOC">
        <button onclick="mbtToggle()">Contents</button>
        <ol id="mbtTOC"></ol>
        </div>

    Dan code yang kedua terletak dipenghujung artikel yang anda karang di Blog Post :-

    Cara Membuat Table of Content (TOC) di BlogSpot


    <script>mbtTOC();</script>
    Setelah selesai code yang anda letak, bolehlah tekan butang Publish pada artikel tersebut dan semak kembali dibahagian atas untuk melihat Table of Content (TOC).

    No comments

    Post a Comment

    Powered by Blogger.