Sunday, February 28, 2010

Modifikasi Tampilan Followers

Anda bosan dengan tampilan followers yang hanya seperti itu ajah, atau anda sudah memodifikasinya. Nah kali ini saya ingin sedikit memberikan triks bagai mana memodifikasi tampilan followers. Untuk demonya lihat dibawah ini.
[[ Follow This Blog ! ]] 72 Followers has join

>> Click To View

Untuk membuat tampilan followers seperti diatas tinggal ikuti langkah-langkah berikut ini :
  • Masuk ke Layout - Tambah Laman - HTML/Javascript, lalu masukan kode dibawah ini.
  • <center><a href="http://www.blogger.com/follow-blog.g?blogID=ID Blog anda" target="_blank">[[ Follow This Blog ! ]]</a><br /><br />72 Followers has join <br /><p> <a href="http://www.blogger.com/manage-followers.g?blogID=ID Blog anda" target="_blank">>> <b><u>Click To View</u></b></a><br /></p></center>
Untuk tulisan yang berwarna hijau bisa anda ganti, sedangkan yang berwarna merah atau blog-ID bisa anda lihat di address bar browser anda. [Sumber] nah semoga bermanfaat ya.. selamat mencoba..

Friday, February 26, 2010

Script Anti Klik Kanan.

Untuk sekedar jaga-jaga, bagi anda yang artikelnya sering di copy paste namun tidak mencantumkan sumbernya pasti merasa kesal juga ya. Nah postingan kali ini saya ingin memberikan sedikit tips bagaimana artikel atau postingan kita tidak bisa di copy alias klik kanan, trik kali ini bener-bener sama sekali ga bisa klik kanan dan juga ga bisa mem-blok artikel atau postingan anda.
Keuntungan dari script kali ini adalah :
1. Anti Right Click
2. Anti Return Key
3. Anti Enter Key
4. Anti Block Text
5. Anti Numeric Key
6. Anti Alpanumeric Key
7. Anti Key Combination
8. Anti Function Key
9. Anti Ctrl + Alt Key
10. Anti Power Key
11. Anti Sleep Key
12. Anti WakeUp Key
13. Anti Home Key
14. Anti Insert Key
15. Anti Tab Key
16. Anti Capslock Key
17. Anti Shift Key
Untuk memulainya anda tinggal ikuti saja langkah-langkah berikut ini :
  • Seperti biasa backup terlebih dahulu template anda.
  • Setelah itu Layout - Edit HTML.
  • Cari kode </head>, lalu masukan kode berikut ini diatasnya.
  • <script type="text/javascript"> var message="Maaf, Klik Kanan Saat Ini Saya Disable"; /////////////////////////////////// function clickIE4(){if (event.button==2){alert(message);return false;}} function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}} if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedo wn=clickNS4;} else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;} document.oncontextmenu=new Function("alert(message);return false") if (typeof document.onselectstart!="undefined") { document.onselectstart=new Function ("return false"); } else{ document.onmousedown=new Function ("return false"); document.onmouseup=new Function ("return true"); } var isnn,isie if(navigator.appName=='Microsoft Internet Explorer') //check the browser { isie=true } if(navigator.appName=='Netscape') { isnn=true } function right(e) //to trap right click button { if (isnn && (e.which == 3 || e.which == 2 )) return false; else if (isie && (event.button == 2 || event.button == 3)) { alert("Maaf, klik kanan tidak di izinkan! Gunakan klik tengah"); return false; } return true; } function key(k) { if(isie) { if(event.keyCode==17 || event.keyCode==18 || event.keyCode==93) { alert("Maaf, kami mendeteksi anda sedang membajak") return false; } } if(isnn){ alert("MAAF!!, DISINI PEMBAJAK DILARANG MEMENCET TOMBOL KEYBOARD") return false; } } if (document.layers) window.captureEvents(Event.KEYPRESS); document.onkeydown=key; </script>

Selain kelebihanna itu script ini juga terdapat kelemahan yaitu, blog kita bakalan sepi pengunjungnya akibat tidak bisa mengcopy script yang terdapat dipostingan dengan maksud ingin mempraktekkannya.[sumber] nah semoga bermanfaat ya.. selamat mencoba..

Thursday, February 25, 2010

jQuery: Coda-Slider 1.1.1

Untuk demonya silakan klik disini
  1. coda-slider.1.1.1.js
  2. jquery-easing-compatibility.1.2.pack.js
  3. jquery-easing.1.2.pack.js
  4. jquery-1.2.1.pack.js
  5. body-bg.png
  6. arrow-right.gif
  7. arrow-left.gif
  8. ajax-loader.gif
Download file diatas, lalu upload ketempat hosting anda. Selanjutnya kita akan bermain dengan htmlnya, ikuti langkah-langkah berikut ini :
  1. Seperti biasa backup terlebih dahulu template anda.
  2. Setelah itu cari kode </head>, lalu letakkan script berikut ini di atasnya.
  3. <script src="alamat jquery-1.2.1.pack.js" type="text/javascript"></script> <script src="alamat jquery-easing.1.2.pack.js" type="text/javascript"></script> <script src="alamat jquery-easing-compatibility.1.2.pack.js" type="text/javascript"></script> <script src="alamat coda-slider.1.1.1.js" type="text/javascript"></script>
  4. Lalu tambahkan juga kode yang ini.
  5. <style type="text/css"> * { margin: 0; padding: 0 } /* I've used a hard CSS reset above, but you should consider a more sophisticated reset, such as this one: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */ p { text-align: left; margin: 15px 0 } p, ul { font-size: 13px; line-height: 1.4em } p a, li a { color: #39c; text-decoration: none } p.intro { border-bottom: 1px solid #ccc; margin-bottom: 20px; padding: 20px 0 30px 0; text-align: center; width: 100% } p#cross-links { text-align: center } p#cross-links { border-bottom: 1px solid #ccc; margin-bottom: 30px; padding-bottom: 30px } noscript p, noscript ol { color: #a00; font-size: 13px; line-height: 1.4em; text-align: left } noscript a { color: #a00; text-decoration: underline } noscript ol { margin-left: 25px; } a:focus { outline:none } img { border: 0 } h3 { border-bottom: 1px solid silver; margin-bottom: 5px; padding-bottom: 3px; text-align: left } body { font-family: Verdana, Arial; background: #ebebeb url("alamat body-bg.png") repeat-y center; color: #000; width: 800px; margin: auto; text-align: center; padding-bottom: 20px; } .stripViewer .panelContainer .panel ul { text-align: left; margin: 0 15px 0 30px; } .slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */ margin: 20px 0; position: relative; width: 100%; } /* These 2 lines specify style applied while slider is loading */ .csw {width: 100%; height: 460px; background: #fff; overflow: scroll} .csw .loading {margin: 200px 0 300px 0; text-align: center} .stripViewer { /* This is the viewing window */ position: relative; overflow: hidden; border: 5px solid #000; /* this is the border. should have the same value for the links */ margin: auto; width: 700px; /* Also specified in .stripViewer .panelContainer .panel below */ height: 460px; clear: both; background: #fff; } .stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS */ position: relative; left: 0; top: 0; width: 100%; list-style-type: none; /* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */ } .stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */ float:left; height: 100%; position: relative; width: 700px; /* Also specified in .stripViewer above */ } .stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */ padding: 10px; } .stripNav { /* This is the div to hold your nav (the UL generated at run time) */ margin: auto; } .stripNav ul { /* The auto-generated set of links */ list-style: none; } .stripNav ul li { float: left; margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */ } .stripNav a { /* The nav links */ font-size: 10px; font-weight: bold; text-align: center; line-height: 32px; background: #c6e3ff; color: #fff; text-decoration: none; display: block; padding: 0 15px; } .stripNav li.tab1 a { background: #60f } .stripNav li.tab2 a { background: #60c } .stripNav li.tab3 a { background: #63f } .stripNav li.tab4 a { background: #63c } .stripNav li.tab5 a { background: #00e } .stripNav li a:hover { background: #333; } .stripNav li a.current { background: #000; color: #fff; } .stripNavL, .stripNavR { /* The left and right arrows */ position: absolute; top: 230px; text-indent: -9000em; } .stripNavL a, .stripNavR a { display: block; height: 40px; width: 40px; } .stripNavL { left: 0; } .stripNavR { right: 0; } .stripNavL { background: url("alamat arrow-left.gif") no-repeat center; } .stripNavR { background: url("alamat arrow-right.gif") no-repeat center; } </style> <!-- Initialize each slider on the page. Each slider must have a unique id --> <script type="text/javascript"> jQuery(window).bind("load", function() { jQuery("div#slider1").codaSlider() // jQuery("div#slider2").codaSlider() // etc, etc. Beware of cross-linking difficulties if using multiple sliders on one page. }); </script>
    Ganti tulisan yang berwarna merah dengan alamat hostingan anda.
  6. Save Template anda terlebih dahulu.
  7. Masuk ke Layout, dan Tambah Laman, setelah itu masukan kode dibawah ini
  8. <h2>Coda-Slider 1.1.1</h2> <div class="slider-wrap"> <div id="slider1" class="csw"> <div class="panelContainer"> <div class="panel" title="Panel 1"> <div class="wrapper"> <h3>Panel 1</h3> <p>Coda-Slider v1.1.</p> <p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p> <p><a href="#5" class="cross-link" title="Go to Panel 5">&#171; Previous</a> | <a href="#2" class="cross-link" title="Go to Panel 2">Next &#187;</a></p> </div> </div> <div class="panel" title="Panel 2"> <div class="wrapper"> <h3>Panel 2</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p> <p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p> <p><a href="#1" class="cross-link" title="Go to Panel 1">&#171; Previous</a> | <a href="#3" class="cross-link" title="Go to Panel 3">Next &#187;</a></p> </div> </div> <div class="panel" title="Panel 3"> <div class="wrapper"> <h3>Panel 3</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p> <p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p> <p><a href="#2" class="cross-link" title="Go to Panel 2">&#171; Previous</a> | <a href="#4" class="cross-link" title="Go to Panel 4">Next &#187;</a></p> </div> </div> <div class="panel" title="Panel 4"> <div class="wrapper"> <h3>Panel 4</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p> <p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p> <p><a href="#3" class="cross-link" title="Go to Panel 3">&#171; Previous</a> | <a href="#5" class="cross-link" title="Go to Panel 5">Next &#187;</a></p> </div> </div> <div class="panel" title="Panel 5"> <div class="wrapper"> <h3>Panel 5</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p> <p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p> <p><a href="#4" class="cross-link" title="Go to Panel 4">&#171; Previous</a> | <a href="#1" class="cross-link" title="Go to Panel 1">Next &#187;</a></p> </div> </div> </div> </div> </div> <p id="cross-links"> Same-page cross-link controls:<br /> <a href="#1" class="cross-link">Panel 1</a> | <a href="#2" class="cross-link">Panel 2</a> | <a href="#3" class="cross-link">Panel 3</a> | <a href="#4" class="cross-link">Panel 4</a> | <a href="#5" class="cross-link">Panel 5</a> </p>
    Untuk tulisan yang berwarna hijau bisa anda ganti sesuai keinginan anda, sedangkan yang berwarna biru bisa dipasang atau dihapus.
nah semoga bermanfaat ya.. selamat mencoba..