Daftar Isi Blog dengan Menu Accordion Black

|
Daftar Isi Blog dengan Menu Accordion Black ~ Stelah posting artikel mengenai Kisah Cinta Tukang Buah dan Tukang Sayur pada tag Love, hari ini ARMAN BLOG akan share sebuah Blogger Tutorial tentang cara membuat Daftar Isi dengan Menu Accordion Black, yang mungkin akan cocok buat kalian pasang di blog kalian yang bernuansa hitam seperti blog tercinta saya. Code daftar isi accordion ini di buat oleh mas Taufik Nurrohman di blog Hompimpa Alaihum Gambreng. Sebelumnya dia mengusulkan saya menggunakan buatannya mas Abu Farhan, tapi setelah saya menerornya abis-abisan akhirnya dia mau membuatkannya yang lebih keren. Untuk demonya kalian bisa melihatnya di blog ini Site Map >> Category pada menu navigasi diatas atau klik disini.


Menu Accordion

Saya yakin buat kalian yang templatenya menggunakan nuansa hitam akan tertarik untuk memasangnya (hehe sok yakin). Berikut langkah-langkah untuk membuatnya.

1. Login ke akun blogger kalian

2. Klik Entri Baru atau Postingan


Posting Posisi Edit HTML


3. Lalu Copy-Paste kode di bawah ini ke halaman posting. Tentunya pada posisi Edit HTML, bukan posisi Compose seperti gambar di atas.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#daftar-isi {
  background-color:#333;
  border:2px solid #fafafa;
  color:#fff;
  margin-bottom:10px;
  -webkit-box-shadow:0 1px 2px #000;
  -moz-box-shadow:0 1px 2px #000;
  box-shadow:0 1px 2px #000;
  overflow:hidden;
}

#daftar-isi .judul-label {
  overflow:hidden;
  cursor:pointer;
  text-decoration:none;
  font:normal 13px/100% 'Verdana',Arial,Sans-serif;
  padding:10px 15px 11px;
  color:#bbb;
  text-shadow:0 1px 1px rgba(0, 0, 0, 0.3);
  border-top:1px solid #444;border-bottom:1px solid #222;
  background:#333;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c3c3c', endColorstr='#333');
  background:-webkit-linear-gradient(top, #3c3c3c, #333);
  background:-moz-linear-gradient(top, #3c3c3c, #333);
  background:-o-linear-gradient(#3c3c3c, #333);
  background:linear-gradient(#3c3c3c, #333));
}

#daftar-isi .headactive {
  color:#efefef;
  border-top:1px solid #24B6E3;border-bottom:1px solid #104968;
  background:#248AB0;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#248AB0', endColorstr='#21739B');
  background:-webkit-linear-gradient(top, #248AB0, #21739B);
  background:-moz-linear-gradient(top, #248AB0, #21739B);
  background:-o-linear-gradient(#248AB0, #21739B);
  background:linear-gradient(#248AB0, #21739B));
}

#daftar-isi ol {
  background-color:#333;
  margin:0 0;
  padding:0 0;
  color:#999;
  list-style:none;
}

#daftar-isi li {
  line-height:normal;
  font:normal 11px/100% 'Verdana',Arial,Sans-serif;
  margin:0 0;
  padding:5px 5px 5px 15px;
  white-space:nowrap;
  text-align:left;
  border-top:1px solid #444;border-bottom:1px solid #222;
}

#daftar-isi li:first-child {border-top:none;}
#daftar-isi a              {color:#5687f8;}
#daftar-isi a:hover        {text-decoration:underline;}
#daftar-isi a:visited      {color:#5687b8;}

#daftar-isi strong {
  font-weight:bold;
  font-style:italic;
  color:red;
}
</style>
<script type="text/javascript">
    showNew    = true;
    accToc     = true;
    openNewTab = true;

    var maxNew     = 10,
        baru       = "Baru!",
        sDownSpeed = 600,
        sUpSpeed   = 600;
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/files/hompishive-labels-v1.js"></script>
<script src="http://sakawku.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>



Catatan : 
- Ganti URL http://sakawku.blogspot.com dengan URL blog kalian
- Kode berwarna Hijau : JQuery, silahkan kalian hapus jika template kalian sudah menggunakannya
- showNew : Jika bernilai true, tanda merah bertuliskan Baru! akan ditampilkan, jika bernilai false, tanda merah bertuliskan Baru! akan disembunyikan.
- accToc : Jika bernilai true, effect accordion akan diterapkan, jika bernilai false, effect accordion akan hilang sehingga semua daftar isi akan terlihat.
- openNewTab : Jika bernilai true, setiap link akan secara otomatis terbuka di tab/jendela baru saat diklik, jika bernilai false, setiap link akan terbuka di tab/jendela yang sama saat diklik.
- maxNew : Digunakan untuk menentukan jumlah maksimal Baru! yang tampil pada setiap posting baru (Menentukan seberapa banyak posting bisa disebut sebagai posting baru).
- Baru! : Silahkan kalian ganti dengan keinginan kalian (New!!, Terbaru !! dll).
- sDownSpeed : Digunakan untuk menentukan kecepatan effect .slideDown() panel.
- sUpSpeed : Digunakan untuk menentukan kecepatan effect .slideUp() panel.

4. Jangan lupa untuk menonaktifkan komentar. Kemudian klik Terbitkan Entri/Publish

Semoga bermanfaat dan kalian senang. Happy Blogging

Baca juga Blogger Tutorial lainnya.




37 komentar:

Jejak Puisi said...

pertamaxxx diamankan selalu... :D

hmmm..., khusus yg background hitam y kang? hhehehehe, boleh juga nih kang. moga bermanfaat y^^

salam blogger...

Anonymous said...

@Jejak Puisi, Warna apa aja kang...kalo srek ma hati ya pake aja kale kang :D

Unknown said...

boleh jg nie daftar isi dengan menu accordionnya. thanks sob udah sharenya

Anonymous said...

@Aldio, He silahkan sob tumben nongol thanks

Unknown said...

wah sepertinya ini keren untuk dicoba sobat, untuk membuat daftar isi sobat...

Unknown said...

karen juga ni bang mantep dach

Nando Firmansyah said...

hahay efek jquery ya om arman
keren, ntar t'coba deh :D

Anonymous said...

@Asis, iya sob keren silahkan thanks

@Wahid Sahidu, Thanks bang

@Nando Cyber4rt, Iya silahkan thanks

pasar herbal said...

wah ada lagi nih yang baru...mantaaaaap...rajin nih sobat...OK salam sukses

Anonymous said...

@Pasar herbal, he iyah sob mumpung ada paketnya... salam sukses juga sob thanks

Anonymous said...

@Neesa, You'r Welcome n Thanks for visiting

Deindra said...

cocok nih buat yang suka ngutak atik blog..salam kenal sob.

Anonymous said...

@Deindra, Salam kenal juga sob

Undangan Murah Istimewa said...

kalau mau memasukkan artikel ke dalam menu2nya gimana gan?

Anonymous said...

@Undangan Murah-murah, Artikelnya masuk secara otomatis setelah agan melakukan posting

Accountant Melbourne said...

Greetings.. Visiting here again... Smile!

Anonymous said...

@Accountant, Thanks for visiting

CHANDRA said...

sip nih bang buat blogger pemula seperti saya...
makasih banget bang tutornya ya

Jejak Puisi said...

absen malming nih kang... :D

salam blogger n happy blogging^^

Anonymous said...

@CHandra, sama-sama bang thanks

ICAH BANJARMASIN said...

Kalo verivikasi yahoo nya ga ada biar delete aza bang..kalo bisa dari BING juga boleh koq..heee

Lensa said...

Mau...mau... kayaknya bisa diedit code HTMLnya biar bisa ganti warna...

Anonymous said...

@ICAH, okey bang thanks sorry ngrepotin hahay

@Lensa, Iyah sob bisa diedit sesuai keinginan

Joss said...

selamat sore datang berkunjung di blog sahabat penuh semangat

Anonymous said...

@Joss, Thanks uda berkunjung

Meulek-Ict said...

wah mantep nih triknya, sayang template punyaku warnanya putih......

Anonymous said...

@Meulek, Yah sob mau hitam atau putih sama aja kale, tergantung sob aja srek atau ga nya make ini

wongcrewchild said...

jd tmbah keren blognya, thanks tutornya sob

Anonymous said...

@wongcrewchild, He iya sob thanks

The Toms Networking Cyber said...

PERTAMAX GAN SEGERA DI AMANKAN !

HARAP MAMPIR KE BLOG ANE GAN
http://nugrahartomi.blogspot.com/

Anonymous said...

@Nugra, yah pertamax gmana gan hehe silahkan thanks

Freak said...

Mas Arman gak ngerti yg soal Baru! Baru! itu lo.

Bastomi said...

wah.... terimakasih infonya ya... sangat sangat berguna, ini yg aku cari .... ternyata cuma disini yg bisa..... makasih....

ditunggu balik ya.... :D hehehe...

Anonymous said...

mantabs gan,, seseuai dgn tma blog ane??

visit back y?

Anonymous said...

@Freak, ketikan baru untuk itu menandakan kalau postingan itu baru aja diposting mas, mas bisa menentukan berapa banyak pasting yang akan bertuliskan baru, mas baca catatannya.

@Adi, sama-sama sobat ditunggu, thanks

@agilcr, Okey ditunggu, thanks

Unknown said...

Gan ane tanya , #daftar-isi .judul-label { itu di ganti ye gan ?

Unknown said...

mantap juragan....berhasil di blog ane...

Post a Comment

Silahkan kalian berkomentar, namun tetap jaga kesopanan dengan tidak melakukan komentar spam. Saya Lagi Bermasalah Dengan Adsense, Saya izin Vakum Ngeblog Dulu Sobat Buat Nyari Solusi!!

Related Posts Plugin for WordPress, Blogger...