Showing posts with label Blogger Templates. Show all posts
Showing posts with label Blogger Templates. Show all posts

AMP Blogger Templates - Advantages Vs. Disadvantages

amp-blogger-template-advantages-disadvantages

Do you want to implement Accelerated Mobile Pages (AMP) in Blogger? Or you would like to know the advantages and serious disadvantages of creating an AMP Blogger Template? If your answer is yes, then you have landed on the right page. Before making your site ready for AMP, please read why major companies have not yet adopted AMP.

IMPORTANT: All AMP Blogger Templates that you find online are not AMP at all!

What are Mobile Accelerated Pages (AMP)?

AMP HTML is an open source project by Google to provide mobile-optimized content that can load instantly everywhere. In short AMP makes your site load faster like a speeding bullet on smart phones but by sacrificing major portion of your advertisement revenue and third-party JavaScript.

Google started this project as competition to Apple News App and Facebook Instant articles.

FB instant articles is platform dependent, meaning your website get traffic from Facebook users alone and you can't provide the same bullet speed to your website visitors coming from search engines.

Same is the disadvantage with Apple News App where you can't publish your own content.

But AMP is platform independent, providing publishers to optimize content for mobile and make it accessible for all devices through a web browser. It has some advantages but several cons, which are worth noting before you opt-for AMP.

Following are some of AMP restrictions

  • Allow only asynchronous scripts
  • Size all resources statically
  • Don�t let extension mechanisms block rendering
  • Keep all third-party JavaScript out of the critical path
  • All CSS must be inline and size-bound less than 50,000 bytes
  • Font triggering must be efficient
  • Minimize style recalculations
  • Prioritize resource loading

Can you Implement AMP in Blogger?

Yes you can but partially!

Blogger team has officially not implemented AMP in Blogger blogs. Blogger XHTML templates currently do not support AMP HTML tags.

Designers who are implementing AMP in blogspot are forcibly removing important XML tags from the template which is not recommended and will seriously effect your blog in the long run.

This forcible action of making a blogger template AMP, is same as if you place a Mercedes engine inside a low budget car and expect it to drive fast. Yes the car could be forced to run the Mercedes engine but with no support to its best features. Thus wasting your entire effort!

You can surely create an AMP Blogger Template for your blogspot blog but by sacrificing several important features of Blogger and look of the template. AMP in short will convert your blog into an ugly Flat CSS/HTML design without allowing third-party fancy jQuery and JS effects.

amp-icon-in-search-results

AMP uses just some custom HTML tags that needs to be inserted inside your blogger theme to make it AMP validated. Once validated, Google will add the AMP icon next to your blogspot blog in search results. You can expect better traffic but by sacrificing ad revenue and blog look.

Difference Between AMP and Responsive Templates

AMP = Responsive Template + Custom HTML Tags

Before converting your template to AMP, it must be first made mobile responsive by adding CSS media queries and several breakpoints.

AMP is basically a much simplified/optimized version of your responsive template with addition of some custom HTML tags.

Just like your have a diet Pepsi Cola, you have a Diet HTML page today named as AMP.

Are AMP Templates Faster Than Responsive Templates?

Theoretically AMP Page must load faster than a normal responsive page but if a page is not coded properly than the same AMP page could load slower compared to a mobile responsive page.

Responsive Templates displays both the sidebar, footer and run all third-party JavaScript. Responsive blogger theme is simply a mobile compatible version of your desktop theme with almost the same features, widgets, plugins and other web elements.

In AMP Templates, you can't use a stylesheet greater than 50,000 bytes, you also can not use third-party widgets such as add-to-cart buttons or social media sharing buttons of your choice. AMP will convert your professional looking desktop look into a flat design with just the Logo, Menu, Post Body and footer.

When you sacrifice so much for load time, then of course, such a light weight AMP page will perform and load much faster compared to a responsive page.

Pros and Cons of AMP Blogger Templates

Following are important advantages and disadvantages of using AMP Blogger Templates:

Advantages Disadvantages
1. AMP templates load Faster

AMP pages load much faster compared to a responsive blogger template.
1. AMP Badly Effects Your Ad Revenue.

You won't make as much money as you were making with a full mobile website.
2. AMP templates Improves Ranking

AMP improved SERPs ranking and organic traffic The Washington Post by 23%
2. You Can Not Use JavaScript at all!

All those interactive widgets and plugins that make your blog look cool are not allowed. You have to use an off-the-shelf JavaScript library that Google provides you with.
You can however use the AMP iframe but it will be loaded slowly with a condition that the iframe must be at least 600px or 75% of the first viewport away from the top.
3. Your Blog pageviews would increase.

Blog Pages will load instantly thus providing a better user experience as far as speed is concerned.
3. You Can't use Blogger Comment Form.

You can however use either Facebook/Disqus/Google+ comment plugins instead but since the official comment form by Blogger uses iframe which can't be edited so it's not allowed.
4. AMP templates are best suited for news blogs. 4. You Can't Use Blogger Template Editor

You can't customize your template in Template Editor. <b:skin> tags and <b:template-skin> tags are removed or comment-out.
  5. All Images Posted Must Be Edited

You will need to edit <img> tags of all images inside your blog posts one by one with amp supported tag of <amp-img>. Which of course is time consuming in blogger if you have over 100 posts.
  6. You can't use Widgets in Sidebar

AMP does not allow third-party JavaScript. If you wish to use a widget that runs on JavaScript then you can't use it.
Some widgets available in layout section that uses text+image are supported only after their code is edited inside template section to make it compatible.
  7. You Can't Sell items on your Blog

The Add-to-Cart button is not allowed
  8. All Videos and Audios embedded inside Posts Must Be Edited

You will need to edit all your YouTube/Facebook/Vimeo videos, all your soundcloud audio clips through different embed tags as mentioned on this page.
  9. All iframe tags used inside Posts must be edited

You can display an iframe on your page only through the amp-iframe element.
  10. Email Subscription Form Can't Be Used

onclick, action, onsubmit, onfocus, onblur attributes are not allowed in AMP without which you can't possible create a subscription form for your blog readers unless you use an iframe.
  11. AMP supports limited Ad Networks.

BuySellAds does not currently support AMP. You will suffer greatly in BSA revenue if you go for AMP. At present only AdSense ads are properly supported.
  12. XMLNS attributes must be removed

xmlns attribute are added inside the opening <html> tag if your blog that gives important information to web browser about the web technology being used by your blog.

AMP asks you to remove all such attributes and add only the amp="amp" attribute.
Your blog will not be validated by http://w3.org if the xmlns attribute which specifies the xml namespace for a document is missing.

Do We Recommend AMP?

Honestly speaking AMP is not the best choice of all publishers. Even corporate news blogs like Washington Post and CNN who were using AMP previously and openly supported last year, seems reluctant to support it in 2017. You can clearly see AMP tags removed by these two sites and they no more support it.

AMP does speed up your site but on the expense of your Ad revenue and less freedom on customization. Without freedom of UI customization, no technology can survive.

An article by Wall Street Journal expressed serious concerns of publishers who did not find AMP very helpful in improving their ad revenue. Some even complained that an AMP page view currently generates around half as much revenue as a page view on their full mobile responsive websites.

Some publishers aren�t generating as much ad revenue as they had hoped - The Wall Street Journal

AMP is not a good option for Blogger platform at present because there is no official support present for it currently. Forcibly converting a templates code to AMP will only make it a headache for people not quite well versed with code tweaking.

I will recommend that you wait and let Blogger team provide a CMS support to implement AMP in Blogger themes. Just like Blogger provided support for https when we raised questions on how Blogger blogs will solve absolute image urls issue in https. 

MBT is currently mobile responsive and we won't opt for AMP unless a proper support is given officially by Blogger.

For Wordpress users, there is a plugin called AMP For Wordpress that you can use to convert your WP site into an AMP site, but as I mentioned, yes you will get a fast load time but at the expense of ad revenue and less freedom.

Please share your precious thoughts on this trending topic and let us know whether you like AMP or you would expect more improvement on it. If you are already using an AMP supported blogger theme, please share your experience with us. Peace buddies! =)

Emporio Blogger Theme - Grid Layout Template

Emporio Blogger Theme is an ideal blogger template for those who like a list of posts titles instead of long descriptions. If you want a grid layout then this template is a perfect choice. It displays a clean list of posts along with its thumbnail and small post description. It is clean and nicely design to support grid layout. Today in this article, we will tell you about Emporio Blogger Theme � Grid Layout Template.
Read more �

Soho Blogger Theme � Professional Gallery Template

Soho Blogger Theme is a new addition to Blogger�s official themes for blogger.com. It is simple, clean and efficient gallery built to showcase your latest photos, portfolio or designs. If you�re looking to start a portfolio blog on Blogger and looking for a much cleaner and professional gallery theme then Soho is just right for you. And the best thing is that, it is designed by Blogger engineers so it must be of top-notch quality. In this article, we will tell you about Soho Blogger Theme � Professional Gallery Template.
Read more �

Contempo Blogger Theme - New Responsive Lifestyle Template

Contempo Blogger Theme is a Responsive Lifestyle Blogger theme that is a new addition to Blogger�s official theme library. Which means this blogger theme is not from a third-party developer, it is created by developers at Blogger.com. If you love to write about adventures, stories or personal blogs then this new blogger theme is perfect for you. Today in this article, we will tell you about Contempo Blogger Theme, How to use, how to customize and etc.
Read more �

Viral Mag - A Multipurpose Responsive Blogger Template

Viral Mag Blogger Template
Are you looking for a simple, clean, responsive and multipurpose Blogger Template? You might have seen a lot of sites that write content on different things in a form of a list, i.e. Top 10, 15 Things and etc. These sites requires a robust template design that not only hold's their content together but also provide great advertisement areas to generate good revenue. Designing a template that not only looks great on all devices, has a great look and feel, provides great ads spots and is highly optimized for Search engines can be a frustrating job. Therefore, we decided to develop a Blogger template that is perfectly responsive, SEO friendly and ads friendly. Today in this article, we will share with you Viral Mag - a multipurpose responsive blogger template.

Read more �

MBT(My Blogger Tricks) Blogger Template V 2.0 download

Recently i have recieved mane emails regarding MBT templating, So here it is.MBT Blogger template V 2.0 is a professional template.This Template is a fantastic template for Blogging,and tech blogs.This template has 3 columns layout along with beautiful drop down menu.This Template is SEO Optimized template.MBT Blogger template V 2.0 is ads ready template.It has Automatic Read-more option,author box and social share widgets.This template works with all type of browsers such as Google Chrome,Mozilla and Internet Explorer etc.MBT Blogger template is a responsive Template with beautiful black color background which makes it more awesome template.
Template By MBT
mbt-blogger-template-v-2


Blogism Blogger Template

Blogism Blogger Template is design by a young Blogger Syed Faizan Ali (MBL Owner) from Pakistan,This Template is specially designed for Tech Bloggers .Blogism is ads ready template,it has One right sidebar and beautiful share buttons below the posts. Blogism Blogger Template has awesome header which makes it more beautiful Template.It has 2 columns layout.Blogism template has read-more option,it has author avatar with each post.This Template works with all type of Browsers such as Google Chrome,Mozilla Firefox and Internet Explorer ,Opera etc, AND MANY MORE FEATURES. Download it for freee and cheers!!!

Template By Templatism
Blogism Blogger Template Large Layout


Blogger Auto Video Template


Today i am sharing another blogger template for video based blogs.Hope you like it.....!

Rate this template:
 
 
 
 
 
 
31 Votes

Demo: Click here for Demo

Source And Designer: Author page

Click here to Download



Features:
  • Automatic thumbnail creation for Youtube videos.
  • A picture similar to the articles.
  • Custom fields gadget.
  • Simplified design.
  • Dailymotion, metacafe, vimeo, LiveLeak, YouTube, to automatically embed videos
Usage:

  • For videos from, Dailymotion, metacafe, vimeo, LiveLeak, add the endofvid tag to the end of the link. 
  • For the video description: place the [starttext] and [endtext] code to the beginning and end of description.

Example:
http://www.dailymotion.com/video/xmpjro_yntikamyn-bedeli-seeking-justice-vizyonda_shortfilmsendofvid
[starttext]
this is description
[endtext]

The thumbnails for these video services are not available. You'll have to add pictures manually.

Youtube videos: When you add the iframe code, it automatically creates a thumbnail. Instructions:When creating a post, switch to Edit HTML tab and paste the embed code of youtube video in the HTML box.
You don't need to add any pictures.


Other: If thumbnails don't appear, find and delete the ?rel=0 code at the end of youtube URL.

Twitter Blogger Template


Twitter Blogger Template
Template Name: Twitter Blogger Template
Platform: Blogger / Blogspot
Release date : 28, February 2013
Author : www.templateism.com
License : Creative Commons Attribution 3.0

Download Preview


Twitter Blogger Template is inspired from world�s first micro blogging website Twitter.com. Though, this theme is not a replica of Twitter.com but still it has a touch which would convert your Blogger blog into a robust social networking website. The color combination of light blue and place gives it an elegant touch. Since, this theme is inspired from Twitter. Therefore, we have also attached twitter Tweet button. This Theme is extremely efficient and sober which makes it standout from other templates. It has some built-in extra-ordinary features like Numbered page navigation, floating header, and much more.




Twitter Blogger Template

Features of Twitter Blogger Template:

  1. Floating Header Bar: It has a sleek and stylish black floating header bar that consists of a Small LOGO, Navigation menu and a search bar. It floats along your screen whenever scroll up or down the page.

  2. Numbered Page Navigation: We have installed Number page navigation plugin in this theme which automatically overrides Older/Newer post buttons. It reduces bounce rate and improves user engagement.

  3. SEO-Friendly: We have also installed an SEO Plugin in this template, which would surely help you to increase your organic traffic in quick succession. Though, the plugin is not FREE, but it is sponsored by MyBloggerLab.com. Therefore, it is free only for this theme.

  4. Custom CSS3 Label: Among the few prominent features, we have also added a magnificent CSS3 Label cloud in this theme which would surely catch some extra attention. 
More Features: Twitter Look, Web 2.0, Magazine Style, light blue and black color Scheme, threaded commenting system, and much more.

How to Customize Floating Menu?

Go To Blogger.com >> Template >> Edit HTML >> Proceed. Now search for the following coding in the template. After finding it Replace # with your URLs and Save the template.
<ul class='art-hmenu'>
<li><a class='active' href='#' title='Home'>Home</a></li>
<li><a href='#' title='About the theme'>About the theme</a></li>
<li><a href='#' title='Buy Theme'>Buy Theme</a></li>
<li><a href='#' title='Plugins'>Plugins</a></li>
<li><a href='#' title='Help'>Help</a></li>
<li><a href='#' title='Contact'>Contact</a></li>
</ul>

ENJOY.......!

Download nice Blogger Template Geeks Gadget


Geeks Gadget Blogger Template
Template Name: Geeks Gadget Template
Platform: Blogger / Blogspot
Release date : 08, March 2013
Author : www.templateism.com
License : Creative Commons Attribution 3.0

Download Preview


Geeks Gadget is an efficient and magnificent template for blogger users. This theme is designed with such practices that your users would think twice whether it is a Blogger Template, or not because it has all the elements just like WordPress Themes. This template is ideal for those websites which running a Gadget niche blog including multimedia, technology and etc. The color combination of White, Lime blue, and gray makes this theme adorable.  It is a crystal clear theme with some robust features few of them are listed below.


Geeks Gadget Blogger Template

Features of Geeks Gadget Blogger Template:

  1. Floating Header Bar: It has a shiny and fashionable lime blue floating header bar that consists of a Small LOGO on the left side and a navigation menu on the right. It floats along your screen whenever scroll up or down the page.
  2. Featured Advertisement Spots: By default, there are three featured advertisements spots one below the header, second above posts, and the third below posts. However, anyone can add more Ads spots as per their needs. We have chosen some High CPC spots so this theme could double your earning potentials. 
  3. SEO-Friendly: We have also connected an SEO Plugin in this template, which would surely help you to increase your organic traffic in quick succession. This plugin is sponsored by MyBloggerLab.com. 
  4. Social Sharing Buttons: We have also added some social sharing buttons so that your users can easily share your content on their favorite social networking platform. Social buttons appears just below the post title of every article. 
  5. Fixed Wrapper: The Layout of this theme is fixed so it would support both low and high resolution laptops, and monitors. It would also work well on Mobile devices and Tablet.
More Features: Web 2.0, Magazine Style, lime blue and white color Scheme, threaded commenting system, custom label wrapper, two Colum�s footer, and much more

How to Customize Floating Menu?

Go To Blogger.com >> Template >> Edit HTML >> Proceed. Now search for the following coding in the template. After finding it Replace # with your URLs and Save the template.
<ul class='right'>
<li><a class='current' href='#'>Home</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>About</a></li><li>
<a href='#'>Services</a></li>
<li><a class='lasst' href='#'>Contact</a>
</li>
</ul>