Creating Follow By Email In Blog Valid AMP

In the previous post Blog-Seo has been discussing about how to make popular posts blogger "valid AMP".

Due to Seo-friendly reasons many bloggers who switch to AMP templates such as Blog-Seo also use this AMP template. But like Blog-Seo explain in the previous post, such as adding widgets that can not be done by adding widgets in the layout.

And this time will Blog-Seo share about how to add widget Follow By Email in blog valid AMP, below tutorial create widget "Follow By Email" valid AMP.

The cause of AMP template invalid

To create a widget blog valid AMP we only need to change some error code to find out the error code in the AMP template can be checked in AMP-Test
See the picture below :

In the picture we can see that the template "Invalid amp", is caused because there is some error code. And to overcome these errors we can edit the error code so that the valid AMP.

How to create a follow-email widget on the blog valid AMP

With the above explanation I think you already understand why the template is not valid AMP. We continue our discussion on how to create a valid "follow by email" widget AMP below:

First. To make it easier you can add widget "follow by email" by way of "add widget" as usual. In this way we can more easily to see the position where the widget places it.

Second. Put the following css code to modify the look of the widget "follow by email"

div#FollowByEmail1{border:1px solid #dedede;background:#fff;border-radius:3px;padding:10px;width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#FollowByEmail1 h2{font-family:Roboto,sans-serif;font-size:18px;font-weight:300;text-transform:capitalize;color:#666;margin-bottom:15px;padding:0;line-height:1em}
#FollowByEmail1 p{font-family:Roboto,sans-serif;font-size:14px;font-weight:300;text-transform:capitalize;color:#666;margin-top:15px;padding:0;line-height:1em}
#FollowByEmail1 table{width:100%}
#FollowByEmail1 table td:nth-child(1){width:80%}
#FollowByEmail1 table td:nth-child(2){width:20%}
.FollowByEmail .follow-by-email-inner .follow-by-email-address{background:#efefef;width:100%;height:44px;padding:0 10px;font-family:Roboto,sans-serif;font-size:14px;border:0;outline:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit{height:44px;font-family:Roboto,sans-serif;text-transform:uppercase;border-radius:0;padding:0 10px;width:100%;font-size:14px;background:#dd5d24;border:0;outline:0;cursor:pointer;color:#fff;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

Third. Delete all widget code "follow by email" then replace with code below:

          <b:widget id='FollowByEmail1' locked='false' title='Get FREE Updates in Your Inbox' type='FollowByEmail' version='1' visible='true'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if>
  <div class='widget-content'>
    <div class='follow-by-email-inner'>
      <form expr:action='&quot;https://feedburner.google.com/fb/a/mailverify?uri=&quot; + data:feedPath' method='get' target='_blank'>
        <table>
          <tr>
            <td>
              <input class='follow-by-email-address' name='email' placeholder='Your Email Address...' title='Your Email Address' type='text'/>
            </td>
            <td>
              <input class='follow-by-email-submit' type='submit' value='Submit'/>
            </td>
          </tr>
        </table>
        <input expr:value='data:feedPath' name='uri' type='hidden'/>
        <input name='loc' type='hidden' value='en_US'/>
      </form>
      <p>Submit Your Email Address to Get FREE Our Latest Products Directly in Your Inbox</p>
    </div>
  </div>
</b:includable>
  </b:widget>

Last save your template.

Actually we can just by changing some code that error in AMP HTML but maybe it will be more difficult. This is the easy way to stay "Copas" instantly.

Tags: