Tuesday, May 18, 2010

posting code snippets to blogger

When you try to post any code snippet, which related to web applications, If you directly include them into the post with blockquotes, you could never say whether its going to display as it is. because the browser transforms the html code as per the tags. So, its important to post the code with the correct formats. There is a cool site, which converts code snippets to cope with posting on a blog page.

The interface is like the following.


you have to paste your code into 'Enter Markup' text box, and click process, then the site will return the HTML safe code in the second text box, also you can see the preview of the code.


This is the site name : http://www.simplebits.com/cgi-bin/simplecode.pl

Blogger: Beyond the Basics: Customize and promote your blog with original templates, analytics, advertising, and SEO (From Technologies to Solutions)   Google Blogger For Dummies

Then you can cut and paste the code which returned on the second box to the required place with block quotes. So the code will be displayed correctly. There are also some advanced methods and styles to post the code snippet to the blogger also available, but for this method, you might not need to do any further change on code.

Monday, May 17, 2010

lightbox Image viewer for blogger

Its normally very hard with blogger pages when we click on an image. It opens the image on the browser.
When i roam around to find any alternative to show the pictures on a separate shadow pop-up, I found some cool script which uses scriptaculous and prototype. Follows the steps.

  1. Login to your blogger Layout
  2. Click on Edit HTML
  3. Find the </head> tag and replace it with the following

<!--Light Box Code Starts-->
<style>
#lightbox{    position: absolute;    left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://lh5.ggpht.com/_u4gySN2ZgqE/SnWk89-4azI/AAAAAAAAAj8/hM0MqnVouCQ/prevlabel%5B3%5D.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://lh6.ggpht.com/_u4gySN2ZgqE/SnWk9-mNiQI/AAAAAAAAAkA/Zg1jXV9xnQM/nextlabel%5B6%5D.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%    ; }
#imageData{    padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold;    }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }        
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/>
<script src='http://script.aculo.us/scriptaculous.js' type='text/javascript'/>
<script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>
<!--Light Box Code Ends-->
</head>

Now you have enabled javascript based lightbox.

Google Blogger For Dummies    Creating Unique Websites With Blogger    ProBlogger: Secrets for Blogging Your Way to a Six-Figure Income

To enable this to the images you upload, do the following
  1. Insert Image
  2. Switch the editor to 'Edit HTML'
There is an anchor tag for each of the picture you uploaded.
Insert the following code if you want to open the image as separate one ( there is no next, prev)
rel = "lightbox" title = "Caption of your Image"
Insert the following code, if your image is part of an album (set of images)
 rel = "lightbox[album_name]" title = "Caption of your Image"
Sometimes, the image is too bigger for showing on the window. To handle that, Check the 'href' value of the anchor. There you can find something like '/s1600' (if you found '/s1600-h', remove '-h'). s1600 means the x-large or original size of the image. so you can replace it with '/s640', which is suitable within the monitor.

Examples
  • Single Image


  • Album Images