tag:blogger.com,1999:blog-67229937895677348612024-03-18T06:37:19.402+08:00IntrobloggerRethnaraj Rambabuhttp://www.blogger.com/profile/15863204708800295797noreply@blogger.comBlogger76125tag:blogger.com,1999:blog-6722993789567734861.post-51903084220873468032010-07-17T11:27:00.001+08:002010-07-18T18:13:58.581+08:00Wall Press | Blogger Template<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzs2gBHq7TuIyp0i7RKM0Rskpea4_zmMIPE5CmD4lKA_gUPdJP5kCcbG7l-rD7ojmsNsc0_WKON1TvP43lZZM9G5jSmkyoTcvgoxBIn3R7bzreKBsriPjsPHPS2_p8bcDzAVK9KSpkT5jR/s1600/wall_press_blogger_template.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzs2gBHq7TuIyp0i7RKM0Rskpea4_zmMIPE5CmD4lKA_gUPdJP5kCcbG7l-rD7ojmsNsc0_WKON1TvP43lZZM9G5jSmkyoTcvgoxBIn3R7bzreKBsriPjsPHPS2_p8bcDzAVK9KSpkT5jR/s320/wall_press_blogger_template.png" /></a>Wall Press is a minimal, 2-column, clean blogger template with three column footer.<br />
<br />
It is cross-browser compatible. However, the CSS3 shadow effects are not visible in Internet Explorer. Instructions on editing the template can be found after the cut.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><span class="theme-buttons"><a href="http://www.box.net/shared/3k0nzdn5ag" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjufQfUJgD-GTutksbaJOa3yXaLSbDpPxAT0tiEVdBkWGXAFjc15wKTplMQTtSEgSOXkG2BJnv_PLDqLGuzrjvFPcgjxlxK7A1OdUvi3THu_BRRblylF8JMcN9zbmwTkJy4QRbKp1t3r6eP/s320/download.png" /></a><a href="http://wall-press-introblogger.blogspot.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCWgBaH8DSz6l7FR0V6eJp-S9sCnVVPHmmeAgy4ymIKUbLhpjfj36uRsIuv5MEXjm_pifIrJg-xL897jNGofBjxUxeMjUv_ER-_TiQAU09LriyW0d8quTc6sV0R5bP5hlW_CS32N0ikbZB/s320/preview.png" /></a></span></div><a name='more'></a><br />
<br />
<h2>Instructions on editing the template</h2><br />
<b> Navigation Bar</b><br />
<br />
<div class="codelist"><div id='nav'><br />
<ul><br />
<li><a class='home' expr:href='data:blog.homepageUrl'>Home</a></li><br />
<li><a class='feed' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li><br />
<li><a class='comment' expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li><br />
<li><a class='edit' href='#'>Edit</a></li><br />
</ul><br />
</div></div><br />
Leave your comments below if you have any questions regarding the template or <a href="http://introblogger.blogspot.com/2009/12/contact.html">contact me via form</a>.<br />
<br />
<br />
<b>UPDATE 18/07/2010 :</b><br />
<br />
The template downloaded before this update date comes with header with no IMAGE support. Thanks to <a href="http://www.blogger.com/profile/11953999297792313006" rel="nofollow">Whisper</a> for the information on that. I've updated the template downloads with HEADER IMAGE support.<br />
<br />
For those who downloaded and using the template, you have to change a small piece of code with another. Go to Design > Edit HTML > Click on "Expand Widget Templates". Search for the following code using CTRL + F.<br />
<br />
<div class="codelist"><div class='titlewrapper' style='background: transparent'></div><br />
Just above that code, you'll see these codes. <br />
<br />
<div class="codelist"><div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot; + &quot;background-repeat: no-repeat; &quot; + &quot;width: &quot; + data:width + &quot;px; &quot; + &quot;height: &quot; + data:height + &quot;px;&quot;' id='header-inner'></div><br />
Replace those codes with the code below and click Save.<br />
<br />
<div class="codelist"><div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot; + &quot;background-position: &quot; + data:backgroundPositionStyleStr + &quot;; &quot; + data:widthStyleStr + &quot;min-height: &quot; + data:height + &quot;px;&quot; + &quot;_height: &quot; + data:height + &quot;px;&quot; + &quot;background-repeat: no-repeat; &quot;' id='header-inner'></div>Rethnaraj Rambabuhttp://www.blogger.com/profile/15863204708800295797noreply@blogger.com54tag:blogger.com,1999:blog-6722993789567734861.post-74197237848562166862010-07-14T00:15:00.001+08:002010-07-15T23:45:28.659+08:00Revive | Free premium blogger template<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj51-Okak3dBa8WPeHmxtJ3eJRmL6jAArzbERd68-2JX5ylfHp-bpoZcrbNqPMjQxrhLhQCEajtHMzSmt5yBPxLpMdG8pyruaAhPsw9LJMPdFYF6bpTLy_Nvy_II12-YVozKCNyf5p94OKw/s1600/revive_blogger_template.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj51-Okak3dBa8WPeHmxtJ3eJRmL6jAArzbERd68-2JX5ylfHp-bpoZcrbNqPMjQxrhLhQCEajtHMzSmt5yBPxLpMdG8pyruaAhPsw9LJMPdFYF6bpTLy_Nvy_II12-YVozKCNyf5p94OKw/s320/revive_blogger_template.gif" /></a>Today, I am releasing <b>Revive</b>, a free premium blogger template. The template is available in five different hot colours: <b>pink</b>, <b>red</b>, <b>green</b>, <b>blue</b> and <b>orange</b>. This is the first time I'm releasing multi-colour versions of the same template. I've managed to compress all five different colour versions into a RAR file. So that you don't have to download them one-by-one which would really waste your time.<br />
<br />
<h2 style="-moz-border-radius: 10px 10px 10px 10px; background-color: #cccccc; color: black; padding: 5px 10px; text-shadow: 1px 1px 1px rgb(255, 255, 255);">Revive Blogger Templates Demos</h2><br />
Here are the demo blogs of five versions of different colours of Revive Blogger Template. <br />
<br />
<a href="http://revive-red-introblogger.blogspot.com/"><span style="-moz-border-radius: 10px 10px 10px 10px; background-color: #bf1e2d; color: white; font-weight: bold; margin-bottom: 5px; padding: 5px;">Revive Red Blogger Template</span></a><br />
<br />
<a href="http://revive-pink-introblogger.blogspot.com/"><span style="-moz-border-radius: 10px 10px 10px 10px; background-color: deeppink; color: white; font-weight: bold; margin-bottom: 5px; padding: 5px;">Revive Pink Blogger Template</span></a> <br />
<br />
<a href="http://revive-orange-introblogger.blogspot.com/"><span style="-moz-border-radius: 10px 10px 10px 10px; background-color: orangered; color: white; font-weight: bold; margin-bottom: 5px; padding: 5px;">Revive Orange Blogger Template</span></a> <br />
<br />
<a href="http://revive-blue-introblogger.blogspot.com/"><span style="-moz-border-radius: 10px 10px 10px 10px; background-color: #104e8b; color: white; font-weight: bold; margin-bottom: 5px; padding: 5px;">Revive Blue Blogger Template</span></a> <br />
<br />
<a href="http://revive-green-introblogger.blogspot.com/"><span style="-moz-border-radius: 10px 10px 10px 10px; background-color: forestgreen; color: white; font-weight: bold; margin-bottom: 5px; padding: 5px;">Revive Green Blogger Template</span></a> <br />
<br />
<a name='more'></a><br />
<br />
<h2 style="-moz-border-radius: 10px 10px 10px 10px; background-color: #cccccc; color: black; padding: 5px 10px; text-shadow: 1px 1px 1px rgb(255, 255, 255);">Download</h2><br />
Download Revive blogger template for your blog now.<br />
<br />
<span class="button"><a href="http://www.box.net/shared/dk8f9dgqqu">Download Now</a></span><br />
<br />
<br />
<h2 style="-moz-border-radius: 10px 10px 10px 10px; background-color: #cccccc; color: black; padding: 5px 10px; text-shadow: 1px 1px 1px rgb(255, 255, 255);">Features of Revive blogger template</h2><br />
<b>1. Featured contents slider</b><br />
You can display your popular/featured posts here. The slider is only visible in <b>home page</b> of the blog and not in archive pages, post pages or static pages.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOOkBGs5v63Wd-VQ-dzrlN-9LgxfEZiZhR8oaU_1jDg3uUr_v8_QamZhidt4abCHN7nPr6VnDjm0p4letlchhOlc9msY6qoNjriN9V58nLWf1fJPi-elAOyxzKmTmhuodEwVjcXhbd7YHx/s1600/featured_contents.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOOkBGs5v63Wd-VQ-dzrlN-9LgxfEZiZhR8oaU_1jDg3uUr_v8_QamZhidt4abCHN7nPr6VnDjm0p4letlchhOlc9msY6qoNjriN9V58nLWf1fJPi-elAOyxzKmTmhuodEwVjcXhbd7YHx/" /></a><br />
<br />
<b>2. Multi-level drop down navigation menu</b><br />
This CSS only multi-level dropdown menu works without any javascripts.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyO0q7AQJiJlFI28T26r46i02Kt3e11nnBvuFZfftLfDsknREqKb6QvJyCgnmDo8v53zs6xUr4ZmQTHw3cTrZRXzL4piyRB7hrFjMY1oMWXD_sUkx8AKc6Lq-jfFc0xx-6_28XxlaeSBks/s1600/drop_down_menu.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyO0q7AQJiJlFI28T26r46i02Kt3e11nnBvuFZfftLfDsknREqKb6QvJyCgnmDo8v53zs6xUr4ZmQTHw3cTrZRXzL4piyRB7hrFjMY1oMWXD_sUkx8AKc6Lq-jfFc0xx-6_28XxlaeSBks/" /></a><br />
<br />
<b>3. Tabbed sidebars</b><br />
Only the first three widgets in the sidebar will be shown in tabbed sidebar. Thanks to <a href="http://www.abu-farhan.com/2009/10/easiest-way-to-make-tabber-sidebar-for-blogger/">Abu Farhan</a> for this great feature.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8FfSScpg31P1ypKotUYLfnc_97HYGwTPvVwP63b1GgkvtbIDklQ4S27Y6Y5kZ8x8Q0W_3N9g7jag_VG3pLCPMbfWQYC268rsTfisq-qAtfsP8ezxVHZqt5ALKqpS5pAXOIJie1MogfCic/s1600/tabbed_sidebars.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8FfSScpg31P1ypKotUYLfnc_97HYGwTPvVwP63b1GgkvtbIDklQ4S27Y6Y5kZ8x8Q0W_3N9g7jag_VG3pLCPMbfWQYC268rsTfisq-qAtfsP8ezxVHZqt5ALKqpS5pAXOIJie1MogfCic/" /></a><br />
<br />
<b>4. Three column footer</b><br />
The template comes with a minimalistic three column footer.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb4IP8DfrZpbXY1yh05IZxWCWtS_KE3VUoSJsidDhAgMvTiW63ufcVnVjt5cP-ZsUCozTTvrJ-6CpShF83omkBVcSbfzxhddPdEUL5umUMtEU6lfZtKKaxT4MNRFne6mk8qsOOcMFAOXBp/s1600/three_column_footer.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb4IP8DfrZpbXY1yh05IZxWCWtS_KE3VUoSJsidDhAgMvTiW63ufcVnVjt5cP-ZsUCozTTvrJ-6CpShF83omkBVcSbfzxhddPdEUL5umUMtEU6lfZtKKaxT4MNRFne6mk8qsOOcMFAOXBp/" /></a><br />
<br />
<b>5. Post Title with comment bubble</b><br />
Post comments number is shown in a small "tab" like feature beside every post title. The "tab" above the post wrapper shows "Latest Posts" in the home page and shows "You are reading" in post/static/archives pages.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge0KLtG89rqjpEQOjJ1DtA4k0YAVfZv8V0D2mzoyuTPTRK7sUXuMtQo4aZZMRKwa-INEThHk2gneYS5GyTP_rOry_BMWroOMFfs0u9vkO8Tzs_acZmkCceEwkNn-nRgTkSY_ReWQo85V4I/s1600/post_title.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge0KLtG89rqjpEQOjJ1DtA4k0YAVfZv8V0D2mzoyuTPTRK7sUXuMtQo4aZZMRKwa-INEThHk2gneYS5GyTP_rOry_BMWroOMFfs0u9vkO8Tzs_acZmkCceEwkNn-nRgTkSY_ReWQo85V4I/" /></a><br />
<br />
<b>6. Unique Comments Display</b><br />
Most of the blogger templates care less about the design of comments boxes. But, I've managed to design comment boxes with unique look. I've implemented the same technique used to display the comments in Intro Blogger blog in this template. <br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwTg4JNH0jeF1xecS5IPAsl83o-E6ZmqncGXmcNi9JUI42TFD77omyPj4_fBaQKVWpNNlCWIX8RQzQC87D1GWgdBnk5EQMI3bMbm2mo0SqYp2DGE6aYc6AHp8J2MeL7oMXqaL31r4CXZiF/s1600/comments.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwTg4JNH0jeF1xecS5IPAsl83o-E6ZmqncGXmcNi9JUI42TFD77omyPj4_fBaQKVWpNNlCWIX8RQzQC87D1GWgdBnk5EQMI3bMbm2mo0SqYp2DGE6aYc6AHp8J2MeL7oMXqaL31r4CXZiF/" /></a><br />
<br />
<br />
<h2 style="-moz-border-radius: 10px 10px 10px 10px; background-color: #cccccc; color: black; padding: 5px 10px; text-shadow: 1px 1px 1px rgb(255, 255, 255);">Editing instructions</h2><br />
<b>1. Featured contents slider</b><br />
<ul><li>Replace the "<i>Sample Post 1</i>" between <span style="background-color: #d9ead3;"><h2>...</h2></span> tags in the code below with the <b>post title</b> of your featured posts.</li>
<li>Replace <i>href='#'</i> with desired URL and <i>src='......'</i> with desired image source URL in <span style="background-color: #f9cb9c;"><a href='#'><img alt='' height='145' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeUEPghUKnhDcKl3VK9SyR6_Jl0Yx5ZwOMZ8X9FGQsUGIfswmSez8ZUw0-McRxklykazjJdG6q4RLGBsWlaazPviia5xwjpho_MpanLVspm1QlW_IWxaMhhXtSsNzUSF7EDpl8l7LANptI/' width='215'/> </span>. The image height should be 145px and width is 215px. You can use slightly larger images if you want.</li>
<li>And write a small summary about your featured post between <span style="background-color: #d5a6bd;"><p>......</p></span> tags.</li>
</ul><br />
<div class="codelist"><div id='slideshow'><br />
<div id='slidesContainer'><br />
<br />
<div class='slide'><br />
<h2>Sample Post 1</h2><br />
<p><a href='#'><img alt='' height='145' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeUEPghUKnhDcKl3VK9SyR6_Jl0Yx5ZwOMZ8X9FGQsUGIfswmSez8ZUw0-McRxklykazjJdG6q4RLGBsWlaazPviia5xwjpho_MpanLVspm1QlW_IWxaMhhXtSsNzUSF7EDpl8l7LANptI/' width='215'/></a>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. [...]</p><br />
</div><br />
<br />
<div class='slide'><br />
<h2>Sample Post 2</h2><br />
<p><a href='#'><img alt='' height='145' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG7W4tYGxtKykWpvz8EbBTAbLrRYhAPjji_WUGRp-hZZvjl7CrD2OXB8BqHtRcPGSizdlR6XPDhFuBMwBfxAvv8_WwfJ8IkjsQAIEZ2tsHgS5OV0E_ZD1P1-qmErWketEVhc7mff_iKerJ/' width='215'/></a>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. [...]</p><br />
</div><br />
<br />
<div class='slide'><br />
<h2>Sample Post 3</h2><br />
<p><a href='#'><img alt='' height='145' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeUEPghUKnhDcKl3VK9SyR6_Jl0Yx5ZwOMZ8X9FGQsUGIfswmSez8ZUw0-McRxklykazjJdG6q4RLGBsWlaazPviia5xwjpho_MpanLVspm1QlW_IWxaMhhXtSsNzUSF7EDpl8l7LANptI/' width='215'/></a>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. [...]</p><br />
</div><br />
<br />
<div class='slide'><br />
<h2>Sample Post 4</h2><br />
<p><a href='#'><img alt='' height='145' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG7W4tYGxtKykWpvz8EbBTAbLrRYhAPjji_WUGRp-hZZvjl7CrD2OXB8BqHtRcPGSizdlR6XPDhFuBMwBfxAvv8_WwfJ8IkjsQAIEZ2tsHgS5OV0E_ZD1P1-qmErWketEVhc7mff_iKerJ/' width='215'/></a>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. [...]</p><br />
</div><br />
<br />
</div><br />
</div></div><br />
<b>2. Navigation menu</b><br />
<br />
<div class="codelist"><div id='navigation'><br />
<ul id='nav'><br />
<li class='page_item'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li><br />
<li class='page_item page-item-51'><a href='#' title=''>About</a></li><br />
<li class='page_item'><a href='#' title='Categories'>Categories</a><br />
<ul><br />
<li class='cat-item cat-item-3'><a href='#' title=''>Category 1</a></li><br />
<li class='cat-item cat-item-4'><a href='#' title=''>Category 2</a><br />
<ul class='children'><br />
<li class='cat-item cat-item-8'><a href='#' title=''>Sub Category 1</a></li><br />
<li class='cat-item cat-item-8'><a href='#' title=''>Sub Category 2</a></li><br />
</ul><br />
</li><br />
<li class='cat-item cat-item-5'><a href='#' title=''>Category 3</a></li><br />
<li class='cat-item cat-item-1'><a href='#' title=''>Category 4</a></li><br />
<li class='cat-item cat-item-6'><a href='#' title=''>Category 5</a><br />
<ul class='children'><br />
<li class='cat-item cat-item-7'><a href='#' title=''>Sub Category 1</a></li><br />
<li class='cat-item cat-item-9'><a href='#' title=''>Sub Category 2</a></li><br />
</ul><br />
</li><br />
</ul><br />
</li><br />
<li class='page_item'><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Subscribe'><img class='headrss' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSIFDBYWlVQqwvGcHFjVfo8A8XhCLWl8xjIYVNNx_AQ07alo38M9nIxCcp7d5rYc56HNK6m4c7neadwnXchKc6K006x2tN6UJioDwMLSt_WQHs_wjBah9pMMs7qYRmS4qHghfuRw_o8ns/'/>Subscribe</a></li><br />
<li class='page_item page-item-51'><a href='#' title=''>Contact</a></li><br />
</ul><br />
</div></div><br />
Leave your comments below or <a href="http://introblogger.blogspot.com/2009/12/contact.html">contact me</a> if you need any further help on editing the template.Rethnaraj Rambabuhttp://www.blogger.com/profile/15863204708800295797noreply@blogger.com117tag:blogger.com,1999:blog-6722993789567734861.post-19955270116398196802010-07-13T13:36:00.002+08:002017-01-31T01:10:10.186+08:00HTML5 and CSS3 cheat sheets collection<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdfMxK23peyDh2bcTb4NZ48B5eejfBX2OMBYCX3LYDMgaYa3sKCfQK98LHoyjdZLNPxfEGUQuEdlMSyvfhYa75lV4ewJMudRSmItw3AEosby_bqPRW0U7oS1EzXo92xtB1-mRUCwHqyC5B/s1600/HTML5_CSS3_cheat_sheets_collection.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdfMxK23peyDh2bcTb4NZ48B5eejfBX2OMBYCX3LYDMgaYa3sKCfQK98LHoyjdZLNPxfEGUQuEdlMSyvfhYa75lV4ewJMudRSmItw3AEosby_bqPRW0U7oS1EzXo92xtB1-mRUCwHqyC5B/s320/HTML5_CSS3_cheat_sheets_collection.jpg"></a>HTML5 and CSS3 have started conquering the web. They both combine to produce great functions and effects and really make our eyes wide opened. For example, have a look at this <a href="http://www.jankoatwarpspeed.com/examples/windows7menu/#">Windows 7 start menu</a> designed using only CSS3! Nowadays, there are a lot of tutorials and resources on <a href="http://dev.w3.org/html5/spec/Overview.html">HTML 5</a> and <a href="http://www.css3.info/">CSS3</a> including the cheat sheets which are very essential to web developers and designers who are willing to code using these standards. I've managed to search and listed out the available cheat sheets.<br />
<br />
<a name='more'></a><br />
<h2>CSS3 cheat sheets</h2><br />
1. <a href="http://www.gosquared.com/liquidicity/archives/1010">CSS3 Help Sheets</a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB7vLpXofDfxTEGFI_PtDFy4-LThgwkCT5EizDwsXX5fOOib2gp2I06bgURM0AaZGPy9L8OQJH-Rqj26TauXj5ozs-2aTs2DcacSRPEDNubmHF0_XO2L17we2CzHq344iFPXKWzs4c3vmK/s1600/css3_help_sheets.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB7vLpXofDfxTEGFI_PtDFy4-LThgwkCT5EizDwsXX5fOOib2gp2I06bgURM0AaZGPy9L8OQJH-Rqj26TauXj5ozs-2aTs2DcacSRPEDNubmHF0_XO2L17we2CzHq344iFPXKWzs4c3vmK/"></a><br />
<br />
2. <a href="http://www.veign.com/reference/css3-guide.php">CSS3 Quick reference guide</a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWJrTnPNw5y1VsPiyy48Oe2tN-x16F0UsEnsYE9HWFW4vf52NBIa_9tO_5ZU69aTpNvIMpi0gCCaQVVXlaJq5vST-rEiFghq1S3F9bq8qfpqsntEDZaiNS-DvoAcDFJ_yPhV5QC3lBAsfk/s1600/css3_quick_reference_guide.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWJrTnPNw5y1VsPiyy48Oe2tN-x16F0UsEnsYE9HWFW4vf52NBIa_9tO_5ZU69aTpNvIMpi0gCCaQVVXlaJq5vST-rEiFghq1S3F9bq8qfpqsntEDZaiNS-DvoAcDFJ_yPhV5QC3lBAsfk/"></a><br />
<br />
<br />
<br />
<h2>HTML 5 cheat sheets</h2><br />
1. <a href="http://woork.blogspot.com/2009/09/html-5-visual-cheat-sheet-by-woork.html">HTML 5 Visual Cheat Sheet</a> <br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir6HyD8vPiTPLoJr6oNzRRBJWpUuecmBzbnkogYMByua7QDZvrtkkGe-Wl0x-qjiXmb1tRJSllE4MlU7JxcJ254jpUndXuOo43ZjRBAB69cSYuqvWxPc1zgpX4q1ctHrUbkYdc_X9bOgHf/s1600/html5_visual_cheat_sheet.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir6HyD8vPiTPLoJr6oNzRRBJWpUuecmBzbnkogYMByua7QDZvrtkkGe-Wl0x-qjiXmb1tRJSllE4MlU7JxcJ254jpUndXuOo43ZjRBAB69cSYuqvWxPc1zgpX4q1ctHrUbkYdc_X9bOgHf/"></a><br />
<br />
2. <a href="http://adactio.com/extras/pocketbooks/html5/">HTML 5 Pocket Book</a> <br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmhvyZMjScNYh6p4mHZUQKQbSpICIKX8nXp2C2-GtfuZKS6nl_qBQwSKmMPxUAVzzj9IJDJMj_V7t8uHah_Fh0PhC2pVchlnJqnSAU5z-obr2bgPR1UN5OOegmsnHmrcaYzLRv_8_zALAm/s1600/html5_pocket_book.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmhvyZMjScNYh6p4mHZUQKQbSpICIKX8nXp2C2-GtfuZKS6nl_qBQwSKmMPxUAVzzj9IJDJMj_V7t8uHah_Fh0PhC2pVchlnJqnSAU5z-obr2bgPR1UN5OOegmsnHmrcaYzLRv_8_zALAm/"></a><br />
<br />
3. <a href="http://www.veign.com/reference/html5-guide.php">HTML 5 Quick reference guide</a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAMP5aOrWbone1xPfMBS-T9CC6QVi4nonsuiSxWxcUeBVaaSvugF1cKiydp8ryxvLr-xcBuTtqnc_cbZ2tcxUt_RPQY3h-9ZxusTttHKYbRP7CSIhKPqWHzEzMBNFdkQwumj3sov58_sD8/s1600/html5_quick_reference_guide.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAMP5aOrWbone1xPfMBS-T9CC6QVi4nonsuiSxWxcUeBVaaSvugF1cKiydp8ryxvLr-xcBuTtqnc_cbZ2tcxUt_RPQY3h-9ZxusTttHKYbRP7CSIhKPqWHzEzMBNFdkQwumj3sov58_sD8/"></a><br />
<br />
4. <a href="https://skilled.co/html-canvas/">HTML5 Canvas Cheat Sheet</a> <br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtngiamhkyFfFZjqgpQn6UWeiivQRjLi6bVfKI8CDmdjJob4TP1v8-_pcQHSQdmE5xuIOgjbxgkyZE6b8NXJVXf_K48T3Sly9hLf1wCtwcsfS1likhRL6elZU-Pri7hlfXrNbXif2gXcjR/s1600/html5_canvas_sheet.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtngiamhkyFfFZjqgpQn6UWeiivQRjLi6bVfKI8CDmdjJob4TP1v8-_pcQHSQdmE5xuIOgjbxgkyZE6b8NXJVXf_K48T3Sly9hLf1wCtwcsfS1likhRL6elZU-Pri7hlfXrNbXif2gXcjR/"></a><br />
<br />
5. <a href="http://boblet.tumblr.com/post/60552152/html5">HTML5 id/class name Cheat Sheet</a> <br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXF25LFcmUbNczkRiyqqzX5xowfLAxuovhi2oJHxMvAgsFi1PIhi2XS79wbMzBejiqRlpUyOlVDqtdcj6uzqf1ZIqvygGTvAAI6XRYAM6XqpCocjBNkbr8NyA4Ls_2viYhDLl-tImTBAF9/s1600/HTML5_idclass_name_cheatsheet.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXF25LFcmUbNczkRiyqqzX5xowfLAxuovhi2oJHxMvAgsFi1PIhi2XS79wbMzBejiqRlpUyOlVDqtdcj6uzqf1ZIqvygGTvAAI6XRYAM6XqpCocjBNkbr8NyA4Ls_2viYhDLl-tImTBAF9/"></a>Rethnaraj Rambabuhttp://www.blogger.com/profile/15863204708800295797noreply@blogger.com46tag:blogger.com,1999:blog-6722993789567734861.post-73459096898015295482010-07-09T14:18:00.001+08:002010-07-09T19:20:33.440+08:0015 most popular Blogger widgets that you shouldn't miss<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwuDYvQUph2RCD6XQOKACyVsU65kU9mhPk5PWcTY7nqsBYi5A1OQR4kiy3Wg0vV0m2HhYZJKkb8wXaYNj7o-5YrvgpMVk3hod8zAws6djeGN-4paF693k1M49PH-IizoKhG1Abpfo32i4w/s1600/15_most_popular_Blogger_widgets.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwuDYvQUph2RCD6XQOKACyVsU65kU9mhPk5PWcTY7nqsBYi5A1OQR4kiy3Wg0vV0m2HhYZJKkb8wXaYNj7o-5YrvgpMVk3hod8zAws6djeGN-4paF693k1M49PH-IizoKhG1Abpfo32i4w/s320/15_most_popular_Blogger_widgets.gif" /></a>Widgets are becoming a popular and pervasive part of the blogosphere. It can be said that "<b>no widgets, no blogging</b>". I've managed to search for the best and popular widgets that are being used by majority of bloggers. Finally, I came up with a compilation of 15 most popular blogger widgets.<br />
<br />
<br />
<a name='more'></a><br />
<br />
<br />
<br />
1. <a href="http://widgetsforfree.blogspot.com/2009/01/related-posts-widget-for-blogger.html">Related posts widget</a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOFRBQrflMVymCol6CXyR4YsY-O46KYMpPu1PIh57DC2hZTTFxVKxTBb1Wokko6YcF1GkB-Pzxvx6crk9cIpB1Q7OltrJ1ZoO1Ih6QAHZjTd5yZFS8-wqmwATiyp4-mKFuaGKRwib9NBDJ/s1600/related-posts-widget-blogger.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOFRBQrflMVymCol6CXyR4YsY-O46KYMpPu1PIh57DC2hZTTFxVKxTBb1Wokko6YcF1GkB-Pzxvx6crk9cIpB1Q7OltrJ1ZoO1Ih6QAHZjTd5yZFS8-wqmwATiyp4-mKFuaGKRwib9NBDJ/s320/related-posts-widget-blogger.jpg" /></a><br />
<br />
2. <a href="http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html">Related posts with thumbnails widget</a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgssJ9NXtVaFZi8I-SjLxXEihLBrb1lTv-w38Ir6vzuAS0vEmZmoV8h7PZBgOag1sPBv84EjFsIBZzrUoMofFcgESgotgulvRWuw4F5e0tDOK8o1SAqKL6CvnVYUe363Ntt3gTS_HI5MrY/s1600/related-posts.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgssJ9NXtVaFZi8I-SjLxXEihLBrb1lTv-w38Ir6vzuAS0vEmZmoV8h7PZBgOag1sPBv84EjFsIBZzrUoMofFcgESgotgulvRWuw4F5e0tDOK8o1SAqKL6CvnVYUe363Ntt3gTS_HI5MrY/s320/related-posts.png" /></a><br />
<br />
3. <a href="http://www.abu-farhan.com/2009/09/the-best-table-of-content-toc-or-sitemap-for-blogger/">Table of contents widget</a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQo9v6XKXDcs7l3w9Cfn2pvCarpKAjCsNC_aY3HO8tJKS6qqRF5SgG9rypTT20nkpAOfvdVp-HDhSkibZFuQ2A34l_4H-tky0HWI5XwqkYRqufB6nmCRtQGxnxukDPXArBuKmr3-bndVkh/s1600/blogger_sitemap.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQo9v6XKXDcs7l3w9Cfn2pvCarpKAjCsNC_aY3HO8tJKS6qqRF5SgG9rypTT20nkpAOfvdVp-HDhSkibZFuQ2A34l_4H-tky0HWI5XwqkYRqufB6nmCRtQGxnxukDPXArBuKmr3-bndVkh/s320/blogger_sitemap.gif" /></a><br />
<br />
4. <a href="http://introblogger.blogspot.com/2009/12/add-recent-posts-widget-in-your-blog.html">Recent posts widget</a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYpdxW6yu24AyMaQ_LTBWfDHcUB9DtZB34Vxiz-P3-BPAGflygy4fOn31qDGLiFRibEM2MvLaFIa9v27t_NemAFR18Dn4_w8k7vliofsehRHOf1OJyLyYtxe62U42jQHqirwrgemFBnG0F/s1600/recent_posts_widget_blogger.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYpdxW6yu24AyMaQ_LTBWfDHcUB9DtZB34Vxiz-P3-BPAGflygy4fOn31qDGLiFRibEM2MvLaFIa9v27t_NemAFR18Dn4_w8k7vliofsehRHOf1OJyLyYtxe62U42jQHqirwrgemFBnG0F/s320/recent_posts_widget_blogger.gif" /></a><br />
<br />
5. <span id="goog_1651040170"></span><a href="http://www.blogger.com/">Recent posts with thumbnails widget<span id="goog_1651040171"></span></a><br />
<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR9oqO0Dc9iAXiKRosXqGi3GlMqUp-0CsckrGzLyPu37SaLLSdECfqX_G2jyurajO5ByanzcHp5oxA4QutKdRfiem9efuXhNaUrTQ9kN2YdIr_2H4Vvrjy4HAMXFP_AuE5tTCkKQwmT_2X/s1600/recent-posts-gadget-with-thumbnails.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR9oqO0Dc9iAXiKRosXqGi3GlMqUp-0CsckrGzLyPu37SaLLSdECfqX_G2jyurajO5ByanzcHp5oxA4QutKdRfiem9efuXhNaUrTQ9kN2YdIr_2H4Vvrjy4HAMXFP_AuE5tTCkKQwmT_2X/s320/recent-posts-gadget-with-thumbnails.png" /></a><br />
<br />
6. <a href="http://introblogger.blogspot.com/2010/02/5-cool-translation-widgets-for-your.html">Blog translation widget</a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfEpWHdZ3GRQ4tazs0TljoR2K6cFBwAOV60HMjIiQzV8IHyrGExLoLfyFr20QIE21wIdc9ZTcyuEyvxSkVZdO3J4-iZpl4eWVLsGrDNgrbgzqy49WMrf9BVQ2mV_W4sAgAAsQDavXBil8h/s1600/translatethis.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfEpWHdZ3GRQ4tazs0TljoR2K6cFBwAOV60HMjIiQzV8IHyrGExLoLfyFr20QIE21wIdc9ZTcyuEyvxSkVZdO3J4-iZpl4eWVLsGrDNgrbgzqy49WMrf9BVQ2mV_W4sAgAAsQDavXBil8h/s320/translatethis.png" /></a><br />
<br />
7. <a href="http://introblogger.blogspot.com/2010/03/collection-of-free-shoutbox-widgets-for.html">Blog shoutbox widget</a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixXBCanGbEUmXhNxPiLhimiSnofLR9I7sdhVKxU_aem2hX2GyTrkYl1iEArAyGYXIP2ta2cxRUN7vONh3Di06d3XO9v38uxvCxNdOyl4gvQANR5_gn7SbsLbzyrWVfEc3cc0_hDfoRJt-d/s1600/Shoutmix.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixXBCanGbEUmXhNxPiLhimiSnofLR9I7sdhVKxU_aem2hX2GyTrkYl1iEArAyGYXIP2ta2cxRUN7vONh3Di06d3XO9v38uxvCxNdOyl4gvQANR5_gn7SbsLbzyrWVfEc3cc0_hDfoRJt-d/s320/Shoutmix.gif" /></a><br />
<br />
8. <a href="http://www.bloggerplugins.org/2008/06/top-commentators-widget-for-blogger.html">Top commentators widget</a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNnC0gFRhmpWM367Fsd1dQrbMSk_iCL1IKm9CAfBqXh8STiVcGdximQzL0Qp6ybXeqBXkL68fxqsyJtiZoFbh2FcK8E0nlNV_fhyGrjnGxtnj459Hxdk4n3TCiPm7BIUZGVcRvlErPihXb/s1600/top-commentators-plugin.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNnC0gFRhmpWM367Fsd1dQrbMSk_iCL1IKm9CAfBqXh8STiVcGdximQzL0Qp6ybXeqBXkL68fxqsyJtiZoFbh2FcK8E0nlNV_fhyGrjnGxtnj459Hxdk4n3TCiPm7BIUZGVcRvlErPihXb/s320/top-commentators-plugin.gif" /></a><br />
<br />
9. <a href="http://www.chethstudios.net/2009/03/useful-twitter-retweet-button-scripts.html">Retweet button</a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSoaWpjzzi3t5TCUfMAJigZvIc_qggjTVc48pm-L_27zL6Mb98vEXtcQBUr3sxT_z7_yAgCBW6IOkjVHU1q5gkDdplWH5sV3hi_L7BjMnSYfbsixaYQ9xgtz6dUW-KVw8mXkkLbwdY5qD0/s1600/tweet_blogger_button.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSoaWpjzzi3t5TCUfMAJigZvIc_qggjTVc48pm-L_27zL6Mb98vEXtcQBUr3sxT_z7_yAgCBW6IOkjVHU1q5gkDdplWH5sV3hi_L7BjMnSYfbsixaYQ9xgtz6dUW-KVw8mXkkLbwdY5qD0/s320/tweet_blogger_button.png" /></a><br />
<br />
10. <a href="http://www.bloggerplugins.org/2010/04/facebook-like-button-for-blogger.html">Facebook like button</a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdscHKIryhMYp3EJ7Mz1Hp_yDiicqkdAmHkU6bXGU2RyUsXhKRVrCoL24e2GinQcbocNdERs0dvjFWuvp9hmrEvhLKI4yTzOhEeIu4eItdu9Du7YfNLkHk3_sjfD6RRTcX7WsbFoH9kU0O/s1600/facebook_share.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdscHKIryhMYp3EJ7Mz1Hp_yDiicqkdAmHkU6bXGU2RyUsXhKRVrCoL24e2GinQcbocNdERs0dvjFWuvp9hmrEvhLKI4yTzOhEeIu4eItdu9Du7YfNLkHk3_sjfD6RRTcX7WsbFoH9kU0O/s320/facebook_share.png" /></a><br />
<br />
11. <a href="http://www.wibiya.com/">Wibiya toolbar widget</a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZcn-IaG85zAYttal7nNPnYB1Tqldce2F8u7QQH_1ADTqN5ETps7Sk02DsV_jv8r7nOiyWoWw8nZ_lzGxq8qQLR06TuFLm5gC1OXQX3db77QLgw5kTxxm_qJBO0yzpFwonUOYUEMgsyVm-/s1600/page1_image.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZcn-IaG85zAYttal7nNPnYB1Tqldce2F8u7QQH_1ADTqN5ETps7Sk02DsV_jv8r7nOiyWoWw8nZ_lzGxq8qQLR06TuFLm5gC1OXQX3db77QLgw5kTxxm_qJBO0yzpFwonUOYUEMgsyVm-/s320/page1_image.jpg" /></a><br />
<br />
12. <a href="http://introblogger.blogspot.com/2010/02/20-beautiful-google-page-rank-display.html">Google Page Rank widget</a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQByX0Je2pqq5vXKNw8O89pG8sQOX7IvV-MDYD-wsatnf12wqufNU-WYoHnT1qVO0rNQmb3wQn2_GD00vJkrXhgomG8KpiyD2JOD3pS2XO8YtFFD5jnPDD0vSyZihRO4Wtp__QAF3hfvXa/s1600/pagerank_google_update.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQByX0Je2pqq5vXKNw8O89pG8sQOX7IvV-MDYD-wsatnf12wqufNU-WYoHnT1qVO0rNQmb3wQn2_GD00vJkrXhgomG8KpiyD2JOD3pS2XO8YtFFD5jnPDD0vSyZihRO4Wtp__QAF3hfvXa/s320/pagerank_google_update.jpg" /></a><br />
<br />
13. <a href="http://www.blogger-help.com/2010/03/numbered-page-navigation-hack-gor.html">Numbered page navigation widget</a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMIKMnJPAqO1LkuanLKCV1XCeuTDT0jBEtR2iJO26I4zpM_KlIIGy0bwpeqn_RWvEEWnkaJsVkBP99mQn5C9plg79_-Y294CakEL4C1Sk4dD-wBKgzYx0UhOmEOuCX4R0mIq3QpmvFBnrD/s1600/numbered_page_navigation_blogger.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMIKMnJPAqO1LkuanLKCV1XCeuTDT0jBEtR2iJO26I4zpM_KlIIGy0bwpeqn_RWvEEWnkaJsVkBP99mQn5C9plg79_-Y294CakEL4C1Sk4dD-wBKgzYx0UhOmEOuCX4R0mIq3QpmvFBnrD/s320/numbered_page_navigation_blogger.gif" /></a><br />
<br />
14. <a href="http://widgetsforfree.blogspot.com/2009/01/random-post-widget-for-blogger-blogspot.html">Random posts widget</a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJQmay2TfXlwpuDefqThA-3kTCJF4Ws18URZ8siQQE4yjT67jLDinV4bEJ2BPH_ihwrOHWaQ2ooeaFNciLhX-i0HT-wcB96GUPGyBEwfm6tW6l9Eq4gKYa7VtPotYFu9x8EoLhbVA55Dvz/s1600/21-random-posts.JPG" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJQmay2TfXlwpuDefqThA-3kTCJF4Ws18URZ8siQQE4yjT67jLDinV4bEJ2BPH_ihwrOHWaQ2ooeaFNciLhX-i0HT-wcB96GUPGyBEwfm6tW6l9Eq4gKYa7VtPotYFu9x8EoLhbVA55Dvz/s320/21-random-posts.JPG" /></a><br />
<br />
15. <a href="http://www.facebook.com/badges/page.php">Facebook fan page badge widget</a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfxZoAXOcc_39kjvD9hNiplZq0Cx18m6QpQ00C6dZWof2pNAMyIMg_1_52WuEs5W36OJFJ7zyTEKI8RUi3gznuYTujSHzfAW62YwzOqIs2HHxnlF2MnoZGH_oTkmo8noibbZhi6dNTPSq5/s1600/facebook_badge_widget_blogger.gif" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfxZoAXOcc_39kjvD9hNiplZq0Cx18m6QpQ00C6dZWof2pNAMyIMg_1_52WuEs5W36OJFJ7zyTEKI8RUi3gznuYTujSHzfAW62YwzOqIs2HHxnlF2MnoZGH_oTkmo8noibbZhi6dNTPSq5/s320/facebook_badge_widget_blogger.gif" /></a>Rethnaraj Rambabuhttp://www.blogger.com/profile/15863204708800295797noreply@blogger.com32tag:blogger.com,1999:blog-6722993789567734861.post-84486858193287018322010-07-08T17:46:00.002+08:002010-07-08T18:23:14.710+08:0020+ excellent Blogger blog designs for your inspiration<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDJFeKOlfgtHiwyPwAOfry1nJ3tSih88sCyvOnDQ6prGjuyX9MRB-OUSx7eVMkLtU9yt1Z3LlWsSw7U98cqx-VaPU2nj3syV1I1xGmDDppnQZ4zPAfQGOdxo-P3QA7lFd12wIqoDBfvtKV/s1600/blogger_blog_designs.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDJFeKOlfgtHiwyPwAOfry1nJ3tSih88sCyvOnDQ6prGjuyX9MRB-OUSx7eVMkLtU9yt1Z3LlWsSw7U98cqx-VaPU2nj3syV1I1xGmDDppnQZ4zPAfQGOdxo-P3QA7lFd12wIqoDBfvtKV/s320/blogger_blog_designs.png" alt='20+ excellent Blogger blog designs for your inspiration'/></a>All of us know that a blog's design plays a great role in improving its traffic and pagerank. If the content of a blog is the king, then the blog design is the queen. Here is a collection of 20 well designed Blogger powered blogs for your inspiration.<br />
<br />
I’ve missed something? Definitely! Let me know in the comments!<br />
<br />
<a name='more'></a><br />
<br />
<b>1. <a href="http://www.be-insight.com/">Insight</a></b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiflpGFYsZZLjY61lw2UNexQpPQ8iQMZhDgDstzI6l50NK5yzD1OfZJSFie72wdz4RYs_ST8MFfJb1aGAsA9zAHbZo8qNFSpRoh_ohjeAdTSQLVzee4ePPPPD6x78zykNTJeLg11a4R1VxS/s1600/insight.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiflpGFYsZZLjY61lw2UNexQpPQ8iQMZhDgDstzI6l50NK5yzD1OfZJSFie72wdz4RYs_ST8MFfJb1aGAsA9zAHbZo8qNFSpRoh_ohjeAdTSQLVzee4ePPPPD6x78zykNTJeLg11a4R1VxS/s500/insight.png" /></a><br />
<b> </b><br />
<b><br />
</b><br />
<b>2. <a href="http://www.dantearaujo.net/">Dante Araujo</a></b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgobMX_GJBPQgdP-r6RN4dbrKwkbRLg_Ev_9KrmOjd6-RsYj8ezb84HVfvg-80kTqo5SC8-jRkAuRbf7nR6DLGU_pNfzBHo479-_CBkFR6Rcb6_C7dN5Mk3LuKyf2p1a_AcvitpPQGCxOR-/s1600/dante.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgobMX_GJBPQgdP-r6RN4dbrKwkbRLg_Ev_9KrmOjd6-RsYj8ezb84HVfvg-80kTqo5SC8-jRkAuRbf7nR6DLGU_pNfzBHo479-_CBkFR6Rcb6_C7dN5Mk3LuKyf2p1a_AcvitpPQGCxOR-/s500/dante.png" /></a><br />
<b><br />
</b><br />
<b>3. <a href="http://woork.blogspot.com/">Woork</a></b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3QGj_a6gSqYAYm4yIL1JGx2-kbOnB6ax5X9kHwt39pXSZIgZkqZIoBrBN-fXDybh_ag479efRAnEHPp-hZ5y7RECF5IurfBNAtM0z15ZPOl_q22V1PRjHUK0z0wsl9rL_gUlmGMbTt2XM/s1600/woork.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3QGj_a6gSqYAYm4yIL1JGx2-kbOnB6ax5X9kHwt39pXSZIgZkqZIoBrBN-fXDybh_ag479efRAnEHPp-hZ5y7RECF5IurfBNAtM0z15ZPOl_q22V1PRjHUK0z0wsl9rL_gUlmGMbTt2XM/s500/woork.png" /></a><br />
<b><br />
</b><br />
<b>4. <a href="http://www.bloggerbuster.com/">Blogger Buster</a></b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4tzmk6-d16019n0upzW1T3m3DHtexrmuAkRREdc9K19yuEX5uH-TvEi5HpqZ2lPw-beBJ0JJ3BsQ_5YAjRZkxGQSFBAX4dur-KJmuX_kgzwtitp0OCuEkZtZpScG_dejyMMUwROrsdgNm/s1600/blogger_buster.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4tzmk6-d16019n0upzW1T3m3DHtexrmuAkRREdc9K19yuEX5uH-TvEi5HpqZ2lPw-beBJ0JJ3BsQ_5YAjRZkxGQSFBAX4dur-KJmuX_kgzwtitp0OCuEkZtZpScG_dejyMMUwROrsdgNm/s500/blogger_buster.png" /></a><br />
<b><br />
</b><br />
<b>5. <a href="http://themerious.blogspot.com/">Themerious</a></b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFIPYDuNOYH4KhyphenhyphenLd_vbw4VzxbSoH7NbixdrvDN6yLFI1nwT-6Hh2LajTY-hHw0yhRzm3eorYxmLsyFYED-QEerTo8vpyJj9quL6T1TV6Db4zjzVnnVUsQHKP1zj3xMRmVClEXSOZeZoqE/s1600/themerious.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFIPYDuNOYH4KhyphenhyphenLd_vbw4VzxbSoH7NbixdrvDN6yLFI1nwT-6Hh2LajTY-hHw0yhRzm3eorYxmLsyFYED-QEerTo8vpyJj9quL6T1TV6Db4zjzVnnVUsQHKP1zj3xMRmVClEXSOZeZoqE/s500/themerious.png" /></a><br />
<b><br />
</b><br />
<b>6. <a href="http://www.onedesignph.com/">Onedesignph</a></b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9hb38TJTk5BPvTagt2xkPYVLDMwPghgNfG2JzHYc5kLSwSNKQUZu-tQluqG-A0oV7V8tYpC8uZDhhIGMIXC3f9VuYEfhA8hmz2Dw6JJ8zjHixWSvkbDOf9_sJneiRhgaBt-tJyNUnpqwO/s1600/onedesignph.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9hb38TJTk5BPvTagt2xkPYVLDMwPghgNfG2JzHYc5kLSwSNKQUZu-tQluqG-A0oV7V8tYpC8uZDhhIGMIXC3f9VuYEfhA8hmz2Dw6JJ8zjHixWSvkbDOf9_sJneiRhgaBt-tJyNUnpqwO/s500/onedesignph.png" /></a><br />
<b><br />
</b><br />
<b>7. <a href="http://minimalobjective.blogspot.com/">Minimal objective</a></b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2RmydVJU2BpgERnhkL21GSHBsN6fpRNfJZDIO-4s3nAwy1rFV3pdmx6Tkp2P1Vu7o3yixUZC3j6PKQALpIiGE5hS_4CieZqSjZmNyZP-VAsKbw0XYg-6IsTN2RrCxx3unJpHMRuXm_J5e/s1600/minimalobjective.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2RmydVJU2BpgERnhkL21GSHBsN6fpRNfJZDIO-4s3nAwy1rFV3pdmx6Tkp2P1Vu7o3yixUZC3j6PKQALpIiGE5hS_4CieZqSjZmNyZP-VAsKbw0XYg-6IsTN2RrCxx3unJpHMRuXm_J5e/s500/minimalobjective.png" /></a><br />
<b><br />
</b><br />
<b>9. <a href="http://man-sur.blogspot.com/">Design for life</a></b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkdmNa7ybB6oSOMpOEwzWLrBqswK6D2UhnsFPChc3y21oHtHEqdtKIXP3tTY8VMmsXFWnMt6MQ3bQUh5LeTDjHmXobYDNpE7yJuapoFntcobdoQRGN8oqju3zvxqqkuk_JmgPEUgLS8nSH/s1600/design_for_life.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkdmNa7ybB6oSOMpOEwzWLrBqswK6D2UhnsFPChc3y21oHtHEqdtKIXP3tTY8VMmsXFWnMt6MQ3bQUh5LeTDjHmXobYDNpE7yJuapoFntcobdoQRGN8oqju3zvxqqkuk_JmgPEUgLS8nSH/s500/design_for_life.png" /></a><br />
<b><br />
</b><br />
<b>10. <a href="http://rames.blogspot.com/">Ramesh Studios</a></b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIa7ugBSobw4PLwhL3qg4SbsYqTBiRPJh2GzzowztbqdNAe5EDsQAXBe1lF1wndUMvXbJPql7JEBICkcANJn2e_AUMzTGuMPqif1Yt0tI_cXAwNZ1yHScZRoXjbRZwHTvY-jbLGW0wmoXx/s1600/rames.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIa7ugBSobw4PLwhL3qg4SbsYqTBiRPJh2GzzowztbqdNAe5EDsQAXBe1lF1wndUMvXbJPql7JEBICkcANJn2e_AUMzTGuMPqif1Yt0tI_cXAwNZ1yHScZRoXjbRZwHTvY-jbLGW0wmoXx/s500/rames.png" /></a><br />
<b><br />
</b><br />
<b>11. <a href="http://www.blog.martull.com/">Sama-sama-blog</a></b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjidHEcMhE-8m30k_OI2pL3rDq4qwvjBNC2coPF3MNGJQdhKt1EtIQN4kaQisHa6t6l1Kw5D0F2OmTyAFkAkSqmZRI5jeuHLq-ZhJu2s-Wp1fLbvdoQS0UHsQiqSvqsbax4krSSM50Qws2s/s1600/sama_sama_blog.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjidHEcMhE-8m30k_OI2pL3rDq4qwvjBNC2coPF3MNGJQdhKt1EtIQN4kaQisHa6t6l1Kw5D0F2OmTyAFkAkSqmZRI5jeuHLq-ZhJu2s-Wp1fLbvdoQS0UHsQiqSvqsbax4krSSM50Qws2s/s500/sama_sama_blog.png" /></a><br />
<b><br />
</b><br />
<b>12. <a href="http://www.rob-sheridan.com/sketchblog/">Sketch blog</a></b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiitzGR51WF0L7XgPj3tIOqy-Aweb1YDyhItXzS0he4YIxffqV7y-iHuAzSb87PHvFSfubAVW1ciSN0sgo5i5PArHgfOc3i7mmN41dexXFFM1CGTlu7hyphenhyphenqn_zCRpZFzvU-cY0k4noUbmYV2/s1600/sketch_blog.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiitzGR51WF0L7XgPj3tIOqy-Aweb1YDyhItXzS0he4YIxffqV7y-iHuAzSb87PHvFSfubAVW1ciSN0sgo5i5PArHgfOc3i7mmN41dexXFFM1CGTlu7hyphenhyphenqn_zCRpZFzvU-cY0k4noUbmYV2/s500/sketch_blog.png" /></a><br />
<b><br />
</b><br />
<b>13. <a href="http://xprograf.blogspot.com/">Compartamos Ideas 2.0</a></b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdbFHvvXpWgtH2m7_rurCehkr4vHFyrY0AhLctl-1N1215qKuAzz8gLaQ5YIq2fvBbFaA0SijYn-bctEDKOkc8Cv6bDA1F35yaNKwxArf3JCwBg_t3Oa1thwzF2w_8bNW6i0frIUANbJEx/s1600/compartamos.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdbFHvvXpWgtH2m7_rurCehkr4vHFyrY0AhLctl-1N1215qKuAzz8gLaQ5YIq2fvBbFaA0SijYn-bctEDKOkc8Cv6bDA1F35yaNKwxArf3JCwBg_t3Oa1thwzF2w_8bNW6i0frIUANbJEx/s500/compartamos.png" /></a><br />
<b><br />
</b><br />
<b>14. <a href="http://meta-microcosmos.blogspot.com/">Meta microcosmos</a></b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGsQhd6IvPDBhIJb8umu5L_1gIc3tYPMhWk25QXyVCWvjzhLa4sRwYNM-tjR7MlzDUiqaztbChD0_WmtSVwermi-hysr9HbKPv9LGRnrtpAYh1UE-Bw0MYA9f6GxGE8U4UQ1rx0K4wzP5m/s1600/meta_microcosmos.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGsQhd6IvPDBhIJb8umu5L_1gIc3tYPMhWk25QXyVCWvjzhLa4sRwYNM-tjR7MlzDUiqaztbChD0_WmtSVwermi-hysr9HbKPv9LGRnrtpAYh1UE-Bw0MYA9f6GxGE8U4UQ1rx0K4wzP5m/s500/meta_microcosmos.png" /></a><br />
<b><br />
</b><br />
<b>15. <a href="http://nox-mysterium.blogspot.com/">Nox-mysterium</a></b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdesDkbGQGRcQbmLnIh3dgDiLwq6L2sP98KlsYdYJF_nG-tLFleT2AgTy7x8Iza2Fa-CU_esGlf0Bd1wbLoPXV8246T2TUfWHhbXZYRj6IGZGJWgEzYOD1xHUD55wx28V6u0Xl348FoI0q/s1600/nox_mysterium.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdesDkbGQGRcQbmLnIh3dgDiLwq6L2sP98KlsYdYJF_nG-tLFleT2AgTy7x8Iza2Fa-CU_esGlf0Bd1wbLoPXV8246T2TUfWHhbXZYRj6IGZGJWgEzYOD1xHUD55wx28V6u0Xl348FoI0q/s500/nox_mysterium.png" /></a><br />
<b><br />
</b><br />
<b>16. <a href="http://flairinthecity.blogspot.com/">Flair in the City</a></b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji7zHgChIV-yRO0NcPsij0a3WwlC_FrlhDqhO97CP8hgDZH-dsZoEWMHrDt4e3fZwkFbga-4yJ8ICLs5mEzZDb4ohuzcat6K_hmmGkKeNkRMu8zpNOKuPyAaKqstIEqO8C3SZP2Xi0G27E/s1600/flairinthecity.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji7zHgChIV-yRO0NcPsij0a3WwlC_FrlhDqhO97CP8hgDZH-dsZoEWMHrDt4e3fZwkFbga-4yJ8ICLs5mEzZDb4ohuzcat6K_hmmGkKeNkRMu8zpNOKuPyAaKqstIEqO8C3SZP2Xi0G27E/s500/flairinthecity.png" /></a><br />
<b><br />
</b><br />
<b>17. <a href="http://amuki.blogspot.com/">Blog Amuki</a></b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy0LuYNEDDXPlpdPg0BJbisCm-4lQZMRZOjvwlOQqg_W4TU7RFqZy9GrTnE-PMFVc-8ARbg6044v2ij0cYybB-ex0scG3-gofslTsdTFvGBo6Rh4UB5kxok8HiQsOlHHwDhSH0p0up0lab/s1600/amuki.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy0LuYNEDDXPlpdPg0BJbisCm-4lQZMRZOjvwlOQqg_W4TU7RFqZy9GrTnE-PMFVc-8ARbg6044v2ij0cYybB-ex0scG3-gofslTsdTFvGBo6Rh4UB5kxok8HiQsOlHHwDhSH0p0up0lab/s500/amuki.png" /></a><br />
<b><br />
</b><br />
<b>18. <a href="http://detruk.blogspot.com/">Detruk</a></b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsCJDG9TZzxo2Or1_JZ8ke6-eLNhrz58qz_ftlYkuG5QZEPuHsK3d1TG1pwip9TvMy7_8PvTRKIWUsSvFY5UarYyxnLeINHGphWL5wbYLJBZPedLck6HDGXtBiG6BJCLaXNpJkW4BmztJP/s1600/detruk.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsCJDG9TZzxo2Or1_JZ8ke6-eLNhrz58qz_ftlYkuG5QZEPuHsK3d1TG1pwip9TvMy7_8PvTRKIWUsSvFY5UarYyxnLeINHGphWL5wbYLJBZPedLck6HDGXtBiG6BJCLaXNpJkW4BmztJP/s500/detruk.png" /></a><br />
<b><br />
</b><br />
<b>19. <a href="http://complotito.blogspot.com/">Complotito</a></b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7oRadvP_p1lzGLlfuCEWCvJp8ibMNu6ZNbmMNK-9i3MarFAK7FGZyrT5K8XUqoiV5-ieBcZQwlWBcc_nlxClMeRKjrnMsVBG-groRrh6RPy4HqOZEBX68AgcefzYoMKxV838Gz6_lJ3ht/s1600/complotito.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7oRadvP_p1lzGLlfuCEWCvJp8ibMNu6ZNbmMNK-9i3MarFAK7FGZyrT5K8XUqoiV5-ieBcZQwlWBcc_nlxClMeRKjrnMsVBG-groRrh6RPy4HqOZEBX68AgcefzYoMKxV838Gz6_lJ3ht/s500/complotito.png" /></a><br />
<b><br />
</b><br />
<b>20. <a href="http://deconstructioncode.blogspot.com/">Code-code-an</a> </b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDH_e0JZe_bmcSFTjxvev-X5GJc6EEIuopB82VRHYCDYrWumsznMLMezhC9kEUjjmBrnR_5Y9U9cSr0rNUibvtDEdBiBnN1ULYCO_ZsP3-ROgDmtRy9oaI6fk9Pi70gXWnzdCBd0JFdp2H/s1600/code-code-an.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDH_e0JZe_bmcSFTjxvev-X5GJc6EEIuopB82VRHYCDYrWumsznMLMezhC9kEUjjmBrnR_5Y9U9cSr0rNUibvtDEdBiBnN1ULYCO_ZsP3-ROgDmtRy9oaI6fk9Pi70gXWnzdCBd0JFdp2H/s500/code-code-an.png" /></a><br />
<b><br />
</b><br />
<b>21. <a href="http://www.niteshkothari.com/">Nitesh Kothari</a></b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDveq0E4K_FXLa0wdlJ3b3HroADihgo5tdM5eZJUkXVk-Ezml6-BqONZEbes9NhDNAHqMs7TEpJQDDw0USdZWk1WN_trpi_P0qjNhWZxLHbURhsnIT2kdW3ibOVus53E0Mqc_8OZ5Svzw9/s1600/nithesh.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDveq0E4K_FXLa0wdlJ3b3HroADihgo5tdM5eZJUkXVk-Ezml6-BqONZEbes9NhDNAHqMs7TEpJQDDw0USdZWk1WN_trpi_P0qjNhWZxLHbURhsnIT2kdW3ibOVus53E0Mqc_8OZ5Svzw9/s500/nithesh.png" /></a>Rethnaraj Rambabuhttp://www.blogger.com/profile/15863204708800295797noreply@blogger.com31tag:blogger.com,1999:blog-6722993789567734861.post-67781494816997668842010-07-07T04:47:00.002+08:002010-07-07T11:00:23.248+08:00Cool CSS3 button maker<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_kwq_RhyP8V5TWtbJgBKfG81KqYKGvdCeiPivMMxslYs3SprueFSQSQpezEoheD0tSObtbk38OGj8S6Pt9ragPcvcNhKPzTRbQ4H7UI6iEizOKJAwTopX9jrzvDF8LcgyRx5kMocnO0IX/s1600/css3_button_maker.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_kwq_RhyP8V5TWtbJgBKfG81KqYKGvdCeiPivMMxslYs3SprueFSQSQpezEoheD0tSObtbk38OGj8S6Pt9ragPcvcNhKPzTRbQ4H7UI6iEizOKJAwTopX9jrzvDF8LcgyRx5kMocnO0IX/s320/css3_button_maker.png" /></a>CSS3 button maker is a simple and great online tool created by Chris Coyier from <a href="http://css-tricks.com/css3-button-maker/">CSS Tricks</a>. This tool allows you to generate a image-less button fully making use of CSS3. I am sure that some of you may don't know what CSS3 is really about. CSS3 is a <a href="http://www.css3.info/modules/" target="_blank">collection of modules</a> that extend the previous CSS2 specification that we all know. CSS level 3 is currently under development. Read further about <a href="http://www.css3.info/">CSS3</a> here.<br />
<br />
<span class="button"><a href="http://css-tricks.com/examples/ButtonMaker/">CSS3 Button Maker</a></span><br />
<br />
Button above was made fully with CSS3. The effects are clearly visible in latest versions of <a href="http://www.mozilla.com/firefox/">Firefox</a>, <a href="http://www.konqueror.org/">Konqueror</a>, <a href="http://www.opera.com/">Opera</a> or <a href="http://www.webkit.org/">Safari/Webkit</a>. In older browers that don’t support these properties, the fallback is solid-color background, no shadows, and square corners which is not a big deal as everybody are moving to new browsers. To create such button for your use, visit <a href="http://css-tricks.com/examples/ButtonMaker/">CSS3 button maker</a> now. Here is a preview of the super duper online tool.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwwqG7lYkJrOYFQIrBo5l89BNJ9X21ZHqENgw5uwfsi4jjl2wB_X2RvAzRseI-eC4oCjk8MusGmex6kVChUsgq6ZH_j5yIDwqGtApxJ4aE0QrQ0o-D-GKtz71xVw5TYmy4NAsc8fsw8yuW/s1600/css3_button_generator.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwwqG7lYkJrOYFQIrBo5l89BNJ9X21ZHqENgw5uwfsi4jjl2wB_X2RvAzRseI-eC4oCjk8MusGmex6kVChUsgq6ZH_j5yIDwqGtApxJ4aE0QrQ0o-D-GKtz71xVw5TYmy4NAsc8fsw8yuW/s500/css3_button_generator.png" /></a></div><br />
Once you've customized the button, click on the button "View the CSS" to get the CSS code. Copy the code and go to <b>Blogger > Design > Edit HTML</b> and search for <span style="background-color: #fff2cc;">]]></b:skin></span>. Paste the copied code immediately before <span style="background-color: #fff2cc;">]]></b:skin></span> and click <b>Save</b>.<br />
<br />
To use it in posts or anywhere in your template, simply add a <span style="background-color: #cfe2f3;">class='button"</span> attribute in <b style="background-color: #d0e0e3;">anchor tag</b>. Here is a sample button and its code.<br />
<br />
<span class="button"><a href="http://css-tricks.com/examples/ButtonMaker/">CSS3 Button Maker</a></span><br />
<br />
<div class="codelist"><a class="button" href="http://css-tricks.com/examples/ButtonMaker/">CSS3 Button Maker</a></div><br />
You are done.Rethnaraj Rambabuhttp://www.blogger.com/profile/15863204708800295797noreply@blogger.com30tag:blogger.com,1999:blog-6722993789567734861.post-23181479251553593632010-07-06T13:56:00.004+08:002010-07-06T19:55:10.340+08:00Image mouseover fade/greyscale effect with jQuery in BloggerToday, I am going to make a black and white image fade into a colour image or vice versa on mouseover with jQuery. So, follow the steps below to use the effect in your blog. In this tutorial, I'm going to use two images, a colour image and its greyscale mode image.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7e-Zjy2dAW1gw_c5I6WlpZAJTDHC2Q0Z2UBLFZ4dPazDSnzGpmVbsQXyy1R2NWvrpQfGwTM2yPqw_PRG4xaCbvM4ErLtvWIdebbly0R9lAazz59EOCIchHKWmIUkEXeqLKdJbgeY_20U8/s1600/brella_1.jpg" imageanchor="1"><img border="0" height="133" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7e-Zjy2dAW1gw_c5I6WlpZAJTDHC2Q0Z2UBLFZ4dPazDSnzGpmVbsQXyy1R2NWvrpQfGwTM2yPqw_PRG4xaCbvM4ErLtvWIdebbly0R9lAazz59EOCIchHKWmIUkEXeqLKdJbgeY_20U8/s200/brella_1.jpg" width="200" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOxqb4vp9GjehUCsiW5-4itDw1Bzk0UrXL_2jzpFaYUSpO-nfUue7s9Xh6tBvb8rrxQFbKpF1TIFHB9KOg40ocaDTb5nlvSUfQPu0xVev89vmHGpLSokcKyx2OQ0vNFPfd8UtuCcUSYxsd/s1600/brella_grey.jpg" imageanchor="1"><img border="0" height="134" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOxqb4vp9GjehUCsiW5-4itDw1Bzk0UrXL_2jzpFaYUSpO-nfUue7s9Xh6tBvb8rrxQFbKpF1TIFHB9KOg40ocaDTb5nlvSUfQPu0xVev89vmHGpLSokcKyx2OQ0vNFPfd8UtuCcUSYxsd/s200/brella_grey.jpg" style="margin-left: 20px;" width="200" /></a></div><br />
<span class='button'><a href="http://demoblog-introblogger.blogspot.com/2010/07/demo-image-mouseover-fadegreyscale.html">View the demo</a></span><br />
<br />
You can create greyscale mode image of the original image using any image editing softwares. Or you can use free online image editors such as <a href="http://www.online-image-editor.com/">Online-Image-Editor</a>, <a href="http://fotoflexer.com/">Fotoflexer</a>, <a href="http://www.pixlr.com/">Pixlr</a>, <a href="http://www.picnik.com/">Picnik</a> and more.<br />
<br />
<b>1. Styling – CSS</b><br />
<br />
First log into Blogger > Design > Edit HTML. Search for the code <span style="background-color: #cfe2f3;">]]></b:skin></span> . And replace it with the codes below.<br />
<br />
<div class="codelist">span.fadehover {<br />
position: relative;<br />
}<br />
<br />
img.a {<br />
position: absolute;<br />
left: 0;<br />
top: 0;<br />
z-index: 10;<br />
}<br />
<br />
img.b {<br />
position: absolute;<br />
left: 0;<br />
top: 0;<br />
}<br />
<br />
]]></b:skin></div><br />
<b>2. jQuery & Function</b><br />
<br />
Now add the following jQuery script and function immediately before the <span style="background-color: #f9cb9c;"></head></span> tag. <br />
<br />
<div class="codelist"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js' type='text/javascript'/><br />
<br />
<script type='text/javascript'><br />
//<![CDATA[<br />
$(document).ready(function(){<br />
$("img.a").hover(<br />
function() {<br />
$(this).stop().animate({"opacity": "0"}, "slow");<br />
},<br />
function() {<br />
$(this).stop().animate({"opacity": "1"}, "slow");<br />
});<br />
<br />
});<br />
//]]><br />
</script></div><br />
<b>3. Wireframe – HTML</b><br />
<br />
And here is the HTML code that you should place in your Blog posts. But, remember to add it in <b>EDIT HTML</b> mode and <b>not</b> in Compose mode in text editor.<br />
<br />
<div class="codelist"><span class="fadehover"><br />
<img src="URL_of_normal_image" alt="" class="a" /><br />
<img src="URL_of_greyscale_image" alt="" class="b" /><br />
</span></div><br />
<span class='button'><a href="http://demoblog-introblogger.blogspot.com/2010/07/demo-image-mouseover-fadegreyscale.html">View the demo</a></span><br />
<br />
<b>UPDATE :</b> You can decide whether you want the effect is from GREYSCALE to COLOUR or COLOUR to GREYSCALE by changing the image source in the HTML code above. The image with <span style="background-color: #ffe599;">class='a'</span> appears first and changes to image with <span style="background-color: #d9ead3;">class='b'</span> on hover.Rethnaraj Rambabuhttp://www.blogger.com/profile/15863204708800295797noreply@blogger.com33tag:blogger.com,1999:blog-6722993789567734861.post-84476912231783152822010-07-03T14:26:00.002+08:002010-07-06T22:53:44.257+08:00How to change "Newer Posts" and "Older Posts" in Blogger?<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-qAu9fsnkU0z7-sDgX5huHaCpcMrQ1JtCp8bbNOr8m7EqOjwA1lcKinbtiozYHUj0QyXYpMl_ibwWjb7ig08FCSpVWGQ8fPpuQJNXz60YQXzKujHX4Ll-FxwHy3eAieZcQ-BvHvafeQq4/s1600/book_pages_400.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="150px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-qAu9fsnkU0z7-sDgX5huHaCpcMrQ1JtCp8bbNOr8m7EqOjwA1lcKinbtiozYHUj0QyXYpMl_ibwWjb7ig08FCSpVWGQ8fPpuQJNXz60YQXzKujHX4Ll-FxwHy3eAieZcQ-BvHvafeQq4/" width="150px" /></a></div>Here is a small tutorial about customizing the default Blogger pager link texts, "Newer Posts" and "Older Posts" at the bottom of every page. First, log into Blogger then go to Design > Edit HTML. Tick the "Expand Widgets Templates" checkbox at the top right corner of the code-containing box.<br />
<br />
<br />
<br />
<br />
1. To change NEWER POSTS. <br />
<br />
Search for <span style="background-color: #f9cb9c;"><data:newerPageTitle/></span> using CTRL+F. <span onmouseout="_tipoff()" onmouseover="_tipon(this)">This </span> <span style="background-color: #f9cb9c;"><data:newerPageTitle/></span> <span onmouseout="_tipoff()" onmouseover="_tipon(this)">tag is used to name the button which links to the Newer Posts<b>.</b></span> <span onmouseout="_tipoff()" onmouseover="_tipon(this)" style="background-color: white;">To modify the text, just delete this tag and write what you want.</span><br />
<br />
<span onmouseout="_tipoff()" onmouseover="_tipon(this)" style="background-color: white;">2. To change the OLDER POSTS .</span><br />
<br />
<span onmouseout="_tipoff()" onmouseover="_tipon(this)" style="background-color: white;">Search for <span style="background-color: #cfe2f3;"><data:olderPageTitle/></span> and replace it with the text with you want to appear.</span><br />
<br />
<span onmouseout="_tipoff()" onmouseover="_tipon(this)" style="background-color: white;">3. To change the HOME text. </span><br />
<br />
<span onmouseout="_tipoff()" onmouseover="_tipon(this)" style="background-color: white;">Search for <span style="background-color: #ead1dc;"><data:homeMsg/></span> and replace the tag with the desired text.</span> <span onmouseout="_tipoff()" onmouseover="_tipon(this)"><span class="google-src-text" style="direction: ltr; text-align: left;"></span></span> <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-R9hlLIGlRaCxoQ0fgFCdk1jNFsbkFnllzohz9AAwge2FJMFx7fKIrMEUocshSSHhLWky3uWHCiglfrxJwPsRFOdXH3VsYlfVVj9_7SDZxGsOMY2GBlCjch1YXn6aQv8Y1cSEykgGkUoJ/s1600/older-posts.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-R9hlLIGlRaCxoQ0fgFCdk1jNFsbkFnllzohz9AAwge2FJMFx7fKIrMEUocshSSHhLWky3uWHCiglfrxJwPsRFOdXH3VsYlfVVj9_7SDZxGsOMY2GBlCjch1YXn6aQv8Y1cSEykgGkUoJ/" /></a></div><br />
<b>Update:</b> <br />
<br />
If you want to show images/icons instead of text, all you have to do is just replace the tags highlighted above with the images.<br />
<br />
<div class="codelist"><img alt='...' border='0' src='...'/></div><br />
Thousands of these icons are available on net. Simply google for them. The final result will look like this. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE8ywJzfaOCGin39mEfWaFKCIz7uQDHzTzyhq8RhT6uut7OaPhRl5JtfQm_FlOSla9MyR3Ci-8a3GJtogB1UejNS3J7B58luXs0zz_HA5pyqb3bNklFB6XpuhyphenhyphennYD9TrRSSKrn2fwJ5X4L/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE8ywJzfaOCGin39mEfWaFKCIz7uQDHzTzyhq8RhT6uut7OaPhRl5JtfQm_FlOSla9MyR3Ci-8a3GJtogB1UejNS3J7B58luXs0zz_HA5pyqb3bNklFB6XpuhyphenhyphennYD9TrRSSKrn2fwJ5X4L/" /></a></div>Rethnaraj Rambabuhttp://www.blogger.com/profile/15863204708800295797noreply@blogger.com29tag:blogger.com,1999:blog-6722993789567734861.post-91463101409999289002010-06-29T00:04:00.000+08:002010-06-29T00:04:29.174+08:00Modern Clix Blogger Template<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPYlPVCorPPqZUcQcOikAC-mHBl9jU9d9nZREZfvXDHHdat0so6bd3z5EMJPxJgca9y8ggKQDh6CTLxs-j2loANdLMFTvWjCk3cU-8BxJ9hkT2jiVh6tEq-DT7OGFLEMJVKRXWGSaTrrL0/s1600/modernclix.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPYlPVCorPPqZUcQcOikAC-mHBl9jU9d9nZREZfvXDHHdat0so6bd3z5EMJPxJgca9y8ggKQDh6CTLxs-j2loANdLMFTvWjCk3cU-8BxJ9hkT2jiVh6tEq-DT7OGFLEMJVKRXWGSaTrrL0/s320/modernclix.gif" /></a>Modern Clix is a minimal, grid based, elastic Wordpress blog theme inspired in the Swiss Style of Design. I've managed to convert it into Blogger after being requested to do so by a reader, <a href="http://www.blogger.com/profile/09806837835734908684">Earl</a>. Another important thing is that it is a <i>fast-loading </i>blogger template with no background images involved in CSS.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><span class="theme-buttons"><a href="http://www.box.net/shared/ohov575ut7" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjufQfUJgD-GTutksbaJOa3yXaLSbDpPxAT0tiEVdBkWGXAFjc15wKTplMQTtSEgSOXkG2BJnv_PLDqLGuzrjvFPcgjxlxK7A1OdUvi3THu_BRRblylF8JMcN9zbmwTkJy4QRbKp1t3r6eP/s320/download.png" /></a><a href="http://modernclix-introblogger.blogspot.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCWgBaH8DSz6l7FR0V6eJp-S9sCnVVPHmmeAgy4ymIKUbLhpjfj36uRsIuv5MEXjm_pifIrJg-xL897jNGofBjxUxeMjUv_ER-_TiQAU09LriyW0d8quTc6sV0R5bP5hlW_CS32N0ikbZB/s320/preview.png" /></a></span></div><a name='more'></a><br />
<i><span style="font-size: large;"><b>Instructions on editing the template</b></span></i><br />
<br />
1. Blog title and description<br />
<br />
<div class="codelist"><div id='main-nav'><br />
<ul><br />
<li class='page_item page-item-2'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li><br />
<li class='page_item page-item-2'><a href='#' title='About'>About</a></li><br />
<li class='page_item page-item-49'><a href='#' title='Sample Page'>Sample Page</a></li><br />
<li class='page_item page-item-51'><a href='#' title='And Another Sample Page'>And Another Sample Page</a></li><br />
</ul> <br />
</div></div><br />
2. Navigation menu<br />
<br />
<div class="codelist"><div class='col last span-12' id='header'><br />
<h1><a expr:href='data:blog.homepageUrl' title='Your Blog Title Here'>Modern Clix</a></h1><br />
<h2>Blogger template <span class='low'>by</span> Introblogger</h2><br />
</div></div><br />
<br />
3. Date format<br />
- Blogger default date format is <i>Monday, June 28, 2010</i>. Change it to <i>June, 28 2010</i>.Rethnaraj Rambabuhttp://www.blogger.com/profile/15863204708800295797noreply@blogger.com38tag:blogger.com,1999:blog-6722993789567734861.post-67048382250804241702010-06-27T15:42:00.001+08:002010-06-27T15:43:45.859+08:00Add "About Author" box below every blog posts in Blogger | How to<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtq52Uah2EOYFSB_t5pt1Ck4BB2sHgbRQXoMp-TU3nnxCApjNd8WzxMSkzg979OLJonXfp57EJITv_5H5xSAbQ93rzM9aDWb-pAxd4elHxvRFJ0Wy5ISl1lvUOjpPBrMUDmj1sGQiBtBKB/s1600/about-author1.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtq52Uah2EOYFSB_t5pt1Ck4BB2sHgbRQXoMp-TU3nnxCApjNd8WzxMSkzg979OLJonXfp57EJITv_5H5xSAbQ93rzM9aDWb-pAxd4elHxvRFJ0Wy5ISl1lvUOjpPBrMUDmj1sGQiBtBKB/s320/about-author1.gif" /></a>This is a tutorial on adding a simple and clean About Author below every posts in Blogger that only appears on post pages. I am sure that all of us would have seen this feature mostly in Wordpress blogs. But now, Blogger users can have this feature too. You may have a look at my latest Blogger template, <a href="http://introblogger.blogspot.com/2010/06/blogger-template-charisma.html">Charisma</a> where I've implemented this feature. Follow easy steps below to add it.<br />
<a name='more'></a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0mZzGNuN7qnyvjRrsdObLos8mLiBUShQLS8zutCLUSg1Lz0VDgms5pG2OvQI5zjUp0jkRiTJKyegJj_41zMpF_P63-_hYbVpmm4B7oQMtgdGIn5_vGp-5nqlGIQZFIV4EyG16D62vsuw6/s1600/about-author.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0mZzGNuN7qnyvjRrsdObLos8mLiBUShQLS8zutCLUSg1Lz0VDgms5pG2OvQI5zjUp0jkRiTJKyegJj_41zMpF_P63-_hYbVpmm4B7oQMtgdGIn5_vGp-5nqlGIQZFIV4EyG16D62vsuw6/" /></a></div><br />
1. Go to <b><i>Edit HTML</i> </b>page in Blogger and tick the "<b><i>Expand Widget Templates</i></b>" checkbox above the top right corner of the template code box.<br />
<br />
2. Now find for the <span style="background-color: #fce5cd; color: #cc0000;">]]></b:skin></span> code using CTRL+F and replace it with the code below.<br />
<br />
<div class="codelist">/***** Author Box ********************/<br />
<br />
.author-box {<br />
background: #F7F7F7;<br />
margin: 20px 0 40px 0;<br />
padding: 10px;<br />
border: 1px solid #E6E6E6;<br />
overflow: auto;<br />
}<br />
<br />
.author-box p {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
<br />
.author-box img {<br />
background: #FFFFFF;<br />
float: left;<br />
margin: 0 10px 0 0;<br />
padding: 4px;<br />
border: 1px solid #E6E6E6;<br />
}<br />
<br />
]]></b:skin><br />
<br />
</div><br />
3. Then, search for <span style="background-color: #cfe2f3; color: #351c75;"><div class='post-footer-line post-footer-line-1'></span>. Immediately after that, paste the code below.<br />
<br />
<div class="codelist"><b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<div class='author-box'><br />
<p><img alt='' class='avatar avatar-70 photo' height='70' src='<b style="background-color: white; color: #38761d;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYOKh48Qfojw2QxibW1jPzkSrO8TeNu5xldWOgvhS-KrE_rKzxy-9EwA0MlP3eHYseEtpulKZegPfZt9Zu4oPYe04ruy3dNhbVtXkJF084Q-Zaks_8PeQ2ythdJSFVmhmhyphenhyphenF4cYLaUkQET/</b>' width='70'/><b>About Author</b><br/><br />
Write anything about you here!<br/></p><br />
</div><br />
</b:if><br />
<br />
</div>4. Click "Save" and done.<br />
<br />
<span style="background-color: #ead1dc; color: #741b47;"><b:if cond='data:blog.pageType == &quot;item&quot;'>....</b:if></span> is to make sure that the box is only visible in post pages and won't appear in Home Page. If you want to show your own image, just replace the default image source shown in green colour text in the code with your IMAGE URL.Rethnaraj Rambabuhttp://www.blogger.com/profile/15863204708800295797noreply@blogger.com25tag:blogger.com,1999:blog-6722993789567734861.post-28588102849171002902010-06-25T23:05:00.000+08:002010-06-25T23:05:49.525+08:00Blogger Template | Charisma<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH5TogTKjd86MNi6phOoZorwuMtVgOPE4Z_cPOhQ6ITlLZKALu9l4rLgWbe62WyxPssgORJDzuanyyZacDv9mXyyjEF2x-pVkNRzpNpcNjqk4bh2zoMpp2dN3DCuCAQDhQhyphenhypheny0Hu7DXujg/s1600/charisma.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="153" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH5TogTKjd86MNi6phOoZorwuMtVgOPE4Z_cPOhQ6ITlLZKALu9l4rLgWbe62WyxPssgORJDzuanyyZacDv9mXyyjEF2x-pVkNRzpNpcNjqk4bh2zoMpp2dN3DCuCAQDhQhyphenhypheny0Hu7DXujg/s320/charisma.png" width="320" /></a></div><i>Charisma</i> is a wordpress theme designed by Cozmoslabs. Attracted to it's elegance and simplicity, I decided to convert this theme into Blogger. Previously, I've converted another theme by Cozmoslabs, { <a href="http://introblogger.blogspot.com/2010/02/early-morning-theme-wordpress-theme.html">Early Morning</a> }.<br />
<br />
The home page has a beautiful slider, where you can display featured blog posts. <i>Charisma</i> theme comes with a unique feature where only post titles are shown in the home page of the blog. This feature for sure will help to increase your blog's page views and average time on your site.<br />
<br />
As mentioned by original author of the theme, Cristian Antohe, it is a well structure theme which highlights the content and gives the user a pleasurable reading experience.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><span class="theme-buttons"><a href="http://www.box.net/shared/becd2q4hj2" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjufQfUJgD-GTutksbaJOa3yXaLSbDpPxAT0tiEVdBkWGXAFjc15wKTplMQTtSEgSOXkG2BJnv_PLDqLGuzrjvFPcgjxlxK7A1OdUvi3THu_BRRblylF8JMcN9zbmwTkJy4QRbKp1t3r6eP/s320/download.png" /></a><a href="http://charisma-introblogger.blogspot.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCWgBaH8DSz6l7FR0V6eJp-S9sCnVVPHmmeAgy4ymIKUbLhpjfj36uRsIuv5MEXjm_pifIrJg-xL897jNGofBjxUxeMjUv_ER-_TiQAU09LriyW0d8quTc6sV0R5bP5hlW_CS32N0ikbZB/s320/preview.png" /></a><br />
</span></div><a name='more'></a><br />
<br />
Here are instructions on customizing/editing the <i>Charisma</i> blogger template.<br />
<br />
1. Navigation menu<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyJZAMGaavdgxmJ7r1WNiFAEg0MGYn-e8hMbb0k0dLkwehlsWc6bSS-jg5Bn2pCr6mowHLcZPBAuPmILvi4vBjlbD8InwLInRFug-dhyphenhyphene3IsQNKtI6PQ_iuAYGcapRFUdQ0MJNGEeCH9PT/s1600/navbar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyJZAMGaavdgxmJ7r1WNiFAEg0MGYn-e8hMbb0k0dLkwehlsWc6bSS-jg5Bn2pCr6mowHLcZPBAuPmILvi4vBjlbD8InwLInRFug-dhyphenhyphene3IsQNKtI6PQ_iuAYGcapRFUdQ0MJNGEeCH9PT/" /></a></div><br />
<br />
<div class="codelist"><div id='nav'><br />
<div class='wrap'><br />
<ul class='nav' style='margin-left:130px;'><br />
<li class='home current_page_item'><a expr:href='data:blog.homepageUrl' rel='nofollow' title='Home'><span>Home</span></a></li><br />
<li class='page_item page-item-3'><a href='#' title='Contact'><span>Contact</span></a></li><br />
<li class='page_item page-item-5'><a href='#' title='Services'><span>Services</span></a><br />
<ul class='children'><br />
<li class='page_item page-item-7'><a href='#' title='Subpage 1'><span>Subpage 1</span></a></li><br />
<li class='page_item page-item-12'><a href='#' title='Subpage 2'><span>Subpage 2</span></a></li><br />
</ul><br />
</li><br />
<li class='page_item page-item-16'><a href='#' title='About'><span>About</span></a></li><br />
<li class='page_item page-item-18'><a href='#' title='Page Templates'><span>Page Templates</span></a><br />
<ul class='children'><br />
<li class='page_item page-item-20'><a href='#' title='One Column'><span>One Column</span></a></li><br />
<li class='page_item page-item-21'><a href='#' title='Html Elements'><span>Html Elements</span></a><br />
<ul class='children'><br />
<li class='page_item page-item-23'><a href='#' title='Sub Menu'><span>Sub Menu</span></a></li><br />
<li class='page_item page-item-24'><a href='#' title='Interestingness'><span>Interestingness</span></a></li><br />
<li class='page_item page-item-25'><a href='#' title='Birds'><span>Birds</span></a></li><br />
</ul><br />
</li><br />
<li class='page_item page-item-22'><a href='#' title='Archive Template'><span>Archive Template</span></a></li><br />
</ul><br />
</li><br />
<li class='page_item page-item-19 current_page_parent'><a href='#' title='Notes'><span>Notes</span></a></li><br />
</ul><br />
</div><br />
</div> </div><br />
2. Blog title and description.<br />
<br />
<div class="codelist"><div id='title-area'><br />
<h1 id='title'><a expr:href='data:blog.homepageUrl' title='Your Blog Title Here'>Charisma</a></h1><br />
<p id='description'>Just another Test Blogs weblog</p><br />
</div><!-- end #title-area --><br />
<br />
</div><br />
3. Featured Content Slider<br />
<br />
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZAL5524AKKhWXie8ZOcZBf9H3qw_GEb-ANCeXibetHBQI2EgM1FT0dVPYFp6Q8FYd8tK20SKjw1nLkxXulhchyphenhyphenr7Ot2CHYYTbDu9TRffD-_xN2YXiBRQpybe11LM-XNXI-BkE5u_EgDxg/s1600/slider.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZAL5524AKKhWXie8ZOcZBf9H3qw_GEb-ANCeXibetHBQI2EgM1FT0dVPYFp6Q8FYd8tK20SKjw1nLkxXulhchyphenhyphenr7Ot2CHYYTbDu9TRffD-_xN2YXiBRQpybe11LM-XNXI-BkE5u_EgDxg/" /></a></div><br />
<br />
<div class="codelist"><div class='anythingSlider'><br />
<div class='wrapper'><br />
<ul><br />
<li><br />
<a class='alignleft' href='#' title='Hello world!'><img alt='rose' class='attachment-home-charisma-featured' height='205' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLWs9l1D5sTX6yUMxKM4oYkDKnGyPEUCKf_ja9WlE0jh7uOb_c9tM8ElUzHtPb3tZBKtvfloI0DmsjM2vjhyPToqCPiSrZOjoVdqjQUTPRgraEgMGf10AQR3-uSnU6a5kUPYHD2E2sQYDB/s1600/rose.jpg' title='rose' width='165'/></a><h2><a href='#' title='Hello world!'>Hello world!</a></h2><p>Vel cu causae torquatos concludaturque, quo laudem dolorum et. No duo suats alia omnium, ne debet omnes vim. Has quodsi vituperata eu, nam no ferri nostrud mentitum? An nulla dicant nec, eum possit vivendo alienum ad! Animal scripserit ne mea, ex vel vocibus eloquentiam. Sea aperiam commune te.</p><br />
</li><br />
<br />
<li><br />
<a class='alignleft' href='#' title='Birds migrate in the winter'><img alt='DSC_0208' class='attachment-home-charisma-featured' height='205' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU6NF-px3FEveHzqjxUvraX43Ks9XaACSsk3zHD_V2NHryWfu2yU-_3lkzvPbixLeDL6cuAVHI1p4tKKxiDpQ9jZwVjhIt_2ibtJqlObplv9aZGbxydNLcvPbYNbeI4K3Bxv5ioaIHCJml/s1600/DSC_02081-165x205.jpg' title='DSC_0208' width='165'/></a><h2><a href='#' title='Birds migrate in the winter'>Birds migrate in the winter</a></h2><p>Nulla vel dolor ac diam dictum rutrum. Praesent feugiat nisl et quam lacinia bibendum. Pellentesque enim augue, mollis in cursus quis, blandit ut eros. Nam metus arcu, adipiscing imperdiet facilisis eu, dictum quis augue. Suspendisse potenti. Mauris odio nulla, euismod fermentum tempus et, mattis et nisi. Nam lorem ipsum, lobortis at ultricies vel, molestie quis [...]</p><br />
</li><br />
<br />
<li><br />
<a class='alignleft' href='#'><img alt='image name' height='205' src='Image URL' width='165'/></a><br />
<h2><a href='Post URL' title='Post Title '>Post Title </a></h2><br />
<p>Post Description</p><br />
</li><br />
<br />
<li><br />
<a class='alignleft' href='#'><img alt='image name' height='205' src='Image URL' width='165'/></a><br />
<h2><a href='Post URL' title='Post Title '>Post Title </a></h2><br />
<p>Post Description</p><br />
</li><br />
<br />
<br />
</ul><br />
</div><br />
<br />
<br />
</div> <!-- END AnythingSlider --><br />
<br />
</div><br />
4. About author box below every blog posts<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP_vDWBk25I12MuVZVO3PGSP-A7Spu98yEU7LilYWBQ4uHLkUznOZQqg8aBaGYBbNwW-bNUJN-PzfjgtLgoe2aErAeprJJfP0SiEA7a7bUs12MhAzw8UkpYBwsMw2u7dxfWBpbyyrs86IC/s1600/about_author.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP_vDWBk25I12MuVZVO3PGSP-A7Spu98yEU7LilYWBQ4uHLkUznOZQqg8aBaGYBbNwW-bNUJN-PzfjgtLgoe2aErAeprJJfP0SiEA7a7bUs12MhAzw8UkpYBwsMw2u7dxfWBpbyyrs86IC/" /></a></div><br />
Go to EDIT HTML and check/tick "Expand Widget Templates". Then, search for the following bunch of codes. You may replace the default gravatar image with your own image.<br />
<br />
<div class="codelist"><div class="author-box"><br />
<img alt="" class="avatar avatar-70 photo" height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYOKh48Qfojw2QxibW1jPzkSrO8TeNu5xldWOgvhS-KrE_rKzxy-9EwA0MlP3eHYseEtpulKZegPfZt9Zu4oPYe04ruy3dNhbVtXkJF084Q-Zaks_8PeQ2ythdJSFVmhmhyphenhyphenF4cYLaUkQET/" width="70" /><b>About Author</b><br />
<br />
Write anything about you here!</div></div>Rethnaraj Rambabuhttp://www.blogger.com/profile/15863204708800295797noreply@blogger.com20tag:blogger.com,1999:blog-6722993789567734861.post-41945478941872054712010-06-21T16:31:00.003+08:002010-06-24T23:03:15.596+08:00Releasing F01.01| Free Premium Girly Blogger Template<a href="http://introblogger.blogspot.com/2010/06/releasing-f0101-free-premium-girly.html" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLGNz_X0-N4YTR7iUyGaYvqN_csNNFuwdEsRIqyHs8FclmkspBRcAwJqqnM_SCgn4xLcbxXvt7L2xi8b-0ZwthiJ2XMeQISDN-5phyphenhyphenZBe2SdEbSLOwxHbPkVVmPw0bzfJCZQeFRtk681U6/s320/f0101_blogger_theme.gif" /></a><b>F01.01</b> is a premium girly Wordpress theme by Woothemes specially made for ladies which I decided to convert into Blogger . Unlike any other themes, this theme comes with a full illustrated figure of a female on the left side of the blog making it <b>a perfect theme</b> for girls.<b> </b><br />
<b> </b><br />
<b>F01.01</b> comes packed with some other great features too such as twitter integration, custom widgets, multi-level drop-down menu, three-column footer and more!<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><span class="theme-buttons"><a href="http://www.box.net/shared/20sezd31cf" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjufQfUJgD-GTutksbaJOa3yXaLSbDpPxAT0tiEVdBkWGXAFjc15wKTplMQTtSEgSOXkG2BJnv_PLDqLGuzrjvFPcgjxlxK7A1OdUvi3THu_BRRblylF8JMcN9zbmwTkJy4QRbKp1t3r6eP/s320/download.png" /></a><a href="http://f0101-introblogger.blogspot.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCWgBaH8DSz6l7FR0V6eJp-S9sCnVVPHmmeAgy4ymIKUbLhpjfj36uRsIuv5MEXjm_pifIrJg-xL897jNGofBjxUxeMjUv_ER-_TiQAU09LriyW0d8quTc6sV0R5bP5hlW_CS32N0ikbZB/s320/preview.png" /></a><br />
</span></div><br />
<a name='more'></a><br />
<br />
<br />
<span style="font-size: large;"><b style="text-decoration: underline;">Customizing the theme</b></span><br />
<br />
<b>1. Navigation Menu</b><br />
<br />
<div class="codelist"><div id='navigation'><br />
<ul id='nav'><br />
<li class='page_item'><a expr:href='data:blog.homepageUrl' title='Home'>Home<br/><div class='small'>What do you think?</div></a></li><br />
<li class='page_item page-item-51'><a href='#' title=''>About<br/><div class='small'>A bio about you</div></a><br />
<ul><br />
<li class='cat-item cat-item-3'><a href='#' title=''>Page 1</a></li><br />
<li class='cat-item cat-item-4'><a href='#' title=''>Page 2</a><br />
<ul class='children'><br />
<li class='cat-item cat-item-8'><a href='#' title=''>Sub page 1</a></li><br />
<li class='cat-item cat-item-8'><a href='#' title=''>Sub Page 2</a></li><br />
</ul><br />
</li><br />
<li class='cat-item cat-item-5'><a href='#' title=''>Page 3</a><br />
<ul class='children'><br />
<li class='cat-item cat-item-7'><a href='#' title=''>Sub Page 4</a></li><br />
<li class='cat-item cat-item-9'><a href='#' title=''>Sub page 5</a></li><br />
</ul><br />
</li><br />
</ul><br />
</li><br />
<li class='page_item'><a href='#' title='Contact'>Contact<br/><div class='small'>Write anything here!</div></a></li><br />
<li class='page_item'><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Subscribe'><img class='headrss' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSIFDBYWlVQqwvGcHFjVfo8A8XhCLWl8xjIYVNNx_AQ07alo38M9nIxCcp7d5rYc56HNK6m4c7neadwnXchKc6K006x2tN6UJioDwMLSt_WQHs_wjBah9pMMs7qYRmS4qHghfuRw_o8ns/'/>Subscribe<br/><div class='small'>Write anything here!</div></a></li><br />
</ul><br />
</div><br />
<br />
</div><br />
<b>2. Twitter status</b>- Change the text highlighted below in the codebox with your Twitter username. <br />
<br />
<div class="codelist"><div id='twitterbig'><br />
<br />
<div class='bottom'><br />
<ul id='twitter_update_list'><br />
<script src='http://twitter.com/javascripts/blogger.js' type='text/javascript'/><br />
<script src='http://twitter.com/statuses/user_timeline/<b style="color: #20124d;"><span style="background-color: #6fa8dc;">rethnaraj</span></b>.json?callback=twitterCallback2&amp;count=1' type='text/javascript'/><br />
</ul><br />
<br />
</div><!-- /.bottom --><br />
<br />
<div class='profilelink'><br />
<a href='http://www.twitter.com<span style="color: #20124d;">/</span><b style="background-color: #9fc5e8; color: #20124d;">rethnaraj</b>' title='Follow me on Twitter'>Follow me on Twitter</a><br />
</div><!-- /.profilelink --><br />
<br />
</div></div>Rethnaraj Rambabuhttp://www.blogger.com/profile/15863204708800295797noreply@blogger.com9tag:blogger.com,1999:blog-6722993789567734861.post-43418497143537787062010-06-18T05:17:00.002+08:002010-06-21T17:32:30.884+08:00Releasing Urban Elements | A "Wordpress to Blogger" theme<a href="http://introblogger.blogspot.com/2010/06/releasing-urban-elements-wordpress-to.html" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Urban Elements Blogger Template" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZOJu89npAMKJMNA61a_jLZYIcGTR24BQVisN_MmEvbYJRZab7_f-oCPTNPrSyITNh1uvO7XdyVZZETrE1lALQ0Cz7H3RQvRa5qK83nRYc8PofVVhRfaWmkMzIdkYXX0cI3VcEJdSHjwrM/s320/urban_elements.gif" /></a>Today I'm releasing another great theme, Urban Elements. It was originally designed by <a href="http://www.press75.com/">Press75.com</a> for Wordpress users. I've converted it into Blogger. Blogger version of the theme comes with a customized Post Title font. It was possible to use fonts other than default Blogger fonts with the help of Google Font API. You can read further about it in my previous post, <a href="http://introblogger.blogspot.com/2010/06/add-new-fonts-to-blogger-blogs-with.html" target="_blank">add new fonts to Blogger Blogs with Google Web Fonts</a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><span class="theme-buttons"><a href="http://www.box.net/shared/saoxchceai" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjufQfUJgD-GTutksbaJOa3yXaLSbDpPxAT0tiEVdBkWGXAFjc15wKTplMQTtSEgSOXkG2BJnv_PLDqLGuzrjvFPcgjxlxK7A1OdUvi3THu_BRRblylF8JMcN9zbmwTkJy4QRbKp1t3r6eP/s320/download.png" /></a><a href="http://urbanelements-introblogger.blogspot.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCWgBaH8DSz6l7FR0V6eJp-S9sCnVVPHmmeAgy4ymIKUbLhpjfj36uRsIuv5MEXjm_pifIrJg-xL897jNGofBjxUxeMjUv_ER-_TiQAU09LriyW0d8quTc6sV0R5bP5hlW_CS32N0ikbZB/s320/preview.png" /></a><br />
</span></div><br />
<a name='more'></a><br />
<br />
Some other unique features of this theme are multi-level drop-down menu and four 125 X 125 ads slots.<br />
<br />
<b>Customizing the theme </b><br />
<br />
1. Navigation bar<br />
<div class="codelist"><div id='navigation'><br />
<ul id='nav'><br />
<li class='page_item'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li><br />
<li class='page_item page-item-51'><a href='#' title=''>About</a></li><br />
<li class='page_item'><a href='#' title='Categories'>Categories</a><br />
<ul><br />
<li class='cat-item cat-item-3'><a href='#' title=''>Category 1</a></li><br />
<li class='cat-item cat-item-4'><a href='#' title=''>Category 2</a><br />
<ul class='children'><br />
<li class='cat-item cat-item-8'><a href='#' title=''>Sub Category 1</a></li><br />
<li class='cat-item cat-item-8'><a href='#' title=''>Sub Category 2</a></li><br />
</ul><br />
</li><br />
<li class='cat-item cat-item-5'><a href='#' title=''>Category 3</a></li><br />
<li class='cat-item cat-item-1'><a href='#' title=''>Category 4</a></li><br />
<li class='cat-item cat-item-6'><a href='#' title=''>Category 5</a><br />
<ul class='children'><br />
<li class='cat-item cat-item-7'><a href='#' title=''>Sub Category 1</a></li><br />
<li class='cat-item cat-item-9'><a href='#' title=''>Sub Category 2</a></li><br />
</ul><br />
</li><br />
</ul><br />
</li><br />
<li class='page_item'><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Subscribe'><img class='headrss' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSIFDBYWlVQqwvGcHFjVfo8A8XhCLWl8xjIYVNNx_AQ07alo38M9nIxCcp7d5rYc56HNK6m4c7neadwnXchKc6K006x2tN6UJioDwMLSt_WQHs_wjBah9pMMs7qYRmS4qHghfuRw_o8ns/'/>Subscribe</a></li><br />
<li class='page_item page-item-51'><a href='#' title=''>Contact</a></li><br />
</ul><br />
</div></div><br />
2. Ads slots<br />
<div class="codelist"><div id='sideads' style=''><br />
<a href='http://introblogger.blogspot.com/' target='_blank' title='Ads'><br />
<img alt='Ads' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBrwdLa4fPIkBFrKvt99berDK8uMjhPCka76vXbSTWhVJocpwKKAg4eHxAT-e_3bHJcAYqxKnAzKmAms2ws1OMBwcMh6A5rmoc48GVpy3-1DGC773cK-37BxAkxnpZPQyq-g9lwOP4Qxw/'/><br />
</a><br />
<br />
<a href='http://introblogger.blogspot.com/' target='_blank' title='Ads'><br />
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBrwdLa4fPIkBFrKvt99berDK8uMjhPCka76vXbSTWhVJocpwKKAg4eHxAT-e_3bHJcAYqxKnAzKmAms2ws1OMBwcMh6A5rmoc48GVpy3-1DGC773cK-37BxAkxnpZPQyq-g9lwOP4Qxw/'/><br />
</a><br />
<br />
<a href='http://introblogger.blogspot.com/' target='_blank' title='Ads'><br />
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBrwdLa4fPIkBFrKvt99berDK8uMjhPCka76vXbSTWhVJocpwKKAg4eHxAT-e_3bHJcAYqxKnAzKmAms2ws1OMBwcMh6A5rmoc48GVpy3-1DGC773cK-37BxAkxnpZPQyq-g9lwOP4Qxw/'/><br />
</a><br />
<br />
<a href='http://introblogger.blogspot.com/' target='_blank' title='Ads'><br />
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBrwdLa4fPIkBFrKvt99berDK8uMjhPCka76vXbSTWhVJocpwKKAg4eHxAT-e_3bHJcAYqxKnAzKmAms2ws1OMBwcMh6A5rmoc48GVpy3-1DGC773cK-37BxAkxnpZPQyq-g9lwOP4Qxw/'/><br />
</a><br />
</div></div>Rethnaraj Rambabuhttp://www.blogger.com/profile/15863204708800295797noreply@blogger.com15tag:blogger.com,1999:blog-6722993789567734861.post-59040141610613800752010-06-15T14:09:00.000+08:002010-06-15T14:09:31.350+08:00Add new fonts to Blogger Blogs with Google Web Fonts<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGQerKTgfkP3tOJgHDA8had_zwXGaCqdEoC8crCdDoE3zsfhXxgZHq6l4BNQoEOgd-2SSWnolGQKdfgM_WtrXcJRx-HAUntowjNrnIjIqmldVIP4u3FdGSsOkK6NiU4tR44GqBoFDnj8Og/s1600/new_font_for_blogger.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGQerKTgfkP3tOJgHDA8had_zwXGaCqdEoC8crCdDoE3zsfhXxgZHq6l4BNQoEOgd-2SSWnolGQKdfgM_WtrXcJRx-HAUntowjNrnIjIqmldVIP4u3FdGSsOkK6NiU4tR44GqBoFDnj8Og/s320/new_font_for_blogger.gif" /></a>Adding new fonts to Blogger blogs is made possible with Google Font API. You don't have to know any programming skills to do this; just get a simple HTML code from Google Web Fonts and add it to your Blogger Template. Then refer to the font in a CSS style. Here is an example:-<br />
<div style="color: black; text-align: center;"><span style="font-family: Lobster; font-size: 30px;"> I Love <span style="color: orange;"><span style="color: orange;">Blogger</span></span></span></div><a name='more'></a><br />
There are 18 new fonts which can be embedded into any web pages. Here is a screen shot of the list of fonts available in the Google Fonts Directory. Thanks to <a href="http://browsershots.org/">Browsershots</a> for the shot. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh51Jwhy9vj40Qz7kJbLXmEc10M7urGLMckpcbCFRfe5oYbR72pO3fvHIvpyXQoCbgF5E0eRZfY6uqhpfFT_1YPtgQlILkUp4yF_LGiu9zl2hDNkS52uOIhq82OZBlysdZjKEARx6S0gsD7/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh51Jwhy9vj40Qz7kJbLXmEc10M7urGLMckpcbCFRfe5oYbR72pO3fvHIvpyXQoCbgF5E0eRZfY6uqhpfFT_1YPtgQlILkUp4yF_LGiu9zl2hDNkS52uOIhq82OZBlysdZjKEARx6S0gsD7/" /></a></div><br />
<br />
<b>So, follow these easy steps to embed those fonts to your blog.</b><br />
<br />
1. Go to <a href="http://code.google.com/webfonts">Google Fonts Directory</a>.<br />
<br />
2. Click on the font that you are interested.<br />
<br />
3. Click on the "Get the code" tab.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg82aPHFFPHHdnYESy9mQhGs9ekWzvxIodZy1pLb-IbE6Q0KsatHaQbhOcXRQdTWaIGP4iHvy4ncgy2KhcM4wTQuXL0ybPz-yX8KLYMYtY6-vzGiqx2F0vqHJz-f0AX6Wr3oStn68QaoeoH/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg82aPHFFPHHdnYESy9mQhGs9ekWzvxIodZy1pLb-IbE6Q0KsatHaQbhOcXRQdTWaIGP4iHvy4ncgy2KhcM4wTQuXL0ybPz-yX8KLYMYtY6-vzGiqx2F0vqHJz-f0AX6Wr3oStn68QaoeoH/" style="border: medium none;" /></a></div><br />
4. Tick the checkboxes for the variant of the font that you want to use. Copy the code in the box. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj57_Rpf8hKAUZdRoy5L0FKzk_UFMSbAVeC-q15ikFKHhfdSzb20WmUJT_9sCkDTkYt03N70afnEkGwlkTZsgScK7OtAfa_pwJMi4JtAuXjUDUCuMVe0AtvL2lQi_LvCPtM0DiDO-GcMuAV/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj57_Rpf8hKAUZdRoy5L0FKzk_UFMSbAVeC-q15ikFKHhfdSzb20WmUJT_9sCkDTkYt03N70afnEkGwlkTZsgScK7OtAfa_pwJMi4JtAuXjUDUCuMVe0AtvL2lQi_LvCPtM0DiDO-GcMuAV/" /></a></div><br />
5. Now log into Blogger > Design > Edit HTML. And search for<b> <span style="background-color: #fff2cc;"></head></span></b> tag.<br />
<br />
6. Paste code in the clipboard before the <b><span style="background-color: #fff2cc;"></head></span></b> tag.<br />
<br />
7. So, whenever you want to use that font in your blog, just wrap your text with these tags. If you use other fonts other than Cantarell, just replace the red colored text below with the name of your font.<br />
<br />
<div class="codelist"><span style="font-family:<b><span style="color: #cc0000;">Cantarell</span></b>; font-size:24px;">Your Text Goes Here</span></div><br />
<br />
If you are good at editing CSS, then you can simply use the font in your CSS font stack like any other fonts.<br />
<br />
<div class="codelist"><i style="color: #38761d;">CSS selector</i> {<br />
font-family: '<i style="color: #38761d;"><b>Font Name</b></i>', arial, serif;<br />
}</div><br />
<b>Browser compalitibity</b><br />
<br />
The Google Font API is compatible with the following browsers:<br />
<br />
* Google Chrome: version 4.249.4+<br />
* Mozilla Firefox: version: 3.5+<br />
* Apple Safari: version 3.1+<br />
* Opera: version 10.5+<br />
* Microsoft Internet Explorer: version 6+<br />
<br />
For further informations about this Google Font API, visit their <a href="http://code.google.com/apis/webfonts/faq.html">FAQ</a> .Rethnaraj Rambabuhttp://www.blogger.com/profile/15863204708800295797noreply@blogger.com6tag:blogger.com,1999:blog-6722993789567734861.post-22075377848475859872010-05-01T23:12:00.001+08:002010-05-01T23:34:40.208+08:00How to display Feedburner Subcribers count in plain text without chicklet in Blogger?<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_b4Kz2-MBcg_fHDZUBA9ZJL7ku_5ch_16LAlgkaM8xX4xp8wlaxYu4wgyAtkZr2lWusA3kZbMUzGHJX1fkJsMVhyphenhyphenO3huwbU4R3IoaSovVLHqMTtlCBwVerLILVTQeQUj2zNCT0lMFU1H5/s1600/feedburner.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Feedburner in plain text for blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_b4Kz2-MBcg_fHDZUBA9ZJL7ku_5ch_16LAlgkaM8xX4xp8wlaxYu4wgyAtkZr2lWusA3kZbMUzGHJX1fkJsMVhyphenhyphenO3huwbU4R3IoaSovVLHqMTtlCBwVerLILVTQeQUj2zNCT0lMFU1H5/" /></a>I am sure that most of us have a common opinion about the default Feedburner Subcribers count chicklet that it is ugly,out-of-trend, not flexible with theme and etc. No matter what colour you change them, they never look nice. Out there in net, there are bunch of wordpress plugins which enable Wordpress users to show the count in plain text. But, its really hard to find one for Blogger. So, here I'm going to provide you a simple javascript code which enables us to show the Feedburner Subscribers/Readers count in plain text without the chicklet.<br />
<a name='more'></a><br />
<br />
All you have to do is just copy and paste the code shown below in a HTML/Javascript widget in Blogger. Or, if you are okay with editing blogger templates, add the code wherever you want to show the count.<br />
<br />
<div class="codelist"><script language='javascript' type='text/javascript' src='http://www.codigosblog.net/servidor/contadorfeed.php?uri=<b>your_feedburner_name</b>'> </ script></div><br />
But, remember to change the "<b>your_feedburner_name</b>" with your feed name. The script will only show the subscribers number alone.<br />
<br />
The code below is a modified version of the code with the word "subscribers" and a link to your feed. <br />
<br />
<div class="codelist"><a href='http://feeds.feedburner.com/<b>your_feedburner_name</b>' target='_blank'><script language='javascript' type='text/javascript' src='http://www.codigosblog.net/servidor/contadorfeed.php?uri=<b>your_feedburner_name</b>'></script> Subscribers</a></div><br />
And this is another modified version of the code with RSS image, words "Subcribers" and "Subcribe to our feed".<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdywVydW3AcbOLa5p8lnRRs_YFQ9XyiPZaAqzBIalKPpByzn7rnbjhaIhkIumk_ig8o-V16OoHzt3en0x8FzUNGSRwNNSTgsXTHjHtb8toKnDbnv4kC59AqmgF8gNiOmI9E2XGgmCIFvfH/s1600/sample_count.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdywVydW3AcbOLa5p8lnRRs_YFQ9XyiPZaAqzBIalKPpByzn7rnbjhaIhkIumk_ig8o-V16OoHzt3en0x8FzUNGSRwNNSTgsXTHjHtb8toKnDbnv4kC59AqmgF8gNiOmI9E2XGgmCIFvfH/s320/sample_count.png" /></a></div><br />
<div class="codelist"><div style="float:left; margin: 2px 5px 2px 2px; padding: 0; width: 46px;height:46px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9iTnrk-Khx1IPCe4cAP-U1ttb4HGiQgt8xIXYfTidjr9LXF4grP-kGih1KIaoqgMhZvoj-L5QGCjCSmjSa10l1eFYpDTAnucDnmk8Ru2cgUwpxbVW6U9omrDpdhpNEkkbsDhMo9oQkCxk/) no-repeat scroll 0pt 0pt transparent;" ></div><br />
<div style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><a href="http://feeds.feedburner.com/<b>your_feedburner_name</b>" target="_blank"><script language='javascript' type='text/javascript' src='http://www.codigosblog.net/servidor/contadorfeed.php?uri=<b>your_feedburner_name</b>'></script> Subcribers</a></div><br />
<div><p style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;"> Subscribe to our feed </p><div></div></div></div><br />
<br />
And thanks to <a href="http://www.codigosblog.com.br/">Codigosblog</a> for the fantastic code.<br />
<br />
<span style="font-size: large;">Be sure to <a href="http://feedburner.google.com/fb/a/mailverify?uri=introblogger" title="Entries RSS">subscribe to Introblogger</a> to be notified of updates!</span>Rethnaraj Rambabuhttp://www.blogger.com/profile/15863204708800295797noreply@blogger.com11tag:blogger.com,1999:blog-6722993789567734861.post-80063252066187668502010-04-20T19:00:00.006+08:002010-04-23T21:40:30.130+08:00Releasing Lunax | Another free premium blogger theme by Introblogger<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNWzBLekcE2-TgmW-uXEp6ZmjXuZT96p8-ZahHiqxZPOWcTBHC8rST_C5rpdBf9Uxsrd5KotfctpcWGmjd8KhNLulpqBdj0I0X-4aLVAshDDqw0U9HG_xwDdxPueI1EOLesGtr5Aazyd0u/s1600/lunax_blogger_theme.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNWzBLekcE2-TgmW-uXEp6ZmjXuZT96p8-ZahHiqxZPOWcTBHC8rST_C5rpdBf9Uxsrd5KotfctpcWGmjd8KhNLulpqBdj0I0X-4aLVAshDDqw0U9HG_xwDdxPueI1EOLesGtr5Aazyd0u/s320/lunax_blogger_theme.png" /></a>I'm releasing another free premium blogger theme, <b>Lunax</b>. This blogger theme is compatible with all web browsers (eg: Firefox, IE, Google Chrome, and also IE).<br />
<br />
Here are some features of this theme:-dark, glassy, 2 columns, rounded corners(only visible in Firefox and Google Chrome), right sidebar, 3-column footer, menu/navigation bar, tabbed sidebar.<br />
<br />
<a name='more'></a><br />
<br />
<br />
Here’s a preview (click to enlarge):<br />
<br />
<a href="http://lunax-introblogger.blogspot.com/" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkwePHVzWolrUWmFm5b_B8jp4g0dE39GFb0CtO4Q7eJnmmJdJruRKTBaqfevG9FhFH1bmcXeyl0Ag14GZEyP4yPzlEyNdYRHljitDQV8so4MpwgOm4OghYbHRW41eqi-qVHPqiG5_nhTz0/" width="600" /></a><br />
<br />
<h3><br />
</h3><h3>Live Demo</h3><br />
<a href="http://lunax-introblogger.blogspot.com/">Click here</a> to view a live demo of the theme.<br />
<br />
<h3>Download Now</h3><br />
<span style="font-size: small;"><a href="http://www.box.net/shared/aas5v6fty1">Lunax.rar</a></span><br />
<span style="font-size: small;"><a href="http://www.box.net/shared/vnx4us3li6">Lunax.zip</a></span><br />
<br />
<span style="font-size: large;"><b>Customizing the theme</b></span><br />
<br />
1. Menu bar<br />
<br />
<div class="codelist"><div id='catmenucontainer'><br />
<div class='catmenu' id='catmenu'><br />
<ul><br />
<li><a class='home' expr:href='data:blog.homepageUrl'>Home</a></li><br />
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Posts RSS'>Posts RSS</a></li><br />
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;' title='Comments RSS'>Comments RSS</a></li><br />
<li><a href='http://introblogger.blogspot.com/' title='Free Blogging Guide'>Blogger Tutorials</a></li><br />
<li><a href='http://introblogger.blogspot.com/2009/12/contact.html' title='Free Blogging Guide'>Contact</a></li><br />
</ul><br />
</div><br />
</div></div><br />
2. Mini menu bar above header<br />
<br />
<div class="codelist"><div id='minilink'> <br />
<p><br />
<a class='home' expr:href='data:blog.homepageUrl'>Home</a>|<br />
<a href='#'>About Us</a>|<br />
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Subscribe to RSS Feed'>RSS Feed</a>|<br />
<a href='#' title='Free Blogging Guide'>Contact</a>|<br />
</p><br />
</div></div><br />
3. Tabbed sidebar<br />
<br />
The first three widgets in sidebar will be shown in the tabbed sidebar.<br />
<br />
<br />
<span style="font-size: large;">Be sure to <a href="http://feedburner.google.com/fb/a/mailverify?uri=introblogger" title="Entries RSS">subscribe to Introblogger</a> to be notified of updates!</span>Rethnaraj Rambabuhttp://www.blogger.com/profile/15863204708800295797noreply@blogger.com50tag:blogger.com,1999:blog-6722993789567734861.post-91312156975110235952010-04-08T18:00:00.003+08:002010-04-08T18:08:53.148+08:00You can become a Blogger Template Designer too<div style="text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYOozGMgK2iBDlh9L2C5z_InGVpKMBBaRPAYXvTMt2GpipzinO4vjs9523WJZ-YXX_FQv-JF-TG-IjbfJkmJ_r0SFpeknI4cyzXIru3jqImTbVTSywCuiP1FM815rkczMnbeeZ6NpbXEmf/s1600/btd.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYOozGMgK2iBDlh9L2C5z_InGVpKMBBaRPAYXvTMt2GpipzinO4vjs9523WJZ-YXX_FQv-JF-TG-IjbfJkmJ_r0SFpeknI4cyzXIru3jqImTbVTSywCuiP1FM815rkczMnbeeZ6NpbXEmf/s320/btd.png" /></a>I know that many of the Blogger™ users out there are bored with default Blogger Templates which are pretty old and outdated. Most of the bloggers are using custom Blogger templates which look more professional and attractive. But now, we may have to change our decision and view on Blogger Templates because recently Blogger has announced the launch of <b>Blogger Template Designer</b> to Blogger in Draft, a big first step ever in improving Blogger template designs.</div><a name='more'></a><br />
<div style="text-align: justify;">In this post I'm going to tell what Blogger Template Designer is and how it helps you to become a better Blogger designer even though you have no background knowledge about editing XML codes. Before that, may be some of you don't know what really <a href="http://introblogger.blogspot.com/2009/12/blogger-in-draft-must-visit-site.html">Blogger in Draft</a> is. </div><br />
<a href="http://draft.blogger.com/"><span style="color: blue;">Blogger in Draft</span></a> is actually an experimental playground of Blogger™ where users can try out Blogger’s latest features. Recently, Blogger™ has launched Blogger Template Designer in Blogger in Draft which brings a new level of customization and design to your blog.<br />
<br />
<span style="font-size: large;"><b>Features</b></span><br />
<br />
Here, I've listed out some of the main features of Blogger Template Designer. <br />
<br />
<div style="text-align: left;">1. <b>17 new, customizable</b> templates which are divided into 4 major groups, Simple, Picture Window, Awesome Inc, and Watermark.</div><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhceFjI4VTK7lcLJh6Kamq0UTnW3T_sCdL3lQYrMK0m8jBCpPfFgmnAvonRCcTn7yt1eoBAsYVzerlqHSqwfnmlCdGt8mGpGYmk0Qb5c8RfkdEqhDXeWLYXfSPgIBF4jy-ZMbBPkMK1CbM/s1600/template.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhceFjI4VTK7lcLJh6Kamq0UTnW3T_sCdL3lQYrMK0m8jBCpPfFgmnAvonRCcTn7yt1eoBAsYVzerlqHSqwfnmlCdGt8mGpGYmk0Qb5c8RfkdEqhDXeWLYXfSPgIBF4jy-ZMbBPkMK1CbM/s400/template.gif" width="400" /></a></div></div><br />
<div style="text-align: justify;">2. Amazing hundreds of <b>backgrounds images</b> from <b>istockphoto</b>.</div><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgskAAxFu8YTqjzVNneyxUXq2tkx2xx2OM7RIjYPwmboc1oqxUjKXtQuLpeX_yWNGWaYaRphzI1Ib_aCHS2GUrlqg4tJFTJv5AOoOEjKQS48a54ABIfcYM_zEuI2DVUdqJOIVr4CWgwvQbS/s1600/bg_image.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="272" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgskAAxFu8YTqjzVNneyxUXq2tkx2xx2OM7RIjYPwmboc1oqxUjKXtQuLpeX_yWNGWaYaRphzI1Ib_aCHS2GUrlqg4tJFTJv5AOoOEjKQS48a54ABIfcYM_zEuI2DVUdqJOIVr4CWgwvQbS/s400/bg_image.gif" width="400" /></a></div><br />
</div><div style="text-align: justify;">3. Modifiable <b>color themes</b> which matches your background images.</div><div style="text-align: justify;"><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs4H3gEE4qVO1ukwgyEusVh8TtB6JudIsmDx26VWjnMZzmyhAFQL5zqXwGJZ0SWLu0dwD7JZIrwbxl-xXfnk9MKQBfGsNksVShm_w58MbClj5ZRI_4hTYB4Q4iWPkKst-Cn_bst0emKfcU/s1600/colortheme.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs4H3gEE4qVO1ukwgyEusVh8TtB6JudIsmDx26VWjnMZzmyhAFQL5zqXwGJZ0SWLu0dwD7JZIrwbxl-xXfnk9MKQBfGsNksVShm_w58MbClj5ZRI_4hTYB4Q4iWPkKst-Cn_bst0emKfcU/s400/colortheme.gif" width="400" /></a></div><br />
</div><div style="text-align: justify;">4. Layout options which are categorized into <b>Body layout</b> and <b>Footer layout</b> with <b>one, two, three columns and adjustable width</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX3hrDFsLXceSG8eGKfv5ACBnDOgWErUuKHGNn42c4tF2LwxyOlAF4lXcAKaMiTSVTaO878jyelThajZrjrcFVmK1AsydGmhQ0VrNWuEjz8VkScVNGmXY1ZhceThuqleAGKIqfx48a0s8B/s1600/bodylayout.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="131" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX3hrDFsLXceSG8eGKfv5ACBnDOgWErUuKHGNn42c4tF2LwxyOlAF4lXcAKaMiTSVTaO878jyelThajZrjrcFVmK1AsydGmhQ0VrNWuEjz8VkScVNGmXY1ZhceThuqleAGKIqfx48a0s8B/s400/bodylayout.gif" width="400" /></a></div> <br />
<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlFqMjA7HXXH1DKLsAG2Rl_gcLUUtwY-s53AukrfiSc-uh9gYeGhhzlyeTyxRyo__0aq0oKSSGusldMOxXDJ5ukQlbTheqqcWPXqWo208ToNfDe332JKmc75-LnB5-XQGPZIRq26FJxvyV/s1600/footerlayout.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="131" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlFqMjA7HXXH1DKLsAG2Rl_gcLUUtwY-s53AukrfiSc-uh9gYeGhhzlyeTyxRyo__0aq0oKSSGusldMOxXDJ5ukQlbTheqqcWPXqWo208ToNfDe332JKmc75-LnB5-XQGPZIRq26FJxvyV/s400/footerlayout.gif" width="400" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW7wjTWi4TXgYM2nfc9oUR45FPrDP4KjYHNFRCu0iL77quQeX9boVHlA6xwU6WYvJE8Mv43lZ-inDDSK_8o2HF93nhGWcAG1qRUEChF1eCC9N7YJ_w-T6i9aLuZxchBmeY8PrST9-O8pQq/s1600/width.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="131" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW7wjTWi4TXgYM2nfc9oUR45FPrDP4KjYHNFRCu0iL77quQeX9boVHlA6xwU6WYvJE8Mv43lZ-inDDSK_8o2HF93nhGWcAG1qRUEChF1eCC9N7YJ_w-T6i9aLuZxchBmeY8PrST9-O8pQq/s400/width.gif" width="400" /></a></div></div><div style="text-align: justify;"></div><div style="text-align: justify;">5. <b>Advanced options</b> which enable you to customize fonts, font colors, sizes and more.</div><div style="text-align: justify;"></div><div style="text-align: justify;"><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMryer_J-gpEkwR3_2P6UynFIn7JiipuMSEEE74LgW12RTYx0gAiMCKV_8P2EAZPXRDOlGc-gk-3oupPCzSaqQB5ONtC4SFyx2ewXhjgC89BkKgUY1cY4GWU70G6LOaw75wQElGVwRDcLv/s1600/advanced.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="131" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMryer_J-gpEkwR3_2P6UynFIn7JiipuMSEEE74LgW12RTYx0gAiMCKV_8P2EAZPXRDOlGc-gk-3oupPCzSaqQB5ONtC4SFyx2ewXhjgC89BkKgUY1cY4GWU70G6LOaw75wQElGVwRDcLv/s400/advanced.gif" width="400" /></a></div><br />
<b><span style="font-size: large;">Start using it now</span></b><br />
<br />
</div>To try it, go to <a href="http://draft.blogger.com/">http://draft.blogger.com</a> and log into it using your Blogger/Google account. Then, go to <b>Layout > Template Designer</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjshnbsXwb1rTVs5HasRi4F47JfTCVNaBOr2RJ1Pih5CVCPMDWC3mb2OgofTSl8SCSKqxUcdbnlDPDJ7YC6SaE5GqLmkOAXEN87-2B2zWNTYt9NEp2QlVoKe9ln9Hk6XzH1Hb5qFdjvlAIw/s1600/tab.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjshnbsXwb1rTVs5HasRi4F47JfTCVNaBOr2RJ1Pih5CVCPMDWC3mb2OgofTSl8SCSKqxUcdbnlDPDJ7YC6SaE5GqLmkOAXEN87-2B2zWNTYt9NEp2QlVoKe9ln9Hk6XzH1Hb5qFdjvlAIw/s400/tab.gif" width="400" /></a></div><br />
You will see a page where you can edit and customize the blogger template according to your taste. And here comes another best feature of it. In normal Blogger Layout option, we have to click preview button once we've edited the code, and wait until it loads, then if it contains some errors we have to bang our head to wall and search for the wrong code. But, in Blogger Template Designer, we can simply use a preview tool which automatically refreshes every time we make changes. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXLu3uTsQY8tJWPUQePanQ_KTYtfAxkby887NgXM_JmNjyMIRknULW0Vs-hiri5LglFdhXMSxglIX0P6uw7BFTktHwZ2ckhzIssvrpknCxFLqM4DcFBO-qce0qQaHKijOMlsL5bxMM_HIP/s1600/preview.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="345" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXLu3uTsQY8tJWPUQePanQ_KTYtfAxkby887NgXM_JmNjyMIRknULW0Vs-hiri5LglFdhXMSxglIX0P6uw7BFTktHwZ2ckhzIssvrpknCxFLqM4DcFBO-qce0qQaHKijOMlsL5bxMM_HIP/s640/preview.png" width="640" /></a></div><br />
All the templates in Blogger Template Designer are preset with tab designs. You can make navigation bars/ menu bars in your templates by using <a href="http://introblogger.blogspot.com/2010/02/fianlly-static-pages-feature-is-now.html">Blogger Pages feature</a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/_iA83LR-p4Bg/S5ka_JahbQI/AAAAAAAAAVI/dS5e7IDdJWA/s1600/Picture%2030.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="87" src="http://3.bp.blogspot.com/_iA83LR-p4Bg/S5ka_JahbQI/AAAAAAAAAVI/dS5e7IDdJWA/s320/Picture%2030.png" width="320" /></a></div><br />
All the gadgets which can be previewed in the Blogger Template Designer page can be only moved. To add new gadget or delete a gadget you still have to go to <b>Layout > Page Elements</b> as in normal Blogger.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfrtQYRvh1GSsuOOZ8IkzhPfSU2C6nDkBHiTjYViPwtl7yDTw8Vo-IhNRMWhlFinS4U0eTQwqKOyDRfc49wC9dBpF2mKvKL9VL5uGK0lJR9y0mQgX0sT37U2AP12RRSdCFPyvnUj5Qyngl/s1600/attribution.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfrtQYRvh1GSsuOOZ8IkzhPfSU2C6nDkBHiTjYViPwtl7yDTw8Vo-IhNRMWhlFinS4U0eTQwqKOyDRfc49wC9dBpF2mKvKL9VL5uGK0lJR9y0mQgX0sT37U2AP12RRSdCFPyvnUj5Qyngl/s400/attribution.gif" width="400" /></a></div><br />
<br />
The new blogger templates also come with Attribution gadget (added to the footer by all new templates) where copyrights are shown and credits for the background images and to designer are given.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/_iA83LR-p4Bg/S5kU9YFmeEI/AAAAAAAAAVA/zWyIUerUXhI/s1600/Picture%2028.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="148" src="http://3.bp.blogspot.com/_iA83LR-p4Bg/S5kU9YFmeEI/AAAAAAAAAVA/zWyIUerUXhI/s400/Picture%2028.png" width="400" /></a></div><br />
<br />
<br />
Sadly, the Blogger Templates Designer has some of it's own disadvantages too. Blogger Template Designer is that it is not supported on IE 6. Rounded corners and drop shadows used in some of the templates may not be visible in older versions of some browsers.<br />
<br />
Here, I've attached a Youtube video about Blogger Template Designer which was released by Blogger.<br />
<br />
<object height="340" width="560"><param name="movie" value="http://www.youtube.com/v/r6haqZoivBQ&hl=en_US&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/r6haqZoivBQ&hl=en_US&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object><br />
<br />
So, visit http://draft.blogger.com now and become a blogger template designer too. Happy trying.<br />
<br />
And if you liked this post, don't forget to share it with your peers and subscribe to Introblogger Feed.Rethnaraj Rambabuhttp://www.blogger.com/profile/15863204708800295797noreply@blogger.com14tag:blogger.com,1999:blog-6722993789567734861.post-31139149851927106402010-04-06T19:09:00.005+08:002010-04-06T19:14:48.146+08:00How to add comment bubble beside post title(heading) in Blogger/blogspot blog?<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJRau_W52xKF0g1u6R2W9f7UfKJjPlcob7xcj7evYFwCBQ0VrTKsrerufJAkPtFF_Lfjrxhddteyw1x0e-CzWnHbvXxK-23LzPh9B6m08Y1XXufYUKFM5MRetQQKfVLWAEjzNGQCHzBw8j/s1600/add_comment_bubble_blogger.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJRau_W52xKF0g1u6R2W9f7UfKJjPlcob7xcj7evYFwCBQ0VrTKsrerufJAkPtFF_Lfjrxhddteyw1x0e-CzWnHbvXxK-23LzPh9B6m08Y1XXufYUKFM5MRetQQKfVLWAEjzNGQCHzBw8j/s320/add_comment_bubble_blogger.gif" /></a>Today, I am going to teach how to add comment bubble beside each post title in Blogger blogs. Usually in default Blogger templates or in the theme that I'm using for my blog, you can see the number of comments shown below the post title is in this form: <b>3 comments</b>. But, to make it look more professional we can use comment bubble where the comment number is shown inside a "Bubble" like shown in the image below.<br />
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7bknnuARcMv_wTK4KkyC0byj03NxOQKGYvAVeuSnxd3RtQbHkJBWIrw0W6jGEgVp9lu2Kz_mCAMOOty3BQca_JYc_b9yEVB732WEKbjRxRPCB7PXzsNUgBbD5fGKWdcwZwomvMJo2Ov2X/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7bknnuARcMv_wTK4KkyC0byj03NxOQKGYvAVeuSnxd3RtQbHkJBWIrw0W6jGEgVp9lu2Kz_mCAMOOty3BQca_JYc_b9yEVB732WEKbjRxRPCB7PXzsNUgBbD5fGKWdcwZwomvMJo2Ov2X/" style="border: 3px solid rgb(228, 228, 228); padding-left: 5px;" /></a></div><br />
I've used this comment bubble in my latest template, <a href="http://introblogger.blogspot.com/2010/03/releasing-pro-indexer-free-premium.html">Pro Indexer</a>. Before start editing your template <b>save a backup</b> of it first. After that, follow these easy steps below.<br />
<br />
1. Go to Layout > Edit HTML > Click on "Expand Widget Templates"<br />
<br />
2. Search for this code in your CSS. It is usually found at the end of the CSS section.<br />
<br />
<div class="codelist">]]></b:skin></div><br />
3. Replace that code with the code below.<br />
<br />
<div class="codelist">/*------Commment Bubble Start------*/<br />
<br />
.comment-bubble {<br />
float : right;<br />
width : <span style="color: red;">48</span>px;<br />
height : <span style="color: red;">48</span>px;<br />
background : url(<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGB4FujM8zQmBorc_qFuZWOcfgbjblc9pRZooDgPqKulSUpVzhiWXTqaBJ63BrbTH9m3jmdq_YIi-O1apMLMiU6bSTHr3bRtNI6PEoihAgAtfM9vgbCXCQhY069j9I-l0WxMSMxtVpx6gL/</span>) no-repeat;<br />
font-size : 18px;<br />
margin-top : -15px;<br />
margin-right : 2px;<br />
text-align : center;<br />
padding:0px 0px 0px 0px;<br />
}<br />
<br />
/*------Commment Bubble End Introblogger------*/<br />
<br />
]]></b:skin></div><br />
4. Now search for <br />
<br />
<div class="codelist"><h3 class='post-title entry-title'></div><br />
and you'll eventually see the whole bunch of the codes below.<br />
<br />
<div class="codelist"><b:includable id='post' var='post'><div class='post'><br />
<div class='post hentry uncustomized-post-template'><br />
<a expr:name='data:post.id'/><br />
<b:if cond='data:post.title'><br />
<h3 class='post-title entry-title'><br />
<b:if cond='data:post.link'><br />
<h2><a expr:href='data:post.link'><data:post.title/></a></h2><br />
<b:else/><br />
<b:if cond='data:post.url'><br />
<h2><a expr:href='data:post.url'><data:post.title/></a></h2><br />
<b:else/><br />
<data:post.title/><br />
</b:if><br />
</b:if><br />
</h3><br />
</b:if></div><br />
5. Immediately next to the <h3 class='post-title entry-title'>, paste the piece of code below.<br />
<br />
<div class="codelist"><b:if cond='data:post.allowComments'><br />
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a><br />
</b:if></div><br />
And now the edited code will look like this.<br />
<br />
<div class="codelist"><b:includable id='post' var='post'><br />
<div class='post hentry uncustomized-post-template'><br />
<a expr:name='data:post.id'/><br />
<b:if cond='data:post.title'><br />
<h3 class='post-title entry-title'><span style="color: blue;"><b:if cond='data:post.allowComments'></span><br />
<div style="color: blue;"><a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></div><div style="color: blue;"></b:if></div><b:if cond='data:post.link'><br />
<a expr:href='data:post.link'><data:post.title/></a><br />
<b:else/><br />
<b:if cond='data:post.url'><br />
<a expr:href='data:post.url'><data:post.title/></a><br />
<b:else/><br />
<data:post.title/><br />
</b:if><br />
</b:if><br />
</h3><br />
</b:if></div><br />
<br />
And you are done. Click <b>save template</b>.<br />
<br />
If you don't like the default bubble that I've provided, you can use your own. All you've to do is just replacing the source link of the image( <span style="color: red;">red colour in CSS</span> ) and adjusting the width and height (<span style="color: blue;">Blue colour in CSS</span>) of the bubble accordingly. If you don't know to do it, you can leave a comment below this post or send me an email. I will reply to your question in 24 hours time.<br />
<br />
Here, I've attached a link where you can download a collection of other bubble images, so that you don't have to waste your time search for bubble images. You can upload those images to Blogger, <a href="http://introblogger.blogspot.com/2009/12/free-image-hosting-with-unlimited.html">read about it here</a>.<br />
<br />
Download <a href="http://www.box.net/shared/dki5a4clct">Comment Bubble.zip</a><br />
Download <a href="http://www.box.net/shared/gzx3vxld4x">Comment Bubble.rar</a>Rethnaraj Rambabuhttp://www.blogger.com/profile/15863204708800295797noreply@blogger.com173tag:blogger.com,1999:blog-6722993789567734861.post-14286877759666480652010-03-20T19:37:00.001+08:002010-04-25T11:28:00.686+08:00Best collection of Girly Style Blogger/Blogspot Templates<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWK8MNFm_N6HF8m34MyJIkFfZtnh7W0hIvy4GN4So3D_u07uwqFcoD5Ka2W5nSKmp39qFYV5IWZ7AlavE2mtE6yORtkCuZlRlnuAej40NuGtTYI6u1VUUWaKoEiadvpd2Nj7GaSRtgn4V7/s1600-h/girly.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWK8MNFm_N6HF8m34MyJIkFfZtnh7W0hIvy4GN4So3D_u07uwqFcoD5Ka2W5nSKmp39qFYV5IWZ7AlavE2mtE6yORtkCuZlRlnuAej40NuGtTYI6u1VUUWaKoEiadvpd2Nj7GaSRtgn4V7/s320/girly.jpg" /></a>If content is the king, then design is the queen. Normally, female bloggers are very concerned about their blog design or template. They want their blog to be attractive and eye-catching. So, I've decided to post a list of Girly-style blogger templates especially for female readers of my blog ( <i>this doesn't mean guys cannot use those themes, use them if they fit your blog niche</i> :). Here you can see my compilation of 28 girly-style blogger templates.<br />
<a name='more'></a><br />
<br />
1. Bubblegum Baby Free Blogger Template | <a href="http://bubblegumbaby-btemplates.blogspot.com/">Demo</a> | <a href="http://www.box.net/shared/xd3xf82b48">Download</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYZor69gYYjrUQJDUuiZXeREyq6U2F7WzJCK_B2osFcpR_XNrgwF74w0-aiGVWfY8fVpPZErY6rQ3asNgJWgZcZQpTKFK3XoesY-IIbVJbRwqxVjHgjix-WEaGCy5NDya4DQUxfEcuAFtn/s1600-h/Bubblegum-Baby.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYZor69gYYjrUQJDUuiZXeREyq6U2F7WzJCK_B2osFcpR_XNrgwF74w0-aiGVWfY8fVpPZErY6rQ3asNgJWgZcZQpTKFK3XoesY-IIbVJbRwqxVjHgjix-WEaGCy5NDya4DQUxfEcuAFtn/s320/Bubblegum-Baby.jpg" /></a></div><br />
2. Woman Talk Free Blogger Template | <a href="http://womantalk-btemplates.blogspot.com/">Demo</a> | <a href="http://www.box.net/shared/8npl95ru0f">Download</a> <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhawOlTjuFCFuZ-W6mx1oz7Drvn8u69FSfvQg2xfvl98OXBc3rvJA7BspSPW1_kD7aKrJMCSvVLB4PanpbxdV0XdctvtcvzJz_s7zpz_R6iSrBYf-kH6TVmM7G4bcsgaqi2WBpsnIvqM6Uj/s1600-h/Woman-Talk.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhawOlTjuFCFuZ-W6mx1oz7Drvn8u69FSfvQg2xfvl98OXBc3rvJA7BspSPW1_kD7aKrJMCSvVLB4PanpbxdV0XdctvtcvzJz_s7zpz_R6iSrBYf-kH6TVmM7G4bcsgaqi2WBpsnIvqM6Uj/s320/Woman-Talk.jpg" width="320" /></a></div><br />
3. Cosmetic Girl Free Blogger Template | <a href="http://cosmeticgirl-btemplates.blogspot.com/">Demo</a> | <a href="http://www.box.net/shared/ef2ug7nnlb">Download</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9bN7P1yadLUtns9bUwuRKiKCjez-bv5h0yNa4ZoQe7-cm-ijHedrLzSr4-BoHGAEHw49rx9VsU29ZNgf0uOXUPJPowsg7eNw_BBtKDokDdPiuQIxeQXbhOwZaD77VpR8AtOrjRe1rfXAe/s1600-h/Cosmetic-Girl.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9bN7P1yadLUtns9bUwuRKiKCjez-bv5h0yNa4ZoQe7-cm-ijHedrLzSr4-BoHGAEHw49rx9VsU29ZNgf0uOXUPJPowsg7eNw_BBtKDokDdPiuQIxeQXbhOwZaD77VpR8AtOrjRe1rfXAe/s320/Cosmetic-Girl.jpg" /></a></div><br />
4. She is a Lady Free Blogger Template | <a href="http://sheisalady-btemplates.blogspot.com/">Demo</a> | <a href="http://www.box.net/shared/q1r1zl5bkt">Download</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPmulc1CxeRzGlccOQHM6okVmC77V6FZ4dwAEHYlVeS5SWpftWLCy2xxZWcau4XAkQGRhoEXPzhA3RvkC61i1k5gfjN1RnSlNYwfLH3WnoF7jTgBnsWBCXxkkt-wrZ1S7_ZgReiCzZRJCe/s1600-h/She-is-a-lady.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPmulc1CxeRzGlccOQHM6okVmC77V6FZ4dwAEHYlVeS5SWpftWLCy2xxZWcau4XAkQGRhoEXPzhA3RvkC61i1k5gfjN1RnSlNYwfLH3WnoF7jTgBnsWBCXxkkt-wrZ1S7_ZgReiCzZRJCe/s320/She-is-a-lady.jpg" width="320" /></a></div><br />
5. Pinky 84 Free Blogger Template | <a href="http://pinky84-btemplates.blogspot.com/">Demo</a> | <a href="http://www.box.net/shared/l20az1bd3i">Download</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcGcg8dvLJvBd0ly_4huUvSKP9FpyIZC2XFKvp_5iiW10RZFS3zBhW_n0sSnftzpAEBwUTQU2snB2QU4WvL3GbBYmy1l_PDAc8wmWJ2qG0G_onctLWoFox_HC7xBfIouqz54MoMm8tXpnE/s1600-h/pinky84.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcGcg8dvLJvBd0ly_4huUvSKP9FpyIZC2XFKvp_5iiW10RZFS3zBhW_n0sSnftzpAEBwUTQU2snB2QU4WvL3GbBYmy1l_PDAc8wmWJ2qG0G_onctLWoFox_HC7xBfIouqz54MoMm8tXpnE/s320/pinky84.jpg" /></a></div><br />
6. Grunge Girl Free Blogger Template | <a href="http://grungegirl-btemplates.blogspot.com/">Demo</a> | <a href="http://www.box.net/shared/vy7q9cfg4t">Download</a><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZktTftJofyhQ5do5gpJCUcECX8MRfDn2BFVSFCycREEpIccZDBJPdk8OQ8IsJA6oBRfYbjmclFQU-Rqh43jV63o8s97lp6ml-6wWTHF7u-20HfPiXi-nMEmiPAraQppEv82cX3jSwwgSe/s1600-h/Grunge-Girl.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZktTftJofyhQ5do5gpJCUcECX8MRfDn2BFVSFCycREEpIccZDBJPdk8OQ8IsJA6oBRfYbjmclFQU-Rqh43jV63o8s97lp6ml-6wWTHF7u-20HfPiXi-nMEmiPAraQppEv82cX3jSwwgSe/s320/Grunge-Girl.jpg" /></a></div><br />
7. Meninas Free Blogger Template | <a href="http://meninas-btemplates.blogspot.com/">Demo</a> | <a href="http://www.box.net/shared/dljt2ql642">Download</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbWiEzv6Et5H1bVK0HpAlMA8GOQxIwUvMjxFMon0djk0rrqeyVP7m_arenfcmWldyiK-aPsJtt8yLB9XygVHzYLu_Td6zNx3vh6UAq943wkAZCWvlv97HQ_g_UOYHTxJjonfJrMLBEutET/s1600-h/meninas.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbWiEzv6Et5H1bVK0HpAlMA8GOQxIwUvMjxFMon0djk0rrqeyVP7m_arenfcmWldyiK-aPsJtt8yLB9XygVHzYLu_Td6zNx3vh6UAq943wkAZCWvlv97HQ_g_UOYHTxJjonfJrMLBEutET/s320/meninas.jpg" /></a></div><br />
8. Strange Little Town Free Blogger Template | <a href="http://strangelittletown-btemplates.blogspot.com/">Demo</a> | <a href="http://www.box.net/shared/68jspszakb">Download</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjweAXnMguThYA8Fv83CqMJWrVKtynwB96A4MzSowJb3SB3qI6sqtRRTjm2DFw5ERjWKVEN6VYd4vbElRo25wUYmuP3yyIKZuUx3v9JNsXuolQRsvPYMUb9PyqPx5W6v9X-bZ55AMnm86Hc/s1600-h/strange-little-town.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjweAXnMguThYA8Fv83CqMJWrVKtynwB96A4MzSowJb3SB3qI6sqtRRTjm2DFw5ERjWKVEN6VYd4vbElRo25wUYmuP3yyIKZuUx3v9JNsXuolQRsvPYMUb9PyqPx5W6v9X-bZ55AMnm86Hc/s320/strange-little-town.jpg" /></a></div><br />
9. Girl in Circles Free Blogger Template | <a href="http://girlincircles-btemplates.blogspot.com/">Demo</a> | <a href="http://www.box.net/shared/ppvds6oy5o">Download</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy0HJNsdy2MgXxhvaIJhiMSPpCJuu4KxRVYXbFz8hcRxBpBEEhfw9qbOTDc6sckCGwP6s6szUVSg68oZY6MU09LecFpuhVIwZlyjI8UGR8wLSO4baKcdlhsCPq_VIHHl6vfgY6lF2ixjvp/s1600-h/Girl-in-Circles.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy0HJNsdy2MgXxhvaIJhiMSPpCJuu4KxRVYXbFz8hcRxBpBEEhfw9qbOTDc6sckCGwP6s6szUVSg68oZY6MU09LecFpuhVIwZlyjI8UGR8wLSO4baKcdlhsCPq_VIHHl6vfgY6lF2ixjvp/s320/Girl-in-Circles.jpg" /></a></div><br />
10. Vector Art Free Blogger Template | <a href="http://vector-art-introblogger.blogspot.com/">Demo</a> | <a href="http://www.box.net/shared/8ynabmmqrf">Download</a> <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-OLjeGvxgBEtEEk_XVxay7IuZD9TwloJd1SIs_mbalaCi9NyV1nKBmV80SI5Qv36T46O5JZ1Hqd92CH1fExWvEf79Jh5in7D8Y4etYQvL0J_dE7-vrOi9FlbVxpbJ3K4_5OAABV9ERsky/s1600-h/Vector-Art.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-OLjeGvxgBEtEEk_XVxay7IuZD9TwloJd1SIs_mbalaCi9NyV1nKBmV80SI5Qv36T46O5JZ1Hqd92CH1fExWvEf79Jh5in7D8Y4etYQvL0J_dE7-vrOi9FlbVxpbJ3K4_5OAABV9ERsky/s320/Vector-Art.jpg" /></a></div><br />
11. Sweet Girl Free Blogger Template | <a href="http://sweetgirl-btemplates.blogspot.com/">Demo</a> | <a href="http://www.box.net/shared/cg4k890syr">Download</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmb724Vz20evHEh178vmBgWUHAX2cJmFD9L5MTGjd80jundp0tv7WzcGVtRLIpuI-BDDOoZLNiwdtTlwSxXzx8ljPVyPU8a1wvGvad1pPachmT0iUU4DeFYjzftelQ_nO767C8yzomJ2aQ/s1600-h/sweetgirl.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmb724Vz20evHEh178vmBgWUHAX2cJmFD9L5MTGjd80jundp0tv7WzcGVtRLIpuI-BDDOoZLNiwdtTlwSxXzx8ljPVyPU8a1wvGvad1pPachmT0iUU4DeFYjzftelQ_nO767C8yzomJ2aQ/s320/sweetgirl.jpg" /></a></div><br />
12. Pinka 3 Free Blogger Template | <a href="http://pinka3-btemplates.blogspot.com/">Demo</a> | <a href="http://www.box.net/shared/gad3afhc5a">Download </a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjadT5PTX8nCsCBq8wkDbWZ4-fbfHu8NuB6s3RT9LWzM7qwrUgA2pob4-4DVqASgCPvawD9Il3K7Xngsh0cQIuO_IU1sP2yW8Kd7lSUt8B7X2MoKk3gJLRHDdBB3Y85gwqIUNBYVG09qqni/s1600-h/pinka3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjadT5PTX8nCsCBq8wkDbWZ4-fbfHu8NuB6s3RT9LWzM7qwrUgA2pob4-4DVqASgCPvawD9Il3K7Xngsh0cQIuO_IU1sP2yW8Kd7lSUt8B7X2MoKk3gJLRHDdBB3Y85gwqIUNBYVG09qqni/s320/pinka3.jpg" /></a></div><br />
13. Girly Diaries Free Blogger Template | <a href="http://girlydiaries-btemplates.blogspot.com/">Demo</a> | <a href="http://www.box.net/shared/tmsqg7d4b6">Download </a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7_mSb-pvL0DyeKLL5V5TCS0JbPcncCqWGVUlqm1_8_Md-sQGQ9mlaqrAkixKX13SqvXitIqGivVrDOSaRL5qgSbncJPJfp7zwtUnnhfkWqPZorQQAaEMLaY29RpjJCtpapaFfANwk_9OY/s1600-h/girlydiaries.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7_mSb-pvL0DyeKLL5V5TCS0JbPcncCqWGVUlqm1_8_Md-sQGQ9mlaqrAkixKX13SqvXitIqGivVrDOSaRL5qgSbncJPJfp7zwtUnnhfkWqPZorQQAaEMLaY29RpjJCtpapaFfANwk_9OY/s320/girlydiaries.jpg" /></a></div><br />
14. Heartland Free Blogger Template | <a href="http://heartland-btemplates.blogspot.com/">Demo</a> | <a href="http://www.box.net/shared/imh2ymfux2">Download </a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUuqPNCfBjWFLYaaVFiYJZFN6CoKyTLot2FfJbysu5UzNUWgEnFSQXXmYYXTQ__bRoM7P_JDf39CwYEYU0lusMhUtNIcvjYC1k4tGD7bOeXGWZn3iVC0Jgs5UIz9vCzXCIKlUA6sb-tT96/s1600-h/heartland.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUuqPNCfBjWFLYaaVFiYJZFN6CoKyTLot2FfJbysu5UzNUWgEnFSQXXmYYXTQ__bRoM7P_JDf39CwYEYU0lusMhUtNIcvjYC1k4tGD7bOeXGWZn3iVC0Jgs5UIz9vCzXCIKlUA6sb-tT96/s320/heartland.jpg" /></a></div><br />
15. Simple Balance Lucky Star | <a href="http://simplebalanceluckystar.blogspot.com/">Demo</a> | <a href="http://www.box.net/shared/ngl764sdqn">Download</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinHGQgpVuV2HzAoz3gBLCq1hHvkhO9n0dVapLc3JXOI0WvswrIquCkOtoNuayc-FnsGv2R1s4Ee9CF81-Egy4JiRcYZFBu06J8AWuJrELvpv4MVpQ7eSQETkfX8Nxd-DemAjZT7C3YJDr6/s1600-h/Simple-Balance-Lucky-Star.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinHGQgpVuV2HzAoz3gBLCq1hHvkhO9n0dVapLc3JXOI0WvswrIquCkOtoNuayc-FnsGv2R1s4Ee9CF81-Egy4JiRcYZFBu06J8AWuJrELvpv4MVpQ7eSQETkfX8Nxd-DemAjZT7C3YJDr6/s320/Simple-Balance-Lucky-Star.jpg" /></a></div><br />
16. Shopping Bag Free Blogger Template | <a href="http://shoppingbag-btemplates.blogspot.com/">Demo</a> | <a href="http://www.box.net/shared/5xrodpqpr1">Download </a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGtYFgtRA5hB7owtbyCa2db_IDE63c4ONAipIFBe8PEedMKDiGScrpJd7jm-C5oLyjVQlpVu93O8G7DNJPJVDbyR7Os0gGUakPREMTzTI5qcPFzhyphenhyphenRJ6mxArqKhsKD4o8pBrv2-L035fGw/s1600-h/shoppingbag.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGtYFgtRA5hB7owtbyCa2db_IDE63c4ONAipIFBe8PEedMKDiGScrpJd7jm-C5oLyjVQlpVu93O8G7DNJPJVDbyR7Os0gGUakPREMTzTI5qcPFzhyphenhyphenRJ6mxArqKhsKD4o8pBrv2-L035fGw/s320/shoppingbag.jpg" /></a></div><br />
17. Couple in Pink Free Blogger Template | <a href="http://coupleinpink-btemplates.blogspot.com/">Demo</a> | <a href="http://www.box.net/shared/jlh3cai9lb">Download </a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnq1J0M2I2dC0yZ0E2HJOnpnGDlFkkBysFVobAQwt8FSjpX-waRoQrxK-ivhWDy0q5uGd16GNE2ee57BJeYJPZr7KY_chh-dUrEhm63fPqnJ3viPVHJtEqV8bpv7uUUpfVkJ95wVR5Nkef/s1600-h/coupleinpink.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnq1J0M2I2dC0yZ0E2HJOnpnGDlFkkBysFVobAQwt8FSjpX-waRoQrxK-ivhWDy0q5uGd16GNE2ee57BJeYJPZr7KY_chh-dUrEhm63fPqnJ3viPVHJtEqV8bpv7uUUpfVkJ95wVR5Nkef/s320/coupleinpink.jpg" /></a></div><br />
18. Pink Blue Free Blogger Template | <a href="http://pinkblue-btemplates.blogspot.com/">Demo</a> | <a href="http://www.box.net/shared/zz1y9ez3i5">Download </a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9dpTmsoiF8QHEtFxd8x76tRPmvFVeFDU2ZfWee8RL8_94qeNWxIRYAYtDkgxQ9bfRMAJsCgkD-6nA32nab6pgaD0ViGjQjQ2Zypm-5_Rni3iIh4PmVJvgmWE2gB7dj1wF5I4l9sXT3lSZ/s1600-h/pinkblue.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9dpTmsoiF8QHEtFxd8x76tRPmvFVeFDU2ZfWee8RL8_94qeNWxIRYAYtDkgxQ9bfRMAJsCgkD-6nA32nab6pgaD0ViGjQjQ2Zypm-5_Rni3iIh4PmVJvgmWE2gB7dj1wF5I4l9sXT3lSZ/s320/pinkblue.jpg" /></a></div><br />
19. Starlite Diva Free Blogger Template | <a href="http://starlitediva-btemplates.blogspot.com/">Demo</a> | <a href="http://www.box.net/shared/236ze9vkr6">Download </a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn8_zueEzJafBrOM3n5DW1SXZOqX53qxcEDbIbyvLgs7g_CS56WOyh387h9AqqLnQSfEpuRE1Uw4Cv-o2vPlzdNNscJ6AkreoTzXwPSrYnnEcTkVq71U70iv_wIlZvIG9-RHBSfnQ4uvuj/s1600-h/starlitedivabt.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn8_zueEzJafBrOM3n5DW1SXZOqX53qxcEDbIbyvLgs7g_CS56WOyh387h9AqqLnQSfEpuRE1Uw4Cv-o2vPlzdNNscJ6AkreoTzXwPSrYnnEcTkVq71U70iv_wIlZvIG9-RHBSfnQ4uvuj/s320/starlitedivabt.jpg" /></a></div><br />
20. Free Dream Light Free Blogger Template | <a href="http://free-dream-light1.blogspot.com/">Demo</a> | <a href="http://www.box.net/shared/ipi490gohg">Download</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkJNlilPhW3Pw15gQMxmLc3p-fzKKvJCQfmjKEz1RcG_FuqQVxFb3ZIMZQZ82CMDgm6CnzKhOeQiRvyaAa3yiQaTfT55w10pVQIKmRULKtl-yfdQPhyphenhyphenahGQVzdRUgIf0Ctls2c0nj7T2xj/s1600-h/free-dream-light.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkJNlilPhW3Pw15gQMxmLc3p-fzKKvJCQfmjKEz1RcG_FuqQVxFb3ZIMZQZ82CMDgm6CnzKhOeQiRvyaAa3yiQaTfT55w10pVQIKmRULKtl-yfdQPhyphenhyphenahGQVzdRUgIf0Ctls2c0nj7T2xj/s320/free-dream-light.jpg" /></a></div><br />
21. Girly Web 2.0 Free Blogger Template | <a href="http://girly-web-20.blogspot.com/">Demo</a> | <a href="http://www.box.net/shared/gibj2i69b2">Download</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVkZGjH08TJFO-U3w8elbwv7NuVWSQR_fi8axUS8VijBemj0Sokb6_cltDaEw3mucyWFRLrdDxj4i2nWjCuNoQOOhXyzI6E9c2PiBTJwKlpjhjJ_JOmQdb3tod5tH0Cx5u_tCM3MOG9VJk/s1600-h/girly-web-20-med.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVkZGjH08TJFO-U3w8elbwv7NuVWSQR_fi8axUS8VijBemj0Sokb6_cltDaEw3mucyWFRLrdDxj4i2nWjCuNoQOOhXyzI6E9c2PiBTJwKlpjhjJ_JOmQdb3tod5tH0Cx5u_tCM3MOG9VJk/s320/girly-web-20-med.jpg" /></a></div><br />
22. Paper Girl Free Blogger Template | <a href="http://papergirl-btemplates.blogspot.com/">Demo</a> | <a href="http://www.box.net/shared/8vzi700rlc">Download</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRoACGupAFG2_XdgB8VTtNyaY5KOLRQqNa95TM8vnLyWQt9tYCczU2RqNk3mO1vzUqpVq_qKM8rCWvXt6v_QEh1dMzJ-PY_3qtKDAd85f-TtrITTtXdewpp1qK5ffZGEDEfQMnZr8ni7mO/s1600-h/paper-girl.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRoACGupAFG2_XdgB8VTtNyaY5KOLRQqNa95TM8vnLyWQt9tYCczU2RqNk3mO1vzUqpVq_qKM8rCWvXt6v_QEh1dMzJ-PY_3qtKDAd85f-TtrITTtXdewpp1qK5ffZGEDEfQMnZr8ni7mO/s320/paper-girl.jpg" /></a></div><br />
23. Girly Magazine Free Blogger Template | <a href="http://girlymagz-bietemplates.blogspot.com/">Demo</a> | <a href="http://www.box.net/shared/y86i38ahx4">Download</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvedaI6Nb0XWxk7voRCfsnqeqa_DmaFzfUE0q9qyJPsXniZVZ3E2Fqus6DXKLxmLrBrLSRuYyHX6k2xOKz0ce3S38bBxmnxNwzdqupjkg-ehQDlAsuZEKVl9j65bhQR5o2oXjW26lEEdoJ/s1600-h/girlmagz.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvedaI6Nb0XWxk7voRCfsnqeqa_DmaFzfUE0q9qyJPsXniZVZ3E2Fqus6DXKLxmLrBrLSRuYyHX6k2xOKz0ce3S38bBxmnxNwzdqupjkg-ehQDlAsuZEKVl9j65bhQR5o2oXjW26lEEdoJ/s320/girlmagz.jpg" /></a></div><br />
24. Golden Girl Free Blogger Template | <a href="http://goldengirl-btemplates.blogspot.com/">Demo</a> | <a href="http://www.box.net/shared/h0qbsz1120">Download</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAVAeSymc8hnpHNqiA-oS62u9qz8_3XabN69P4vu7CJBVyQQuVkt10Ai1PTRumHFMV-MuzviuxjHfmibOrBrp1-0Oio6PdcLs04fI2yau8VotlS3B8-8SmLmAHVWtOXR611OKFS2wid5dc/s1600-h/Golden-Girl.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAVAeSymc8hnpHNqiA-oS62u9qz8_3XabN69P4vu7CJBVyQQuVkt10Ai1PTRumHFMV-MuzviuxjHfmibOrBrp1-0Oio6PdcLs04fI2yau8VotlS3B8-8SmLmAHVWtOXR611OKFS2wid5dc/s320/Golden-Girl.jpg" /></a></div><br />
25. Simple is best Free Blogger Template | <a href="http://simpleisbest-btemplates.blogspot.com/">Demo</a> | <a href="http://www.box.net/shared/ta2yescybg">Download</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB90ute5gBaaiL3WHzHQQB2fxty9bkS4mvMAsf0LKX8XquBlNdqRz1iCjoE9wIy2_PxJ1rM8IM1Ii9FjQw3i1U1V5_n9l4JB8KbeOyU-2tQLYcAIC-o3uk8kYxV1Ir-nv72k2PIrmhCjA2/s1600-h/Simple-is-best.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB90ute5gBaaiL3WHzHQQB2fxty9bkS4mvMAsf0LKX8XquBlNdqRz1iCjoE9wIy2_PxJ1rM8IM1Ii9FjQw3i1U1V5_n9l4JB8KbeOyU-2tQLYcAIC-o3uk8kYxV1Ir-nv72k2PIrmhCjA2/s320/Simple-is-best.jpg" /></a></div><br />
26. Cute Color Free Blogger Template | <a href="http://cutecolor-btemplates.blogspot.com/">Demo</a> | <a href="http://www.box.net/shared/0esjmxf78r">Download</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFQbQkzrnYMbsYHVvAcd7igTg6CMOKIdrgTW7D2-BjMZK2L4_GDSSqVKplgT7GmRox7n6WKjZru5Tf4Cgr2wOh6ZgEwwCrdZmnZkvF9Y_FlQKxAkxYOOxzPnV34bg-mOhnNwnj_mdLZycq/s1600-h/Cute-Color.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFQbQkzrnYMbsYHVvAcd7igTg6CMOKIdrgTW7D2-BjMZK2L4_GDSSqVKplgT7GmRox7n6WKjZru5Tf4Cgr2wOh6ZgEwwCrdZmnZkvF9Y_FlQKxAkxYOOxzPnV34bg-mOhnNwnj_mdLZycq/s320/Cute-Color.jpg" /></a></div><br />
27. Love 2 Free Blogger Template | <a href="http://love2-btemplates.blogspot.com/">Demo</a> | <a href="http://www.box.net/shared/noi31o5ixv">Download </a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicL_lOIycYTGdx7-16p1RGeVa4c04WdcI0QtTnPPhG8Iz5l7orXouOJp4QY5sFesXTwBL0e24QOZmfBkocCfnoB03yC6k2pBhRfCPb3m2MbCJcCY0BbU9kfsfP7JqlsGUIUhqyRam4t9TT/s1600-h/love2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicL_lOIycYTGdx7-16p1RGeVa4c04WdcI0QtTnPPhG8Iz5l7orXouOJp4QY5sFesXTwBL0e24QOZmfBkocCfnoB03yC6k2pBhRfCPb3m2MbCJcCY0BbU9kfsfP7JqlsGUIUhqyRam4t9TT/s320/love2.jpg" /></a></div><br />
28. Blog Rocker O Free Blogger Template | <a href="http://blogrockero-btemplates.blogspot.com/">Demo</a> | <a href="http://www.box.net/shared/5304rh6o52">Download</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBhr59r4ZyYOQW8gFVi0OebQ4d7DO30uUWvjHBKpWpUuAOka8hAwjdQje-PxbVIAvETH5E97etlmk_lQofqKP9JwZvugoAeGxkgwx9xxAHcZUuZguAqjAU-vYJu5iswcQLmR9drYiIMCrk/s1600-h/Blog-Rockero.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBhr59r4ZyYOQW8gFVi0OebQ4d7DO30uUWvjHBKpWpUuAOka8hAwjdQje-PxbVIAvETH5E97etlmk_lQofqKP9JwZvugoAeGxkgwx9xxAHcZUuZguAqjAU-vYJu5iswcQLmR9drYiIMCrk/s320/Blog-Rockero.jpg" /></a></div>Rethnaraj Rambabuhttp://www.blogger.com/profile/15863204708800295797noreply@blogger.com18tag:blogger.com,1999:blog-6722993789567734861.post-30896325191361848792010-03-14T10:39:00.000+08:002010-03-14T10:39:00.450+08:00Collection of free shoutbox widgets for your Blogger blog<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4ht5rKDQUssVH6bI7vX0dL2NYjn38xFo5h6XIo3za7Wr0JgX3AVXxdHS9TDzf3IdV3zi_qC4CiBcugOz8van4bzB0F8ooIWrRsx49gcUm-pUIDWlVmUeL2fVMOCWiB1fj5hpAzVksOu2C/s1600-h/shoutboxforblogger.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4ht5rKDQUssVH6bI7vX0dL2NYjn38xFo5h6XIo3za7Wr0JgX3AVXxdHS9TDzf3IdV3zi_qC4CiBcugOz8van4bzB0F8ooIWrRsx49gcUm-pUIDWlVmUeL2fVMOCWiB1fj5hpAzVksOu2C/s320/shoutboxforblogger.gif" /></a>Here is a collection of shoutbox widgets for Blogger powered blogs. What is shout box? A shoutbox, which is also known as a guestbook, tagboard, chatbox, saybox, or a chatterbox is a communication platform which allows your visitors to leave messages for you and you can leave message for them in your blog/website, like a forum or an instant messaging service. <br />
<a name='more'></a><br />
1. <a href="http://www.sbox.ws/">Sbox</a><br />
<div style="text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitfiKbqoF2Ca0jNt35xvn1XLJptBt-7wuwylHmb4GIVcRywHbBpjkEY9NQgZ1_lxebbtInDxowOx60wm6_ldPxrKZdXojQfyHv6KonSYVSJvoEjO_NUJymDWAYh9In4tQCG76ZtO2RBTCU/s1600-h/sbox.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitfiKbqoF2Ca0jNt35xvn1XLJptBt-7wuwylHmb4GIVcRywHbBpjkEY9NQgZ1_lxebbtInDxowOx60wm6_ldPxrKZdXojQfyHv6KonSYVSJvoEjO_NUJymDWAYh9In4tQCG76ZtO2RBTCU/s320/sbox.gif" /></a></div><br />
<br />
2. <a href="http://www.shoutmix.com/main/">Shoutmix</a> <br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixXBCanGbEUmXhNxPiLhimiSnofLR9I7sdhVKxU_aem2hX2GyTrkYl1iEArAyGYXIP2ta2cxRUN7vONh3Di06d3XO9v38uxvCxNdOyl4gvQANR5_gn7SbsLbzyrWVfEc3cc0_hDfoRJt-d/s1600-h/Shoutmix.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixXBCanGbEUmXhNxPiLhimiSnofLR9I7sdhVKxU_aem2hX2GyTrkYl1iEArAyGYXIP2ta2cxRUN7vONh3Di06d3XO9v38uxvCxNdOyl4gvQANR5_gn7SbsLbzyrWVfEc3cc0_hDfoRJt-d/s320/Shoutmix.gif" /></a></div><br />
<br />
3. <a href="http://www.yellbox.com/">Yellbox</a> <br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYVhQY4Zix_rw2RHZVTQ-BYijVVT3lNnu0Q0jXiNV-FKwUJIS28duvd9o9oAveosXFt8zuGVsMg8VXFMsCwWg2nKvJXBgSeHeoSMSlXCBfGHHc442M2sbXQ7MKQ1pmugSGPZaMk4ZM4sG1/s1600-h/yellbox.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYVhQY4Zix_rw2RHZVTQ-BYijVVT3lNnu0Q0jXiNV-FKwUJIS28duvd9o9oAveosXFt8zuGVsMg8VXFMsCwWg2nKvJXBgSeHeoSMSlXCBfGHHc442M2sbXQ7MKQ1pmugSGPZaMk4ZM4sG1/s320/yellbox.gif" /></a></div><br />
4. <a href="http://free-shoutbox.net/">Free-Shoutbox</a> <br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbq6rEjDDiIqde-HGqbirEyA25q95BXVaZCqydnpvYNBZndSomtmn1io_XIzdt0b8Eql6TUFESP-ASCFKcjr4QuMzWvv5GcGKD5UkJncUgmz8gby8xrOi-7XPynXg_vFxE1zmRtAf5uT8H/s1600-h/free-shoutbox.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbq6rEjDDiIqde-HGqbirEyA25q95BXVaZCqydnpvYNBZndSomtmn1io_XIzdt0b8Eql6TUFESP-ASCFKcjr4QuMzWvv5GcGKD5UkJncUgmz8gby8xrOi-7XPynXg_vFxE1zmRtAf5uT8H/s320/free-shoutbox.gif" /></a></div><br />
5. <a href="http://www.ishoutbox.com/">IShoutBox</a> <br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw2SwdLyQZDvop18RQzvQqUCfhYyNL9zG6R0Pl7xgN0cUlukTfDiaD00f4NcO5hG4mBSuVYj1eR-HZsEeXTK_aKTcssNp4ix_SOjbm7EB-xV7HPbgIWv8NSS0j44MzzQI9Z8ghkbXCSxJp/s1600-h/ishoutbox.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw2SwdLyQZDvop18RQzvQqUCfhYyNL9zG6R0Pl7xgN0cUlukTfDiaD00f4NcO5hG4mBSuVYj1eR-HZsEeXTK_aKTcssNp4ix_SOjbm7EB-xV7HPbgIWv8NSS0j44MzzQI9Z8ghkbXCSxJp/s320/ishoutbox.gif" /></a></div><br />
6. <a href="http://www.free-shoutbox.co.uk/">Free-Shoutbox.co.uk</a> <br />
<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyEefOD-GIxvBDqNJgWONDQYHZsWKvZaCEGd-mM7PFfuLYbz4jHaW5Q4WPeiboiG6me8Sflk7GmKx5JYweMzhdPrvZHfDtdMo-rZpKnGChZGY90hlliOcQ32N202Dnd4xogKoi7fT_V8YU/s1600-h/free-shoutbox-co-uk.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyEefOD-GIxvBDqNJgWONDQYHZsWKvZaCEGd-mM7PFfuLYbz4jHaW5Q4WPeiboiG6me8Sflk7GmKx5JYweMzhdPrvZHfDtdMo-rZpKnGChZGY90hlliOcQ32N202Dnd4xogKoi7fT_V8YU/s320/free-shoutbox-co-uk.gif" /></a></div><br />
7. <a href="http://www.shoutjax.com/">Shoutjax</a> <br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivR1SYQoCCF8dzxqaRtECTAomLQn_oQ7-QrLbWaoxbmTIGRsRBiYT_z8Us0Tlei_rXRarhvNLVmMaVqCzJWMwpCDwZNiB6WPUo6Jk-WrKdYIyt7NyRw5A01fs34Bp5n3ZjFR86ozNa9YWg/s1600-h/shoutjax.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivR1SYQoCCF8dzxqaRtECTAomLQn_oQ7-QrLbWaoxbmTIGRsRBiYT_z8Us0Tlei_rXRarhvNLVmMaVqCzJWMwpCDwZNiB6WPUo6Jk-WrKdYIyt7NyRw5A01fs34Bp5n3ZjFR86ozNa9YWg/s320/shoutjax.gif" /></a></div><br />
8.<a href="http://flashboon.com/">Flashboon</a> <br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXLwPseetea2sWhkFFyMBSiDN1I3VGA7paaITsGIiXjyTz_bhWnoiHDvv7NKqjm_TOOmU20B-S-E2TzZf4jd7C0WxsoignEo_KTeBdlH07euqo8_d7n_-vFveQ0GgeahFe_HpRDY65aqJq/s1600-h/flashboon.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXLwPseetea2sWhkFFyMBSiDN1I3VGA7paaITsGIiXjyTz_bhWnoiHDvv7NKqjm_TOOmU20B-S-E2TzZf4jd7C0WxsoignEo_KTeBdlH07euqo8_d7n_-vFveQ0GgeahFe_HpRDY65aqJq/s320/flashboon.gif" /></a></div><br />
9.<a href="http://www.shootbox.fr/en/">Shootbox</a> <br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw53C1BADHdhCoKXGvT7eD6-cvYFF2ZgPXqKk39QE8jmmYhypWLc3ieOzpbSp_U0NC60ZMxsXZIska7i2NA7S9h-EBsfTn45-Uc1GfU9mno8izdnl-hHWZB7vy2_y7Ow3JcuU0HJP7OX3V/s1600-h/shootboxes2.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw53C1BADHdhCoKXGvT7eD6-cvYFF2ZgPXqKk39QE8jmmYhypWLc3ieOzpbSp_U0NC60ZMxsXZIska7i2NA7S9h-EBsfTn45-Uc1GfU9mno8izdnl-hHWZB7vy2_y7Ow3JcuU0HJP7OX3V/s320/shootboxes2.gif" /></a></div>Rethnaraj Rambabuhttp://www.blogger.com/profile/15863204708800295797noreply@blogger.com72tag:blogger.com,1999:blog-6722993789567734861.post-51571526201185357362010-03-13T19:48:00.004+08:002010-03-20T19:47:06.747+08:00Releasing Pro Indexer | A Free Premium Blogger Theme<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBbpf7-v76Bvlj2PPbXoQhpRzihgDJ9Dkrf7VGxjzFoMleNRDxLxocJni890PVpxhtrzrj32kgP8N6pYJ3F9HickeaW9j_-ti4oO0Bwh85MZialLBGexsYQJZhUAxO5-_G-RB1o9Pr9yIX/s1600/logo_blogger.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBbpf7-v76Bvlj2PPbXoQhpRzihgDJ9Dkrf7VGxjzFoMleNRDxLxocJni890PVpxhtrzrj32kgP8N6pYJ3F9HickeaW9j_-ti4oO0Bwh85MZialLBGexsYQJZhUAxO5-_G-RB1o9Pr9yIX/s320/logo_blogger.gif" /></a>Today, I am releasing Pro Indexer, a free premium blogger theme. It is actually a modified version of the <a href="http://introblogger.blogspot.com/2010/01/indexer-free-blogger-template.html">Indexer theme</a> that I released previously. This blogger theme is compatible with all web browsers (eg: Firefox, IE, Google Chrome). <br />
<br />
<span style="font-size: large;"><b> <a href="http://proindexer-introblogger.blogspot.com/">Live Demo</a> | <a href="http://www.box.net/shared/eecfsctv1o">Download Now</a></b></span><br />
<br />
<br />
<a name='more'></a><br />
<br />
<span style="font-size: large;"><b>Features</b></span><br />
<br />
<br />
<b> 1.</b><b> Right sidebar</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9qj4I5QIB5mtasfdxrE4QmW8clG_5MHePL6eSoznaGMI7xOGvPdZcWeRXmgk8uf3sQ9_dha4SiqSn8S1wsz6ltvEc6tR4wvB3-PpgcCTwO89DrvhIyvZjb5HGzcXMeNlfvRtsTkPAifZn/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="72" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9qj4I5QIB5mtasfdxrE4QmW8clG_5MHePL6eSoznaGMI7xOGvPdZcWeRXmgk8uf3sQ9_dha4SiqSn8S1wsz6ltvEc6tR4wvB3-PpgcCTwO89DrvhIyvZjb5HGzcXMeNlfvRtsTkPAifZn/" width="400" /></a></div><br />
<br />
<b>2. Auto-height adjusting Tabbed sidebar</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4icxOToR1-cuRsG0I8qYJvHHCkxYxCk5gYEFmECtDg4g_IBVsL7pQM07JBqvPrlp_OIQ03MIse6Y6jQ1zUpHtFATWR6FEGxOjJ1xsDkSRC-5kTOgd969YBtXpWODG0KTjQIYFv0bc9XbH/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="73" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4icxOToR1-cuRsG0I8qYJvHHCkxYxCk5gYEFmECtDg4g_IBVsL7pQM07JBqvPrlp_OIQ03MIse6Y6jQ1zUpHtFATWR6FEGxOjJ1xsDkSRC-5kTOgd969YBtXpWODG0KTjQIYFv0bc9XbH/" width="400" /></a></div><br />
<b>3. Three column footer</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOvDCt5ckobVzeWLPEKMPDnMtZxpfW0h2WCRW7AOZ2GESn06H83BzNTggbRplhj2kCWdfW7BFJhLGAEIT1K8QVVWZtFvacmNZYfiq_0lKPWuR5Nw2u_9F8LwGPIbrRVZ8N83roZIA0Xe-7/+column+footer.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="156" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOvDCt5ckobVzeWLPEKMPDnMtZxpfW0h2WCRW7AOZ2GESn06H83BzNTggbRplhj2kCWdfW7BFJhLGAEIT1K8QVVWZtFvacmNZYfiq_0lKPWuR5Nw2u_9F8LwGPIbrRVZ8N83roZIA0Xe-7/+column+footer.gif" width="400" /></a></div><br />
<b>4. Codebox</b><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyn7f3tgll3uiVGpYak-DOJRVWBGd-zqtUhRyr8K4VpQ40K0Dbckqsi_U0B4L_6ScYkJ1zju2bDZQ31IoOVLxPmjJOYqJ2R0fiH7HQVIfLDUcqpcys1ZWeSoP9iqBsz-ktJQJYRhMRozL9/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="71" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyn7f3tgll3uiVGpYak-DOJRVWBGd-zqtUhRyr8K4VpQ40K0Dbckqsi_U0B4L_6ScYkJ1zju2bDZQ31IoOVLxPmjJOYqJ2R0fiH7HQVIfLDUcqpcys1ZWeSoP9iqBsz-ktJQJYRhMRozL9/" width="400" /></a></div><br />
<b>5. Breadcrumb</b><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwa3B-VQJH2GXpS1I2_m9SupWrrXCcVcs3c83j-toht8VNOSY1qtUTbjdSohd8EEdYCJF_7upyYa2MubVy4BxOEPTzXUjB9ftsIWdgGcVlCMvOAjyIK46vMfGq4Y5v9a6ukA96j4rbqBJN/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="80" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwa3B-VQJH2GXpS1I2_m9SupWrrXCcVcs3c83j-toht8VNOSY1qtUTbjdSohd8EEdYCJF_7upyYa2MubVy4BxOEPTzXUjB9ftsIWdgGcVlCMvOAjyIK46vMfGq4Y5v9a6ukA96j4rbqBJN/s400/breadcrumb.gif" width="400" /></a></div><br />
<b>6. Comment bubble beside post title</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw19rknvS3F64abzNNjQDkO1lJWYg5Ya8K_anBOK6iIvQ8YZofchyphenhyphenN0hMRni9BqFI3MeGIKA-QB7hWnfnjErP4IMSDzorNlxuGY2NM18bgQYBUoxFX2l7xK5OFEPYpep-PWyVwpKr-NkKs/+buble.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="80" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw19rknvS3F64abzNNjQDkO1lJWYg5Ya8K_anBOK6iIvQ8YZofchyphenhyphenN0hMRni9BqFI3MeGIKA-QB7hWnfnjErP4IMSDzorNlxuGY2NM18bgQYBUoxFX2l7xK5OFEPYpep-PWyVwpKr-NkKs/s400/comment+buble.gif" width="400" /></a></div><br />
<b>7. Social Bookmarking Icons</b><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5llCLMHrxoUbcixZrlpdD12FOuUdlMG2e0_OMMePqDXR5uR7x8i9fS7O9GYxs_FRIdxbWDlcGxsXnlaVe27_nMsDJRzXkMIy4FLamKqBhAlPwyL4M4856dluuv-dF3DdmLZWTQQ3HhSAm/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5llCLMHrxoUbcixZrlpdD12FOuUdlMG2e0_OMMePqDXR5uR7x8i9fS7O9GYxs_FRIdxbWDlcGxsXnlaVe27_nMsDJRzXkMIy4FLamKqBhAlPwyL4M4856dluuv-dF3DdmLZWTQQ3HhSAm/s400/socialbookmark.gif" width="400" /></a></div><br />
<b>8. Navigation Bar</b><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj98QaHeF4h6n4IOWljYaUYGPywq_a2et2lB9zdqGBJrTzWceta_IhdbPBkL_IZnWc8GaJyhKCtaq5VQ3_rMU-dIzL_f-fy0s_kqlzY-9rf2YKqiuXANqeW6yfXtC6lT_EukSI1YkCfZpfT/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj98QaHeF4h6n4IOWljYaUYGPywq_a2et2lB9zdqGBJrTzWceta_IhdbPBkL_IZnWc8GaJyhKCtaq5VQ3_rMU-dIzL_f-fy0s_kqlzY-9rf2YKqiuXANqeW6yfXtC6lT_EukSI1YkCfZpfT/s400/navbar.gif" width="400" /></a></div><br />
<b> </b><br />
<br />
<b>9. 125 x 125 Ads slots</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaBBfLdLlnSvHd-E9SUwxB7YjT0__BFvySxcuASi2KZOBrCSJmsqpiOeJucNMqzcCBpWkYFIaRs4YqOsWh8ZMzEG5Y9j7G_LIgRb5j5y5UgUgQnokOb56TWXT4LBEHWGJsQ-nDWRjeCla8/+slot.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaBBfLdLlnSvHd-E9SUwxB7YjT0__BFvySxcuASi2KZOBrCSJmsqpiOeJucNMqzcCBpWkYFIaRs4YqOsWh8ZMzEG5Y9j7G_LIgRb5j5y5UgUgQnokOb56TWXT4LBEHWGJsQ-nDWRjeCla8/s320/ads+slot.gif" /></a></div><br />
<b>10. Blockquote </b><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT3UxAFP1a8UYUjBmDVA4W6laD0YGIPoKa2i031HI-R83G2qDMXxoe3Qfn27LCmJpD9hb5QOYMwwaeQOGV5mx9brHZwItuKvHNoej-6fmeeN06UiLGn7LvSeua9JfIsXxikk0vGRTFADZe/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="72" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT3UxAFP1a8UYUjBmDVA4W6laD0YGIPoKa2i031HI-R83G2qDMXxoe3Qfn27LCmJpD9hb5QOYMwwaeQOGV5mx9brHZwItuKvHNoej-6fmeeN06UiLGn7LvSeua9JfIsXxikk0vGRTFADZe/s400/blockquote.gif" width="400" /></a></div><b><br />
</b><br />
<b><br />
</b><br />
<b><span style="font-size: large;">Customizing the theme</span></b><br />
<br />
<b><span style="font-size: large;"><span style="font-size: small;">1. Navigation bar</span></span></b><br />
<br />
<div class="codelist"><ul class='topnav'><br />
<br />
<li><a class='home' expr:href='data:blog.homepageUrl'>Home</a></li><br />
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Posts RSS'>Posts RSS</a></li><br />
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;' title='Comments RSS'>Comments RSS</a></li><br />
<li><a href='http://introblogger.blogspot.com/' title='Free Blogging Guide'>Blogger Tutorials</a></li><br />
<li><a href='http://introblogger.blogspot.com/2009/12/contact.html' title='Free Blogging Guide'>Contact</a></li><br />
</ul></div><br />
<b><span style="font-size: large;"><span style="font-size: small;">2. Ads slot</span></span></b><br />
<br />
<div class="codelist"><div class='ads'><br />
<br />
<a href='#'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI5gAVZMa8ASNEnLQN9QVhDsLvPJsZc8uPiO81B0_NrVVvsdf-b1xA2GvKNsQPlnXgPQSsyWiTJ_9xu2_AMXoEbwwzfPeFJV5s97y08Gzr_ytDlIDUF2aSFhGpBqtlIOmg1TxT7BDwJD4d/'/></a><br />
<a href='#'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI5gAVZMa8ASNEnLQN9QVhDsLvPJsZc8uPiO81B0_NrVVvsdf-b1xA2GvKNsQPlnXgPQSsyWiTJ_9xu2_AMXoEbwwzfPeFJV5s97y08Gzr_ytDlIDUF2aSFhGpBqtlIOmg1TxT7BDwJD4d/'/></a><br />
<a href='#'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI5gAVZMa8ASNEnLQN9QVhDsLvPJsZc8uPiO81B0_NrVVvsdf-b1xA2GvKNsQPlnXgPQSsyWiTJ_9xu2_AMXoEbwwzfPeFJV5s97y08Gzr_ytDlIDUF2aSFhGpBqtlIOmg1TxT7BDwJD4d/'/></a><br />
<a href='#'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI5gAVZMa8ASNEnLQN9QVhDsLvPJsZc8uPiO81B0_NrVVvsdf-b1xA2GvKNsQPlnXgPQSsyWiTJ_9xu2_AMXoEbwwzfPeFJV5s97y08Gzr_ytDlIDUF2aSFhGpBqtlIOmg1TxT7BDwJD4d/'/></a><br />
<br />
</div></div><b><span style="font-size: large;"><span style="font-size: small;"> </span></span></b><br />
<br />
<b><span style="font-size: large;"><span style="font-size: small;">3. Mini Link above header</span></span></b><br />
<br />
<div class="codelist"><div id='minilink'> <br />
<p><br />
<a class='home' expr:href='data:blog.homepageUrl'>Home</a>|<br />
<a href='#'>About Us</a>|<br />
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Subscribe to RSS Feed'>RSS Feed</a>|<br />
<a href='#' title='Free Blogging Guide'>Contact</a>|<br />
<br />
</p><br />
<br />
</div></div><br />
<b><span style="font-size: large;"><span style="font-size: small;">4. Subcribe to Email and RSS below every post</span></span></b><br />
<br />
<div class="codelist"><div id='socials'><br />
<div id='subscribe-bottom'><br />
<span style='margin-right: 20px;'><a href='http://feeds.feedburner.com/introblogger'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2oq1L_ztbjjyGZAW-JdYuqsgParHZ96RWDVRRYYxOPR97axwnuonWoLdAcE5LdTAIHnN2gSYrepgRYwPMnatk4impRRL-PPYs3mRckynJB1rSqerVjgyWazU1PlAabF0DW01hVu8YDUs/'/></a></span><br />
<span><a href='http://feedburner.google.com/fb/a/mailverify?uri=introblogger&amp;loc=en_US'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7PkOy6FGiN8sGHkH0UlZ79loyth7tQzN07elMW1AEJmATsq6RQ0kqxZ2tnrJDe50zsI-YnkO8kJUZm-TuNBh4Nz_tkMlyeMxouIZ6U-nbU3wI_tcD99uahgiGqfI-4SMrG3nqZi8azqE/'/></a></span><br />
</div><br />
</div></div><br />
<b>5. Editing the tabbed sidebar</b><br />
<br />
Thanks to <a href="http://www.bloggertuts.com/">Bloggertuts</a> for the tabbed sidebar. You can read more about editing/ adding gadgets in it <a href="http://www.bloggertuts.com/2009/10/tabbed-sidebar-for-blogger.html">here</a>.<b> </b>Rethnaraj Rambabuhttp://www.blogger.com/profile/15863204708800295797noreply@blogger.com13tag:blogger.com,1999:blog-6722993789567734861.post-17703473602040714152010-03-07T11:33:00.003+08:002010-03-08T15:42:24.057+08:00Add new Google Re-Buzz/Buzrr Counter to your Blogger/Blogspot blog<div class="separator" style="clear: both; text-align: center;"></div><a href="http://introblogger.blogspot.com/2010/03/add-new-google-re-buzzbuzrr-counter-to.html" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="google re-buzz counter button for blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaujniBFk-_lC98Hxh8e6PUsuFF6m9fSUsHKziBBE_EsUMieg7M7ZDvbcoMj6WReI1Nj6gwlf6CS54DrOtBDvWdge3Npv1IYprPDxpMtxOuxXU7BVRK38rgTivOijSZsPUErYgkvJ6qh-0/s320/rebuzz.gif" /></a>Previously, I wrote a tutorial on adding <a href="http://introblogger.blogspot.com/2010/02/add-google-buzz-this-and-buzz-it.html">Google Buzz This button</a> and Buzz it button. In this post, I am going to introduce a new "Google Re-Buzz counter" button for your blog. It works like any other Digg Vote button or Twitter Retweet button. It counts how many times your posts have been shared in Google Buzz.<br />
<a name='more'></a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwMrN4YtZjYVAT4lksh5oyfKZsy_ONCwSNCx1O6ycgvVlQs24j8mtJsdiECbpws6-dwwFSPo0GhNJ26PEgclmVQJzJa7aDHM2Kw70MHl1KkKTE10JuTuT_Lc1Agn9V86z6E6l-4CUt1Fuw/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="google re-buzz counter button for blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwMrN4YtZjYVAT4lksh5oyfKZsy_ONCwSNCx1O6ycgvVlQs24j8mtJsdiECbpws6-dwwFSPo0GhNJ26PEgclmVQJzJa7aDHM2Kw70MHl1KkKTE10JuTuT_Lc1Agn9V86z6E6l-4CUt1Fuw/" /></a></div><br />
<b>How to add the Buzrr to your website or blog?</b><br />
<br />
To add this counter, log into <b>Blogger</b>. Then go to <b>Layout > Edit HTML</b> and check the " <b>Expand Widgets Template</b>" box. Now, search for this piece of code.<br />
<br />
<div class="codelist"><data:post.body/></div><br />
Immediately before the code above, paste the following code.<br />
<br />
<div class="codelist"><b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<div style="float: right; padding: 3px;"><script src="http://www.buzrr.com/button.js"></script></div><br />
</b:if> </div><br />
<span style="background-color: #cfe2f3;"><b:if cond='data:blog.pageType == &quot;item&quot;'>-----</b:if></span>. This piece of code will make sure that the Rebuzz button only visible in post pages and not home page. This is how it will look like in your blog post.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvu5Maq4t4kaVTwlskqAmJGtp8LCSPQD5NI6Nq4CvIi_4HJLiYdcRjSii8wquWlmSJvacA6Y2UOr1qUjOMNHN3XlkpVatvMpOGF_Nhi8lUMbfxulvYnNe7RTGDe79ilv8Aso8iTCa_XYbt/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="google re-buzz counter button" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvu5Maq4t4kaVTwlskqAmJGtp8LCSPQD5NI6Nq4CvIi_4HJLiYdcRjSii8wquWlmSJvacA6Y2UOr1qUjOMNHN3XlkpVatvMpOGF_Nhi8lUMbfxulvYnNe7RTGDe79ilv8Aso8iTCa_XYbt/" /></a></div>Rethnaraj Rambabuhttp://www.blogger.com/profile/15863204708800295797noreply@blogger.com9tag:blogger.com,1999:blog-6722993789567734861.post-37669446317587290062010-03-01T17:11:00.000+08:002010-03-01T17:19:49.802+08:00How to add Digg vote buttons for each post in Blogger?<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmoBUyAa2xrm-QS1JN9F6wmv1fkFavJzivunH1f0VUeFGhP1wuL-Ohm-gsU627hVrohRrRTkAPA1NyDhWNuqCjdu0YRI7jd-4wYewcu9DLDjneInbhOR_PgFQzgirRE9PmC11EUk_jRklO/s1600-h/digg-logo1242099134.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmoBUyAa2xrm-QS1JN9F6wmv1fkFavJzivunH1f0VUeFGhP1wuL-Ohm-gsU627hVrohRrRTkAPA1NyDhWNuqCjdu0YRI7jd-4wYewcu9DLDjneInbhOR_PgFQzgirRE9PmC11EUk_jRklO/s200/digg-logo1242099134.jpg" width="125" /></a></div>Social networking sites are really good resources to generate traffic to our site. And Digg which is one of the top social networking sites in the world is the best place to get a constant traffic to your site. By placing a Digg share buttons, you and your blog readers can share your blog contents in Digg. So, here is a simple and quick tutorial on adding Digg vote buttons for each post in Blogger. <br />
<a name='more'></a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7VJZof5Ps1Shk0SQx8Tkv0XyXVENCCO5Qvsax1gxqTDUXBtxbmA6OJj9sQb36blfIEMwQR5UdEQ-pfL3oJNZSEpkebTLIWNd6wP6Cn32p__KHKWuFOL4-sMVU46ibZvg47rZjma5I9wEW/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7VJZof5Ps1Shk0SQx8Tkv0XyXVENCCO5Qvsax1gxqTDUXBtxbmA6OJj9sQb36blfIEMwQR5UdEQ-pfL3oJNZSEpkebTLIWNd6wP6Cn32p__KHKWuFOL4-sMVU46ibZvg47rZjma5I9wEW/" /></a></div><br />
<br />
Open your <b>Blogger template</b> > <b>Backup</b> > Check the "<b>Expand Widget Templates</b>" box > Find for this line.<br />
<br />
<div class="codelist"><data:post.body/></div><br />
Paste the following code before the code stated above.<br />
<br />
<div class="codelist"><!-- DIGG --><br />
<div style='float:right; padding: 3px;'><br />
<script type='text/javascript'><br />
digg_url = '<data:post.url/>';<br />
</script><br />
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/><br />
</div><br />
<!-- DIGG --></div><br />
This is how it will look like in every blog posts.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoY0fqXV3bBFbmzDB3iSUiZSewolA4YQtz9Dt46C48qnNQDMnFjVrOkc-YOj1mZX706xGWUw_weogkrNpf2qKgdIlE-Oo2vr2UTCe0rzKNdpwg2W6ktXADLjwpFqiHcilBT2GcwvCNhWce/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="digg vote button for blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoY0fqXV3bBFbmzDB3iSUiZSewolA4YQtz9Dt46C48qnNQDMnFjVrOkc-YOj1mZX706xGWUw_weogkrNpf2qKgdIlE-Oo2vr2UTCe0rzKNdpwg2W6ktXADLjwpFqiHcilBT2GcwvCNhWce/" /></a></div><br />
And this is another type of Digg vote button. The Compact version. To add it, find for this code.<br />
<br />
<div class="codelist"><div class='post-header-line-1'></div><br />
And paste the code below after it.<br />
<br />
<div class="codelist"><!-- DIGG --><br />
<div style='float:right; margin-top:4px;'><br />
<script type='text/javascript'><br />
digg_url = "<data:post.url/>";<br />
digg_skin = "compact";<br />
digg_window = "new";<br />
</script><br />
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'></script><br />
</div><br />
<!-- DIGG --></div><br />
This is how it will look like in blog post.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidj9SzRmPDO2E4N2AiV09GutVCHEd78souiGXijqZVrHOgHbzBf1JhgmpaAa9txGluKNqQkm-EPb576mVLOUYqz0D3p34cTKHXo6qK1tPcCf-ZLOLCozJTU7jgPO3DPcJcRHoTtWmjKDXl/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="digg vote button compact blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidj9SzRmPDO2E4N2AiV09GutVCHEd78souiGXijqZVrHOgHbzBf1JhgmpaAa9txGluKNqQkm-EPb576mVLOUYqz0D3p34cTKHXo6qK1tPcCf-ZLOLCozJTU7jgPO3DPcJcRHoTtWmjKDXl/" /></a></div>Rethnaraj Rambabuhttp://www.blogger.com/profile/15863204708800295797noreply@blogger.com8tag:blogger.com,1999:blog-6722993789567734861.post-11937867205458540692010-02-23T16:57:00.001+08:002010-07-09T19:22:28.866+08:00Automatic Table of Contents or Sitemap Generator widget for Blogger blogs<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzhw89MecXBMnysu1TUzWajh0R7-kaeVB3VSEvY748DaWFxJYCOHoRX829PmOOJYzM7rcSS82jg1ddS7FVpQauoQzYDNvFH5M0edrsuf0gQ0SN2WhqN0nWbyOTPAK3JtzqoGqrwbUt4Wh1/" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Blogger sitemap generator" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzhw89MecXBMnysu1TUzWajh0R7-kaeVB3VSEvY748DaWFxJYCOHoRX829PmOOJYzM7rcSS82jg1ddS7FVpQauoQzYDNvFH5M0edrsuf0gQ0SN2WhqN0nWbyOTPAK3JtzqoGqrwbUt4Wh1/" /></a>Here is another great widget for Blogger powered blogs. Table of contents widget. This widget automatically generates a sitemap of your blog. With such sitemap, it is easier for your visitors to look at complete structure of your blog. This widget displays your blog posts according to their categories and "<b style="color: red;">New!!</b>" text is shown for the 10 latest posts. <br />
<br />
<a name='more'></a><br />
Although this functions like a sitemap, it cannot be submitted to Google Webmasters Tools. Because, Google webmaster tools just accepts sitemap in XML format. You can get detailed instruction on submitting sitemap to Google <a href="http://introblogger.blogspot.com/2010/01/how-to-submit-your-blogger-sitemap-to.html">here</a>.<br />
<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitFXcU6UMCQDaoi9ikQn4OBGJnp7TshlY2hpx_lrfj__L1Jy2UlIAqmQDJGT-W__rtXED0hAsxJ8XfToSqn1RSmRnxYJGHAWitBaJN2swmAWA95-nWsjEsOxCbYSEf1mUbWV7vFC37J7wG/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger Table of contents widget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitFXcU6UMCQDaoi9ikQn4OBGJnp7TshlY2hpx_lrfj__L1Jy2UlIAqmQDJGT-W__rtXED0hAsxJ8XfToSqn1RSmRnxYJGHAWitBaJN2swmAWA95-nWsjEsOxCbYSEf1mUbWV7vFC37J7wG/" /></a></div><br />
So, all you have to do now is just copy the code below and paste it into <a href="http://introblogger.blogspot.com/2010/02/fianlly-static-pages-feature-is-now.html">Blogger Static Pages</a> or any post pages. Then, publish it. You can see a demo of this widget in my <a href="http://introblogger.blogspot.com/2009/12/table-of-contents.html">Table of Contents</a> page.<br />
<br />
<div class="codelist"><script src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"><br />
</script><br />
<script src="http://introblogger.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"><br />
</script></div>Rethnaraj Rambabuhttp://www.blogger.com/profile/15863204708800295797noreply@blogger.com65tag:blogger.com,1999:blog-6722993789567734861.post-59307987180979393902010-02-22T16:39:00.002+08:002010-03-14T12:18:19.684+08:00Add Google "Buzz This" and "Buzz it" buttons to your Blogger blog<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQA0KL57Iz_0ZGh06mTgvqW367YH3xlFz7Irp0GXDXxytXsYlmzw51rO4mK_SEzVytCeSenPg_K7ogbzgLXL4y1Yf3Zms9vCZePiQKSkPysHmttGreYby0oa64sldfbqSLG5Af-Tn1b7TH/" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Google Buzz Button Tutorial for Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQA0KL57Iz_0ZGh06mTgvqW367YH3xlFz7Irp0GXDXxytXsYlmzw51rO4mK_SEzVytCeSenPg_K7ogbzgLXL4y1Yf3Zms9vCZePiQKSkPysHmttGreYby0oa64sldfbqSLG5Af-Tn1b7TH/s320/google.jpg" /></a>Recently, Google has launched it's new social media platform, Buzz. It is an extension to Gmail which enables you to share photos, links, videos, information and more with your contacts. Or simply can be said that Buzz is a mixture of Twitter, Facebook, Google Reader, Picasa and many other services.<br />
<a name='more'></a><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM_yhljBoP90uOc_8qYKqLSDYv7lgVx3QHovT2jx5t9lnNppuhUb37I3Dn8OIRDR7rgVn6Fg56nhwuQhOQSngl9QqTsBfWP-dMJLihzSYmkxfIRWwUCc2zeJB_QBWDfrOOrXlqmnNdPGM7/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="google_buzz_button_blogger_blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM_yhljBoP90uOc_8qYKqLSDYv7lgVx3QHovT2jx5t9lnNppuhUb37I3Dn8OIRDR7rgVn6Fg56nhwuQhOQSngl9QqTsBfWP-dMJLihzSYmkxfIRWwUCc2zeJB_QBWDfrOOrXlqmnNdPGM7/" /></a></div><br />
In this simple tutorial, I am going to teach you how to integrate a "Buzz This" buttons in your blog to share your blog posts on Google Reader. But, this is not an official button released by Google. It was created by <a href="http://twitter.com/andrewpbrett">Andrew Brett</a>, a Software Engineer at TechCrunch.<br />
<br />
First, log into <b>Blogger</b>. Then go to <b>Layout > Edit HTML</b> and check the " <b>Expand Widgets Template</b>" box. Now, search for this piece of code.<br />
<br />
<div class="codelist"><data:post.body/></div><br />
Immediately before the code above, paste the following code.<br />
<br />
<div class="codelist"><!--Buzz-Me-Code-Starts--><br />
<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' target='_blank'><div style='<b><span style="color: #351c75;">float:right</span></b>;padding: 3px;'><img alt='Buzz Me' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLkYOx031UD1I5iId0pPDCWgCCIo7zKf4-kAayIvpp62PUiNCI0craqAGW1s8MII3x0ZdImjaI2TCPNbFHStFTTaNrhBD7ftsDqM78yvpayykT2hanEH4kSfXezYobu8T2PJab6WDMlWXl/'/></div></a><br />
<!--Buzz-Me-Code-Ends-http://introblogger.blogspot.com--> </div><br />
<b>Update: For Classic Blogger Templates</b><br />
<br />
Go to Template > Edit HTML. Then, search for this code.<br />
<br />
<div class="codelist"><$BlogItemBody$></div><br />
Immediately before that code, paste the following code.<br />
<br />
<div class="codelist"><!--Buzz-Me-Code-Starts--><br />
<a href='http://www.google.com/reader/link?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>&srcTitle=<$BlogTitle$>' target='_blank'><div style='float:right;padding: 3px;'><img alt='Buzz Me' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLkYOx031UD1I5iId0pPDCWgCCIo7zKf4-kAayIvpp62PUiNCI0craqAGW1s8MII3x0ZdImjaI2TCPNbFHStFTTaNrhBD7ftsDqM78yvpayykT2hanEH4kSfXezYobu8T2PJab6WDMlWXl/'/></div></a><br />
<!--Buzz-Me-Code-Ends-http://introblogger.blogspot.com--></div><br />
It will look like this in your post. This button will float at the right side of your post. If you want it to float at left side all you have to do is just changing the "right" to "left" in bolded text in code above.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX2loSTU6isJhxCOTRwXyYV9YsjA-S0RVTBZ3fRKtRAyuNjz8yd17r64gr3FfA5ZmP9ogitMjSOm9i0PS3ul0B9sWvcczLoj8mlJctqZryukVm_UH2h1OFSKMYvDZ7xZOfa1fko08z39da/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="google_buzz_button_Blogger1" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX2loSTU6isJhxCOTRwXyYV9YsjA-S0RVTBZ3fRKtRAyuNjz8yd17r64gr3FfA5ZmP9ogitMjSOm9i0PS3ul0B9sWvcczLoj8mlJctqZryukVm_UH2h1OFSKMYvDZ7xZOfa1fko08z39da/" /></a></div>And this is another version of the "Buzz This" button, a "Buzz it" button. Search for this piece of code.<br />
<br />
<div class="codelist"><div class='post-header-line-1'></div><br />
Now, immediately before that code, paste the code shown below.<br />
<br />
<div class="codelist"><!--Buzz-Me-Code-Starts--><br />
<a style="float: right; padding-left: 19px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7TM0OltOpYR8JKWvbwU_WJBdMDdV1IMJKyIiXKV_x-SqWWV3zR6MHFFSlnzzAYtzKS6EqNwVS6dkzqQD27SlU3cxOaP00306j8xgQ8HDGtUtjxJlEzRKCqVCvhZ1SutFy0exRlVF_Aq0-/); background-repeat: no-repeat;" expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + "&amp;srcTitle=" + data:blog.title' target='_blank'> Buzz it</a><br />
<!--Buzz-Me-Code-Ends-http://introblogger.blogspot.com--> </div><br />
<b>Update: For Classic Blogger Templates</b><br />
<br />
Go to Template > Edit HTML. Then, search for this code.<br />
<br />
<div class="codelist"><$BlogItemTitle$></div><br />
Immediately after that code, paste the following code.<br />
<br />
<div class="codelist"><!--Buzz-Me-Code-Starts--><br />
<a style="float: right; padding-left: 19px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7TM0OltOpYR8JKWvbwU_WJBdMDdV1IMJKyIiXKV_x-SqWWV3zR6MHFFSlnzzAYtzKS6EqNwVS6dkzqQD27SlU3cxOaP00306j8xgQ8HDGtUtjxJlEzRKCqVCvhZ1SutFy0exRlVF_Aq0-/); background-repeat: no-repeat;" href='http://www.google.com/reader/link?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>&srcTitle=<$BlogTitle$>' target='_blank'> Buzz it</a><br />
<!--Buzz-Me-Code-Ends-http://introblogger.blogspot.com--></div><br />
This is how this button will look like in your blog.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9z50qFxeawW6WNY2i3xHpitOdJyXhlEZsCM5XQULA8epd4LEPOSGwO1fcZYZtxrrP0SRRNfUueADMDbR-qyWsnYBBbpQDEYwBAxKLFgdNITRgAnq4qjXdH0xv6JBp5bRIbs2FsKixiPh5/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="google buzz button Blogger2" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9z50qFxeawW6WNY2i3xHpitOdJyXhlEZsCM5XQULA8epd4LEPOSGwO1fcZYZtxrrP0SRRNfUueADMDbR-qyWsnYBBbpQDEYwBAxKLFgdNITRgAnq4qjXdH0xv6JBp5bRIbs2FsKixiPh5/" /></a></div>Rethnaraj Rambabuhttp://www.blogger.com/profile/15863204708800295797noreply@blogger.com73