Sunday 26 August 2012

Facebook Like Box Pop Up Widget For Blogger - Version 2.0


Last week i posted another FB Like Pop-Up which was cool and got a timer but only problem with that was it appears on every page load. You can control appear timing of this widget which makes it amazingly awesome and also just wanna inform you this widget is originally created by MBT go check out their blog.

This widget  is based on Color Box and with our widget generator it's too easy to add this to your blog (Just click on Add To Blogger to generate code)

On Username field you have to put your FB Page username....Need a username visit here , you need minimum 25 Likes.

Friday 24 August 2012

How To Hide HTML And JavaScript From Your Blog Visitors


Some time we create something cool and original and we don't want other peoples to copy that but now it's time to stop that by hiding our javascript and html.....This will convert our code to a language which is very hard to read.

This will convert
<html>
Hey
</head> 
To
%3C%68%74%6D%6C%3E%0A%48%65%79%0A%3C%2F%68%65%61%64%3E 
I'am sure that you can't read this.....so now the question is how to do that.....

  • Now you'll get a code like something like %3C%68%74%6D%6C%3E%0A%48%65%79%0A%3E but bigger than this one.
  • But your browser and blogger will not understand this code so time to see what you have to do now.
<script language="javascript">
document.write( unescape( 'Your Secret HTML Code' ) );
</script>
  • Now just replace Your Secret HTML Code with your code and paste it down on your blog or any other place you want.
That's it!!!

Amazing CSS3 Search Box For Blogger


In last article i posted about creating a custom search box for blogger and now i'am posting this totally amazing search box which is 99% CSS3 and 1% image.



So i'am going to show you how to create this and also if you just wanna add this then there is also a Add To Blogger option and you can all this search box in all type of HTML documents.

HTML :
<form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Search Me">
</form>
<style>
CSS :
#s {
    margin: 0 auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 12px 48px 12px 12px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
width: 300px;
    height: 16px;
    color: #3a4449;
    border: none;
    outline: none;
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
position: relative;
    z-index: 2;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1HvEj2bNMWqo3mf6237cc1hUIj4MfX3gaRfb8fw1K2JQJm_XkoNpx1Gyt0MeLDJQDhLdjmBLRXcSZV-7wD2BII6JHo-R-dZrPAo1YRlLKvJ6j9lqjKb6iTrYepuuuV0GYhoUa2BCy5Y0/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
    color: #607078;
}
So if you just wanna add this widget then just click on Add To Blogger

Create A Custom Search Box For Blogger


Every blog needs a search for but some blogger template doesn't provide search boxes or any search bar. If you're sacrificing search box because of a template like that then it's your time to create your own first custom search box with little help of this article.

In this article i'll teach you creating custom search box and it's not that tough , just a little attention and it's done.

First :


It's to simple to create a search box like this below is the code :
<form id="search" action="/search" style="display:inline;" method="get">
<input id="searchBox" name="q" type="text"/>
<input id="submut" value="Search" type="submit"/>
</form>
There are two input field in above box one is a text and second is a submit button , that's all about above search bar...to easy?

Second :


After adding a little CSS this search box will look like this :
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #ccccff; border: 2px solid #000066"/>
<input id="search-btn" value="Search" type="submit" style="background: #000066; border: 2px outset #ff0000; color: #ffffff; font-weight: bold;"/>
</form> 
Just try to edit CSS and see what you can do.....

Third :

This time we'll use CSS3 not so tricky just try to edit this one
<form id="searchform" action="/search" style="display:inline;" method="get">
<input id="searchbox" name="q" size="25" type="text" style=" border: 2px solid black;border-radius: 60px;outline: 0px;">
<input id="searchbtn" value="Search" type="submit" style="background: whitesmoke; border: 2px outset black;  font-weight: bold;border-radius: 20px;position: relative;right: 30px;">
</form>
 This one looks amazing without any doubt now let's move on to next level

Forth :


Now we'll take this to a new level with some more advance CSS3 but it's not that hard :
<form id="search" action="/search" style="display:inline;" method="get">
<input name="q" type="text" value="Search"/>
</form>
<style>
#search {
}
#search input[type="text"] {
    background: #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: white;
    outline:0px;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }
#search input[type="text"]:focus {
    width: 200px;
    }
</style>
I know this hard a nightmare but CSS is not that scary.....it was hard but you can get an idea from this for some future design.....i hope this helped you.....got any question then leave a comment

Show Page Loading Time On Blogger


It's time to show visitors how fast or slow your blog page loads with this script as you can see this widget will show your blog's loading time in each page which is a very important for every blog to load fast and this is so easy to add so here we go :
  • Go To Blogger > Template > Edit HTML > Mark 'Expand Widget Templates'
  • Paste below script just below <head>
<!-- page load timer -->
<script type='text/javascript'>
var d = new Date();
var starttime = d.getTime();  //Get the start time
</script>
  •  Now just above </body> paste following script :
<!-- page load timer start -->
<script type='text/javascript'>
var d2 = new Date();
var endtime = d2.getTime(); //Get the end time
//Find the difference between the start and end times
var totaltime = (endtime - starttime)/1000;
//Round 2 decimal places
var result = Math.round(totaltime*100)/100;
//Output results to a &quot;P&quot; element
document.getElementById(&quot;loadtime&quot;).innerHTML = &quot;Page loaded in: &quot;+ result +&quot; seconds&quot;;
</script>
<!-- page load timer end -->
  • Save your template
Now we have added all script now it's time to place this widget in your template
  • Go To Blogger > Layout > Add A Gadget > > HTML/Javascript
  • Paste following script and save it: 
<p id="loadtime">Write your custom message here</p>
All done now just go to your blog and see this working and you can also use some CSS in this widget to make it look better.....Don't forget to leave a comment

Thursday 23 August 2012

Twitter Timeline Widget For Blogger


Twitter is a great website to connect with your favorite celebrities and promote your content and so many of twitter users wants to show our recent tweets on our blog but we really hate twitter timeline widget provided by twitter , are you one of us ?

If yes then below widget is perfect for your twitter addiction which is stylish and also easy to install in your blog with our widget generator. To generate this widget for your blogger click on Add To Blogger button below.


Having any issues or like this widget then please leave a comment and follow me on twitter @HardeepAsrani.

Create Free Newsletter For Blogger


Newsletter connects you with your visitors and give them best and new content and share some new features with your visitors. First of all it's a newsletter not some sort of feed widget.


First Part : 


Now we will create our newsletter form :
  • Create a form just like shown in the image below only with one field "Email" and save it.

After completing above step save your form and grab your form url , which will look something like this 

https://docs.google.com/spreadsheet/viewform?formkey=dEkwQ3Q5d1FTMXNFc1JzWDhwOV91ZHc6MQ

Now copy formkey from your form code(not from our code) :

https://docs.google.com/spreadsheet/viewform?formkey=dEkwQ3Q5d1FTMXNFc1JzWDhwOV91ZHc6MQ

Second Part :
  • Go To Blogger > Create New Page > HTML > Paste below script 

<div id="content">
<h1> Subscribe To Our Newsletter! </h1>
<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe"
style="display:none;" onload="if(submitted)
{window.location='After Form Is Submitted';}"></iframe>
<form action="https://docs.google.com/spreadsheet/formResponse?formkey=YourFormKey&amp;ifq" method="post"
target="hidden_iframe" onsubmit="submitted=true;">
<p> <label for="usermail" class="iconic mail-alt"> E-mail address : </label> <input type="email" name="entry.0.single" class="ss-q-short" id="entry_0" placeholder="I promise I hate spam as much as you do" required="required"  />
<input type="hidden" name="pageNumber" value="0">
<input type="hidden" name="backupCache" value="">
</p>
<input type="submit" name="submit" value="Subscribe !" />  
</form>
<a href="http://widcraft.blogspot.com/2012/08/create-free-newsletter-for-blogger.html"> Create Free Newsletter </a>                        
</div>
<style>
/** Created And Converted For Blogger By - WidCraft.blogspot.com **/
#container {width:465px; margin:20px auto 0;}
a, a:visited {color:#fff; text-decoration:none; font-size:12px;}
a:hover {text-decoration:underline;}
h1 {
font-family: 'Questrial', Verdana, sans-serif;
text-align:center;
font-size:25px;
padding:0;
margin:0 0 20px 0;
position:relative;
color:#8C8C8C;
}
/** have a nice ampersand **/
h1:after {
font-size:25px;
color:#D6CFCB;
content: '&';
text-align:center;
display:block;
width:100%;
font-family: 'Alice', Verdana, serif;
text-shadow: 0px 1px 0px #fff;
}
/** create the gradient bottom **/
h1:before {
position:absolute;
bottom:15px;
 content: ' ';
 text-align:center;
 display:block;
 height:2px;
 width:100%;
background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(182,180,180,0.7) 42%, rgba(180,178,178,0) 43%, rgba(168,166,166,0) 50%, rgba(180,178,178,0) 57%, rgba(182,180,180,0.7) 58%, rgba(238,237,237,0.3) 90%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(42%,rgba(182,180,180,0.7)), color-stop(43%,rgba(180,178,178,0)), color-stop(50%,rgba(168,166,166,0)), color-stop(57%,rgba(180,178,178,0)), color-stop(58%,rgba(182,180,180,0.7)), color-stop(90%,rgba(238,237,237,0.3)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(182,180,180,0.7) 42%,rgba(180,178,178,0) 43%,rgba(168,166,166,0) 50%,rgba(180,178,178,0) 57%,rgba(182,180,180,0.7) 58%,rgba(238,237,237,0.3) 90%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(182,180,180,0.7) 42%,rgba(180,178,178,0) 43%,rgba(168,166,166,0) 50%,rgba(180,178,178,0) 57%,rgba(182,180,180,0.7) 58%,rgba(238,237,237,0.3) 90%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(182,180,180,0.7) 42%,rgba(180,178,178,0) 43%,rgba(168,166,166,0) 50%,rgba(180,178,178,0) 57%,rgba(182,180,180,0.7) 58%,rgba(238,237,237,0.3) 90%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(182,180,180,0.7) 42%,rgba(180,178,178,0) 43%,rgba(168,166,166,0) 50%,rgba(180,178,178,0) 57%,rgba(182,180,180,0.7) 58%,rgba(238,237,237,0.3) 90%,rgba(255,255,255,0) 100%); /* W3C */
}
/* Here comes to good stuff : content styling */
#content{
position:relative;
width:400px;
min-height:200px;
z-index:100;
padding:30px;
border:1px solid #383838;
/* My stipped background */
background: #D1D1D1; /* Old browsers */
background: -moz-repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */
    background: -webkit-repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */
    background: -o-repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */
    background: repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */
/*border-radius*/
-webkit-border-radius:8px;
   -moz-border-radius:8px;
        border-radius:8px;
/*box-shadow*/
-webkit-box-shadow:0px 1px 6px #3F3F3F;
   -moz-box-shadow:0px 1px 6px #3F3F3F;
        box-shadow:0px 1px 6px #3F3F3F;
}
/** my "fake" background that will hover the stripes **/
#content:after{
background:#F9F9F9;
margin:10px;
position: absolute;
content : " ";
bottom: 0;
left: 0;
right: 0;
top: 0;
z-index: -1;
border:1px #E5E5E5 solid;  
/*border-radius*/
-webkit-border-radius:8px;
   -moz-border-radius:8px;
        border-radius:8px;
}
/*** form styling **/
/** we remove the red glow around required fields since we are already using the red star */
input:required, textarea:required {
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none;
}
/** inputs and textarea**/
input:not([type="submit"]), textarea{
outline:none;
display:block;
width:380px;
padding:4px 8px;
border:1px dashed #DBDBDB;
color:#3F3F3F;
font-family:'Droid Sans',Tahoma,Arial,Verdana sans-serif;
font-size:14px;
/*border-radius*/
-webkit-border-radius:2px;
   -moz-border-radius:2px;
        border-radius:2px;
/*transition*/
-webkit-transition:background 0.2s linear,
       box-shadow 0.6s linear;
   -moz-transition:background 0.2s linear,
       box-shadow 0.6s linear;
     -o-transition:background 0.2s linear,
       box-shadow 0.6s linear;
        transition:background 0.2s linear,
       box-shadow 0.6s linear;
}
input:not([type="submit"]):active,
textarea:active,
input:not([type="submit"]):focus,
textarea:focus{
background:#F7F7F7;
border:dashed 1px #969696;
/*box-shadow*/
-webkit-box-shadow:2px 2px 7px #E8E8E8 inset;
   -moz-box-shadow:2px 2px 7px #E8E8E8 inset;
        box-shadow:2px 2px 7px #E8E8E8 inset;
}
input:not([type="submit"]){
height: 20px;
}
/* placeholder */
::-webkit-input-placeholder  {
color:#BABABA;
font-style:italic;
}
input:-moz-placeholder,
textarea:-moz-placeholder{
color:#BABABA;
font-style:italic;
}
textarea{
min-height:150px;
resize:vertical
}
label{
color:#7F7E7E;
-webkit-transition: color 1s ease;
   -moz-transition: color 1s ease;
     transition: color 1s ease;
}
label:hover{
color:#191919;
}
label:before{
color:#C1BFBD;
-webkit-transition: color 1s ease;
   -moz-transition: color 1s ease;
     transition: color 1s ease;
}
label:hover:before{
color:#969696;
-webkit-transition: color 1s ease;
   -moz-transition: color 1s ease;
     transition: color 1s ease;
}
p{
margin-bottom:20px;
}
.indication{
color:#878787;
font-size:12px;
font-style:italic;
text-align:right;
padding-right:10px;
}
.required{
color:#E5224C;
}
/** Styling the send button **/
input[type=submit]{
margin-left:235px;
cursor:pointer;
background:none;
border:none;
font-family: 'Alice',serif;
color:#767676;
font-size:18px;
padding:10px 4px;
border:1px solid #E0E0E0;
text-shadow: 0px 1px  1px #E8E8E8;
background: rgb(247,247,247);
background: -moz-linear-gradient(top,  rgba(247,247,247,1) 1%, rgba(242,242,242,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(247,247,247,1)), color-stop(100%,rgba(242,242,242,1)));
background: -webkit-linear-gradient(top,  rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);
background: -o-linear-gradient(top,  rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);
background: -ms-linear-gradient(top,  rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);
background: linear-gradient(top,  rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);
/*border-radius*/
-webkit-border-radius:5px;
   -moz-border-radius:5px;
        border-radius:5px;
/*box-shadow*/
-webkit-box-shadow:0px 1px 1px #FFF inset,0 0 0px 5px #EAEAEA;
-moz-box-shadow:0px 1px 1px #FFF inset,0 0 0px 5px #EAEAEA;
  box-shadow:0px 1px 1px #FFF inset,0 0 0px 5px #EAEAEA;
/*transition*/
-webkit-transition:all 0.2s linear;
   -moz-transition:all 0.2s linear;
     -o-transition:all 0.2s linear;
        transition:all 0.2s linear;
}
input[type=submit]:hover{
color:#686868;
border-color: #CECECE;
background: rgb(244,244,244);
background: -moz-linear-gradient(top,  rgba(244,244,244,1) 0%, rgba(242,242,242,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244,244,244,1)), color-stop(100%,rgba(242,242,242,1)));
background: -webkit-linear-gradient(top,  rgba(244,244,244,1) 0%,rgba(242,242,242,1) 100%);
background: -o-linear-gradient(top,  rgba(244,244,244,1) 0%,rgba(242,242,242,1) 100%);
background: -ms-linear-gradient(top,  rgba(244,244,244,1) 0%,rgba(242,242,242,1) 100%);
background: linear-gradient(top,  rgba(244,244,244,1) 0%,rgba(242,242,242,1) 100%);
/*box-shadow*/
-webkit-box-shadow:0px 1px 1px #FFF inset,0 0 0px 5px #E0E0E0;
-moz-box-shadow:0px 1px 1px #FFF inset,0 0 0px 5px #E0E0E0;
box-shadow:0px 1px 1px #FFF inset,0 0 0px 5px #E0E0E0;  
}
input[type=submit]:active,
input[type=submit]:focus{
position:relative;
top:1px;
color:#515151;
background: rgb(234,234,234);
background: -moz-linear-gradient(top,  rgba(234,234,234,1) 0%, rgba(242,242,242,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(234,234,234,1)), color-stop(100%,rgba(242,242,242,1)));
background: -webkit-linear-gradient(top,  rgba(234,234,234,1) 0%,rgba(242,242,242,1) 100%);
background: -o-linear-gradient(top,  rgba(234,234,234,1) 0%,rgba(242,242,242,1) 100%);
background: -ms-linear-gradient(top,  rgba(234,234,234,1) 0%,rgba(242,242,242,1) 100%);
background: linear-gradient(top,  rgba(234,234,234,1) 0%,rgba(242,242,242,1) 100%);
/*box-shadow*/
-webkit-box-shadow:0px -1px 1px #FFF inset,0 0 0px 5px #E0E0E0;
-moz-box-shadow:0px -1px 1px #FFF inset,0 0 0px 5px #E0E0E0;
box-shadow:0px -1px 1px #FFF inset,0 0 0px 5px #E0E0E0;
}
</style>

  • In above script replace  YourFormKey  with your FormKey (From Step One) and replace  After Form Is Submitted with url you want visitor to redirect after subscribing your news letter.
Now when a user will enter his email and click on subscribe his email will be send to your google docs account now whenever you have to send your visitor your monthly/daily/yearly email just go to Google Docs click on your form and copy all email and send your newsletter via your gmail account.

That's the best way to send newsletter to your visitors and it's totally free. If you're copying this article then please give us credits and also tell us..... facing any sort of problems then leave it in comment section below.

Wednesday 22 August 2012

Random Post Widget For Blogger - Version 2.0


It's impossible to know about what content your visitor like so it's good to show to them option for a random post so they might find some thing useful and also cool. As you can read Version 2.0 because Version 1.0 was way to old and not with CSS3. Add this widget by clicking below :


Tuesday 21 August 2012

Random Posts Widget For Blogger


Previously i posted Random Post Widget with opens a random posts from your blog but this widget shows random posts after every reload on your blog's sidebar(or where you add). I specially recommend this widget for funny pics websites.

Generate this widget for your blog with our widget generator just click on Add To Blogger button :

Monday 20 August 2012

prettyPhoto Lightbox For Blogger


prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It's a full blown media.In past i posted two light box for blogger which are cool but not better than this one i mean this one is more stylish , more easy to use and it also contain tweet and like button for social sharing. Again wanna remind you guys you can also you this light box on your other html documents.

  • Go To Blogger > Template > Edit HTML
  • Search for </head> and just above it paste following code :

  • Now search for </body> and just above this paste following code :
<script charset="utf-8" type="text/javascript">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
  • Save your template
Done with installing , now post below html codes on your posts to see this magic.....

------------------------------------------------------------

On Images
rel="prettyPhoto"

For Adding Gallery:
rel="prettyPhoto[pp_gal]"

For Adding Links/iFrame:
rel="prettyPhoto[iframe]"

For Flash Content:
rel="prettyPhoto[flash]"

For Youtube Videos

rel=" prettyPhoto "

For Inline Content:
el="prettyPhoto

------------------------------------------------------------

Some Example Codes -

Single Image :

<a href=" IMG URL " rel="prettyPhoto" title="Description">
<img alt="Picture 1 title" height="60" src="IMG URL" width="60" />
</a>

Image Gallery :

<a href="IMG URL" rel="prettyPhoto[pp_gal]" title="You can add caption to pictures."><img alt="Red round shape" height="60" src="IMG URL" width="60" /></a> <a href="IMG URL" rel="prettyPhoto[pp_gal]"><img alt="Nice building" height="60" src="IMG URL" width="60" /></a>&nbsp;&nbsp;<a href="IMG UR " rel="prettyPhoto[pp_gal]"><img alt="Fire!" height="60" src="IMG URL" width="60" /></a>

Flash Content :

<a href="http://www.adobe.com/products/flashplayer/include/marquee/design.swf?width=792&amp;height=294" rel="prettyPhoto[flash]" title="Flash 10 demo">Flash Movie</a>

Youtube Video :

<a href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title="">Youtube</a>

External Website[IFrames] :

<a href="http://www.google.com?iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]" title="Google.com opened at 100%">Google.com</a>

Inline Content :

<a href="#inline-1" rel="prettyPhoto" >Inline Content</a>
<div id="inline-1" class="hide" style="visibility:hidden" >
  <p>
This is inline content opened in prettyPhoto.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Having any problem....feel free to comment.....

Popular Posts

 
Powered by Blogger.