Wednesday 30 January 2013

How to use prettify with blogger/blogspot?

Following is the trick that will guide you to implement the same in your blogger blog.

Step -1 )   Go to your blogger dashboard -> Template -> Edit HTML -> Proceed

Step-2)    Copy the following snippet and paste it immediately after "<head>"

<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/>

<style>

code.prettyprint, pre.prettyprint{

font-family: Courier,monospace,Courier New;

    font-size: 13px;

    color: rgb(0, 0, 0);

    border: 2px dashed rgb(222, 222, 222);

    padding: 10px;

    line-height: 16px;

    width: 547px;

}

code, pre{

white-space: pre-wrap; /* css-3 */

white-space: -moz-pre-wrap; /* Mozilla, since 1999 */

white-space: -pre-wrap; /* Opera 4-6 */

white-space: -o-pre-wrap; /* Opera 7 */

word-wrap: break-word; /* Internet Explorer 5.5+ */

}

</style>

<script language='javascript' src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'/>

<script language='javascript' src='http://google-code-prettify.googlecode.com/svn/trunk/src/lang-css.js' type='text/javascript'/>
 
Step-3)  Now replace "<body>" with "<body onload='prettyPrint()'>"

Step-4) Click "SAVE TEMPLATE"

Step-5)  Come back to Blogger Dashboard -->Posts-->New Post.

Step-6)  The programming code snippen that you put in, needs to have its HTML cleaned from. Hence to do this just paste your code in here: http://www.simplebits.com/cgi-bin/simplecode.pl

Step-7) Put your code inside a "<pre>" tag and add a "prettyprint" class to your <pre> tag Ex:  
<pre class="prettyprint">int foo=0;
NSLog(@"%i", foo);
</pre>

 OR
<pre class="prettyprint">int foo=0; NSLog(@"%i", foo); </pre>
Step-8) In your Blogger Text Editor, switch from Compose mode to HTML mode

Step-9) Paste it into blogger and publish it.
Read More

JQuery Autocomplete

Read More

jQuery Time Entry

Download Here:Click Here

Read More

HTML Comment


<!DOCTYPE html>
<html>
<body>

<!--This is a comment. Comments are not displayed in the browser-->
<p>This is a paragraph.</p>

</body>
</html>

Read More

Tuesday 29 January 2013

Related Posts Widget With Thumbnails


related posts widget
Adding Related Posts Widget is the smart way to increase your blog’s page views and your blog’s visits. This widget shows the related posts widget at the bottom of the posts because when your reader have read one post then it will attract your reader to read related posts so your visits will increase ! 

Just follow the simple steps to add related posts widget

1. Open linkwithin 

2. Now enter your Details and click on get widget 
related posts widget 2
3. Now just click on INSTALL Widget (see the bellow snapshot ) 

related posts widget 3
4. Now just select your blog and click on Add Widget.(see the bellow snapshot) 
related posts widget 4
And you have Done !
Read More

Reload Page Using JQuery


<!DOCTYPE html>
<html>
<head>
<script>
function reloadPage()
  {
  location.reload()
  }
</script>
</head>
<body>

<input type="button" value="Reload page" onclick="reloadPage()">

</body>
</html> 


Syntax

location.reload(forceGet)


Parameter Type Description
forceGet Boolean Optional. default false which reloads the page from the cache. Set this paramter to true if you want to force the browser to get the page from the server

Return Value

No return value

Read More

Blogger

Related Posts Plugin for WordPress, Blogger...