 |
| Contoh Halaman Daftar isi |
Halaman Daftar Isi - Halaman daftar isi merupakan sebuah halaman yang berisi
tentang penyusunan dan pengumpulan judul besar dari sebuah artikel dalam sebuah
blog. Halam dafta isi merupakan bagia yang paling penting dalam sebuah blog
karena pada halaman tersebut di gunakan untuk ngeping artikel serta menyusun
backlink agar mempunyai navigasi yang terarah dan jelas.
(Baca : Daftra isi)
Dalam pengajuan ke google adsens agar mendapatkan penyedia iklan berbayar salah satu persyaratannya adalah blog atau website kita harus memiliki system navigasi yang jelas dan terarah. Dan yang dimaksud system navigasi itu adalah daftar isi dan menu yang mengelink atau mengarahkan pengunjung untuk membaca artikel yang di tuju.
Dalam pengajuan ke google adsens agar mendapatkan penyedia iklan berbayar salah satu persyaratannya adalah blog atau website kita harus memiliki system navigasi yang jelas dan terarah. Dan yang dimaksud system navigasi itu adalah daftar isi dan menu yang mengelink atau mengarahkan pengunjung untuk membaca artikel yang di tuju.
Untuk membuat daftar isi tidak sembarang, karena ada trik
–trik yang harus di pakai agar pengunjung nyaman membaca artikel di blog kita
dan akan kembali lagi mengunjungi untuk melihat update artikel terbaru dari
sebuah blog tersebut.
Sebelumnya saya perbarui tentang cara membuat halaman daftar isi terbaru dan sangat mudah serta instan dengan cara:
1. Membuat halaman baru pada menu laman blogspot dan tambahkan laman dengan nama daftar isi
2. Pada pojok terdapat tulisan compose dan html, maka pilih yang html kemudian masukkan script berikut
<div class="jontor"><script src="https://cdn.rawgit.com/teknomia/sitemap/2ad476de/sitemap-keren.js"></script><script src="/feeds/posts/default?max-results=9999&alt=json-in-script&callback=teknomia_Load"></script></div><style type="text/css">.jontor p .teknomia_Label{background:silver;display:block;padding:12px;}</style>3. Tambahkan widget pada tata letak tambahkan tautan eksternal dan masukkan link laman daftar isi yang sudah di buat, dan tinggal meletakkan posisi pada header.
Untuk langkah yang di bawah ini merupakan langka membuat halaman daftar isi yang lama, dan masih menambahkan link postingan dengan cara manual.
Ok ikuti langkah di bawah untuk membuat halaman daftar
isi agar tidak kehilangan pengunjung.
1.Terlebih dahulu login dan masuk pada halaman dashboard
blogger
2.Membuat halaman dengan judu daftar isi, dan masukkan
judul halaman ke bagian label bilah kiri desktop
3.Copy script berikut ini
"<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><html> <head> <style>* {box-sizing: border-box}body {font-family: "Lato", sans-serif;} /* Style the tab */div.tab { float: left; border: 1px solid #ccc; background-color: #f1f1f1; width: 30%; height: 300px;} /* Style the buttons inside the tab */div.tab button { display: block; background-color: inherit; color: black; padding: 22px 16px; width: 100%; border: none; outline: none; text-align: left; cursor: pointer; transition: 0.3s; font-size: 17px;} /* Change background color of buttons on hover */div.tab button:hover { background-color: #ddd;} /* Create an active/current "tab button" class */div.tab button.active { background-color: #ccc;} /* Style the tab content */.tabcontent { float: left; padding: 0px 12px; border: 1px solid #ccc; width: 70%; border-left: none; height: 300px;}</style> </head> <body> <div class="tab"><button class="tablinks" id="defaultOpen" onclick="openCity(event, 'Berita')">Berita</button> <button class="tablinks" onclick="openCity(event, 'Tutorial')">Tutorial</button> <button class="tablinks" onclick="openCity(event, 'Trending')">Trending</button> </div></body> </html>
<div class="tabcontent" id="Berita"><h4><a href="Masukkan URL artikel disini">Aksesori Channel Youtube</a></h4><h4><a href="Masukkan URL artikel disini"> Penemuan Ular Piton Menggemparkan Warga Oku Timur</a></h4><h4><a href="http://www.blogersumatra.net/2017/05/apakah-oku-timur-siap-maju.html">Apaka Oku Timur Siap maju</a></h4></div><a href="https://draft.blogger.com/%3Ch3"></a>
<div class="tabcontent" id="Tutorial"><h4><a href="Masukkan URL artikel disini">Bisnis Tapai Singkong</a></h4><h4><a href="Masukkan URL artikel disini">Halaman Contac Pemula</a></h4><a href="https://draft.blogger.com/%3Ch3"></a></div>
<div class="tabcontent" id="Trending"><h4><a href="http://www.blogersumatra.net/2016/03/teknologi-informasi-untuk-bisnis.html">Teknologi Informasi Untuk Bisnis</a></h4><a href="https://draft.blogger.com/%3Ch3"></a></div>
<script>function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active";} // Get the element with id="defaultOpen" and click on itdocument.getElementById("defaultOpen").click();</script></div></div>"
4.Pastekan script ini ke halaman daftar isi blogspot yang
baru saja anda buat dengan cara pilih html pada baign kanan atas judul
5. selesai
Dan hasilnya:
 |
| Cara membuat halaman daftar isi blogspot |
Petunjuk Pengoperasian Dari Pemakain Halaman Daftar Isi di Atas
Jika di pilih tombol berita makan pada kolom bagian kiri akan muncul dafta isi tentang artikel berita, sedangkan jika dipilih tombol tutorial maka pada kolom bagian sebelah kiri akan muncul artikel tentang tutorial dan seterusnya.
Perhatian Untuk Halaman Daftar Isi
Jika anda memosting artikel maka anda harus menambahkan url artikel terbaru tersebut ke halaman daftar isi dan menambahkan judulnya.
Sekian artikel tentang halam daftar isi, Apabila ada keslahan kata dalam penulisan artikel saya mohom maaf. Baca juga cara membuat halaman kontak blogger.
Labels:
Pengetahuan
Terimakasih sudah membaca Cara Membuat Halaman Daftar Isi Blogspot. Jangan lupa di bagikan jika bermanfaat...!
No comments:
Post a Comment