Pop-up formulir kontak dengan Fancy Box dan Google Docs

  
Belum ada postingan lain mending saya posting yang ini.. apakah sobat pernah mengklik menu kontak saya diatas ini, mungkin yang belum pernah, pikirannya pasti biasa saja dengan formulir kontak saya ini, fomulir kontak ini harus dengan google docs  tapi mungkin bagi sobat yang memakai formulir kotak lain seperti kontactr dan lain lain supaya sobat nggak penasaran langsung aja sobat klik tombol demo di bawah.. CEKIDOT





untuk proses pembuatannya

  • loggin blogger.com > Rancangan > edithtml
  • cari kode ]]></b:skin> lalu pastekan kode berikut diatasnya

/*----------------------------------------------------
{--------}  FancyBox Css {--------}
----------------------------------------------------*/
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
height: 40px;
width: 40px;
margin-top: -20px;
margin-left: -20px;
cursor: pointer;
overflow: hidden;
background: transparent;
z-index: 1104;
display: none;
}
* html #fancybox-loading { /* IE6 */
position: absolute;
margin-top: 0;
}
#fancybox-loading div {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 480px;
background: transparent url('http://img192.imageshack.us/img192/2116/fancyloading.png') no-repeat;
}
#fancybox-overlay {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #000;
z-index: 1100;
display: none;
}
* html #fancybox-overlay { /* IE6 */
position: absolute;
width: 100%;
}
#fancybox-tmp {
padding: 0;
margin: 0;
border: 0;
overflow: auto;
display: none;
}
#fancybox-wrap {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 20px;
z-index: 1101;
display: none;
}
#fancybox-outer {
position: relative;
width: 100%;
height: 100%;
background: #FFF;
}
#fancybox-inner {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
padding: 0;
margin: 0;
outline: none;
overflow: hidden;
}
#fancybox-hide-sel-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
}
#fancybox-close {
position: absolute;
top: -15px;
right: -15px;
width: 32px;
height: 32px;
background: url('http://img842.imageshack.us/img842/2144/fancyclose.png') top left no-repeat;
cursor: pointer;
z-index: 1103;
display: none;
}
#fancybox_error {
color: #444;
font: normal 12px/20px Arial;
}
#fancybox-content {
height: auto;
width: auto;
padding: 0;
margin: 0;
}
#fancybox-img {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: none;
outline: none;
line-height: 0;
vertical-align: top;
-ms-interpolation-mode: bicubic;
}
#fancybox-frame {
position: relative;
width: 100%;
height: 100%;
border: none;
display: block;
}
#fancybox-title {
position: absolute;
bottom: 0;
left: 0;
font-family: Arial;
font-size: 12px;
z-index: 1102;
}
.fancybox-title-inside {
padding: 10px 0;
text-align: center;
color: #333;
}
.fancybox-title-outside {
padding-top: 5px;
color: #FFF;
text-align: center;
font-weight: bold;
}
.fancybox-title-over {
color: #FFF;
text-align: left;
}
#fancybox-title-over {
padding: 10px;
background: url('http://img12.imageshack.us/img12/9589/fancyleover.png');
display: block;
}
#fancybox-title-wrap {
display: inline-block;
}
#fancybox-title-wrap span {
height: 32px;
float: left;
}
#fancybox-title-left {
padding-left: 15px;
background: transparent url('http://img585.imageshack.us/img585/8411/fancyleleft.png') repeat-x;
}
#fancybox-title-main {
font-weight: bold;
line-height: 29px;
background: transparent url('http://img153.imageshack.us/img153/2938/fancylemain.png') repeat-x;
color: #FFF;
}
#fancybox-title-right {
padding-left: 15px;
background: transparent url('http://img218.imageshack.us/img218/4056/fancyleright.png') repeat-x;
}
#fancybox-left, #fancybox-right {
position: absolute;
bottom: 0px;
height: 100%;
width: 35%;
cursor: pointer;
outline: none;
background-image: url('http://img28.imageshack.us/img28/3097/blankfi.gif');
z-index: 1102;
display: none;
}
#fancybox-left {
left: 0px;
}
#fancybox-right {
right: 0px;
}
#fancybox-left-ico, #fancybox-right-ico {
position: absolute;
top: 50%;
left: -9999px;
width: 30px;
height: 30px;
margin-top: -15px;
cursor: pointer;
z-index: 1102;
display: block;
}
#fancybox-left-ico {
background: transparent url('http://img696.imageshack.us/img696/1174/fancynavleft.png') no-repeat;
}
#fancybox-right-ico {
background: transparent url('http://img860.imageshack.us/img860/8329/fancynavright.png') no-repeat;
}
#fancybox-left:hover, #fancybox-right:hover {
visibility: visible;    /* IE6 */
}
#fancybox-left:hover span {
left: 20px;
}
#fancybox-right:hover span {
left: auto;
right: 20px;
}
div.fancy-bg {
position: absolute;
padding: 0;
margin: 0;
border: 0;
z-index: 1001;
}
div#fancy-bg-n {
top: -20px;
left: 0;
width: 100%;
height: 20px;
background: transparent url('http://img827.imageshack.us/img827/1731/fancyshadown.png') repeat-x;
}
div#fancy-bg-ne {
top: -20px;
right: -20px;
width: 20px;
height: 20px;
background: transparent url('http://img692.imageshack.us/img692/4599/fancyshadowne.png') no-repeat;
}
div#fancy-bg-e {
top: 0;
right: -20px;
height: 100%;
width: 20px;
background: transparent url('http://img94.imageshack.us/img94/4260/fancyshadowe.png') repeat-y;
}
div#fancy-bg-se {
bottom: -20px;
right: -20px;
width: 20px;
height: 20px;
background: transparent url('http://img844.imageshack.us/img844/4558/fancyshadowse.png') no-repeat;
}
div#fancy-bg-s {
bottom: -20px;
left: 0;
width: 100%;
height: 20px;
background: transparent url('http://img3.imageshack.us/img3/8045/fancyshadows.png') repeat-x;
}
div#fancy-bg-sw {
bottom: -20px;
left: -20px;
width: 20px;
height: 20px;
background: transparent url('http://img580.imageshack.us/img580/118/fancyshadowsw.png') no-repeat;
}
div#fancy-bg-w {
top: 0;
left: -20px;
height: 100%;
width: 20px;
background: transparent url('http://img706.imageshack.us/img706/6925/fancyshadoww.png') repeat-y;
}
div#fancy-bg-nw {
top: -20px;
left: -20px;
width: 20px;
height: 20px;
background: transparent url('http://img20.imageshack.us/img20/2562/fancyshadownw.png') no-repeat;
}


  • oke kalau sudah mari ke step berikutnya
  • cari kode </head> dan pastekan kode berikut diatasnya

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="http://artistutorials.googlecode.com/files/jquery.fancybox-1.3.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#contact_form").fancybox({
'width'                : '75%',
'height'            : '75%',
'autoScale'         : false,
'transitionIn'        : 'none',
'transitionOut'        : 'none',
'type'                : 'iframe'
});

});
</script>     

warning >> jika template sobat sudah ada kode yang berwarna merah, sobat tidak perlu memasukkannya lagi


  • oke lanjut ke step akhir yaitu membuat kode pemangginya, sobat bisa letakkan di mana saja, di menu, sidebar,dll

ambil kode dari google docs yang seperti ini
https://spreadsheets.google.com/embeddedform?formkey=dGJDLXdRQkFrdC1KZThucEFicjljdWc6MQ

sobat tinggal menambahkannya jadi seperti ini

<a id="contact_form" href="https://spreadsheets.google.com/embeddedform?formkey=dGJDLXdRQkFrdC1KZThucEFicjljdWc6MQ">Contact me</a>

oke simpan, jika masih kurang jelas, anda bisa berkomentar di bawah.. atau menghubungi via facebook


Bagikan Artikel Ini ke: Facebook Twitter Google+ Linkedin Technorati Digg
Posted by Yuk Tawa, Published at 07.16 and have 18 komentar

18 komentar:

  1. Besoklah kucoba coy, mau bongkar template neh

    BalasHapus
    Balasan
    1. bongkar tu template..
      udah gak ajib lagi.. wkwkwk

      Hapus
    2. nih anwar cole asik bongkar trus
      wkwkwkkw

      Hapus
    3. biar in aja... lama lama kos nya di bongkar juga tu

      Hapus
  2. admin oyyy.. :( ane kapan nich ??

    BalasHapus
  3. Boleh juga nih fancy box formulir kontaknya,

    BalasHapus
    Balasan
    1. boleh lah coyy... biar gaya dikit.. wkakakaka

      Hapus
  4. gan.., tak coba yakk???
    oww yaa ., pengend liat demonya dulu gan!!!

    BalasHapus
    Balasan
    1. klik aja menu ane yang contact me

      Hapus
  5. nais gan ., coment here also http://archer.web.id/?p=139 thanks :D

    BalasHapus
  6. gan cara buat fancybox-nya gmn?

    BalasHapus