?

Catatan

NULL

Tentang Blog Ini×

Blog ini adalah tempat Saya menuangkan hasil-hasil karya Saya sekaligus tempat saya belajar membangun sebuah blog/website dan berharap untuk tetap bisa memberikan yang terbaik kepada pembaca. kom4 (seekor nyamuk kecil yang tak pernah berhenti menyebarkan wabah.!)

Tentang Saya

Salam pembuka dari saya sebagai penulis blog ini sebelumnya akan memperkenalkan diri saya sebagai salah satu blogger yang berasal dari Sulawesi.

Berikut adalah data diri saya Dharla Ferdana, Bagi para pembaca yang mungkin juga ingin menghubungi saya, bisa melihat alamat juga kontak saya yang disediakan dibawah ini. jika ada yang mengaku saya,namun mempunyai data yang berbeda dari yang ada dibawah, maka itu bukanlah saya. berikut data diri saya:

Nama : Muh. Dharla Ferdana Samudra
Email : dharlaferdana@yahoo.co.id
Invite My BBM : PIN : 2779647D

iklan
Bagikan kepada teman!

Membuat Menu Daftar Isi Buku Keren Pada Blog

Daftar isi
Daftar isi buku menggunakan sortir label dan posting terbaru

Sebelumnya saya juga pernah membahas artikel tentang membuat atau memasang widget daftar isi pada blog dengan judul artikel Cara Membuat Daftar Isi Pada Blog Dengan JQuery dan kali ini saya akan kembali membagikan daftar isi blog yang juga saya gunakan di blog ini.

Cara pemasangan

Cara pemasangan menu daftar isi ini sangat mudah cukup masukkan script dibawah ini pada laman kosong atau posting terbaru pada blog anda dan beri judul terserah anda mau dikasi judulnya apa.

<style type='text/css'>
#resultDesc {
margin:0 30px;
padding:0 0;
border-bottom:4px solid #31353e;
display:none;
}
#resultDesc span {
display:block;
margin:0 0;
padding:5px 10px 7px;
color:#D64D52;
}
#feedContainer {
display:block;
clear:both;
margin:0 30px;
padding:0 0;
overflow:hidden;
position:relative;
border:1px solid #3d464f;
border-top:none;
text-shadow:0 1px 0 rgba(0, 0, 0, .4);
}
#feedContainer:after {
content:"";
display:block;
width:1px;
height:100%;
position:absolute;
top:0;
bottom:0;
left:50%;
background-color:#3d464f;
}
#feedContainer li {
list-style:none;
margin:0 0;
padding:0 0;
border-top:1px solid #3d464f;
color:#999;
width:50%;
float:left;
display:inline;
}
#feedContainer li .inner {
margin:15px 16px;
height:120px;
overflow:hidden;
word-wrap:break-word;
text-overflow:ellipsis;
}
#feedContainer li a {
text-decoration:none;
color:#5687B8;
}
#feedContainer li a:hover {
text-decoration:none;
color:#eee;
}
#feedContainer li a.toc-title {
font-weight:bold;
font-size:12px;
margin:0 0;
}
#feedContainer li .news-text {
margin:10px 0 0
}
#feedContainer li a img {
margin:0 10px 0 0;
padding:4px 4px;
background-color:#222;
border:1px solid #111;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:0 1px 0 #444;
-moz-box-shadow:0 1px 0 #444;
box-shadow:0 1px 0 #444;
float:left;
}
#feedNav {
margin:10px 30px 0;
text-align:center;
font:normal bold 12px/30px Verdana, Arial, Sans-Serif;
}
#feedNav a, #feedNav span {
background-color:#111;
padding:0 0;
color:#999;
text-decoration:none;
display:block;
}
#feedNav a:hover, #feedNav a:active {
background-color:black;
color:white;
border:none !important;
}
#feedNav span {
cursor:wait
}
#table-outer {
padding:7px 10px;
margin:30px 30px 0;
}
#table-outer input {
display:inline-block;
vertical-align:top;
margin:0 2px 0 0;
padding:0 0;
}
#table-outer table {
border:none
}
#table-outer td {
padding:2px 2px;
border:none;
}
#table-outer label {
font-weight:bold;
color:#999;
text-shadow:0 1px 0 rgba(0, 0, 0, .4);
display:block;
text-align:right;
margin:0 10px 0 0;
}
#table-outer select[disabled] {
opacity:.4
}
#postSearcher {
display:block;
margin:0 0;
padding:0 0;
}
#postSearcher input, #table-outer select {
width:180px;
background-color:#111;
border:none;
display:block;
margin:0 0;
padding:5px 5px;
font:normal normal 10px Tahoma, Verdana, Arial, Sans-Serif;
text-transform:uppercase;
color:#777;
outline:none;
-webkit-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
-moz-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
}
#postSearcher input {
width:170px;
padding:5px 5px;
}
#postSearcher input:focus, #table-outer select:focus {
background-color:#090909
}
@media (max-width:800px) {
#feedContainer li {
float:none;
display:block;
width:auto;
height:auto;
}
#feedContainer:after {
display:none
}
}
</style>

<script type='text/javascript'>
//<![CDATA[
var tocConfig = {
url: "http://nama-blog.blogspot.com",
feedNum: 30,
labelName: false,
numChars: 270,
thumbWidth: 80,
navText: "Berikutnya &#9660;",
frontText: "Atas &uArr;",
resetToc: "Reset",
noImage: "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
loading: "<span>Memuat...</span>",
searching: "<span>Mencari...</span>",
noResult: "Tak Ditemukan"
};
//]]>
</script>

<div id="table-outer">
<table border="0">
<tbody>
<tr>
<td>
<label for="orderFeedBy">Urutkan artikel berdasarkan:</label>
</td>
<td>
<select id="orderFeedBy">
<option value="published" selected>POSTING TERBARU</option>
<option value="updated">POSTING DIPERBAHARUI</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="labelSorterSelect">Filter artikel berdasarkan kategori:</label>
</td>
<td><span id="labelSorter"><select id="labelSorterSelect" disabled><option selected>MEMUAT...</option></select></span>
</td>
</tr>
<tr>
<td>
<label for="feed-q-box">Cari dengan kata kunci:</label>
</td>
<td>
<form id="postSearcher">
<input type="text" id="feed-q-box">
</form>
</td>
</tr>
</tbody>
</table>
</div>
<header id="resultDesc"></header>
<ul id="feedContainer"></ul>
<div id="feedNav"></div>
<script type="text/javascript" src="http://reader-hosting.googlecode.com/svn/trunk/advancedToc.js"></script>
Silahkan anda edit CSS diatas sesuaikan warnanya dengan blog anda, jika semua sudah selesai jangan lupa untuk mempublikasikannya kemudian lihat hasilnya.

Pengaturan

OpsiNilaiKeterangan
urlhttp://nama-blog.blogspot.comGanti nilainya menjadi url blog anda.
feedNum30Ganti nilainya menjadi, misal 40 jika Anda ingin menampilkan jumlah artikel lebih dari 30.
labelNamefalseJika bernilai false, akan menampilkan artikel berdasarkan posting terbaru. Dan jika anda ingin menampilkan berdasarkan kategori ganti nilainya menjadi nama label anda, misal Code Snippet
Nama label
numChars270Digunakan untuk menentukan jumlah potongan snippet posting.
thumbWidth80Digunakan untuk menentukan ukuran besar kecil thumbnail/gambar posting.
navTextBerikutnyaDigunakan untuk memanggil posting berikutnya.
frontTextAtasDigunakan untuk memberitahukan jika post uda mencapai batas.
resetTocReset???
noImagehttp://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpegDigunakan untuk menggantikan posting yang tidak memiliki gambar.
loadingMemuatTulisan yang akan muncul pada saat posting selanjutnya terpanggil.
searchingMencariSedang mencari post
noResultTak DitemukanPost tidak ditemukan.

Pembaharuan: Jika yang diatas gagal atau tidak berpungsi coba gunakan yang dibawah ini.

<style type='text/css'>
#table-outer {
padding:7px 10px;
margin:30px 30px 0;
}
#table-outer table {
width:80%;
margin:0;
}
#table-outer form {font:inherit;}
#table-outer td {padding:2px 2px;}
#table-outer label {
font-weight:bold;
color:#999;
text-shadow:0 1px 0 rgba(0,0,0,.4);
display:block;
text-align:right;
margin:0 10px 0 0;
padding:4px 0 0;
}
#table-outer select[disabled] {opacity:.4;}
#post-searcher {
display:block;
margin:0;
padding:0;
}
#table-outer input,#table-outer select {
width:100%;
background-color:#111;
border:none;
display:block;
margin:0;
padding:5px 5px;
font-size:86%;
text-transform:uppercase;
color:#777;
outline:none;
-webkit-box-shadow:inset 0 1px 3px black,0 1px 0 #444;
-moz-box-shadow:inset 0 1px 3px black,0 1px 0 #444;
box-shadow:inset 0 1px 3px black,0 1px 0 #444;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}
#table-outer input:focus,#table-outer select:focus {background-color:#090909;}
#feed-container {
display:block;
clear:both;
margin:0 30px;
padding:0;
list-style:none;
overflow:hidden;
position:relative;
border:1px solid #3c3c3c;
border-top:none;
text-shadow:0 1px 0 rgba(0,0,0,.4);
}
#feed-container:after {
content:"";
display:block;
width:1px;
height:100%;
position:absolute;
top:0;
bottom:0;
left:50%;
background-color:#3c3c3c;
}
#feed-container li {
list-style:none;
margin:0;
padding:0;
border-top:1px solid #3c3c3c;
color:#999;
width:50%;
float:left;
display:inline;
}
#feed-container li .inner {
margin:15px 16px;
height:116px;
overflow:hidden;
word-wrap:break-word;
text-overflow:ellipsis;
}
#feed-container li a {
text-decoration:none;
color:#5687B8;
}
#feed-container li a:hover {
text-decoration:none;
color:#eee;
}
#feed-container li a.toc-title {font-weight:bold;}
#feed-container li .news-text {margin:10px 0 0;}
#feed-container li img {
margin:0 10px 5px 0;
padding:5px;
background-color:#222;
-webkit-border-radius:0;
-moz-border-radius:0;
border-radius:0;
float:left;
}
#result-desc {
margin:0 30px;
padding:0;
border-bottom:4px solid #303030;
}
#result-desc span,#result-desc div {
display:block;
margin:0;
padding:5px 10px 7px;
color:#D64D52;
}
#result-desc div {color:inherit;}
#feed-nav {
margin:10px 30px 0;
text-align:center;
font-weight:bold;
text-transform:uppercase;
}
#feed-nav a,#feed-nav span {
background-color:#111;
padding:0;
color:#999;
text-decoration:none;
display:block;
height:30px;
line-height:32px;
}
#feed-nav a:hover,#feed-nav a:active {
background-color:black;
color:white;
}
#feed-nav span {cursor:wait;}
@media (max-width:800px) {
#feedContainer li {
float:none;
display:block;
width:auto;
height:auto;
}
#feedContainer:after {
display:none
}
}
</style>
<div id="table-outer">
<table border="0">
<tbody>
<tr>
<td>
<label for="feed-order">Urutkan artikel berdasarkan:</label>
</td>
<td>
<select id="feed-order">
<option value="published" selected>POSTING TERBARU</option>
<option value="updated">POSTING DIPERBAHARUI</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="label-sorter">Filter artikel berdasarkan kategori:</label>
</td>
<td>
<select id="label-sorter" disabled>
<option selected>MEMUAT...</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="feed-q">Cari dengan kata kunci:</label>
</td>
<td>
<form id="post-searcher">
<input type="text" id="feed-q">
</form>
</td>
</tr>
</tbody>
</table>
</div>
<header id="result-desc"></header>
<ul id="feed-container"></ul>
<div id="feed-nav"></div>
<script type="text/javascript" src="http://reader-hosting.googlecode.com/svn/trunk/neW-advancedToc.js"></script>

iklanBuruan Pasang Iklan Anda Di Sini Dengan Harga Yang Terjangkau.Pajang bisnis online anda di blog http://kom4.blogspot.com dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.
iklanBuruan Pasang Iklan Anda Di Sini Dengan Harga Yang Terjangkau.Pajang bisnis online anda di blog http://kom4.blogspot.com/ dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.
Iklan Murah

2 Komentar:

  Permalink
Welcome :)
 Permalink
@Balasan Welcome too ..

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode <i rel="anchor">http://nama_situs.com</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA</i>
Untuk menyisipkan gambar, gunakan kode <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI...</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI...</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.
:) :( ^_^ :D ;) :-bd :'( :\ :p B) :Q :Ozz 7:( \o/ **p <3 0:) :-a 7:O *fck* x@ X@ ~x( :yaya: =p* Klik untuk melihat kode!

Konversi Kode di Sini (Jendela Munculan) Emoticon

Batal

Pasang IklanPasang IklanPasang IklanPasang Iklan

Terakhir Diperbaharui

Ke atas!