CURIOUS, WHAT IS AMP MOBILE STYLE (wordpress, google blogger,)
AMP BLOGGER, cara ngeblog dimasa depan?
If you want to follow this post in Bahasa Indonesia, just by clicking the link: PANASARAN BANGET, APAKAH GOOGLE AMP ITU? - translation by Ivlay Fus
For many, reading on the mobile web is a slow, clunky and frustrating experience - but it doesn’t have to be that way. The Accelerated Mobile Pages (AMP) Project is an open source initiative that embodies the vision that publishers can create mobile optimized content once and have it load instantly everywhere.
What is Google AMP?
What's the difference for me between classic HTML and AMP?
The most discenrable differnece is the fact that you arenotallowed to use any javascript except for the modules provided by Google AMP and you arenotallowed to use any external css stylesheet except for Google Fonts.
Your pages are PHP. I cannot test them locally. What now?
PHP pages require a local server setup such as WAMP or uploading your items to a server for testing. The fact that our pages are PHP doesn't imply any complicated code, just the fact that we found a GREAT way to make it a billion times easier for you to alter the styles, which, normally, would require you to have them inline, making any css change a nightmare.
You say no external stylesheet... But you're using an external style.Css
That is half right. You see, adding all the CSS inline would cause a massive headache for you as a user to edit each individual HTML to change just one style section. We used a read / write function of PHP ( that's why, the pages are .Php but they are basically HTML ) . This function allows us to use an external stylesheet BUT it's actuallty internal. When the halaman loads, the CSS gets added inside the halaman, making it inline and thus AMP Valid
How can I check if my laman is AMP Valid?
That's very simple. Let's say the page you are editing is index.php. Therefore your testing link will be http://awesomebuyer.com/mobile/index.php . In order to check if the page is valid, all you have to do is add #development=1 at the end of your link, open the console, and hit refresh. You'll see a message in your console stating that the page is AMP Valid if the code is correct. More on this here: https://www.ampproject.org/docs/guides/validate
What can't I use as CSS?
As is, AMP is a bit limited, but it's a growing project, so writing whta's permited now, may not be the case in a month or two. Therefore, we suggest you follow this laman
https://www.Ampproject.Org/docs/guides/responsive/style_pages
And keep an eye out for any changes in the future.
https://ampbyexample.Com/
NOTE
1. Installing a Script
After you find a script you like and want to use, you'll have to import the provided JS file in the head of the item where the scripts are present, only then can you use the provided HTML structures. Not doing so will result in a failed validation
2. Using AMP-Features Pages
All the components we used can be found on ampbyexample.Com and much more, with exact tutorials and examples. Be sure to check that halaman out and check out the modules we used.
https://www.ampproject.org/docs/guides/responsive/control_layout
Header The header is comprised of 3 elements. A button that activates the sidebar (this must be a button as per amp settings )
The logo you can change on style.css line 264
The last icon, we chose as a contact icon, but you can add whatever you wish to this mix.
Sidebar This is the basic sidebar structure. The content gets added inside.
Sidebar Header The sidebar header is comprised by the 5 icons present at the top. Replace each with what you require but leave the last one there for closing the sidebar.
Sidebar Logo The sidebar logo you can replace on line 469.
Sidebar Divider A separator with text you can use to divide between menu elements
Simple Sidebar Menu Item This will create a simple sidebar menu item. No dropdown, no effect.
Submenu Sidebar Menu Item Any submenu must be added in the structure presented above. The amp-accordion will allow the submenu to open and close. The section will house the menu elements and addingexpanded to it will make the menu expanded by default.
Every item inside is a simple menu item added to a list element.
Creating Page Paddings
To create a padding left and right simply add your elements inside the <div class="content"></div>
Why are these important?
Google AMP is all about reusing elements and using as little style as possible to allow us to keep the size small .Therefore, secondary classes for background colors, margins and borders makes the style as small as possible, while not enlarging the style either
Available Secondary Classes
Backgrounds, Borders and Colors
You can select any color, border, or background color for elements by adding any of the following secondary classes to them.
bg-teal-light
bg-teal-dark
border-teal-light
border-teal-dark
color-teal-light
color-teal-dark
bg-green-light
bg-green-dark
border-green-light
border-green-dark
color-green-light
color-green-dark
bg-blue-light
bg-blue-dark
border-blue-light
border-blue-dark
color-blue-light
color-blue-dark
bg-magenta-light
bg-magenta-dark
border-magenta-light
border-magenta-dark
color-magenta-light
color-magenta-dark
bg-night-light
bg-night-dark
border-night-light
border-night-dark
color-night-light
color-night-dark
bg-yellow-light
bg-yellow-dark
border-yellow-light
border-yellow-dark
color-yellow-light
color-yellow-dark
bg-orange-light
bg-orange-dark
border-orange-light
border-orange-dark
color-orange-light
color-orange-dark
bg-red-light
bg-red-dark
border-red-light
border-red-dark
color-red-light
color-red-dark
bg-pink-light
bg-pink-dark
border-pink-light
border-pink-dark
color-pink-light
color-pink-dark
bg-gray-light
bg-gray-dark
border-gray-light
border-gray-dark
color-gray-light
color-gray-dark
bg-white
color-white
border-white
bg-black
color-black
border-black
Social Backgrounds
facebook-bg
linkedin-bg
twitter-bg
google-bg
whatsapp-bg
pinterest-bg
sms-bg
mail-bg
dribbble-bg
tumblr-bg
reddit-bg
youtube-bg
phone-bg
skype-bg
Social Colors
facebook-color
linkedin-color
twitter-color
google-color
whatsapp-color
pinterest-color
sms-color
mail-color
dribbble-color
tumblr-color
reddit-color
youtube-color
phone-color
skype-color
Font Options
You can also change parameters for fonts, thiner, smaller, bolder, and more. Just add any class to a text element from the ones below.
ultrathin
thin
thiner
boder
bold
ultrabold
capitalize
italic
small-text
center-text
right-text
uppercase
boxed-text
Box Properties
Margins can also be used enlarged for certain elements by using the following secondary classes.
.container{margin-bottom:30px}
.full-bottom{margin-bottom:25px}
.no-bottom{margin-bottom:0px}
.full-top{margin-top:25px}
.half-bottom{margin-bottom:15px}
.half-top{margin-top:15px}
.quarter-bottom{margin-bottom:15px}
.hidden{display:none}
Buttons
Buttons are easy to use. You add the class button and then the secondary class for the color you wish to use. Icons
Icons are also easy to use. The have an icon, a property, and a color.
1.Be sure your page is AMP Valid! If it's not valid the contact form will not send messages
2.Be sure to contact your hosting provider andREQUEST that they set your PHP settings to this Without these settings the contact form WILL NOT send messages
Configurating contact form.
The form has a attributeaction-xhr="//ENTER_PARAMETER.php"you must replace the ENTER_PARAMETER with the exact location of your contact form php file. ( the one from the PHP folder ) therefore the ENTER_PAREMTER will be something like this
awesomebuyer.com/mobile/php/contact.php
Configuring PHP/Contact.php file
Inside the pack you'll find a PHP folder and in it there is a contact.php file. Open that item and replace the domain name on line 4 with the domain where the site will be hosted. Do the same thing on line 8.
After doing so, replace the email address on line 22 with your email address and you are good to go!
sourch by enable
Post a Comment for "CURIOUS, WHAT IS AMP MOBILE STYLE (wordpress, google blogger,)"
Post a Comment