Making Pages Inside Blogger Posts

Pages inside Post ImageContinuing from my recent post about the Page hack in Blogger, I have been asked by some of my readers to implement the same thing inside a Post. Well some might why is it needed in the first place? , the reasoning behind that is to make your Post look a little short (Even when they are not). The method I will be employing is in no ways a clean one and will require to include a JavaScript file individually in each post followed by a full rearrangement (Just Copy-Paste) of the contents.


See Demo

How to add this into your Posts:
1. Firstly we will be adding the following JavaScript to the end of the Post ( In the Edit HTML Tab)

<script src="http://stylifyyourblog1.googlecode.com/svn/trunk/pageinpost.js" ></script>
<script type="text/javascript">
activatables('page', ['page-1', 'page-2','page-3' ]);
</script>

I am assuming that you will be making three pages namely page-1, page-2 & page-3

2. Now either add the CSS to the end of the Post or inside the Edit HTML of the Blog.
<style>
div.content11 {clear: left;padding: 1em;}
div.content11.inactive {display: none;}
ol#toc {height: 2em;list-style: none;margin: 0;padding: 0;}
ol#toc a {padding: 0px 8px 0px;margin: 1px 4px;text-decoration: none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;}
ol#toc a:hover {background-color: #DBECF8;padding: 0px 8px 0px;border:1px solid #204e73;}
ol#toc a:hover span {background-position: 100% -120px;}
ol#toc li {float: left;margin: 0 6px 0 0;}
ol#toc li a.active {background-color: #48f;background-position: 0 -60px;color: #fff;font-weight: bold;}
ol#toc li a.active span {background-position: 100% -60px;}
ol#toc span {background: url(tabs.gif) 100% 0;display: block;line-height: 2em;padding-right: 10px;}
</style> 

3. Now Here is the Basic HTML Markup in which you will have to rearrange your Post Content into content  into :

<div class="content11" id="page-1">

The content of Page One

</div>
<div class="content11" id="page-2">

The content of Page Two

</div>
<div class="content11" id="page-3">

The content of Page Three

</div>

<ol id="toc">
<li><a href="#page-1">1</a></li>
<li><a href="#page-2">2</a></li>
<li><a href="#page-3">3</a></li>
</ol>

Here you will observe that first div section is given the Id page-1, which is the link of the first item of the ordered list as well if you see the JavaScript above, you will see how it is being used.

One word of Advice, after pasting the above code (The ol list) in the Edit HTML Tab, if you go to the Compose Tab and then go back to Edit HTML tab ,you will see the links have changed in the href , if you don’t revert them back to only # ones, then this will not work. So either add this code just at the end of writing your Post or don’t switch to Compose tab 🙁

This might be a little lengthy way of achieving Pagination inside post, but the results will be better looking and a bit less lengthy posts. Thanks to Chad Guzman & Aliester for suggesting this idea. And I know this script has a lot of space for improvement.

Having problems, feel free to drop by

See Demo

Implementing Syntax Highlighter in Blogger

Syntax Highlighter is a simple JavaScript which is used to represent your Code in a more sophisticated manner.I have used this in nearly all my previous posts.In this tutorial I will be implementing Version 2.1.364 of SH. It has the ability to copy Code into the Clipboard and also supports 13 different brushes.

             

Steps to Add it to Blogger:

1.Login to the Blogger account

2.Go to Blogger Dashboard >Design>Edit HTML. First backup your Template (See how to Back it up)



3.Now copy the code from below and paste it just Above/Before </head> tag.


<link href='http://agorbatchev.typepad.com/pub/sh/2_1_364/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://agorbatchev.typepad.com/pub/sh/2_1_364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shCore.js' type='text/javascript'/>  
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushBash.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushCSharp.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushJava.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushPhp.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushPython.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushRuby.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushSql.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushVb.js' type='text/javascript'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/shBrushPerl.js' type='text/javascript'/>

See only the first Three Line of code is necessary ,rest of the code is dependent on which Brush you want to use .For example if you want to use XML Brush then include only XML related file.

4.Now include the following code just Above/Before the </body> tag.

<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://agorbatchev.typepad.com/pub/sh/2_1_364/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>



5.Now for applying this to your code just paste the code in between the following code:

<pre class="brush: BRUSH-NAME">

Paste Your Code Here

</pre>

The “BRUSH-NAME” needs to be changed by the Brush you want to use. Like for example if you want to use xml Brush then change “BRUSH-NAME” with xml. All the code should be Escaped (Visit this Page to make your Code Escaped)

Now some extra features : For Highlighting the code see the following code:

<pre class="brush: xml;highlight: [2,4];">
This Line is Highlighted
This Line is not Highlighted
This Line is again Highlighted
</pre>

To Hide the Toolbar

<pre class="brush: xml; toolbar: false;">

If You observe ,there is no Toolbar

</pre>


             

Unlimited Bandwidth Image & JavaScript Hosting

Hosting is a vital part of any Website or Blog. In the following tutorial I will be telling you how to host Images (JUST for the sake) and JavaScript files on Blogger platform (with UNLIMITED BANDWIDTH that is). Image hosted on Blogger is no big surprise but the main focus of this tutorial is hosting JS files on Blogger which can be quite useful. The main reason I am doing this post is because ,all the Past posts I have done as well as many of the incoming Future posts that I will do ,use a JS file as their core. This simple trick will do away with all the problem related to hosting JS files on Third Party Servers.

Image Hosting on Blogger

Whenever a image is added into Blogger Blog, it automatically assigns a Picasa album to it .These images can then be used anywhere ,that too with unlimited bandwidth.

Steps to Add Images into Blogger
1. Go to Blogger Dashboard —> NEW POST
2. Click the Compose tab —> Click on Insert Image Icon ()



3. Click the Choose Files button



4. Select the Files and Click the Open Button 

Wait for a while till the image is finished uploading.

5. Select the Uploaded image and Click the Add Selected button.



6. Click on the Edit HTML tab 



7. You will see the two image Urls, but u pick Original image URL after the href tag like below. 

Use the image any where you want with unlimited bandwidth

JavaScript Hosting on Blogger
Blogger allows external JS files to be accessed using the script tag like this:

<script src='http://Your-Hosting-Service-Url/Jquery.js' type='text/javascript'/>
But this is well and good until you have Good Hosting Service.There are many free Hosting services Like DropBox and Google Code(Quite Good indeed) but why call it from a external source when you can easily embed it in Blogger itself! To do that observe the following code:
<script type='text/javascript'>
//<![CDATA[
<--Paste all code here from .js file -->
//]]>
</script>

Just in place of “<–Paste all code here from .js file –>” line in above code ,copy the whole content of your JS file(Open the JS File in NotePad and do the Plain Old CTRL+A , followed by CTRL+C ,Then go the place where you have the above code and CTRL+V in the place of the highlighted line [Remove the highlighted line] ).And your javascript codes are now Ready which are now hosted on Blogger itself !

Here I want to make a special mention of the CDN a.k.a. Content Distribution Network whose most common example is googleapis.These CDN are like Super-Duper fast servers which reduce access time with their dedicated bandwidths.

The following is a example of jQuery Framework hosted on GoogleAPIS:

http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js

It is your personal choice whether you want to host your JS file on Blogger or get it through these CDN services or Locally. I personally prefer that these framework be accessed through the Googleapis and the JS file of the Plugin be hosted on Blogger.

Whats Your Take on this ?,feel free to share it.

Implementing HighSlide JS in Blogger


Highslide JS
is an open source script offering a Web 2.0 approach to popup windows. It streamlines the use of thumbnail images and HTML popups on web pages.It uses modal windows instead of pop-up windows to open larger versions of the thumbnail images. It’s free for non-commercial uses.

Special thanks to the maker of this JavaScript for providing a tutorial for implementation of Single image version of HighSlide into Blogspot Blogs.

             

Note: This is a easy setup but has one downside , that if the roadrash.no servers go down then it will not work .

Steps to Add it to Blogger:



1.Login to the Blogger account.


2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it.

<script src='http://www.roadrash.no/hs-support/highslide/highslide-full.js' type='text/javascript'></script> 
<link href='http://www.roadrash.no/hs-support/highslide/highslide.css' rel='stylesheet' type='text/css'/> 
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="http://www.roadrash.no/hs-support/highslide/highslide-ie6.css" /> <![endif]--> 
<script type='text/javascript'> 
//<![CDATA[
hs.graphicsDir = 'http://www.roadrash.no/hs-support/highslide/graphics/';
hs.wrapperClassName = 'borderless';
hs.align = 'center';
hs.dimmingOpacity = 0.65;
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
// close button
hs.registerOverlay({
 html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
 position: 'top right',
 fade: 2 // fading the semi-transparent overlay looks bad in IE
});
hs.isUnobtrusiveAnchor = function(el) {
 if (el.href && /.(jpg|gif|png)$/.test(el.href) && !el.onclick) {
  el.className = 'highslide'; // for the zoom-in cursor
  el.title = 'Click to enlarge'; // for title
  return 'image';
 }
};
if (hs.addEventListener && hs.Outline) hs.addEventListener(window, 'load', function () {

 new hs.Outline('rounded-white');

 new hs.Outline('glossy-dark');

});
// The gallery example on the front page
var galleryOptions = {

 slideshowGroup: 'gallery',

 wrapperClassName: 'dark',

 //outlineType: 'glossy-dark',

 dimmingOpacity: 0.8,

 align: 'center',

 transitions: ['expand', 'crossfade'],

 fadeInOut: true,

 wrapperClassName: 'borderless floating-caption',

 marginLeft: 100,

 marginBottom: 80,

 numberPosition: 'caption'

};
if (hs.addSlideshow) hs.addSlideshow({

    slideshowGroup: 'gallery',

    interval: 5000,

    repeat: false,

    useControls: true,

    overlayOptions: {

     className: 'text-controls',

  position: 'bottom center',

  relativeTo: 'viewport',

  offsetY: -60

 },

 thumbstrip: {

  position: 'bottom center',

  mode: 'horizontal',

  relativeTo: 'viewport'

 }



});

hs.Expander.prototype.onInit = function() {

 hs.marginBottom = (this.slideshowGroup == 'gallery') ? 150 : 15;

}



// focus the name field

hs.Expander.prototype.onAfterExpand = function() {



 if (this.a.id == 'contactAnchor') {

  var iframe = window.frames[this.iframe.name],

   doc = iframe.document;

     if (doc.getElementById("theForm")) {

         doc.getElementById("theForm").elements["name"].focus();

     }



 }

}


//]]>

</script> 
<style type='text/css'> 
pre {
 background: white; 
 padding: 5px; 
 font-size: 10.9px;
}
</style> 

There is one problem with Blogger that first time this code will work but if you click Edit then you save it ,then it stops working,Therefore make sure you keep this code handy & whenever you want to add new stuff remove the code present and copy this again(then it starts working)

2.Go to the Post/Page you want to add Highslide JS and then go to Edit HTML tab .


3.Now copy the code from below and paste it there.


<script src='http://www.roadrash.no/hs-support/highslide/highslide-full.js' type='text/javascript'></script> 
<link href='http://www.roadrash.no/hs-support/highslide/highslide.css' rel='stylesheet' type='text/css'/> 
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="http://www.roadrash.no/hs-support/highslide/highslide-ie6.css" /> <![endif]--> 
<script type='text/javascript'> 
//<![CDATA[
hs.graphicsDir = 'http://www.roadrash.no/hs-support/highslide/graphics/';
hs.wrapperClassName = 'borderless';
hs.align = 'center';
hs.dimmingOpacity = 0.65;
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
// close button
hs.registerOverlay({
 html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
 position: 'top right',
 fade: 2 // fading the semi-transparent overlay looks bad in IE
});
hs.isUnobtrusiveAnchor = function(el) {
 if (el.href && /.(jpg|gif|png)$/.test(el.href) && !el.onclick) {
  el.className = 'highslide'; // for the zoom-in cursor
  el.title = 'Click to enlarge'; // for title
  return 'image';
 }
};
if (hs.addEventListener && hs.Outline) hs.addEventListener(window, 'load', function () {

 new hs.Outline('rounded-white');

 new hs.Outline('glossy-dark');

});
// The gallery example on the front page
var galleryOptions = {

 slideshowGroup: 'gallery',

 wrapperClassName: 'dark',

 //outlineType: 'glossy-dark',

 dimmingOpacity: 0.8,

 align: 'center',

 transitions: ['expand', 'crossfade'],

 fadeInOut: true,

 wrapperClassName: 'borderless floating-caption',

 marginLeft: 100,

 marginBottom: 80,

 numberPosition: 'caption'

};
if (hs.addSlideshow) hs.addSlideshow({

    slideshowGroup: 'gallery',

    interval: 5000,

    repeat: false,

    useControls: true,

    overlayOptions: {

     className: 'text-controls',

  position: 'bottom center',

  relativeTo: 'viewport',

  offsetY: -60

 },

 thumbstrip: {

  position: 'bottom center',

  mode: 'horizontal',

  relativeTo: 'viewport'

 }



});

hs.Expander.prototype.onInit = function() {

 hs.marginBottom = (this.slideshowGroup == 'gallery') ? 150 : 15;

}



// focus the name field

hs.Expander.prototype.onAfterExpand = function() {



 if (this.a.id == 'contactAnchor') {

  var iframe = window.frames[this.iframe.name],

   doc = iframe.document;

     if (doc.getElementById("theForm")) {

         doc.getElementById("theForm").elements["name"].focus();

     }



 }

}


//]]>

</script> 
<style type='text/css'> 
pre {
 background: white; 
 padding: 5px; 
 font-size: 10.9px;
}
</style> 

There is one problem with Blogger that first time this code will work but if you click Edit then you save it ,then it stops working,Therefore make sure you keep this code handy & whenever you want to add new stuff remove the code present and copy this again(then it starts working).

4.Now for adding the images into Highslide JS,just add the image and Highslide will automatically detect it 


The tricky part is in Adding other stuff ,Here are some Example Codes:

<div class="thumbwrapper">
Gallery
<a class="highslide" href="http://www.highslide.com/samples/gallery3.jpg" onclick="return hs.expand(this, galleryOptions)"><img alt="Highslide JS" src="http://www.highslide.com/samples/gallery3.thumb.jpg" title="Click to enlarge" />
<a href="http://www.highslide.com/samples/gallery7.jpg" class="highslide" onclick="return hs.expand(this, galleryOptions)"><img alt="Highslide JS" src="http://www.highslide.com/samples/gallery7.thumb.jpg" title="Click to enlarge" />&nbsp;</span></a>&nbsp;<a class="highslide" href="http://www.highslide.com/samples/gallery5.jpg" onclick="return hs.expand(this, galleryOptions)"><img alt="Highslide JS" src="http://www.highslide.com/samples/gallery5.thumb.jpg" title="Click to enlarge" /></a></div>
<div class="thumbwrapper">

</div>
</div>
<div class="textwrapper">
Inline HTML
<a class="highslide" href="#" onclick="return hs.htmlExpand(this, { outlineType: 'rounded-white', wrapperClassName: 'draggable-header',

 headingText: 'Full HTML content' } )"> 
HTML content



</a>

<div class="highslide-maincontent">

This example uses the <code>htmlExpand</code> method to display full HTML content in the expander.

The width of the expanding <code>div</code> is set to <code>300px</code>, while the height is omitted

to allow Highslide to decide the best fit.



In the expander you can put all kinds of content, for instance form elements.

</div>

</div>



<div class="textwrapper">

<a class="highslide" href="http://www.highslide.com/include-long.htm" onclick="return hs.htmlExpand(this, { objectType: 'ajax', contentId: 'highslide-html-8' } )">

Scrolling HTML content

</a>

<div class="highslide-html-content" id="highslide-html-8" style="padding: 15px; width: auto;">

<div style="border-bottom: 1px solid silver; height: 20px; padding: 5px;">

<a class="control" href="http://www.blogger.com/post-edit.g?blogID=7521351820124661054&amp;postID=7837002431450655615&amp;from=pencil#" onclick="return hs.close(this)">Close</a>

<a class="highslide-move control" href="http://www.blogger.com/post-edit.g?blogID=7521351820124661054&amp;postID=7837002431450655615&amp;from=pencil#" onclick="return false">Move</a>

</div>

<div class="highslide-body" style="padding: 10px;">



</div>

<div style="border-top: 1px solid silver; text-align: center;">

<small>

Powered by <i>Highslide JS</i>

</small>

</div>

</div>



</div>



<div class="textwrapper">
AJAX
<a class="highslide" href="http://www.highslide.com/include-short.htm" onclick="return hs.htmlExpand(this, { outlineType: 'rounded-white',

   wrapperClassName: 'draggable-header', objectType: 'ajax' } )">

AJAX content

</a>

</div>



<div class="textwrapper">
AJAX Dynamic
<a class="highslide" href="http://www.highslide.com/ajax.htm#dynamic" onclick="return hs.htmlExpand(this, { contentId: 'highslide-html-ajax',

   wrapperClassName: 'highslide-white', outlineType: 'rounded-white',

   outlineWhileAnimating: true, objectType: 'ajax', preserveContent: true } )">

Dynamic AJAX content

</a>

</div>





<div class="textwrapper">
IFrame 1
<a class="highslide" href="http://www.highslide.com/include-short.htm" onclick="return hs.htmlExpand(this, { outlineType: 'rounded-white',

   wrapperClassName: 'draggable-header', objectType: 'iframe' } )">

Iframe content

</a>

</div>



<div class="textwrapper">
IFrame 2
<a class="highslide" href="http://www.highslide.com/form.htm" id="formexample" onclick="return hs.htmlExpand( this, {

     objectType: 'iframe', outlineType: 'rounded-white', wrapperClassName: 'highslide-wrapper drag-header',

        outlineWhileAnimating: true, preserveContent: false, width: 250 } )">Iframe with form</a>

</div>
5.Now save the Post/Page and see the magic.

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself !

             

Implementing Featured Image Zoomer in Blogger

Featured Image Zoomer lets you view a magnified portion of any image upon moving your mouse over it. A magnifying glass appears alongside the image displaying the magnified area on demand. The user can toggle the zoom level by using the mousewheel. It’s great to use on product images, photos, or other images with lots of details you want users to be able to get into on command.

 Here are the script’s features:

Ability to specify either the original image or a larger version of it as the “magnified” image.
The “magnified” image is only loaded on demand (the first time the user moves his mouse over the thumbnail image), saving on initial page download time.
Supports an optional adjustable power setting. When enabled, the user can adjust the zoom level on demand by using the mouse wheel while over the image.

             
Steps to Add it to Blogger:



1.Login to the Blogger account.

2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/FeaturedImageZoomer/featuredimagezoomer.js">
</script>

Now search for the ]]></b:skin> tag and paste the following code just Above/Before it.

.magnifyarea{ /* CSS to add shadow to magnified image. Optional */
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}

Now search for the </body> tag and paste the following code just Above/Before it.

<script type="text/javascript">

jQuery(document).ready(function($){

 $('#Anyname').addimagezoom()

})

</script>

2.Go to the Post/Page you want to add Featured Image Zoomer and then go to Edit HTML tab .


3.Now copy the code from below and paste it there.

<style type="text/css">

.magnifyarea{ /* CSS to add shadow to magnified image. Optional */
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/FeaturedImageZoomer/featuredimagezoomer.js">
</script>

<script type="text/javascript">

jQuery(document).ready(function($){

 $('#image3').addimagezoom()

})

</script>

4.Now for adding the images into Featured Image Zoomer ,Firstly add the image normally using Insert Image button

Now When you see the code in the edit HTML window it would be something like this


<a href=”large3.jpg”><img border=”0″ height=”90″ src=”/small3.jpg” width=”120″ /></a>


Make it like this 

<a id=”Anyname” href=”large3.jpg”><img border=”0″ height=”90″ src=”/small3.jpg” width=”120″ /></a>


As you see we only added a id tag “Anyname”



Now add a javascript snippet

<script type="text/javascript">

jQuery(document).ready(function($){

 $('#Anyname').addimagezoom()

})

</script>

This is the most basic call ,Featured Image Zoom provides with many Options to customize the Zoom effect .Here are some of the Options: 



Here are some example snippet codes:

<script type="text/javascript">

jQuery(document).ready(function($){

 $('#image1').addimagezoom({
  zoomrange: [3, 10],
  magnifiersize: [300,300],
  magnifierpos: 'right',
  cursorshade: true,
  largeimage: 'http://i44.tinypic.com/11icnk5.jpg' //<-- No comma after last option!
 })
 
 $('#image2').addimagezoom({
  zoomrange: [5, 5],
  magnifiersize: [400,400],
  magnifierpos: 'right',
  cursorshade: true,
  cursorshadecolor: 'pink',
  cursorshadeopacity: 0.3,
  cursorshadeborder: '1px solid red',
  largeimage: 'http://i44.tinypic.com/11icnk5.jpg' //<-- No comma after last option!
 })

 $('#image3').addimagezoom()

})

</script>


5.Now save the Post/Page and see the magic.

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself !

             

Implementing TinyBox2 in Blogger

TinyBox2 is the successor of the previously published resource TinyBox which is a standalone JavaScript modal windows library.

The library is lightweight (5kb) and supports images, iframes, HTML and Ajax requests natively.

             

Steps to Add it to Blogger:



1.Login to the Blogger account.

2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it.

<link rel="stylesheet" href="http://dl.dropbox.com/u/27675057/TinyBox2/style.css" />
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/TinyBox2/tinybox.js"></script>

2.Go to the Post/Page you want to add TinyBox2 and then go to Edit HTML tab .


3.Now copy the code from below and paste it there.

<link rel="stylesheet" href="http://dl.dropbox.com/u/27675057/TinyBox2/style.css" />
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/TinyBox2/tinybox.js"></script>


4.Now for adding the images into TinyBox2


If images are to be added then this is the code:

<li onclick="TINY.box.show({image:'http://dl.dropbox.com/u/27675057/3%20%282%29.jpg',boxid:'frameless', animate:true,openjs:function(){openJS()}})">Image, Load Callback</li>

If iFrame content is to added:

<li onclick="TINY.box.show({iframe:'http://www.google.com/',boxid:'frameless',width:750,height:450,fixed:false, maskid:'bluemask',maskopacity:40,closejs:function(){closeJS()}})">iFrame, Blue Mask, Absolute Position, Frameless, Close Callback</li>
5.Now save the Post/Page and see the magic.

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself !


Another Important thing to note is that all the images used in this tutorial like Next button ,Previous button ,etc are all hosted on Google Code service which are the fastest and most reliable servers on the internet with the least downtime.So you can easily implement this with no hassles for Image Hosting.

             

Implementing jCarousel in Blogger

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

             

Steps to Add it to Blogger:

1.Login to the Blogger account.

2.Go to the Post/Page you want to add jCarousel and then go to Edit HTML tab .


3.Now copy the code from below and paste it there.

<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/jCarousel/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/jCarousel/jquery.jcarousel.min.js"></script> 
<link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/27675057/jCarousel/skin.css" /> 
<script type="text/javascript"> 
 
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel();
    jQuery('#mycarousel1').jcarousel({
        vertical: true,
        scroll: 2
    });
});
 
</script> 

4.Now for adding the images into jCaousel ,these are the codes:

<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="s.jpg" width="75" height="75" alt="" /></li>
<li><img src="s.jpg" width="75" height="75" alt="" /></li>
</ul>

The id name should be same as the javascript snippet name. 

If you want to add a vertical jCarousel then make the following changes to the javascript snippet.

<script type="text/javascript"> 
 jQuery(document).ready(function() {
 jQuery('#mycarousel1').jcarousel({
        vertical: true,
        scroll: 2
    });
});
 </script>


5.Now save the Post/Page and see the magic.

Note: Please Host all the files on free hosting service like DropBox  or Blogpsot itself !


Another Important thing to note is that all the images used in this tutorial like Next button ,Previous button ,etc are all hosted on Google Code service which are the fastest and most reliable servers on the internet with the least downtime.So you can easily implement this with no hassles for Image Hosting.

             

Implementing PieceMaker 2 in Blogger

Piecemaker V2 is an open source Flash ActionScript 3 image rotator.It‘s free for nearly any use – including commercial.

Its the perfect way to dynamically display your images, videos and .swf files on any post or page.The Piecemaker is a Flash-based 3D Image Rotator.

             
Steps to Add it to Blogger:


1.Login to the Blogger account.

2.Go to the Post/Page you want to add Piecemaker 2 and then go to Edit HTML tab .


3.Now copy the code from below and paste it there.

<script src="http://dl.dropbox.com/u/27675057/piecemaker2/piecemaker/web/scripts/swfobject/swfobject.js" type="text/javascript">
</script>
<div id="flashcontent">
You need to <a href="http://www.adobe.com/products/flashplayer/" target="_blank">Upgrade your Flash Player</a> to version 10 or newer.</div>


<script type="text/javascript">
  var flashvars = {};
  flashvars.xmlSource = "http://dl.dropbox.com/u/27675057/piecemaker.xml";
  flashvars.cssSource = "http://dl.dropbox.com/u/27675057/piecemaker2/piecemaker/web/piecemaker.css";
  flashvars.imageSource = "";
  var attributes = {};
  attributes.wmode = "transparent";
var params = {};  
     params.allowscriptaccess = "always";  
     params.allownetworking = "all";
  swfobject.embedSWF("http://dl.dropbox.com/u/27675057/piecemaker2/piecemaker/web/piecemaker.swf", "flashcontent", "960", "610", "10", "http://dl.dropbox.com/u/27675057/Piecemaker/expressInstall.swf", flashvars, attributes, params, null);
</script>

4.Now for adding anything into Piecemaker 2 you have to edit the XML file included at the top ,which contains code of this kind



<Piecemaker>
<Contents>
<Image Source="http://dl.dropbox.com/u/27675057/pic/15.jpg" Title="Sky"/>
<Image Source="http://dl.dropbox.com/u/27675057/pic/21.jpg" Title="Cloud">
</Image>
<Image Source="http://dl.dropbox.com/u/27675057/pic/22.jpg" Title="Clouds"/>
<Image Source="http://dl.dropbox.com/u/27675057/pic/22_2.jpg" Title="Green"/>
<Image Source="http://dl.dropbox.com/u/27675057/pic/24.jpg" Title="Landscape"/>
<Image Source="http://dl.dropbox.com/u/27675057/pic/62.jpg" Title="Water"/>
<Video Source="http://dl.dropbox.com/u/13256471/piecemaker_2/contents/video.mp4" Title="Video Example" Width="910" Height="365" Autoplay="true">
<Image Source="http://dl.dropbox.com/u/13256471/piecemaker_2/contents/video-preview.jpg" />
</Video>
<Flash Source="http://dl.dropbox.com/u/27675057/piecemaker2/piecemaker/web/contents/flash.swf" Title="Loaded SWF File">
      <Image Source="http://dl.dropbox.com/u/27675057/piecemaker2/piecemaker/web/contents/flash-preview.png" />
    </Flash>
</Contents>
<Settings ImageWidth="900" ImageHeight="360" LoaderColor="0x333333" InnerSideColor="0x222222" SideShadowAlpha="0.8" DropShadowAlpha="0.7" DropShadowDistance="25" DropShadowScale="0.95" DropShadowBlurX="40" DropShadowBlurY="4" MenuDistanceX="20" MenuDistanceY="50" MenuColor1="0x999999" MenuColor2="0x333333" MenuColor3="0xFFFFFF" ControlSize="100" ControlDistance="20" ControlColor1="0x222222" ControlColor2="0xFFFFFF" ControlAlpha="0.8" ControlAlphaOver="0.95" ControlsX="450" ControlsY="280 " ControlsAlign="center" TooltipHeight="30" TooltipColor="0x222222" TooltipTextY="5" TooltipTextStyle="P-Italic" TooltipTextColor="0xFFFFFF" TooltipMarginLeft="5" TooltipMarginRight="7" TooltipTextSharpness="50" TooltipTextThickness="-100" InfoWidth="400" InfoBackground="0xFFFFFF" InfoBackgroundAlpha="0.95" InfoMargin="15" InfoSharpness="0" InfoThickness="0" Autoplay="10" FieldOfView="45"/>
<Transitions>
<Transition Pieces="9" Time="1.2" Transition="easeInOutBack" Delay="0.1" DepthOffset="300" CubeDistance="30"/>
<Transition Pieces="15" Time="3" Transition="easeInOutElastic" Delay="0.03" DepthOffset="200" CubeDistance="10"/>
<Transition Pieces="5" Time="1.3" Transition="easeInOutCubic" Delay="0.1" DepthOffset="500" CubeDistance="50"/>
<Transition Pieces="9" Time="1.25" Transition="easeInOutBack" Delay="0.1" DepthOffset="900" CubeDistance="5"/>
<Transition Pieces="20" Time="1.1" Transition="easeInOutElastic" Delay="0.03" DepthOffset="200" CubeDistance="10"/>
<Transition Pieces="12" Time="2" Transition="easeInOutCubic" Delay="0.03" DepthOffset="200" CubeDistance="10"/>
</Transitions>
</Piecemaker>

All these codes are of self explanatory nature and really easily to understand  

5.Now save the Post/Page and see the magic.

Note: Please Host all the files on free hosting service like DropBox  or Blogpsot itself !

             

Implementing Shadowbox in Blogger

Shadowbox is a web-based media viewer application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, one can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.

             
Steps to Add it to Blogger:



1.Login to the Blogger account.


2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it. 

<link href="http://dl.dropbox.com/u/27675057/ShadowBox/shadowbox.css" rel="stylesheet" type="text/css"></link>
<script src="http://dl.dropbox.com/u/27675057/ShadowBox/shadowbox.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/ShadowBox/demo.js" type="text/javascript">
</script>

Now search for the </body> tag and paste the following code just Above/Before it.

</script> 
<script type="text/javascript">
Shadowbox.init({ overlayOpacity: 0.8 }, setupDemos);
</script>

setupDemos is defined in demo.js

2.Go to the Post/Page you want to add the Shadowbox and go to Edit HTML tab .


3.Now copy the code from below and paste it there.

<link href="http://dl.dropbox.com/u/27675057/ShadowBox/shadowbox.css" rel="stylesheet" type="text/css"></link>
<script src="http://dl.dropbox.com/u/27675057/ShadowBox/shadowbox.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/ShadowBox/demo.js" type="text/javascript">
</script> 
<script type="text/javascript">
Shadowbox.init({ overlayOpacity: 0.8 }, setupDemos);
</script> 

setupDemos is defined in demo.js



4.Now for adding the images into Shadowbox Firstly add the image normally using Insert Image button

Now When you see the code in the edit HTMLwindow it would be something like this

<a href=” large3.jpg”=””><img border=”0″ height=”90″ src=”/small3.jpg” width=”120″ /></a>

Make it like this

<a href=” ” rel=”shadowbox” ><img src=” ” /></a>

As you can see we added only a rel=”shadowbox”.

For adding Gallery the code is


<a class="mustang-gallery" href="http://dl.dropbox.com/u/27675057/red.jpg"><img alt="Red Mustang" class="border" src="http://shadowbox-js.com/gallery/mustang/red-thumb.jpg" /></a>
<a class="mustang-gallery" href="http://dl.dropbox.com/u/27675057/blue.jpg" title="Blue Mustang"><img alt="Blue Mustang" class="border" src="http://shadowbox-js.com/gallery/mustang/blue-thumb.jpg" /></a>



But the Gallery will not function as Shadowbox is not aware of the attributes of the gallery , therefore we have to define the attributes in a js file separately (In this demo that file is demo.js) which then has to called from within Shadowbox.Init()

<script type="text/javascript">
function setupDemos() {

    Shadowbox.setup("a.mustang-gallery", {
        gallery:        "mustang",
        continuous:     true,
        counterType:    "skip"
    });
}
</script> 
<script type="text/javascript">
Shadowbox.init({}, setupDemos);
</script>

Here are Some Examples followed by the demo.js for the specific elements 

Single
<a href="http://shadowbox-js.com/gallery/tiger.jpg" rel="shadowbox"><img alt="Tiger" class="border" src="http://shadowbox-js.com/gallery/tiger-thumb.jpg" /></a>


Gallery
<a class="mustang-gallery" href="http://dl.dropbox.com/u/27675057/red.jpg"><img alt="Red Mustang" class="border" src="http://shadowbox-js.com/gallery/mustang/red-thumb.jpg" /></a>&nbsp;&nbsp;<a class="mustang-gallery" href="http://dl.dropbox.com/u/27675057/blue.jpg" title="Blue Mustang"><img alt="Blue Mustang" class="border" src="http://shadowbox-js.com/gallery/mustang/blue-thumb.jpg" /></a>&nbsp;&nbsp;<a class="mustang-gallery" href="http://dl.dropbox.com/u/27675057/grey.jpg"><img alt="Grey Mustang" class="border" src="http://shadowbox-js.com/gallery/mustang/grey-thumb.jpg" /></a>

SWF
<a href="http://shadowbox-js.com/gallery/skip.swf" rel="shadowbox;width=400;height=300" title="Girl Skipping"><img alt="" class="border" src="http://shadowbox-js.com/gallery/skip-thumb.gif" /></a>

Gallery SWF
<a class="swf-gallery" href="http://shadowbox-js.com/gallery/caveman.swf" rel="width=520;height=390" title="Caveman"><img alt="" class="border" src="http://shadowbox-js.com/gallery/caveman-thumb.gif" /></a>&nbsp;&nbsp;<a class="swf-gallery hidden" href="http://shadowbox-js.com/gallery/old_man.swf" rel="width=600;height=450" title="Hollywood or Bust"><img alt="" class="border" src="http://shadowbox-js.com/gallery/caveman-thumb.gif" /></a>&nbsp;&nbsp;<a class="swf-gallery hidden" href="http://shadowbox-js.com/gallery/skip.swf" rel="width=400;height=300" title="Girl Skipping"><img alt="" class="border" src="http://shadowbox-js.com/gallery/caveman-thumb.gif" /></a>

YouTube Video
<a rel="shadowbox;width=405;height=340;player=swf" title="Ebon Coast" href="http://www.youtube.com/v/lSnWhsmlGec&amp;hl=en&amp;fs=1&amp;rel=0&amp;autoplay=1"><img src="http://shadowbox-js.com/gallery/mckee-thumb.jpg" alt="" class="border"></a>

QuickTime
<a rel="shadowbox;width=480;height=204" title="The Dark Knight" href="http://trailers.apple.com/movies/wb/the_dark_knight/the_dark_knight-tlr2_h.480.mov"><img src="http://shadowbox-js.com/gallery/darkknight-thumb.jpg" alt="" class="border"></a>

Yahoo! Video
<a title="Sweetness" href="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.2.40"><img src="http://shadowbox-js.com/gallery/sweetness-thumb.jpg" alt="" class="border"></a>

Vimeo 
<a title="The Last Eggtion Hero" href="http://vimeo.com/moogaloop.swf"><img src="http://shadowbox-js.com/gallery/eggtion-thumb.jpg" alt="" class="border"></a>

Google Video
<a title="While My Ukulele Gently Weeps" href="http://video.google.com/googleplayer.swf"><img src="http://shadowbox-js.com/gallery/ukulele-thumb.jpg" alt="" class="border"></a>

Flash Video
<a rel="shadowbox;width=600;height=450" title="Alien" href="http://dl.dropbox.com/u/27675057/alien.flv"><img src="http://shadowbox-js.com/gallery/alien-thumb.gif" alt="" class="border"></a> 

demo.js

// This file is only required to run some of the demos.

function setupDemos() {

    Shadowbox.setup("a.mustang-gallery", {
        gallery:        "mustang",
        continuous:     true,
        counterType:    "skip"
    });

    Shadowbox.setup("a.swf-gallery", {
        gallery:    "swf",
        continuous: true
    });

    Shadowbox.setup('a[title="Sweetness"]', {
        width: 512,
        height: 322,
        flashVars: {
            id:         "v2155043",
            vid:        "2021599",
            autoPlay:   1
        },
        flashParams: {
            AllowScriptAccess: "always",
            allowFullScreen: "true"
        }
    });

    Shadowbox.setup('a[title="The Last Eggtion Hero"]', {
        height:     360,
        width:      640,
        flashVars:  {
            clip_id:    "1893986",
            autoplay:   "1"
        }
    });

    Shadowbox.setup('a[title="While My Ukulele Gently Weeps"]', {
        height:     327,
        width:      400,
        flashVars:  {
            docid:    "1352016870638076087",
            autoplay: "1"
        }
    });


}
5.Now save the Post/Page and see the magic.

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself !


Another Important thing to note is that all the images used in this tutorial like Next button ,Previous button ,etc are all hosted on Google Code service which are the fastest and most reliable servers on the internet with the least downtime.So you can easily implement this with no hassles for Image Hosting.
             

Implementing Floatbox in Blogger

Floatbox is a javascript library for displaying windowed content over top of web pages. In addition to excellent ‘lightbox clone’ capabilities, Floatbox includes the ability to show cycling image sets, enhanced tooltips and popup thumbnails. All content types are supported and there is an extensive and reliable API and suite of library functions included which make Floatbox the tool of choice for building smart interactive content. Floatbox is highly customizable, easy to deploy, and very robust and reliable across all modern browsers.Floatbox strives to be the best-of-breed with features and capabilities web-site designers need to build quality 3-dimensional sites and services.

             
Steps to Add it to Blogger:




1.Login to the Blogger account.


2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it.

<link href="http://dl.dropbox.com/u/27675057/floatbox/floatbox.css" rel="stylesheet" type="text/css"></link> 
<script src="http://dl.dropbox.com/u/27675057/floatbox/floatbox.js" type="text/javascript">
</script>

2.Go to the Post/Page you want to add the Floatbox and go to Edit HTML tab .


3.Now copy the code from below and paste it there.


<link href="http://dl.dropbox.com/u/27675057/floatbox/floatbox.css" rel="stylesheet" type="text/css"></link> 
<script src="http://dl.dropbox.com/u/27675057/floatbox/floatbox.js" type="text/javascript">
</script> 



4.Now for adding the images into FloatBox, Firstly add the image normally using Insert Image button

Now When you see the code in the edit HTMLwindow it would be something like this

<a href=” large3.jpg”=””><img border=”0″ height=”90″ src=”/small3.jpg” width=”120″ /></a>

Make it like this

<a href=” ” class=”floatbox” data-fb-options=”group:pix1″ ><img src=” ” /></a>

As you can see we added only a class=”floatbox” and a ‘data-fb-options’ tag

For adding a Gallery 
<a href=” ” class=”floatbox” data-fb-options=”group:pix” ><img src=” ” /></a>
<a href=” ” class=”floatbox” data-fb-options=”group:pix” ><img src=” ” /></a>
Make sure that the group of the elements of the Gallery should be the same

The amount  of Options available in this plugin are really too many ,Please refer this Page for further Reference.


Even the types of data this small plugin supports is mind blowing 


Some of the Example Code 

<b>Images</b>

Single 
<a class="floatbox" data-fb-options="group:pix1" href="http://dl.dropbox.com/u/27675057/1%282%29.jpg" title="Speed"><img alt="" height="67" src="http://dl.dropbox.com/u/27675057/1%20%5B320x200%5D.jpg" width="90" /></a> 


Gallery
<a class="floatbox" data-fb-options="group:pix " href="http://dl.dropbox.com/u/27675057/1%282%29.jpg" title="Speed"><img alt="" height="67" src="http://dl.dropbox.com/u/27675057/1%20%5B320x200%5D.jpg" width="90" /></a> <a class="floatbox" data-fb-options="group:pix caption2:`Need For Speed`" href="http://dl.dropbox.com/u/27675057/3%20%282%29.jpg" title="Speeding"><img alt="" height="67" src="http://dl.dropbox.com/u/27675057/3%20%5B320x200%5D.jpg" width="90" /></a> <a class="floatbox" data-fb-options="group:pix " href="http://dl.dropbox.com/u/27675057/2.png" title="Hot Pursuit"><img alt="" height="67" src="http://dl.dropbox.com/u/27675057/2%20%5B320x200%5D.png" width="90" /></a> 

Thumbnail Gallery
<a class="floatbox" data-fb-options="group:pix2 numIndexLinks:-1" href="http://dl.dropbox.com/u/27675057/1%282%29.jpg" title="Speed"><img alt="" height="67" src="http://dl.dropbox.com/u/27675057/1%20%5B320x200%5D.jpg" width="90" /></a> <a class="floatbox" data-fb-options="group:pix2 numIndexLinks:-1 caption2:`Need For Speed`" href="http://dl.dropbox.com/u/27675057/3%20%282%29.jpg" title="Speeding"><img alt="" height="67" src="http://dl.dropbox.com/u/27675057/3%20%5B320x200%5D.jpg" width="90" /></a> <a class="floatbox" data-fb-options="group:pix2 numIndexLinks:-1" href="http://dl.dropbox.com/u/27675057/2.png" title="Hot Pursuit"><img alt="" height="67" src="http://dl.dropbox.com/u/27675057/2%20%5B320x200%5D.png" width="90" /></a> 

Slideshow
<a class="floatbox" data-fb-options="group:pix3 doSlideshow:true  navType:button" href="http://dl.dropbox.com/u/27675057/1%282%29.jpg" title="Speed"><img alt="" height="67" src="http://dl.dropbox.com/u/27675057/1%20%5B320x200%5D.jpg" width="90" /></a> <a class="floatbox" data-fb-options="group:pix3 doSlideshow:true  navType:button caption2:`Need For Speed`" href="http://dl.dropbox.com/u/27675057/3%20%282%29.jpg" title="Speeding"><img alt="" height="67" src="http://dl.dropbox.com/u/27675057/3%20%5B320x200%5D.jpg" width="90" /></a> <a class="floatbox" data-fb-options="group:pix3 doSlideshow:true  navType:button" href="http://dl.dropbox.com/u/27675057/2.png" title="Hot Pursuit"><img alt="" height="67" src="http://dl.dropbox.com/u/27675057/2%20%5B320x200%5D.png" width="90" /></a> 

APOD Slideshow
<a class="floatbox" data-fb-options="group:pix4 colorTheme: 'custom',
        splitResize: 'auto',
        resizeDuration: 4,
        imageFadeDuration: 4,
        overlayFadeDuration: 7,
        overlayOpacity: 100,
        navType: 'button',
        roundCorners: 'none',
        shadowSize: 8,
        outerBorder: 3,
        innerBorder: 2,
        enableDragResize: false,
        preloadAll: false,
        loadPageOnClose: 'back',
        doSlideshow: true,
        slideInterval: 3,
        randomOrder: true,
        framed: true,
        enableQueryStringOptions: true" href="http://dl.dropbox.com/u/27675057/1%282%29.jpg" title="Speed"><img alt="" height="67" src="http://dl.dropbox.com/u/27675057/1%20%5B320x200%5D.jpg" width="90" /></a> <a class="floatbox" data-fb-options="group:pix4 caption2:`Need For Speed`colorTheme: 'custom',
        splitResize: 'auto',
        resizeDuration: 4,
        imageFadeDuration: 4,
        overlayFadeDuration: 7,
        overlayOpacity: 100,
        navType: 'button',
        roundCorners: 'none',
        shadowSize: 8,
        outerBorder: 3,
        innerBorder: 2,
        enableDragResize: false,
        preloadAll: false,
        loadPageOnClose: 'back',
        doSlideshow: true,
        slideInterval: 3,
        randomOrder: true,
        framed: true,
        enableQueryStringOptions: true" href="http://dl.dropbox.com/u/27675057/3%20%282%29.jpg" title="Speeding"><img alt="" height="67" src="http://dl.dropbox.com/u/27675057/3%20%5B320x200%5D.jpg" width="90" /></a> <a class="floatbox" data-fb-options="group:pix4 colorTheme: 'custom',
        splitResize: 'auto',
        resizeDuration: 4,
        imageFadeDuration: 4,
        overlayFadeDuration: 7,
        overlayOpacity: 100,
        navType: 'button',
        roundCorners: 'none',
        shadowSize: 8,
        outerBorder: 3,
        innerBorder: 2,
        enableDragResize: false,
        preloadAll: false,
        loadPageOnClose: 'back',
        doSlideshow: true,
        slideInterval: 3,
        randomOrder: true,
        framed: true,
        enableQueryStringOptions: true" href="http://dl.dropbox.com/u/27675057/2.png" title="Hot Pursuit"><img alt="" height="67" src="http://dl.dropbox.com/u/27675057/2%20%5B320x200%5D.png" width="90" /></a>



<b>HTML Content</b>

iFrame
<a class="floatbox" data-fb-options="width:650 height:92% splitResize:auto disableScroll:true showNewWindow:true showPrint:true mobileNewWindow:true enableDragResize:true" href="http://dl.dropbox.com/u/27675057/viewdocs.htm">Floatbox Instructions</a>

AJAX Content
<a class="floatbox" data-fb-options="type:ajax width:500 caption:`AJAX Content`" href="http://dl.dropbox.com/u/27675057/ajax1.htm">AJAX Content</a>

Inline DIV Content
<a class="floatbox" href="http://www.blogger.com/post-edit.g?blogID=7521351820124661054&amp;postID=796114881949317387#inline" title="Inline DIV">Inline DIV Content</a>
<div id="inline" style="color: black; display: none; width: 450px;">
<div style="padding: 0px 18px;">
This content is loaded from a hidden DIV on the host page.
Links inside hidden DIV content have the same behaviour as described for AJAX content.
See the <a class="floatbox" data-fb-options="type:ajax width:500 scrolling:no caption:`AJAX Content`" href="http://dl.dropbox.com/u/27675057/ajax1.htm?">AJAX example</a> for details.
</div>
<img alt="Mandelbrot set" height="338" src="http://randomous.com/floatbox/images/mandelbrot.jpg" style="border-width: 0; margin-bottom: -3px; margin: 0; padding: 0;" width="450" /> </div>

IE 6 end-of-life screen
<a href="http://dl.dropbox.com/u/27675057/ie6eol.js" onclick="fb.executeJS('ie6eol.js'); return false;">IE 6 end-of-life screen</a>

E-Mailer Form
<a class="floatbox" data-fb-options="width:345 height:460 scrolling:no caption:`Demo Form` captionPos:tc showClose:false" href="http://dl.dropbox.com/u/27675057/demo_form.htm" title="Demo Form">E-Mailer Form</a>

RSS news reader
<a class="floatbox" data-fb-options="width:420 height:150 enableDragResize:true caption:`RSS News Feed&lt;br /&gt;&lt;span style=&quot;font-size:.8em;&quot;&gt;(click the headlines)&lt;/span&gt;`" href="http://randomous.com/floatbox/newsfeed/">RSS news reader</a>

Nested (Stacked) Floatbox Content
<a class="floatbox" data-fb-options="width:93% height:90%" href="http://dl.dropbox.com/u/27675057/demo%20%281%29.htm">Nested (Stacked) Floatbox Content</a>

<b>Multimedia</b>

<div class="floatbox" data-fb-options="type:video enableDragResize:true outerBorder:0">
<a data-fb-options="width:640 height:390" href="http://www.youtube.com/embed/iNTX55Rpk8w?rel=0&amp;hd=1">YouTube</a>

<a data-fb-options="width:600 height:338" href="http://player.vimeo.com/video/13487624">Vimeo</a>

<a data-fb-options="width:480 height:360" href="http://www.dailymotion.com/embed/video/x2hlmy?theme=none">DailyMotion</a>

<a data-fb-options="width:480 height:384" href="http://randomous.com/floatbox/kermit" title="Once In a Lifetime">Local: flowplayer flv</a></div>

Flash
<a class="floatbox" data-fb-options="width:80% height:61.8%w enableDragResize:true caption:`Tetka (the mouse works)`" href="http://randomous.com/floatbox/tetka.swf?scale=default">Flash (Tetka)</a>

Silverlight
<a href="http://randomous.com/floatbox/clock.xap" class="floatbox" data-fb-options="width:600 height:300 colorTheme:black caption:`Silverlight sample`">Silverlight (Clock)</a>

Quicktime movie
<a href="http://randomous.com/floatbox/quicktime.mov" class="floatbox" data-fb-options="width:480 height:376 caption:`Quicktime Example`">Quicktime movie</a>

Windows Media Video
<a href="http://randomous.com/floatbox/big_slip.wmv" class="floatbox" data-fb-options="width:482 height:336 enableDragResize:true caption:`Windows Media Video`">Windows Media Video</a>

PDF
<a href="http://randomous.com/floatbox/pdf_open_parameters.pdf#page=5&navpanes=0" class="floatbox" data-fb-options="caption:href enableDragResize:true">PDF Document</a>

YouTube HD
<a href="http://www.youtube.com/watch?v=-zvCUmeoHpw&amp;hd=1" class="floatbox" data-fb-options="width:1280 height:745 autoFitMedia:true enableDragResize:true caption:`Asteroid Impact (HD)`">YouTube (Asteroid Impact HD)</a>

YouTube (Lego Antikythera Mechanism)
<a href="http://www.youtube.com/v/RLPVCJjTNgk" class="floatbox data-fb-options="width:640 height:385">YouTube (Lego Antikythera Mechanism)</a>

Vimeo (Where The Hell Is Matt?)
<a href="http://www.vimeo.com/1211060" class="floatbox" data-fb-options="width:800 height:450 enableDragResize:true caption:`www.wherethehellismatt.com`">Vimeo (Where The Hell Is Matt?)</a>

Vimeo (Matt's first)
<a href="http://www.vimeo.com/moogaloop.swf?clip_id=1019038&amp;fullscreen=1" class="floatbox" data-fb-options="width:400 height:302 caption:`www.wherethehellismatt.com`">Vimeo (Matt's first)</a>

Vevo (Jamie Cullum)
<a href="http://www.vevo.com/watch/GBL420300004" class="floatbox" data-fb-options="width:80% height:56%w">Vevo (Jamie Cullum)</a>

Vevo (Sting)
<a href="http://www.vevo.com/VideoPlayer/Embedded?videoId=USIV20500266" class="floatbox" data-fb-options="width:80% height:56%w">Vevo (Sting)</a>

Metacafe (Natural Wonders)
<a href="http://www.metacafe.com/fplayer/947767/natural_wonders.swf" class="floatbox" data-fb-options="caption:`Natural Wonders` height:80%w enableDragResize:true">Metacafe (Natural Wonders)</a>

Dailymotion (Adrian Belew)
<a href="http://www.dailymotion.com/swf/k8mRGOgKOiUjxWg4TB" class="floatbox" data-fb-options="width:425 height:344 caption:`Adrian Belew - Oh, Daddy`">Dailymotion (Adrian Belew)</a>

<b>Some Special Features</b>

Image and Thumbnail Cycler
<div class="fbCycler floatbox" data-fb-options="cyclePauseOnHover:true group:utah imageFadeDuration:0 centerNav:true" style="height:112px;">
<a href="http://dl.dropbox.com/u/27675057/floatbox/courthouse.jpg">
<img src="http://dl.dropbox.com/u/27675057/floatbox/courthouse_thm.jpg" alt="" />
<span>the courthouse</span>
</a>
<a href="http://randomous.com/floatbox/images/zion_valley.jpg">
<img src="src="http://randomous.com/floatbox/images/blank.gif" data-fb-src="http://dl.dropbox.com/u/27675057/floatbox/zion_valley_thm.jpg" alt="" />
<span>zion valley</span>
</a>

</div>

Popup Thumbnails
<a class="floatbox fbPopdown" href="http://dl.dropbox.com/u/27675057/floatbox/courthouse.jpg" data-fb-options="caption:`Couthouse`">Popdown<img src="http://dl.dropbox.com/u/27675057/floatbox/courthouse_thm.jpg" width="100" height="75" alt="" /></a>





Info link, Print link, and a Tooltip
<a href="http://dl.dropbox.com/u/27675057/floatbox/courthouse.jpg" class="floatbox" data-fb-options="showPrint:true info:http://randomous.com/floatbox/demo#sample_info infoOptions:`width:400 showPrint:true printCSS:/includes/main.css backgroundColor:#ffffe7` tooltip:#tooltip4 tooltipOptions:`moveWithMouse:true` caption:`Courthouse`"><img src="http://dl.dropbox.com/u/27675057/floatbox/courthouse_thm.jpg" alt="" /></a>
<div id="tooltip4" style="display:none; width:338px;">
<div style="float:left;">
<img src="http://randomous.com/floatbox/images/sailboat.png" width="50" height="40" alt="" style="margin:4px 0 0 4px; border-width:0;" /> 
</div>
<div style="float:right; font-size:12px; margin:8px 0; width:270px;">
Here's the tooltip we added.

Be sure to try out the Info and Print links below.
</div>
</div>

Enhanced Tooltips
<img class="fbTooltip" data-fb-tooltip="source:#tooltip1 attachToHost:true" src="http://randomous.com/floatbox/images/tulip-icon.png" />

<div id="tooltip1" style="display:none; width:300px;">
<div style="float:left;">
<a href="http://randomous.com/floatbox/images/lillies.jpg" class="floatbox"
 data-fb-options="colorTheme:custom controlsPos:tr cornerRadius:12 outerBorder:2"> 
<img src="http://randomous.com/floatbox/images/flower.png" width="80" height="66" alt="" style="margin:4px 0 0 4px; border-width:0;" /> 
</a> This is a static tooltip.
Tooltips can be styled with html/css and all the usual floatbox settings.

The flower is a clickable anchor.
</div>
</div>

Google Maps
<a href="http://randomous.com/floatbox/googleMap" class="floatbox" data-fb-options="width:500 height:500 scrolling:no mobileNewWindow:true controlsPos:tr"> 
<img src="http://randomous.com/floatbox/images/cambodia.png" width="32" height="32" alt="" style="border:none; margin-bottom:-5px;" /> 
&nbsp;Show me the way!</a> 

Even this doesn’t complete the whole list but I am too exhausted to include the remaining 8-9 demos.If you want to see all the demos visit their Demo Page.

5.Now save the Post/Page and see the magic(Truly this Plugin is really a piece of magic,Hats off to the creator).


If you liked this plugin, then support the developer by buying this plugin

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!


Another Important thing to note is that all the images used in this tutorial like Next button ,Previous button ,etc are all hosted on Google Code service which are the fastest and most reliable servers on the internet with the least downtime.So you can easily implement this with no hassles for Image Hosting.