1. Log in to your dashboard--> Design- -> Edit HTML
2. Click on "Expand Widget Templates"
3. Search "Ctrl+F" and find </head> and before it paste the next code:
<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>
If you already have a Jquery script instaled on your template delete the line in red.
If you want to modify the width and height of the pop-up window modify the blue values.
4. Then find ]]></b:skin> and before it paste the next code:
/*----------------------------------------------------
{--------} 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;
}
5. Save the template.
OPTIONAL: If you want to host the image in the FancyBox Css yourself just download the archive from here:
6. When you created a contact form in Google docs ,it give you a link to form like this :
https://spreadsheets.google.com/embeddedform?formkey=dGJDLXdRQkFrdC1KZThucEFicjljdWc6MQ
Now ,what we need to do is add a link to pop-up contact form . Add this code to your template file where you need a 'contact me' link
<a id="contact_form" href="https://spreadsheets.google.com/embeddedform?formkey=dGJDLXdRQkFrdC1KZThucEFicjljdWc6MQ">Contact me</a>Change the red link to contact form in script above to your contact form link
Post a Comment