Kamis, 02 April 2015

Cara Membuat Daftar Isi Seperti Blog Kang Ismet

Selamat Datang Pengunjung Setia Blogger Seni. Posting Kali Ini Saya Akan Membahas Tentang Cara Membuat Daftar Isi Seperti Blog Kang Ismet.

Gak Usah Basa-Basi Lagi, Langsung Simak Aja :D
Sumber : Gambar Blogger Seni
Demo
1. Login Ke Blogger Kalian. www.blogger.com
2. Kemudian Klik Laman Atau Page.
3. Lalu Buat Laman, Terus Isi Nama Sesuka Hati Anda :D
4. Selanjutnya Pilih Mode HTML, Lalu Copy Script Berikut :

<style scoped="scoped" type="text/css">
/* Basic Skin for Multi Feed Loader */
.list-entries{background:white;border:1px solid #d8d8d8}.list-entries ul,.list-entries li{margin:0;padding:0;list-style:none}.list-entries li{padding:1em;border-bottom:1px solid #ddd}.list-entries .main-title{padding:0}.list-entries .main-title h4{display:block;font:inherit;font-weight:bold;padding:.5em 1em;background-color:#4f93c5;color:#fff;margin:0;line-height:normal;font-size:14px;margin-top:0 !important}.list-entries .title a{font-weight:300;font-size:14px;text-decoration:none;line-height:.5em;color:#222}.list-entries .title a:hover{text-decoration:underline;color:#5886a7}.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:#82b965;padding:.5em 1em;position:relative;font-weight:bold;color:white}.list-entries .more-link a:after{content:"";width:0;height:0;position:absolute;top:50%;right:.3em;border:4px solid transparent;border-left-color:white;margin-top:-4px}.list-entries .more-link a:hover{background-color:#71a555}
/* Custom CSS */
.list-entries {
  margin:7px;
  width:251px; /* Lebar widget */
  float:left;
  font-size:11px;
}
</style>
<div id="feed-list-container">
</div>
<div style="clear: both;">
</div>

<script type="text/javascript">
var multiFeed = {
    feedsUri: [
        {
            name: "Antivirus",
            url: "http://blogger-seni.blogspot.com/",
            tag: "Antivirus"
        },
        {
            name: "Biografi",
            url: "http://blogger-seni.blogspot.com/",
            tag: "Biografi"
        },
        {
            name: "Blogger",
            url: "http://blogger-seni.blogspot.com/",
            tag: "Blogger"
        },
        {
            name: "Film",
            url: "http://blogger-seni.blogspot.com/",
            tag: "Film"
        },
        {
            name: "Islam",
            url: "http://blogger-seni.blogspot.com/",
            tag: "Islam"
        },
        {
            name: "Kata-Kata",
            url: "http://blogger-seni.blogspot.com/",
            tag: "Kata-Kata"
        },
        {
            name: "Software",
            url: "http://blogger-seni.blogspot.com/",
            tag: "Software"
        },
        {
            name: &quot;Template",
            url: "http://blogger-seni.blogspot.com/",
            tag: "Template"
        },
        {
            name: "Tutorial",
            url: "http://blogger-seni.blogspot.com/",
            tag: "Tutorial"
        },
        {
            name: "Umum",
            url: "http://blogger-seni.blogspot.com/",
            tag: "Umum"
        }
    ],
    numPost: 4,
    showThumbnail: true,
    showSummary: true,
    summaryLength: 80,
    titleLength: "auto",
    thumbSize: 72,
    containerId: "feed-list-container",
    readMore: {
        text: "Selengkapnya",
        endParam: "?max-results=8"
    }
};
</script>
<script src="http://blogger-json-experiment.googlecode.com/svn/resources/multi-feed/multi-feed.min.js" type="text/javascript"></script>
<div style="clear: both;">
</div>

5. Cari Dan Ganti Text Yang Berwarna :
- Merah '   Ganti Dengan Judul Tag/Label Yang Kalian Kehendaki
- Biru '      Ganti Dengan Url/Alamat Blog Kalian
- Orange ' Ganti Dengan Katagori/Tag/Label Blog Kalian Masing-Masing

6. Sebelum Anda Publikasikan, Silahkan Lakukan Pratinjau Terlebih Dahulu. Kalau Sudah Yakin, Lalu Publikasikan. :D

Demikian Posting Tentang Cara Membuat Daftar Isi Seperti Blog Kang Ismet. Semoga Artkel Yang Saya Bagikan Bermanfaat Untuk Kalian :D Terima Kasih.

Previous
Next Post »

5 komentar

Anisa Salsabila delete 2 April 2015 16.43

wah bagus nih, aku bookmark dulu deh :)

Tomi Ramadhan delete 3 April 2015 04.12

wihh keren ..... izin Nyoba gan buat melengkapi kekurangan Blog ane :)

Rezki Dharmawan delete 3 April 2015 07.35

Keren tutorialnya, nambah ilmu nih :) hehe terimakasih

Aditya Juniarto Pradipta delete 3 April 2015 19.19

tampilan daftar isinya kerena gan... blogwalking yukz
www.belonomi.blogspot.com

Teuku Ahmad Andika delete 19 April 2015 07.07

Mantap mas,, ijin coba ya :)

Posting Komentar