Blogger Templates & Tutorials

Blogger Most Viewed / Popular Posts Widget

2008-10-24T01:52:00.000-07:00

Select Layout > Page Elements > Add a Gadget > HTML/JavaScript

Copy & paste below code:


<script type="text/javascript">
start_views_num = 1;
limit = 5;
</script>
<script src="http://h41r3z4n.googlepages.com/MostViewed.js" type="text/javascript">
</script>

If you want to remove blog title, find below code

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

replace with

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

Blogger Recent Comments Widget

2008-08-29T01:19:00.000-07:00

Select Layout > Page Elements > Add a Gadget > HTML/JavaScript

Copy & paste below code:


<script style="text/javascript" src="http://h41r3z4n.googlepages.com
/recentcomments.js">
</script>
<script style="text/javascript">
var a_rc=5;
var m_rc=false;
var n_rc=false;
var o_rc=100;
</script>
<script src="http://yourblog.blogspot.com/feeds/comments/default?alt=json-in-script
&callback=showrecentcomments">
</script>

* yourblog need to be change

Blogger Recent Posts Widget

2008-08-08T00:33:00.000-07:00

Select Layout > Page Elements > Add a Gadget > HTML/JavaScript

Copy & paste below code:


<script style="text/javascript" src="http://h41r3z4n.googlepages.com
/recentposts.js">
</script>
<script style="text/javascript">
var numposts = 5;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = false;
</script>
<script src="http://yourblog.blogspot.com/feeds/posts/default?orderby=published&
alt=json-in-script&callback=showrecentposts">
</script>

* yourblog need to be change

Print Blogger Post Only aka Printer friendly

2008-07-13T22:17:00.000-07:00

Select Layout > Edit HTML > Edit Template

Copy below code before </head>


<style media='print' type='text/css'>
#navbar-iframe {display:none ; height:0px;visibility:hidden;}
.noprint {display: none;}
body {background:fff; color:000;}
a {text-decoration: underline; color:00f;}
}
</style>

Put <span class='noprint'>... </span> code where you don't want to print, e.g sidebar


<span class='noprint'>


</span>

or in the blog post content

Select Posting > Edit Posts


<span class='noprint'>

Content that you don't want to print


</span>

Put below code in your post content (print link)


<span class='noprint'>
<div align="right"><a href="javascript:window.print()">Print</a></div>
</span>

Add Blogger Search Box

2008-07-05T22:51:00.000-07:00

Select Layout > Page Elements > Add a Gadget > HTML/JavaScript

Simple:


<form id="searchthis" action="/search"
style="display:inline;" method="get">
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form>

Advance:


<form id="searchthis" action="/search"
style="display:inline;" method="get">
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" type="image" src="imageurl" align="top"/>
</form>

* imageurl need to be change

Create Expandable Post Summaries aka Read More...

2008-06-16T02:10:00.000-07:00

Step 1:

1. Select Layout > Edit HTML > Edit Template.
2. Tick on Expand Widget Templates.
3. Search for below code.


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

4. Delete above code & replace with:


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

5. Save Template

Step 2:

1. Select Posting > Edit Html
2. Put the content that you want to include in the read more between <span class="fullpost"> </span> tags:


<span class="fullpost">

Put here

</span>

3. Publish Post

How to hide or remove navbar

2008-04-09T21:49:00.000-07:00

There are many methods to hide or remove navbar.

Select Layout > Edit HTML > Edit Template
Put below code after

<b:skin><![CDATA[

Remove navbar


.navbar {
visibility:hidden;
display: none;
}

Hide navbar


#navbar-iframe {
display: none !important;
}

Then, Save & View your blog