Amp Templates

Amp Templates - AMP hoặc tăng tốc di động trang là một dự án của Google được tạo ra như là một tiêu chuẩn cho các nhà xuất bản để có một trang đó sẽ được tải nhanh chóng trên các thiết bị di động vào ngày 24 tháng 2 năm 2016, Google đã chính thức tích hợp AMP vào các kết quả tìm kiếm di động. AMP là một cách để xây dựng một trang web cho nội dung tĩnh mà có thể được tải nhanh chóng được xây dựng với ba phần riêng biệt, cụ thể là js amp , amp html và bộ nhớ cache amp Google. 

Hãy tải về và khám phá nào!

Demo Click here Download Click here

Hướng dẫn cài đặt:
1. Thay đổi Logo Blog
Hãy thay thế các URL hình ảnh trong đoạn code dưới đây. Hãy tạo ra một biểu tượng với kích thước 30px x 30px.

<b:includable id='title'> <a expr:href='data:blog.homepageUrl' expr:title='data:title' itemprop='url'><span itemprop='name'><amp-img alt='Logo' expr:title='data:title' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWfgEy2V-Zxafoz80I-8fHdwWSyH8TwDowdnrMlmjvNAxGnXbYcsqJm2aqV0Z4cotKd_aL4VeaIav-oQpssV2EFR8_HM0OQdNAz5CGLod4rUTDS-PnYjTus7dii1rt_xGLLTA1hpkqmNHU/s1600/logo-kd2.png' width='30'/> <data:title/></span></a> </b:includable>

2. Thay đổi Disqus Comment
Hãy thay thế mã kompi-design trong mã dưới đây với tên truy cập của bạn Disqus blog.

<b:includable id='disqus-comments' var='post'> <div class='disqus-comments' id='disqus_comments'> <amp-iframe expr:src='&quot;https://cdn.rawgit.com/KompiAjaib/kompi-html/master/disqus_amp2.html?shortname=kompi-design&amp;url=&quot; + data:blog.canonicalUrl' frameborder='0' height='300' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' width='600'> <div aria-label='Disqus Comments' overflow='' role='button' tabindex='0'>Disqus Comments</div> </amp-iframe> </div> </b:includable>

4. Bài viết
A. Thumbnail cho đăng tải , xin vui lòng sử dụng sau html và lưu nó trên đầu trang.

<div class="thumb-post"> <noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2GvhYJx-dDut4FQ2kQIAdaRGqQaf_jmDyuVOtmJr7mnk5SDA1NoBB_JSX6UqLmhM_5cJFTCeFoX8nDqWSntsP1Lu5w3QQJY3aNeyvNZsOBYBo4CYe-mhK0L5AUITKCoDvJ_SfKrXLBaA/s1600/4.jpg" width="650" height="350" alt="Curabitur placerat est sem"/></noscript> </div>

B. Chèn một hình ảnh.

<amp-img alt="Curabitur placerat est sem" height="350" layout="responsive" on="tap:lightbox1" role="button" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2GvhYJx-dDut4FQ2kQIAdaRGqQaf_jmDyuVOtmJr7mnk5SDA1NoBB_JSX6UqLmhM_5cJFTCeFoX8nDqWSntsP1Lu5w3QQJY3aNeyvNZsOBYBo4CYe-mhK0L5AUITKCoDvJ_SfKrXLBaA/s1600/4.jpg" tabindex="0" width="650" ></amp-img>

C. Chèn video Youtube

<amp-youtube data-videoid="ID VIDEO YOUTUBE" height="270" layout="responsive" width="480" ></amp-youtube>

D. Chèn một thanh trượt cho nhiều hình ảnh

<amp-carousel width="400" height="300" layout="responsive" type="slides"> <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi59Ki6DJIXeZyNSh4WMKhtUpdQKa2WIHzX-aj65dAXygsYRMf0IDXJN4YWat7N1ipuECF-YUqyBSUOZjHjk5gTLnjQBnAuQREjU2nGqXDFPVZpovNezps-_JLFJifJFYvO-Yg9iNtzkaTQ/s1600/image1.jpg" width="400" height="300" layout="responsive" ></amp-img> <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw-xA128zpZipbfv5s4Eji9ytasz9iSIiT3mZIIMO9Fs8vjeslqB3vAo4xlusP8pIC31otLVg5TVSKY06_9TqdQakLZybju98StywOGNAyoJUOCjtsrF8ktAf7XLHtWcik7fA9hdEHBp88/s1600/image2.jpg" width="400" height="300" layout="responsive" ></amp-img> <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEz9NT1k-7jEaL-2MSUT0GBMMj00clbIgGToJ7RzYkKRzJwm_TKhbsVfB-I3b0fd19OAHeswq-tW-Qb4GMXlb8wAqF4sKk5YR7DhMMarL3-Sd6_ys5T1JCgr30D0gjr6SvP40p54Jm0SuF/s1600/image3.jpg" width="400" height="300" layout="responsive" ></amp-img> </amp-carousel>