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.
Artikel Terkait
- Panduan Lengkap Belajar SEO Gratis : Kursus SEO Website dan Blog 2019
- Cara meningkatkan CPC dan CTR Google Adsense Blog
- Review Update Tampilan Blogger Terbaru Oktober 2019
- Kеѕаlаhаn Umum Dalam Mеlаkukаn Optimasi SEO Yаng Wаjіb Dіkеtаhuі
- Strategi Dan Cara Kerja SEO Terbaru yang Harus Anda Ketahui
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.
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:
Penjelasan: 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