Skip to main content

Posts

Showing posts from May, 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     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 metho

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. Login to your blogger Layout Click on Edit HTML 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; } #imageC