Cara Membuat Daftar Isi Otomatis Scroll di Sidebar Atau Efek Marquee

Dalam postingan kali ini EFA akan memposting artikel tentang Cara Membuat Daftar Isi Otomatis Scroll di Sidebar   Atau  Efek Marquee.  postingan atau artikel ini khusus ditujukan untuk para blogger pemula. bagi para blogger kawakan yang sudah exist didunia blog terlebih dulu dilarang menggangu. satu guru satu ilmu dilarang menggangu, he..he..he...itu kata Ki joko Bodo. baiklah langsung saja ke point, mohon untuk diperhatikan bagi para blogger pemula seperti saya ini. ikuti langkah-langkah sederhana dan mudah ini:

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://fajar7siblings.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://fajar7siblings.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://fajar7siblings.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://fajar 7siblings.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

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :

• 
• 

» Selamat Berkreasi - E F A «