ads
Home » » Widget Autoscroll Otomatis Keren

Widget Autoscroll Otomatis Keren

Written By Ramadhan Fnw on Aug 26, 2012 | 6:40 PM

Assalamu'alaikum,, mau share tentang Tips Blog lagi nih temen".. :) Kali ini saya akan share Widget Autoscroll Otomatis Keren.. Demonya bisa langsung dicoba,, disamping.. deket scrollbar.. :)
Klik, lalu coba deh. :)
http://infotips-rama.blogspot.com
Gimana? Bagus kan? Jadi gak perlu scroll sendiri lagi. :D
Cara membuatnya mudah kok... Ikuti aja langkah di bawah ini untuk membuat Widget Autoscroll Otomatis Keren ini,, :)
http://infotips-rama.blogspot.com
http://infotips-rama.blogspot.com
Pertama,, kalian tambahkan dulu css ini diatas kode ]]></b:skin> ,, udah tau kan caranya? :)
http://infotips-rama.blogspot.com
.speedbar {list-style-type:none;border:1px solid #EEE;height:10px;margin-left:-40px;}
.capt {font-family:arial;font-size:6pt;color:#CCC;margin-left:-3px;}
Lalu, setelah itu masukkan javascript ini di bawah kode]]></b:skin>
<script type="text/javascript" src="http://infotipsrama.googlecode.com/files/Autoscroll.js">
http://infotips-rama.blogspot.com
Save dulu,,
http://infotips-rama.blogspot.com
Setelah itu,, masukkan kode dibawah ini di  "Tambahkan Gadget" (Yang HTML/Javascript) ..
<div id="autoscroll-container" style="position:fixed;right:0px;top:250px;">
<div id="speednav" style="background:#666;padding:10px;float:right;width:24px;height:122px;display:none;">
<div class="capt">SPEED</div>
<ul>
<li style="list-style-type:none;border:0px;width:20px;margin-left:-40px;font-family:arial;font-size:7pt;color:#CCC;text-align:center;">&nbsp;high</li>
<li class="speedbar" id="speed5" style="background:#999;width:20px;" onclick="startit(5);" onmouseover="this.style.cursor='pointer';changeBg(5);" onmouseout="resetBg();">&nbsp;</li>
<li class="speedbar" id="speed4" style="background:#aaa;width:20px;" onclick="startit(4);" onmouseover="this.style.cursor='pointer';changeBg(4);" onmouseout="resetBg();">&nbsp;</li>
<li class="speedbar" id="speed3" style="background:#bbb;width:20px;" onclick="startit(3);" onmouseover="this.style.cursor='pointer';changeBg(3);" onmouseout="resetBg();">&nbsp;</li>
<li class="speedbar" id="speed2" style="background:#ccc;width:20px;" onclick="startit(2);" onmouseover="this.style.cursor='pointer';changeBg(2);" onmouseout="resetBg();">&nbsp;</li>
<li class="speedbar" id="speed1" style="background:#ddd;width:20px;" onclick="startit(1);" onmouseover="this.style.cursor='pointer';changeBg(1);" onmouseout="resetBg();">&nbsp;</li>
<li class="speedbar" style="font-family:arial;font-size:7pt;color:#CCC;text-align:center;width:20px;height:12px;" onclick="stopit();" onmouseover="this.style.cursor='pointer';">stop</li>
</ul>
</div>
<div id="speedtoogle" style="float:right;background:#336699" onclick="tooglespeed()" onmouseover="this.style.backgroundColor='#6699cc';this.style.cursor='pointer';" onmouseout="this.style.backgroundColor='#336699';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNyCBH_Do6MdpGCSj3rg_A9I9O_4b11ERVgWcqkCzkMsEeESSdWaug_Z4wQ5o_JiuhwiKABwbkzRxIZsrITre0ZKw1ZxwslwEYwu3p5GJ0mTYH9SGnI5Xt7m7TpO2LaGCZ7Pp5EPTTetY/s1600/showautoscroll.png" style="border-right:1px solid #AAA;"/></div>
</div>
Klik Save lagi,, dan lihat hasilnya.. :)
http://infotips-rama.blogspot.com
Gimana? Bisa kan? :)
http://infotips-rama.blogspot.com
Terimakasih ya sudah membaca Artikel Widget Autoscroll Otomatis Keren.. :)
http://infotips-rama.blogspot.com


5
Share this article :

7 komentar:

zhanaz48 said...

Waduhhh..

Ga' bisa di WP yach sobb..??

Ramadhan Fnw said...

@zhanaz48wah, gak tau sob.. saya gak tau tentang WP.. :(

Unknown said...

wah keren sob demonya di samping ini ya

vmediakom said...

mantab nih ya bisa autoscroll gitu...
ijin bookmark dulu sob, barangkali nanti saya gunakan :)

Ramadhan Fnw said...

@Widodoiya sob,, :)

Ramadhan Fnw said...

@vmediakomsilahkan sob :)

oastera said...

thx infonya.. coba2 dulu..

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Share Our Knowledge - All Rights Reserved
Template Modify by Creating Website Inspired Wordpress Hack
Proudly powered by Blogger