Cara membuat Gadget lari menuju Sidebar

Pekembangan dunia internat memang pada saat ini sangat pesat, terbukti baik secara langsung maupun tidak langsun. Kita telah telah melihat dan membuktikan dari perkembangan tersebut, misalnya mengenai perkembangan suatu gadget hingga ke masalah template, dari semua itu telah mengalami banyak perubahan.
Nah! Maka dari saya akan mencoba membuat artikel tentang sebuah "Gadget yang bisa lari menuju sidbar atau sarangnya Gadget" yang mana gadget ini bisa ditempatkan sesuai keinginan, tergantung bentuk gadget nya. Juga dari dari code ini bisa Anda buat sebagai ungkapan  atau teks pembuka teks untuk Gadget Navbar   pada posting baru.

Cara kerjanya:

Ketika Blog Anda dikunjungi oleh pengunjung, maka halaman blog ini akan muncul dari arah kiri secara perlahan menuju ke tempat yang telah ditentukan oleh Anda, Lihat demo.

Ok! Kita langsung saja dan lihat code nya di bawah:

COPY CODENYA

 <script type="text/javascript"> //Sequential fly-in text script- by JavaScriptKit.com //For this script and 400+ more, visit http://www.javascriptkit.com //This notice must stay intact for use var pausebetweenmsg=10 //customize pause in miliseconds between each message showing up (3000=3 seconds) var glidespeed=50 //customize glide speed in pixels per frame. var curobjindex=0 function actualstyle(el, cssproperty){ if (el.currentStyle) return el.currentStyle[cssproperty] else if (window.getComputedStyle){ var elstyle=window.getComputedStyle(el, "") return elstyle.getPropertyValue(cssproperty) } } function collectElementbyClass(){ var classname="glidetext" glidearray=new Array() var inc=0 var alltags=document.all? document.all : document.getElementsByTagName("*") for (i=0; i<alltags.length; i++){ if (alltags[i].className==classname) glidearray[inc++]=alltags[i] } if (glidearray.length>0) onebyoneglide() } function onebyoneglide(){ if (curobjindex<glidearray.length) glidetimer=setInterval("glideroutine()",50) } function glideroutine(){ if (parseInt(actualstyle(glidearray[curobjindex], "left"))<0) glidearray[curobjindex].style.left=parseInt(actualstyle(glidearray[curobjindex], "left"))+50+"px" else{ glidearray[curobjindex].style.left=0 curobjindex++ clearInterval(glidetimer) setTimeout("onebyoneglide()", pausebetweenmsg) } } if (window.addEventListener) window.addEventListener("load", collectElementbyClass, false) else if (window.attachEvent) window.attachEvent("onload", collectElementbyClass) else if (document.getElementById) window.onload=collectElementbyClass </script> <div class="glidetext"> Contoh Teks Anda</div> <li><a href="http://www.blogger.com/URL%20ANDA">Contoh Link ANDA</a></li> <div class="glidetext"> <a href="http://www.blogger.com/URL%20Image" target="_blank"><img alt="JUDUL IMAGE" /></a></div> <div class="glidetext"> <a href="http://www.blogger.com/post-create.g?blogID=9094806117799320139#" id="google-widget"></a> <span class="g-plusone" data-size="medium"></span></div> <a href="https://plus.google.com/" target="_blank"><img alt="Google Plus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkaiMuYkwXo7Ka4C5yG_EM2-rMpVS5cYkcIsTZRGlKAXNecQopSqBlqO7wIH9TjYkeDaXNRp20EyCYRf29kbjhDwtRTBYd5DlurhIrxFHbHj7nf6oP3rsZuirxL3S4aAGr4T_MZ7loBXU/s1600/gplus.png" title="Google Plus" /></a> <div class="glidetext"> <a href="http://feeds.feedburner.com/FreeWidgetsForBlogs" target="_blank"><img alt="RSS Feed" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU0w_pqJC3T6ApfXwW6K_tEc8C4j7whXo00jlQUaHp1FWI0Auf9BeXbppBcCnVsFC_QsNW6v_wi8Qn8H4RGwPc1R2Hkeh4-o42G1bCzK_X4NKjk4rtmmVH9qjfpy3skI26PpwfHsmlgzg/s1600/rss.png" title="RSS Feed" /></a></div> <div class="glidetext" style="left: -800px;"> </div> <div class="glidetext"> Pada Gadget ini, Anda membutuhkan kesabaran agar tidak ada kesalahan dalam mengedit!</div> <li><a href="http://gadgetbloganda.blogspot.com/">Cara membuat Slide CSS3</a></li> <li><div class="glidetext"> Bagaimana , menarik bukan?</div> </li> </div> </div>

 Catatan:

 Perhatikan code seperti

( class="glidetext" style="left: -800px;"> </div> <div class="glidetext"> Teks Anda atau Slogan, simpan si di sini</div> <li><a href="http://namaanda.blogspot.com/">Judul blog</a></li>)

 Dan code  berikutnya di bawah:

ini hanya bentuk Slogan saja, tanpa link

(<li><div class="glidetext">Sogan saja</div> </li> </div> </div>)

Sesuaikan susun code HTML/JavaScript  pada kotak  geser di atas dengan teliti! Setelah Anda copy, agar tidak ada kesalahan

Caranya:

Pargi ke Dashboard klik Design 
Kita ambil contoh, pasang di Sidebar/Gadget (Add a Gadget) lihat gambar bawah:

Lalu pilih seperti (gambar bawah):

Selanjutnya Paste code tadi (lihat gambar bawh):

Klik Save
 Selesai dan lihat hasilnya, selamat mencoba semoga berhasil dan bermanfaat untuk Anda. Terima kasih....

Artikel Terkait