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.
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.
Klik pada ruangan code Theme, tekan Ctrl+F dan taip
</head>
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.comfunction 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>
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.
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 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 :-
Ketahui kedudukan untuk meletakkan code yang pertama ini di dalam Blog Post anda :-
Dan code yang kedua terletak dipenghujung artikel yang anda karang di Blog Post :-
<script>mbtTOC();</script>
No comments
Post a Comment