Headlines News :

Cara Membuat Daftar Isi Otomatis Scroll di Sidebar Atau Efek Marquee

Written By Unknown on Kamis, 18 Oktober 2012 | 06.44

Ok mari kita mulai
1. login ke akun blogger anda
2. Pilih Rancangan lalu klik Tambah Gadget dan pilih HTML / JavaScript
3. Untuk memasang Daftar Isi dengan Scroll masukkan kode berikut :




<div style="background:#000; -moz-border-radius:30px;
-moz-box-shadow: -2px 20px 20px #000;
-webkit-box-shadow: -2px 20px 20px #000;
border:1px solid #111;
height: 265px; margin: 0px; overflow: auto; padding: 1px; width: 508px;">
<script src="http://generation-platinum.googlecode.com/files/kodesitemap.js">
</script>
<script src="http://dayatbintangdi.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Kalau tidak berhasil silahkan gunakan script dibawah ini:
   


<div style="overflow:auto;width:430px;height:120px;padding:10px;border:1px solid #eee"><script style="text/javascript" src="https://sites.google.com/site/anggasonaanotherbestblog/javascript/daftar_isi_label_new_icon.js"></script><script src="http:/dayatbintangdi.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script> </div>

Kalau ingin mencoba daftar isi seperti Education for all silahkan coba script dibawah ini.



<div class='widget-content'> <style type="text/css">
.bgsGR_CommBox, .bgsGR_CommBox-cumulus, .Label .widget-content {background:#000 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Mart10/template-GR/bgwidget.jpg) bottom center repeat;border:5px groove #666;font:Droid normal;font-size:10px;color:#CCFFFF;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;-o-transition:all 2s ease-in;-moz-transition: all 2s ease-in;-webkit-transition:all 2s ease-in;}
.bgsGR_CommBox-cumulus {float: left;margin: 5px; opacity: 0.2;filter:alpha(opacity=20);}
.Label .widget-content {margin: 20px auto;width: 285px;height: 250px;overflow: auto; opacity: 0.2;filter:alpha(opacity=20);}      
.bgsGR_CommBox { overflow:auto;height:200px; padding:15px 10px 10px 0;opacity:0.1;}      
.bgsGR_CommBox:hover, .bgsGR_CommBox-cumulus:hover, .Label .widget-content:hover{opacity:1.0; filter:alpha(opacity=100);}
.bgsGR_CommBox a{color:#cb5d03;font-size:12px;font-weight:bold;text-decoration:none;}
.bgsGR_CommBox a:hover{text-decoration:underline;color:#33FF00;font-style:normal;}  
</style>
<p style="font-family:Staccato222 BT;font-size:22px;color:888;margin:10px;text-align:center;">Dafatr Isi</p>
<div class="bgsGR_CommBox">
<script src="http://generation-platinum.googlecode.com/files/kodesitemap.js">
</script>
<script src="http://dayatbintangdi.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>
</div>



4. Tulisan yang berwarna PINK bisa diganti sesuai dengan lebar sidebar blog sobat, warna KUNING ganti dengan alamat blog sobat, berwarna BIRU warna backgroundnya, gantilah sesuka hati atau  kosongikan ganti aja dengan kata none.

Kalau dari script script diatas tidak berhasil silahkan pergi mengunjungi tutorial cara membuat daftar isi otomatis melayang

5. Buat yang suka Daftar Isi Dengan Efek Berjalan masukkan kode berikut :



<marquee direction="down" onmouseover="this.stop()" width="100%" onmouseout="this.start()" scrollamount="2" height="200"><br/><br/><script style="text/javascript" src="http://adesanusi.googlepages.com/daftar-isi.txt"></script><script style="text/javascript">var numposts = 100;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://dayatbintangdi.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script><br/><br/></marquee>

6. Seperti diatas, warna KUNING ganti dengan alamat blog sobat, warna PINK untuk mengatur ketinggian. Silakan diutak-atik sendiri untuk mendapatkan hasil yang maksimal yang sesuai dengan keinginan sobat blogger mania.
7. Terakhir dan yang paling utama simpan dan lihat hasilnya.

Semoga Bermanfaat, teruskan berkreasi
WARNING :
  • Jangan Lupa Tinggalkan Komentar Anda, Komentar Anda sangat berguna demi kelangsungan Blog saya
  • Do not Forget Leave Your Comment Your comments are very useful for the survival of my Blog
Thank's you (Terima Kasih)

Tentang saya

Saya Muzzamil Hidayat Terlahir dari Rahim Ibu saya yang bernama Suratmi. saya lahir di Kota Klaten pada tanggal 28 Desember dan saya mempunyai saudara perempuan yang bernama Rizki Nurul Khasanah. saya mempunyai cita-cita ingin menjadi Desaign Grafis yang handal.dan apakah anda tau mengapa saya memilih itu sebagai cita-cita?jawabanya karena saya suka dengan pekerjaan seperti itu..hehehe…simpel tapi menghasilkan banyak keuntungan.itulah sedikit tentang saya. Maaf jika ada Kesalahan Dalam Menulis Artikel Mohon Di Maklumi.
Follow aku di Twitter, Facebook


Artikel Terkait