FancyBox Untuk Blogger

Fancybox Blogger

FancyBox adalah alat untuk menampilkan gambar, konten html dan multi-media dalam "lightbox" bergaya Mac yang mengapung dari halaman web. Ini sangatlah mudah digunakan dan membuat web benar-benar menjadi baik, terutama berhubungan dengan gambar.

Sebelumnya saya sudah perna menjelaskan Mengaktifkan maupun Menonaktifkan lightbox dari platfrom Blogger sendiri. Namun trik kali ini saya mengunuakan lightbox dari Fancybox ini bukan sebagai gambar saja melainkan sebagai Buku Tamu dan Menu Login Blogger. Anda bisa melihat DEMONYA. Oky untuk memulai cara menerapkannya di Blog berikut caranya.

1. Langka Pertama yang harus dilakukan adalah pergi Login di Blogger.com klik Template/Rancangan > Edit HTML
2. Cari Kode </head> masukan kode berikut tepat diatas kode </head>
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/> <script src='http://donor-ilmu.googlecode.com/files/fancybox-1.3.4.js' type='text/javascript'/> <link href='http://sites.google.com/site/donorilmu/default/fancybox-1.3.4.css' media='screen' rel='stylesheet' type='text/css'/> &lt;script type=&quot;text/javascript&quot;&gt; $(document).ready(function() {$(&quot;a[imageanchor=1]&quot;).fancybox({&#039;transitionIn&#039; : &#039;elastic&#039;,&#039;transitionOut&#039; : &#039;elastic&#039;,&#039;titlePosition&#039; : &#039;over&#039;,&#039;overlayColor&#039; : &#039;#000000&#039;,&#039;overlayOpacity&#039; : 0.9,&#039;titleFormat&#039; : function(title, currentArray, currentIndex, currentOpts) {return &#039;&lt;span id=&quot;fancybox-title-over&quot;&gt;Image &#039; + (currentIndex + 1) + &#039; / &#039; + currentArray.length + (title.length ? &#039; &amp;nbsp; &#039; + title : &#039;&#039;) + &#039;&lt;/span&gt;&#039;;}});$(&quot;#login&quot;).fancybox({&#039;titlePosition&#039; : &#039;inside&#039;,&#039;transitionIn&#039; : &#039;elastic&#039;,&#039;transitionOut&#039; : &#039;elastic&#039;});$(&quot;a.fancy&quot;).fancybox({&#039;width&#039; : &#039;75%&#039;,&#039;height&#039; : &#039;75%&#039;,&#039;autoScale&#039; : false,&#039;transitionIn&#039; : &#039;elastic&#039;,&#039;transitionOut&#039; : &#039;elastic&#039;,&#039;type&#039; : &#039;iframe&#039;});});&lt;/script&gt;
3. Klik Save Template

Sampai di sini proses pemasangan script Fancybox di template Blogger Anda telah selesai. Langkah selanjutnya adalah penerapan efek pemangil Fancybox dari sebuah link.

• Buku Tamu
  

  <a class="fancy" href="ALAMT-BUKU-TAMU">Buku Tamu</a>

  Ganti teks biru dengan alamat Buku Tamu anda, Misalnya "http://www5.shoutmix.com/?bandungnuaing"
  (Bukan buku tamu saja yang bisa di panggil, anda bisa juga membuat banyak link iframe asalkan diantara link pembuka <a class="fancy" her="...."> terdapat script class="fancy".)
  
  
  
• Menu Login Blogger
  

  <a id="login" href="#login1">Login</a>
  <div style="display: none;">
  <div id="login1" style="width:400px;height:252px;overflow:auto;">
  <form action='https://www.google.com/accounts/ServiceLoginAuth' id='gaia_loginform' method='get' onsubmit='return(gaia_onLoginSubmit();'>
  <p>
  <label>E-mail :<br />
  <input type="text" name="Email" id="Email" class="input" value="" size="20" tabindex="4" /></label>
  </p>
  <p>
  <label>Password :<br />
  <input type="password" name="Passwd" id="Passwd" class="input" value="" size="20" tabindex="5" /></label>
  
  </p>
  <p class="forgetmenot"><label><input id='PersistentCookie' name='PersistentCookie' tabindex='7' type='checkbox' value='1'/> Remember Me</label></p>
  <p class="submit">
  <input type="submit" class="button-primary" value="Log In" tabindex="6" />
  </p>
  </form>

Oky sekian untuk keterangan lebih lanjut silakan mampir ke Fancybox.net. Terima kasih, selamat mencoba, dan semoga bermanfaat

Read more »

Koleksi Style Buku Tamu

Banyak sekali sekarang Buku Tamu dengan berbagai gaya dan fitur seperti Melayang (kanan, kiri, bawah, atas), Sembunyi, Folting, Tanpa di Klik Terbuka Sendiri? dan masi banyak lagi. Semuanya bagus-bagus, namun dari beberapa Buku Tamu yang saya temukan ini sudah tren di kalangan para blogger.

Floating Kanan	Floating Kiri
<style type="text/css">#gb{position:fixed;top:50px;z-index:+1000;}* html #gb{position:relative;}.gbtab{height:100px;width:30px;float:left;cursor:pointer;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1jDBL4YlNOOIAPnu96QbKzJEAweg1CQ69Y0MQVwaP5eDwECWAXLMDKuTSyaUErz7p54UKjY_89hLBQ7uNF242Z5Ijnac7g-GhjAgn80b30p_eBydSR_rx1vhO5AbfoIOpoqoU8Dkq6m-S/') no-repeat;}.gbcontent{float:left;border:2px solid #A5BD51;background:#F5F5F5;padding:10px;}</style><script type="text/javascript">function showHideGB(){var gb = document.getElementById("gb");var w = gb.offsetWidth;gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);gb.opened = !gb.opened;}function moveGB(x0, xf){var gb = document.getElementById("gb");var dx = Math.abs(x0-xf) > 10 ? 5 : 1;var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;gb.style.right = x.toString() + "px";if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}}</script><div id="gb"><div class="gbtab" onclick="showHideGB()"> </div><div class="gbcontent"><!-- Ganti ini dengan kode buku tamu kamu --><div style="text-align:right"><a href="javascript:showHideGB()">[tutup]</a></div></div></div><script type="text/javascript">var gb = document.getElementById("gb");gb.style.right = (30-gb.offsetWidth).toString() + "px";</script>	<style> #hcl { position:fixed; top:50px; left:20px; z-index:+500; } * html #hcl {position:relative;} .hcltab { height:200px; width:35px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4p0khRH_7Sj783-9-7Xq2WcSrBwbTtvfLAtwlFfcgpHnetqqq9hIs_bTzx4bA6Iu5yl6JCy0Y1IURQOQJcqQv4kf473t9wvqrv129t3cjoNE645XvB0ugNW8vBCUAQwzFPMcjf3xVvF0i/s1600/tabs.png') no-repeat; } .hclcontent { float:left; border:2px solid #A5BD51; background:#F5F5F5; padding:3px; } .hc-credit {font-size:9px} .hc-credit a {text-decoration:none} </style> <script type="text/javascript"> function showHidehcl(){ var hcl = document.getElementById("hcl"); var w = hcl.offsetWidth; hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0); hcl.opened = !hcl.opened; } function movehcl(x0, xf){ var hcl = document.getElementById("hcl"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hcl.style.left = x.toString() + "px"; if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);} } </script> <div id="hcl"> <div class="hclcontent"> &lt;!-- Ganti ini dengan kode buku tamu kamu --&gt;<br /> <div class="hc-credit"> <span style="float:left"> <!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE --> </span> <span style="float:right"> <a href="javascript:showHidehcl()"> [close] </a> </span> </div> </div> <div class="hcltab" onclick="showHidehcl()"> </div> <script type="text/javascript"> var hcl = document.getElementById("hcl"); hcl.style.left = (30-hcl.offsetWidth).toString() + "px"; </script></div>
Flash	Slide
<style type="text/css">.gb_fixed{position:fixed; top:60px; right:0px; z-index:+10}* html .gb_fixed {position:relative;}#hidden_gb2{display:none; background:transparent; padding:10px; padding-top:10px; border:1px solid #ccc; -moz-border-radius-topleft:30px; -moz-border-radius-bottomright:30px; transform:rotate(-5deg); -moz-transform:rotate(-5deg); -webkit-transform:rotate(-5deg); -o-transform:rotate(-5deg)}#hidden_gb2:hover{background:url("http://i55.tinypic.com/8x1xlt.gif") no-repeat scroll 0 0; background-position:top center; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg)}</style><div class="gb_fixed"><table cellpadding="0" cellspacing="0" id="hidden_gb2"><tbody><tr><td><div><a href="javascript:void(0)" onclick="gb_showHideGB()"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLWT456MuSL7QOCHrwQmGrowVSfg7vpVUGfKWGSMCu4V-ga5Bwabk8RbK85rplQa1GoMPEWDfgkKXZ2cPnOYVpsbBs9gieNT7pbBXV7IPlQ1pbYM4QUpOhnbtoIRZRA9r6F4ELik1IN968/s1600/CloseButtonHot.bmp" /></a></div><!-- Ganti ini dengan kode buku tamu kamu --></td></tr></tbody></table></div><script src="http://donor-ilmu.googlecode.com/files/floating.js"></script><div class="gb_fixed" style="z-index: +5;"><a href="javascript:void(0)" onmouseover="gb_showHideGB()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBkubpka7C4_msQbHU4bNOv6lgFfxKU60jlfySt9CcgxihQ6IQfOsSf7kvMm7YCOax1hze2V0s2jHVRW7QVYo2g07z8-eOMbzeBdwB6xP16nsbGM8j3nyWGplYY3pqGeuHphCx0fDwhR2P/s1600/chatbox.png" style="filter: alpha(opacity=60); opacity: 0.6;" /></a> </div>	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){$(".btn-slide").click(function(){$("#panel").slideToggle("slow");$(this).toggleClass("active"); return false;});});</script><style>/* ---------------Simple Slide panel with jQuery---------------------------------- */#panel {height: auto;background: #f90;width: auto;display: none;padding: 7px;border: #0C0;-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-topleft:10px;-webkit-border-top-left-radius:10px;-moz-border-radius-bottomleft:10px;-webkit-border-bottom-left-radius:10px;}.slide {margin: 0;padding: 0;border-top: solid 4px #f90;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMUV0wPKNugQntzTWBirpWe3zF2y8_HF40nXO8447WirdWHrQLTQiAZkR2NFWAn95UnzoBomE_y_zCqGTtd42qysNctO21kW_WUloGb6wr0Gme00mN9vg8OXrkfFNhogxrJHnVxrtxXtw/s1600/btn-slide.png) no-repeat center top;}.btn-slide {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirhXmBVdBzOuRKHR5m-y8mMP_AmIl_T3MK4xOOC4vvNqO25vMCBLpoBiwpgtJj1Qg4KcNVeeToi8BY9Mr15UhJ7nw2s219OWl0btxMCrgqAUXLpr4jmyIYxEjrLglyynE5gzsH0mUGFqg/s1600/white-arrow.gif) no-repeat right -50px;text-align: center;width: 144px;height: 31px;padding: 10px 10px 0 0;margin: 0 auto;display: block;font: bold 120%/100% Arial, Helvetica, sans-serif;color: #fff;text-decoration: none;}.active {background-position: right 12px;}</style><div id="panel"><!-- Ganti ini dengan kode buku tamu kamu --></div><p class="slide"><a href="#" class="btn-slide">Buku Tamu</a></p>

Cara memasangnya di blog anda sangatlah mudah cukup ikuti langka berikut

1. Login di Blogger.com, Klik Layout





2. Klik Tambah Gadget, Pilih HTML/JavaScript





3. Masukan Kodenya, Ganti Script
   

   <!-- Ganti ini dengan kode buku tamu kamu -->

   Dengan Kode Buku Tamu anda, Klik Simpan

Read more »