Tuesday, 28 February 2012

Cara Baru Membuat Daftar Isi Jquery Accordion Di Blog

Pada tutorial Blog kali ini, saya akan menjelaskan pada sobat tentang bagaimana Cara Baru Membuat Daftar Isi Model Jquery Accordion. Daftar isi Blog ini bertujuan agar memudahkan pengunjung Blog kita dengan mudah melihat semua isi yg ada di Blog Sobat, tanpa susah payah mencarinya.
agar dapat memudahkan Sobat untuk mengeditnya sesuai dengan keinginan sobat.
Bila sobat tertarik dengan Daftar Isi Ini, Sobat bvisa mengikuti sejenak langkah-langkah berikut Ini:


TAHAP PERTAMA :
  1. Login Ke Akun Blog Sobat
  2. Pada Dasbor Pilih Rancangan-->Edit HTML 
  3. Copy Paste CSS Berikut Tepat Diatas Kode ]]></b:skin>
.judul-label{background:-moz-linear-gradient(top,  #393E41,  #000000);font-weight:bold;line-height:1.4em;margin-bottom:5px;overflow:hidden;white-space:nowrap;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 1px 1px 4px #AAAAAA;box-shadow: 0 1px 2px rgba(0,0,0,.2);color: #e9e9e9;border: 2px solid white !important;background:#000 url("http://2.bp.blogspot.com/-6OcDgB9yXXI/TVfIh9HaUYI/AAAAAAAABUk/PUZFTYOTg-8/s1600/1m3.gif") no-repeat}.data-list{line-height:1.5em;margin-left:5px;margin-right:5px;padding-left:15px;padding-right:5px;white-space:nowrap;text-align:left;font-family:kristen itc;font-size:12px;}.list-ganjil{background-color:#000;color:#51A104;border-top:1px solid #FF0000;border-bottom:1px solid #FF0000}.headactive{color: #FFFFFF;border: 2px solid:#C0C0C0;!important;background: #D11717;background: -moz-linear-gradient(top,  #D11717,  #8C0000)} 

Simpan Templatenya

TAHAP TERAKHIR
  • Setelah Template Di simpan Sobat Langsung Ke Tab POSTING Dan Pilih Entri Baru 
  • Isikan Judul Entrinya Atau Judul Postingnya Dengan Judul Daftar  Isi Atau Sesua Keinginan Sobat
  • Setelah Itu Masukan Kode Berikut Pada Tab HTML Postingan
<script src="http://muhammadsuteja.googlecode.com/files/by1.js">
</script>
<script src="http://edukasi-global.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://muhammadsuteja.googlecode.com/files/by.js" type="text/javascript">
</script>
  • Terakhir Tinggal Mengubah Url Yg Berwarna Merah Dengan Url Blog Sobat 
  • Terbitkan Entrinya Dan Lihat Hasilnya
SELAMAT MENCOBA DAN SEMOGA BERHASIL


2 comments:

Rudy Hartono said...

mantab sob, salam kenal and visit me back

Education - Download said...

@Rudy HartonoTerimakasih gan atas kunjungannya... Saling support terus ;)

Post a Comment