Home » » Cara Membuat Daftar Isi dengan HTML/JavaScript
| 13 komentar ]

Topik hari ini adalah bagaiman cara membuat daftar isi pada blog dengan menggunakan HTML/JavaScript. Mungkin ini bukanlah topik baru lagi, tapi bagi teman-teman yang masih binggung cara membuatnya, langsung saja ikuti langkah-langkahnya :

1. Login ke Blogger.
2. Buka menu Layout -> Page Elements
3. Klik Add a Gadget -> HTML/Javascript.
4. Masukkan kode dibawah ini kedalam kotak

* Daftar Isi menggunakan icon kecil disampingnya :

------------------------------------------------------------------------------------------------------------
<style>
.list {
background: url("http://lh4.ggpht.com/_15FopxVONSo/ShYuf4RqUuI/AAAAAAAACxI/jcump2GgfLg/iconbullet.gif") no-repeat left center;border-bottom:1px dotted #ddd;line-height:1.2em;padding:3px 0px 0px 20px;
}
</style>

<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:284px; height:180px; background- border:1px solid #ffffff;">

<div class="list">
<a href="http://shindublog.blogspot.com/2009/09/cara-menghilangkan-icon-obeng-dan-tang.html">Cara Menghilangkan Icon Obeng & Tang di Blog</a></div>

<div class="list">
<a href="http://shindublog.blogspot.com/2009/09/cara-membuat-link-berkelip-kelip.html">Cara Membuat Link Berkelip-Kelip</a></div>

<div class="list">
<a href="http://shindublog.blogspot.com/2009/09/cara-membuat-tulisan-berjalan-marquee.html">Cara Membuat Tulisan Berjalan "MARQUEE"</a></div>

</div>
------------------------------------------------------------------------------------------------------------


* Daftar Isi menggunakan angka disampingnya :

------------------------------------------------------------------------------------------------------------
<style>
.list {
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px;
}
</style>

<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:380px; height:180px; background-color: #ffffff; border:1px solid #ffffff;">

<div class="list">
1. <a href="http://Alamat Url yang ingin di Tampilkan">Cara Mnghilangkan Navbar</a></div>

<div class="list">
2. <a href="http://Alamat Url yang ingin di Tampilkan">Panduan membuat blog di blogger</a></div>

</div>

-------------------------------------------------------------------------------------------------------------


Keterangan:

380px merupakan lebar kotak, 180px merupakan tinggi kotak, #ffffff pada background-color merupakan warna background, dan #ffffff pada border merupakan warna garis pinggir. Silahkan diganti sesuai dengan template anda.

Ingat:

Ganti tulisan yang berwarna Merah dengan alamat postingan anda dan ganti tulisan berwarna Biru yg dicetak tebal dengan judul postingan anda. Jika anda ingin menambah postingan baru maka copy kode yang berkedip lalu letakkan diatas kode

Jangan lupa untuk mengganti angkanya dengan angka 3 dan begitu seterusnya jika anda ingin menambah postingan baru lagi.

5. Kalau sudah klik Save Template.

Selesai.

Selamat Mencoba







Share |

Artikel Terkait :



13 komentar

my as fres mengatakan... @ 14 November 2010 06.23

thanks bro....

ziozender mengatakan... @ 29 November 2010 22.07

hehe.... thanks ,,,
ada yang lebih praktis g ??

Sikodokjail Dark 7 mengatakan... @ 5 Maret 2011 20.53

thanks bro...
oya klo ad tutorialx yg lbih simple aj coz ni ssah buat dcba...

cari-lovinzsky mengatakan... @ 26 September 2011 14.42

ada masuk sini http://www.flashvortex.com
mampir ke blog saya yah ari-lovinzsky.blogspot.com

Mang uem mengatakan... @ 9 Oktober 2012 21.37

Thanks sudah berbagi ilmunya, sukses selalu...

Anonim mengatakan... @ 29 Januari 2014 02.59

siap

Anonim mengatakan... @ 29 Januari 2014 03.01

jk

Obat Tradisional mengatakan... @ 27 Januari 2015 22.21

terimakasih banyak buat tutorialnya sob, sangat membantu sekali..

http://obattraditional.com/

Admin_5antri mengatakan... @ 28 Februari 2015 05.53

Artikel nya bagus dan menarik.... jangan lupa kunjungi juga === www.supranaturaljokowi.com ===

http://www.supranaturaljokowi.com/2015/02/batu-akik.html
http://www.supranaturaljokowi.com/2015/02/sejarah-batu-akik.html
http://www.supranaturaljokowi.com/2015/02/ilmu-walisongo-tanah-jawa.html
http://www.supranaturaljokowi.com/2015/02/misteri-keris-omyang-jimbe.html
http://www.supranaturaljokowi.com/2015/02/keris-semar-kuncung-kencana-pengasihan.html
http://www.supranaturaljokowi.com/2015/02/tehnik-dasar-belajar-ilmu-supranatural.html
http://www.supranaturaljokowi.com/2015/02/supranatural.html
http://www.supranaturaljokowi.com/2015/02/7-ramalan-ki-kusumo-yang-menghebohkan.html
http://www.supranaturaljokowi.com/2015/02/kisah-nyata-beranak-dalam-kuburan.html

http://www.supranaturaljokowi.com/2015/02/raja-saudi-bagi-bagi-uang-rp-4136.html
http://www.supranaturaljokowi.com/2015/02/10-cerita-seram-lawang-sewu-semarang.html
http://www.supranaturaljokowi.com/2015/02/penemuan-batu-giok-aceh-guncang-google.html

.
..
... www.myselebritis.com
.... www.kuasa-illahi.web.id
..... www.gadisgoyang.blogspot.com

Obat Tradisional Ace Maxs mengatakan... @ 5 April 2015 21.15

terimakasih infonya sob

ghedz mengatakan... @ 28 Oktober 2015 05.49

hehe,,, mesti tambah url manual kalo kaya gini mas... tiap nambah 1 posting tambah 1, kenapa gak ngambil peta situs atau RSS atom., yang auto update

bpk muliadi mengatakan... @ 21 Januari 2016 08.03

KAMI SEKELUARGA MENGUCAPKAN BANYAK TERIMA KASIH ATAS BANTUANNYA MBAH , NOMOR YANG MBAH BERIKAN/ 4D SGP& HK SAYA DAPAT (350) JUTA ALHAMDULILLAH TEMBUS, SELURUH HUTANG2 SAYA SUDAH SAYA LUNAS DAN KAMI BISAH USAHA LAGI. JIKA ANDA INGIN SEPERTI SAYA HUB MBAH_PURO _085_342_734_904_ terima kasih.الالله صلى الله عليه وسلموعليكوتهله صلى الل

KAMI SEKELUARGA MENGUCAPKAN BANYAK TERIMA KASIH ATAS BANTUANNYA MBAH , NOMOR YANG MBAH BERIKAN/ 4D SGP& HK SAYA DAPAT (350) JUTA ALHAMDULILLAH TEMBUS, SELURUH HUTANG2 SAYA SUDAH SAYA LUNAS DAN KAMI BISAH USAHA LAGI. JIKA ANDA INGIN SEPERTI SAYA HUB MBAH_PURO _085_342_734_904_ terima kasih.الالله صلى الله عليه وسلموعليكوتهله صلى الل


KAMI SEKELUARGA MENGUCAPKAN BANYAK TERIMA KASIH ATAS BANTUANNYA MBAH , NOMOR YANG MBAH BERIKAN/ 4D SGP& HK SAYA DAPAT (350) JUTA ALHAMDULILLAH TEMBUS, SELURUH HUTANG2 SAYA SUDAH SAYA LUNAS DAN KAMI BISAH USAHA LAGI. JIKA ANDA INGIN SEPERTI SAYA HUB MBAH_PURO _085_342_734_904_ terima kasih.الالله صلى الله عليه وسلموعليكوتهله صلى الل

bisnis online terbaru | situs penghasil uang | pin konveksi gratis mengatakan... @ 16 Juni 2016 22.26

http://bisniscandil.blogspot.co.id/?m=1

Poskan Komentar

Recent Reader

GET UPDATE VIA EMAIL
Dapatkan artikel terbaru langsung ke email anda!