Author: Adhy Suryad
Feature:
- Tải trang nhanh
- Tích hợp Google Map
- Chuẩn HTML5
- Thiết kế hoàn toàn Responsive
- Hệ thống chia sẻ lên mạng xã hội có bộ đếm
- .......
Customizable templates:
1. Social Media To Follow Button
Please adjust and complete the follow button sosmed with the url of your social media profiles.For the top button:
<ul class='list-inline intro-social-buttons'>For the button below:
<li>
<a class='btn btn-default btn-lg' href='#'><i class='fa fa-twitter fa-fw'/> <span class='network-name'>Twitter</span></a>
</li>
<li>
<a class='btn btn-default btn-lg' href='#'><i class='fa fa-facebook fa-fw'/> <span class='network-name'>Facebook</span></a>
</li>
<li>
<a class='btn btn-default btn-lg' href='#'><i class='fa fa-google-plus fa-fw'/> <span class='network-name'>Google+</span></a>
</li>
<li>
<a class='btn btn-default btn-lg' href='#'><i class='fa fa-linkedin fa-fw'/> <span class='network-name'>Linkedin</span></a>
</li>
</ul>
<ul class='list-inline banner-social-buttons'>
<li>
<a class='btn btn-default btn-lg' href='#'><i class='fa fa-twitter fa-fw'/> <span class='network-name'>Twitter</span></a>
</li>
<li>
<a class='btn btn-default btn-lg' href='#'><i class='fa fa-facebook fa-fw'/> <span class='network-name'>Facebook</span></a>
</li>
<li>
<a class='btn btn-default btn-lg' href='#'><i class='fa fa-google-plus fa-fw'/> <span class='network-name'>Google+</span></a>
</li>
<li>
<a class='btn btn-default btn-lg' href='#'><i class='fa fa-linkedin fa-fw'/> <span class='network-name'>Linkedin</span></a>
</li>
</ul>
2. Google Maps
Please create a Google Maps, if you do not understand please follow the trick HERE . Then please replace Google Maps iframe URL below with your Google Maps iframe URL.<div class='content-section-a' id='maps'>
<div class='container'>
<script type="text/javascript">
//<![CDATA[
document.write('<div style="text-align:center;margin:0 auto;width:100%;"><div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0;"><iframe data-src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15815.64098708776!2d108.6540917!3d-7.6927812!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x87c06a93566bfd91!2sKompiAjaib.com!5e0!3m2!1sen!2sid!4v1459470975027" style="border:0;position:absolute;top:0;left:0;width:100%;height:100%;" allowfullscreen></iframe></div></div>');
//]]>
</script>
<div class='clear'/>
</div>
</div>
3. Make Home About and Privacy
Please create static pages for About page and also on the Privacy page. What needs to be considered in making these pages that make the title before writing content. Give titles About for About page and Privacy on the Privacy page so that the menu at the top left to About and Privacy will be an automatic function.4. For the landing page content please adjust to your blog content both text and images in the following code:
<div class='content-section-a' id='service'>
<div class='container'>
<div class='kolom-artikel'>
<h2 class='section-heading'>Death to the Stock Photo:<br/>Special Thanks</h2>
<hr/>
<p class='lead'>A special thanks to <a href='http://join.deathtothestockphoto.com/' target='_blank' rel='nofollow' title='Death to the Stock Photo'>Death to the Stock Photo</a> for providing the photographs that you see in this template. Visit their website to become a member.</p>
</div>
<div class='image-kolom'>
<img alt='' class='img-responsive' src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDbeqM_FMl10FYwmhdN_Yxef4Nc6N0fdGLYWCoFw0t12UNB5JdLGlvUFgJgXHCpVIH71RoLcFAmtSPXTPwCHnYzUcpYqfHACk9LcVgSI-YLDwQpxgqLKNonjMvjHqWhDbUBXBSwCc9xHaY/s1600/ipad.png'/>
<div class='clear'/>
</div>
<div class='clear'/>
</div>
</div>
<div class='content-section-b'>
<div class='container'>
<div class='kolom-artikel-b'>
<h2 class='section-heading'>3D Device Mockups<br/>by PSDCovers</h2>
<hr/>
<p class='lead'>Turn your 2D designs into high quality, 3D product shots in seconds using free Photoshop actions by <a href='http://www.psdcovers.com/' target='_blank' rel='nofollow' title='PSDCovers'>PSDCovers</a>! Visit their website to download some of their awesome, free photoshop actions!</p>
</div>
<div class='image-kolom-b'>
<img alt='' class='img-responsive' src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtHdEzQCIzoXTY8wQ8VsEVmF41khGfD-hBu_Uj-dVkSM8FCJtyKiYW_XweGVWxIOFhd1Uqux_iIR-fu8P4O9RUNHoz6SWfY6vFyaDcVPOjGDqZLfWKqaySQ6qd4TxhyRbRkqoUA-fqlKN_/s1600/dog.png'/>
<div class='clear'/>
</div>
<div class='clear'/>
</div>
</div>
<div class='content-section-a'>
<div class='container'>
<div class='kolom-artikel'>
<h2 class='section-heading'>Google Web Fonts and<br/>Font Awesome Icons</h2>
<hr/>
<p class='lead'>This template features the 'Roboto' font, part of the <a href='http://www.google.com/fonts' target='_blank' rel='nofollow' title='Google Web Font library'>Google Web Font library</a>, as well as <a href='http://fontawesome.io' target='_blank' rel='nofollow' title='icons from Font Awesome'>icons from Font Awesome</a>.</p>
</div>
<div class='image-kolom'>
<img alt='' class='img-responsive' src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqHTXXTFurHtOhoCTY5O3TwnLZvttacBj32aimVtV-1ikAPlVz3UoAtbmHmDB_wwMYK8n2-aUuqjFVVjibT98uYoretTgu6PXxToJHyt_ykhl4aqaz-_KL2kDXF1LbEZkRa74tlQrpfs2C/s1600/phones.png'/>
<div class='clear'/>
</div>
<div class='clear'/>
</div>
</div>
5. Replace sticky widget to the sidebar widget in the post please change the code page PlusFollowers1 with ID Widget you want to make sticky widget and place the widget at the bottom.
function makemeSticky(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" makesticking",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky("PlusFollowers1");