Setting Features / Widgets Blogger Template From Main-Blogger.com

Yesterday, we have posted general setting Blogger template from Main-Blogger.com. It's a basic setting. And now, general setting features/widgets Blogger template form us. As a Blogger template maker, we have a default features codes for recent posts with thumbnail, recent comments with thumbnail, custom search form, and banner ads 125*125px. Even default but style sometimes different.

Please note : Images below only to describe and the styles is not exactly same with the pictures. It's depends each Blogger template.

Table of content General setting features :

1. Recent posts with thumbnail.
2. Recent comments with thumbnail.
3. Custom search form.
4. Banner ads 125*125px

1. Recent Posts With Thumbnail

By default, we set only for 5 latest posts. To add recent posts with thumbnail, copy and paste this code below into widget.

<script src='/feeds/posts/default?alt=json-in-script&callback=showrecentposts' type='text/javascript'></script>

Note :
We have added default thumbnail for posts without image.

2. Recent Comments With Thumbnail

By default, we set only for 5 latest comments. To add recent posts with thumbnail, copy and paste this code below into widget.

<script src='/feeds/comments/default?orderby=published&alt=json-in-script&callback=showrecentcomments'></script>

3. Custom Search Form

We try to make a Blogger template that support a most user features/widgets. One of them is Search form. Basically, you can use a default Search Form widget but we think, more useful if we add a custom search form. To add a custom search form, just copy and paste this code below into widget.

<form action='/search' class='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == "") {this.value = "Search";}' onfocus='if (this.value == "Search") {this.value = ""}' type='text' value='Search'/>
<button class='searchsubmit'><i class='fa fa-search'></i></button>
</form>

Note :
If you want to use search form from Google Search CSE, just copy and paste code for search box into widget. For code search results, it will posted in a post itself.

4. Ads 125*125px

Advertising is a thing that can not be separated from a blog. We try to make a Blogger template that support about this, include banner ads 125*125px. To add this ads size, just copy and paste this code below into widget.

<ul class='ads'>
  <li><a href="LINK_HERE"><img alt="IMG_ALT" src="IMAGE_LINK_HERE"/></a></li>
  <li><a href="LINK_HERE"><img alt="IMG_ALT" src="IMAGE_LINK_HERE"/></a></li>
  <li><a href="LINK_HERE"><img alt="IMG_ALT" src="IMAGE_LINK_HERE"/></a></li>
  <li><a href="LINK_HERE"><img alt="IMG_ALT" src="IMAGE_LINK_HERE"/></a></li>
</ul>

Note :
- LINK_HERE : link
- IMAGE_LINK_HERE : image link
- IMG_ALT : ALT image

How about if format ads 125*125px different??
When you joined a media advertising such as Google Adsense, you will get ad code as a script. Format code should be like this below.

<ul class='ads'>
  <li>SCRIPT_AD_HERE</li>
  <li>SCRIPT_AD_HERE</li>
  <li>SCRIPT_AD_HERE</li>
  <li>SCRIPT_AD_HERE</li>
</ul>

Dont forget to check general setting Blogger template. That post related with this post.