Tech Marshal

"The Journalist" is a simple blogger template built on the bootstrap framework. It features a fully responsive two column layout that adjusts perfectly to all screen sizes.
This quick loading theme is free and comes pre-installed with a simple text-based related posts and social sharing widget. It is ideal for journalists, writers and bloggers alike.


DemoDownload

Profile Box

To add details about yourself in the Profile box on the sidebar, find the following code in the template and replace the information in blue with relevant details about yourself.

<div class='profile-box'>

<!-- Insert Link of your Profile Pic -->
<img class='img-responsive pimg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Ar27ciiJvp48sxWOTsAFpqZeTSd0oF5YEepKEUU_NYNjBzY3nRPznihZwtfObn1gtYD84aVLZN22KZynnbf4OWeJbdShIca1DkGPi-LQKobIJxogtuh8awzjyDNoAJxcS5wMb19DQ1Q/s320/default-avatar.png'/>

<!-- Add Name Here -->
<h4>Wajahat Razzaq</h4>

<!-- A line About Yourself -->
<span>Writer, journalist and a budding academic. I write for the Huffington post.</span>

</div>

Social Links

Link the social icons in the sidebar to your social profiles by modifying the following code in your template. Simply change the code in blue with relevant links to your social accounts.

<div class="contact-box">

<a href="mailto:wajahat-xyz123@gmail.com?Subject=Hey!" target="_top">
<i class="fa fa-envelope-o" rel="tooltip" title="wajahat-xyz123@gmail.com"></i>
</a>

<a href="https://twitter.com/wajahat-xyz" target="_blank">
<i class="fa fa-twitter"></i>
</a>

<a href="https://facebook.com/wajahat-xyz" target="_blank">
<i class="fa fa-facebook"></i>
</a>

<a href="https://plus.google.com/wajahat-xyz" target="_blank">
<i class="fa fa-google-plus"></i>
</a>

<a href="https://youtube.com/wajahat-xyz" target="_blank">
<i class="fa fa-youtube-play" rel="tooltip" title="YouTube"></i>
</a>

</div>

Thats it! Please let us know of any anomalies / layout problems that you may find in the template.

With more people now surfing the web with mobile devices, it is becoming increasingly important that your website has a layout that adjusts to multiple screen sizes.

We've previously shared some of the best free responsive templates available for blogger here and here. As more excellent themes are now available for your blogger based blog, here are some select new ones that you can download for free.

Xmax

Xmax is a multi-purpose one page Blogger template. It is specially great for your portfolio or company product site.

DemoDownload

BTNT

A decent minimalist responsive blogger theme.. It is ads-ready and comes with pre-installed popular posts and recommended posts widget.

DemoDownload

Hola

Another Clean, adsense ready responsive template with a right sidebar.

DemoDownload

Linzo

An incredibly neat theme with the post thumbnails displayed on the homepage right below the post title. Features a right sidebar loaded with email subscription widget, popular posts widget and social media icons.

DemoDownload

Camly

Blogger theme with a nice responsive layout and wide sidebar on the right. It also features an optin form that rolls down when you click the plus sign below the header.

DemoDownload

Ravia

Responsive Magazine-style blogger template with featured post area below the header on homepage. It also comes with built-in popular post widget.

DemoDownload

Wizz

A Responsive, fast-loading theme featuring a 3 column layout.

Demo

HelperTricks v1

Clean theme with a single sidebar floated right. This theme is great for technology blogs.

DemoDownload

RealMag

100% Responsive, fluid-width template with a magazine-style layout. You can use it for almost every niche you may cover.

DemoDownload

Journal

Journal is a perfect Blogger template for those who love to travel and blog. It has grid layout with fluid responsive display. It features a left sidebar.

DemoDownload

Personal Mag

Personal Mag - is a clean responsive Blogger blog theme. If you are looking for a pinterest style blogger theme, personal mag may do the job for you.

DemoDownload

Awesome Mag

Awesome Mag Blogger Template is fully responsive, 3 column template that can be used for a portfolio, magazine, personal blog or a list based site.

DemoDownload

There are literally tons of ways to get your images noticed on Pinterest. The most discussed and recommended way is to use longer length, attention grabbing images. With the right method used, you'll be able to get more re-pins, more likes and drive more traffic to your site in return.

Since, for most users, getting visitors from Pinterest to our own web pages is the primary reason for using this incredibly popular social media site, there's no reason not to try every trick in the book to make our pins more engaging.

A lot of shared content on Pinterest has the title displayed of the webpage from where the content is actually pinned from, the prices of products, rating from sites covering movies and a lot of other useful information. This makes your pins even more appealing, more informative.


Pinterest introduced this feature as 'Rich Pins'. And it isn't reserved for select sites. You too can enable this feature to display the post title, prices, recipes, movie ratings and more and reap the benefits associated with it. The only condition is that you should be using Pinterest as a business account. If you are a blogger, you can convert your account type to business here: business.pinterest.com/en/

How to Apply For Rich Pins on Pinterest

Pinterest has a detailed guide on applying for Rich Pins here.

1. Once you have your account type set to business, decide what kind of Rich Pin you want to apply for:

• Product Pins
• Place Pins
• Movie Pins
• Article Pins
• Recipe Pins

2. Next use oEmbed or Semantic Markup (Schema.org or Open Graph templates) to mark the relevant tags in your templates (prices, article title, movie ratings, recipes etc) as detailed in the links above.

3. Once properly marked, visit the Rich Pins Validator and enter the URL of a post from your site. Hit Validate. It should say that your pin has been validated.


4. Finally, click the 'Apply Now' button to apply for Rich Pins to be enabled for your account. Once approved, it will show a message notifying you about the approval.

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

NotePlus Template is a beautiful, free and fast loading blogger template build using Bootstrap. It features a 2 column layout with the sidebar on the right.



Details

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

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:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

2. First post:
For targeting the first post on multi-post pages.

<b:if cond='data:post.isFirstPost'>

3. Specific page/URL:

<b:if cond='data:blog.url == "ENTER_URL_HERE"'>

4. Posts (item):

<b:if cond='data:blog.pageType == "item"'>

5. Static pages:

<b:if cond='data:blog.pageType == "static_page"'>

6. Index pages (includes homepage, label pages and archive pages):

<b:if cond='data:blog.pageType == "index"'>

7. Archive pages:

<b:if cond='data:blog.pageType == "archive"'>

8. Posts and static pages:

<b:if cond='data:blog.url == data:post.url'>

9. Label-search pages:

<b:if cond='data:blog.searchLabel'>

10. 404 Error Page:

<b:if cond='data:blog.pageType == "ERROR_PAGE"'>

11. Mobile Pages:

<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: " != ".

Reversing a Condition:

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.

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

<b:include data="post" name="post">

4. Add the following code just below the code above

<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>

5. 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.

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.

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

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. 3Columns Template:

3Columns is a fully responsive free Blogger template with a simple design that adjusts to the size of your device's screen. As the name implies, the template features a three column layout with the post area in the center.


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