Create basic AMP HTML blogspot Components from scratch

Institute It. Training | Kursus Komputer Jakarta Timur | WA. +628978298280 |

this is a little example, basic AMP HTML blogspot Components from scratch then let's do it together to proceed until the best amp html theme blogspot

This is, a very basic build, and cannot be declared valid yet, until there are other basic arrangements.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html amp='amp' lang="en">

<head>


<style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom='amp-custom'>

/*<![CDATA[*/
/*

@platform: Blogger
@theme_name:{{Your Theme Name}}
@created: Oct 2016
@last_mod: Oct 2016
@version: 1.0.0

*/
/* BROWSER RESETS - inspired by Denny Febiana Nurhidayat */
body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,
abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{
display: block;
}
blockquote, q{
quotes: none;
}
blockquote:before,
blockquote:after, q:before, q:after{
content:' ';
content: none;
}
table{
border-collapse: collapse;
border-spacing: 0;
}
/* TYPOGRAHY */
body{
font: normal normal 16px Helvetica, Arial, sans-serif;
line-height: 1.428;
color: #3b3b3b;
}
h1, h2, h3, h4, h5, h6{
font: normal normal 16px Helvetica, Arial, sans-serif;
line-height: 1.1;
color: #333;
margin-bottom: 10px;
}
h1{
font-size: 225%;
margin-top:20px;
margin-bottom:20px;
}
h2{
font-size: 200%;
margin-top:20px;
}
h3{
font-size: 150%;
margin-top:10px;
}
h4{
font-size: 125%;
margin-top:10px;
}
h5{
font-size: 100%;
margin-top:10px;
}
h6{
font-size: 80%;
margin-top:10px;
}
p{
margin-bottom: 10px;
}
a:link, a:visited{
text-decoration: none;
color: #06c;
}
b, strong{
font-weight:700;
}
.small, small{
font-size: 80%;
}
blockquote{
font: normal normal 16px Times New Roman, serif;
}
ul, ol{
padding-left:20px;
}

/*]]>*/
</style>


<script async='async' src='https://cdn.ampproject.org/v0.js'/>

</head>

<body>

<script type='text/javascript'>
window.setTimeout(function(){
document.body.className=document.body.className.replace('loading', '');
}, 10);
</script>
<b:section class='header' id='header' maxwidgets='' showaddelement='yes'/>

</body>

</html>

From :

How to Make a Basic AMP Page From Scratch

by Kezz Bracey11 Apr 2016

https://webdesign.tutsplus.com/tutorials/how-to-make-a-basic-amp-page-from-scratch--cms-26158

Boilerplate, very important, must be present in every AMP template

<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>First build AMP Page with Boilerplate</title>
<link rel="canonical" href="/index.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Make an AMP Page</h1>
</body>
</html>

Then the option to add some JSON metadata to the head section in Schema.org format like so:

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>

Add the following code to embed the image, above the h1 tags that are already in the HTML:

<amp-img src="images/header-background.jpg" width="2264" height="1504" layout="responsive" class="doc_header_bg"></amp-img>

Wrap the image with a div tag using the class doc_header

Add some <style amp-custom>...</style> tags to the head section so we can include some custom CSS. In between those tags add:

.doc_header {
height: 100vh;
background-color: #000;
overflow: hidden;
position: relative;
}

To fix this add the class doc_header_bg to your amp-img tag like this:

<amp-img src="images/header-background.jpg" width="2264" height="1504" layout="responsive" class="doc_header_bg"></amp-img>

To load these two fonts add this code to your head section:

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,400italic|Libre+Baskerville" rel="stylesheet" type="text/css">

We’re now going to add some text to our site cover area, to which we’ll apply our new web fonts. Inside the existing “doc_header” div, under the image, add a new div with the class doc_header_inner:

<div class="doc_header_inner">
</div>

Inside that div add the following code:

<h1 class="doc_header_title">Simulate Background Image Cover</h1>
<p class="doc_header_text">This is a basic page created to show you how to work with the <a href="https://ampproject.org/">AMP Project</a>. In this cover section the background image uses AMP loading optimization. The social icons below use AMP compliant custom font loading. Read on to see more ways to use AMP.</p>
<hr>

In order to load the font yourself you’ll first need to download the font files, which you can do at https://fortawesome.github.io/Font-Awesome/. Note you only need “Font Awesome”, not the extra “Fort Awesome” tools that are offered during download.

Once you have the Font Awesome zip file downloaded, extract it and copy the fonts folder it contains into your project folder.

To your CSS, add the following code:

/* Font Awesome */
@font-face {
font-family: 'FontAwesome';
src: url('fonts/fontawesome-webfont.eot?v=4.0.3');
src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-facebook:before {
content: "\f09a";
}
.fa-twitter:before {
content: "\f099";
}
.fa-google-plus:before {
content: "\f0d5";
}
.fa-linkedin:before {
content: "\f0e1";
}
.fa-instagram:before {
content: "\f16d";
}
.fa-dribbble:before {
content: "\f17d";
}
.fa-skype:before {
content: "\f17e";
}
/* /Font Awesome */

I recommend inserting the above code at the top of your custom CSS to help keep things organized. This code loads in our custom font files and creates classes that can be used to add font icons to a design–it’s the standard CSS provided for use by Font Awesome.

Then also add this CSS:

.doc_header_social {
margin: 1.5rem 0;
padding: 0;
font-size: 1.875rem;
text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, .8);
}
.doc_header_social li {
display: inline-block;
margin: 0 1rem;
padding: 0;
}
.doc_header_social li a {
color: #fff;
}
.doc_header_social li a:hover {
color: #11ABB0;
}

This extra CSS adds some styling specific to our template that we’ll use to setup a row of linked social icons.

Add this HTML after the <hr> inside the “doc_header_inner” div:

<ul class="doc_header_social">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#"><i class="fa fa-skype"></i></a></li>
</ul>

If you refresh your site now you should see a row of @font-face powered social icons along the bottom of the text we added earlier:

Now add the following to your custom CSS:

body {
font-family: 'Open Sans', sans-serif;
font-size: 1rem;
line-height: 2;
color: #838C95;
}
.doc_header_inner {
position: absolute;
width: 85vw;
max-width: 64rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding-bottom: 2rem;
text-align: center;
}
h1.doc_header_title {
font: bold 5.625rem/1.1em 'Open Sans', sans-serif;
color: #fff;
letter-spacing: -0.125rem;
margin: 0 auto 1rem auto;
text-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, .8);
}
@media (max-width: 35rem){
h1.doc_header_title {
font-size: 12vw;
}
}
p.doc_header_text {
font-family: 'Libre Baskerville';
line-height: 1.9;
color: #A8A8A8;
margin: 0 auto;
width: 70%;
text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, .5);
}
.doc_header_text span,
.doc_header_text a {
color: #fff;
}
.doc_header_inner hr {
width: 60%;
margin: 1.125rem auto 1.5rem auto;
border-color: #2F2D2E;
border-color: rgba(150, 150, 150, .1);
}

Integrate the amp-font Element

To help ensure visitors don’t end up seeing a broken site if custom fonts don’t load successfully, AMP provides the amp-font element to allow you to create fallbacks.

To make this element work the first thing you’ll need to do is load the AMP script that enables it. In your head section, add this code:

<script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>

Now with the amp-font element ready for use, we can have it add a class to the html or body tag if our font fails to load. Add this code to the bottom of your template, before the closing </body> tag:

<amp-font layout="nodisplay" font-family="FontAwesome" timeout="3000" on-error-add-class="font-awesome-missing"></amp-font>

Add a YouTube Video

Next up, we’re going to learn how to add a YouTube video the AMP way, but first we need to add a little housekeeping code to create a section for the video to sit in.

After the “doc_header” div, replace the existing h1 tags with this HTML:

<div class="video_wrap">
<div class="standard_width standard_padding">
<h2>Embed a YouTube Video</h2>
</div>
</div>

Then add this to your custom CSS:

.standard_width {
width: 100%;
max-width: 75rem;
margin-left: auto;
margin-right: auto;
}
.standard_padding {
box-sizing: border-box;
padding: 6rem 3rem;
}
.video_wrap {
background-color: #2B2B2B;
}

Tip: Dealing with the Box Model in AMP Pages

You might have noticed in the above CSS we set box-sizing: border-box; in the standard_padding class.

The reason for this is in AMP you can’t use the common technique of including * {box-sizing: border-box}, because the * selector is deemed too resource hungry. As such you’ll need to set box-sizing: border-box; for the specific elements you need it on, or just handle padding and borders the old fashioned way–with a calculator or counting on your fingers.

Integrate the amp-youtube Element

Now that the section is set up and ready for content, we’re going to add a YouTube video using AMP’s custom amp-youtube element. By using this element instead of standard YouTube embed code we can tap into loading optimization techniques similar to those of amp-img.

To begin with, you’ll need to add the AMP JavaScript required to enable the new element. In the head section, paste in:

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

Now add the following HTML inside the divs you just added, under the h2 tags:

<amp-youtube data-videoid="mGENRKrdoGY" layout="responsive" width="600" height="270"></amp-youtube>

To specify the video you want to load, set its YouTube ID on the attribute data-videoid. Other than this attribute, the amp-youtube element is much the same as the amp-img element.

We have the width and height set to 600 and 270 respectively. Just as with images, videos must have an initial width and height set.

We then use layout="responsive" so that the video will fit the size of its container, while keeping the aspect ratio drawn from its height and width settings.

Adding iframe Based Content

AMP has additional custom elements for loading content from specific sites, like amp-twitter, amp-instagram and a few more. For content from third party sites that don’t have their own dedicated AMP element, there’s the amp-iframe element instead. We’re now going to use this element to load a Google Map into our page.

Create a container for the map by adding this code below your “video_wrap” divs:

<div class="standard_width standard_padding">
<h2>Use iframe Embedding, e.g. Maps</h2>
</div>

Now, as with the amp-font and amp-youtube elements, we’ll need to load the AMP script that drives the amp-iframe element. Add this to your head section:

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

Next, inside your new div and under the h2 tags, add this code:

<amp-iframe width="1100" height="600" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" layout="responsive" frameborder="0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q=Alameda,%20CA"></amp-iframe>

Reload your site and you should see a Google Map now in place.

As well as optimizing loading, using the amp-iframe element helps to ensure that the content being viewed through the iframe doesn’t behave in unwanted ways, such as executing JavaScript that might cause slow loading or forcing popup ads. The sandbox attribute allows you determine what level of control you apply over iframe content.

For full details on amp-iframe and its “sandbox” controls, visit:

AMP Docs: amp-iframe

Setup an Image Gallery with Lightbox

One of the things that can feel limiting when working with AMP is the rule that no custom JavaScript is allowed. On the flip side though, there are custom elements included in AMP that aim to provide you with some of the functionality you might usually implement via custom JavaScript.

For example, instead of loading a custom lightbox script you can use the amp-image-lightbox element. We’re going to create an image gallery that uses this element now.

Start by creating a container for your gallery by adding this code right above your amp-font tag:

<div class="portfolio_wrap">
<div class="standard_width">
<div class="portfolio_inner clearfix">
<h2>Create a Gallery with Lightboxes</h2>
</div>
</div>
</div>

Also add this to your custom CSS:

.portfolio_wrap {
background-color: #ebeeee;
}
.portfolio_inner {
padding: 4rem 6rem;
}
.portfolio_item {
box-sizing: border-box;
float: left;
width: 25%;
text-align: center;
padding: 0.8rem;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}

Like our last few custom elements, we’ll need to load an AMP script to enable the amp-image-lightbox element. Add this to your head section:

This amp-image-lightbox element will create the actual lightbox display with the enlarged images inside it. We want to hide it until a user has clicked an image they want to enlarge, so we set it to layout="nodisplay".

Note: we have set the ID of this element to lightbox1.

To add an item to the gallery, add this div below the amp-image-lightbox element:

<div class="portfolio_item">
</div>

Then inside it add this amp-img code:

<amp-img on="tap:lightbox1" role="button" tabindex="0" src="images/portfolio/coffee.jpg" width="215" height="215" layout="responsive"></amp-img>

For the most part, this amp-image element is the same as the one we added earlier, however you’ll notice the addition of on="tap:lightbox1". This tells AMP that when the image is tapped/clicked, the larger version should be opened up in a lightbox with the id lightbox1, i.e. the amp-image-lightbox element we just created.

Add another seven images to the gallery with this code:

Berita Info

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Create basic AMP HTML blogspot Components from scratch

Berita Info

Advertisement

Popular Posts

Connected

Label

#IPA

Footer Link

Tag Cloud