BerlanggananBerlangganan Artikel Gratis Langsung Di Email Anda

Cara Buat Daftar Isi Keren

Cara Buat Daftar Isi Keren, Kali ini saya ingin berbagi sedikit tentang membuat Daftar isi seperti blog kang ismet . Widget ini mengurutkan dan mendaftar setiap artikel berdasarkan label yang anda inginkan. Tampilan dari widget ini dirubah sedikit oleh Arline Design , jika sobat dengan tampilan yang elegan elegan widget ini sangat cocok untuk anda gunakan pada blog sobat.Untuk menerapkannya pun sangat mudah silahkan lanjutkan membaca dan lihat demonya dibawah ini

Baca : Cara Buat Sitemap Sederhana

Sitemap blog keren

Jika di blog sobat tidak terdapat font awesome, Terlebih dahulu silahkan sobat tambahkan link font awesome dibawah ini tepat diatas kode </head>

 <link href=’https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css’ rel=’stylesheet’/>

Cara Buat Sitemap Keren Untuk Blogger

Jika langkah diatas sudah selesai maka langkah selanjutnya silahkan sobat membuat halaman statis dengan mode HTML bukan Compose. Setelah itu silahkan copy dan pastekan script dibawah ini didalam halaman statis yang anda buat
<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>



<div id="feed-list-container">

</div>

<div style="clear: both;">

</div>

<script type="text/javascript">

var multiFeed = {

    feedsUri: [

        {

            name: "Terbaru",

            url: "https://www.idblog.net/",

            tag: "All"

        },

        {

            name: "Blogger",

            url: "https://www.idblog.net/",

            tag: "Tutorial"

        },

        {

            name: "Template",

            url: "https://www.idblog.net/",

            tag: "Template"

 },

        {

            name: "Widget",

            url: "https://www.idblog.net/",

            tag: "Widget"

 },

        {

            name: "SEO",

            url: "https://www.idblog.net/",

            tag: "SEO"

 },

        {

            name: "Tips &amp; Trik",

            url: "http://www.idBlog.net/",

            tag: "TipsTrik"

        }

],

    numPost: 4,

    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.rawgit.com/Arlina-Design/redvision/master/multi-feed.js" type="text/javascript"></script>

Silahkan sobat mengganti Name, Url, dan  tag sesuai blog anda ( yang saya tandai orange )

Untuk kostumisasi lainnya silahkan baca keterangan dibawah ini

  • Numpost, Menetukan jumlah postingan yang akan di tampilkan.
  • Showthumbnail, Rubah menjadi false untuk tidak memunculkan gambar
  • ShowSummary, Digunakan untuk menyembunyikan atau menampilkan deskripsi artikel
  • Sumarryleght, Menentukan jumlah karakter pada deskripsi yang akan di munculkan
  • Thumsize, Menentukan ukuran tumbnail yang akan ditampilkan
  • Text, untuk mengganti bacaan yang ada dibawah widget sesuai keinginan sobat
  • Endparam, menentukan jumlah artikel yang muncul saat di next

Sekian tutorial sederhana ini semoga dapat bermanfaat, Terima kasih sudah sudi mampir jangan lupa berkomentar 😀 .