Friday, 31 August 2012

5 Stylish Newsletter Forms


Every blogger wants a good newsletter template for their newsletter just like me and with help of Google Docs even peoples who are using Blogger as their blogging platform can also create their own newsletter.

All newsletter are image-based forms which are created on a image with HTML and CSS and looks really amazing.



<style type="text/css">
#WC-Newsletter1-Box {
    background: url(http://4.bp.blogspot.com/-YL316LAsD9U/UEEicRMg7tI/AAAAAAAALSo/huvi3XqnnIo/s1600/Newsletter-1.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 264px;
}
form#WC-Newsletter1-Form {
    display: block;
    margin: 0;
    padding-left: 71px;
    padding-top: 63px;
}
form#WC-Newsletter1-Form #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 21px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 160px;
    outline:0px;
}
form#WC-Newsletter1-Form #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 21px;
    padding-right: 45px;
    position: relative;
    left: 92px;
    top: 28px;
    width: 35px;
}

</style>
<div id="WC-Newsletter1-Box">
    <form id="WC-Newsletter1-Form" action="#" method="post">
        <input type="email" id="s" name="email" value="Enter Your E-Mail"
        onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/>
        <input type="image" src="http://3.bp.blogspot.com/-D4DL8TMRtd0/UCuQt-AVn3I/AAAAAAAAJz8/K1sjzXIxyQk/s1600/blank.gif" id="sbutton"/>
    </form>
</div>



<style type="text/css">
#WC-Newsletter2-Box {
    background: url(http://3.bp.blogspot.com/-HpHwkouqhho/UEEidW-KuJI/AAAAAAAALSw/ezxs40Pqyzg/s1600/Newsletter-2.png)no-repeat scroll center center transparent;
    height: 142px;
    width: 300px;
}
form#WC-Newsletter2-Form {
    display: block;
    margin: 0;
    padding-left: 71px;
    padding-top: 63px;
}
form#WC-Newsletter2-Form #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: -6px;
    padding-left: 2px;
    vertical-align: top;
    width: 270px;
    outline:0px;
    position: relative;
    left: -57px;
}
form#WC-Newsletter2-Form #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 32px;
    position: relative;
    left: 107px;
    top: 13px;
    width: 111px;
}

</style>
<div id="WC-Newsletter2-Box">
    <form id="WC-Newsletter2-Form" action="#" method="post">
        <input type="email" id="s" name="email" value="Enter Your E-Mail"
        onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/>
        <input type="image" src="http://3.bp.blogspot.com/-D4DL8TMRtd0/UCuQt-AVn3I/AAAAAAAAJz8/K1sjzXIxyQk/s1600/blank.gif" id="sbutton"/>
    </form>
</div>



<style type="text/css">
#WC-Newsletter3-Box {
    background: url(http://1.bp.blogspot.com/-kJo_v4W6Qto/UEEie4wT7XI/AAAAAAAALS4/OgZfjp9e2o4/s1600/Newsletter-3.png)no-repeat scroll center center transparent;
    height: 230px;
    width: 355px;
}
form#WC-Newsletter3-Form {
    display: block;
    margin: 0;
    padding-left: 71px;
    padding-top: 63px;
}
form#WC-Newsletter3-Form #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 118px;
    vertical-align: top;
    width: 235px;
    outline:0px;
    position: relative;
    left: -35px;
}
form#WC-Newsletter3-Form #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 32px;
    position: relative;
    left: 206px;
    top: -31px;
    width: 55px;
    border-radius: 0px 25px 25px 0px;
}

</style>
<div id="WC-Newsletter3-Box">
    <form id="WC-Newsletter3-Form" action="#" method="post" >
        <input type="email" id="s" name="email" value="Enter Your E-Mail"
        onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/>
        <input type="image" src="http://3.bp.blogspot.com/-D4DL8TMRtd0/UCuQt-AVn3I/AAAAAAAAJz8/K1sjzXIxyQk/s1600/blank.gif" id="sbutton"/>
    </form>
</div>



<style type="text/css">
#WC-Newsletter4-Box {
    background: url(http://4.bp.blogspot.com/-Y-vF5-bSEro/UEEighPucII/AAAAAAAALTA/DDi0Mk_gEa8/s1600/Newsletter-4.png)no-repeat scroll center center transparent;
    height: 311px;
    width: 349px;
}
form#WC-Newsletter4-Form {
    display: block;
    margin: 0;
    padding-left: 71px;
    padding-top: 63px;
}
form#WC-Newsletter4-Form #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 37px;
    vertical-align: top;
    width: 235px;
    outline:0px;
    position: relative;
    left: 43px;
}
form#WC-Newsletter4-Form #d {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 22px;
    vertical-align: top;
    width: 235px;
    outline:0px;
    position: relative;
    left: 43px;
}
form#WC-Newsletter4-Form #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 28px;
    position: relative;
    left: 179px;
    top: 41px;
    width: 90px;
}

</style>
<div id="WC-Newsletter4-Box">
    <form id="WC-Newsletter4-Form" action="#" method="post">
        <input id="d" name="name" value="Enter Your Name"
        onfocus='if (this.value == "Enter Your Name") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your Name";}'/>
        <input type="email" id="s" name="email" value="Enter Your E-Mail"
        onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/>
        <input type="image" src="http://3.bp.blogspot.com/-D4DL8TMRtd0/UCuQt-AVn3I/AAAAAAAAJz8/K1sjzXIxyQk/s1600/blank.gif" id="sbutton"/>
    </form>
</div>



<style type="text/css">
#WC-Newsletter5-Box {
    background: url(http://1.bp.blogspot.com/-65PvPzNlUCo/UEEijEFGUdI/AAAAAAAALTI/5UGflvDEMJ8/s1600/Newsletter-5.png)no-repeat scroll center center transparent;
    height: 299px;
    width: 408px;
}
form#WC-Newsletter5-Form {
    display: block;
    margin: 0;
    padding-left: 71px;
    padding-top: 63px;
}
form#WC-Newsletter5-Form #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 37px;
    vertical-align: top;
    width: 275px;
    outline:0px;
    position: relative;
    left: -25px;
}
form#WC-Newsletter5-Form #d {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 38px;
    vertical-align: top;
    width: 275px;
    outline:0px;
    position: relative;
    left: -25px;
}
form#WC-Newsletter5-Form #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 43px;
    position: relative;
    left: -36px;
    top: 25px;
    width: 144px;
    border-radius: 5px;
}

</style>
<div id="WC-Newsletter5-Box">
    <form id="WC-Newsletter5-Form" action="#" method="post">
        <input id="d" name="name" value="Enter Your Name"
        onfocus='if (this.value == "Enter Your Name") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your Name";}'/>
        <input type="email" id="s" name="email" value="Enter Your E-Mail"
        onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/>
        <input type="image" src="http://3.bp.blogspot.com/-D4DL8TMRtd0/UCuQt-AVn3I/AAAAAAAAJz8/K1sjzXIxyQk/s1600/blank.gif" id="sbutton"/>
    </form>
</div>



If any got some cool form images like this then please post them in comment below and i might add them in some next posts..... :)

5 Amazing CSS3 Contact Us Forms


Original creator and form source CSS Globe and all credits goes to them i'am just sharing with you guys , visit their website for more awesome stuff including this forms. So these forms looks truly beautiful and professional ( Thanks to CSS Globe ) so here we go with CSS:

CSS :

<style>
/* form 1 */
#form1{
margin:1em 0;
                width:600px;
padding-top:10px;
background:url(http://2.bp.blogspot.com/-0D1kOCGraFs/UEBjnfiwR0I/AAAAAAAALO4/FadI0qwtlEQ/s1600/form_top.gif) no-repeat 0 0;
}
#form1 fieldset{
margin:0;
padding:0;
border:none; float:left;
display:inline;
width:260px;
margin-left:25px;
} #form1 legend{display:none;} #form1 p{margin:.5em 0;} #form1 label{display:block;} #form1 input, #form1 textarea{ width:252px;
border:1px solid #ddd;
background:#fff url(http://2.bp.blogspot.com/-sARC36qAi0E/UEBjmuczLOI/AAAAAAAALO0/wN4bFj_5T4I/s1600/form_input.gif) repeat-x;
padding:3px;
                outline:0px;
} #form1 textarea{
height:125px;
overflow:auto;
                outline:0px;
} #form1 p.submit{
clear:both;
background:url(http://4.bp.blogspot.com/-dtvdGVL1sUw/UEBjjalqHpI/AAAAAAAALOk/mqkhYzq73Gg/s1600/form_bottom.gif) no-repeat 0 100%;
padding:0 25px 20px 25px;
margin:0;
text-align:right;
} #form1 button{
width:150px;
height:37px;
line-height:37px; border:none;
background:url(http://2.bp.blogspot.com/-X7JKOjxk5vs/UEBjl0YloiI/AAAAAAAALOs/LHXj1wck3YE/s1600/form_button.gif) no-repeat 0 0;
color:#fff;
cursor:pointer;
text-align:center;
}
/* // form 1 */

/* form 2 */
#form2{
margin:1em 0;
color:#fff;
width:320px; /* customize width, this form have fluid layout */
}
#form2 h3{
margin:0;
background:#57a700 url(http://4.bp.blogspot.com/-G6jgJT0eD2A/UEBkATZTnAI/AAAAAAAALPI/DbLLWpvtk7s/s1600/form_heading.gif) repeat-x; color:#fff;
font-size:20px;
border:1px solid #57a700;
border-bottom:none;
} #form2 h3 span{
display:block;
padding:10px 20px;
background:url(http://3.bp.blogspot.com/-xjy5ID0ZeNs/UEBkA3QSd1I/AAAAAAAALPQ/SRghHgLxPws/s1600/form_ico.gif) no-repeat 93% 50%; } #form2 fieldset{
margin:0;
padding:0;
border:none; border-top:3px solid #000;
background:#000 url(http://2.bp.blogspot.com/-bYM4lMdduoM/UEBkCc2zW3I/AAAAAAAALPg/AWUHZrKS8KU/s1600/form_top.gif) repeat-x; padding-bottom:1em;
} #form2 legend{display:none;} #form2 p{margin:.5em 20px;} #form2 label{display:block;} #form2 input, #form2 textarea{ width:272px;
border:1px solid #111;
background:#282828 url(http://3.bp.blogspot.com/-mq5WKJKvlLY/UEBkBjwWJjI/AAAAAAAALPY/g7qFI_CRoZw/s1600/form_input.gif) repeat-x;
padding:5px 3px;
                outline:0px;
color:#fff;
} #form2 textarea{
height:125px;
overflow:auto;
                outline:0px;
} #form2 p.submit{
text-align:right;
} #form2 button{
padding:0 20px;
height:32px;
line-height:32px; border:1px solid #70ad2e;
background:#5aae00 url(http://3.bp.blogspot.com/-Ei0R4Sg_8zk/UEBj_uQ0UFI/AAAAAAAALPE/D2D3Rj2jEqg/s1600/form_button.gif) repeat-x;
color:#fff;
cursor:pointer; text-align:center; }
/* // form 2 */
/* form 3 */
#form3{
margin:1em 0;
background:url(http://3.bp.blogspot.com/-h1hoVvqbaTw/UEBk6gi-OSI/AAAAAAAALQA/_-WaXG-ckl4/s1600/form_bg.jpg) no-repeat 0 0;
width:542px;
height:364px; /* fixed size (envelope graphic) */
overflow:hidden;
}
#form3 h3{display:none;} #form3 fieldset{
margin:0;
padding:0;
border:none; float:left;
display:inline;
width:200px;
margin-left:34px;
padding-top:80px;
} #form3 fieldset.last{
width:254px;
margin-left:17px;
} #form3 legend{display:none;} #form3 p{margin:.5em 0;} #form3 label{display:block;} #form3 input, #form3 textarea{ width:192px;
border:1px solid #ddd;
background:#fff url(http://4.bp.blogspot.com/-p9_enfJAP0U/UEBk8e_P0nI/AAAAAAAALQM/o8h3V_f6iYQ/s1600/form_input.gif) repeat-x;
padding:3px;
                outline:0px;
} #form3 textarea{
width:246px;
height:200px;
overflow:auto;
                outline:0px;
} #form3 p.submit{
margin:0 34px;
clear:both;
position:relative;
} #form3 button{
padding:0;
position:absolute;
left:0;
top:-3.5em;
width:95px;
height:36px;
text-indent:-8000px;
overflow:hidden;
border:none;
background:url(http://1.bp.blogspot.com/-l6MSvZZN3Wg/UEBk7bxuQOI/AAAAAAAALQI/DbZBz5r6HdE/s1600/form_button.gif) no-repeat 0 0;
color:#fff;
cursor:pointer;
}
/* // form 3 */
/* form 4 */
#form4{
margin:1em 0;
padding-top:1.5em;
color:#246878;
width:350px; /* customize width, this form have fluid layout */
background:#fbfaf4 url(http://1.bp.blogspot.com/-GEbcEFdLZm8/UEBlYlvJQnI/AAAAAAAALQY/uCYG1VZGIQ0/s1600/form_bg.gif) repeat-y; }
#form4 h3{
margin:0 20px;
height:28px;
text-indent:-8000px;
background:url(http://1.bp.blogspot.com/-bT-TwQJb-jU/UEBlaZ6KDHI/AAAAAAAALQo/9jv8FE6fFdU/s1600/form_heading.gif) no-repeat 0 0; } #form4 fieldset{
margin:0;
padding:0;
border:none; padding-bottom:1em;
} #form4 legend{display:none;} #form4 p{margin:.5em 20px;} #form4 label{display:block;} #form4 input, #form4 textarea{ width:302px;
border:1px solid #dfdfdf;
background:#fff;
                outline:0px;
padding:5px 3px;
} #form4 textarea{
height:125px;
                outline:0px;
overflow:auto;
} #form4 p.submit{
text-align:right;
} #form4 button{
margin:0;
padding:0;
text-indent:-8000px;
overflow:hidden;
width:88px;
height:56px;
border:none;
background:url(http://4.bp.blogspot.com/-mjeqHAGvxQw/UEBlZXxoA3I/AAAAAAAALQg/mpQV5iDwdAc/s1600/form_button.gif) no-repeat 0 0;
cursor:pointer;
text-align:left;
}
/* // form 4 */

/* form 5 */
#form5{
margin:1em 0;
padding-top:10px;
}
#form5 fieldset{
margin:0;
padding-top:.5em;
border:none; border-top:1px solid #f1f1f1;
} #form5 legend{
background:#fff;
padding:0 5px;
font-style:italic;
} #form5 p{
clear:both;
margin:.5em 0;
overflow:hidden;
} #form5 label{
float:left;
width:60px;
display:block;
text-align:right;
margin-right:10px;
} #form5 input, #form5 textarea{ margin:0; width:250px;
                outline:0px;
border:1px solid #ddd; padding:3px 5px 3px 25px;
} #form5 input#name{background:#fff url(http://4.bp.blogspot.com/-NM0doyerS-g/UEBl4hR2bjI/AAAAAAAALRA/uqslooN0RSw/s1600/form_name.gif) no-repeat 5px 50%;}
#form5 input#email{background:#fff url(http://2.bp.blogspot.com/-QpZy5KIQwE4/UEBl2NcTCCI/AAAAAAAALQ4/hkxq9uFqJP8/s1600/form_email.gif) no-repeat 5px 50%;}
#form5 input#web{background:#fff url(http://2.bp.blogspot.com/-1Xy0y_ktDrg/UEBl6Y-t0dI/AAAAAAAALRM/pROxy4_5eBY/s1600/form_url.gif) no-repeat 5px 50%;}
#form5 textarea#message{background:#fff url(http://2.bp.blogspot.com/-5QAVbpECQr0/UEBl5bkQb1I/AAAAAAAALRI/unfOLRn-438/s1600/form_note.gif) no-repeat 5px 6px;}
#form5 textarea{
height:125px;
                outline:0px;
overflow:auto;
} #form5 p.submit{
clear:both;
margin:1em 0;
padding:.5em 70px;
border-top:1px solid #f1f1f1; } #form5 button{
height:28px;
line-height:28px; border-top:1px solid #999;
border-left:1px solid #999;
border-right:1px solid #333;
border-bottom:1px solid #333;
background:url(http://4.bp.blogspot.com/-oHBZPLJ9PdU/UEBl1NTsMII/AAAAAAAALQw/EFy0LPBw998/s1600/form_button.gif) no-repeat;
padding:0 10px 0 25px;
color:#333;
cursor:pointer;
text-align:left;
font-size:11px;
font-weight:bold;
}
/* // form 5 */
</style>

 Just post above CSS in your blog's CSS or on your HTML document now below is HTML markup :

<form id="form1/2/3/4/5" action="/" method="post">
<fieldset><legend>Contact form</legend>
<p class="first">
<label for="name">Name</label>
<input type="text" name="name" id="name" size="30" />
</p>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" size="30" />
</p>
<p>
<label for="web">Website</label>
<input type="text" name="web" id="web" size="30" />
</p>
<p>
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
</p>
<p class="submit"><button type="submit">Send</button></p>
</fieldset>
</form>

Post above HTML in your document and with if form1 /form2 /form3 /form4 or form5 because every id has different form style.

Thursday, 30 August 2012

Creating A Simple jQuery Lightbox


Creating your own Lightbox is not that hard maybe it'll not be that advanced my it could be like above image and today in this article i'am gonna teach you about it. Full tutorial is jQuery and CSS3 based and creating a simple lightbox is not that hard.

First add a jQuery script in your document :

<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.js"> </script>

After adding jQuery we're going to add CSS in our document

<style type="text/css">
#lightbox{
display:none;
background: rgba(0,0,0,0.5);
opacity:0.5;
filter:alpha(opacity=90);
position:fixed;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
#lightbox-panel{
display:none;
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
width:400px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
box-shadow: 2px 10px 50px rgba(0, 0, 0, 0.2);
z-index:1001;
}
#close-panel{
position: absolute;
top: -15px;
right: -15px;
}
</style>

In above CSS #Lightbox is our lightbox background , #Lightbox-panel is our lightbox and #Close-panel is our lightbox close button.

Z-index of #lightbox-panel should be more than #lightbox otherwise your lightbox will appear under background.Now time to add JavaScript which will give you control to open or close lightbox :

<script type="text/javascript">
$(document).ready(function(){
 $("a#show-panel").click(function(){
    $("#lightbox, #lightbox-panel").fadeIn(300);
 })
 $("a#close-panel").click(function(){
     $("#lightbox, #lightbox-panel").fadeOut(300);
 })
 $("div#lightbox").click(function(){
     $("#lightbox, #lightbox-panel").fadeOut(300);
 })
})
</script>

In javascript there are the snippets first one opens the lightbox , second one closes it when you on close button and third button closes it when you click outside/background of lightbox and we're almost done with this just have to add HTML now :

<a id="show-panel" href="#">Show Panel</a>
<div id="lightbox-panel">
    <h2>Your Lightbox Title</h2>
    <p>Lightbox Content.</p>
<a id="close-panel" href="#"><img src="http://4.bp.blogspot.com/-aLUQlvqrDF4/UDpnMmMt6PI/AAAAAAAAK7U/gJxsmojyoGs/s1600/fancy_close.png" /></a>
</div>
<div id="lightbox"> </div>

So <a id="show-panel" href="#">Show Panel</a> is button which will open the lightbox and <div id="lightbox-panel">...All Crap.. </div> is our lightbox and we have to add our content in it , <a id="close-panel".........</a> is our close button and in last <div id="lightbox"> </div> is our lightbox background.

Here's a preview how it'll look in your browser :

Show Panel

You can also add images in lightbox-panel. Below is full document code :

<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.js">
</script>
<style type="text/css">
#lightbox{
display:none;
background: rgba(0,0,0,0.5);
opacity:0.5;
filter:alpha(opacity=90);
position:fixed;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
#lightbox-panel{
display:none;
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
width:400px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
box-shadow: 2px 10px 50px rgba(0, 0, 0, 0.2);
z-index:1001;
}
#close-panel{
position: absolute;
top: -15px;
right: -15px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
 $("a#show-panel").click(function(){
    $("#lightbox, #lightbox-panel").fadeIn(300);
 })
 $("a#close-panel").click(function(){
     $("#lightbox, #lightbox-panel").fadeOut(300);
 })
 $("div#lightbox").click(function(){
     $("#lightbox, #lightbox-panel").fadeOut(300);
 })
})
</script>
<a id="show-panel" href="#">Show Panel</a>
<div id="lightbox-panel">
    <h2>Lightbox Panel</h2>
    <p>Woo Woo Woo You Know It.</p>
<a id="close-panel" href="#"><img src="http://4.bp.blogspot.com/-aLUQlvqrDF4/UDpnMmMt6PI/AAAAAAAAK7U/gJxsmojyoGs/s1600/fancy_close.png" /></a>
</div>
<div id="lightbox"> </div>

Like this then please comment and tell us your opinions.

Hosting Your JS Files On Google Code



Main problem of using Blogger as your blog platform is hosting because Blogger don't offer files hosting (Except Images and Videos ) . So today i'am gonna show you how to host your .js files on Google Code and it's 100% free. And also in next tutorials i'am also gonna teach you how to host your CSS and HTML files on Google Code which is way different then this. Let's get started :
  • Go To Google Code > Click On 'Create A New Project' > Fill The Form Just Like Below
In Version Control System choose SubVersion and Source Code license will be Mozilla Public License 1.1 and fill other fields as you want now time for next step :
  • Now Go To Source > Browse > Choose either Create or Upload option as you prefer and create/upload your JS script.
Now after upload/creating this page will appear :

Right click and copy raw file url which will look something like this http://your-project-name.google.com/svn/your-file-name.js and it's your js file url now you can use this in your widgets or projects.

Having any problem then please leave a comment :)

Learn More: How To Host HTML And CSS Files On Google Code

Wednesday, 29 August 2012

Social Subscribing Pop Up Widget For Blogger - Version 3.0


Earlier this month i posted two facebook like box pop up widgets and first one with timer and second with cache . Best part about this one is that this one is created by me and i'am the original creator of this widget and it contain more options like subscribe , tweet and social media links.

This one also contain cache so you can control how often it appear to your users and with our widget generator it's too easy to generate this :


 Like this then please post what we should add or remove in next widget of this series..... :)

Create A Privacy Policy For Your Blog


As Google have changed the Terms and Conditions of their Adsense program, one of the requirements now is that all Adsense publishers should have a "Privacy Policy" on their websites.

You must have and abide by an appropriate privacy policy that clearly discloses that third parties may be placing and reading cookies on your user’s browser, or using web beacons to collect information, in the course of ads being served on your website. Your privacy policy should also include information about user options for cookie management.

You can read more about the DoubleClick DART Cookie on the following link ... https://www.google.com/adsense/support/bin/answer.py?answer=100557&sourceid=aso

Now you can create privacy policy for your blog/site with our Privacy Policy Generator (For Google AdSense Publishers)

Monday, 27 August 2012

Amazing Email Subscription Form For Blogger


First of all this widget is created by MBT and i'am just posting it all credits goes to those guys Thanks. It's a great widget with a beautiful form and some round social media icons. I was thinking about to add widget generator to make it easy but it would be little crappy so here we go :
  • Go To Blogger > Layout > Add A Gadget > HTML/Java Script
  • Paste following code :
<style>
.tbisubscribe {
border: 1px solid #D3D3D3;
padding: 8px;
width: 300px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbisubscribe:hover {
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.tbimailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbisubmit {
font: bold 12px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #ff5714;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 8px 15px;
cursor: pointer;
margin: 0 auto;
}
.tbisubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.tbisubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<div class='tbisubscribe'>
<div style='color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;'>Get Free Updates in your Inbox</div>
<div style='margin: 10px 0 0 6px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'
method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=WidgetCraft&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='WidgetCraft' />
<input name='loc' type='hidden' value='en_US' />
<input class='tbimailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}'
onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}'
type='text' value='Enter your email...' />
<input alt='' class='tbisubmit' title='' type='submit' value='Subscribe'/>
</form>
</div>
<div style='border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;'>Follow us on:</div>
<div style='margin: -32px 0 0 120px;'>
<a href='FACEBOOK URL' target='_blank' title='Join us on Facebook'><img src='http://1.bp.blogspot.com/-7BFnvcwztPI/UDvPdyfwRdI/AAAAAAAALEI/JIvOf_6qVvs/s1600/facebook500.png' alt='facebook'/></a>
<a href='TWITTER URL' rel='nofollow' target='_blank'
title='Follow us on Twitter'><img src='http://4.bp.blogspot.com/-whgSYuUXFK4/UDvPif88foI/AAAAAAAALEk/o1h9AQUEN48/s1600/twitter.png' alt='twitter'/></a>
<a href='GOOGLE+ URL' rel='nofollow' target='_blank'
title='Follow us on Google+'><img src='http://3.bp.blogspot.com/-CKC8VpnLV4E/UDvPe3F-JeI/AAAAAAAALEM/CfdjTmmDbHU/s1600/googleplus-revised.png' alt='gplus'/></a>
<a href='PINTEREST URL' rel='nofollow' target='_blank'
title='Follow us on Pinterest'><img src='http://1.bp.blogspot.com/-W-z8yV2MJAo/UDvPgCvvFaI/AAAAAAAALEU/EM36zCqtyNE/s1600/pinterest.png' alt='pinterest'/></a>
<a href='RSS URL' rel='nofollow' target='_blank'
title='Subscribe to RSS'><img src='http://3.bp.blogspot.com/-0kc9eDAEfVY/UDvPhDm2DuI/AAAAAAAALEg/xTrMT70Lutw/s1600/rss.png' alt='rss'/></a>
</div>
</div>
Now just replace WidgetCraft with your feed id and RSS URL and all social media URLs with your profile URLs

Having any problems then leave a comment.....

How To Track Google Adsense Payment Check


Most of bloggers including me use Google Adsense to monetize their blog and earn some cash for their good work , Once your monthly earning reached to $100, Google sends the money through check on your name. Sometimes it takes a bit longer to received your check but it's not a matter if worrying because i'am gonna tell you how to track your Adsense payment check.
  • Just log in to your Adsense account
  • Enter 'my account payment history'
  • Click on the detail link of your payment
  • You can now see all of your account history payment and even the last month.
  • If you can see 'Payment Issued' then it’s on the way.
  • Note down 'Payment Number'
Here is an example of your payment statement :

According to above model of payment statement 063333333 is our Payment Number and now it's time to track it :
  • Now “Select the shipment type” and “Enter your tracking number” that you have noted before.
  • Choose Ref No. and enter your payment number after removing first '0' from it and press Go.
You can track your payment 4-5days after it was issued from Google. It took 15days for me too track my first payment so be patient and try to track daily because some times it took a little bit.

Here is an example of what you'll find after entering your Payment No.:



Tracking Payment With Waybill Number :

You can also track your payment with your Waybill number, You'll receive your waybill number after approx 15days.All Indian payments comes from Hyderabad so it takes i little bit time.

Reason for Adsense Payment Delay :

There may be many reasons why your adsense payment has been delayed. The main reason could be wrong address. In that case bluedart immediately return the check to Google. It does happen if you are receiving your first adsense check. If it happens with you, then you can Request for reissue adsense check payment. You have to wait for at list 2 weeks to get your earning credited back on your account.

I would suggest you to use bluedart location finder to find whether their service is available in your area or not. So that you can easily contact them before they return your check to Google. 

FaceBox Lightbox For Blogger


FaceBox is a facebook style pop-up for images and some inline content on your blog and html documents. Installing this lightbox in your blog is way to much easy and quick.It's jquery lightbox which works perfectly in blogger and here are instruction to install this :
  • First Go To Blogger > Template > Edit HTML > Search For </head>
  • Post below script just above </head> 
<style>
#facebox {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  text-align: left;
}
#facebox .popup{
  position:relative;
  border:3px solid rgba(0,0,0,0);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -webkit-box-shadow:0 0 18px rgba(0,0,0,0.4);
  -moz-box-shadow:0 0 18px rgba(0,0,0,0.4);
  box-shadow:0 0 18px rgba(0,0,0,0.4);
}
#facebox .content {
  display:table;
  padding: 10px;
  background: #fff;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
#facebox .content > p:first-child{
  margin-top:0;
}
#facebox .content > p:last-child{
  margin-bottom:0;
}
#facebox .close{
  position:absolute;
  top:5px;
  right:5px;
  padding:2px;
  background:#fff;
}
#facebox .close img{
  opacity:0.3;
}
#facebox .close:hover img{
  opacity:1.0;
}
#facebox .loading {
  text-align: center;
}
#facebox .image {
  text-align: center;
}
#facebox img {
  border: 0;
  margin: 0;
}
#facebox_overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  height:100%;
  width:100%;
}
.facebox_hide {
  z-index:-100;
}
.facebox_overlayBG {
  background-color: #000;
  z-index: 99;
}
</style>
  <script src="http://widcraft.googlecode.com/svn/jquery.js" type="text/javascript"></script>
  <script src="http://widcraft.googlecode.com/svn/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
      $('a[rel*=facebox]').facebox({
        loadingImage : 'http://1.bp.blogspot.com/-8J9myvMK1qA/UDu3RmJPh8I/AAAAAAAALCA/B6tyvv7b3jA/s1600/loading.gif',
        closeImage   : 'http://2.bp.blogspot.com/-j7EwXzGdA4A/UDu3QerJAhI/AAAAAAAALB4/VuQp_bMnR6s/s1600/closelabel.png'
      })
    })
</script>
That's all above installing it to blogger now you have to learn above adding this effect to your inline content and images....first start with images

Images :

To add facebox in your images just add rel="facebox" in your image code , example :
<a href="Image URL" rel="facebox"><img src="Image URL"/></a>
Inline Content :

Just like images in inline content just add rel="facebox" in your inline code , example :
<a href="#info" rel="facebox">View the 'info' div in the Facebox</a>
<div id="info" style="display:none;">
    <p> Hey, I'm the 'info' div! </p>
    <p> I look like this: </p>
    <code>
      &lt;div id="info" style="display:none;"&gt; <br>
        &nbsp;&nbsp;text<br>
      &lt;/div&gt;
    </code>
  </div>
I know it was way to much simple so add it and if you like this then please leave a comment.....

Sunday, 26 August 2012

Creating Forum In Blogger


Forums are for your visitors and you to discuss and connect with each other but blogger doesn't have any forum options so it's time for us to get an option. We will use Google Groups to create an amazing forum for our blog. Here is a live example of it.
  • Click on 'New Group'

Time to create our first group....
  • No fill down the 'Create Group' form and in Group Type select Q&A Forum

Now you group/forum is created now it's time to embed it on Blogger
  • On Your Group> Go To Group Settings > Scroll Down And Copy Embedding HTML

Now we're done with Google Groups but stay in this page and edit your forum a little bit . Invite friends , add tags and all basic forums stuff and after that add it to blogger :
  • Go To Blogger > Create A New Page > Paste Embedding HTML Of Your Forum
Now all you have to do is change height and width of HTML code and publish your page and it's all done. Maybe it's better than any other types of web forums ?

Blogger Keyboard Shortcuts



List of blogger post editor keyboard shoutcuts...

Keyboard Shortcuts Function
CTRL + Z To Undo
CTRL + X To Cut
CTRL + C To Copy
CTRL + V To Paste
CTRL + B To Bold
CTRL + A To Select All
CTRL + S To Auto Save and Keep editing
CTRL + D To Save as Draft
CTRL + F To Find a Word or Phrase
CTRL + G Indic Transliteration
CTRL + Y To Redo
CTRL + U To Underline
CTRL + I Change To Italic
CTRL + K To Insert Hyperlink

FancyBox Lightbox For Blogger


FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page.

Features :
  • Can display images, HTML elements, SWF movies, Iframes and also Ajax requests
  • Customizable through settings and CSS
  • Groups related items and adds navigation.
  • Support fancy transitions by using easing plugin
  • Adds a nice drop shadow under the zoomed item
  • Also works in all type of HTML documents
Well you all know that i'am a huge Light Box fan and this one is totally amazing so time to show you how to add this :
  • Go To Blogger > Template > Edit HTML
  • Find </head> and post following script just above it :
<script src="http://widcraft.googlecode.com/svn/jquery.js" type="text/javascript">
 </script>
 <script src="http://widcraft.googlecode.com/svn/jquery.fancybox-1.3.4.js" type="text/javascript">
 </script>
<style>
#fancybox-loading {
 position: fixed;
 top: 50%;
 left: 50%;
 width: 40px;
 height: 40px;
 margin-top: -20px;
 margin-left: -20px;
 cursor: pointer;
 overflow: hidden;
 z-index: 1104;
 display: none;
 }
 #fancybox-loading div {
 position: absolute;
 top: 0;
 left: 0;
 width: 40px;
 height: 480px;
 background-image: url('http://4.bp.blogspot.com/-Z9i7ujaofZA/UDpndY9PL9I/AAAAAAAAK9k/HMQAGKxClMY/s1600/fancybox.png');
 }
 #fancybox-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 1100;
 display: none;
 }
 #fancybox-tmp {
 padding: 0;
 margin: 0;
 border: 0;
 overflow: auto;
 display: none;
 }
 #fancybox-wrap {
 position: absolute;
 top: 0;
 left: 0;
 padding: 20px;
 z-index: 1101;
 outline: none;
 display: none;
 }
 #fancybox-outer {
 position: relative;
 width: 100%;
 height: 100%;
 background: #fff;
 }
 #fancybox-content {
 width: 0;
 height: 0;
 padding: 0;
 outline: none;
 position: relative;
 overflow: hidden;
 z-index: 1102;
 border: 0px solid #fff;
 }
 #fancybox-hide-sel-frame {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: transparent;
 z-index: 1101;
 }
 #fancybox-close {
 position: absolute;
 top: -15px;
 right: -15px;
 width: 30px;
 height: 30px;
 background: transparent url('http://4.bp.blogspot.com/-Z9i7ujaofZA/UDpndY9PL9I/AAAAAAAAK9k/HMQAGKxClMY/s1600/fancybox.png') -40px 0px;
 cursor: pointer;
 z-index: 1103;
 display: none;
 }
 #fancybox-error {
 color: #444;
 font: normal 12px/20px Arial;
 padding: 14px;
 margin: 0;
 }
 #fancybox-img {
 width: 100%;
 height: 100%;
 padding: 0;
 margin: 0;
 border: none;
 outline: none;
 line-height: 0;
 vertical-align: top;
 }
 #fancybox-frame {
 width: 100%;
 height: 100%;
 border: none;
 display: block;
 }
 #fancybox-left, #fancybox-right {
 position: absolute;
 bottom: 0px;
 height: 100%;
 width: 35%;
 cursor: pointer;
 outline: none;
 background: transparent url('http://3.bp.blogspot.com/-GT4BdaGWcyY/UDpnLkS6bgI/AAAAAAAAK7M/bgKxuPP3m6I/s1600/fancy_blank.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-image: url('http://4.bp.blogspot.com/-Z9i7ujaofZA/UDpndY9PL9I/AAAAAAAAK9k/HMQAGKxClMY/s1600/fancybox.png');
 background-position: -40px -30px;
 }
 #fancybox-right-ico {
 background-image: url('http://4.bp.blogspot.com/-Z9i7ujaofZA/UDpndY9PL9I/AAAAAAAAK9k/HMQAGKxClMY/s1600/fancybox.png');
 background-position: -40px -60px;
 }
 #fancybox-left:hover, #fancybox-right:hover {
 visibility: visible; /* IE6 */
 }
 #fancybox-left:hover span {
 left: 20px;
 }
 #fancybox-right:hover span {
 left: auto;
 right: 20px;
 }
 .fancybox-bg {
 position: absolute;
 padding: 0;
 margin: 0;
 border: 0;
 width: 20px;
 height: 20px;
 z-index: 1001;
 }
 #fancybox-bg-n {
 top: -20px;
 left: 0;
 width: 100%;
 background-image: url('http://4.bp.blogspot.com/-EahAYxFuSjc/UDpnbmFTaPI/AAAAAAAAK9Q/KsYLa1Qpd8w/s1600/fancybox-x.png');
 }
 #fancybox-bg-ne {
 top: -20px;
 right: -20px;
 background-image: url('http://4.bp.blogspot.com/-Z9i7ujaofZA/UDpndY9PL9I/AAAAAAAAK9k/HMQAGKxClMY/s1600/fancybox.png');
 background-position: -40px -162px;
 }
 #fancybox-bg-e {
 top: 0;
 right: -20px;
 height: 100%;
 background-image: url('http://1.bp.blogspot.com/-qIHfkj3d-Po/UDpncUqgoOI/AAAAAAAAK9Y/gBOPsLQfsTk/s1600/fancybox-y.png');
 background-position: -20px 0px;
 }
 #fancybox-bg-se {
 bottom: -20px;
 right: -20px;
 background-image: url('http://4.bp.blogspot.com/-Z9i7ujaofZA/UDpndY9PL9I/AAAAAAAAK9k/HMQAGKxClMY/s1600/fancybox.png');
 background-position: -40px -182px;
 }
 #fancybox-bg-s {
 bottom: -20px;
 left: 0;
 width: 100%;
 background-image: url('http://4.bp.blogspot.com/-EahAYxFuSjc/UDpnbmFTaPI/AAAAAAAAK9Q/KsYLa1Qpd8w/s1600/fancybox-x.png');
 background-position: 0px -20px;
 }
 #fancybox-bg-sw {
 bottom: -20px;
 left: -20px;
 background-image: url('http://4.bp.blogspot.com/-Z9i7ujaofZA/UDpndY9PL9I/AAAAAAAAK9k/HMQAGKxClMY/s1600/fancybox.png');
 background-position: -40px -142px;
 }
 #fancybox-bg-w {
 top: 0;
 left: -20px;
 height: 100%;
 background-image: url('http://1.bp.blogspot.com/-qIHfkj3d-Po/UDpncUqgoOI/AAAAAAAAK9Y/gBOPsLQfsTk/s1600/fancybox-y.png');
 }
 #fancybox-bg-nw {
 top: -20px;
 left: -20px;
 background-image: url('http://4.bp.blogspot.com/-Z9i7ujaofZA/UDpndY9PL9I/AAAAAAAAK9k/HMQAGKxClMY/s1600/fancybox.png');
 background-position: -40px -122px;
 }
 #fancybox-title {
 font-family: Helvetica;
 font-size: 12px;
 z-index: 1102;
 }
 .fancybox-title-inside {
 padding-bottom: 10px;
 text-align: center;
 color: #333;
 background: #fff;
 position: relative;
 }
 .fancybox-title-outside {
 padding-top: 10px;
 color: #fff;
 }
 .fancybox-title-over {
 position: absolute;
 bottom: 0;
 left: 0;
 color: #FFF;
 text-align: left;
 }
 #fancybox-title-over {
 padding: 10px;
 background-image: url('http://2.bp.blogspot.com/-Fw9EyBGel70/UDpnaE5LDhI/AAAAAAAAK9E/XMNoUZl8jVs/s1600/fancy_title_over.png');
 display: block;
 }
 .fancybox-title-float {
 position: absolute;
 left: 0;
 bottom: -20px;
 height: 32px;
 }
 #fancybox-title-float-wrap {
 border: none;
 border-collapse: collapse;
 width: auto;
 }
 #fancybox-title-float-wrap td {
 border: none;
 white-space: nowrap;
 }
 #fancybox-title-float-left {
 padding: 0 0 0 15px;
 background: url('http://4.bp.blogspot.com/-Z9i7ujaofZA/UDpndY9PL9I/AAAAAAAAK9k/HMQAGKxClMY/s1600/fancybox.png') -40px -90px no-repeat;
 }
 #fancybox-title-float-main {
 color: #FFF;
 line-height: 29px;
 font-weight: bold;
 padding: 0 0 3px 0;
 background: url('http://4.bp.blogspot.com/-EahAYxFuSjc/UDpnbmFTaPI/AAAAAAAAK9Q/KsYLa1Qpd8w/s1600/fancybox-x.png') 0px -40px;
 }
 #fancybox-title-float-right {
 padding: 0 0 0 15px;
 background: url('http://4.bp.blogspot.com/-Z9i7ujaofZA/UDpndY9PL9I/AAAAAAAAK9k/HMQAGKxClMY/s1600/fancybox.png') -55px -90px no-repeat;
 }
 /* IE6 */
 .fancybox-ie6 #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://4.bp.blogspot.com/-aLUQlvqrDF4/UDpnMmMt6PI/AAAAAAAAK7U/gJxsmojyoGs/s1600/fancy_close.png', sizingMethod='scale'); }
 .fancybox-ie6 #fancybox-left-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://3.bp.blogspot.com/-zr2csneON3Y/UDpnPPqfCuI/AAAAAAAAK7g/mIv46RHF7tw/s1600/fancy_nav_left.png', sizingMethod='scale'); }
 .fancybox-ie6 #fancybox-right-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://2.bp.blogspot.com/-CtSjSZxi2C0/UDpnQZ1YQzI/AAAAAAAAK7s/We4nsXRTxBE/s1600/fancy_nav_right.png', sizingMethod='scale'); }
 .fancybox-ie6 #fancybox-title-over { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://2.bp.blogspot.com/-Fw9EyBGel70/UDpnaE5LDhI/AAAAAAAAK9E/XMNoUZl8jVs/s1600/fancy_title_over.png', sizingMethod='scale'); zoom: 1; }
 .fancybox-ie6 #fancybox-title-float-left { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://4.bp.blogspot.com/-YTEsKM7mWD4/UDpnYQGrCsI/AAAAAAAAK8w/9JvFfSDWch0/s1600/fancy_title_left.png', sizingMethod='scale'); }
 .fancybox-ie6 #fancybox-title-float-main { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://4.bp.blogspot.com/-DPkXJ84Qk1g/UDpnZL1no0I/AAAAAAAAK84/al4gcBDhjJQ/s1600/fancy_title_main.png', sizingMethod='scale'); }
 .fancybox-ie6 #fancybox-title-float-right { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://1.bp.blogspot.com/-bOFKlmwTCes/UDpna0CvcGI/AAAAAAAAK9I/f0G7j2Q1G9Q/s1600/fancy_title_right.png', sizingMethod='scale'); }
 .fancybox-ie6 #fancybox-bg-w, .fancybox-ie6 #fancybox-bg-e, .fancybox-ie6 #fancybox-left, .fancybox-ie6 #fancybox-right, #fancybox-hide-sel-frame {
 height: expression(this.parentNode.clientHeight   "px");
 }
 #fancybox-loading.fancybox-ie6 {
 position: absolute; margin-top: 0;
 top: expression( (-20   (document.documentElement.clientHeight ? document.documentElement.clientHeight/2 : document.body.clientHeight/2 )   ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ))   'px');
 }
 #fancybox-loading.fancybox-ie6 div { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://1.bp.blogspot.com/-dyPW4uvvOIY/UDpnOJgPOnI/AAAAAAAAK7c/Br0x3FmdLHE/s1600/fancy_loading.png', sizingMethod='scale'); }
 /* IE6, IE7, IE8 */
 .fancybox-ie .fancybox-bg { background: transparent !important; }
 .fancybox-ie #fancybox-bg-n { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://3.bp.blogspot.com/-Kv43QvJ0JHM/UDpnR7K5vuI/AAAAAAAAK78/nzL_IvkFOG0/s1600/fancy_shadow_n.png', sizingMethod='scale'); }
 .fancybox-ie #fancybox-bg-ne { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://4.bp.blogspot.com/-Z2EmQ_P2vH8/UDpnTKG6jgI/AAAAAAAAK8A/dKwm9mfUzcw/s1600/fancy_shadow_ne.png', sizingMethod='scale'); }
 .fancybox-ie #fancybox-bg-e { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://2.bp.blogspot.com/-SYr42X0Uh6E/UDpnRNGdh0I/AAAAAAAAK7w/LKtzzW1KaFA/s1600/fancy_shadow_e.png', sizingMethod='scale'); }
 .fancybox-ie #fancybox-bg-se { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://1.bp.blogspot.com/-9nx_8VgkEbc/UDpnVr6yHDI/AAAAAAAAK8c/Nl4HvpDZYLc/s1600/fancy_shadow_se.png', sizingMethod='scale'); }
 .fancybox-ie #fancybox-bg-s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://4.bp.blogspot.com/-21lzFRG0gAI/UDpnUiq2b3I/AAAAAAAAK8Q/OnBSvpMlIV8/s1600/fancy_shadow_s.png', sizingMethod='scale'); }
 .fancybox-ie #fancybox-bg-sw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://1.bp.blogspot.com/-YHrWfQW5Vlk/UDpnWsUaqaI/AAAAAAAAK8k/S6iEcz12X5A/s1600/fancy_shadow_sw.png', sizingMethod='scale'); }
 .fancybox-ie #fancybox-bg-w { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://4.bp.blogspot.com/-nSarHQjL0Ek/UDpnXllyGCI/AAAAAAAAK8o/aXQ7bE55PjE/s1600/fancy_shadow_w.png', sizingMethod='scale'); }
 .fancybox-ie #fancybox-bg-nw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://4.bp.blogspot.com/-4jVYIoPVQ-M/UDpnTxq7HAI/AAAAAAAAK8I/CAyjuQ8Sow4/s1600/fancy_shadow_nw.png', sizingMethod='scale'); }
</style>
  • Now post below script above </body>
<script type="text/javascript">
$(document).ready(function() {
/* This is basic - uses default settings */
$("a#single_image").fancybox();
/* Using custom settings */
$("a#inline").fancybox({
                'hideOnOverlayClick': false
});
/* Apply fancybox to multiple items */
$("a.group").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});
$("#iframe").fancybox({'width': '70%','height': '100%','autoScale': true,'type':'iframe', });
$("#swf").fancybox({'width': '680','height': '495','autoScale': true,'type':'swf', });
});
 </script> 
Done with all script now time to show how to add this on your content :

Image :
 <a id="single_image" href="Image URL"><img src="Image URL" alt="Some Text"/></a>

 Image Group :
<a class="group" rel="group1" href="Image URL"><img src="Image URL" alt="Some Text"/></a>
<a class="group" rel="group1" href="Image URL"><img src="Image URL" alt="Some Text"/></a>
<a class="group" rel="group1" href="Image URL"><img src="Image URL" alt="Some Text"/></a>

 Inline Content :
<a id="inline" href="#data">This shows content of element who has id="data"</a>
<div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>

iFrame  :
<a href="http://google.com/" title="Google" id="iframe">some link text</a>

Flash :
<a href="SWF File Source/" title="Flash" id="swf">Flash</a>

In Second script which you posted above </body> you can change your iframe width and height and create more actions of iframes/groups and all content.

Now it was bit difficult but if you need any help then please comment and if this lightbox doesn't work then try to posting all script in your post instead of template. 

Popular Posts

 
Powered by Blogger.