How to Add Syntax Highlighting in Blogger Post?

This Post totally write by Matthew V Ball and his post is Adding Syntax Highlighting to Blogger.


Step 1. Go to this link, then perform a "select all" and "copy". The css information is now in the clipboard.


Step 2. Paste the css information at the end of the css section of your blogger html template (i.e., after <b:skin><!--[CDATA[/* and before ]]--></b:skin>).


Step 3.Before the </head> tag, paste the following:

<!-- Add-in CSS for syntax highlighting -->
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>

Step 4. Before the tag, insert the following:

<!-- Add-in Script for syntax highlighting -->
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

Step 5. Use the "Preview" button to make sure your website is correct, then click "Save Template".


Step 6. When composing a blog entry that contains source code, click the "Edit Html" tab and put your source code (with html-escaped characters) between these tags:

<pre name="code" class="cpp">
...Your html-escaped code goes here...
</pre>

(Note: This article is somewhat dated because SyntaxHighlighter 2.0 was released in February 2009. However, this article is still valid for those who prefer the older 1.5.x version or who don't want to upgrade)

How to Make Mouseover Navigation Menu withh CSS?

If you want add navigation menu with CSS in your blog this is very east to put your blog.Navigation menu is the process of reading, and controlling the movement of a craft or vehicle from one place to another.


Demo: Mouseover Navigation Menu



Step 1 : Log in your Blogger Account



Step 2 : Go To Layout

Step 3 : Edit HTML

Step 4 : Then find HTML and copy blow Code before this " ]]></b:skin> " and Save Template.

<style>
/* menu bar */
#menubar{ /*menu container*/
background-color:#e1e1e1; /*change or delete*/
padding:0;
margin:0;
}

.btnmenu ul{
font: 15px verdana;
padding: 0;
margin: 0;
}

.btnmenu ul li{
list-style: none;
display: inline;
padding:0;
margin:0;
}

.btnmenu ul li a{
padding: 2px 20px; /* 5px top & bottom, 20px L & R */
text-decoration: none;
float: left;
background-color:#e1e1e1; /*graceful degradation for IE*/
color: black;
border: solid #e1e1e1;
border-width: 4px 1px;
/* radius = 1/2 * (font height + top&bottom padding) */
-webkit-border-radius: 9px; /*firefox*/
-moz-border-radius: 9px; /*Safari*/
border-radius: 9px; /*CSS3*/
}

.btnmenu ul li a:hover{
padding:1px 20px 3px 20px; /* shift text 1px up */
background-color: #FFFFFF; /*You Can Change This Color*/
border-style: outset;
}

.btnmenu ul li a:active{
padding:3px 20px 1px 20px; /* shift text 1px down */
border-style: inset;
}

</style>
<div id='menubar'>
<div class='btnmenu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Link #1</a></li>
<li><a href='#'>Another Link</a></li>
</ul>
</div>
<div style='clear:both;'></div>
</div>

Yahoo Smileys Emotions Hack in Comment Section

This post is not unique but my friend asked me that how add yahoo smileys emotions in blogger comment now I post this hacks from help of anshuldudeja.com and I also this hack in my blog enjoy this yahoo smileys emotions hack.

Step 1 : Login your Blogger Account

Step 2 : Go to Layout



Step 3 : Open Edit HTML and Check on Expand Widgets Templates



Step 4 : Now Find below Code

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<h3><a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a></h3>
</b:if>
</b:if>
</p>
</b:if>

Step 5 :Replace the above codes with below one

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
</b>
</div>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</b:if>

Step 6 : Now find the </body> tag and paste the following script just before it.

<script src='http://bandofgirls.googlepages.com/smiley.js' type='text/javascript'/><noscript><a href="http://anshuldudeja.blogspot.com" target="_blank">Blogger Widgets</a></noscript>

Customize Footer Section with Three Columns

Footer Section is important for bloggers because this section visibility attract visitor so in this Customize Footer Section with Three Columns in a very tutorial lets start.


1.Log in to your Dashboard

2.Go to Layout


3.Then Edit HTML

2.Click on "Expand Widget Templates"


3.Scroll down to where you see this

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

4.Replace the Code With:

<b:section class='footer' id='footer'/> of above code,with below code.
<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>

5.Now find the </b:skin> tag in your template.

6.Immediately before above line, add the below lines of code:

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

7.Click on "Save Templates" and Done.

Share Your Articles on Google Buzz Another Good Social Nework For Blogger

Google came Buzz, a new attempt by Google to be part of the interactions in real time and to link their services with each other. Surely at this time not so many Google users Buzz as social networks par excellence, but from now, you can provide a button to share your articles on Google Buzz.

Step 1 : Login Blogspot.com

Step 2 : Go to Layout then Edit HTML




Step 3: Check on "Expand Widget Templates"


Step 4: Find(Ctrl+v) this Code :

class='post-footer-line post-footer-line-3'>

Step 5 : Just add the following code below

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcTitle=&quot; + data:blog.title+ &quot;&amp;srcURL=&quot; + data:blog.homepageUrl ' rel='nofolloW' style='text-decoration:none;' target='_blank'>
<img alt='Buzz It' src='http://i49.tinypic.com/25yy8pd.png' style='border:0px;'/></a>

Step 6 : Save Template and Done

Make Visible Your Comments to Your Visitor

Make visible your comments to your visitor with different font,background and border so in this post I create a tutorial for "How to highlight author comment in blogger comment section."
Lets start and follow steps

Step 1 : Log in Blogspot.com

Step 2 : Go To Layout


Step 3 : Click on Edit HTML


Step 4 : Check on "Expand Widget Template"


Step 5 : Copy this script and put it before ]]></b:skin>

.comment-body-author
{
background: #fff; /* Background color*/
color: #000; /* Text color*/
border-top: 1px dotted #F98B09;border-bottom: 1px dotted #F98B09;border-left: 1px dotted #F98B09;border-right: 1px dotted #F98B09;
margin:0;
padding:0 0 0 20px; /* Position*/
}

Step 5: Find this code paste Red Code with following sequence:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said...
</dt>

<b:if cond='data:comment.author == data:post.author'> <dd class='comment-body-author'> <p><data:comment.body/></p> </dd> <b:else/>


<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>


</b:if>


<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:
comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Look Like this Example



Demo


Note : You can Change CSS Style
background: #fff; /* Background color*/
color: #00000; /* Text color*/

How to add Animated Sexy Social Bookmarks Blogger?

Here a widget that is Sexy Social Bookmarks in animated action and almost include good social network site added.Social bookmarking is a method for Internet users to share, organize, search, and manage bookmarks of web resources. Unlike file sharing, the resources themselves aren't shared, merely bookmarks that reference them.
Social networking is very useful tools to get huge traffic.
Start to add this follow steps


Step 1: Login to Blogspot.com

Step 2: Click on Layout

Step 3: Then click Edit HTML


Step 4: Download Full Template


Step 5: Mark on Expand Widget Templates


Step 6: Find the code like this : </head>

Step 7:. Copy below code and paste it before </head>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function() {
// xhtml 1.0 strict way of using target _blank
jQuery('.sexy-bookmarks a.external').attr("target", "_blank");
// this block sets the auto vertical expand when there are more than
// one row of bookmarks.
var sexyBaseHeight=jQuery('.sexy-bookmarks').height();
var sexyFullHeight=jQuery('.sexy-bookmarks ul.socials').height();
if (sexyFullHeight>sexyBaseHeight) {
jQuery('.sexy-bookmarks-expand').hover(
function() {
jQuery(this).animate({
height: sexyFullHeight+'px'
}, {duration: 400, queue: false});
},
function() {
jQuery(this).animate({
height: sexyBaseHeight+'px'
}, {duration: 400, queue: false});
}
);
}
// autocentering
if (jQuery('.sexy-bookmarks-center')) {
var sexyFullWidth=jQuery('.sexy-bookmarks').width();
var sexyBookmarkWidth=jQuery('.sexy-bookmarks:first ul.socials li').width();
var sexyBookmarkCount=jQuery('.sexy-bookmarks:first ul.socials li').length;
var numPerRow=Math.floor(sexyFullWidth/sexyBookmarkWidth);
var sexyRowWidth=Math.min(numPerRow, sexyBookmarkCount)*sexyBookmarkWidth;
var sexyLeftMargin=(sexyFullWidth-sexyRowWidth)/2;
jQuery('.sexy-bookmarks-center').css('margin-left', sexyLeftMargin+'px');
}
});
</script>

<style type="text/css">
div.sexy-bookmarks{margin:20px 0 0 0; border: 0;outline: none;clear:both !important}
div.sexy-bookmarks-expand{height:29px; overflow:hidden}
.sexy-bookmarks-bg-sexy, .sexy-bookmarks-bg-love{background-image:url('http://img31.imageshack.us/img31/176/sexytrans.png') !important; background-repeat:no-repeat}
div.sexy-bookmarks-bg-love{padding:26px 0 0 10px; background-position:left -1148px !important}
div.sexy-bookmarks ul.socials{width:100% !important; margin:0 !important; padding:0 !important; float:left}
div.sexy-bookmarks ul.socials li{display:inline !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:60px !important; cursor:pointer !important; padding:0 !important}
div.sexy-bookmarks ul.socials li:before, div.sexy-bookmarks ul.socials li:after, div.sexy-bookmarks ul.socials li a:before, div.sexy-bookmarks ul.socials li a:after{content:none !important}
div.sexy-bookmarks ul.socials a{display:block !important; width:60px !important; height:29px !important; text-indent:-9999px !important; background-color:transparent !important}
div.sexy-bookmarks ul.socials a:hover{background-color:transparent !important}
.sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumbleupon, .sexy-stumbleupon:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoobuzz, .sexy-yahoobuzz:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-scriptstyle, .sexy-scriptstyle:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-comfeed, .sexy-comfeed:hover, .sexy-newsvine, .sexy-newsvine:hover, .sexy-linkedin, .sexy-linkedin:hover, .sexy-google, .sexy-google:hover, .sexy-friendfeed, .sexy-friendfeed:hover{background:url('http://img717.imageshack.us/img717/3006/sexyspritenew.png') no-repeat !important;border: 0;outline: none;}
.sexy-digg{background-position:-980px bottom !important}
.sexy-digg:hover{background-position:-980px top !important}
.sexy-reddit{background-position:-700px bottom !important}
.sexy-reddit:hover{background-position:-700px top !important}
.sexy-stumbleupon{background-position:-630px bottom !important}
.sexy-stumbleupon:hover{background-position:-630px top !important}
.sexy-delicious{background-position:-1190px bottom !important}
.sexy-delicious:hover{background-position:-1190px top !important}
.sexy-yahoobuzz{background-position:-1120px bottom !important}
.sexy-yahoobuzz:hover{background-position:-1120px top !important}
.sexy-blinklist{background-position:-1260px bottom !important}
.sexy-blinklist:hover{background-position:-1260px top !important}
.sexy-technorati{background-position:-560px bottom !important}
.sexy-technorati:hover{background-position:-560px top !important}
.sexy-myspace{background-position:-770px bottom !important}
.sexy-myspace:hover{background-position:-770px top !important}
.sexy-twitter{background-position:-490px bottom !important}
.sexy-twitter:hover{background-position:-490px top !important}
.sexy-facebook{background-position:-1330px bottom !important}
.sexy-facebook:hover{background-position:-1330px top !important}
.sexy-mixx{background-position:-840px bottom !important}
.sexy-mixx:hover{background-position:-840px top !important}
.sexy-scriptstyle{background-position:-280px bottom !important}
.sexy-scriptstyle:hover{background-position:-280px top !important}
.sexy-designfloat{background-position:-1050px bottom !important}
.sexy-designfloat:hover{background-position:-1050px top !important}
.sexy-newsvine{background-position:left bottom !important}
.sexy-newsvine:hover{background-position:left top !important}
.sexy-google{background-position:-210px bottom !important}
.sexy-google:hover{background-position:-210px top !important}
.sexy-comfeed{background-position:-420px bottom !important}
.sexy-comfeed:hover{background-position:-420px top !important}
.sexy-linkedin{background-position:-70px bottom !important}
.sexy-linkedin:hover{background-position:-70px top !important}
.sexy-friendfeed{background-position:-1750px bottom !important}
.sexy-friendfeed:hover{background-position:-1750px top !important}
.sexy-link{ margin-left:25px; float:left}
.sexy-link A{padding:10px 0; width:470px; text-align:right; border:0; outline:none}</style>

Step 8 : Find <data:post.body/> and replace with below code

<div class='sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love' style='margin:20px 0 0 0 !important; padding:25px 0 0 10px !important; height:29px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;'>
<ul class='socials'>
<li class='sexy-delicious'><a class='external' expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on del.icio.us'>Share this on del.icio.us</a></li>
<li class='sexy-digg'><a class='external' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Digg this!'>Digg this!</a></li>
<li class='sexy-stumbleupon'><a class='external' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'>Stumble upon something good? Share it on StumbleUpon</a></li>
<li class='sexy-reddit'><a class='external' expr:href='&quot;http://reddit.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Reddit'>Share this on Reddit</a></li>
<li class='sexy-google'><a class='external' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Add this to Google Bookmarks'>Add this to Google Bookmarks</a></li>
<li class='sexy-twitter'><a class='external' expr:href='&quot;http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; (@NAME)&quot;' rel='nofollow' title='Tweet This!'>Tweet This!</a></li>
<li class='sexy-facebook'><a class='external' expr:href='&quot;http://www.facebook.com/share.php?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Facebook'>Share this on Facebook</a></li>
<li class='sexy-mixx'><a class='external' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url' rel='nofollow' title='Share this on Mixx'>Share this on Mixx</a></li>
<li class='sexy-comfeed'><a class='external' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='nofollow' title='Subscribe'>Subscribe</a></li>
<li class='sexy-yahoobuzz'><a class='external' expr:href='&quot;http://buzz.yahoo.com/submit/?submitUrl=&quot; + data:post.url' rel='nofollow' title='Buzz up!'>Buzz up!</a></li>
<li class='sexy-linkedin'><a class='external' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Linkedin'>Share this on Linkedin</a></li>
<li class='sexy-designfloat'><a class='external' expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Submit this to DesignFloat'>Submit this to DesignFloat</a></li>
<li class='sexy-technorati'><a class='external' expr:href='&quot;http://technorati.com/faves?add=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Technorati'>Share this on Technorati</a></li>
<li class='sexy-scriptstyle'><a class='external' expr:href='&quot;http://scriptandstyle.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Submit this to Script &amp; Style'>Submit this to Script &amp; Style</a></li>
<li class='sexy-myspace'><a class='external' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=http&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Post this to MySpace'>Post this to MySpace</a></li>
<li class='sexy-blinklist'><a class='external' expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Blinklist'>Share this on Blinklist</a></li>
<li class='sexy-friendfeed'><a class='external' expr:href='&quot;http://friendfeed.com/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on FriendFeed'>Share this on FriendFeed</a></li>
<li class='sexy-newsvine'><a class='external' expr:href='&quot;http://www.newsvine.com/_tools/seed&amp;save?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Seed this on Newsvine'>Seed this on Newsvine</a></li>
</ul>
<div style='clear:both;'/>
</div>
<div class='sexy-link'> Widget by <a href='http://www.latestbloggertricks.com/' title='Latest and new blogger tricks,tips and hacks'>Latest Blogger Tricks </a>|<a href='http://www.tutzone.org/' '> TutZone</a></div>

Step 9 : Now Save your Template and Done

How to make to Every Blog Post Summaries with Thumbnail?

Summaries blog post with Thumbnail and read more feature I am very exited to post this tips for my lovely visitors. If you want summaries your post with a image showing on left side just follow this 8 steps and I tried to my best to understand for beginner bloggers. If you would not summaries with image then you should use this hack which "auto readmore " or manual readmore.

Step 1 : Log in Your Blogger Account

Step 2 : Go to Layout

Step 3 : Click on Edit HTML


Step 4 : Check "Expand Widget Templates"


Step 5 : Now Find(Ctrl + F) </head> and Paste this code between </head> and </body>

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 530;
summary_img = 420;
img_thumb_height = 150;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px; margin-right:5px; border: 1px solid #E9E9E9;background-"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}


//]]>
</script>

Step 6 : Now again Find (Ctrl + F) and Replace this code with the below code <data:post.body/> or </p><data:post.body/></p>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p><data:post.body/></p>
</b:if>

Step 7 : Find (Ctrl + F) <div class='post-footer-line post-footer-line-3'/> and Paste this code below <div class='post-footer-line post-footer-line-3'/>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<span class='rmlink' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0sI917gNc2pkjw-SbBO8IPeNTgrYeTnOjqkDTGvayL7RcoR7Ge8LadFNUZCb3McIMFy9_6La3m4DNX-Hx2FcrpOmxM_QgM5ySfM6d6GEoJqkEELzZYdWhGMAteu7MzJNGGwykWFTH9q5l/s1600/22.png) no-repeat; padding-left:18px; float:right'><a expr:href='data:post.url'>Readmore</a></span>
</b:if>

Step 8 : Now Save and Done

Protect Your Blogger Blog From Spam Comments

If you want to protect your Blogger blog from spam comments. Enable comment moderation so you can accept or reject each comment individually.

Follow this steps.

1.Sign in to your Blogger account.

2.Go to the settings tab. Click the link for comment settings.

3.Under "Who Can Comment?" select anyone. You'll protect yourself from spam with steps further down the page.

4.Scroll down the page and select "Enable Comment Moderation." You must give the email address you want the comments to come to for moderation.

5.You can further prevent spam by selecting "Show Word Verification for Comments." This uses CAPTCHA to make the user type random letters from an image into a form before the comment is sent to you for moderation.

6.The final setting is "Comment Notification Address." If you select this, you will receive an email when a comment is published. This isn't necessary to select, since you receive each comment in an email to moderate before it's published.

7.In the comment moderation email you receive, you have a link to either publish, reject, or go to the comment moderation page for your blog. If you only have one or two comments, you can click the publish or reject link right in the email. If you have many comments, you may choose to click the link to the comment moderation page on your blog. There, you can accept or reject several comments at a time.

Latest Cool Animated Recent Post Widget With Thumbnail For Bloggers

If you want to add animated recent post widget then you should add this widget in your blog sidebar.Just follow steps for "Cool Animated Recent Post Widget with Thumbnail".

1. Log in your blogger account

2.Go to Layout

3.Click on Sidebar Add a Gadget

4.Click on HTML/JavaScript

5.Now copy this code and paste in this page .

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

<script language='JavaScript'>

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://www.latestbloggertricks.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

6.Replace "www.latestbloggertricks.com" in your blog name.

7. Click on Save and that's it.

Interact Your Visitor With Read More Feature

This post is about read more with manual feature not auto .Lets start and follow this steps.

1.Log in to your Dashboard => Layout => Edit HTML

2.Click on Expand Widget Templates

3.Scroll down to where you see this:

<p><data:post.body/></p>

4.Replace above code with below code.

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Read more...</strong></a></p>
</b:if>

5.Click on Save Templates

6.Now go to Setting =>Formatting =>Post Template

7.Fill that Post Template blank text area with below code :

<span class="fullpost">



</span>

8.Click on Save Settings

9.When you post your article, choose Edit HTML tab. and you will see the code below :

<span class="fullpost">



</span>

10.Place the paragraps you want show with read more, above of below line.

<span class="fullpost">

11.Place the rest of the post (you want to hide) between below 2 lines.

<span class="fullpost">



</span>

Look at the image below.




12.Then Publish your post.

How to make three Column Layouts in Blogger Template?

Create three column in classic blogger templates and follow in easy steps
First of all, set your template to Minima (not the stretch template, but any colour will do!), then follow these instructions:

1. Go to Template>Edit HTML, leaving the "Expand widget templates" box unchecked.

2. Now, find this section in the HTML code:

#sidebar-wrapper { width: 220px; float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Copy this entire section, and paste it directly below. We're going to change the elements I've highlighted in red to the following:

#left-sidebar-wrapper (this makes the css for this section unique) float: left (this will make the new sidebar float to the left of the main column)

This will provide the styling for the new sidebar element which we will create next.

3. Now, you need to find this section further down the page:

<div id='main-wrapper'>

Immedietly before this section, you should paste the following piece of code:

<div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div>

4. If you preview your template, you will notice that the right sidebar will be beneath the main section at the moment. This is because the outer-wrapper is still only wide enough to accomodate one sidebar. So now we need to expand the oputer wrapper to accomodate this new sidebar. Find this section in the HTML code:

/* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }

We need to increase the width of the wrapper by the width of the left-sidebar-wrapper, in this case 220px. So, change the value in red to 880px.

5. You may also want to change the width of the header-wrapper to 880px so that it spans the new width of your blog:

#header-wrapper { width:880px; margin:0 auto 10px; border:1px solid $bordercolor; }

6. At this point, you should save your template. At present, your new sidebar will not be seen as there are no widgets contained within it, though it will still be present in the markup of the page. Once you have saved your template, go to Template>Page elements in your Blogger dashboard.

7. Your layouts section should now look something like this:

You can now add a page element (or two) to your new left sidebar.

8. But we aren't quite finished yet! If you add anything to this left sidebar, you will probably notice that it jams right up to the main section, like this:

This is because there is no space defined between the left-sidebar and the main section. We need to create this space in the template's HTML. To do this, we will add a margin to the left hand side of the main posts section. Find the following code in your template's HTML and add the code defined in red

#main-wrapper { width: 410px; float: left; margin-left: 20px; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

This defines a margin space of 20px between the left-sidebar and the main column. You should also ensure you adjust thw width of the outer-wrapper from 880px to 900px to ensure the width of your blog is enough to accomodate this margin too. Either that, or you could reduce the width of your main column/a sidebar by 20px to serve the same purpose. Now, your previewed template should look more like this:

9. Finally, save your template and enjoy your new sidebar!

via by bloggerbuster

How to add two ads below post title and increase earning?

If in your Google Adsense not clicking daily and you want to increase your Google Adsense earning.You should be add two 300*250 ads below post tittle one is link ad and one is image ad.

Follow these steps

1.Login your Google Adsense account and get 300*250 if in your blog has wide body area.

2.Otherwise get square box two ads code one for link ad and one for image ad.

3.After getting code Encode ads codes from this site Encode here

4.Now make a table and follow this step for making a table
<table>
<tbody><tr>
<td>
Your Encode link ad here
</td>
<td>
Your Encode image ad here
</td>
</tr>
</tbody></table>

5.Go to blogspot.com

6.Login your blogger account

7.Click on your blogger layouts

8.Click on Edit HTML

9.Download your Templates

10.Now Check Expend Widgets Templates

11.Find <data:post.body/>

12.Paste table code before <data:post.body/>

13.Save your template and see your blog

Note :If you have any question about this posting kindly post here a comment.

How to Install Recent Posts Widget with thumbnails?

Here a beautiful recent post widget with thumbnails in very easy just follow three step and add this widget in your blog

1. Sign into Blogger dashboard

2. Go to Layout » Add a gadget » html/javascript

3. Just copy and paste this code..

<script language="JavaScript">

imgr = new Array();


imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 298;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "#000000";

thumbwidth = 40;

thumbheight = 40;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 5;

home_page = "http://YourBlogName.blogspot.com/";

</script>

<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

Show HTML/CSS Codes On Coloured Background In Blogger Posts

1.Login to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see ]]></b:skin> tag.
3.Now copy below code and paste it before ]]></b:skin> tag.

.csscode { margin : 10px 10px 10px 10px; padding : 5px; clear : both; list-style-type : none; background : #F9F7E8;; border-top : 2px solid #000000; border-right : 2px solid #000000; border-bottom : 2px solid #000000; border-left : 2px solid #000000; }

3.Now copy below code and paste it before ]]></b:skin> tag
4.Now save your template.
5.Now when you want to insert some codes in your posts always put it between <div class="csscode"> and </div> and publish your post.

<div class="csscode">

YOUR CODE HERE

</div>

It will look like this.