Cara Membuat Daftar Isi Otomatis Pada Blog
Hi... Dipostingan Kali ini saya mau membahas mengenai cara membuat daftar isi Berdasarkan Label pada Blog atau Cara Membuat Daftar Isi Otomatis. Cara ini juga anda dapat terapkan menjadi cara membuat daftar isi dalam postingan blog.
membuat daftar isi blog (peta situs, sitemap, table of content) berdasarkan label atau kategori posting sangat baik untuk mesin pencari dan juga user.
Menu daftar isi blog akan memudahkan pembaca mengakses bagian-bagian atau konten blog secara cepat dan mencari tulisana, artikel, atau posting yang mereka butuhkan.
BACA: Tips Agar Blog cepat Terindex Google
Daftar isi yang akan saya buat ini dapat anda terapkan di dihalaman statis blog anda. menarik bukan cara membuat daftar isi pada halaman statis yang berfungsi juga sebagai sitemap blog anda.
Menu navigasi daftar isi ini juga dianjurkan Google guna memudahkan user menjelajahi blog anda. Google memang "selalu berpihak" pada user. Apa yang disukai user, disukai pula oleh Google. Hidup user!!!! :)
Penasaran dengan Cara Membuat Daftar Isi Otomatis Berdasarkan Label Pada Blog ? Yuk Langsung Saja Kita Ulas.
Langkah Pertama:
sebelum kita memulai Cara Membuat Daftar Isi Otomatis Pada Blog. silahkan check dahulu di template Anda, apakah sudah terdapat kode dibawah ini, Jika belum, copy dan pastekan diatas </head>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>Catatan: kode link font awesome diatas diabaikan saja jika sudah ada pada template Anda
Langkah Kedua:
Buat Halaman Baru Pada Menu Halaman Atau Page Kemudian Beri Judul Sesuai keinginan Anda, kemudian klik new page lalu klik HTML (bukan compose), Perhatikan Gambar dibawah kemudian pastekan kode berikut
<style scoped="scoped" type="text/css">
/* Multi Recent Post */
.post-body *,.post-body *:after,.post-body *:before{box-sizing:initial;-webkit-box-sizing:initial;-moz-box-sizing:initial;}
.list-entries{display:table;background:#fdfdfd;margin:1.5% 1%;width:31.3%;float:left;font-size:80%;}
.list-entries ul,.list-entries li{margin:0;list-style:none}
#feed-list-container ul li{background:#fdfdfd;padding:15px;line-height:normal;border:1px solid #eee;border-top:0;transition:all .3s;}
#feed-list-container ul li:hover{background:#fff;}
#feed-list-container ul li:last-child{border-bottom:0;}
.list-entries .main-title{padding:0;overflow:hidden;}
.list-entries .main-title h4{position:relative;display:block;font:inherit;font-weight:700;padding:1em 1.5em;background-color:#4f93c5;color:#fff;margin:0;line-height:normal;font-size:120%;margin-top:0!important}
.list-entries .main-title h4:after{display:inline-block;content:"\f02c";font-family:fontAwesome;font-size:17.4px;font-style:normal;background-color:#4384b3;color:#fff;top:0;right:0;padding:1em 1.25em;position:absolute;font-weight:400}
.list-entries .title a{font-size:13px;text-decoration:none;line-height:.5em;color:#333;font-weight:700;transition:all .3s;}
.list-entries .title a:hover{color:#4f93c5}
.list-entries img,.list-entries .fake-img{border:none;background-color:#333;margin:0 1em 0 0;padding:0;float:left}
.list-entries .summary{overflow:hidden;color:#999}
.list-entries .more-link{border-bottom:none;}
.list-entries .more-link a{display:block;line-height:2em;height:2em;overflow:hidden;text-decoration:none;background-color:#444;padding:1em 1.5em;position:relative;font-weight:400;color:#fff;transition:all .3s;}
.list-entries .more-link a:hover{background-color:#f97e76;color:#fff;}
.list-entries .more-link a:after{display:inline-block;content:"\f054";font-family:fontAwesome;font-size:16.4px;font-style:normal;background-color:#333;color:#ccc;top:0;right:0;padding:1em 1.25em;position:absolute;font-weight:400;transition:all .3s;}
.list-entries .more-link a:hover:after{background-color:#ea726a;color:#fff;}
.widget .post-body ul, .widget .post-body ol {position:relative;}
@media (max-width:640px){
.list-entries {width:100%;}
.list-entries{margin:2.5% 1%;}}
</style>
<br />
<div id="feed-list-container">
</div>
<div style="clear: both;">
</div>
<script type="text/javascript">
var multiFeed = {
feedsUri: [
{
name: "TIPS BLOGGING",
url: "https://murnerifai.blogspot.com",
tag: "BLOGGINGTECH"
},
{
name: "TEKNIK SEO",
url: "https://murnerifai.blogspot.com",
tag: "tekhnikseo"
},
{
name: "TEMPLATE BLOG",
url: "https://murnerifai.blogspot.com",
tag: "templateblog"
},
{
name: "E-BOOK GRATIS",
url: "https://murnerifai.blogspot.com",
tag: "ebook"
}
],
numPost: 6,
showThumbnail: true,
showSummary: false,
summaryLength: 0,
titleLength: "auto",
thumbSize: 72,
containerId: "feed-list-container",
readMore: {
text: "Selengkapnya",
endParam: "?max-results=5"
}
};
</script>
<script src="https://cdn.jsdelivr.net/gh/Arlina-Design/redvision@master/multi-feed.js" type="text/javascript"></script> Perhatikan Gambar berikut Untuk Lebih Jelasnya:
1. judul Halaman Anda (Daftar Isi)
2. Pilih HTML Untuk Mempaste Code
3. Nama Label Sebagai Keterangan
4. Alamat Blog Anda (URL)
5. Nama Label Yang ingin ditampilkan
Cara Membuat Daftar Isi Otomatis Pada Blog sudah saya terapkan pada halaman statis saya dan saya terapkan sebagai pengganti sitemap. silahkan lihat hasilnya disini : Belajar Blog Gratis Untuk Pemula
Itulah Cara Membuat Daftar Isi Dalam Postingan Blog, Semoga Bermanfaat Oh Iya cara membuat Daftar Isi Otomatis Juga Sudah Di Ulas Oleh Arlina Design dan Kompi Ajaib. Terima Kasih Sudah Membaca di Blog ini tentang Cara Membuat Daftar Isi Otomatis Pada Blog.
Salam Hangat Dari Saya :)
0 Response to "Cara Membuat Daftar Isi Otomatis Pada Blog"
Post a Comment