Langsung ke konten utama

Postingan

Menampilkan postingan dengan label Jquery

Lightbox Blogger dengan Jquery

Sejak berubahnya system edit HTML /perubahan tampilan blogger,banyak sekali template" yang diantaranya yaitu template saya yang ternyata Fitur Lightbox dari blogger tidak berfungsi.Dan sampai sekarang masih sangat sulit untuk memperbaikinya,oleh karena itu yang dapat dilakukan adalah menggunakan Lightbox aternatif yaang cukup sederhana dan ringan,sehingga ketika kita klik gambar pada posting,secara otomatis akan mebuka gambar dengan ukuran normal tanpa berpindah tab baru.Trik ini sebenarnya sudah lama saya temukan di google ,tetapi lupa sumbernya~xDDDDD Contoh Gomenasai gomenasai gomenasai @_____@",yahh,karena saya rasa banyak yang membutuhkanya,mungkin akan sangat berguna bagi yang ingin menggunakan fitur lightbox ini. Sebelum menggunakan trik ini,saya ingatkan untuk selalu membackup template anda agar bila terjadi suatu masalah,dapat dikembalikan seperti semula,tetapi tidak ada masalah juga sih,kerena sudah saya terapkan di blog Oreimo,hayaraku maou-sama dan Titan~xD Perta...

Splash Effects dengan CSS3 dan Curtain opening dengan Jquery

Splash Effects dengan CSS3 dan Curtain opening dengan Jquery.namanya panjang juga ya?ahh,karena ini adalah hasil experimen saya sendiri dengan menggabungkan dua trik yang fungsinya berbeda. pertama Untuk text effect'a adalah trik lama yang saya dapat dari Splash & Coming Soon Page Effects with CSS3 ( Codrops )(hanya html dan css3) dan Tombol close serta work animasinya menggunakan Jquery animated Curtain Seperti yang kalian tahu,Jquery animated itu fungsinya membuat tirai buka tutup pada halaman blog,tapi yang saya ambil hanya bagian tombol dan script yang sudah saya edit sendiri. Trik ini sudah saya terapkan pada template terbaru saya : Shinobu Oshino Untuk menggunakan Trik ini,selalu back-up template kamu agar tidak terjadi sesuatu yang diinginkan,karena ada kemungkinan kamu akan menemui beberapa problem seperti: -tombol open tidak dapat di klik. Kenapa tidak bisa diklik? Ada kemungkinan Jquery tidak aktif karena: -ada jquery lain yang sama. -ada js lain yang bentrok dengan j...

Content Accordion dengan jquery

Apa kabar sobat?masih bingung bagaimana bisa template hatsune miku magazine style bisa seperti itu?sebenar'a cara'a sudah cukup umum menurut saya.taukah kamu tentang trik Jquery Accordion?yapp,sebenar'a sama saja,trik'a,kalau biasanya diterapkan untuk list menu atau sidebar,maka trik ini saya terapkan ke element" seperti content,posting,sidebar atau sekaligus semuanya. Sebelumnya saya peringatkan dahulu sebelum mencoba trik ini,backup dahulu template kamu agar tidak terjadi hal - hal yang tidak diinginkan.kemungkinan berhasilnya trik ini tergantung dirimu sendiri,bagi yang sudah familiar/biasa main css dan html,saya yakin sudah mengerti,tapi bagi yang belum,saya sarankan jangan,tapi jika berniat sungguh",silakan berusaha,saya hanya bisa membantu memberikan solusi,bukan bantuan ini itu =___=v. #atau yang ga mau ribet ,saya sudah sediakan template yang udah jadi'a~: hatsune miku magazine style+demo -contoh- Ok,pertama seperti biasa buka blogger=>template=...

Animasi Dengan Jquery Firefly Plugin

hai sobat,kali ini saya mau sharing cara memasang Jquery Firefly.Jquery Firefly,memungkinkan untuk menampilkan animasi pada background blog/webkita berputar" seperti nyamuk~xDD.contohnya bisa dilihat seperti blog saya sendiri,bila sobat perhatikan,ada bintang" yang bergerak mengelilingi blog saya.sebelum mencoba jquety ini,jaya ingatkan dahulu untuk membackup template kamu. Contoh Screenshot Ok,pertama buka blogger => rancangan => edit HTMl,lalu masukan script" dibawah ini, diatas kode </head> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/> <script src='https://sites.google.com/site/djogzs/js/less-1.1.3.min.js' type='text/javascript'/> <script src='https://sites.google.com/site/djogzs/js/jquery-firefly.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $.firefly({ /*images : [&#39;h...

Animated Text dan Icon Menu Dengan jQuery

Apa kabar sobat,dah lama nih ga share tentang Jquery lagi,sekarang saya mau kasih tutorial cara memasang Menubar dengan animated Text dan Icon atau lebih tepat'a menggunakan gambar dengan sentuhan Jquery yang animasi'a sangat menarik .Contoh'a bisa sobat lihat disini .trik ini saya dapatkan dari http://tympanus.net.sobat juga bisa lihat trik menarik lain'a disana.ok,ga usah basa - basi lagi,langsung baca tutorialnya~ Langkar pertama,Buka blogger =>Rancangan=>edit HTML lalu Copas semua CSS dibawah ini,Tepat diatas kode ]]></b:skin> .sti-menu{ width:1010px; position:relative; margin:60px auto 0 auto; } .sti-menu li{ float:left; width:200px; height:300px; margin:1px; } .sti-menu li a{ display:block; overflow:hidden; background:#fff; text-align:center; height:100%; width:100%; position:relative; -moz-box-shadow:1px 1px 2px #ddd; -webkit-box-shadow:1px 1px 2px #ddd; box-shadow:1px 1px 2px #ddd; } .sti-menu li a h2{ color:#000; font-family: 'Wire One...

Membuat Menu Bubbles Dengan Jquery Dan CSS3

apa kabar sobat?kali ini saya mau share trik menarik lagi nih.membuat Menu Bubbles Dengan Jquery Dan CSS3,sebenarnya'a ini trik lama ,tapi beda'a disini saya menambahkan Sentuhan CSS3 agar lebih menarik. efek bubble akan muncul jika sobat arahkan kursor ke tombolnya.mau?cekidot gan.... Pertama,cobat copy paste CSS di bawah ini di Rancangan =>Edit HTML =>lalu letakan css'a di template sobat di atas kode ]]></b:skin> .bubbles { margin: 100px 0 0; padding: 0; list-style: none; } .bubbles li { padding: 0; margin: 0 2px; float: left; position: relative; text-align: center; } .bubbles a { padding: 15px 10px; display: block; color: #000000; width: 140px; text-decoration: none; font-weight: bold; background: -moz-linear-gradient(top, #e0f3fa 0%, #d8f0fc 50%, #b8e2f6 51%, #b6dffd 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0f3fa), color-stop(50%,#d8f0fc), color-stop(51%,#b8e2f6), color-stop(100%,#b6dffd)); -webkit-border-radius: ...

Membuat menu melayang dengan sentuhan Jquery dan CSS3

Apa kabar sobat?udah pernah lihat menu melayang belum?pasti sudah kan..kali ini saya mau share trik menu melayang,tetapi menu ini dilengkapi jquery dan css3.effect animasi hover'a dengan css3 dan effect melayang dengan jquery yang selalu mengikuti layar kita.contoh'a bisa sobat lihat disini  mau tau cara'a?lets go... Pertama,buka blogger sobat, Rancangan => Edit HTML lalu masukan css dibawah ini ke template sobat #floatMenu { position:absolute; top:150px; left:50%; margin-left:235px; width:80px;} #floatMenu ul {list-style-type: none;} #floatMenu ul li a { display:block; background:-moz-linear-gradient(-90deg, #222, #2b2b2b) repeat scroll 0 0 transparent; background:-webkit-gradient(linear, left top, left bottom, from(#222), to(#2b2b2b)); border:1px solid #999; border-left:6px solid #999; text-decoration:none; color:#ccc; padding:5px 5px 5px 25px; width:80px; -webkit-transition: all 0.6s ease-out; box-shadow: #333 0px 0px 10px; -moz-box-shadow: #333 0px 0px 10px; -webkit...

Memasang Accordion Dengan Jquery dan Css

sobat udah pernah liat blog teman sobat sidebar'a bisa buka,lalu menutup??ini dia trik'a namanya Accordion,kalau sobat belum tau seperti apa Accordion ,sobat bisa lihat contoh'a disini  dengan Accordion kamu bisa mengurangi tempat blog kamu.trik ini tdk akan memberatkan blog kq.ok,dah langsung aja saya kasih tau cara'a n_n Pertama,masukan kode HTML ini ke blog kamu... isi widget yang kamu iginkan.contoh:bukutamu,blogroll,link dan sebagai'a <div class="container"> <h2 class="acc_trigger"><a href="#">Menu1</a></h2> <div class="acc_container"> <div class="block"> Isi widget/text kamu disini </div> </div> <h2 class="acc_trigger"><a href="#">Menu2</a></h2> <div class="acc_container"> <div class="block"> Isi widget/text kamu disini </div> </div> </div> kemudian,masukan CSS in...

Effect Asap dengan jquery

Ini dia,koleksi Jquery menarik dari saya,dengan effect asap ini,blog kamu akan tambah menarik.untuk contoh'a,kamu bisa liat di blog akatsuki atau di gayadesign mau tau cara'a?CEkidot gan n_n kalau mau lihat contoh'a,sobat bisa lihat disini pertama,copy paste js ini di atas kode </body> atau di bawah kode <head> <link href='http://www.gayadesign.com/scripts/smokeeffect/css/style.css' rel='stylesheet' type='text/css' /> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script> <script src="http://www.gayadesign.com/scripts/smokeeffect/js/smokeEffect.js" type="text/javascript"></script> <script type='text/javascript'> SmokeEffect.imgLocation = "http://www.gayadesign.com/wp-content/themes/gdblocked/images/smoke.png"; SmokeEffect.smokeWidth = 100; SmokeEffect.smokeHeight = 100; </script> lalu masu...

Back to top dengan sentuhan jquery

Back to Top dengan jQuery ini adalah versi lain dari ' Back to Top dengan Smoothscroll'. Versi Back to Top dengan jQuery ini akan berfungsi untuk naik keatas secara halus dan ketika mencapai keatas kecepatannya akan berkurang yang mirip dengan Lift.bagaimana cara memasang tombol ini? ikuti langkah2 berikut ini: 1. Masukan script jQuery berikut diatas </body> (jika telah ada script ini tidak perlu diperlukan lagi) <script src='http://ajax.googleapis.com/ajax/ libs/jquery/1.3.2/jquery.min.js' type='text/ javascript'/> 2. Masukan pula script ' back to top' ini dibawah script jQuery diatas: <script src='http://choenblogspot.googlecode.com/ files/backtotop.js' type='text/javascript'/> 3.Kemudian letakan kode html dibawah ini di elemen halaman atau di letakan sebelum </body> atau dibagian footer, dan benahi posisinya dengan CSS sesuai keinginan anda. <a href='#' onclick='MGJS.goTop();return fa...