Top Responsive Blogger Templates 2014 You Can Download for Free

Responsive themes and templates allow users to build websites and blogs that look great on any mobile device. These themes are designed to resize and adjust properly to all standard mobile device screen sizes (PCs, Tablets and Mobile Phones). Given the high demand of responsive design, more and more developers are dedicated on developing such templates.

Here are a number of excellent new templates that you can download for free in 2014 if you're just starting on a blog or moving your existing site to a responsive design:

Portfolio Blog


Portfolio Blog: As the name suggests, this is a portfolio style template with an elegant and clean design powered by the Isotope jQuery plugin. It features a full width layout with no sidebars and supports 4 widget sections in the footer.


Demo / Download

Blog Safari


A clean magazine style theme with a fluid width/responsive layout designed to adjust well on all screen sizes. It comes with pre-installed Blogger Comments and Google+ Comments system which you can use alternately. An author bio box is displayed at the end of every post - A feature preferred for multi-authored blogs.



Demo / Download

Gadget Mag


Gadget Mag is magazine style blogger template with a Responsive design that adjusts well on all common screen sizes. It features a 3 column layout with powered with jQuery and CSS3. It comes with plenty of pre-installed widgets including thumbnail based featured and popular posts.



Demo / Download

Perk Misty


Perk Misty is another excellent responsive blogger theme ideal for News/Magazine sites, portfolio and even your personal blog. It features a 3 column layout and comes with a pre-installed, customizable recent post widget. Apart from that, the template is totally Adsense ready.



Demo / Download

Docorus


Docorus is pretty-much adapted from the Hueman theme available for wordpress. It features a 3 column, full width, responsive magazine-style design. Docurus pre-includes related, popular post widgets, author bio box and and image slider on the homepage. No matter which niche you're covering, this is a great template you can have.



Demo / Download

Foodie


Foodie, as the name suggests is intended for use on blogs covering food recipies, cooking tips ets. This is yet another theme with a magazine style design. Like all other templates here, it adjusts to all major screen sizes (desktop, pads and mobile phones) and is SEO friendly.



Demo / Download

Enpine


Enpine is a large width template with no sidebar on the home page, the post pages feature a right sidebar with a pre-installed popular post plugin. The template comes with a sticky header for easy navigation. An author box linked to your Google+ account is displayed at the end of every post pages.



Demo / Download

Plazify


Plazify is a fully responsive, quick loading magazine-style theme with two sidebars on the right and includes a slider on the homepage. It is available as both, free and paid. However, the free version does not allow for any customization.



Demo / Download

Sleekify


Sleekify, another cool magazine theme with a sleek look. It features a two column layout with a right sidebar. A $19.99 paid version of theme allows for customization, footer credit removal and support.



Demo / Download

BlackPress


Blackpress by Templateify is a 100% responsive portfolio-style template for your blogspot blogs. It is retina ready and offers is a super clean look with a two column (Right-sidebar) layout. The template is free for use, however if you need to customize it, there is a $19.99 licensed version just for that.



Demo / Download

Portify


If you are looking for a clean, minimalistic blogger template with a responsive layout, Portify is one amazing template you can consider. It features a left sidebar and a widget area on the top. Like all other tempelateify themes covered here, a $19.99 version of this theme allows for customization.



Demo / Download

Wedding Magazine


Wedding Magazine by 'Templateism' features a very clean magazine style design with large image banner on the homepage. Its a 2 column theme with 4 a column footer. The theme is 100% responsive and adjusts well on all screen sizes. Pre-includes related and popular post widgets.



Demo / Download

Gagism


If you intend to run a gag, meme or any image site on blogspot, Gagism by Tempelateism is the best theme you'll find. It features related items below every post, rating system, social buttons and lots of other goodies. Plus there is a Re-blog Button that allows your visitors to share your gags on their blogs while giving a backlink to your site. This will make your gag go viral across different blogs.



Demo / Download

Droid Pluss


Simple, elegant and 100% responsive. Droid Pluss is the perfect choice for a technology blog or news site. The theme includes a colored sidebar on the right, related post plugin, social sharing buttons and more.



Demo / Download

Belastic


Belastic is another nicely designed template for desktop and all mobile devices. It offers unlimited color schemes, thumbnail based post summaries, drop down navigation menu, social sharing widget and more.



Demo / Download

Arvo


Arvo is a two column theme with a grey background. Its a fast loading, SEO optimized blogger theme with couple of handy pre-installed widgets and offers easy customization.



Demo / Download
Read On

Display Code On Your Blog With Highlight.js & Prettify (Syntax Highlighters)

Syntax highlighting helps improve the readability of the code that you display on your webpages and makes the code standout from the rest of the text. A number of excellent Syntax Highlighters are available online for free. Google code project “Prettify” and "Highlight" are two excellent, lightweight code highlighters which you can use on your blog. Both include support for the most commonly used languages.

Using Prettify


The Prettify script is hosted on Google, so you don't even need to host it on your end. Simply add the following code before the closing </head> tag in your template:
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js">
Marking code sections:

Now whenever you display code on your page, simply enclose it in <pre>...</pre>, <code>...</code> or <xmp>...</xmp> tags with a class of "prettyprint". Here's an example:
<code class="prettyprint">
...YOUR_CODE_HERE...
</code>
Selecting Styles:

If you don't like the default skin, there are 4 other styles you can choose from (Available here):
<script codearea2="" src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css&amp;skin=SKIN_NAME></script>
To select a different skin, change SKIN_NAME in the code above with the actual skin name. Available skins include: doxy, sons-of-obsidian, sunburst and desert.

Using Highlight.js


Just like Prettify, highlight.js is another great syntax highlighter for the web that you can use to make your code look beautiful. Plus, it offers a lot of styles to choose from. To use highlight.js, add the following code before the closing </head> tag in your template.
<link href="http://yandex.st/highlightjs/8.0/styles/default.min.css" rel="stylesheet"></link>
<script src="http://yandex.st/highlightjs/8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoadundefined);</script>
Marking code sections:

Using the code above will highlight all code you display within
tags in your post
<pre><code>
...
</code></pre>


Selecting Styles:

You can select from 44 different styles. For available style names look into the highlight.js styles directory (don't forget to add ".min" before ".css").

Once you have selected a style, here's how you can apply it to the code:

<link href="http://yandex.st/highlightjs/8.0/styles/ascetic.min.css" rel="stylesheet" type="text/css"></link>

That's it! Your code should now look neat and standout from the text.
Read On

Free Embeddable Forums for Blogger & How to Embed These Forums

Its always great to have a forum on your website. Forums offer visitors to return, interact, have discussions on topics of their interest and help each other - hence a great platform for building an online community. And in return, boost the overall value of the site.

For users of blogger, there are only a couple of free options available for adding a forum to the site.

Nabble:


Nabble.com, available both in free and paid versions, offers a really simple forum with a neat layout and lots of useful option. Embedding it to your blogger/blogspot site is easy:

  1. Go to Nabble.com, click 'start a new forum' and fill in the details. Verify your account.
  2. Create sub-forums by going to Options > Structure > Create New Sub-Forum (Make sure you're logged in).
  3. Now for embedding, head over to Options > Embedding options.
  4. Copy the JavaScript code.
  5. Finally, create a new page on your blog and paste the JavaScript code you copied in step 4 and paste it into the HTML editor mode there.
  6. Publish your page.
That's it. You now have Nabble forum running on your blog.

Tal.ki:


Tal.ki by Lefora has been available for quite some time now. Like Nabble, it is also available as free and paid. The paid $5 version comes with no restrictions. However the free version is limited to 15 recent topics and 5 sub-forums. Tal.ki offers a seriously simple way of adding a forum to your website. Just paste the provided code to your page and suddenly the site has a fully functional forum embedded right there. You can load login with your Facebook, Google, blogger and a number of other accounts. The first person to login will become the admin.



Google Groups Forum


If you still have an active online community on Google Groups Forum, you can easily embed the forum on your blog. Simply head over to the HTML editor and add the following code:

<iframe frameborder="0" height="700" width="100%" id="forum_embed" scrolling="no" src="https://groups.google.com/forum/embed/?place=forum/NAME_OF_FORUM#!forum/NAME_OF_FORUM">

Be sure to replace the 'NAME_OF_FORUM' with your actual forum's name on both places.
Read On

About Blogger Conditional Tags and How To Use Them Properly

Conditional tags provide us better control over our templates, allowing us to specify what part of our template appears only under certain conditions.

You may wish to hide a widget or element on one page and display it on the other, need to remove the sidebar on certain pages, or even display buttons on select pages. This is exactly where conditional tags come into play. There are a number of tags available for blogger which, if applied correctly, will help you modify elements of your template.

List of conditional tags

The following are a select few conditional tags you'll require the most:
  1. Homepage:
  2. <b:if cond='data:blog.url == data:blog.homepageUrl'>
  3. First post:
  4. For targeting the first post on multi-post pages.
    <b:if cond='data:post.isFirstPost'>
  5. Specific page/URL:
  6. <b:if cond='data:blog.url == "ENTER_URL_HERE"'>
  7. Posts (item):
  8. <b:if cond='data:blog.pageType == "item"'>
  9. Static pages:
  10. <b:if cond='data:blog.pageType == "static_page"'>
  11. Index pages (includes homepage, label pages and archive pages):
  12. <b:if cond='data:blog.pageType == "index"'>
  13. Archive pages:
  14. <b:if cond='data:blog.pageType == "archive"'>
  15. Posts and static pages:
  16. <b:if cond='data:blog.url == data:post.url'>
  17. Label-search pages:
  18. <b:if cond='data:blog.searchLabel'>
  19. 404 Error Page:
  20. <b:if cond='data:blog.pageType == "ERROR_PAGE"'>
  21. Mobile Pages:
  22. <b:if cond='data:blog.pageType == "data:blog.isMobile"'>

How to Use conditional tags


Using conditional tags is simple. Each tag needs to be closed with a closing </b:if> tag. All you have to do is select the suitable tag and place the content between the opening and the closing tag like this:
<b:if cond='THE_CONDITION_GOES_HERE'>
...
</b:if>
For Example:
You need to display the content only on Index Pages (homepage, archives and labels page). The following tag will be applied:
<b:if cond='data:blog.pageType == "index"'>
...ENTER CONTENT HERE...
</b:if>
The double equals " == " actually means TRUE. You can change the condition to FALSE, then just replace the first equal with an exclamation sign: " != ".

For Example:
<b:if cond='data:blog.pageType != "index"'>
... THE CONTENT ...
</b:if>
In the example above, the content will show up on all pages other than "index" pages.

The ELSE Statement <b:else/>:

In case you need to display alternate content, insert a <b:else/> tag like this:
<b:if cond='data:blog.pageType == "index"'>
...Content 1...
<b:else/>
...Content 2...
</b:if>
In the example above "Content 1" will only appear on Index Pages (homepage, archives and labels page), and if its not an Index Page, "Content 2" will be displayed.

Combining Conditions Together:

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.url != "URL_OF_POST_TO_EXEMPT"'>
...ENTER CONTENT HERE...
</b:if>
</b:if>
Finally, in the example above, the content will show up on all posts except a certain URL/Post specified.
Read On

How to Add Adsense Ads After First Post On Blogger Homepage

Displaying Adsense or other ads on blogger is as simple as adding it to WordPress or other blogging platforms. You just copy and paste the code on to the template. But adding it precisely where and how you wan't it can sometimes be tricky and may not display as desired. This is exactly where blogger conditional tags come in handy. They provide us better control over our widgets and other elements.

Among the several conditional tags available for blogger, one is specifically written to target the first post - a good position for displaying ads. And here's how you too can insert Adsense after the first post on your blogger blog:

The Steps:
  1. Login to Blogger Dashboard
  2. Go to Template > Edit HTML
  3. Find this line of code in your template
  4. <b:include data="post" name="post">
    
  5. Add the following code just below the code above
  6. <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <b:if cond='data:post.isFirstPost'>
    
    ---- Replace this line with your Adsense Code -----
    </b:if> </b:if>
  7. Finally grab a suitable Adsense unit, parse it and add it to the code above

That's it. You can now monitor the newly added ad unit for clicks.
Read On

Fix the "Blogger Images Not Uploading" Problem

Blogger offers a simple option for adding images to your posts. One can simply click the image icon above the post editor and choose from the various options to insert an image or upload it from the system itself. Occasionally one may experience problems with the uploading of images which may be due to one of several reasons. I too recently have had problems uploading images to this blog and got it working after deleting my cache. If you too are having this problem, here are couple of things you should try in this case:

Clear Browser's Cache:
Start by clearing your browser's cache. Many browser related problems including pages that freeze, don't finish loading, or contain old content can be fixed by clearing your cache.

Disable Plugins:
Disable any Plugins/Extensions on your browser. Plugins may cause incompatibilities with the post editor.

Enable Popups:
Enable popup on your browser or add an exception to blogger.com on your popup blocker. Sometimes popup blockers will prevent the image upload window from appearing.

Enable 3rd Party Cookies:
Make sure all 3rd Party Cookies are enabled in your browser.

Restart your browser:
Once you have tried the above three steps, you may also wan't to try and restart your browser.

Try a different browser:
Sometimes changing your browser may do the job for you. If you are using Chrome, try Firefox, IE or Opera.
Read On

33 Best Free Blogger Templates With Image Slider

Image sliders are great for corporate sites that display the company's services, sites promoting a particular product or service and even for blogs that display featured content. Among the many templates that come integrated with sliders here are some of the very best ones that you'll find for blogger.

Backlight:

DemoDownload

Read On

21 Best Free Clean White Blogger Templates To Download

While many of us like fancy colored and bright templates, there are others that like plain and clean minimalist designs, especially when running a personal blog. The following templates are some of the best templates available for blogger that you can download for your blogs. Most of these are two column simple templates with minimalist designs.

1. BorneoBooks:


BorneoBooks template developed by Borneo Templates, is a plain white blogger template with no sidebar.


DemoDownload

2. MBL Avada:


Avada is the hottest selling wordpress template on Themeforest. MBL Avada is a clean wordpress converted blogger template that mimics the look of the original avada template. Features a two column layout with a right sidebar.


DemoDownload

3. Dazzling:


Dazzling is a neat, Adsense ready, full width magazine style template developed by 'Templateism'. Pre-includes a thumbnail based related post widget.


DemoDownload

4. Super Clean:


Super clean is an ideal blogger theme for business sites. It features a slider on home page.


DemoDownload

5. Galauness:


Another great template for those eager for a clean, elegant, and minimalist look. It features a magazine style template and comes with a two column layout with a left sidebar on posts.


DemoDownload

6. Lock Heart:


Lock Heart is a neat, two column template. It features minimalist layout with a left sidebar.


DemoDownload

7. LUGAS:


A clean and full width blogger with magazine style layout for home page. It features a right sidebar and integrated recommended post widget below pages.


DemoDownload

8. Google Plus:


As the name suggest, this template imitated the Google Plus layout as it was released initially. The template has a three column layout with the post area in the center and sidebars on both sides and available across the site.


DemoDownload

9. Prosume:


Promuse is a responsive, clean white template by 'New Blogger Themes'. It features a two column design with the sidebar on the left.


DemoDownload

10. Alluring:


Alluring is another 2 column theme with a neat look.


DemoDownload

11. Personal:


Personal is a plain white and black template with a minimalist design. It does not include any sidebar.


DemoDownload

12. Bright:


Bright is one of the neatest template you'll come across for blogger. It is somewhat similar to the twenty twelve WordPress template.


DemoDownload

13. Rubal Saggu:


Rubal Saggu is a unique template designed by 'creativebloggingideas'. It features a multicolored right sidebar accessible accross the site.


Demo/Download

14. Classic:


Another simple blogger theme with the sidebar on the left. This template is designed by 'Dzignine'.


DemoDownload

15. Esquire:


A timeline style elegant and bold theme converted from WordPress to blogger.


DemoDownload

16. Simple Clean White:


Appropriately named, this theme features a neat and clean Adsense ready design with a right sidebar.


DemoDownload

17. QUO Template:


Yet another clean 2 column black and white template.


DemoDownload

18. Portfolio:


Lovely Portfolio is a neat magazine style template for blogger with a right sidebar. It is ideal for portfolios and photography blogs.


DemoDownload

19. Queen:


Queen is a magazine style, single column theme with no sidebar. If you are running a photography or portfolio site, this one could be ideal for you.


DemoDownload

20. Super SEO:


Super SEO by 'Lovely Templates' is yet another neat two column theme with integrated related post and social share widgets.


DemoDownload

21. Yaminth:


Yaminth blogger theme comes with a featured post slider on homepage. It features a two column layout with right sidebar.


DemoDownload
Read On