-->
✕
›

How To Fix MagOne AMP Template

By Friday, February 9, 2018

Hello IB, For d first time i would like to show you, How To Fix MagOne AMP Template. Ther's No reason if i like this Template. Full Responsive, Customizable and many More. But with honestly this AMP Version of this template Not working well. Too much bugs and i will show you How to fix them all.

MagOne template is flexible and responsive magazine template for Blogger /  Blogspot websites. Drag and drop to built a magazine website in minute.

Do everything with your widgets

Just need set suitable parameters for your widgets and drag – drop them at any where you want. You can even force them display or not for certain pages / URLs, did you see any template support this?

Main Features:

  • Drag and Drop Widget Builder
  • Support AMP ( Bugs)
  • Flexible Menu Navigation
  • Responsive
  • Multiple Comment Systems
  • Custom Archive Page Designs
  • Custom Post Title Design
  • Support Sub Post Title
  • Smart Breadcrumb
  • Widgets Ready
  • Post Pagination
  • Fully Template Designer
  • Template Options
  • Multilingual Ready
  • Support Service
  • And Much More…

Lets Fix Any Bugs on MagOne AMP Features.

This Features ONLY WORK with Mobile and Article Post

1. activated your Sneeit Spot


Open Your Draft Blogger -->Thems-->EditURL.. On editorHTML Click SneeitSpot on addressBar

2. Activated AMP Feature on Sneeit Spot


Click Settings-->Mobile Templates--> Enable AMP for Mobile

After we activated AMP Feature on MagOne Template, we'll see thers too many issues with AMP Validator.


3. Removing Bugs In Line 4 (CSS_bundle_v2.css)
Search <head> and replaced With &lt;head&gt;
Search </head> and replaced with &lt;/head&gt;&lt;!--<head/>--&gt;
reload your Pages. and your Bugs in Line 4 has Gone.

4. FIX Your ALL Image Format with <amp-img>
Replace Your article with ALL Image format and replace with this Code

<amp-img alt="AMP" class="m1" height="268" layout="responsive" src="img.jpg" width="475">
  <noscript>
    <img src="img.jpg" width="475" height="268" alt="AMP"> 
  </noscript>
</amp-img>

YOU Have DONE !!!
Your MagOne template Pages are Full AMP Support


We need Related Post and Scroll To Top Amp Template

Created Related Post In Article MagOne AMP Template

1. Search this code <b:include name='amp-ads'/>
Replace This Code BELOW <div class='post-body'><data:post.body/></div>

<div id='related-post'><h4><span>Baca Juga</span></h4>&lt;amp-iframe src=&#39;https://cdn.rawgit.com/idekubagus/RelatedPost/28a7d40b/relatedpost.html?labels=<b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop>&amp;num=5&amp;url=https://idekubagus.blogspot.com/&#39; frameborder=&#39;0&#39; height=&#39;420&#39; layout=&#39;fixed-height&#39; sandbox=&#39;allow-scripts allow-same-origin allow-popups&#39;&gt;
&lt;/amp-iframe&gt;</div>

Replace The "URL" with your site URL.

2. CSS Code
Search <style amp-custom And Copy This Code Above </style>

/* CSS Related Posts */
#related-post {text-align:left;line-height: 1.3em;}
#related-post h4 {border-bottom: 2px solid #FF3D00;background: #FF3D00;padding: 8px 15px;position: relative;text-align: left;text-transform: uppercase;font-size: 18px;color: #fff;margin: 0 0 5px;overflow: hidden;}
#related-post h4::after{background-color: #FF3D00;top: 0;right: 0;padding: 7px 16px;position: absolute;background-size: 52px 33px;}

Reload Your Page, And related Post placed on Bottom your article

IF You want to See This example MagOne AMP Template, Just add ?m=1  in AddressBar (Mobile Version)

Related Posts:

Subscribe to: Post Comments (Atom)