?

Followers

×

Tentang Blog Ini×

Blog ini wadah merupakan media pembelajaran otodidak secara online bagi kalangan newbie seperti Andmin ini, akan tetapi belajar dan berusaha secara otodidak inilah yang membuat saya bisa berkreasi dengan ala kadarnya.

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

Bagi para pembaca yang mungkin juga ingin menghubungi saya, bisa melihat alamat juga kontak saya yang disediakan dibawah ini.

Nama :  Admin
Email :  admin[at]gmail[dot]com

by Admin

Sidebar Blog×

Daftar Blog Bacaanku×

Bagikan kepada teman!
Close Info

LINK FRIEND

Sampaikan pesan anda jika ingin memajang link blog anda di Id Tutor Plus pada  (Link Friend)

NAMA BLOGURL BLOGDESCRIPSI BLOG
KOD Bloghttp://kang-onk.blogspot.com/Konsep Blogging Sederhana
KOD Sharehttp://onk-shared.blogspot.comShare something beautiful for you
Klik Templatehttp://klik-template.blogspot.com/Beauty Premium Teamplate for You

Daftar Isi Tabulasi untuk Blog

Berikut ini adalah sebuah widget daftar isi blog berbentuk tabulasi. Terdiri dari dua sisi berupa daftar kategori dan daftar posting. Setiap nama kategori akan menjadi tab, sedangkan daftar posting akan menjadi konten tab yang akan muncul setiap kali tab diklik:

Integrasi Widget ke Blogger

Pertama-tama klik menu Laman pada sidebar. Kemudian, pada menu Laman Baru pilihlah Laman Kosong:

Blogger Post Editor
Menambahkan halaman statis baru

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<style type="text/css">
#tabbed-toc {
  margin:5px auto 0;
  background-color:#292929;
  border-top:1px solid #222;
  border-bottom:1px solid #444;
  overflow:hidden;
  position:relative;
  color:#888;
}
#tabbed-toc .loading {margin:20px 47%;}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}
#tabbed-toc .toc-tabs {
  width:20%;
  float:left;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
}
#tabbed-toc .toc-tabs li a {
  display:block;
  font:normal bold 10px/28px Helmet,Freesans,Sans-Serif;
  height:28px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#ccc;
  border-top:1px solid #222;
  border-bottom:1px solid #444;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 10px;
  margin:0 5px;
  cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
  background-color:#222;
  color:white;
  padding:0 20px;
  margin:0 -5px;
}
#tabbed-toc .toc-tabs li a.active-tab {
  background-color:#3c3c3c;
  color:#C4DEF0;
  font-size:13px;
  font-weight:bold;
  border-top:1px solid #444;
  border-bottom:1px solid #444;
  border-right:1px solid #222;
  -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  position:relative;
  z-index:5;
  padding:0 15px;
  margin:-1px -1px 0 0;
}
#tabbed-toc .toc-content,#tabbed-toc .divider-layer {
  width:80%;
  float:right;
  background-color:#333;
  border-left:1px solid #222;
  border-right:1px solid #444;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
#tabbed-toc .divider-layer {
  float:none;
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
  box-shadow:0 0 7px rgba(0,0,0,.7);
}
#tabbed-toc .panel {
  position:relative;
  z-index:5;
  font:normal normal 10px/normal Helmet,Freesans,Sans-Serif;
  border-bottom:1px solid #444;
}
#tabbed-toc .panel li a.item-title {
  display:block;
  position:relative;
  font-weight:normal;
  font-size:13px;
  color:#999;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  line-height:28px;
  height:28px;
  padding:0 12px;
  text-transform:uppercase;
  text-decoration:none;
  outline:none;
  overflow:hidden;
}
#tabbed-toc .panel li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:10px;
  color:#666;
  float:right;
}
#tabbed-toc .panel li.bold time {float:left;}
#tabbed-toc .panel li .summary {
  display:block;
  height:50px;
  padding:10px 12px 10px;
  font-style:italic;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
  float:left;
  display:block;
  margin:0 8px 0 0;
  padding:4px 4px;
  width:72px;
  height:72px;
  border:1px solid #3c3c3c;
  background-color:#292929;
}
#tabbed-toc .panel li.bold {
  float:left;
  width:50%;
  -webkit-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  -moz-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
}
#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus {
  color:#999;
  outline:none;
  background-color:#3c3c3c;
  border-left:4px solid #066696;
}
#tabbed-toc .panel li.bold a.item-title:hover {
  background-color:#3c3c3c;
  -webkit-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  -moz-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
}
#tabbed-toc .panel li .itemfoot {
  clear:both;
  padding:5px 10px;
  color:#666;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  overflow:hidden;
  position:relative;
}
#tabbed-toc .panel li .itemfoot a.itemrmore {
  font-weight:bold;
  color:#3B5998;
  text-decoration:none;
  position:absolute;
  top:5px;
  right:10px;
}
#tabbed-toc .panel li .itemfoot a.itemrmore:hover {
  color:#555;
  background-color:transparent;
  text-decoration:none;
  border-color:transparent;
}
</style>
<div id="tabbed-toc"><span class="loading">Memuat...</span></div>
<script>
var tabbedTOC = {
    blogUrl: "http://nama_blog.blogspot.com",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: false,
    showSummaries: false,
    numChars: 50,
    showThumbnails: false,
    thumbSize: 40,
    noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
    monthNames: ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"],
    newTabLink: true,
    maxResults: 99999,
    preload: 0,
    sortAlphabetically: true,
    showNew: 7,
    rmoreText: "Selengkapnya &#9658;",
    newText: " - <em style='color:red;'>New!</em>"
};
</script>
<script src="http://cekidot.96.lt/file/js/toc.v1.js"></script>

Ganti URL yang Saya beri tanda dengan alamat blog Anda kemudian klik Publikasikan.

Pengaturan Lanjutan

OpsiKeterangan
blogUrlGanti nilainya dengan alamat blog Anda.
containerIdID elemen yang akan digunakan sebagai penampung JSON yang sudah diproses (abaikan jika tidak perlu).
activeTabDigunakan untuk menentukan nomor urut tab yang aktif (nilai 1 akan membuat tab di urutan pertama menjadi aktif, begitu pula konten tab pertama juga akan terbuka saat pertama kali halaman diakses).
showDatesGanti nilainya menjadi true untuk menampilkan waktu terbit posting.
showSummariesGanti nilainya menjadi true untuk menampilkan ringkasan posting.
showThumbnailsGanti nilainya menjadi true untuk menampilkan thumbnail posting.
thumbSizeDigunakan untuk menentukan ukuran thumbnail.
noThumbURL gambar cadangan untuk posting yang tidak memiliki gambar di dalamnya.
monthNamesDigunakan untuk menentukan nama-nama bulan sesuai dengan sistem penanggalan di negara tempat Anda tinggal.
newTabLinkJika bernilai true, semua tautan akan membuka di tab/jendela baru saat diklik.
maxResultsJumlah maksimal posting yang akan ditampilkan.
preloadDigunakan untuk menentukan waktu penundaan pemuatan JSON. Gunakan satuan milidetik atau cukup tuliskan "onload" agar widget ini memuat setelah keseluruhan halaman telah selesai termuat.
sortAlphabeticallyfalse untuk menyortir posting secara normal berdasarkan bulan terbit, true untuk menyortir posting berdasarkan alfabet.
showNewfalse untuk menyembunyikan tanda New!. Ganti dengan angka untuk menentukan berapa banyak posting terbaru yang ingin ditandai dengan label New!.
rmoreTextSelengkapnya ► text yang digunakan untuk menyatakan baca selengkapnya atau read more, anda dapat merubah textnya sesuka anda.
newTextMarkup HTML bebas untuk membuat label New! pada posting-posting terbaru.

Terakhir Diperbaharui

    Sejauh ini belum ada komentar yang masuk. Mulailah memberikan saran, kritikan yang bersifat membangun.

    Catatan :
    Link hidup dalam komentar akan terhapus secara otomatis.
    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 tag <i rel="image">URL GAMBAR</i>
    Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
    Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
    Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

    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:'(:\:pB):Q:Ozz7:(\o/**p<30:):-a7:O*fck*x@X@~x(:yaya:=p*Klik untuk melihat kode!

    Konversi Kode di Sini  Pasang Link Gratis  Daftar Member Aktif

    Batal

    Ke atas!Ke bawah!