tag:blogger.com,1999:blog-39818236698018433882024-02-19T05:46:22.459-08:00Motaro BLogBloG MOtarOhttp://www.blogger.com/profile/17946460676864843645noreply@blogger.comBlogger56125tag:blogger.com,1999:blog-3981823669801843388.post-90278700734617356112010-08-11T02:30:00.000-07:002010-08-11T02:58:45.806-07:00Memasang tirai di blog dengan Sentuhan Jquery<div style=";font-family:";"><span style="font-size:medium;">1.letakan Script di bawah ini,tepat dibawah kode</span> </div><div style=";font-family:";"><head></div><div style=";font-family:";"><br /></div><div style="font-family: ";";"><pre name="code" class="cpp"><script type="text/javascript" src="<a class="linkification-ext" title="Linkification: http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" href="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js">http://jqueryjs.googlecode.com/files/jquery-1.3.2.js</a>"></script> </pre></div><div style="font-family: ";";"><br /></div><div style="font-family: ";";"><br />2.<span style="font-size:medium;">letakan juga script dibawah ini tepat diatas kode<br /></span></head></div><div style="font-family: ";";"><br /></div><div style="font-family: ";";"><pre name="code" class="cpp"><script src="http://apadewa.co.cc/jquery.easing.1.3.js" type="text/javascript"></script></pre><br /></div><div style="font-family: ";";"><br /></div><div style="font-family: ";";"><span style="font-size:medium;">3.lalu,letakan kode dibawah ini tepat di atas kode<br /></span></body></div><div style="font-family: ";";"><br /><br /></div><pre name="code" class="cpp"><div class="leftcurtain"><img src="http://buildinternet.com/live/curtains/images/frontcurtain.jpg"/></div><br /><div class="rightcurtain"><img src="http://buildinternet.com/live/curtains/images/frontcurtain.jpg"/></div><br /><img class="logo" src="http://i293.photobucket.com/albums/mm48/dhoony_bucket/w-1.gif"/><br /><a class="rope" href="#"><img src="http://buildinternet.com/live/curtains/images/rope.png"/></a><br /></pre><div style="font-family: ";";"><br /></div><div style=";font-family:";"><span style="font-size:medium;">note:leftcurtain dan right curtain adalah alamat gambar yang akan dijadikan tirai pada blog kamu.ganti gambar tirai,dengan kreasi mu,atau copy paste gambar yg sudah saya sediakan.. </span></div><div face=""" style=""><br /></div><div face=""" style=""><span style="font-size:medium;"> <img src="http://buildinternet.com/live/curtains/images/frontcurtain.jpg" /> </span></div><div face=""" style=""><img src="http://buildinternet.com/live/curtains/images/rope.png" /> </div><div face=""" style=""><span style="font-size:medium;">nah,sekarang masukan CSS ini,di atas kode</span> </style><br /></div><div face=""" style=""><br /></div><div face=""" style="">*{ </div><div face=""" style="">margin:0; </div><div face=""" style="">padding:0; </div><div face=""" style="">} </div><div face=""" style="">body { </div><div face=""" style="">text-align: center; </div><div face=""" style="">background: #4f3722 url('http://buildinternet.com/live/curtains/images/darkcurtain.jpg') repeat-x; </div><div face=""" style="">} </div><div style="font-family: "Trebuchet MS",sans-serif;">img{ </div><div style="font-family: "Trebuchet MS",sans-serif;">border: none; </div><div style="font-family: "Trebuchet MS",sans-serif;">} </div><div style="font-family: "Trebuchet MS",sans-serif;">.leftcurtain{ </div><div style="font-family: "Trebuchet MS",sans-serif;">width: 50%; </div><div style="font-family: "Trebuchet MS",sans-serif;">height: 495px; </div><div style="font-family: "Trebuchet MS",sans-serif;">top: 0px; </div><div style="font-family: "Trebuchet MS",sans-serif;">left: 0px; </div><div style="font-family: "Trebuchet MS",sans-serif;">position: absolute; </div><div style="font-family: "Trebuchet MS",sans-serif;">z-index: 2; </div><div style="font-family: "Trebuchet MS",sans-serif;">} </div><div style="font-family: "Trebuchet MS",sans-serif;">.rightcurtain{ </div><div style="font-family: "Trebuchet MS",sans-serif;">width: 51%; </div><div style="font-family: "Trebuchet MS",sans-serif;">height: 495px; </div><div style="font-family: "Trebuchet MS",sans-serif;">right: 0px; </div><div style="font-family: "Trebuchet MS",sans-serif;">top: 0px; </div><div style="font-family: "Trebuchet MS",sans-serif;">position: absolute; </div><div style="font-family: "Trebuchet MS",sans-serif;">z-index: 3; </div><div style="font-family: "Trebuchet MS",sans-serif;">} </div><div style="font-family: "Trebuchet MS",sans-serif;">.rightcurtain img, .leftcurtain img{ </div><div style="font-family: "Trebuchet MS",sans-serif;">width: 100%; </div><div style="font-family: "Trebuchet MS",sans-serif;">height: 100%; </div><div style="font-family: "Trebuchet MS",sans-serif;">} </div><div style="font-family: "Trebuchet MS",sans-serif;">.logo{ </div><div style="font-family: "Trebuchet MS",sans-serif;">margin: 0px auto; </div><div style="font-family: "Trebuchet MS",sans-serif;">margin-top: 150px; </div><div style="font-family: "Trebuchet MS",sans-serif;">} </div><div style="font-family: "Trebuchet MS",sans-serif;">.rope{ </div><div style="font-family: "Trebuchet MS",sans-serif;">position: absolute; </div><div style="font-family: "Trebuchet MS",sans-serif;">top: -40px; </div><div style="font-family: "Trebuchet MS",sans-serif;">left: 70%; </div><div style="font-family: "Trebuchet MS",sans-serif;">z-index: 4; </div><div style="font-family: "Trebuchet MS",sans-serif;">}</div><div style="font-family: "Trebuchet MS",sans-serif;"><br /></div><div style="font-family: "Trebuchet MS",sans-serif; text-align: justify;"><span style="font-size:medium;">saya membuat dua div kelas untuk dua tirai (. Leftcurtain dan. Rightcurtain) yang dikunci untuk ditunjuk sisi mereka. Ini dilakukan di CSS dengan menggunakan atas, kiri, dan posisi atribut.<br />Anda akan melihat bahwa kita ditentukan untuk masing-masing lebar tirai, 50% dan 51%. Lebar yang berbeda-beda adalah untuk mengkompensasi beberapa tepi berombak ketika tirai tertutup yang dapat menyebabkan unsur-unsur di bawahnya untuk puncak melalui. Untuk mengatasi hal ini kita membuat tirai kanan sedikit tumpang tindih yang kiri, dengan menggunakan z-indeks. Z-index ini nilai-nilai juga memastikan bahwa tirai tetap di atas segala sesuatu yang seharusnya di balik tirai. <br />Gambar tirai yang sebenarnya ditetapkan menjadi 100% lebar / tinggi sehingga divs tirai saat ini menyusut divs lebar gambar menjadi berkumpul, seperti mereka dalam kehidupan nyata. <br />The. Logo berisi apa yang saya ingin bersembunyi di balik tirai, Anda dapat menggantinya dengan apapun yang Anda inginkan. <br />Akhirnya. Tali hanya tempat tali grafik di atas segalanya dan menyembunyikan sebagian gambar dari layar sehingga kami dapat menyelesaikan "menarik tali" efek kemudian. </span></div><div style="font-family: "Trebuchet MS",sans-serif; text-align: justify;"><span style="font-size:medium;">langkah terakhir,anda masukan script dibawah ini, di Bawah kode</span> </style><br /></div><div style="font-family: "Trebuchet MS",sans-serif;"><br /></div><div style="font-family: "Trebuchet MS",sans-serif;"><br /></div><br /><pre name="code" class="cpp"><script type="text/javascript"><br />$(document).ready(function() {<br />$curtainopen = false;<br />$(".rope").click(function(){<br />$(this).blur();<br />if ($curtainopen == false){<br />$(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'});<br />$(".leftcurtain").stop().animate({width:'60px'}, 2000 );<br />$(".rightcurtain").stop().animate({width:'60px'},2000 );<br />$curtainopen = true;<br />}else{<br />$(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'});<br />$(".leftcurtain").stop().animate({width:'50%'}, 2000 );<br />$(".rightcurtain").stop().animate({width:'51%'}, 2000 );<br />$curtainopen = false;<br />}<br />return false;<br />});<br />});<br /></script><br /></pre><br /><br /><br /><br /><div style="font-family: "Trebuchet MS",sans-serif;"><br /></div><div style="font-family: "Trebuchet MS",sans-serif;"><span style="font-size:medium;">SELAMAT MENCOBA!!!</span></div>BloG MOtarOhttp://www.blogger.com/profile/17946460676864843645noreply@blogger.com2tag:blogger.com,1999:blog-3981823669801843388.post-68438500882654089782010-07-06T00:19:00.001-07:002010-07-06T00:20:07.633-07:00<div style="text-align: center;"><span style="font-size:180%;">BLOG MASIH DALAM MASA PERBAIKAN JADI MAKLUM KALO MASIH BERNTAKAN...</span></div>BloG MOtarOhttp://www.blogger.com/profile/17946460676864843645noreply@blogger.com0tag:blogger.com,1999:blog-3981823669801843388.post-91697181918402095662010-07-05T09:52:00.000-07:002010-07-08T18:55:42.495-07:00Auto-Moving Parallax Background - JQUERY<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht0Wl62_F2BxwZA1Nxer_oexSZuIAN4CgfZRZ-28AbGJw9Z4EhTXg6DWr-QXxDRiemXClmqdvB5khFdGfDTaszB9T0I-rfwc4pEMds1y8uMBasFPycqulCiVqXXKEBXJVq8JewdyMTe6I/s1600/WQWQW.JPG"rel="facebox"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 320px; height: 153px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht0Wl62_F2BxwZA1Nxer_oexSZuIAN4CgfZRZ-28AbGJw9Z4EhTXg6DWr-QXxDRiemXClmqdvB5khFdGfDTaszB9T0I-rfwc4pEMds1y8uMBasFPycqulCiVqXXKEBXJVq8JewdyMTe6I/s320/WQWQW.JPG" alt="" id="BLOGGER_PHOTO_ID_5490469740669224370" border="0" /></a><br /><br /><div style="text-align: justify;">paralaks adalah efek di mana ada berbagai lapisan latar belakang bahwa semua bergerak pada tingkat yang berbeda menciptakan efek 3D yang sangat unik (Sonic the Hedgehog berpikir). Dalam demo yang asli, satu-satunya cara untuk melihat aksi paralaks terjadi adalah mengubah ukuran jendela browser.<br /><br />Baru-baru ini, Paulus Hayes yang mengambil contoh dan berlari dengan itu. Dia menggunakan sangat dingin-WebKit-transisi atribut untuk membuat efek paralaks bergerak tanpa perlu mengubah ukuran jendela browser atau menggunakan javascript. Paulus melakukan pekerjaan yang mengagumkan dan demo karya besar, tapi tentu saja karena dia menggunakan perpanjangan css proprietary, hanya bisa bekerja di browser sangat modern berbasis WebKit (Safari 4 dan Google Chrome).<br /><br />Walaupun contoh Paulus adalah ideal bagaimana jenis efek ini akan dilakukan di masa depan, aku pikir mungkin keren untuk melemparkan sedikit JavaScript asli dan mendapatkan versi auto-pindah di luar sana yang harus bekerja di semua browser *. (saya kutip dari web http://css-tricks.com/)<br /></div><br />untuk penjelasannya mari kita coba<br /><br /><div style="text-align: center;"><span style="font-size:180%;"><a href="http://motaro44.freetzi.com/StarryNightMoving/">Demo parallaks</a><br /><br /><a href="http://css-tricks.com/examples/StarryNightMoving.zip">Download source code</a><br /></span></div>untuk bagian Html sebagai berikut :<br /><span class="code"><br /><div id="background"></div><br /><div id="midground"></div><br /><div id="foreground"></div><br /></span><br />untuk bagian CSS seperti ini :<br /><span class="code"><br />#background {<br /> background: url(../images/background.png) repeat 5% 5%;<br /> position: absolute;<br /> top: 0; left: 0; right: 0; bottom: 0;<br /> z-index: 100;<br />}<br /><br />#midground {<br /> background: url(../images/midground.png) repeat 20% 20%;<br /> position: absolute;<br /> top: 0; left: 0; right: 0; bottom: 0;<br /> z-index: 200;<br />}<br /><br />#foreground {<br /> background: url(../images/foreground.png) repeat 90% 110%;<br /> position: absolute;<br /> top: 0; left: 0; right: 0; bottom: 0;<br /> z-index: 300;<br />}<br /></span><br /><br />Gambar background yang berulang dan ditetapkan dengan persentase. Persentase adalah apa yang membuat efek paralaks bekerja normal. Tapi dalam hal ini JavaScript versi baru, akan menimpa background yang ada dan menghidupkan nilai-nilai sebagai gantinya. Hal ini membutuhkan penggunaan backgroundPosition plugin untuk jQuery, sebagai out-of-the-box jQuery tidak dapat menghidupkan properti backgroundPosition.<br />kemudian pemanggilan jquery dan pemasangannya.<br /><span class="code"><br /><script src="js/jquery-1.3.2.min.js" type="text/javascript"></script><br /><script src="js/jquery.backgroundPosition.js" type="text/javascript"></script><br /><script type="text/javascript"><br /> $(function(){<br /><br /> $('#midground').css({backgroundPosition: '0px 0px'});<br /> $('#foreground').css({backgroundPosition: '0px 0px'});<br /> $('#background').css({backgroundPosition: '0px 0px'});<br /><br /> $('#midground').animate({<br /> backgroundPosition:"(-10000px -2000px)"<br /> }, 240000, 'linear');<br /><br /> $('#foreground').animate({<br /> backgroundPosition:"(-10000px -2000px)"<br /> }, 120000, 'linear');<br /><br /> $('#background').animate({<br /> backgroundPosition:"(-10000px -2000px)"<br /> }, 480000, 'linear');<br /><br /> });<br /></script><br /></span><br />Catatan sebelum kita melakukannya dari animasi kita harus mengatur ulang backgroundPosition di dalam JavaScript.tapi itu adalah persyaratan untuk plugin untuk bekerja dengan baik.<br /><br />Memperluas panjang animasi<br /><br />Angka-angka besar dalam fungsi animasi (misalnya 120.000) berdiri untuk perseribu detik. Jadi, 120.000 = 120 detik = 2 menit. Mengubah angka-angka Anda dapat memperpanjang atau memperpendek jangka waktu animasi yang Anda peroleh. Ini tidak terbatas meskipun ... Mungkin ada cara untuk mendapatkan yang dilakukan, saya hanya tidak berpikir itu semua melalui. Mungkin abstrak animasi untuk fungsi yang dapat dipanggil dan kemudian menelepon lagi selama panggilan balik (atau sesuatu).<br /><br />* Hal paralaks ini sangat tergantung pada transparansi. Jika Anda membutuhkannya bekerja di IE 6, memeriksa memperbaiki Unit PNG atau DD_belatedPNG tersebut.<br />sekian cukup sekian artikel kali ini..<br />semoga dapat dikembangkan lagi...BloG MOtarOhttp://www.blogger.com/profile/17946460676864843645noreply@blogger.com3tag:blogger.com,1999:blog-3981823669801843388.post-39526032152260837072010-07-05T07:28:00.000-07:002010-07-05T08:09:51.612-07:00Membuat icon menu animasi di blog - JQUERY<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAYMFaiLlLbksYbIDfY6UjZka5hm1gT1au5lCe71ATe6Agc7Ux9FqoGM8FUyOMgh7cafT5wx4xiOOHdyeypTiB813u8n-ypbBbHdJBBkN0GhMY93v0DOkiJPX4hftuYvBSLKyYDukNLs/s1600/333.JPG"rel="facebox"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 320px; height: 152px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAYMFaiLlLbksYbIDfY6UjZka5hm1gT1au5lCe71ATe6Agc7Ux9FqoGM8FUyOMgh7cafT5wx4xiOOHdyeypTiB813u8n-ypbBbHdJBBkN0GhMY93v0DOkiJPX4hftuYvBSLKyYDukNLs/s320/333.JPG" alt="" id="BLOGGER_PHOTO_ID_5490433613630195730" border="0" /></a><br /><span class="fullpost"></span><br />haloo semua ..hemz...<br />Menu yang atraktif pasti lebih disukai daripada menu biasa, salah satunya dengan icon gambar.<br />Icon Gambar yang sesuai dapat membercantik tampilan blog kita.Tapi bukan cuma sekedar menu biasa! menu kali ini akan membesar jika diekati oleh kursor.<br />seperti tampilan menu yang aku pakai..<br />pengen tau cara pembuatannya.. okey<br />kita bahas disini..<br /><br /> * Login ke Blogger lalu masuk ke "Rancangan" -> "Edit HTML"<br /> * paste kode dibawah ini dibawah </body><br /><pre name="code" class="cpp"><br /><script src='http://motaro44.freetzi.com/motaroquery.js' type='text/javascript'/><br /><script src='http://motaro44.freetzi.com/interfacenyamotaro.js' type='text/javascript'/><br /><script type='text/javascript'><br />$(document).ready(<br />function()<br />{<br />$(&#39;#dock&#39;).Fisheye(<br />{<br />maxWidth: 50,<br />items: &#39;a&#39;,<br />itemsText: &#39;span&#39;,<br />container: &#39;.dock-container&#39;,<br />itemWidth: 90,<br />proximity: 90,<br />halign : &#39;center&#39;<br />}<br />)<br />}<br />);<br /><br /></script><br /><br /><style type='text/css'><br />.dock {<br />position: relative;<br />height: 50px;<br />padding-left:0px;<br />margin-top:50px;<br /><br />}<br />.dock-container {<br />position: absolute;<br />height: 50px;<br />padding-left: 20px;<br /><br />}<br />a.dock-item {<br />display: block;<br />width: 60px;<br />color: #adf558;<br />position: absolute;<br />top: 20px;<br />text-align: center;<br />text-decoration: none;<br />font: 14px Arial, Helvetica, sans-serif;<br />}<br /><br />.dock-item img {<br />border: none;<br />margin: 5px 10px 0px;<br />width: 100%;<br />}<br /><br />.dock-item span {<br />display: block;<br />padding-left: 20px;<br />}<br /></style><br /><br /><div class='dock' id='dock' style='display: block;'><br /><div class='dock-container' style='left: -7.48972px; width: 814.979px;'><br /><a class='dock-item' expr:href='data:blog.homepageUrl' style='width: 90px; left: 0px;'><img alt='home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhomY_8fvinY5dZFkdVqfgMdWtqzLPfHyfBKHhGvJ_LIesGU3OoQt7LEC68NawsfI4MUJmkci_zpygLx-lhFr_6WRkohUM-SFDFnQPMa_pKlofMkLf26U2nB_rEwjqkO7jhuD74VSJQn8/s320/homeijo.png'/><span style='display:block;'>Home page</span></a><br /><br /><a class='dock-item' href='link 2' style='width: 90px; left: 90px;'><img alt='Gi���¡���»�¯�¿�½i thi���¡���»�¯�¿�½u' src='http://i342.photobucket.com/albums/o433/bkprobk/about.png'/><span style='display:block;'>Introduce</span></a><br /><br /><a class='dock-item' href='link 3' style='width: 90px; left: 180px;'><img alt='D���¡���»�¯�¿�½ch v���¡���»���¥' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcOpyOeMSdattlTU_zBc8gZpNJeGdkZtnZr4A2D7okj4pN-wqf1sBXwCGFWz1CmlH_n81RBz_KHnlWXmR3zopZzYAaS65MTuhHlH_kg1TetAxn3XFkWDhjWh8eEM13VTgWWckwvh4bn9E/s320/dichvuijo.png'/><span>Service</span></a><br /><br /><a class='dock-item' href='link 4' style='width: 90px; left: 270px;'><img alt='Site ����¯�¿�½������£ thi���¡���º���¿t k���¡���º���¿' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcK-j3-DKRHWeBUMVvktpkbAAcof8AUxNKL7e_Z7_fJZ5I_NlOg8uNQ-KcHFsHwVGgBVJP_2rFknoCdmTTAd6gfrDEeepXwx-1Hmc5ahx4h04ofWKDnjv9Yw9ojygj98WdMuME2yCZ5KQ/s320/sanphamijo.png'/>Customer</a><br /><br /><a class='dock-item' href='link 5' style='width: 90px; left: 360px;'><img alt='Template' src='http://i342.photobucket.com/albums/o433/bkprobk/template.png'/><span style='display: block;'>Template</span></a><br /><br /><a class='dock-item' href='link 6' style='width: 90px; left: 450px;'><img alt='history' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghKHex3q44PI3VnHqReMjjt6rtbWTG3qnNYizrxiS4Im0fOlctRJK0o5WcSWwKP1R4VEarNsaDqsQJtIw-VvIXPsGtv4nhegGFxomT8yRmWxO0btXkvjg_BSKVXIzMRg6UebNJYyy2SK8/s320/historyijo.png'/><span style='display:block;'>Advisor</span></a><br /><br /><a class='dock-item' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' style='width: 134.979px; left: 540px;'><img alt='calendar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYqYbBCUTvdbZRwOAXRXer2zea67jiX-H2ZiRHAKJ5KItVYLRdMamwBUYCCeD0lInGuh8BcPjlRsFAjKhaE3kiTwxnjKUPOi5Ho5pLHs5XYi8OLjsnDCheAmufFw66fNZra7vp9u14_7M/s320/doitacijo.png'/><span style='display:block;'>RSS</span></a><br /><br /><a class='dock-item' href='link 8' style='width: 140px; left: 674.979px;'><img alt='rss' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiiTOWYcwt7NO7pscHoqXN2PBM6iShHJUB53736mgIH8yGmiJD9bduT6klGJc6EnfXssULViYAduPZmzTvUF4NGBCzbjcuJEreG2JMmHTRv-ux0QoSWjTvM-z1BYtTFs_RynxIkxuQ1LI/s320/emailijo.png'/><span style='display:block;'>Contact</span></a><br /><br /></div><br /></div><br /></pre><br />Terakhir, jangan lupa simpan template!<br />taraaa.... dah jadi deh simple kan...<br />untuk pertanyaan silahkan komen aja ea... hihiBloG MOtarOhttp://www.blogger.com/profile/17946460676864843645noreply@blogger.com0tag:blogger.com,1999:blog-3981823669801843388.post-12643026185328579772010-07-04T06:47:00.000-07:002010-07-05T08:34:15.901-07:00membuat photoshop online<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.universopc.es/servicios/formacion/iconos/Adobe%20Photoshop.png"rel="facebox"><img style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 300px; height: 300px;" src="http://www.universopc.es/servicios/formacion/iconos/Adobe%20Photoshop.png" alt="" border="0" /></a><br />Assalamualaikum...ato-ato. (haha.. upin dan ipin)<br />halo semua para pembaca motaro blog's..<br />bagaimana kabarnya..?baik kan ? haha<br />basa-basi dl .. hehe<br />inie cuma mau share caranya buat photoshop online (online-online:saykoji)..hihi<br /><br /><br />g susah kok aku cuma framing aja dari situs <a href="http://pixlr.com/">pixlr.com</a> ada yang tau ?<br />ini bisa dmasukin dengan extensi .html atau .php<br /><br />langsung aja deh nie ...<br /><pre><code><br /><html><br /><head><br /><title>Online Photoshop</title><br /><script><br />var icon = document.createElement("link");<br />icon.rel = "SHORTCUT ICON";<br />icon.href = "http://www.planetsmilies.com/smilies/sad/sad0016.gif";<br />document.getElementsByTagName("head")[0].appendChild(icon);<br /></script><br /></head><br /><frameset rows="*" framespacing="0" border="0" frameborder="NO"><br /><frame src="http://www.pixlr.com/editor/" name="Online Photoshop" scrolling="auto" noresize><br /><br /></frameset><br /><noframes><br /><body><br /></body><br /></noframes><br /><br /></html><br />}<br /></code></pre><br /><br />dicoba dulu ya buka notepad terus save as terserah namanya tapi dengan catatan harus berekstensi .html atau .php<br /><br />mudah kan ? ?<br />cukup sekian posting hari nie..<br /><br />semoga bermanfaat !!!!BloG MOtarOhttp://www.blogger.com/profile/17946460676864843645noreply@blogger.com0tag:blogger.com,1999:blog-3981823669801843388.post-9442334352583051672010-07-04T06:03:00.000-07:002010-07-04T06:27:04.502-07:00Efek Teks Glow Seperti Lampu Neon<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhssxhEdDmCGJdkrNBdfqZQ_efdKFwmsd0mr0nlFddbXN2NM_3moZx_2DaupmqHUFQbBLORqhfGJs5n3-noOWWSCQHlN4FpAi3YQ_vLZ9MC6RR_8a3HVL2kL76KJa8PhE9sFtBT2Cthodk/s200/neon-under-car-lights.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 200px; height: 120px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhssxhEdDmCGJdkrNBdfqZQ_efdKFwmsd0mr0nlFddbXN2NM_3moZx_2DaupmqHUFQbBLORqhfGJs5n3-noOWWSCQHlN4FpAi3YQ_vLZ9MC6RR_8a3HVL2kL76KJa8PhE9sFtBT2Cthodk/s200/neon-under-car-lights.jpg"rel=facebox" alt="" border="0" /></a>
<br /><div style="text-shadow: 0px 0px 7px rgb(35, 255, 10); text-align: justify;"><span style="font-size:130%;">Kalau di postingan sebelumnya, kita udah membahas tentang membuat teks terbalik memakai CSS3 nah kali ini kita akan mencoba membuat efek teks yang bersinar (glow) seperti lampu neon.
<br />Itu lho! Seperti kolong pada mobil-mobil di game NFS Underground yang ada lampu neonnya.
<br />Contoh teksnya sendiri udah keliatan kan? karena udah aku terapkan di postingan ini!
<br />Sebenarnya kode yang dipakai sangatlah simple dan sebenarnya merupakan modifikasi dari efek teks shadow
<br />{text-shadow: 0px 0px 7px #23FF0A;}
<br />7px adalah efek blur pada bayangan sedangkan #23FF0A adalah warna dari efek teks.penulisannya kurang lebih sebagai berikut
<br /><pre name="code" class="cpp">
<br /></span> <div style="text-shadow: 0px 0px 7px rgb(35, 255, 10); color: rgb(255, 204, 0);"><span style="font-size:130%;">TEXT GLOW KAMU</span></div><span style="font-size:130%;">
<br /></pre>
<br />Tapi bisa juga dengan cara yang praktis seperti ini:
<br />Copy CSS dibawah ini dan paste diatas
<br /><pre name="code" class="cpp">
<br />#neon {
<br />text-shadow: 0px 0px 7px #FF0000;
<br />}
<br /></pre>
<br />Simpan Template!
<br />
<br />Kalau udah, sekarang tiap ingin membuat teks dengan efek glow tinggal menambahkan class="neon" pada elemen div
<br />Contoh
<br /><pre name="code" class="cpp">
<br /></span> <div style="color: rgb(255, 204, 0);" class="neon"><span style="font-size:130%;">TEXT GLOW KAMU</span></div><span style="font-size:130%;">
<br /></pre>
<br />Mudah bukan? Selamat berekspresi kawan!</span></div>BloG MOtarOhttp://www.blogger.com/profile/17946460676864843645noreply@blogger.com0tag:blogger.com,1999:blog-3981823669801843388.post-88245462076859924282010-07-04T05:44:00.000-07:002010-07-04T06:42:08.566-07:00Membuat Teks Terbalik dengan CSS3<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-tBXElV2ingLCRl7ygPBZYHTLRQSzThBcDUdG_MJP_9vdnEsKKodOKt6OtIthOE1yA1nphhH-tL3hSn-kCzlZW8C8PMDQgpcahb6YN5JgRQ31_OC8JhDdXweEhIl3_iQ3a2LNQGGBCUE/s1600/111111111111111111.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 320px; height: 185px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-tBXElV2ingLCRl7ygPBZYHTLRQSzThBcDUdG_MJP_9vdnEsKKodOKt6OtIthOE1yA1nphhH-tL3hSn-kCzlZW8C8PMDQgpcahb6YN5JgRQ31_OC8JhDdXweEhIl3_iQ3a2LNQGGBCUE/s320/111111111111111111.jpg" rel="facebox"" alt="" id="BLOGGER_PHOTO_ID_5490045228390406018" border="0" /></a><br /><div style="text-align: justify;">Kayak kurang kerjaan aja! Ngapain coba ngebolak-balik tulisan gak jelas kayak gini?<br />Justru karena kurang kerjaanlah aku jadi punya ide tuk membuat tulisan terbalik.<br />Mungkin dulu aku pernah posting tentang membuat tulisan terbalik menggunakan teks generator, namun yang dilakukan generator tersebut hanyalah mengganti karakter supaya teks terlihat terbalik (contoh: menulis m dengan w)<br />Tapi trik itu kayaknya terlihat kurang rapi, sebab ada beberapa huruf yang terlihat dipaksakan<br />Bandingkan aja 2 teks terbalik di bawah ini:<br />Dengan menggunakan generator:<br />˙ʞılɐqɹǝʇ uɐsılnʇ ʇɐnqɯǝɯ ʞnʇ ǝpı ɐʎund ıpɐɾ nʞɐ ɥɐluɐɐɾɹǝʞ ƃuɐɹnʞ ɐuǝɹɐʞ nɹʇsnɾ<br />¿ıuıƃ ʞɐʎɐʞ sɐlǝɾ ʞɐƃ uɐsılnʇ ʞılɐq-ʞɐloqǝƃu ɐqoɔ uıɐdɐƃu ¡ɐɾɐ uɐɐɾɹǝʞ ƃuɐɹnʞ ʞɐʎɐʞ<br />Dengan Menggunakan CSS3:<br /></div><div style="-moz-transform: rotate(180deg); text-align: justify;">Kayak kurang kerjaan aja! Ngapain coba ngebolak-balik tulisan gak jelas kayak gini?<br />Justru karena kurang kerjaanlah aku jadi punya ide tuk membuat tulisan terbalik.</div><div style="text-align: justify;"><br /><br />Menurut kamu bagus yang mana?<br />Trik yang kedua sebenarnya memakai kode CSS3 kurang lebih kodenya<br /></div><pre name="code" class="cpp"><br />transform:rotate(180deg)<br />-moz-transform:rotate(180deg);<br />-webkit-transform:(180deg);<br />-o-transform:(180deg);<br />-icab-transform:(180deg);<br />-khtml-transform:(180deg);<br /></pre><br />Untuk membuatnya dengan HTML style kodenya kurang lebih:<br /><pre name="code" class="cpp"><br /><div style="transform:rotate(180deg);-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-o-transform:rotate(180deg); -icab-transform:(180deg); -khtml-transform:(180deg);">TEKS YANG MAU DIBUAT TERBALIK</div><br /></pre><br />Atau kalau mau yang lebih praktis gunakan cara berikut:<br /><pre name="code" class="cpp"><br /> #kuwalik {<br /> transform:rotate(180deg)<br /> -moz-transform:rotate(180deg);<br /> -webkit-transform:(180deg);<br /> -o-transform:(180deg);<br /> -icab-transform:(180deg);<br /> -khtml-transform:(180deg);<br /> }<br /></pre><br />Paste kodenya diatas kode ]]></b:skin><br />Nah setiap ingin membuat tulisan terbalik kamu tinggal menambah kode class pada elemen div<br />Maksudnya kayak dibawah ini:<br /><pre name="code" class="cpp"><br /><div class="kuwalik">TEKS YANG INGIN DIBALIK</div><br /></pre><br />Inilah salah satu kehebatan CSS3, semoga membantu kalian dalam membingungkan pembaca!<br />Jangan lupa komentar!BloG MOtarOhttp://www.blogger.com/profile/17946460676864843645noreply@blogger.com1tag:blogger.com,1999:blog-3981823669801843388.post-56127809257442737612010-07-04T03:23:00.000-07:002010-07-04T03:34:21.548-07:00Mengenal Penulisan CSS3<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.cyberdesignz.com/blog/wp-content/uploads/2010/01/css3-border-radius.jpg"rel=facebox"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 480px; height: 258px;" src="http://www.cyberdesignz.com/blog/wp-content/uploads/2010/01/css3-border-radius.jpg" alt="" border="0" /></a><br />Haduh! Kayaknya aku agak telat nih posting tentang CSS3nya, duh maaf ea kawan!<br />CSS3 sebenarnya merupakan pengembangan dari kode CSS sebelumnya, fungsinya sendiri sangat beragam dan bahkan bisa untuk menggantikkan penggunaan gambar maupun Javascript.<br />Untuk penulisannya sebenarnya sama dengan CSS biasa namun sayangnya sering tidak terbaca di browser lain, jadi setiap browser memiliki penulisan CSS3 yang berbeda<br /><b style="color: rgb(153, 153, 0);">Contohnya pembuatan border radius (pelengkungan garis)</b><br />CSS normalnya yaitu:<br /><pre name="code" class="cpp"><br />border-radius:8px;<br /></pre><br />namun kode tersebut gak akan terbaca di browser Mozilla Firefox dan agar terbaca kamu harus menambahkan kode -moz- sebelum kode CSS3 normal sehingga menjadi<br /><pre name="code" class="cpp"><br />-moz-border-radius:8px;<br /></pre><br />Begitu pula untuk browser lainnya juga butuh penyesuaian<br />Browser Safari dengan penambahan -webkit-<br />Sehingga menjadi<br /><pre name="code" class="cpp"><br />-webkit-border-radius:8px;<br /></pre><br />Opera dengan penambahan -o-<br />Sehingga menjadi:<br /><pre name="code" class="cpp"><br />-o-border-radius:8px;<br /></pre><br />Jadi agar terbaca di browser Firefok, Safari, Opera kita harus menuliskan semua kode sehingga menjadi:<br /><pre name="code" class="cpp"><br />border-radius:8px;<br />-moz-border-radius:8px;<br />-webkit-border-radius:8px;<br />-o-border-radius:8px;<br /></pre><br />Lalu masih ada 2 kode lagi yang aku masih belum tahu bekerja pada browser apa<br />kode tersebut adalah <span style="color: rgb(153, 153, 0);">-icab-</span> dan <span style="color: rgb(51, 204, 0);">-khtml-</span><br />penulisannya sama hanya saja aku masih belum tahu kode ini bekerja pada browser apa<br />Jadi pada intinya untuk menulis suatu CSS3 dibutuhkan beberapa penulisan seperti di bawah ini:<br /><pre name="code" class="cpp"><br />border-radius:8px;<br />-moz-border-radius:8px;<br />-webkit-border-radius:8px;<br />-o-border-radius:8px;<br />-icab-border-radius:8px;<br />-khtml- border-radius:8px;<br /></pre><br />Sayangnya hingga saat ini masih ada browser yang belum support CSS3 yaitu Internet Explorer, (sebenarnya cuma beberapa kode yang support)<br /><br />Semoga sedikit memberi pengetahuan ya kawanku!<br />Keep Blogging dan jangan lupa komentar!BloG MOtarOhttp://www.blogger.com/profile/17946460676864843645noreply@blogger.com0tag:blogger.com,1999:blog-3981823669801843388.post-80874612658138214262010-07-04T03:00:00.000-07:002010-07-06T17:00:25.458-07:00Memasang Screen Savers (Energy Saving Mode) di Blog<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3bZkKzEThhW6V1HTTgnKnI0cTTTqFJh6irlePXffazesCUpgQtSoG7mo2F0sYdICHGh9ptoCKZ4g2e3QgbqaG2Hy_v50HbeuRAwZceW7xZqX9TtgacjLoACQNR9sFh0onLRZbnMBLh9U/s1600/14.JPG" rel="facebox""><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 320px; height: 194px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3bZkKzEThhW6V1HTTgnKnI0cTTTqFJh6irlePXffazesCUpgQtSoG7mo2F0sYdICHGh9ptoCKZ4g2e3QgbqaG2Hy_v50HbeuRAwZceW7xZqX9TtgacjLoACQNR9sFh0onLRZbnMBLh9U/s320/14.JPG" alt="" id="BLOGGER_PHOTO_ID_5489994521937679138" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA4D1uEtWNJLgrIn7SOhQw4jwmCa3gpY7KgPtb4L0gKjgkDcE9aH8hyPzWKO7LA7q24RFhLQT2U3TrjBi_-Ah-U6o2eyMz5eXXAvdKvugM9RMNZF_4GrUtNyO4Sd1fjwFN6fJmbLn5MDE/s1600/14.JPG" rel="facebox""><br /></a><br />Tentunya kalian sudah tahu kan apa itu Screen Saver?<br />Yupz Screen Saver adalah sebuah gambar/tulisan yang muncul saat tidak ada aktivitas tertentu di layar komputer, semisal kamu lagi bermain kompie dan tiba-tiba aja kamu pengen defekasi (bahasanya ketinggian), terpaksa kamu meninggalkan komputermu untuk setor ke toilet, begitu kembali layar komputer akan berwarna hitam dan menampilkan screensaver, nah untuk kembali ke layar, tinggal gerakkan mouse sedikit.<br />Sekarang, kita akan mencoba menerapkannya di Blog (terutama Blogger)<br />Demonya bisa kamu lihat di sini kok!<br />Coba kamu diemin komputer (gak boleh gerakkin mouse dan mencet tombol apapun) selama kurang lebih 3 menit!<br />Voila! Layar komputer akan menghitam dengan tulisan "Energy Saving Mode"<br />Eits! ScreenSaver ini juga muncul saat blog ditinggal ke tab lainnya selama kurang lebih 3 menit.<br />Jadi intinya adalah ScreenSaver akan muncul jika tidak ada aktivitas di dalam halaman blog<br />Udah gak sabar pengen pasang? Check it out!<br /><ul><li>Masuk ke halaman Edit HTML dari menu Tata Letak</li><li>Cari kode <head> lalu paste kode dibawah keATASnya!</li></ul><br /><pre name="code" class="cpp"><br /><!-- save your energy --><br /><script language='javascript' src='http://yudhaime.googlecode.com/files/EnergySaving.js' type='text/javascript'/><br /><!-- save your energy end --><br /></pre><br />Atau untuk screensavers bergambar kode nya<br /><pre name="code" class="cpp"><br /><!-- save your energy --><br /><script language='javascript' src='http://motaro44.freetzi.com/screensavers.js' type='text/javascript'/><br /><!-- save your energy end --><br /></pre><br />* Kalau sudah, kamu simpan templatenya!<br /><br />Selesai, Rampung, The End,<br />Blog kita jadi hemat energy kan kawan?BloG MOtarOhttp://www.blogger.com/profile/17946460676864843645noreply@blogger.com0tag:blogger.com,1999:blog-3981823669801843388.post-84463491465012399392010-07-03T01:13:00.000-07:002010-07-03T16:06:27.264-07:00Cara Meningkatkan Alexa Rank<p style="text-align: justify;"><strong>Alexa Rank</strong> adalah suatu peringkat yang didasarkan kepada banyaknya kunjungan terhadap suatu web atau blog, maka tentu saja semakin banyak pengunjung web atau blog anda, Alexa Rank akan semakin baik. Secara lebih detail apa itu Alexa Rank sudah sering dibahas oleh para Web Master, dan postingan seperti itu sudah sangat banyak bertebaran di blog para master. Jadi postingan ini mungkin sudah agak basi atau agak kadaluarsa kali yaaa, apalagi untuk para master. Terus kenapa juga posting tentang <a href="http://m-alwi.com/alexa/cara-meningkatkan-alexa-rank.html" target="_blank"><span style="color: rgb(0, 0, 0);"><strong>Cara Meningkatkan Alexa Rank</strong></span></a>? Yaaaa …. ikut menambahkan saja tulisan tentang Alexa Rank, karena baru ada satu postingan yaitu <a href="http://m-alwi.com/alexa/alexa-rank-ala-kang-rohman.html" target="_blank">Alexa Rank Ala Kang Rohman</a>. Dengan semakin banyak membuat tulisan tentang Alexa mudah-mudahan Alexa Rank <a href="http://m-alwi.com/" target="_blank">blog ini</a> menjadi semakin langsing heeee …. (*ngarep*).</p> <p style="text-align: justify;"><strong>Cara Meningkatkan Alexa Rank (berdasarkan pengalaman pribadi) :</strong></p> <p style="text-align: justify;"><strong><span id="more-1764"></span>1.</strong> Tingkatkan jumlah trafik atau kunjungan harian (<strong>Daily Traffic</strong>) ke blog, karena bisa dibilang sebenarnya inti dari meningkatkan Alexa Rank adalah meningkatkan jumlah trafik atau kunjungan ke web atau blog, ini sesuai dengan data yang ada di site info blog kita yang ada di Website Alexa. Menurut saya penilaian yang paling utama adalah trafik, untuk cara meningkatkan trafik blog bisa dilihat di <a href="http://m-alwi.com/seo/cara-meningkatkan-jumlah-pengunjung-atau-traffic-blog.html" target="_blank">sini.</a></p> <p style="text-align: justify;"><strong>2.</strong> Tingkatkan <strong>Daily Reach</strong> atau kunjungan secara global, maksudnya trafik atau jumlah pengunjung akan lebih baik di mata Alexa jika berasal dari IP pengunjung yang berasal dari berbagai macam negara. Caranya anda harus sering mengunjungi dan berkomentar di blog luar negeri atau aktif di forum atau komunitas International, sebagai contoh bisa memanfaatkan blogcatalog, mybloglog, StumbleUpon, digg dll.</p> <p style="text-align: justify;"><strong>3.</strong> Tingkatkan <strong>Daily Pageview, Bounce</strong> dan <strong>Time on Site</strong>, Caranya yaitu dengan menambahkan link postingan yang saling berkaitan baik di dalam konten atau postingan maupun di bawah postingan atau biasa disebut Related Post atau Posting Terkait. Dengan cara ini akan lebih memberikan kesempatan bagi pengunjung untuk lebih mengekplorasi seluruh isi blog dan menemukan lebih banyak informasi. Cara ini efektif untuk meningkatkan Page View. Link internally ke potingan dalam blog juga akan membantu meningkatkan ranking blog anda dan juga akan membantu meningkatkan trafik, sebab jika orang yang datang ke blog anda tidak ada pilihan lagi untuk dilihat maka mereka akan pergi. Ketika anda membuat link ke postingan yang lain pengunjung akan menemukan banyak pilihan untuk membuka postingan yang lain sehingga mereka akan lebih lama berada di blog anda (meningkatkan Time on Site).</p> <p style="text-align: justify;">Cara lain untuk meningkatkan Time on Site yaitu dengan cara setting link komentator ketika diklik akan terbuka di tab atau halaman baru supaya blog anda masih tetap terbuka (menambah Time On Site). Untuk WordPress caranya bisa dilihat <strong><a href="http://m-alwi.com/optimasi-wordpress/optimasi-link-komentator.html" target="_blank">di sini</a></strong>, untuk Blospot ada <strong><a href="http://m-alwi.com/blogspot/optimasi-link-komentator-blogspot.html" target="_blank">di sini</a></strong>.</p> <p style="text-align: justify;"><strong>4.</strong> Tingkatkan jumlah trafik atau kunjungan yang berasal dari Search Engine (<strong>The percentage of visits to blog that came from a search engine</strong>). Meningkatkan jumlah kunjungan dari search engine juga bisa dilakukan oleh pemilik blog yaitu dengan mengetikkan keyword atau postingan yang populer di blog sendiri terutama postingan yang mempunyai SERP yang tinggi syuku-syukur yang ada di halaman satu hasil SERP search engine (<strong>High Impact Search Queries</strong>). Gunakan IP yang berbeda per harinya bisa menggunakan browser dekstop, opera mini, browser bawaan ponsel, Firefox Mobile, Bolt For Mobile dll. Jangan gunakan tools-tools seperti<strong> </strong> alexa booster, traffic generator dan sebagainya. Seumpama Alexa tinggi pun percuma, kalo dibuat untuk blog PPC jelas-jelas tidak mungkin ada klik karena pengunjung anda hanyalah robot-robot yang datang dari mesin-mesin generator traffic.</p> <p style="text-align: justify;"><strong>5.</strong> Pasang <strong>Alexa Toolbar</strong> di browser internet yang kita pakai dan pasang juga <strong>Alexa Widget</strong> di blog. Dengan memasang Alexa Toolbar dan Alexa Widget akan memberikan data trafik yang lebih akurat.</p> <p style="text-align: justify;"><strong>6.</strong> Setting Web atau Blog anda menjadi Home Page di browser internet yang biasa anda gunakan.</p> <p style="text-align: justify;"><strong>7.</strong> <strong>Buatlah tulisan atau postingan mengenai Alexa</strong>, dengan membuat tulisan tentang Alexa, maka para pengunjung setia blog anda akan tertarik menggunakan tool Alexa, ini tentunya menguntungkan karena data yang masuk ke Alexa juga akan semakin lancar.</p> <p style="text-align: justify;"><strong>8.</strong> <strong>Rajin update Blog atau membuat postingan baru dan usahakan untuk konsisten</strong>. Pengunjung dan search engine akan lebih senang mengunjungi blog yang selalu up to date serta konsisten atau kontinu. Kalau tidak bisa posting tiap hari ya 2 hari sekali atau seminggu sekali tapi konsisten, akan lebih baik dari pada posting tiap hari selama satu minggu tapi setelah itu blog dibiarkan tanpa update. Jika blog jarang diupdate biasanya trafik pengunjung cenderung akan turun terutama untuk blog baru yang jumlah trafiknya belum cukup stabil.</p> <p style="text-align: justify;"><strong>9.</strong> Minta teman untuk <strong>mereview dan merating profil blog Anda di Alexa</strong>. Cara ini ternyata cukup signifikan untuk merampingkan Alexa Rank seperti yang sudah dipraktekkan oleh teman saya <a href="http://amriawan.blogspot.com/2010/02/tips-merampingkan-peringkat-alexa.html" target="_blank">Bang Setiawan Dirgantara</a>. Untuk itu pada kesempatan ini saya menawarkan kerjasama kepada sobat semua (kalau mau) untuk saling mereview dan merating profil blog kita di Alexa, syukur-syukur saling memberi bintang 5 heee …. (*ngarep*). Caranya klik aja banner di bawah ini, setelah ada di halaman review silahkan Login terlebih dahulu dengan menggunakan akun Alexa atau bisa juga menggunakan akun Facebook. Setelah anda mereview blog saya, maka saya akan mereview juga blog anda.</p> <p style="text-align: center;"><a href="http://www.alexa.com/siteinfo/http://motaroblog.blogspot.com//?p=rwidget#reviews" target="_blank"><img class="aligncenter" src="http://www.alexa.com/images/webmasters/review-lite-125x60.png" alt="Review http://motaroblog.blogspot.com/ on alexa.com" width="125" height="60" /></a></p>BloG MOtarOhttp://www.blogger.com/profile/17946460676864843645noreply@blogger.com0tag:blogger.com,1999:blog-3981823669801843388.post-13015891868834275632010-07-02T20:24:00.000-07:002010-07-02T20:39:16.207-07:00Daftar Isi Efek jQuery Accordion<div style="text-align: justify;"><span style="font-size:100%;">Bismillah. Alhamdulillah.... Bahan dasar dari pembuatan daftar isi ini masih menggunakan <a href="http://motaroblog.blogspot.com/2010/07/mengenal-json-javascript-object.html">JSON FEED</a> dengan diberikan sentuhan efek animasi accordion (slideup slidedown) dan <a href="http://motaroblog.blogspot.com/2010/07/animasi-goyang-link-sidebar-dengan.html">EFEK ANIMASI BERGOYANG</a> dengan <a href="http://motaroblog.blogspot.com/2010/07/memahami-dan-mengatasi-konflik-script.html">FRAMEWORK JQUERY</a>, sehingga menjadikan daftar isi versi ini layak untuk dicoba. Dipilihnya efek animasi accordion supaya daftar isi ini lebih ringkas dan tidak terlalu panjang serta artikel yang di susun berdasarkan Label/Kategori. Daftar isi yang ringkas, mudah dan rapi untuk blog anda yang ingin tampil lebih profesional.<br /></span></div><span id="fullpost" style="font-size:100%;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigpo84DYlZZDoM1RIno4kpnPwyLfjQqn_zC7Q07WKm17x5jWJ9IkvYvmOVSE1aRKxgMHRnjUwDvwnEEr5Ha1bwj6P2JT4GLqlHmPXzHgAZur-NuZpvq14SokV8XbIjx89Kjl3IuTQQkJfO/s1600/daftar_isi_accordion.png" rel="facebox"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 160px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigpo84DYlZZDoM1RIno4kpnPwyLfjQqn_zC7Q07WKm17x5jWJ9IkvYvmOVSE1aRKxgMHRnjUwDvwnEEr5Ha1bwj6P2JT4GLqlHmPXzHgAZur-NuZpvq14SokV8XbIjx89Kjl3IuTQQkJfO/s400/daftar_isi_accordion.png" alt="" id="BLOGGER_PHOTO_ID_5481951646135613170" border="0" /></a></span><div style="text-align: center;"><span id="fullpost" style="font-size:100%;"><div class="view_demo"><a href="http://dedehendriono.blogspot.com/2008/07/daftar-isi.html" target="_blank"><br /></a></div></span><span style="font-size:100%;"><br /></span><span style="font-size:100%;"><div class="view_demo"><span><span style="font-size:180%;"><a href="http://nickyku.blogspot.com/2010/06/daftar-isi-atau-table-of-content.html"><span id="fullpost">Klik disini untuk melihat demo Daftar Isi Efek jQuery Accordion</span></a></span><br /><br /></span></div></span></div><span style="font-size:100%;"><span id="fullpost"><h3>Integrasi Daftar Isi dengan Efek jQuery Accordion pada Template Blogger</h3><span style="font-weight: bold;">Langkah 1</span><br />Login ke Blogger<br /><span style="font-weight: bold;">Langkah 2</span><br />Masuk ke "Rancangan - Edit HTML"<br /><span style="font-weight: bold;">Langkah 3</span><br />Cari kode dibawah ini:<br /><br /></span>]]></b:skin><br />Langkah 4<br />Masukan (copy paste) kode CSS dibawah ini diatas kode pada Langkah 3:<br /><pre name="code" class="cpp"><br />#dafis-acc{<br />font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;<br />font-size:12px;<br />color:#333;<br />background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAWJugl3I/AAAAAAAAEBg/bY_3UzrECSg/d/bg5.gif) repeat-y scroll left center #E7F7FB;<br />padding:2px 0;<br />border:1px solid #339DC6;<br />}<br />.dafis-label{<br />background:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S-KAVk09KSI/AAAAAAAAEBc/Tqfaca2nwmo/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB;<br />font-weight:bold;<br />line-height:1.4em;<br />overflow:hidden;<br />white-space:nowrap;<br />vertical-align: baseline;<br />margin: 1px 3px;<br />outline: none;<br />cursor: pointer;<br />text-decoration: none;<br />padding: 2px 10px;<br />color: #fff;<br />text-shadow: 0 1px 1px rgba(0,0,0,.3);<br />border:1px solid #2F94BA;<br />}<br />.dafis-label:hover{<br />background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAVlLiuVI/AAAAAAAAEBU/Hd-n_8N7qak/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB;<br />color:#003366;<br />}<br />.dafis-daf ol{<br />margin:0 0 0 30px !important;<br />padding:0 !important;<br />}<br />.dafis-daf ol li{<br />background-color:#C9E9F4;<br />line-height:1.5em;<br />margin:1px 3px !important;<br />white-space:nowrap;<br />text-align:left;<br />border:1px solid #339DC6;<br />}<br />.dafis-daf ol li a{<br />text-decoration: none !important;<br />color:#333 !important;<br />display:block;<br />padding-left:10px;<br />}<br />.dafis-daf ol li a:hover{<br />background: #7BC4DF;<br />border-left: 5px #333 solid;<br />padding-left: 5px;<br />text-shadow: 0 1px 1px rgba(0,0,0,.3);<br />}<br /></pre><br />Langkah 5<br />Cari kode dibawah ini:<br /></head><br />Langkah 6<br />Masukan (copy paste) kode dibawah ini diatas kode pada Langkah 5:<br /><pre name="code" class="cpp"><br /><script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/><br /></pre><br />Perhatian! Ingat jika pada bagian tag head pada template blogger anda sudah pernah/ada framework jQuery maka lewati Langkah 6 ini (Baca disini)<br />Langkah 7<br />Simpan template blogger...<br /><br />Integrasi Daftar Isi dengan Efek jQuery Accordion pada Artikel<br />Langkah A<br />Buat sebuah artikel dengan judul terserah anda (misal; Daftar Isi atau Table of Content)<br />Langkah B<br />Pindahkan mode Editor artikel ke mode Edit HTML<br />Langkah C<br />Masukan (copy paste) kode dibawah ini ke dalam artikel :<br /><pre name="code" class="cpp"><br /><script type="text/javascript" src="http://hensblog.googlecode.com/files/dafis_accv1.js"></script><br /><script src="http://modification-blog.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script><br /></pre><br />Langkah D<br />Ubah URL blog pada langkah C (MOTAROBLOG.BLOGSPOT.COM) sesuai dengan URL Blog anda<br />Langkah E<br />Terbitkan artikel dan preview artikel tersebut...<br /><br />Daftar Isi Efek jQuery Accordion<br /><br /></span><div style="text-align: center;"><span style="font-size:100%;"><span style="font-size:180%;"><a href="http://www.box.net/shared/3mfzz6s819">Klik disini untuk mengunduh sourcecode Daftar Isi Efek jQuery Accordion</a></span><br /><br /></span></div><span style="font-size:100%;">Alhamdulillah... Selamat mencoba dan semoga berhasil. Happy Blogging :)</span>BloG MOtarOhttp://www.blogger.com/profile/17946460676864843645noreply@blogger.com0tag:blogger.com,1999:blog-3981823669801843388.post-57490257879087803042010-07-02T20:16:00.000-07:002010-07-02T20:23:36.642-07:00Memahami dan Mengatasi Konflik Script jQuery<div style="text-align: justify;">Bismillah. Sebenarnya artikel ini pernah dibahas sebelumnya dengan judul artikel PEPERANGAN FRAMEWORK JAVASCRIPT - PROTOTYPE V.S, JQUERY tapi mungkin karena sangat sulit dijabarkan maka Blogger Tune-Up menyederhanakan artikel tersebut agar mudah untuk dipahami. Script-script yang dibuat menggunakan perintah dasar JavaScript memang rentan terjadi bentrok antar script baik karena kesamaan script, kesamaan fungsi ataupun kesamaan perintah sehingga script-script yang dibuat saling mengalahkan atau bahkan saling meniadakan satu sama lain dan itu juga terjadi pada turunan-turunan JavaScript seperti halnya jQuery. Hal ini bisa saja berakibat fatal, beberapa kasus yang Blogger Tune-Up pernah temukan bahkan membuat error halaman "Tata Letak - Elemen Laman" dengan keterangan "Error Page 404 Not Found" (<span style="font-style: italic;">dibahas menyusul</span>).<br /></div><span id="fullpost"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfiXbnV1CCiQxP-YxCYfsp1QFRe-L0j-hCc0svhk4KR98tCJt2bOiHc-HQKwxbWveHTsodtq3lDVV7omTCp1DZDiFTdCGy6b3vkbxLGSokgwYm-pkKHj-0taE13p88Y1Cmf-XaqP-4lM_L/s1600/jQuery.noConflict.jpg" rel="facebox"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 377px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfiXbnV1CCiQxP-YxCYfsp1QFRe-L0j-hCc0svhk4KR98tCJt2bOiHc-HQKwxbWveHTsodtq3lDVV7omTCp1DZDiFTdCGy6b3vkbxLGSokgwYm-pkKHj-0taE13p88Y1Cmf-XaqP-4lM_L/s400/jQuery.noConflict.jpg" alt="Memahami dan Mengatasi Konflik Script jQuery" id="BLOGGER_PHOTO_ID_5470064414212503394" border="0" /></a><div style="text-align: justify;">jQuery sebagai salah satu framework turunan JavaScript yang paling banyak digunakan juga rentan terhadap bentrok antar script baik script dengan script pada framework yang sama atau dengan script dengan framework berbeda. Sebenarnya website resmi jQuery sudah memberikan solusi yang sangat mudah untuk mengatasi bentrok antar script ini tetapi tidak ada salahnya Blogger Tune-Up kembali membantu membahasnya, terutama bagi mereka yang menemukan fungsi-fungsi jQuery yang tidak bekerja dengan baik.<br /></div><div style="text-align: justify;">Perintah dasar jQuery selalu diawali dengan simbol "$" (<span style="font-style: italic;">tanpa tanda kutip</span>) atau kita mengenal simbol ini dengan nama "Dollar". Ini sebagai identitas perintah-perintah jQuery, jadi jika teman-teman blogger menemukan script yang selalu diawali dengan tanda "$" maka ini adalah script jQuery. Dan sudah menjadi kewajiban bahwa script jQuery ini harus didampingi framework jQuery-nya sebagai sistem dasar. Framework jQuery haruslah terlebih dahulu dipanggil (<span style="font-style: italic;">load</span>) agar deklarasi-deklarasi script yang kita buat mampu berjalan normal. Ibaratnya jQuery itu adalah rumah dan script-script yang kita buat adalah isi dari rumah itu.<br /></div><br /><h3>Pemasangan Framework jQuery pada Blogger</h3><div style="text-align: justify;">Beruntunglah para webdesigner yang suka dengan framework jQuery karena framework ini didukung penuh oleh raksasa IT yaitu Google. Google menyediakan resource jQuery baik untuk digunakan maupun untuk dikembangkan, sehingga kita sebagai blogger yang lebih suka menggunakan tidaklah mengalami kesulitan untuk memasang framework jQuery pada blog kita. Untuk memasang framework jQuery pada blog kita, Google telah menyediakan beberapa cara yang mudah, diantaranya:<br /></div><br /><span style="font-weight: bold;">1. jQuery Google API</span><br /><div style="text-align: justify;">Cara kesatu ini adalah cara yang paling mudah dan paling aman dengan tingkat resiko error handle script paling kecil<br /><br /></div></span><br /><pre name="code" class="cpp"><br /><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><br /></pre><br />2. jQuery Google API Load<br />Cara kedua ini adalah cara yang Google jelaskan sebagai teknik yang paling aman, cepat dan ringan untuk memanggil framework jQuery<br /><pre name="code" class="cpp"><br /><script src='http://www.google.com/jsapi'/><br /><script><br />google.load("jquery", "1.3.2");<br /></script><br /></pre><br />3. jQuery Google API Autoload<br />Cara ketiga ini memiliki tingkat error handle script sangat tinggi tetapi merupakan teknik yang paling cepat dalam memanggil framework jQuery<br /><pre name="code" class="cpp"><br /><script src='http://www.google.com/jsapi?autoload={"modules" : [{"name" : "jquery","version" : "1.3.2"}]}' type='text/javascript'/><br /></pre><br />Cara kedua dan ketiga pernah dibahas pada artikel "Mempercepat Pemuatan Perpustakaan JavaScript". Pilihlah salah satu dari ketiga cara diatas dan harus diperhatikan bahwa pemanggilan Framework jQuery hanya perlu satu kali, karena jika di panggil (load) berulang maka ini akan memberatkan proses Pageload (pemanggilan halaman). Periksalah template dan widget blog anda dari kemungkinan pemasangan script framework jQuery yang berulang, jika ditemukan maka hapuslah dan sisakan satu saja serta prioritaskan pemanggilan framework jQuery pada template saja.<br /><br />Mengatasi Konflik Script jQuery<br />Seperti sudah dijelaskan diatas bahwa script jQuery selalu diawali dengan simbol "$", simbol inilah yang harus diperhatikan karena simbol ini merupakan sebuah deklarasi fungsi-fungsi jQuery. Maka ini pula yang menjadi solusi untuk mengatasi konflik script-script jQuery. Bagaimana mengatasi konfliknya? Contoh dibawah ini merupakan cara yang sering Blogger Tune-Up gunakan untuk mengatasi konflik jQuery.<br />Perhatikan contoh script yang belum ditambahkan deklarasi untuk mengatasi konflik dibawah ini:<br /><pre name="code" class="cpp"><br />$(document).ready(function(){<br />$("a.slick").click(function () {<br />$(".active").removeClass("active");<br />$(this).addClass("active");<br />$(".content-slick").slideUp();<br />var content_show = $(this).attr("title");<br />$("#"+content_show).slideDown();<br />});<br />});<br /></pre><br />Script diatas sebenarnya sudah berjalan dengan baik akan tetapi kemungkinan bentrok sangat mudah terjadi.<br />Perhatikan contoh script yang sudah ditambahkan deklarasi untuk mengatasi konflik dibawah ini:<br /><pre name="code" class="cpp"><br />var $jnoc = jQuery.noConflict();<br />$jnoc(document).ready(function(){<br />$jnoc(&quot;a.slick&quot;).click(function () {<br />$jnoc(&quot;.active&quot;).removeClass(&quot;active&quot;);<br />$jnoc(this).addClass(&quot;active&quot;);<br />$jnoc(&quot;.content-slick&quot;).slideUp();<br />var content_show = $jnoc(this).attr(&quot;title&quot;);<br />$jnoc(&quot;#&quot;+content_show).slideDown();<br />});<br />});<br /></pre><br />Bandingkan contoh script diatas maka kita akan menemukan perbedaan yang sebenarnya sangat sederhana.<br />Penjelasan:<br /><br /> 1. var $jnoc = jQuery.noConflict(); adalah script untuk mendeklarasikan fungsi jQuery.noConflict yang berfungsi untuk mengatasi konflik-konflik JavaScript<br /> 2. $jnoc pada script berikutnya merupakan script untuk menggantikan fungsi dasar simbol "$" sehingga jika kita perhatikan maka sebenarnya semua simbol "$" tergantikan oleh script jQuery.noConflict hanya diwakilkan kepada script $jnoc yang sudah dideklarasikan sebelumnya pada baris 1.<br /> 3. $jnoc bisa saja diganti dengan kata apapun sesuai dengan keinginan anda, asalkan sesuai dengan kata yang dideklarasikan sebelumnya sebagai wakil dari script jQuery.noConflict pada baris 1.<br /><br />Alhamdulillah. Mudah-mudahan artikel kali ini bisa dimengerti, jika masih bingung silahkan tinggalkan pada kotak komentar....BloG MOtarOhttp://www.blogger.com/profile/17946460676864843645noreply@blogger.com0tag:blogger.com,1999:blog-3981823669801843388.post-54101970513367540482010-07-02T20:05:00.000-07:002010-07-02T20:15:04.298-07:00Peperangan Framework JavaScript - Prototype v.s. jQuery<div style="text-align: justify;"><dc>S</dc>uatu hari aku menemukan perpustakaan (<span style="font-style: italic;">baca:library</span>) yang didalamnya begitu banyak buku (<span style="font-style: italic;">baca:code</span>) yang menarik, kemudian aku baca dan aku terapkan didalam kehidupanku (<span style="font-style: italic;">baca:blogku</span>). Perpustakaan tersebut diberi nama <a href="http://www.jquery.com/" target="_blank">jQuery</a> dan aku sangat suka dengan bacan-bacaan didalamnya. Petulanganpun aku lanjutkan, dalam petualangan tersebut aku menemukan kembali sebuah perpustakaan yang didalamnya juga ternyata banyak bacaan menarik, tidak kalah dengan perpustakaan jQuery. Perpustakaan tersebut diberi nama <a href="http://www.prototypejs.org/" target="_blank">Prototype</a> yang didalamnya penuh bacaan yang akan membawa pembacanya ke hal-hal baru.<br /></div><span id="fullpost"><div style="text-align: justify;">Petualangan demi petualangan dilakukan dan satu persatu perpustakaan-perpustakaan ditemukan dibelantara dunia maya, berbagai kelebihan dan kekurangan dari setiap perpustakaan tersebut ditemukan. Maksud hati ingin menggabungkan kelebihan-kelebihan tersebut, tetapi ternyata tidak semudah itu. Library JavaScript tersebut ternyata tidak bersahabat satu dengan lainnya, peperangan pun terjadi, mereka saling menjatuhkan satu sama lain. Jika salah satu framework berjalan dengan baik maka framework yang lain dapat dipastikan tidak berjalan, satu kode mematikan kode yang lain.<br /></div><div style="text-align: justify;">Dalam kasus kali ini, kita akan mencoba mendamaikan dua framework yang saling menjatuhkan, yaitu jQuery Library dan Prototype Library. Kasus ini ditemukan pada saat Blogger TuneUp mencoba menggabungkan EFEK <a href="http://motaroblog.blogspot.com/2010/07/mudah-membuat-efek-page-peel.html">PAGEFEEL</a> dan <a href="http://motaroblog.blogspot.com/2010/07/tampilkan-gambar-dengan-efek-lightbox.html">EFEK LIGHTBOX</a>pada blog <a href="http://elecproj.blogspot.com/">Electronic Project</a>. Disaat mencoba mengaktifkan efek Pageflip dengan framework jQuery maka efek LightBox dengan framework Prototype tidak dapat bekerja, begitupun sebaliknya. Setelah ditelaah ternyata masalahnya terletak pada penggunaan shortcut yang sama, jQuery dengan Prototype bahkan beberapa framework lainnya menggunakan shortcut $. Hal ini entah kesengajaan atau memang masih satu developer?<br /></div><div style="text-align: justify;">Ada beberapa cara untuk mengatasi konflik jQuery dan Prototype, dibawah ini hanya kasus yang sudah ditemukan:<br /></div><br /><div style="text-align: justify;"><span style="font-style: italic;">Dibawah ini script efek PageFlip dengan framework jQuery sebelum dimodifikasi:</span><br /></div><div class="syntaxhighlighter jscript" id="highlighter_25302"><div class="bar "><div class="toolbar"><a class="item viewSource" style="width: 16px; height: 16px;" title="view source" href="http://modification-blog.blogspot.com/2009/07/mengatasi-peperangan-framework.html#viewSource"></a><a class="item about" style="width: 16px; height: 16px;" title="?" href="http://modification-blog.blogspot.com/2009/07/mengatasi-peperangan-framework.html#about"><br /></a></div></div><div class="lines no-wrap"><div class="line alt1"><table><tbody><tr><td class="number"><code></code><br /></td></tr></tbody></table></div></div></div></span><br /><pre name="code" class="cpp"><br /><script src='jquery.js' type='text/javascript'/><br /><script type='text/javascript'><br />$(document).ready(function(){<br />$("#pageflip").hover(function() {<br />$("#pageflip img , .msg_block").stop()<br />.animate({width: '307px',height: '319px'}, 500);}, function() {<br />$("#pageflip img").stop()<br />.animate({width: '50px',height: '52px'}, 220);<br />$(".msg_block").stop()<br />.animate({width: '50px',height: '50px'}, 200);<br />});<br />});<br /></script><br /></pre><br />Dibawah ini script efek LightBox dengan framework Prototype sebelum dimodifikasi:<br /><pre name="code" class="cpp"><br /><script src='prototype.js' type='text/javascript'/><br /><script src='scriptaculous.js?load=effects,builder' type='text/javascript'/><br /><script src='lightbox.js' type='text/javascript'/><br /></pre>Dengan cara diatas, dapat dipastikan ada efek yang tidak berjalan. Jika posisi penempatan jQuery di atas maka Prototype dapat berjalan dengan baik, tetapi jika posisi penempatan Prototype diatas maka jQuery yang berjalan dengan baik.<br /><br />Pemecahannya dengan mengubah shortcut "$" menjadi "jQuery" dan menambahkan kode jQuery.noConflict(); sebagai berikut:<br />Modifikasi jQuery Library;<br /><pre name="code" class="cpp"><br /><script src='prototype.js' type='text/javascript'/><br /><script src='jquery.js' type='text/javascript'/><br /><script type='text/javascript'><br />jQuery.noConflict();<br />jQuery(document).ready(function(){<br />jQuery("#pageflip").hover(function() {<br />jQuery("#pageflip img , .msg_block").stop()<br />.animate({width: '307px',height: '319px'}, 500);}, function() {<br />jQuery("#pageflip img").stop()<br />.animate({width: '50px',height: '52px'}, 220);<br />jQuery(".msg_block").stop()<br />.animate({width: '50px',height: '50px'}, 200);<br />});<br />});<br /></script><br /></pre><br />Modifikasi Prototype Library;<br /><pre name="code" class="cpp"><br /><script src='scriptaculous.js?load=effects,builder' type='text/javascript'/><br /><script src='lightbox.js' type='text/javascript'/><br /></pre><br />Perhatikan:<br /><br /> * Prototype Library ditempatkan diatas jQuery Library.<br /> * Tambahkan kode "jQuery.noConflict();" pada script jQuery.<br /> * Ubah shortcut "$" menjadi "jQuery" pada script jQuery.<br /><br />Sampai disini konflik yang terjadi sudah bisa diatasi dan kedua efek bisa berjalan bersamaan. Silahkan dibaca disini untuk mengetahui lebih lanjut tentang pemecahan konflik antar framework terutama jQuery.<br /><br />Dibawah ini link yang menuju berbagai framework JavaScript Librarypopuler:<br /><br /> * <a href="http://jquery.com/">jQuery</a><br /> * <a href="http://www.prototypejs.org/">Prototype</a><br /> * <a href="http://mootools.net/">MooTools</a><br /> * <a href="http://script.aculo.us/">Scriptaculous</a><br /> *<a href="http://jqueryui.com/"> jQuerYUI</a><br /> * <a href="http://dojotoolkit.org/">Dojo</a><br /><br />Mudah-mudahan cara diatas dapat membantu teman-teman yang punya permasalahan sama, Happy Blogging... :-)BloG MOtarOhttp://www.blogger.com/profile/17946460676864843645noreply@blogger.com0tag:blogger.com,1999:blog-3981823669801843388.post-68860326144831637502010-07-02T19:54:00.000-07:002010-07-02T20:03:50.253-07:00Mudah Membuat Efek Page Peel<div style="text-align: justify;"><dc>M</dc>enyediakan ruangan khusus iklan (ads space) sepertinya sudah menjadi sebuah kewajiban bagi seorang blogger. Hal ini dilakukan seorang blogger untuk memberi kesempatan pihak lain memasang iklan diblog kita. Berbagai jenis iklan pun sering kita lihat, mulai dari jenis static image (gambar diam), <a href="http://modification-blog.blogspot.com/2009/01/random-ads-banner-menampilkan-banner.html">dinamic image (gambar bergerak)</a>, <a href="http://modification-blog.blogspot.com/2009/03/membuat-rotasi-banner-banner-rotator.html">banner rotator,</a> dan masih banyak lagi cara para blogger dalam hal pemasangan iklan.</div><span id="fullpost"><div style="text-align: justify;"> Kali ini MOTARO BLOG akan mencoba membuat space iklan dengan <a href="http://modification-blog.blogspot.com/2009/05/mudah-membuat-efek-page-peel.html"><span style="font-weight: bold;">Page Peel Effect (Page Flip)</span></a> dengan teknik sederhana dan mudah. Page Peel Effect adalah space iklan yang sangat menarik, iklan akan tampil jika pengunjung mengarahkan mouse-nya pada sebuah gambar dan kemudian gambar tersebut akan bergerak membesar layaknya kita membuka halaman buku, dalam seketika gambar terbuka. Jika pengunjung meng-klik gambar tersebut maka pengunjung akan diarahkan pada halaman tertentu. Bergitulah kurang lebih Page Peel Effect (Page Flip), sebagai contoh MOTARO BLOG telah memasangnya pada Blog <a href="http://dehagoblog.blogspot.com/">Kotretan Hendriono</a>.<br /></div><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMpS-PxOICPeensavrBRWMtmJixWdu_1yOczQTruEY3UENltR8Re5604F5IzlhlVGXAfBgT8rRXJpzr5MwiFljDeSCpSNgG4Ei-fQCDQxNh1Y7bQCAybH8G3PnH-Z61AA2hIeCg0g3Aqq0/s1600-h/sshot_pageflip.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 274px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMpS-PxOICPeensavrBRWMtmJixWdu_1yOczQTruEY3UENltR8Re5604F5IzlhlVGXAfBgT8rRXJpzr5MwiFljDeSCpSNgG4Ei-fQCDQxNh1Y7bQCAybH8G3PnH-Z61AA2hIeCg0g3Aqq0/s320/sshot_pageflip.png" alt="" id="BLOGGER_PHOTO_ID_5340823593983811602" border="0" /></a><span style="font-style: italic;">Screenshot dari </span><a style="font-style: italic;" href="http://dehagoblog.blogspot.com/">Kotretan Hendriono</a><br /></div>Langkah pemasangan Page Peel Effect (Page Flip)<br /><span style="font-weight: bold;">Langkah 1</span><br />Login ke Blogger<br /><span style="font-weight: bold;">Langkah 2</span><br />Masuk ke "Tata Letak - Edit HTML"<br /><span style="font-weight: bold;">Langkah 3</span><br />Checklist "Expand Template Widget"<br /><span style="font-weight: bold;">Langkah 4</span><br />Cari kode dibawah ini<br /><b:skin><![CDATA[<br />Langkah 5<br />Letakan (copy paste) kode dibawah ini tepat diatas kode pada langkah 4<br /><pre name="code" class="cpp"><br /><script src='http://dedehendriono.googlepages.com/jquery-latest.js' type='text/javascript'/><br /><script type='text/javascript'><br />$(document).ready(function(){<br />$("#pageflip").hover(function() {<br />$("#pageflip img , .msg_block").stop()<br />.animate({width: '307px',height: '319px'}, 500);<br />} , function() {<br />$("#pageflip img").stop()<br />.animate({width: '50px',height: '52px'}, 220);<br />$(".msg_block").stop()<br />.animate({width: '50px',height: '50px'}, 200);<br />});<br />});<br /></script><br /></pre><br />Langkah 6<br />Cari kode dibawah ini<br />]]></b:skin><br />Langkah 7<br />Letakan (copy paste) kode dibawah ini tepat diatas kode pada langkah 6<br /><pre name="code" class="cpp"><br />#pageflip {<br />position: relative;<br />}<br />#pageflip img {<br />border: none;<br />width: 50px; height: 52px;<br />z-index: 99;<br />position: absolute;<br />right: 0; top: 0;<br />-ms-interpolation-mode: bicubic;<br />}<br />#pageflip .msg_block {<br />width: 50px; height: 50px;<br />position: absolute;<br />right: 0; top: 0;<br />background: url(http://dedehendriono.googlepages.com/subscribe.png) no-repeat right top;<br />text-indent: -9999px;<br />}<br /></pre><br />Langkah 8<br />Cari kode dibawah ini<br /><body><br />Langkah 9<br />Letakan (copy paste) kode dibawah ini tepat dibawah kode pada langkah 8<br /><pre name="code" class="cpp"><br /><div id='pageflip'><br /><a href='http://ebook-buzz.blogspot.com/' target='_blank'><br /><img alt='' src='http://dedehendriono.googlepages.com/pageflip.png'/><br /><span class='msg_block'/><br /></a><br /></div><br /></pre><br />Langkah 10<br />Preview Blog untuk melihat hasilnya...<br /><br />Langkah Modifikasi (Penyesuaian)<br />Perhatikan Langkah 9! Ubahlah link (warna biru) dengan link yang akan kita arahkan.<br /><br />Elemen Page Peel Effect (Page Flip)<br />Perhatian! Simpanlah elemen berikut pada web hosting anda, MOTARO BLOG tidak menjamin elemen tersebut selalu ada (klik kanan Save As).<br /><br /> * <a href="http://dedehendriono.googlepages.com/jquery-latest.js">JQuery (JavaScript)</a><br /> * <a href="http://dedehendriono.googlepages.com/subscribe.png">Subscribe (Gambar Latar)</a><br /> *<a href="http://dedehendriono.googlepages.com/pageflip.png"> PageFlip (Gambar Segitiga Hitam)</a><br /><br />Sumber Artikel Sohtanaka.com<br /></span>BloG MOtarOhttp://www.blogger.com/profile/17946460676864843645noreply@blogger.com1tag:blogger.com,1999:blog-3981823669801843388.post-262097790266553922010-07-02T19:26:00.000-07:002010-07-02T19:52:16.165-07:00Tampilkan Gambar dengan Efek LightBox<div style="text-align: justify;">Efek LightBox sangat menarik dan indah untuk menampilkan gambar-gambar pada Blogger. Ketika pengunjung meng-klik gambar yang disertakan pada artikel, maka gambar akan muncul dengan ukuran sebenarnya pada halaman yang sama dengan warna latar hitam transparan. Jika pernah menggunakan software semacam Picasa, maka seperti itulah efek LightBox yang akan kita terapkan pada Blog*Spot kali ini. Efek LightBox dibuat dan dikembangkan oleh <a href="http://www.lokeshdhakar.com/" target="_blank">Lokesh Dhakar</a>, versi terbaru adalah <a href="http://www.lokeshdhakar.com/projects/lightbox2/" target="_blank">Lightbox JS v2.04</a>.</div><span id="fullpost"><div style="text-align: justify;">MOTARO BLOG menerapkan efek LightBox ini pada gambar-gambar artikel <a href="http://elecproj.blogspot.com/">Electronic Project</a>, silahkan dilihat terlebih dahulu untuk meyakinkan bahwa anda menyukai efek LightBox ini. Pada awalnya Blogger TuneUp mengalami kegagalan pada saat mencoba menerapkannya pada Blog*Spot, gambar tidak mampu diload (ditampilkan). Ternyata setelah tanpa lelah mencoba kesalahan ditemukan, dan kesalahan itu bukan pada proses pemasangan berbagai kode LightBox tapi terdapat pada karakter kode gambar Blog*Spot itu sendiri.<br /><span><span id="fullpost"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQtQsScnU3v5JX2-nmU9j3cQtqspUbRjnMKNgcLJD1rWnrAQbG85fWGT-cqRL9wQdrMaIzOoKr5iR8JhBD0dd9rsFQSYV4Vbx81TZr0DAp83OHep-KjcXuQGptC2JIWlpewC7uoE3okt7U/s400/lightbox-preview.png"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 369px; height: 375px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQtQsScnU3v5JX2-nmU9j3cQtqspUbRjnMKNgcLJD1rWnrAQbG85fWGT-cqRL9wQdrMaIzOoKr5iR8JhBD0dd9rsFQSYV4Vbx81TZr0DAp83OHep-KjcXuQGptC2JIWlpewC7uoE3okt7U/s400/lightbox-preview.png" alt="" border="0" /></a></span></span><br /><div style="text-align: center;"><span style="font-style: italic;">Screenshot diambil dari </span><a style="font-style: italic;" href="http://elecproj.blogspot.com/">Electronic Project</a></div><h3>Pemasangan Efek LightBox pada Blog*Spot:</h3><span style="font-weight: bold;">Langkah 1</span><br />Login ke Blogger<br /><span style="font-weight: bold;">Langkah 2</span><br />Masuk ke bagian "Tata Letak - Edit HTML"<br /><span style="font-weight: bold;">Langkah 3</span><br />Cari kode dibawah ini:<br />]]></b:skin><br />Langkah 4Masukan kode CSS dibawah ini diatas kode pada Langkah 3:<br /><pre name="code" class="cpp"><br />#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}<br />#lightbox img{ width: auto; height: auto;}#lightbox a img{ border: none; }<br />#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }<br />#imageContainer{ padding: 10px; }<br />#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }<br />#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }<br />#imageContainer>#hoverNav{ left: 0;}<br />#hoverNav a{ outline: none;}<br />#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }<br />#prevLink { left: 0; float: left;}#nextLink { right: 0; float: right;}<br />#prevLink:hover, #prevLink:visited:hover { background: url(http://www.lokeshdhakar.com/projects/lightbox2/images/prevlabel.gif) left 15% no-repeat; }<br />#nextLink:hover, #nextLink:visited:hover { background: url(http://www.lokeshdhakar.com/projects/lightbox2/images/nextlabel.gif) right 15% no-repeat; }<br />#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }<br />#imageData{ padding:0 10px; color: #666; }<br />#imageData #imageDetails{ width: 70%; float: left; text-align: left; }<br />#imageData #caption{ font-weight: bold; }<br />#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }<br />#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;} #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }<br /></pre><br />Langkah 5<br />Cari kode dibawah ini:<br /></head><br /><pre name="code" class="cpp"><br /><script src='http://www.lokeshdhakar.com/projects/lightbox2/js/prototype.js' type='text/javascript'/><br /><script src='http://www.lokeshdhakar.com/projects/lightbox2/js/scriptaculous.js?load=effects,builder' type='text/javascript'/><br /><script src='http://www.lokeshdhakar.com/projects/lightbox2/js/lightbox.js' type='text/javascript'/><br /></pre><br />Langkah 7<br />Simpanlah Template, sampai Langkah 7 ini proses pemasangan efek LightBox pada Blog*Spot sudah selesai, tetapi efek LightBox ini tidak akan berjalan jika tidak ditambahkan beberapa kode pada gambar yang disertakan pada artikel. Lanjutkan membaca langkah berikutnya...<br /><br /><span id="fullpost"><h3>Proses Modifikasi Kode Gambar:</h3><span style="font-weight: bold;">Langkah 1</span><br /><div style="text-align: justify;">Pada saat memasukan gambar pada artikel, biasanya menggunakan metode seperti gambar dibawah ini:<br /></div><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR4Ps3C6Eq7xsWZlCROweMm4On7GzhOrpUGer6Ultb9jwPqQap_5nhGK89EVyrnvc_-js7DOUtbN35EEStq4gJwu0jpCP8yzcwk7h5so0BNTZbMGttiI65qgCXoM4gOPN87C47d5LGLFl9/s1600/upload-gambar.png" rel="facebox"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 225px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR4Ps3C6Eq7xsWZlCROweMm4On7GzhOrpUGer6Ultb9jwPqQap_5nhGK89EVyrnvc_-js7DOUtbN35EEStq4gJwu0jpCP8yzcwk7h5so0BNTZbMGttiI65qgCXoM4gOPN87C47d5LGLFl9/s320/upload-gambar.png" alt="" id="BLOGGER_PHOTO_ID_5357861298684795394" border="0" /></a><span style="font-weight: bold;">Langkah 2</span><br /><div style="text-align: justify;">Setelah gambar berhasil di-upload lakukan penambahan kode pada mode "Edit Html" posting seperti gambar dibawah ini:<br /></div><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1lbzmYnrTbcvGaje3kZwHz9oJTFwBcv4LFtmcvB7AxaXnEv4kNrjESfVC2g5g9JoBCU9wuT6JfMGLDUkUjaGKsk4mWiZbuffx1Zss9OGV1Ylodd7qrF_gnvgEsW2FbxCAt6DLTc4HBS6d/s1600/lightbox-edit.png" rel="facebox"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 157px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1lbzmYnrTbcvGaje3kZwHz9oJTFwBcv4LFtmcvB7AxaXnEv4kNrjESfVC2g5g9JoBCU9wuT6JfMGLDUkUjaGKsk4mWiZbuffx1Zss9OGV1Ylodd7qrF_gnvgEsW2FbxCAt6DLTc4HBS6d/s400/lightbox-edit.png" alt="" id="BLOGGER_PHOTO_ID_5357863085302436866" border="0" /></a><span style="font-weight: bold;">Hal yang harus diperhatikan:</span><br /><ol style="text-align: justify;"><li>Kode rel="lightbox" harus selalu ditambahkan pada gambar yang disertakan pada artikel, sehingga pada saat pengunjung meng-klik gambar, maka gambar akan ditampilkan dengan efek LightBox (lihat contoh dibawah ini, kode rel="lightbox" dengan warna biru).</li><li>Jika gambar pada artikel lebih dari satu, tambahkan kode rel="lightbox[roadtrip]" pada setiap kode gambar. Dengan penambahan kode ini maka gambar akan ditampilkan dengan efek LightBox dan efek Slide. Semua gambar akan dikumpulkan dalam satu frame dan akan ditampilkan seperti slideshow.</li><li>Buang kode "-h" (tanpa tanda kutip) pada gambar yang disertakan pada artikel, karena jika kode "-h" ini tidak dibuang maka gambar tidak akan mampu diload/ditampilkan (lihat contoh dibawah ini, kode "-h" dengan warna merah).</li></ol><span style="font-weight: bold; font-style: italic;">Perhatikan contoh dibawah ini :</span><br /><span style="font-style: italic;">Kode LightBox jika hanya satu gambar!</span></span></div></span><br /><pre name="code" class="cpp"><a onblur="try {parent.deselectBloggerImageGracefully();}catch(e) {}"href="http://2.bp.blogspot.com/AAAAB9g/s1600-h/image.jpg"<span style="color: rgb(255, 204, 51);"> rel="lightbox"</span>><img style="cursor:pointer;" src="http://2.bp.blogspot.com/AAAAB9g/s400/image.jpg" alt="" id="BLOGGER_PHOTO_ID_XXXXX" border="0"></a><br /></pre><br />Kode LightBox jika lebih dari satu gambar!<br /><pre name="code" class="cpp"><a onblur="try {parent.deselectBloggerImageGracefully();}catch(e) {}"href="http://2.bp.blogspot.com/AAAAB9g/s1600-h/image.jpg"<span style="color: rgb(255, 204, 51);"> rel="lightbox[roadtrip]"</span>><img style="cursor:pointer;" src="http://2.bp.blogspot.com/AAAAB9g/s400/image.jpg" alt="" id="BLOGGER_PHOTO_ID_XXXXX" border="0"></a></pre><br />Langkah 3<br />Artikel telah siap lepas landas dengan efek gambar LightBox plus Slide dan KLIK Terbitkan!<br /><br />Keterangan:<br /><br /> * Blogger TuneUp tidak menjamin semua source yang berupa Gambar, dan JavaScript akan selalu tersedia, dari itu silahkan anda upload sendiri pada hosting pribadi anda.<br /> * Efek LightBox ini menggunakan source disini (klik kanan save as)<br /> * Ubahlah arah URL source diatas ke arah URL source hosting anda (perhatikan "Pemasangan Efek LightBox pada Blog*Spot" berwarna biru yang ada pada langkah 4 dan langkah 6).<br /><br />Mudah-mudahan berhasil. Tinggalkan komentar jika mengalami kegagalan dan Happy Blogging :)BloG MOtarOhttp://www.blogger.com/profile/17946460676864843645noreply@blogger.com0tag:blogger.com,1999:blog-3981823669801843388.post-64643421567399093552010-07-02T18:50:00.000-07:002010-07-02T19:18:46.576-07:00Animasi Goyang Link Sidebar dengan jQueryhaloo.. semua para pembaca motaro blog kali ini motaro bloa akan share nie tentang JQuery lagi..<br />kali ini tentang membuat link side bar bergoyang (hemz.. kira-kira goyang apa ya.. goyang ngebor ? ngecor atau patah-patah.. =) .. kembali ketopik") .. penasaran bagaimana nya..<br />ayo kita mulai....<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNTjzcDoOaFW7sXL_jqS7eqh9qLNXfz2RIAfkWTtqG8W9mg26_P58dqilY2tzqk4cPojWTwk3wtjYY7hfp9X-cHs2CwL8omN_xdANNRhV0bc5VAVIGcRTOSFOHjsJinKqS6OEGC_AAZoA/s1600/untitled22.JPG" rel="facebox"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 243px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNTjzcDoOaFW7sXL_jqS7eqh9qLNXfz2RIAfkWTtqG8W9mg26_P58dqilY2tzqk4cPojWTwk3wtjYY7hfp9X-cHs2CwL8omN_xdANNRhV0bc5VAVIGcRTOSFOHjsJinKqS6OEGC_AAZoA/s320/untitled22.JPG" alt="" id="BLOGGER_PHOTO_ID_5489495975853170082" border="0" /></a><div style="text-align: center;"><br /><span style="font-size:180%;"><a href="http://jsbin.com/uwefa3"><span id="fullpost"><div class="view_demo"><span>Klik disini untuk melihat demo Animasi Goyang Link Sidebar dengan jQuery</span></div></span></a></span></div><span id="fullpost"><h3>Animasi Goyang Link Sidebar dengan jQuery</h3><span style="font-weight: bold;">Langkah 1</span><br />Login ke Blogger<br /><span style="font-weight: bold;">Langkah 2</span><br />Masuk ke "Tata Letak - Edit HTML"<br /><span style="font-weight: bold;">Langkah 3</span><br />Cari kode dibawah ini:</span><br /></head><br /><span id="fullpost"><span style="font-weight: bold;">Langkah 4</span><br />Masukan kode dibawah ini tepat diatas kode pada langkah 3:</span><br /><pre name="code" class="cpp"><br /><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><br />var $jnoc = jQuery.noConflict();<br />$jnoc(document).ready(function(){<br />var Duration = 250;<br />$jnoc('.widget-content ul li a').hover(function() {<br />$jnoc(this).animate({ paddingLeft: '20px' }, Duration);<br />}, function() {<br />$jnoc(this).animate({ paddingLeft: '0px' }, Duration); <br />});<br />});<br /></pre><br /><span id="fullpost"><span style="font-weight: bold;">Langkah 5</span><br />Simpan Template dan Preview... (Yuhuy.... mari bergoyang...)<br /><br /></span><div style="text-align: center;"><br /><span style="font-size:180%;"><a href="http://www.box.net/shared/e098nqf6jx"><span id="fullpost"><div class="download"><span>Klik disini untuk download source code Animasi Goyang Link Sidebar dengan jQuery</span></div></span></a></span></div><span id="fullpost"><span style="font-weight: bold;">Keterangan:</span><br /><ol><li>Ubah nilai 250 (satuan milidetik) untuk mengatur kecepatan gerakan animasi (Baris 4)</li><li>Ubah nilai 20 untuk menentukan jarak gerakan animasi (Baris 6)</li><li>Jika gagal ubah .widget-content dengan .sidebar (Baris 5)</li></ol></span>BloG MOtarOhttp://www.blogger.com/profile/17946460676864843645noreply@blogger.com0tag:blogger.com,1999:blog-3981823669801843388.post-78192533660250805562010-07-02T18:35:00.000-07:002010-07-02T19:04:19.253-07:00Mengenal JSON (JavaScript Object Notation) Untuk Bloggerapa sebenarnya JSON? Mari kita belajar bersama.<br /><div style="text-align: justify;"><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3qA6mR6IvtwM0DAXsaIalAPSRf8-xTaDNtrbduBsXiqRiCOIXS_8ZCK57rTlPY7To_5E8WdftQT-jIP1IYyDVI4S09VuIJva8l8cA5h9gWV8n-vcfsAjguEsWT5pISC9b3NNh2uqlaSFu/s400/Douglas_Crockford.jpg"rel=" facebox="><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 266px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3qA6mR6IvtwM0DAXsaIalAPSRf8-xTaDNtrbduBsXiqRiCOIXS_8ZCK57rTlPY7To_5E8WdftQT-jIP1IYyDVI4S09VuIJva8l8cA5h9gWV8n-vcfsAjguEsWT5pISC9b3NNh2uqlaSFu/s400/Douglas_Crockford.jpg" alt="" border="0" /></a><br /><div style="text-align: center;"><span style="font-weight: bold;">Douglas Crockford master JavaScript dibelakang JSON</span></div><div style="text-align: justify;"><div style="text-align: justify;">JSON (JavaScript Object Notation) adalah format pertukaran data yang ringan, mudah dibaca dan ditulis oleh manusia, serta mudah diterjemahkan dan dibuat (generate) oleh komputer. Format ini dibuat berdasarkan bagian dari Bahasa Pemprograman JavaScript<sup><a href="http://modification-blog.blogspot.com/2010/05/mengenal-json-javascript-object.html#catatankaki">[4]</a></sup>, Standar ECMA-262 Edisi ke-3 - Desember 1999<sup><a href="http://modification-blog.blogspot.com/2010/05/mengenal-json-javascript-object.html#catatankaki">[5]</a></sup>. JSON merupakan format teks yang tidak bergantung pada bahasa pemprograman apapun karena menggunakan gaya bahasa yang umum digunakan oleh programmer keluarga C termasuk C, C++, C#, Java, JavaScript, Perl, Python dan lain-lain. Oleh karena sifat-sifat tersebut, menjadikan JSON ideal sebagai bahasa pertukaran-data.<br /></div><br />JSON terbuat dari dua struktur:<br /></div><ol style="text-align: justify;"><li>Kumpulan pasangan nama/nilai. Pada beberapa bahasa, hal ini dinyatakan sebagai objek (object), rekaman (record), struktur (struct), kamus (dictionary), tabel hash (hash table), daftar berkunci (keyed list), atau associative array.</li><li>Daftar nilai terurutkan (an ordered list of values). Pada kebanyakan bahasa, hal ini dinyatakan sebagai larik (array), vektor (vector), daftar (list), atau urutan (sequence).</li></ol><div style="text-align: justify;">Struktur-struktur data ini disebut sebagai struktur data universal. Pada dasarnya, semua bahasa pemprograman moderen mendukung struktur data ini dalam bentuk yang sama maupun berlainan. Hal ini pantas disebut demikian karena format data mudah dipertukarkan dengan bahasa-bahasa pemprograman yang juga berdasarkan pada struktur data ini.<br /><br />Demikian situs resmi JSON menjelaskan. Jika belum mengerti silahkan ubek-ubek internet untuk memahami apa dan bagaimana bahasa pemrograman JSON.<br />Dari sekian banyak bahasa pemrograman JSON, Blogger Tune-Up akan sedikit menampilkan script JSON yang paling banyak di gunakan. Tabel di bawah ini merupakan unsur yang paling penting dari struktur objek JSON untuk Blogger.<br /><br />Dibawah ini contoh script penggunaan JSON pada Blog.<br /><pre name="code" class="cpp"><br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><br /><title>Blogger Tune-Up | Contoh Penggunaan JSON</title><br /><script style="text/javascript"><br />function showrecentposts(json) {<br /> // sebuah pengulangan dimulai<br /> // dalam pengulangan ini kita mengambil entri dari feed dan paseing<br /> for (var i = 0; i < jumposts; i++) {<br /> // mengambil entri i dari feed<br /> var entry = json.feed.entry[i];<br /> // mengambil judul artikel<br /> var posttitle = entry.title.$t;<br /> // mengambil alamat artikel<br /> // memeriksa semua alamat untuk link dengan rel = alternate<br /> var posturl;<br /> if (i == json.feed.entry.length) break;<br /> for (var k = 0; k < entry.link.length; k++) {<br /> if (entry.link[k].rel == 'alternate') {<br /> posturl = entry.link[k].href;<br /> break;<br /> }<br /> }<br /> // mengambil tanggal terbit, pengambilan hanya 10 karakter pertama<br /> var postdate = entry.published.$t.substring(0, 10);<br /> // mengambil nama author<br /> var postauthor = entry.author[0].name.$t;<br /> // mengambil isi artikel<br /> // Jika feed Blogger di set pada FULL, maka isi merupakan daftar utuh<br /> // Jika feed Blogger di set pada SHORT, maka isi merupakan daftar penggalan/rangkuman<br /> if ("content" in entry) {<br /> var postcontent = entry.content.$t;<br /> }<br /> else if ("summary" in entry) {<br /> var postcontent = entry.summary.$t;<br /> }<br /> else var postcontent = "";<br /> // menonaktifkan semua tag HTML<br /> var re = /<\S[^>]*>/g;<br /> postcontent = postcontent.replace(re, "");<br /> // mereduksikan isi artikel sesuai dengan setting jumlah karakter<br /> if (postcontent.length > numchars) postcontent = postcontent.substring(0, numchars);<br /> // menampilkan hasil<br /> document.write('<br>');<br /> document.write('Entry #' + i + '<br>');<br /> document.write('Post title : ' + posttitle + '<br>');<br /> document.write('Post url : ' + posturl + '<br>');<br /> document.write('Post author : ' + postauthor + '<br>');<br /> document.write('Postdate : ' + postdate + '<br>');<br /> document.write('Postcontent : ' + postcontent + '...<br>');<br /> document.write('<br>');<br /> }<br />}<br /></script><br /></head><br /><body><br /><h2>Artikel Terbaru motaro blog</h2><br /><script style="text/javascript"><br />var jumposts=5;<br />var numchars=200;<br /></script><br /><script src="http://motaroblog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showrecentposts"></script><br /></body><br /></html><br /></pre><br /><br /></div><br /></div>BloG MOtarOhttp://www.blogger.com/profile/17946460676864843645noreply@blogger.com0tag:blogger.com,1999:blog-3981823669801843388.post-79609011526051610442010-07-02T17:58:00.000-07:002010-07-10T08:22:53.460-07:00Info Panel Slide Vertikal dengan jQueryMemenuhi permintaan kakak yu-bimo di chatbox kemarin mengenai info profil slide panel sebelah kanan, maka kali ini mari kita bongkar skenario dibelakang semua itu. Artikel ini diadaptasi dari spyrestudios.com<sup><a href="http://modification-blog.blogspot.com/2010/03/info-panel-slide-vertikal-dengan-jquery.html#catatankaki">[1]</a></sup> dengan judul asli "Vertical Sliding Info Panel With jQuery"<sup><a href="http://modification-blog.blogspot.com/2010/03/info-panel-slide-vertikal-dengan-jquery.html#catatankaki">[2]</a></sup> yang kemudian diberikan sedikit sentuhan oleh saya sendiri (bersumber dari blogger tune up) sehingga menjadi seperti yang sekarang digunakan. Artikel ini berbasis jQuery seperti efek-efek yang lainnya yang saya gunakan di bog saya sendiri..<br /><div class="post-body normal_link" id="post-7446041602099205233"><div style="text-align: justify;">okey kita mulai saja<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnI_pE89_gRPothuJ2TLG-CIxe706jzeSgxTcZNZF6kwYlMgtmXknIAFJQ-HTo2PQ4b5iWQwvfxY8iEF9yyg5vfjR8fzyolGiwJiSu09d7uUc6dXCu8hm5V4F4cLxS_9Pf9vu0QFc6y6o/s1600/untitled333.JPG" rel=" facebox="><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 320px; height: 309px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnI_pE89_gRPothuJ2TLG-CIxe706jzeSgxTcZNZF6kwYlMgtmXknIAFJQ-HTo2PQ4b5iWQwvfxY8iEF9yyg5vfjR8fzyolGiwJiSu09d7uUc6dXCu8hm5V4F4cLxS_9Pf9vu0QFc6y6o/s320/untitled333.JPG" alt="" id="BLOGGER_PHOTO_ID_5489479116765950034" border="0" /></a><span id="fullpost"><span style="font-weight: bold;">Langkah 1</span><br />Login ke Blogger<br /><span style="font-weight: bold;">Langkah 2</span><br />Masuk ke "Tata Letak - Edit HTML"<br /><span style="font-weight: bold;">Langkah 3</span><br />Klik "Expand Template Widget"<br /><span style="font-weight: bold;">Langkah 4</span><br />Cari kode di bawah ini:<br />]]></b:skin><br /></span><span id="fullpost"><span style="font-weight: bold;">Langkah 5</span><br />Masukan (copy paste) kode dibawah ini diatas kode pada langkah 4:<br /><br /><pre name="code" class="cpp"><br />.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}<br />.panel p{color:#ccc;margin:0 0 15px;padding:0}<br />.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}<br />.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}<br />a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}<br />a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}<br />a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}<br />.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}<br />.colleft{float:left;width:130px;line-height:22px}<br />.colright{float:right;width:130px;line-height:22px}<br />a:focus{outline:none}<br />.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}<br />.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}<br />.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}<br /><br /></pre><br />Langkah 6<br />Cari kode dibawah ini:<br /></head><br />Langkah 7<br />Masukan (copy paste) kode dibawah ini diatas kode pada langkah 6:<br /><pre name="code" class="cpp"><br /><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/><br /><script type="text/javascript"><br />$(document).ready(function(){<br />$(".trigger").click(function(){<br />$(".panel").toggle("fast");<br />$(this).toggleClass("active");<br />return false;<br />});<br />});<br /></script><br /></pre>Langkah 8<br />Cari kode dibawah ini:<br /></body><br />Langkah 9<br />Masukan (copy paste) kode dibawah ini diatas kode pada langkah 8:<br /><pre name="code" class="cpp"><br /><div class='panel'><br /><h3>Selamat Datang</h3><br /><p style='text-align:justify'>Selamat datang di Kotretan motaro - saya senang Anda berada di sini, dan berharap Anda sering datang kembali. Silakan berselancar di sini dan membaca lebih lanjut tentang dunia maya. Ada banyak hal tentang kami, Anda mungkin akan menemukan sesuatu yang menarik. <a href='http://motaroblog.blogspot.com/' title='motaro Online'>Selengkapnya tentang kami</a></p><br /><br /><h3>Sepintas Tentang Kotretan motaro</h3><br /><img height='73px' src='http://i45.tinypic.com/343nmhg.jpg' width='73px'/><br /><p>Nama saya motaro, Saya seorang yang biasa</p><br /><br /><div style='clear:both;'/><br /><br /><div class='columns'><br /><div class='colleft'><br /><h3>Navigasi</h3><br /><ul><br /><li><a href='#' title='home'>Home</a></li><br /><li><a href='#' title='about'>About</a></li><br /><li><a href='#' title='portfolio'>Portfolio</a></li><br /><li><a href='#' title='contact'>Contact</a></li><br /><li><a href='#' title='blog'>Blog</a></li><br /></ul><br /></div><br /><br /><div class='colright'><br /><h3>Social Stuff</h3><br /><ul><br /><li><a href='http://twitter.com/motaro44' title='Twitter'>Twitter</a></li><br /><li><a href='http://facebook.com/luphleci' title='Facebook'>Facebook</a></li><br /><li><a href='http://digg.com/users/motaro44' title='Digg'>Digg</a></li><br /><li><a href='http://delicious.com/motaro' title='Del.Icio.Us'>Del.Icio.Us</a></li><br /><li><a href='mailto:motaroblog.blogspot@gmail.com' title='Gmail'>Gmail</a></li><br /></ul><br /></div><br /></div><br /><div style='clear:both;'/><br /></div><br /><a class='trigger' href='#'>Info</a><br /></pre><span id="fullpost"><span style="font-weight: bold;">Langkah 10</span><br />Simpan<br />Template dan Preview blog...<br /></span><span id="fullpost"><div class="download"><div style="text-align: center;"><span style="font-size:180%;"><a href="http://www.box.net/shared/19x4echdn4" target="_blank">Download </a><a href="http://www.box.net/shared/19x4echdn4" target="_blank">Vertical Sliding Info Panel</a></span><br /><span></span></div><div style="text-align: center;"><span>Download Demo dan Source Code </span><br /><span>Vertical Sliding Info Panel With jQuery</span></div></div></span><span id="fullpost"><span style="font-weight: bold;">Keterangan:</span><br /><ul style="text-align: justify;"><li>Lakukan modifikasi kode pada langkah 9 sesuai keinginan<br />anda, dari mulai informasi blog, informasi<br />author/penulis, sampai link-link yang akan dimasukan.</li></ul></span><br /></span></div></div>BloG MOtarOhttp://www.blogger.com/profile/17946460676864843645noreply@blogger.com0tag:blogger.com,1999:blog-3981823669801843388.post-45885078020085259622010-06-28T08:20:00.000-07:002010-07-02T16:20:15.158-07:00download film naruto shippuden<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://rizkiha51.files.wordpress.com/2009/12/naruto_shippuden_wallpaper.jpg"class="preview" title="All In One Template"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://rizkiha51.files.wordpress.com/2009/12/naruto_shippuden_wallpaper.jpg" alt="" border="0" /></a><ul><li>168 : The Fourth Hokage [<span style="color: rgb(255, 0, 0);">15 Juli 2010</span>]<br /></li><li><a href="http://www.enterupload.com/uzixe27rc3oi/NS_167.mkv.html">167</a> or <a href="http://www.enterupload.com/t9990evhntws/NS167.480p_.mkv.html">167</a> or <a href="http://www.mediafire.com/?zmwqizmn5gf">167</a> : Catastrophic Planetary Construction<br /></li><li><a href="http://www62.indowebster.com/031cc14d34ff5b3f9525b135e2eaf6a8.mkv">166</a> or <a href="http://www.enterupload.com/osnws5j24e0b/NS.166.mkv.html">166</a> or <a href="http://www.enterupload.com/yl3662f3hbxx/NS_166.mkv.html">166</a> or <a href="http://www.mediafire.com/?znmmzum5mzm">166</a> or <a href="http://www62.indowebster.com/5c868d3f283a6249d16a6fb3c5f36925.mkv">166</a> : Confession<br /></li><li><a href="http://www62.indowebster.com/3b8bbc05c05b6eb91b36c09114930cc8.avi">165</a> or <a href="http://www62.indowebster.com/cd6c720dd54d4f017a0ab1cab8543ab5.mkv">165</a> or <a href="http://www.enterupload.com/8b4jn1q8ybnc/NS.165.480p.mkv.html">165</a> or <a href="http://www.enterupload.com/d9lgxgduidyr/NS_165_480p.mkv.html">165</a> : Nine-Tails Capture Complete<br /></li><li><a href="http://www62.indowebster.com/ed686c6a8b1dd9bc5b28ba2b94c0e1b3.mp4">164</a> or <a href="http://www.enterupload.com/c5ozgbxk8t9k/NS_164_miniHQ.mkv.html">164</a> or <a href="http://www.enterupload.com/dvj7g56323jk/Naruto_Shippuuden_164_480p_.mkv.html">164</a> or <a href="http://www.mediafire.com/?k0mmegv9iwn">164</a> or <a href="http://www.maknyos.com/9jmnfet2c5u1/NS164_480p_byDL-maknyos.com.mkv.html">164</a> or <a href="http://www.mediafire.com/?ano2jndwdnm">164</a> : Crisis! Sage Mode Disappears<br /></li><li><a href="http://www.enterupload.com/y85lz2w6dp58/Naruto_Shippuuden_163_%5B480p%5D.mkv.html">163</a> or <a href="http://www.enterupload.com/7hi88rxte93n/NS_163_480P.mkv.html">163</a> or <a href="http://www59.indowebster.com/a4806b02aaf2b5f559af35cf8d6ae3f8.mp4">163</a> or <a href="http://www.mediafire.com/?oizzmcnivcd">163</a> : Explode! Sage Mode<br /></li><li><a href="http://www.enterupload.com/tko8v0l9c6nz/_Naruto_Shippuuden_162_miniHQ.mkv.html">162</a> or <a href="http://www.enterupload.com/g9bpdnsb2t3r/Naruto_Shippuuden_-_162.Cinema3satu.blogspot.com.mkv.html">162</a> or <a href="http://www.mediafire.com/?nmjlinnyzyz">162</a> or <a href="http://www.maknyos.com/gh4opc5rcx0t/_Naruto_Shippuuden_162-maknyos.com.rmvb.html">162</a> or <a href="http://www.mediafire.com/?3kowicevmzy">162</a> : The World Shall Know Pain<br /></li><li><a href="http://www60.indowebster.com/6027818239476d7255f5b26cbbcf0cb8.mkv">161</a> or <a href="http://www.enterupload.com/i62unwmz3rwc/NarutoShippuuden161.Cinema3satu.blogspot.com.mkv.html">161</a> or <a href="http://www.enterupload.com/stfomvydzsre/Naruto_Shippuuden_161_miniHQ.mkv.html">161</a> or <a href="http://www.mediafire.com/?g2mt5kwoyzz">161</a> : Surname Is Sarutobi! Given Name, Konohamaru<br /></li><li><a href="http://www61.indowebster.com/355412e5201baf92e127c3583609e778.mp4">160</a> or <a href="http://www60.indowebster.com/1893ad96f0bb06c1a5f7a5f133dd7148.avi">160</a> or <a href="http://tinypaste.com/767a29">160</a> or <a href="http://www.mediafire.com/?yoztyyjitjn">160</a> : The Mystery of Pain<br /></li><li><a href="http://www60.indowebster.com/be5e66b1fa4d0355a2e741a67a267b1e.rar">159</a> or <a href="http://tinypaste.com/36466" target="_blank">159</a> or <a href="http://www.enterupload.com/qa9xb2c0g78f/Naruto_Shippuuden_159_480p.mkv.html">159</a> or <a href="http://www.mediafire.com/?dntz2nkzitm">159</a> : Pain vs Kakashi</li><li><a href="http://www60.indowebster.com/94b9c64bc1d2752913009b60254ded4e.avi">158</a> or <a href="http://tinypaste.com/583b3" target="_blank">158</a> or <a href="http://www.enterupload.com/ttai16r6nyli/Naruto_Shippuuden_-_158_%5B480p%5D.mkv.html">158</a> or <a href="http://www.mediafire.com/?o2ymj5vnjkt">158</a> : The Power to Believe</li><li><a href="http://www60.indowebster.com/78fd806eda792550f2cb6042d41ef258.avi">157</a> or <a href="http://tinypaste.com/f7138" target="_blank">157</a> or <a href="http://www.enterupload.com/77bhux8tf5c4/ns157.mp4.html">157</a> or 157 : Konoha Attack<br /></li><li><a href="http://www60.indowebster.com/fdff6969934a42022fdd10501bb9dc27.avi">156</a> or <a href="http://www.enterupload.com/3v910dmgnn04/Naruto_Shippuuden_-_156_%5B480p%5D.mkv.html">156</a> or <a href="http://www.mediafire.com/?g5tmonjkom3">156</a> : Surpassing the Master</li><li><a href="http://www60.indowebster.com/bf4e526479e28ef3c6a4cc174fef76aa.avi">155</a> or <a href="http://tinypaste.com/a54b9" target="_blank">155</a> or <a href="http://www.enterupload.com/4lauqqj6ddow/Naruto_Shippuuden_155.mp4.html">155</a> : The First Challenge<br /></li><li><a href="http://www61.indowebster.com/3481c073cd00ac24846a3cb68b8e91e0.mp4">154</a> or <a href="http://www.mediafire.com/?mlnwmminjdj">154</a> or <a href="http://www.enterupload.com/2xntahc68ggq/Naruto_Shippuuden_154.mp4.html">154</a> : Decryption</li><li><span style="text-decoration: underline;"></span><a href="http://www61.indowebster.com/8a0799d517d49b40081fc7b560602557.mp4">152-153</a> : Somber News & Following the Master's Shadow</li><li><a href="http://www61.indowebster.com/a0973a4f0c506fa0ffc1c21360d76ad6.mp4">151</a> or <a href="http://tinypaste.com/38662" target="_blank">151</a> or <a href="http://www.enterupload.com/f8y8xe0r5tgz/Naruto_Shippuuden_151_%5Bcinema3satu%5D.mp4.html">151</a> : Student and Teacher</li><li><a href="http://www59.indowebster.com/970f32172000c320c1d27bbb67eab976.mp4">150</a> or <a href="http://tinypaste.com/236407" target="_blank">150</a> : Activate the Forbidden Jutsu</li><li><a href="http://www55.indowebster.com/bc74642fe8b019cf4b4b0f6033ad3d3e.mkv">149</a> or <a href="http://www.enterupload.com/zxvxpaoh1b3s/NS_149_%5Bcinema3satu%5D.rmvb.html">149</a> or <a href="http://www38.indowebster.com/1e422293bc828c3b0c80cb43e8ee352b.mp4">149</a> : separation</li><li><a href="http://www59.indowebster.com/b58fe243ed620878e2f13c2a1834bc81.mkv">148</a> or <a href="http://www54.indowebster.com/0badd0c0e50f9d6c3cbb28d7972fe454.mkv">148</a> : Heir to Darkness</li><li><a href="http://www44.indowebster.com/d24214b83e695debf4045f170f3ebca6.mkv">147</a> or <a href="http://www.enterupload.com/tkwgeiruumze/Naruto_Shippuuden_147.rmvb.html">147</a> : Rogue Ninja's Past</li><li><a href="http://www38.indowebster.com/77ad048d637daf51766720939ebcae6e.mkv">146</a> or <a href="http://www42.indowebster.com/6865cdcde69ae6e06eb9a09e68319b51.avi">146</a> or <a href="http://www59.indowebster.com/0d4160da5bd047d9057667d700b7e6e2.mkv">146</a> : The Successor's Wish</li><li><a href="http://www35.indowebster.com/d5d3f9ca28a1e9bca08d5c5c2a4c78e5.mp4">145</a> or <a href="http://www.enterupload.com/c81smc8k9nx4/Naruto_Shippuuden_145-_www.cinema3satu.blogspot.com.mp4.html">145</a> : Successor of the Forbidden Jutsu</li><li><a href="http://www42.indowebster.com/d4aeaf5ef1bace736240950496eb79d5.mp4">144</a> or <a href="http://www55.indowebster.com/6c8a99217b4a2c18dd0fa010c4036a0c.mp4">144</a> or <a href="http://www.mediafire.com/?zqx3tzdzmyj">144</a> : Wanderer</li><li><a href="http://www38.indowebster.com/c21021e3b3b2e61e944c9791af57b159.mp4">143</a> or <a href="http://www.enterupload.com/1gj5bk20h7le/Naruto_Shippuuden_143_-_www.cinema3satu.blogspot.com.mkv.html">143</a> : The Eight-Tails vs. Sasuke</li><li><a href="http://www44.indowebster.com/45f03421f1db3e1eb0a707de645129e9.avi">142</a> or <a href="http://www50.indowebster.com/92e9a65a36700595f0e7a494da58de41.mkv">142</a> : Battle of Unraikyo</li><li><a href="http://www44.indowebster.com/bdc6b333d61bbb2d7def8bf5f70d1564.mkv">141</a> or <a href="http://www51.indowebster.com/5158a3c140a20e68bc2537003b466252.mkv">141</a> : Truth</li><li><a href="http://www.mediafire.com/?a3mj0hjdwnj">140</a> or <a href="http://www44.indowebster.com/55898a723414172e3605f1c60f447ef4.mp4">140</a> or <a href="http://www55.indowebster.com/a33e1329356e782408384a964a7e2a58.avi">140</a> : Fate</li><li><a href="http://www51.indowebster.com/c0469e135273f72df4aa72fda9450cd0.mkv">139</a> or <a href="http://www51.indowebster.com/cc4dff902c17b10ca368ce981dde1846.avi">139</a> : The Mystery of Tobi</li><li><a href="http://www44.indowebster.com/6bd60e0dd52913bfd6baf3b8ba0ccc99.mp4">138</a> or <a href="http://www50.indowebster.com/36f78c457971c0e6e0a6a7d1154e55d0.mp4">138</a> or <a href="http://www39.indowebster.com/c642413edca73d28287dfaf3292accf8.avi">138</a> : The End</li><li><a href="http://www44.indowebster.com/0662189a4ad5ac25a5cb66a323b8792c.mp4">137</a> or <a href="http://www55.indowebster.com/e7ccfeb93ae291f4891eeec2e532a879.mp4">137</a> : Amaterasu</li><li><a href="http://www58.indowebster.com/59a27dbf9998e3939323e12012f051a4.flv">136</a> : The Light & Dark of the Mangekyo Sharingan</li><li><a href="http://www58.indowebster.com/6a11bfb3642eeed87e774fa612e8fd5b.mkv">135</a> or <a href="http://www58.indowebster.com/000bd0179231acfe5014e2df1203b6f9.flv">135</a> : The Longest Moment! Sasuke vs. Itachi!!!</li><li><a href="http://www38.indowebster.com/e64f4ef7232c1aa40679290c191cd685.mp4">134</a> : Banquet Invitation</li><li><a href="http://www55.indowebster.com/9f3b8896ef4936c2a433d1d77883dbec.mp4">133</a> : The Tale of Jiraiya the Gallant</li><li><a href="http://www57.indowebster.com/37392e1d170b3595ef25b04f28aa5606.flv">132</a> or <a href="http://www4.indowebster.com/627f8f87d4ec0974e2ba4407e2a479c7.mkv">132</a> : The Six Paths of Pain</li><li><a href="http://tinypaste.com/5ceb2" target="_blank">131</a> : Honored Sage Mode</li><li><a href="http://www56.indowebster.com/82c91788b0dbea5a365dd275b401f10c.mp4">130</a> : The Man Who Became God</li><li><a href="http://www56.indowebster.com/948830971ab888144a3f8b12ab24f260.mp4">129</a> : Infiltrate! The Village Hidden in the Rain</li><li><a href="http://www54.indowebster.com/a9bd163abe5cf411973b8d2051a29f00.mkv">128</a> or <a href="http://www39.indowebster.com/b469e11e06492add0f4eb6b9ce904d37.avi">128</a> : Tales of a Gutsy Ninja: Jiraiya Ninja Scroll part 2<br /></li><li><a href="http://www54.indowebster.com/2ef26c5696875dd6baa117b742ad3a55.mkv">127</a> or <a href="http://www39.indowebster.com/7596738c9ba9e1aaebc526e1c4f8578e.avi">127</a> : Tales of a Gutsy Ninja: Jiraiya Ninja Scroll part 1</li><li><a href="http://www51.indowebster.com/e17af114fe2007e308d77611ae3e9ba5.mkv">126</a> : Dust</li><li><a href="http://www38.indowebster.com/2e008b9415e7f12f0a547eb2c1cc5d6e.mkv">125</a> or <a href="http://www51.indowebster.com/a7f0096e8c2733cc160acf8b12b108b0.mkv">125</a> : Disappearance</li><li><a href="http://www50.indowebster.com/206a98e0000caaac78931ddbf8e5467c.mkv">124</a> : Art</li><li><a href="http://www42.indowebster.com/fc7e00eba9d2f8273df061f51973af18.rar">123</a> or <a href="http://www51.indowebster.com/d7f8445ddcb355f27c3c749695c186b9.avi">123</a> : Clash!</li><li><a href="http://www49.indowebster.com/08feadfcf8e52beb44c513b6fec527a9.mp4">122</a> : The Hunt</li><li><a href="http://www46.indowebster.com/bbb4b826bae2abbf7e147ea81b58e049.mp4">121</a> : Assemble</li><li><a href="http://www48.indowebster.com/c9cd6cc2243697502e5d6391c044141a.mkv">119-120</a> or <a href="http://www47.indowebster.com/cb0c7628cfdf70ae250e50aa89a14af8.mp4">119-120</a> : Kakashi Chronicles - A Boy's Life on the Battlefield</li><li><a href="http://www42.indowebster.com/a82ad0f88984cfd1bcc9a071f2d382b4.mp4">118</a> : Formation!</li><li><a href="http://www39.indowebster.com/d8ec2689161256643753a96ba5bca108.avi">117</a> : Jugo of the North Hideout</li><li><a href="http://www45.indowebster.com/e952e0bcd1c7c05e93fde8ae8a0b5625.avi">116</a> or <a href="http://hotfile.com/dl/26024239/ee97b9f/Naruto_Shippuuden_116.rmvb.html">116</a> : Guardian of the Iron Wall</li><li><a href="http://www42.indowebster.com/cb70bd15bd654c7126501939993ff164.avi">115</a> or <a href="http://hotfile.com/dl/34093151/d514de0/NarutoShippuuden115.rmvb.html">115</a> : Zabuza's Blade</li><li><a href="http://www43.indowebster.com/dcd789f6739905af3962afe89ed977a8.mp4">114</a> or <a href="http://www44.indowebster.com/dc764b39a3d7feabeb2a4ae97addecc8.avi">114</a> or <a href="http://www44.indowebster.com/13a11e7ad3ca15aadd7e9b64e1522759.avi">114</a> or <a href="http://www42.indowebster.com/f94fd2ff888517350860f2dd4ffab106.rmvb">114</a> : Eye of the Hawk</li><li><a href="http://www42.indowebster.com/23f31d3cf55a88c789f2aa03643a0042.mp4">113</a> or <a href="http://hotfile.com/dl/34093337/33a9ca8/NarutoShippuuden113.rmvb.html">113</a> : The Serpents Pupil</li><li><a href="http://www40.indowebster.com/c4f9385bd4e433577527ef10a09b0378.avi">112</a> or <a href="http://hotfile.com/dl/34093575/91717ad/Naruto_Shippuuden112.rmvb.html">112</a> : A Place to Return to</li><li><a href="http://www40.indowebster.com/65c876359ce3ee8cc9321066fb9c6912.mp4">111</a> or <a href="http://hotfile.com/dl/36780214/3526487/NarutoShippuuden111.rmvb.html">111</a> : Shattered Promise</li><li><a href="http://www42.indowebster.com/7b4e5f82f8e2d32fd8158285de0aa39b.mp4">110</a> : Memory of Guilt</li><li><a href="http://www46.indowebster.com/6738a00446e6fa302bf5d756936653d2.mp4">109</a> : Counterattack of the Curse Mark</li><li><a href="http://www42.indowebster.com/9dc227d72f517dc4773d1b3d872b6e48.mp4">108</a> : Guidepost of the Camellia</li><li><a href="http://www36.indowebster.com/2fbafbccdc9c03c57ae3ddd6dfd5ba16.mp4">107</a> : Strange Bedfellows</li><li><a href="http://www40.indowebster.com/377fe27f5407b8d23220e53cbe02863e.flv">106</a> or <a href="http://hotfile.com/dl/34094426/28a809a/Naruto_Shippuuden_106.rmvb.html">106</a> : Red Camellia</li><li><a href="http://www41.indowebster.com/5bb57fc64e2b4785a666bceb3a5ea557.mp4">105</a> : Battle over the Barrier</li><li><a href="http://www41.indowebster.com/a54a5f99e6792a65c786686c0b4b04ef.mp4">104</a> : Crystal Style Destroyed</li><li><a href="http://www33.indowebster.com/a6790f84f2538c4fb6bd3f10c4a2f9b5.mp4">103</a> : The Four-Corner Sealing Barrier</li><li><a href="http://www36.indowebster.com/15c42ba2ff9a9cc3447e5e2da29b4831.mp4">102</a> or <a href="http://www35.indowebster.com/d7efe3883718d50c8125aba8f1c7053c.mp4">102</a> or <a href="http://www40.indowebster.com/eb415592efccc0f1b556dc8b39c41b8a.mkv">102</a> : Regroup!</li><li><a href="http://www33.indowebster.com/a46ba699cea1f204cb62c5fdab62c50c.mp4">101</a> or <a href="http://www45.indowebster.com/22856275e747dbe79c28f1bde11503cb.avi">101</a> : Everyone's Feelings</li><li><a href="http://www35.indowebster.com/408ba4e83726fa5ef5a803e1cb154c7a.mp4">100</a> : Inside the Mist</li><li><a href="http://www36.indowebster.com/12d4ce887782272a627d1ef57d7553e2.mp4">099</a> : Raging Tailed Beast</li><li><a href="http://www33.indowebster.com/0291078932a4f9a5149087822fd1a697.mp4">098</a> : The Target Appears</li><li><a href="http://www34.indowebster.com/28aa37f40c31c0a6ae0c73b23fc9054d.mp4">097</a> : The Labyrinth of Distorted Reflection</li><li><a href="http://www39.indowebster.com/afe23b96e06d1ee2e7b7cc973bced4aa.mp4">096</a> : The Unseeing Enemy</li><li><a href="http://www31.indowebster.com/6d633a7b1bb8184f9c7e849158899b4f.mp4">095</a> : The Two Charms</li><li><a href="http://www28.indowebster.com/a9014c8068cf6f6e5e38863a9a6959ac.mp4">094</a> or <a href="http://www5.indowebster.com/404486ca1feaae24f00ff8a01912c9f2.mkv">094</a> or <a href="http://www28.indowebster.com/2159a99cd9719423fd5b41feb9aff4e8.mkv">094</a> : A Night of Rain</li><li><a href="http://www41.indowebster.com/76d9b29d4b770ffab81a00430377ccac.mp4">093</a> : Communicating Hearts</li><li><a href="http://www41.indowebster.com/8cc1f452653599bcf5c35f34f094f4dd.mp4">092</a> : Encounter</li><li><a href="http://www27.indowebster.com/d442e584af62687f004ae09bd4a2f36d.mp4">091</a> : Orochimaru's Hideout Discovered</li><li><a href="http://www31.indowebster.com/bf17318aee586de1944630ab6791a089.avi">090</a> : A Shinobi's Determination</li><li><a href="http://www41.indowebster.com/d7079f13860749d9f672b878e562b113.mp4">089</a> or <a href="http://www19.indowebster.com/5196838b88d08fb8c402eb727085464b.avi">089</a> or <a href="http://www.enterupload.com/udn9y9icb0ff/Naruto_Shippuuden_89_%5Bcinema3satu%5D.mp4.html">089</a> or <a href="http://www28.indowebster.com/780fa892e3c280267dd64ca5e7982838.flv">089</a> : Compensation for Power</li><li><a href="http://www28.indowebster.com/4d15481f9ee3f0b7bae1530fc634d827.avi">088</a> or <a href="http://www27.indowebster.com/272a0789b26fdf2f04bff7691be164e0.avi">088</a> or <a href="http://www28.indowebster.com/a407b5684a46e28ba150ace71e849cd2.flv">088</a> : Wind Style: Spiraling Shuriken!</li><li><a href="http://www28.indowebster.com/577f93363158c9142d03cabcf0f01aaa.rmvb">086-087</a> or <a href="http://www4.indowebster.com/112573bf5de918a9060303ef082b10e9.avi">86-87</a> or <a href="http://www19.indowebster.com/2fa6390cd65d206082f6c776f17e90ca.avi">86-87</a> : Shikamaru's Genius</li><li><a href="http://www28.indowebster.com/d55d6ad0ebd6e00f965948f78d027f19.avi">085</a> : The Terrifying Secret</li><li><a href="http://www28.indowebster.com/61badb8a7bf1d71f16c8ed961b943875.avi">084</a> : Kakuzu's Abilities</li><li><a href="http://www4.indowebster.com/bd9c2da513edbe4ed27810e662612c60.avi">083</a> : Target: Locked On</li><li><a href="http://www27.indowebster.com/5e266a5dc11b1a2a74a15817b117a6b3.avi">082</a> : Team 10</li><li><a href="http://www4.indowebster.com/611c9afa60135a7c48f026e834892855.avi">081</a> : Sad News</li><li><a href="http://www27.indowebster.com/2bba8d9c390bfc2c9c7262a2effb59fc.avi">080</a> : Last Words</li><li><a href="http://www4.indowebster.com/4d2ca4bcf84246a95d51fb0e8ac94014.avi">078-079</a> : Given Judgment</li><li><a href="http://www4.indowebster.com/695053a712103e7566b86ab19100520f.zip">076-077</a> or <a href="http://www27.indowebster.com/a18938d96fb2b423106299835f9841e3.rm">076-077</a> : The Next Step</li><li><a href="http://www3.indowebster.com/28d250beefa9d2a4bedd69b398f90e79.mp4">075</a> : The Old Monk's Prayer</li><li><a href="http://www3.indowebster.com/85f59e670ccbf9c1d08348c3f8424fec.flv">074</a> : Under the Starry Sky</li><li><a href="http://www3.indowebster.com/516bf8cfca011f5392e84b77ccf90e04.avi">073</a> : Akatsuki's Invasion</li><li><a href="http://www36.indowebster.com/8de8c3c56b47c38deaa481a7a7999efd.avi">072</a> or <a href="http://www26.indowebster.com/cff00ea05bbb414dbbca031578c68a35.rmvb">072</a> : Silently Approaching Threat</li><li><a href="http://www25.indowebster.com/c462ecec006d2b7bfaf0c8cb23514602.avi">071</a> : Friend</li><li><a href="http://www36.indowebster.com/2dbac75d0cbbda634efcec063ddf6599.mp4">070</a> or <a href="http://www3.indowebster.com/d8b68a988dd319838322654aa0c6ac9f.avi">070</a> : Everyone's Struggle</li><li><a href="http://www42.indowebster.com/5146707176bae993567859db145b90ca.avi">068-069</a> : Time of Awakening</li><li><a href="http://www27.indowebster.com/ae7199d175ae03702b1e1a58a7f33b2c.avi">067</a> : Everyone's Struggle</li><li><a href="http://www45.indowebster.com/eee6d3b52fefe58a98e77898d1d0fc9b.mp4">066</a> : Revived Souls</li><li><a href="http://www.enterupload.com/yfohd88sjxm8/Naruto_Shippuuden_064-065_%5Bcinema3satu%5D.mp4.html">064-065</a> or <a href="http://www19.indowebster.com/cc7930359c39da7cc5e06fb1a871de62.avi">064-065</a> : Lockdown of Darkness<br /></li><li><a href="http://www17.indowebster.com/f109d34d885c756aaec90643633598a9.avi">063</a> : Two Kings</li><li><a href="http://www13.indowebster.com/f4983e51fbae8d9e287e76a4d00b571f.avi">062</a> or <a href="http://www13.indowebster.com/d2952b08d3e3dd29314e3f4de0912085.rmvb">062</a> : Teammate</li><li><a href="http://www13.indowebster.com/1182b33773b0ce0b838466f4aa2b168d.avi">061</a> : Contact</li><li><a href="http://www13.indowebster.com/169d11053a164b6f4a22f7215fa26365.avi">060</a> or <a href="http://www13.indowebster.com/cabf47205de5e066e387ada3fd634dbc.rmvb">060</a> : Mutability</li><li><a href="http://www12.indowebster.com/2044913ad85f6f68e4f8c7a84ca8b8fb.avi">059</a> or <a href="http://www13.indowebster.com/a8e6847d641af69df4d7408e40eb6999.rmvb">059</a> : A new enemy</li><li><a href="http://www12.indowebster.com/afa9be7c0b5ce3ed697042f3c6b2a530.avi">057-058</a> : Deprived of eternal sleep</li><li><a href="http://www11.indowebster.com/f2c3ab95ab2c18da904c55c0c613b628.avi">056</a> : Squirm</li><li><a href="http://www11.indowebster.com/18f1fda058de7e0820000edb9ee57960.avi">055</a> : Wind</li><li><a href="http://www8.indowebster.com/8eaef7c8e0637470e893c144d7c198b1.avi">054</a> : Nightmare</li><li><a href="http://www8.indowebster.com/1cbefa6bca3190560860ae2e2f7bbf76.avi">053</a> : Title</li><li><a href="http://www8.indowebster.com/deff089d77a125e10a4479462b0c885c.avi">051-052</a> : Reunion</li><li><a href="http://www8.indowebster.com/9ef92904dc48cf785dc3b6eda74771ee.avi">050</a> : Picturebook tells a story</li><li><a href="http://www11.indowebster.com/fae34f89019a2efeb1913d8a83ecfd5e.avi">049</a> : Something important</li><li><a href="http://www40.indowebster.com/7d81aff1603cdd3bb1efe3ea89eea231.mov">048</a> or <a href="http://www.megaupload.com/?d=3Z22R0FK">048</a> : Bonds</li><li><a href="http://www11.indowebster.com/f7558f18ccd50d0348b056a57ea15f64.avi">047</a> : Den of the poisonous snake</li><li><a href="http://www8.indowebster.com/31c95c039fb4e482cc33b4577c915c37.avi">046</a> : Unfinished page</li><li><a href="http://www5.indowebster.com/cce92d8978fcef46affc6d49fa298bc3.avi">045</a> : The results of betrayal</li><li><a href="http://www8.indowebster.com/0fdc4773b1a876397c56525d4cc43604.avi">044</a> : The circumstances of the fight</li><li><a href="http://www5.indowebster.com/c84beac15be668c7eba40ca67c2db85f.avi">043</a> : Sakura's Tears</li><li><a href="http://www8.indowebster.com/06461377f769a52e855f487247d887cd.mp4">042</a> or <a href="http://www5.indowebster.com/9e295334216cda5fc2a95d7085ab56e3.avi">042</a> : Orochimaru VS Jinchuriki</li><li><a href="http://www8.indowebster.com/9d7c27b8648fa6907b42ad96eca548b4.avi">040-041</a> : Kyubi Unleashed!!</li><li><a href="http://www8.indowebster.com/5043affc4587c44e26b14bea0e09fe47.avi">039</a> : The bridge of heaven and earth</li><li><a href="http://www8.indowebster.com/dbdc9ecab4b6a1abc214fa5b0198a2b2.avi">038</a> : Simulation</li><li><a href="http://www5.indowebster.com/98f0cfd71d5eb4bb6028bab8c23ae43b.avi">036-037</a> : A fake smile</li><li><a href="http://www5.indowebster.com/ca37970e33f8325e3f41d50b61a39ec6.avi">035</a> : An unnecessary action</li><li><a href="http://www8.indowebster.com/33fd130e821136c02b0e79e0d9b96db2.avi">034</a> : Formation! New Team Kakashi</li><li><a href="http://www8.indowebster.com/da03d8e66137c1114cf47a14ca1488a3.avi">033</a> : The new target</li><li><a href="http://www5.indowebster.com/14300c74ecc879347159639d75183168.avi">032</a> : Return of the Kazekage</li><li><a href="http://www5.indowebster.com/e3743ff893e3ac385ea20befed7f9476.avi">031</a> : The Inheritor</li><li><a href="http://www5.indowebster.com/91bac6da4ccbcf92284857899153a560.avi">029-030</a> : Kakashi enlightened!</li><li><a href="http://www5.indowebster.com/7bef327717dd67ad215acd503a69038c.avi">028</a> : The Revived Beasts</li><li><a href="http://www5.indowebster.com/1a0887308e30f34a25fcfec74e192ada.avi">027</a> : The Impossible Dream</li><li><a href="http://www5.indowebster.com/7503cf311ac5956ee5f9db129d6701ea.avi">026</a> : 10 Puppets vs 100 Puppets</li><li><a href="http://www5.indowebster.com/5d4e178bf5471401464aca2279913ed5.avi">025</a> : Three Minutes of Life and Death</li><li><a href="http://www5.indowebster.com/77834f1a4137a9241deb10b05faae36c.avi">024</a> : The Third Kazekage</li><li><a href="http://www5.indowebster.com/86bfed4f1b9d281bac7549818c0b97b9.avi">022-023</a> : Secret Skills</li><li><a href="http://www5.indowebster.com/c2813341c22f49fc14a1c8d61027eccf.avi">021</a> : Sasoris Real Face</li><li><a href="http://www5.indowebster.com/5e8f9509ea34ad0adf17e64036610dbb.avi">020</a> : Hiruko vs Two Kunoichi</li><li><a href="http://www5.indowebster.com/e6775ad4ea9e60e7a984eb87a8ab0cd2.avi">019</a> : Traps Activate! Team Guys Enemies</li><li><a href="http://www5.indowebster.com/ac52d42244d7dc0af603dc1f7772853b.avi">018</a> : Break In! Button Hook Entry</li><li><a href="http://www8.indowebster.com/7e44c07d5e03fc0766769878496ba39d.avi">017</a> : Gaara Dies!</li><li><a href="http://www5.indowebster.com/61040a344738448e5c2b33e90a4b44bc.avi">016</a> : The Secret of Jinchuriki</li><li><a href="http://www36.indowebster.com/98849109e839137e07da7918343a750e.avi">015</a> or <a href="http://www28.indowebster.com/8646c9def70eb03644adcb27bd560132.rmvb">015</a> : Hidden Sphere - It is Named...!</li><li><a href="http://www25.indowebster.com/a17d8d7935ac2bc79512b8303adb1f29.avi">014</a> : Naruto's Growth</li><li><a href="http://www3.indowebster.com/d98705c089d38cd887c442f41773a049.avi">013</a> : A Destined Meeting</li><li><a href="http://www25.indowebster.com/9b4ecdb04a27d43de323434946f39812.avi">012</a> : The Retired Old Lady's Determination</li><li><a href="http://www25.indowebster.com/16845b2da5908342b9c4d0d8d6682e9a.avi">011</a> : The Medical Ninja's Pupil</li><li><a href="http://www3.indowebster.com/339d60e1112e696f8b9e7a4c6b2759da.avi">010</a> : Illusionary Dragon Nine Seal</li><li><a href="http://www25.indowebster.com/459c1a2c88702cdbb2b98f6069c14317.avi">008-009</a> : Team Kakashi deployed</li><li><a href="http://www19.indowebster.com/ebcfacbb0b8aff2511084fee00d51237.rmvb">006-007</a> or <a href="http://www4.indowebster.com/0359a63943690e71e2c4e41852cfb4cf.avi">006-007</a> : Quota Cleared and Dash Kankuro</li><li><a href="http://www25.indowebster.com/7aebf5a3b7a96b5ac7efd51cb423c35e.avi">005</a> : As the Kazekage...!</li><li><a href="http://www5.indowebster.com/56a91d699921a58e3fc0a50d6784fc82.avi">004</a> : Jinchuriki of the Sand</li><li><a href="http://www8.indowebster.com/64fea04c6cbad3320c9947ecbeff691e.avi">003</a> : The Results of Training</li><li><a href="http://www5.indowebster.com/7b27e4511062185aa01faafcd16d6650.avi">001-002</a> : Homecoming</li></ul>BloG MOtarOhttp://www.blogger.com/profile/17946460676864843645noreply@blogger.com0tag:blogger.com,1999:blog-3981823669801843388.post-26591091967724651222010-05-24T20:48:00.000-07:002010-07-02T01:18:23.951-07:0070s Orgasm Club Persiapkan Album Baru<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.lalightsindiefest.com/materials/news/images/image_1555_246GNZo.jpg"rel="facebox">
<br /><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 222px;" src="http://www.lalightsindiefest.com/materials/news/images/image_1555_246GNZo.jpg" alt="" id="BLOGGER_PHOTO_ID_5484533350455173970" border="0" /></a>
<br />
<br />18 Mei 2010 - 09:00
<br /><p style="text-align: justify;">Siapa yang belum kenal kiranya dengan finalis LA. Lights Indie Fest yang satu ini, talenta bermusik individu–individu yang tergabung di dalamnya tentu tidaklah main–main dalam memproduksi sebuah rilisan musik.</p><div style="text-align: justify;"> </div><p style="text-align: justify;">Coba silahkan simak salah satu album kompilasi ´Science In Music: Album Kompilasi Siaga Bencana´ dari Lembaga Ilmu Pengetahuan Indonesia yang bekerjasama dengan PT Naif Cipta Kreatif dan Electrified Record, dimana band ini 70s Orgasm Club turut ambil bagian lewat salah satu single mereka di album tersebut bersama sejumlah band seperti Efek Rumah Kaca, Naif, Mocca, dan The Upstairs.</p><p style="text-align: justify;"><!--−−more−−--></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Nah tahun ini buat kamu yang sudah mengenal dengan baik 70s Orgasm Club dan rajin menyimak aksi–aksi band ini melalui performa tampilan maupun audio, bersiap–siap lah untuk menantikan album baru dari 70s Orgasm Club, karena di bulan ini mereka tengah sibuk mempersiapkan diri untuk merilis album baru.</p><p style="text-align: justify;">
<br /><!--−−more−−-->
<br /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Kabar baik ini nampaknya akan menjadi sesuatu yang sangat amat layak untuk dinantikan, nah pastikan kamu tetap menunggu kabar berikutnya dari studio rekaman perihal kapan materi album 70s Orgasm Club tersebut selesai dikerjakan dan siap edar, ini tentu akan menjadi keasyikan tersendiri untuk memburu album mereka di toko CD dan kaset paska rilisnya.
<br /></p><div style="text-align: justify;"> </div><p style="text-align: justify;">Sumber: myspace.com </p><div style="text-align: justify;"> Sumber gambar: myspace.com</div>
<br />
<br /><a href="http://motaroblog.blogspot.com/2010/05/70s-orgasm-club-persiapkan-album-baru.html" rel="prettySociable">Slide Panel</a>
<br />
<br /><a id='balonab' href='http://modification-blog.blogspot.com/' title=' <b>motaro blog</b> adalah teknologi blog populer yang dipelihara oleh <b><u><i>motaro</i></u></b>. Topik fokus pada web design, tutorial, blogger hack dan sumber inspirasi'>liat disini</a>BloG MOtarOhttp://www.blogger.com/profile/17946460676864843645noreply@blogger.com1tag:blogger.com,1999:blog-3981823669801843388.post-5077450532185651342010-05-24T20:36:00.001-07:002010-07-02T01:29:09.634-07:00Monkey To Millionaire Rilis Paket EP + T–Shirt ´Strange Is The Song In Our Conversation´<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.lalightsindiefest.com/materials/news/images/image_1557_59FMgkv.jpg"rel="ibox" title="monkey milioner"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 237px; height: 177px;" src="http://www.lalightsindiefest.com/materials/news/images/image_1557_59FMgkv.jpg" alt="" border="0" /></a><br /><p style="text-align: justify;">Paska album ´Lantai Merah´ dirilis, orang–orang dikalangan scene music independen maupun mainstream seolah berebut membicarakan album karya Monkey To Millionaire ini. Review di media besar pun mewarnai suksesnya album tersebut. </p><div style="text-align: justify;"> </div><p style="text-align: justify;">Dan seolah tak pernah kehabisan energi, band ini pun kini kembali menyiapkan sebuah kabar gembira melalui karya mereka selanjutnya. Monkey To Millionaire saat ini telah siap merilis EP ´Strange Is The Song In Our Conversation´. Hebatnya lagi EP ini hadir dalam bentuk paket menarik dengan merchandise kaos dari Monkey To Millionaire.</p><div style="text-align: justify;"> </div><p style="text-align: justify;">Dan seperti dikutip dari Sinjitosmerch.blogspot.com, Paket EP + T–Shirt ´Strange Is The Song In Our Conversation´ kini sudah bisa dipesan secara bebas. Tersedia dua desain t–shirt yang bisa dipilih sesuai gambar diatas. EP ini sendiri memuat tiga lagu yang sebelumnya belum pernah dirilis, ´Kembali Tenggelam´, ´Opini´, dan ´Memaksa Usia´.</p><div style="text-align: justify;"> </div><p style="text-align: justify;">Harga yang ditawarkan untuk paket menarik ini pun relatif murah, dengan harga Rp 75.000 kita sudah bisa mendapatkan kaos dengan desain menarik dan materi EP mereka. Tersedia dua desain berbeda dengan dua warna berbeda, merah dan putih. Ukuran yang disediakan ada S, M, L, dan XL. Dan bagi kalian yang memang menggemari Monkey to Millionaire buruan dapatkan paket menarik dari mereka ini, caranya kirimkan detail pribadi kamu (nama, alamat, nomor hp, alamat e–mail), barang yang dipesan (strange1 atau strange2), dan jumlah barang yang dipesan, ke m2m.strange@gmail.com. Semoga tidak kehabisan karena persediaan terbatas! [rsk]</p><div style="text-align: justify;"> </div><p style="text-align: justify;">Sumber: sinjitosmerch.blogspot.com<br />Sumber gambar: sinjitosmerch.blogspot.com </p>BloG MOtarOhttp://www.blogger.com/profile/17946460676864843645noreply@blogger.com0tag:blogger.com,1999:blog-3981823669801843388.post-76164670747292600632010-05-24T20:24:00.000-07:002010-05-24T20:25:57.911-07:00L.A INDIEFEST 2008<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.lalightsindiefest.com/images/v4/winner2008.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 472px; height: 619px;" src="http://www.lalightsindiefest.com/images/v4/winner2008.jpg" alt="" border="0" /></a><br /><table id="newspaper-a" border="0" cellpadding="5" cellspacing="0" width="90%"><tbody><tr><th><strong>NO</strong></th> <th><strong>NO PESERTA</strong></th> <th><strong>NAMA BAND</strong></th> <th><strong>JUDUL LAGU</strong></th> <th><strong>GENRE</strong></th> <th><strong>ASAL KOTA</strong></th> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'" onclick="location.href='bandprofile.php?bandID=190'"> <td>1</td> <td>JK-180</td> <td>Arcoirish</td> <td>Morning Moon</td> <td>Alternative Pop</td> <td>Jakarta</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'" onclick="location.href='bandprofile.php?bandID=419'"> <td>2</td> <td>BD-445</td> <td>C.U.T.S.</td> <td>FeuxJealousfeux</td> <td>Electropunk</td> <td>Bandung</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'" onclick="location.href='bandprofile.php?bandID=341'"> <td>3</td> <td>YK-226</td> <td>Lastelise</td> <td>A Thousand Miles From The Atmosphere</td> <td>Alternative</td> <td>Yogyakarta</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'" onclick="location.href='bandprofile.php?bandID=197'"> <td>4</td> <td>JK-466</td> <td>Morning Blue</td> <td>I Don't Care Anyway</td> <td>Alternative Pop</td> <td>Jakarta</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'" onclick="location.href='bandprofile.php?bandID=483'"> <td>5</td> <td>BD-412</td> <td>Nemesis</td> <td>About Eve</td> <td>Metal</td> <td>Bandung</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'" onclick="location.href='bandprofile.php?bandID=335'"> <td>6</td> <td>YK-214</td> <td>Sister Morphin</td> <td>Heaven Tonight</td> <td>Blues Jazz</td> <td>Magelang</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'" onclick="location.href='bandprofile.php?bandID=176'"> <td>7</td> <td>JK-140</td> <td>The Banery</td> <td>What I Said</td> <td>Rock N' Roll Alternative</td> <td>Depok</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'" onclick="location.href='bandprofile.php?bandID=431'"> <td>8</td> <td>BD - 053</td> <td>Tigapagi</td> <td>Menari</td> <td>Experimental Folk Acoustic</td> <td>Bandung</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'" onclick="location.href='bandprofile.php?bandID=427'"> <td>9</td> <td>BD - 450</td> <td>Vicky Vette</td> <td>Rodenstock</td> <td>Indie Rock/Experimental</td> <td>Bandung</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'" onclick="location.href='bandprofile.php?bandID=362'"> <td>10</td> <td>SBY-390</td> <td>Wai Rejected</td> <td>She Said She Was Beautiful</td> <td>Garage</td> <td>Malang</td> </tr> </tbody></table> BloG MOtarOhttp://www.blogger.com/profile/17946460676864843645noreply@blogger.com0tag:blogger.com,1999:blog-3981823669801843388.post-43754112648716884052010-05-24T20:21:00.000-07:002010-05-24T20:24:10.327-07:00L.A INDIEFEST 2007<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.lalightsindiefest.com/images/v5/winner2007.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 473px; height: 511px;" src="http://www.lalightsindiefest.com/images/v5/winner2007.jpg" alt="" border="0" /></a><br /><table id="newspaper-a" border="0" cellpadding="5" cellspacing="0" width="90%"><tbody><tr><th><strong>NO</strong></th> <th><strong>NAMA BAND</strong></th> <th><strong>JUDUL LAGU</strong></th> <th><strong>GENRE</strong></th> <th><strong>ASAL KOTA</strong></th> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"> <td>1</td> <td>Air Hostest for Vacation</td> <td>A Call To..</td> <td>Brit Experimental Rock</td> <td>Pekanbaru</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"> <td>2</td> <td>Cascade</td> <td>She Pretends</td> <td>Pop</td> <td>Bandung</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"> <td>3</td> <td>Cigarettes Nation</td> <td>Downtown Dogz</td> <td>Wonder Pop (Pop, Swing, Rock n Roll, Garage, 40s)</td> <td>Surabaya</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"> <td>4</td> <td>Heinrich Manuever</td> <td>Don't Blame It</td> <td>Post Punk</td> <td>Yogyakarta</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"> <td>5</td> <td>Lipgloss</td> <td>Mereka Sebut Timur</td> <td>Indie Pop</td> <td>Jakarta</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"> <td>6</td> <td>Monkey to Millionaire</td> <td>Rules & Policy</td> <td>Indie Rock/Alternative/Power Pop</td> <td>Jakarta</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"> <td>7</td> <td>Scared of Bums</td> <td>Boring</td> <td>Metal Melodic Core</td> <td>Denpasar</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"> <td>8</td> <td>Tunas Bangsa Simphony</td> <td>Love in Summer</td> <td>Twee Pop</td> <td>Purwokerto</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"> <td>9</td> <td>The Morning After</td> <td>Quatro</td> <td>Alternative Rock</td> <td>Malang</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"> <td>10</td> <td>Wind Cries Mary</td> <td>You;ve Got to Move On</td> <td>Glam Rock</td> <td>Bandung</td></tr></tbody></table>BloG MOtarOhttp://www.blogger.com/profile/17946460676864843645noreply@blogger.com0tag:blogger.com,1999:blog-3981823669801843388.post-90366505275403663432010-05-24T20:19:00.000-07:002010-05-24T20:21:50.756-07:00L.A INDIEFEST 2006<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.lalightsindiefest.com/images/content/winnerAnnouce.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 500px; height: 578px;" src="http://www.lalightsindiefest.com/images/content/winnerAnnouce.jpg" alt="" border="0" /></a><br /><table id="newspaper-a" border="0" cellpadding="5" cellspacing="0" width="90%"><tbody><tr><th><strong>NO</strong></th> <th><strong>NAMA BAND</strong></th> <th><strong>JUDUL LAGU</strong></th> <th><strong>GENRE</strong></th> <th><strong>ASAL KOTA</strong></th> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"> <td>1</td> <td>Hollywood Nobody</td> <td>Kiss The Pain Away</td> <td>Bossanova</td> <td>Bandung</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"> <td>2</td> <td>Vincent Vega</td> <td>Shane</td> <td>Art Rock</td> <td>Bandung</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"> <td>3</td> <td>The Rinos</td> <td>Beri Waktu Seminggu</td> <td>Oldies / Rock n Roll</td> <td>Bekasi</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"> <td>4</td> <td>C'Cord</td> <td>Choice</td> <td>Alternative</td> <td>Bandung</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"> <td>5</td> <td>Pegawai Negri</td> <td>You Can Take My Heart</td> <td>Indie Rock</td> <td>Bandung</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"> <td>6</td> <td>Dojihatori</td> <td>This Soul</td> <td>Brit Pop</td> <td>Yogyakarta</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"> <td>7</td> <td>Airport Radio</td> <td>Shattered Life</td> <td>Trip Hop</td> <td>Yogyakarta</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"> <td>8</td> <td>Key Kuno</td> <td>Cerita Esok Hari</td> <td>Pop Jazz & Fusion Soul</td> <td>Yogyakarta</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"> <td>9</td> <td>Gerbang</td> <td>Cerpen</td> <td>Pop Alternative</td> <td>Yogyakarta</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"> <td>10</td> <td>Vox</td> <td>I'll See You</td> <td>Folk Rock</td> <td>Surabaya</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"> <td>11</td> <td>70's Orgasm Club</td> <td>Peppermint, Insect</td> <td>Funk Soul Experience</td> <td>Bandung</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"> <td>12</td> <td>Lovely Tea</td> <td>Train</td> <td>Sweet Pop</td> <td>Surabaya</td> </tr> </tbody></table> BloG MOtarOhttp://www.blogger.com/profile/17946460676864843645noreply@blogger.com0tag:blogger.com,1999:blog-3981823669801843388.post-67285470791883485942010-05-24T20:05:00.000-07:002010-05-24T20:19:22.502-07:00L.A INDIEFEST 2009<h1 style="" class="section-title red sifr"><embed flashvars="txt=LA%20Lights%20Indiefest%20Top%2010&w=289&h=36&offsetLeft=0&offsetTop=0&textalign=center&textcolor=%23FF0000&linkColor=%23FF0000&hoverColor=%23FF0000&underline=null" pluginspage="http://www.adobe.com/go/getflashplayer" src="http://www.lalightsindiefest.com/script/sifr/stampete.swf" type="application/x-shockwave-flash" style="vertical-align: middle;" wmode="transparent" width="289" height="36"></embed></h1> <div style="text-align: center;"><a class="cboxelement" rel="pic" href="http://www.lalightsindiefest.com/images/v5/top10-2009.jpg"><img src="http://www.lalightsindiefest.com/images/v5/top10-2009.jpg" width="350" height="500" /></a></div> <p> </p> <table style="width: 504px; height: 281px;" id="newspaper-a" align="center" border="0" cellpadding="5" cellspacing="0"> <tbody> <tr><td style="vertical-align: top;">NAMA BAND<br /></td><td style="vertical-align: top;">NAMA KOTA<br /></td><td style="vertical-align: top;">JUDUL ALGU<br /></td></tr><tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'" onclick="location.href='top2009-detail.php?aID=306&cID=9'"> <td><a href="http://www.lalightsindiefest.com/top2009-detail.php?aID=306&cID=9">Gecko</a></td> <td>Bali</td> <td>It's Not My Time</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'" onclick="location.href='top2009-detail.php?aID=59&cID=6'"> <td><a href="http://www.lalightsindiefest.com/top2009-detail.php?aID=59&cID=6">Sandra</a></td> <td>Jakarta</td> <td>Movie Song</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'" onclick="location.href='top2009-detail.php?aID=124&cID=8'"> <td><a href="http://www.lalightsindiefest.com/top2009-detail.php?aID=124&cID=8">Dharma</a></td> <td>Yogyakarta</td> <td>Blues Gambus</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'" onclick="location.href='top2009-detail.php?aID=9&cID=7'"> <td><a href="http://www.lalightsindiefest.com/top2009-detail.php?aID=9&cID=7">Coffee Reggae Stones</a></td> <td>Bandung</td> <td>Demon</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'" onclick="location.href='top2009-detail.php?aID=319&cID=9'"> <td><a href="http://www.lalightsindiefest.com/top2009-detail.php?aID=319&cID=9">Psychofun</a></td> <td>Bali</td> <td>Satu</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'" onclick="location.href='top2009-detail.php?aID=240&cID=8'"> <td><a href="http://www.lalightsindiefest.com/top2009-detail.php?aID=240&cID=8">Black Stocking</a></td> <td>Yogyakarta</td> <td>This October</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'" onclick="location.href='top2009-detail.php?aID=227&cID=6'"> <td><a href="http://www.lalightsindiefest.com/top2009-detail.php?aID=227&cID=6">Arah</a></td> <td>Jakarta</td> <td>One Secret Place</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'" onclick="location.href='top2009-detail.php?aID=20&cID=6'"> <td><a href="http://www.lalightsindiefest.com/top2009-detail.php?aID=20&cID=6">Lars</a></td> <td>Jakarta</td> <td>Cukup Tau</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'" onclick="location.href='top2009-detail.php?aID=78&cID=8'"> <td><a href="http://www.lalightsindiefest.com/top2009-detail.php?aID=78&cID=8">Eiffel</a></td> <td>Yogyakarta</td> <td>Kau</td> </tr> <tr class="off" onmouseover="this.className='on'" onmouseout="this.className='off'" onclick="location.href='top2009-detail.php?aID=75&cID=7'"> <td><a href="http://www.lalightsindiefest.com/top2009-detail.php?aID=75&cID=7">Mortified</a></td> <td>Bandung</td> <td>Harapan Sirna</td> </tr> </tbody></table> <div id="right-container" class="grid_4"> </div> BloG MOtarOhttp://www.blogger.com/profile/17946460676864843645noreply@blogger.com0