Teguh Bagus of Veterinary Medicine site v.2

Excellence with Morality

__Sertifikasi dan Prestasi__

    Standart ISO 9001:2008 Kepada Universitas Airlangga oleh British Certification International

_Berbagi tak pernah Rugi_

    Teguh Bagus of Veterinary Medicine site v.2

    ____Hakikat Manusia____

    .: Barang siapa mengenal dirinya, maka ia akan mengenal TuhanNya. Seperti bahasan kita yaitu Awwal- uddin Ma'rifatullah adalah... :. more

    ∞ Akun Facebook & Twitter Kami ∞

..:: Selamat Buat para Pemenang lomba web & blog Mahasiswa Universitas Airlangga Tahun 2015; 1.Mei Budi Utami [FST'12] | 2.Mita Erna Wati [FK'12] | 3.Teguh Bagus Pribadi [FKH'12] | 4.M. Roihan Hanafi [FISIP'12] | 5.Ari Zulaicha [FISIP'12] | 6. Muziburrahman [FPK'14] | => Terimakasih atas kunjungan Anda, jangan lupa kalau mau copy/paste harap cantumkan sumbernya, by : Teguh Bagus Pribadi, http://teguhbaguspribadi-fkh12.web.unair.ac.id, dan Blog ini DIPERBAHARUI sebulan 4x karena kesibukan Perkuliahan ::..

Daftar Isi Accordion untuk Blogger dan Cara Memasangnya

diposting oleh teguhbaguspribadi-fkh12 pada 05 June 2013
di Kumpulan Tutorial Blog - 0 komentar

Hari ini saya akan memberi Artikel tentang cara membuat Daftar Isi dengan effect Accordion Di blog sobat dan setiap blog pasti punya daftar isi yang berbeda beda,
Menurut saya daftar isi di blog sangat penting, karena adanya daftar isi di blog membantu pengunjung lain untuk melihat artikel kita yang berada di kategori tertentu.

Oke tanpa panjang lebar lagi saya akan menjelaskan tahap-tahap yang harus dilakukan untuk membuat daftar isi di blog. dan kita akan membuat daftar isi blog dengan effect Accordion dengan 2 macam warna.yaitu

1. Accordion Warna biru

 
Accordion Warna biru
- Login ke akun Blog
- Entri Baru -> Klik HTML ( bukan Compose )
- Taruh Script Kode di bawah ini pada Mode HTML
<style type="text/css">
    #dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAWJugl3I/AAAAAAAAEBg/bY_3UzrECSg/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S-KAVk09KSI/AAAAAAAAEBc/Tqfaca2nwmo/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB; font-weight:bold; line-height:1.4em; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 1px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA; } .dafis-label:hover{ background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAVlLiuVI/AAAAAAAAEBU/Hd-n_8N7qak/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB; color:#003366; } .dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important; } .dafis-daf ol li{ background-color:#C9E9F4; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background: #7BC4DF; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://wahyu-only.googlecode.com/files/daftar_isi_accordion.js" type="text/javascript"></script>
<script src="http://wahyu-only.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>


  • Silahkan sobat ganti http://wahyu-only.blogspot.com dengan URL blog sobat.
  • Results=1000 adalah jumlah daftar isi yang ingin di tampilkan
- Kemudian klik simpan

2. Membuat Accordion warna Hitam dan kuning



Accordion Warna biru


oke kita langsung saja,cara membuat daftar isi accordion.Langkah-langkahnya adalah sebagai berikut:

- Login ke akun Blog
- Entri Baru -> Klik HTML
- Taruh Script Kode di bawah ini pada Mode HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript">
</script>
<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js">
</script>
<script src="http://wahyu-only.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript">
</script>
  • Silahkan sobat ganti http://wahyu-only.blogspot.com dengan URL blog sobat.
  • Results=1000 adalah jumlah daftar isi yang ingin di tampilkan
- Kemudian klik simpan 

3. Membuat Accordion warna Hitam biru

Wahyu only


- Login ke akun Blog
- Entri Baru -> Klik HTML ( bukan Compose )
- Taruh Script Kode di bawah ini pada Mode HTML

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.blogger.com/blogger.g?blogID=6984301103846628017" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script><link href="http://reader-download.googlecode.com/svn/trunk/acc-toc-labelsort-default.css" media="screen" rel="stylesheet" type="text/css"></link>

<script type="text/javascript">
var showNew    = true,
    accToc     = true,
    openNewTab = true,
    maxNew     = 10,
    baru       = "Baru Niee !",
    sDownSpeed = 600,
    sUpSpeed   = 600;
</script>

<script src="http://wahyu-only.googlecode.com/files/daftar-isi-black.js" type="text/javascript"></script>

<script src="http://wahyu-only.blogspot.com/feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>
  • Silahkan sobat ganti http://wahyu-only.blogspot.com dengan URL blog sobat.
  • Results=1000 adalah jumlah daftar isi yang ingin di tampilkan
- Kemudian klik simpan

Cukup sekian pembahasan kita kali ini tentang Cara Membuat Daftar Isi Blog Accordion .pilih accordion yang sobat suka...semoga artikel ini bermanfaat.

Tinggalkan Komentar

Nama :
E-mail :
Web : tanpa http://
Komentar :
Verification Code :