Trik Membuat Site Map Style Kang Ismet

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

   Membuat Daftar Isi Atau Site Map Ala Blog Kang Ismet

Cara membuat daftar isi ala Blog Kang Ismet - Selamat sore gan saya akan share artikel mengenai daftar isi yang ber style ala kang ismet. Sebelumnya saya sudahshare artikel tentang Wiget Random Post Slide Out/Recomended Post.

 Screenshoot daftar isi ala Blog Kang Ismet

Membuat Daftar Isi Atau Site Map Ala Blog Kang Ismet Muiz-Techno

Demo daftar isi ala Blog Kang Ismet









Kumaha, Setelah anda melihat SS Diatas anda jadi tertarik untuk mencobanya kalau gitu silahkan ikuti langkah-langkah dibawah ini untuk mendapatkan Cara Membuat Daftar Isi Ala Blog Kang Ismet.

1. Login ke blog anda di www.blogger.com.
2. Kemudian klik Page atau Laman.
3. Lalu buat Laman nama Daftar Isi.
4. Selanjutnya pilih Mode HTML dan Copy kode di bawah ini :

<style type="text/css" scoped="scoped">
/* 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><br />
<br />
<div id="feed-list-container"></div><div style="clear:both;"></div><br />
<script type="text/javascript">
var multiFeed = {
    feedsUri: [
        {
            name: "Dofollow Link",
            url: "http://muiztech.blogspot.com/",
            tag: "Dofollow Link"
        },
        {
            name: "Trik SEO",
            url: "http://muiztech.blogspot.com/",
            tag: "Trik SEO"
        },
        {
            name: "Tutorial Blogger",
            url: "http://muiztech.blogspot.com/",
            tag: "Tutorial Blogger"
        },
        {
            name: "Visual Basic",
            url: "http://muiztech.blogspot.com/",
            tag: "Visual Basic"
        },
        {
            name: "Mikroprosesor",
            url: "http://muiztech.blogspot.com/",
            tag: "Mikroprosesor"
        }
    ],
    numPost: 4,
    showThumbnail: true,
    showSummary: true,
    summaryLength: 80,
    titleLength: "auto",
    thumbSize: 72,
    containerId: "feed-list-container",
    readMore: {
        text: "Selengkapnya",
        endParam: "?max-results=8"
    }
};
</script><br />
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/multi-feed/multi-feed.min.js"></script>
<div style='clear: both;'></div>
</div>

5. Text yang harus anda ganti adalah :
     - Text dengan warna "Kuning", ganti dengan judul tag / label yang anda kehendaki.
     - Text dengan warna "Merah", ganti dengan URL blog anda masing-masing.
     - Text dengan warna "Biru", ganti denga n kategori/tag/label blog anda masing-masing.
     - Text dengan warna "Orange" numpost: 4, Jumlah post yang anda ingin tampilkan pada masing-masing   tag/label.
     - Jika blog anda terdapat banyak kategori/tag/label, anda tinggal menambahkan kode berikut ini sebelum kode ]; jangan lupa beri tanda koma ( , ) setelah } baru masukkan kode berikut:
       {
            name: "Judul kategori/tag/label",
            url: "URL blog anda",
            tag: "kategori/tag/label anda"
        }

6. Terakhir sebelum anda Publikasikan terlebih dahulu klik pratinjau....bila sudah di rasa pas boleh langsung anda publikasikan.

          Demikian posting kali ini mengenai cara membuat daftar isi ala Blog Kang Ismet, semoga dapat bermanfaat, salam hangat LandBlogging sekian dan terima kasih.

Incoming Search trik membuat daftar isi blog ala kang ismet, trik membuat daftar isi per label keren, cara membuat site map keren ala blog kang ismet, trik membuat daftar isi keren per label ala kang ismet
·
Share On Whatsapp Or Line:
Previous
Next Post »

8 comments

Click here for comments
February 24, 2015 at 6:39 PM ×

Kalau dimunculkan sebagai widget bisa tidak ya mas, bukan di halaman tapi widget dibawah postingan ?

Reply
avatar
February 24, 2015 at 8:29 PM ×

Bisa tapi width/lebarnya harus diatur dulu nanti kegedean!!! :-bd

Reply
avatar
March 11, 2015 at 9:14 AM ×

Nah, ini dia yang aku cari-cari ...
Ijin coba gan :)

Reply
avatar
March 11, 2015 at 9:01 PM ×

Okk Monggo Silahkan!! ... nanti lain kali komennya pakai identitas yang jelas ya gan!!! (y)

Reply
avatar
March 26, 2015 at 11:24 AM ×

Beritanya bermanfaat gan. Saya tunggu berita selanjutnya

Reply
avatar
March 27, 2015 at 6:03 AM ×

Iya Gan !!!! Makannya Follow Blog Ane!! :c :c

Reply
avatar
November 4, 2015 at 6:09 PM ×

Iya ini juga berkat blogger professional kang ismet.... (y)

Reply
avatar

NB: Blogger Yang Bijak Selalu Meninggalkan Jejak!!!


Thank You!!! Please Jangan Lupa Follow My Blog !!!

[+] Berkomentarlah Dengan Baik Dan Sopan serta Jangan Meninggalkan Spam!!!
[+] Komentar membangun lebih disukai
[+] Kami wajib menghapus komentar yang melecehkan, kasar, dan bertendensi SARA.
[+] Untuk Memasukan Kode HTML Ke Kolom Komentar Anda Perlu Parse Dulu Kode tersebut Dengan Cara Klik Tombol conversion
[+] Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
[+] Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
[+] Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
[+] Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>
ConversionConversion EmoticonEmoticon

Thanks for your comment