Wrapping Text within <pre> Tags

This is the trick that let's you use the pre tag to keep the formatting, without cursing yourself when some of the content is too long and doesn't wrap:

Your developer can't fix it?

In the css, give the pre tag these attributes:

pre {
background-color: #eee;
padding: 0.75em 1.5em;
font-size: 12px;
border: 1px solid #ddd;
/*TEA 04/07/07, below code added to make the PRE tag wrap.*/
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;
}

or in the HTML in the pre tags style attribute put:

<pre style="
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
">

This should work with most browsers.

Explore This Trick >>

Update Title Style and Add Meta tag description for Each Post

1. Update Title Style

In blogger, By default, the Blog title appears first, the important information(which is the post title) is pushed to the end. There is a chance for the search engines to append this long a title. Also, it wouldn’t look appealing to searchers on google. So for a good Title, Page title should come first.


2. Add Meta tag description for Each Post

Google says :
We use a number of different sources for this information, including descriptive information in the META tag for each page. Where this information isn't available, we may use publicly available information from DMOZ. While accurate meta descriptions can improve clickthrough, they won't impact your ranking within search results. We frequently prefer to display meta descriptions of pages (when available) because it gives users a clear idea of the URL's content.

Google's creation of sites' titles and descriptions (or "snippets") is completely automated and takes into account both the content of a page as well as references to it that appear on the web.

TO Update both points in blogger:

Goto Edit Html tab and find the codes below

<title> <data:blog.pageTitle/> </ title>

Replace it With

<b:if cond='data:blog.pageType == &quot;item&quot;'> <meta expr:content='data:blog.pageName' name='Description'/> <title> <data:blog.pageName/> | <data:blog.title/> </title> <b:else/> <meta expr:content='data:blog.pageTitle' name='Description'/> <title> <data:blog.pageTitle/> </title> </b:if>

It will display the name of a particular entry first without bringing the name of the blog in first position as well as add meta description tag.

Explore This Trick >>

Add widget beside your header

• You have to find out the Header section. Look for something like this:

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

• Basically what we are doing is dividing the header up. I'm going to make each side equal, but you can use any proportion you want allowing for the margins. So, replace that code with this:

#header {
width: 300px;
float: left;
margin: 5px;
text-align: center;
color:$pagetitlecolor;
}
#header-right {
width: 300px;
float: right;
color: $pagetitlecolor;
margin: 5px;
padding: 5px;
}

• You can adjust these values to fit your template.
• Almost done! Find this code in your template.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE (Header)' type='Header'/>
</b:section>
</div>

• And replace it with this:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header-right' showaddelement='yes'>
</b:section>
</div>

• Your Page elements will look like this:

Explore This Trick >>

Posting source code in Blogger

After posting any source code, First we make sure that the code is correct and same as the original.
For HTML or script source code, we require HTML Encoding so that blogger doesn't execute this code.

1.In the blogger,Click on Layout tab ->Edit HTML and put following things Before " </head> "

<link href='http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/
SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/
svn/trunk/Scripts/shCore.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/
svn/trunk/Scripts/shBrushCpp.js'/>

2. put following things Before " </body> "

<script language="javascript">
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

3. encode (HTML Encode) your source code. for this, you can use this online HTML encoder


4. Open your compose tab & Put your updated(encoded) code between:
<pre>
….My code here…
</pre>

Explore This Trick >>

Publish only summaries of your blog post

• Now we have something similar for blogger.
• Actually i should say it is really amazing.
• This hack will automatically create post summaries with thumbnails & read more button.
  
• you needn't need to add any extra code in every blogpost that you make.

1. First of all edit your blogger template (In Blogger, click Layout --> Edit HTML)
2. Find the text " <head> "
   
3. Put following code after <head>

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://blogergadgets.googlecode.com/files/excerpt.js'
type='text/javascript'/>

Find the paragraph with following line

Replace it with following lines

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<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>
<div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'>
<a expr:href='data:post.url' rel='bookmark'><b>
Read more >></b></a></span>
</b:if>

Your post would look similarly like below:

Explore This Trick >>