17 Best Responsive Blogger Templates to Download for your Blog

As more and more people access the web using a wide array of mobile devices, webmasters can choose between a responsive design or a mobile site. For sites that are just getting started, a responsive layout is the way to go and is Google's recommendation for serving content to both, desktop and mobile users.

2013 is surely going to be the year where more and more sites move to a responsive layout. For blogger hosted blogs, a lot of free and premium responsive templates are already available and continue to be developed as the need increases. Here, I've listed some of the best free responsive templates for blogger that you can download for your sites and blogs.

1. Incipient Template:


Incipient is a fully widgetized free responsive template for Blogger, with a simple layout that adjusts to the size of your device's screen. It is fully customizable via the template Designer.


SourceDemo



2. Main Photo:


A neat and customizable responsive template. If you run a photography or gallery blog, this template may suite your needs.


SourceDemo



3. Chronicl:


A clean Blogger template adapted from WordPress. This responsive blogspot theme was converted by blogtipsntricks.



Demo
Download



4. Responsival:




Based on fluid designs that adjust to screen sizes up to 1400px wide, Responsival is a popular, super clean, minimalistic template by fiveforblogger.

Responsival Theme SourceDemo



5. Elite Minima:


Elite Minima brings pure minimal, responsive design with template designer support.


SourceDemo



6. JPSTATION:



SourceDemo



7. ExtraNews Blogger Template:


ExtraNews, as the name suggests is an ideal template for news and magazine blogs. It has a 2 column body, with 3 footer columns and 1 right sidebar. Comes in black, white, blue and grey colors and a top navigation menu.


SourceDemo



8. Sensational:


Sensational is a Responsive WordPress adapted blogger template. It features a three column layout with a very neat design, a responsive flex slider and more.


SourceDemo



9. DarkRed:


Unlike most simple white templates discussed here, DarkRed is a completely black template. It is ideal for gaming and movie sites.


SourceDemo



10. CopyBlogger v2:


CopyBlogger v2 one is by blogtipsntricks. It imitates the style of the famous copyblogger.com. Give your site a profession look by installing this template.


SourceDemo



11. Helicon:


Adapted from WordPress, Helicon is a free blogger template with 3 columns, fluid width, and a right sidebar and rounded corners.


SourceDemo



12. Pinfinity:


Pinfinity is an ideal responsive template for Photo blogs. It brings a Pinterest-like Look, Clean Design, Social Widget and a dropdown navigation Menu.


Pinfinity SourceDemo

13. Aware template:


Aware blogger template is suitable for technology, health, food, news and magazine style blogs. The area below the header features an automatically scrolling featured post slider.


SourceDemo


14. Exelencia template:


Some of the templates featured above are by ivytemplates, and so is this neat one called "exelencia". It has a magazine style layout and a sliding left sidebar.


SourceDemo



15. Adsosive template:


With leaf-like featured posts on homepages, sidebar and related posts, this is your template of choice for gardening and related blogs.


SourceDemo



16. Top Blogging Ideas Clone:


Topbloggingideas.com has an awesome template with a wide post body and a left sidebar. The template is quite similar to the old 2Plus blogger template. This one is an excellent clone of top blogging ideas developed by truebloggertricks. Visit the link below to learn more.



Template SourceDemo



17. Minimum Theme Blogger Template:


Minimum Theme is a WordPress adapted template that brings a minimalistic layout and brings some really nice features like a custom social profile, Opt-in Subscribe form, Custom button, threaded comment system and more.


SourceDemo
Read On
17 Comments
Labels: ,

Add Adsense In the Middle of Posts or Anywhere in Blogger Content

Ad placement and customization has been written and discussed much in the webosphere. In fact, a famous heat map detailing the ideal places for a higher click through rate (CTR) has been floating around for quite a few years now. Then, Google also has a dedicated help section outlining the best positions for ads on blogs, forums, and sites covering the news, classifieds and gaming.

For blogs, an ad unit somewhere in the middle of your post can potentially boost your CTR, especially if its a lengthy post with fewer images. Unfortunately, unlike WordPress which has a number of excellent plugins for injecting ads anywhere in your blog, blogger does not have this options.


But thanks to a simple JavaScript solution developed by adsinthemiddle, you can place your Adsense code within a post - anywhere.

Its worth noting that this method does not, by anyway violate the Adsense policies.

1. To Manually Display Ads In The Middle of Selective or Every Post:


Manually inserting Adsense ads in the middle of posts in blogger is pretty simple, here are two easy steps to do so:

  • Before proceeding, do backup your template as a precaution.

Step 1: On New Blogger (Post Designer Template):

Tick 'Expand Widget Templates' in Blogger console and find <data:post.body/>. Now, replace it with a parsed copy of the following code:

To parse your HTML, you can use this HTML Parse Tool.

<div expr:id='"aim1" + data:post.id'></div>

<div style="clear:both; margin:10px 0">

    <!-- Your adsense code here -->

</div>

<div expr:id='"aim2" + data:post.id'>

    <data:post.body/>

</div>

<script type="text/javascript">
var obj0=document.getElementById("aim1<data:post.id/>");
var obj1=document.getElementById("aim2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- adsense --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>

Note: In the above code, replace <!-- Your adsense code here --> with your actual Adsense code.

On Old Blogger (Pre-Designer Template):

Find the tag <$BlogItemBody$> and replace it with a parsed copy of the following code:

<div id="prv<$BlogItemNumber$>"></div>

    <div style="clear:both;margin:10px 0">

        <!-- Your AdSense code -->

    </div>

    <div id="fst<$BlogItemNumber$>">

        <$BlogItemBody$>

    </div>

    <script type="text/javascript">
    var obj0=document.getElementById("prv<$BlogItemNumber$>");
    var obj1=document.getElementById("fst<$BlogItemNumber$>");
    var s=obj1.innerHTML;
    var r=s.search(/\x3C!-- adsense --\x3E/igm);
    if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
    </script>

Note: Replace <!-- Your adsense code --> with your actual Adsense code.


Step 2:

Now, where ever you wan't your ad unit to appear, put a special comment:

<!-- adsense -->

Done.

2. Adding Featured Posts in the Middle (or anywhere) on your post.


Similarly, using the above code we can add a featured post in the middle of our content.
Earlier, I shared a simple blogger related posts widget. Using the above JavaScript, lets see how we can add that related widget posts in the middle of an article.

The idea remains the same. Just for differentiating, replace the word 'adsense' with 'related' in both, the JavaScript and special comment. Then place the related post code as in the code below:

For instance:

On New Blogger (Post Designer Template):

Tick 'Expand Widget Templates in the Blogger console and find <data:post.body/>. Now, replace it with a parsed copy of the following code:


<div expr:id='"aim1" + data:post.id'></div>

<div style="clear:both; margin:10px 0">



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
 <script type="text/javascript">
  relatedPostsWidget({
  'containerSelector':'div.post-body'
  ,'loadingText':'loading...'
 });</script>



</div>

<div expr:id='"aim2" + data:post.id'>

    <data:post.body/>

</div>

<script type="text/javascript">
var obj0=document.getElementById("aim1<data:post.id/>");
var obj1=document.getElementById("aim2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- related --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>

Step 2:

Now, wherever you want your related posts to appear, put a special comment:

<!-- related -->

Done!
Read On
0 Comments
Labels: ,

Simple Blogger Related Post Widget Without Thumbnails/Text Links Only

One of the best ways to keep your readers engaged with your blog is to link new posts directly to other related posts that you've previously written or by simply displaying featured or related posts at the end of your article.

To do this you've got the likes of linkwithin, outbrain and nRelate -- all good widgets available for just about any platform. Other than that, for blogger, there's hardly any script available that will properly show related posts at the end of your post (or any other place that you'd like).

If your looking to display text links only, Mike More's related post widget for blogger is the best and simplest you'll find. The script below is version 1.0. The latest version 2.0 can also display post thumbnails and offer plenty of customizations.

The Script: (Blogger Related Post Without Thumbnails):


Add a new Javascript/HTML widget and paste the following:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
   'containerSelector':'div.post-body'
   ,'loadingText':'loading...'
});</script>

Note: The widget uses post labels to display related post links. Your recent posts will show up instead, if labels are missing. Make sure you've defined them.

Here's how to add the codes if you prefer:
  1. From your blogger dashboard, click "Layout" on the left panel.
  2. Click "Add a gadget" and scroll down until you see HTML/JavaScript. Open it.
  3. Paste the above codes in the content area there. Save it.

That's it. Your related posts should show up at the bottom of your article. It should help you increase page views and in turn decrease bounce rates - Both positive SEO signals.
Read On
1 Comments
Labels: ,

Free Beautiful and Colorful Blogspot Templates to Download for Your Blog

Among the many benefits of Google's Blogger platform is the availability of a plethora of amazing free and paid templates by various talented and creative theme developers. Whether you're looking for profession design for your company, an eye catching design for your recipe blog or a dead simple layout to share about your daily life, you'll come across plenty of choices, both, free and paid.

For bloggers that fancy beautiful headers and backgrounds for there personal blogs, here are some of the best free colorful and attractive templates you'll find.

Scrapbook


A completely free premium blogger template adapted from WordPress. With a beautiful color scheme, this template has 2 columns and a right sidebar.



Craftwork


Craftwork is awesome light colored template with beautiful floral motifs and an integrated RSS feed link. Includes to columns and a right side bar.



Kesemutan


A free blogger template with colorful floral design on header and old paper texture on content background. This is a beautiful template great for personal blogs.



My Personal Diary


A very nice diary style design best for personal and design blogs. Includes 3 columns and a left side bar.



My Journal


Another excellent template for your personal blogs. My Journal includes a diary layout and a right side bar.



My Personal Desk


As the name suggests and from the background images, this beautiful template is suitable for personal travel or or gardening related blogs. Again a 3 column layout. Facebook, Twitter and RSS feed links integrated.



Art Template


Art Template is blogger template adapted from WordPress with 3 columns, left and right sidebars, fresh look, grunge style, and floral motifs. Its free.



Quality Time


Planning to start a blog where you can share your delicious recipes and travel experiences? Named Quality Time, this blogger template may be perfect for you. Includes a left sidebar and RSS feed integrated on right.



Mis Romances


Mis Romances blogger template is great for love and poetry related blogs. Comes with 2 columns, right sidebar, and floral motifs on background.



Read On
2 Comments
Labels: ,

Recover an Accidentally Deleted Post on Blogger

While it may take hours to write a lengthy and well thought out blog post, you never know when you accidentally hit the delete button while saving or modifying your work -- And Poof!, all your previous work is gone.

You my have lost a post that was in draft or a previously published one. Fortunately, in both cases you can still recover or retrieve the post that was deleted unintentionally. There are several ways to do so:


Recovering a Post in draft / Unpublished:


If your post was in draft and got deleted, you need to find its URL:
  • Depending on your browser, navigate to the your browser history and start looking for the link to the draft post.

Once you've found, you are most likely to retrieve it.

Recovering a published post:


If your post was published earlier, you have two places to look for:

    1. Search Engine Cache:

All popular search engines maintain the cache of indexed pages. To access the cache of your blog, enter the following and click the cache button right next to the results.

site:yourblogurl.com
For example: site:techmarshal.blogspot.com

    2. Blog Feeds:

If your blog publishes feeds, subscribe to your own feeds using Google Reader (google.com/reader) or any other similar feed readers and recover your post.

Good Luck!
Read On
1 Comments
Labels: ,

Use Your Own Search Box with Google Custom Search | Blogger

The accuracy of Google search and the ability to monetize your blog with it's flagship Adsense program are the two primary reasons one would replace blogger's default search with Google custom search. Other than that, adding a simple search box to blogger can do job for you. And its easier than 123. You can either add it from the 'Add a gadget' menu or grab the simple search form HTML code given after Step 7 below.

And as for the "Using your own search box with Google custom search" part, here are 7 easy steps you need to take.


Method:

Step 1. Visit google.com/cse and create a new search engine (If you don't already have it set).

Step 2. Navigate to 'Look and feel' on the left pane.

Step 3. Choose Results only layout and customize the style according to your liking.

Step 4. Now, Save and Get Code.

Step 5. Two code are displayed. Place the JavaScript code before the closing tag in your template. (Highlighted in red in Image below).



Step 6. Create a new page and name it "Search" (Without Quotes). Now paste the second code in HTML mode there and publish your page.

Step 7. Finally, add a new HTML/JavaScript gadget where you want to display your search box and paste the code below.

<form action="/p/search.html" class="clearfix">
<div>
<input class="search-input" name="q" placeholder="Search..." size="35" style="float: left;" type="search" /></div>
<div>
<input class="search-button" type="submit" value="Search" /></div>
</form>

Note: If you're using your own search box, just add the action="p/search.html" parameter.

There you go. Now you have your own search box integrated with Google CSE.
Read On
0 Comments
Labels:

Copy Videos from Chrome Cache [Location]

[Firefox and I.E users, jump to this page. This guide is for chrome only]

Chrome, like most other modern day browsers maintains a cache of the video or movie that you have watched online on YouTube, MetaCafe, Dailymotion, Vimeo or any other website and it can be retreived until you have the tab containing the video open. As soon as you close the tab or the browser itself, the video immediately gets deleted.

However, if you wish to re-watch it later on without having to stream the video again, you can easily copy it to some other location on your hard drive. Just make sure you don't close the tab after streaming the video. As of Dec 2012, Chrome maintains video cache in the following location:

C:\Users\<username>\AppData\Local\Google\Chrome\User Data\Default\Pepper Data\Shockwave Flash

Replace <username> by your windows account user name.


Now, just browse to the above mentioned location and copy the flaxxxx.tmp buffered video file to any other folder on your hard disk.

Note: Do not copy copyrighted content. Please comply with the terms of the site you've copied the video from.
Read On
2 Comments
Labels: ,

Sort YouTube Videos by Number of Views (view count) & Upload Date [How To]

Google, just days ago (Dec 6, 2012) rolled out a new YouTube interface yet again. Although this layout is cleaner than the previous one, however some important filters like view count, upload date, relevance and average rating have been dropped.

'View count', especially is one of the filters many would use when watching the most popular videos on a particular topic. If this latest change didn't really sit well with you, here are two ways you can still add the missing filters and sort search results by views, average ratings etc.



Method 1:

Add the following to the end of the URL in the address bar after you have for a topic:

To Search by Relevance (Default)

&search_sort=relevance

To Search by Average Rating

&search_sort=video_avg_rating

To Search by View Count

&search_sort=video_view_count

To Search by Upload Date

&search_sort=video_date_uploaded

Method 2: (For Chrome Browser and Firefox):

Simply Install the "Video Sorter for YouTube" extension on your Chrome Browser. The extension adds it's own filters right above the search results.

While Firefox users can get the "YouTube Legacy Sort Options" script to get the previous filter options back.
Read On
10 Comments
Labels: ,
Subscribe to: Posts (Atom)