Implementing TopUp in Blogger

TopUp is an easy to use Javascript library for unobtrusively displaying images and webpages in a Web 2.0 approach of popups. The library is jQuery and jQuery UI driven in order to maintain cross-browser compatibility and compactness.

TopUp offers the following advantages:


TopUp is absolutely free, also for commercial use (view the license)
A very easy setup process: only one(!) include and nothing more
Using TopUp presets keeps your HTML code 100% clean, no extra code needed whatsoever

             

Steps to Add it to Blogger:

1.Login to the Blogger account.

• For Multiple Usage
• For Single Usage

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://gettopup.com/releases/latest/top_up-min.js"></script>

Note: This is a easy setup but has one downside , that if the gettopup.com servers go down then it will not work .I will give a standalone tutorial for this Plugin at the earliest. 

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

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

<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>

Note: This is a easy setup but has one downside , that if the gettopup.com servers go down then it will not work .I will give a standalone tutorial for this Plugin at the earliest. 

4.Now for adding the images into TopUp ,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 

<div id="examples>" <a href="large3.jpg"><img border="0" height="90" src="/small3.jpg" width="120" /></a> </div>

And also add a JavaScript snippet 

<script type="text/javascript"> 
      TopUp.addPresets({
        "#images a": {
          fixed: 0,
          group: "examples",
          modal: 0,
          title: "Example"
        },
      });
    </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 !