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 Unknown, Published at 07.16 and have 17 komentar