Flatform Type : Blogger
Template Name : Semi AMP - SEO Friendly Blogger TemplatesIntructions : Tutorial Install Blogger Template
Author Name : CB Blogger
DEMO: Tại Đây
Các bạn coppy Template này phía dưới
<?xml version="1.0" encoding="UTF-8" ?>Chúc các bạn thành công!
<!DOCTYPE html>
<HTML amp='amp' lang='en'>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
<meta content='IE=9; IE=8; IE=7; IE=EDGE; chrome=1' http-equiv='X-UA-Compatible'/>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/> | Your Blog Description</title>
</b:if>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.metaDescription' name='keywords'/>
<meta content='Author Name' name='Author'/>
<meta content='general' name='rating'/>
<meta content='all' name='robots'/>
<meta content='index, follow' name='robots'/>
<meta content='id' name='geo.country'/>
<meta content='Indonesia' name='geo.placename'/>
</b:if>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta content='1200' property='og:image:width'/>
<meta content='630' property='og:image:height'/>
<b:else/>
<meta content='logo-link' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:post.snippet' name='og:description'/>
<b:else/>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>
<meta content='app_id' property='fb:app_id'/>
<meta content='fb_admins' property='fb:admins'/>
<link href='http://example.ampproject.org/article-metadata.html' rel='canonical'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<b:include data='blog' name='google-analytics'/>
<b:skin><![CDATA[
body {background :white}
#outer-wrapper {width:100%}
#content-wrapper {max-width:1024px}
#main-wrapper {width:65%;float:left;}
#sidebar-wrapper {width:30.8%;float:right}
ul, ol {list-style:none}
body#layout #header-wrapper {min-height:0px;width:100%;}
body#layout #header {float:left:width:30%;}
body#layout #header-right {width:60%;float:right}
body#layout #header {width: 25%;float: left;}
]]></b:skin>
<style amp-custom='amp-custom'>
/*<![CDATA[*/
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff'), url(https://fonts.gstatic.com/s/roboto/v15/QHD8zigcbDB8aPfIoaupKOvvDin1pK8aKteLpeZ5c0A.ttf) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'), url(https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOCZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v15/vPcynSL0qHq_6dX7lKVByfesZW2xOQ-xsNqO47m55DA.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v15/1pO9eUAp8pSF8VnRTP3xnvesZW2xOQ-xsNqO47m55DA.woff) format('woff'), url(https://fonts.gstatic.com/s/roboto/v15/W4wDsBUluyw0tK3tykhXEXYhjbSpvc47ee6xR_80Hnw.ttf) format('truetype');
}
.middle {font-size:18px}
.big {font-size:36px}
body {
background:#fff;
margin:0;
padding:0;
color:#333;
font-size:16px;
font-family:Roboto,Arial,Sans-serif;
}
a:link {
color:#0e72b5;
text-decoration:none;
}
a:visited {
color:#0e72b5;
text-decoration:none;
}
a:hover {
color:#333;
text-decoration:underline;
}
a img {
border-width:0;
}
/* Header */
#header-wrapper {background: #0379c4;margin: 0 auto;padding:70px 0 0 20px;width: 100%;overflow: hidden;height:auto}
.header-inner {margin: 0 auto;max-width: 1010px;height: auto;}
#header {float: left;width: 100%;max-width:300px;color: #fafafc;margin: 0 10px 10px 0;}
.header-right {float:right;padding:0;overflow:hidden;margin:0;width:100%;max-width:728px;}
#header h1, #header h2, #header p {display:inline-block;font-size:200%;font-weight:700;color:#fafafc;text-transform:uppercase;margin-top: 0;}
#header a {color:#fafafc;transition:all 0.3s ease-out;}
#header a:hover {color:#ff6;}
#header .description {font-family:'Roboto',sans-serif;font-size:100%;font-weight:400;text-transform:none;line-height:normal;margin:0;}
.header img {display:block;width:100%;max-width:220px}
.header-right {float: right;padding: 0;overflow: hidden;margin: 0 15px 20px 0;width: 100%;max-width: 468px;}
.header-right img {display:block;}
.Header h1,.Header h2 {margin-bottom:10px;}
@media screen and (max-width:1066px) {
.header-right {float:right;padding:0;overflow:hidden;margin:0;}
.header-right img {display:block;}}
@media screen and (max-width:960px) {
#header h1,#header p,#header,.header-right,#header .description{margin:0 auto;width:100%;float:none;text-align:center;}
#header {margin:20px auto;padding:0 30px;background:transparent;max-width:80%;}
.header-right img, .header-right iframe{margin:0 auto;max-width:100%;}
#header-wrapper{padding:0;margin:0 auto 20px auto;}
.header-wrapper2,.adtop-wrapper {padding:0}
}
@media only screen and (max-width:640px){
#header h1,#header p,#header,.header-right,#header .description{margin:0 auto;width:100%;float:none;text-align:center;}
.header-right{float:none;margin:0 auto;text-align:center;margin-bottom: 15px;}
.header-right iframe{float:none;margin:0 auto;text-align:center;}
#header{min-width:initial;max-width:100%;background:none;margin:20px auto;padding:0}
#header .description {font-size:100%;line-height:1.5;}
.header img {display: block;max-width: 200px;float: none;text-align: center;margin: auto;}
}
@media only screen and (max-width:480px){
.header-right{float:none;margin:0 auto;text-align:center;}
.header-right img, .header-right iframe{float:none;margin:0 auto;text-align:center;margin-bottom: 15px;}
}
@media screen and (max-width:320px){
.header-right{float:none;margin:0 auto;text-align:center;}
.header-right img, .header-right iframe{float:none;margin:0 auto;text-align:center;margin-bottom: 15px;}
}
/* Navigation */
#menu{background:#fff;height:42px;margin:0 auto;position:fixed;width: 100%;z-index:9999;box-shadow: 0 0 4px rgba(0,0,0,0.14), 0 4px 8px rgba(0,0,0,0.28);border-bottom: 1px solid #f1f1f1;}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height: 42px;width: 100%;
max-width: 1000px;
margin: 0 auto;}
.li-home{background:#f50;}
.li-home a{font-size:22px;}
#menu li{float:left;display:inline;position:relative;font-size:14px;color:#111;font-weight:600;text-transform:uppercase;}
#menu a{display:block;line-height:42px;padding:0 14px;text-decoration:none;color:#111}
#menu li a:hover {color:#fff;background-color:#c00;transition: all 0.3s ease-in;}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font-size:20px;display:none;width:35px;height:20px;line-height:20px;text-align:center;color:#111}
#menu label span {
font-size: 18px;
position: absolute;
left: 10px;
width: 100px;
font-weight: bold;
color: #147bc1;}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#294969;position:absolute;z-index:99;display:none;left:0;}
#menu ul.menus li{display:block;width:100%;font-size:13px;text-transform:none;text-shadow:none}
#menu ul.menus a{color:#fff;text-transform:uppercase}
#menu li:hover ul.menus{display:block}
#menu a.sub{padding:0 27px 0 14px}
#menu a.sub::after{content:"";width:0;height:0;}
#menu ul.menus a:hover{background:#DF4E41;color:#fff}
@media screen and (max-width: 800px){
#menu{width:100%}
#menu{position:relative}
#menu a{color:#fafafc}
#menu ul{background:#294969;position:absolute;top:100%;left:0;z-index:3;height:auto;display:none;width:100%;}
#menu ul.menus{width:100%;position:static;padding-left:20px;border:none;}
#menu li{display:block;float:none;width:auto;}
#menu input,#menu label{position:absolute;top:12px;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:#111}
#menu input:checked ~ ul{display:block}
}
/* Outer-Wrapper */
#outer-wrapper {
width:100%;
margin:0 auto;
padding:0;
text-align:left;
}
#content-wrapper {
max-width:1024px;
margin:10px auto 0;
background-color:white;
}
#main-wrapper {
width:67%;
padding:2% 0 2% 0;
float:left;
word-wrap:break-word; /* fix for long text breaking sidebar float in IE */
overflow:hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
margin-top:30px;
width:30.8%;
float:right;
word-wrap:break-word; /* fix for long text breaking sidebar float in IE */
overflow:hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper h2 {
background-color: #147bc1;
color: #f8f8f8;
padding: 4px 10px;
margin: -5px -5px 15px;
font-weight: 400;
font-size: 120%;
}
#sidebar-wrapper .widget-content {
padding-right:4%;
margin:10px 15px 10px;
}
#search-box { position: relative; width: 100%; margin:5px 0 15px 0px}
#search-form { height: 42px; border: 1px solid #999; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #fff; overflow: hidden; }
#search-text {
font-size: 14px;
color: #111;
border-width: 0;
background: transparent;
padding: 13px;
width: 75%;}
#search-box input[type=&amp;amp;amp;amp;amp;amp;quot;text&amp;amp;amp;amp;amp;amp;quot;] { width: 90%; padding: 11px 0 12px 1em; color: #333; outline: none; } #search-button { position: absolute; top: 0; right: 0; height: 44px; width: 50px; font-size: 14px; color: #fff; text-align: center; line-height: 42px; border-width: 0; background-color: #444; -webkit-border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px; border-radius: 0px 5px 5px 0px; cursor: pointer; }
/* Headings */
h2 {
margin:1.5em 0 .75em;
line-height:1.4em;
text-transform:capitaize;
}
/* Posts */
.post-meta {
margin-top:-10px;
display:block;
text-align: left;
font-size: 14px;
color: #aaa;
padding: 10px;
}
.post-meta a {
color: #0e72b5;
text-decoration: none;
}
.post-meta a:hover {
color:#aaa;
}
.post-meta-span {
margin-right: 15px;
}
.post {
margin:.5em 0 .2em;
padding:0 4% 1% 4%;
background-color:#fff;
}
.post h2 {
margin:.25em 0 0 0;
padding:0 0 4px;
font-size:130%;
font-weight:400;
line-height:1.3em;
color:#333;
letter-spacing:-1px;
}
.post h2 a:link, .post h3 a:visited, .post h3 strong {
display:block;font-size:100%;
text-decoration:none;
color:#333;
transition: all .5s ease-in-out;
}
.post h2 strong {color:#333;}
.post h2 a:hover {color:#c00;}
<b:if cond='data:blog.pageType != "item"'>
.post h1 {font-size:120%}
</b:if>
.post h3 {
margin:.25em 0 0 0;
padding:0 0 4px;
font-size:110%;
font-weight:700;
line-height:1.3em;
color:#333;
}
.post .post-title {
margin-bottom:5px;
background:none;
color:#333;
}
.post .post-title a:link,.post .post-title a:visited {color:#333;}
.post .post-title a:hover {color:#48d}
.post-body {
margin:15px 0 .75em;
line-height:1.6em;
}
.post-body blockquote {
line-height:1.3em;
}
<b:if cond='data:blog.pageType != "item"'>
.post-footer {margin:40px 0;line-height:1.7em;}
</b:if>
.comment-link {
margin-left:.6em;
}
.post img, table.tr-caption-container {
border:1px solid $bordercolor;
}
.tr-caption-container img {
border:none;
padding:0;
}
.post blockquote {
margin:1em 20px;
margin: 1em 20px;
background: #fafafc;
padding: 15px;
}
.post blockquote p {
margin:.75em 0;
}
/* Costumize */
.post-thumbnail {
width:90px;
height:90px;
float:left;
margin:2px 15px 15px 0;
}
pre {
padding:.5em 1em;
margin: 0;
white-space:pre;
overflow:auto;
background-color:#f1f1f1;
font-size:14px;
clear:both;
border-left:3px solid #ccc;
color:#111;
}
code {
font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;
line-height:20px;
color:#FF9800;
font-size:14px;
}
pre code {
display: block; padding: 0.5em;
line-height:1.5em;
color: #FF9800;
}
::selection { background: #db4437;color:white }
::-moz-selection { background: #db4437; color:white}
.thumbnail-cadangan {display:none}
.centered {text-align:center}
.rm-link {margin-top:25px}
.rm-link a{text-decoration:none}
.rm-link a:hover{color:#555}
.container {width:100%;height:300px;background-color:#f1f1f1;padding:2% 0;margin-bottom:55px}
.row {max-width:980px;margin:0 auto}
.six.columns{width:48%}
.intro-container{margin-top:3em}
.intro{color:#666;font-size:16px;font-weight:400;line-height:24px;max-width:510px;padding-bottom:45px}
.hero-phone{position:absolute;right:100px;top:50px;width:360px}
@media only screen and (max-width: 1024px){.hero-phone{right:0}}
.video-div{position:absolute;right:21.7%;top:9.25%}
.home .blade.first .mobile-hide amp-carousel{position:absolute;top:-20px;left:21px}.home .blade.first .mobile-hide amp-carousel .amp-carousel-button{display:none}
@media only screen and (max-width: 870px){.container{display:none}}
/* Comments */
#comments {
margin-left:4%;
}
#comments h4 {
margin:1em 0;
font-weight:bold;
line-height:1.4em;
text-transform:uppercase;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height:1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #000; background-color:#fafafc;border:1px solid #333;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#222;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #ccc;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.feed-links {
display:none;
}
.clear {clear:both}
/* Sidebar Content */
.sidebar {
line-height:1.5em;
}
.sidebar ul {
list-style:none;
margin-top:-5px;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-right:0;
padding-bottom:.25em;
line-height:1.7em;
font-size:14px;
}
.sidebar li a{
color:#333;
text-decoration:none;
}
.sidebar li a:hover {
color:#0e72b5;
color:#7CB342;
}
.sidebar .widget {
margin-bottom:20px;
padding:5px;
background:#f1f1f1;
}
main .widget {
margin-bottom:15px;
padding:0;
}
.main .Blog {
}
/*
.widget.PopularPosts {
background: #147BC1;
}
.widget.PopularPosts h2{
color: #333;
border:1px solid #ccc;
}
.popular-posts ul li a{
color:#f7f7f7;
}
.popular-posts ul li a:hover{
color:#fff;
}
*/
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
background:none;
outline:none;
}
.widget.PopularPosts {
border:1px solid #ccc;
}
.widget.PopularPosts h2{
color: #333;
border-bottom:1px solid #ccc;
}
.PopularPosts ul {
margin:.5em 0;
list-style:none;
color:#666666;
}
.PopularPosts ul li img {
display:block;
margin:0 .5em 0 10%;
width:35px;
height:35px;
float:left;
}
.PopularPosts ul li {
background-color:#f3f3f3;
margin:1% .5em -5% 0;
padding:.5em 1.5em .5em .5em;
position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
font-weight:400;
font-size:120%;
color:#f7f7f7;
text-decoration:none;
}
/* Profile
----------------------------------------------- */
.profile-img {
float:left;
margin-top:0;
margin-right:5px;
margin-bottom:5px;
margin-left:0;
padding:4px;
border:1px solid #ccc;
}
.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font-weight:bold;
line-height:1.6em;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-textblock {
margin:0.5em 0;
line-height:1.6em;
}
.profile-link {
text-transform:uppercase;
letter-spacing:.1em;
}
/* Footer
----------------------------------------------- */
#footer-wrapper {
width:100%;
clear:both;
color:#666; text-align: center;
display:block;
font-size:13px;padding: 15px;
background-color:#f1f1f1;
}
#footer {
max-width:980px;
margin:0 auto;
padding:2% 0;
color:#666;
padding: 15px;
text-align: center;
}
#footer a {
color:#666;
text-decoration:none;
}
#footer a:hover {
color:#48d;
}
img {
max-width:100%;
height:auto;
width:auto\9;
}
/* RESPONSIVE */
@media screen and (max-width:1024px) {
#outer-wrapper {width:100%;}
}
@media screen and (max-width:740px) {
#main-wrapper{
float:none;
display:block;
width:auto;
padding:4%;
}
#sidebar-wrapper {
float:none;
display:block;
width:auto;
padding:5%;
}
#sidebar-wrapper .widget-content {margin:0 0 10px;padding:0 15px;}
#sidebar-wrapper h2 {
padding:10px 15px;
margin:0px 0px 10px;
}
.post {padding:1.5%}
#footer-wrapper {text-align:center;padding:2% 0;}
}
@media screen and (max-width:570px) {
.post h3 {font-size:170%;}
}
.date-header {display:none}
/*]]>*/
body {
background-color: white;
}
h2 {
font-size: 26px;
color: red;
background-color: whitesmoke;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
.thumbnail-post {width:150px; height:110px; float:left; margin:2px 15px 15px 0; }
.thumbnail-post img{width:150px; height:110px}
@media only screen and (max-width:480px){
.thumbnail-post,.thumbnail-post img {width: 72px;height: 72px;float: left;margin: 2px 10px 15px 0;}
.post h2 {font-size: 110%;}
.post-snippet {font-size: 13px;line-height: normal;}
.post {padding: 0 1.5%;}
}
.quickedit {display:none}
.comments .comments-content .comment-header, .comments .comments-content .comment-content {margin: 0 0 8px;text-align: left;font-size: smaller;padding: 10px;}
.comments .comments-content .comment-header {background: aliceblue;}
.comments .comments-content .comment-content {background: #fafafc;}
.comments .comment .comment-actions a {padding-right:10px;padding-top: 5px;font-size: 13px;color: #c00;}
.post-body ol {list-style: decimal;}
.post-body ul {list-style: initial;}
.breadcrumbs{padding:5px 5px 5px 0;margin:0;font-size:90%;line-height:1.4em;border-bottom:4px double #cadaef}
</style>
<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>
<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>
<script async='async' src='https://cdn.ampproject.org/v0.js'/>
<script async='async' src='http:www.example.com/example.js'/>
<b:if cond='data:blog.pageType == "item"'>
<style>
#related-post {margin:0 auto;padding:0;}
#related-post h4{position:relative;overflow:hidden;margin:10px 0 20px 0;font-size:120%;font-weight:700}
#related-post h4:after{position:absolute;top:51%;overflow:hidden;width:78.3%;height:1px;content:'a0';background-color:#ccc}
#related-post h4 span{position:relative;display:inline-block;margin:0 10px 0 0}
.relhead {font-size:100%;font-weight:normal;line-height:150%;overflow:hidden;padding:10px 0;}
#related-summary .news-text {display:none;}
ul#related-summary{margin:0 auto;padding:0;list-style:none;word-wrap:break-word}
ul#related-summary li{position:relative;float:left;list-style:none outside none;padding:0;overflow:hidden;margin:0 10px 0 0;width:100%;max-width:146px;height:170px;transition:opacity .2s ease}
ul#related-summary li a {display:block;}
ul#related-summary li img{background-color:#fafafa;display:block;width:100%;height:auto;max-width:100%;max-height:100px;vertical-align:middle;overflow:hidden;margin:0 0 10px;transition:all 1s ease-out}
ul#related-summary li:hover img {opacity:0.96;}
ul#related-summary li a.relinkjdulx{background-image:none;color:#444;display:block;font-size:13px;font-weight:700;line-height:normal;overflow:hidden;padding:0;text-align:left;text-transform:none}
ul#related-summary li a.relinkjdulx:hover{color:#c00;}
@media only screen and (max-width:640px){
ul#related-summary li {float:left;list-style:none;overflow:hidden;width:100%;border-bottom:1px solid #e6e6e6;padding:10px 0;max-width:100%;height:auto;}
ul#related-summary li:last-child{border-bottom:none;}
ul#related-summary li img{max-width:72px;float:left;margin:0 10px 0 0;}
ul#related-summary li a.relinkjdulx {display:block;font-size:15px;font-weight:700;line-height:normal;overflow:hidden;padding:0 10px 10px 0;}}
@media screen and (max-width:384px){
ul#related-summary li img{display:none}}
</style>
<script type='text/javascript'>
//<![CDATA[
//Related Post
var relnojudul = 0;
var relmaxtampil = 4;
var numchars = 120;
var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF"}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function artikelterkait(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length-1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r=0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<relmaxtampil){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+"</span>";q+="</li>";document.write(q);r++;if(r==relmaxtampil){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};
//]]>
</script>
<script type='text/javascript'>
$("ul#related-summary li img").each(function(){$(this).attr("src",$(this).attr("src").replace(//s[0-9]+(-c)?//,"/w175-h100-c/"))});
</script>
</b:if>
</head>
<body>
<div id='outer-wrapper'>
<div class='mobile-hide'>
<nav id='menu'>
<input type='checkbox'/>
<label><i class='fa fa-align-justify'/><span>MENU</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/p/about.html'>About</a></li>
<li><a href='/p/kontak.html'>Kontak</a></li>
<li><a href='/p/disclaimer.html'>Disclaimer</a></li>
<li><a class='sub' href='#'>Categories <i class='fa fa-chevron-down'/></a>
<ul class='menus'>
<li><a href='#'>Blogging</a></li>
<li><a href='#'>SEO</a></li>
<li><a href='#'>Design</a></li>
<li><a href='#'>Design</a></li>
<li><a href='#'>Video</a></li>
<li><a href='#'>Photo</a></li>
</ul>
</li>
<li><a href='#'>Links</a></li>
<li><a href='#'>Downloads</a></li>
</ul>
</nav>
</div>
<header id='header-wrapper'>
<div class='header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Semi AMP (Header)' type='Header' version='1' visible='true'>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "BEHIND"'>
<!--
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width if the user is using shrink to fit.
This results in a margin-width's worth of pixels being cropped. If the
user is not using shrink to fit then we expand the header.
-->
<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
<b:else/>
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--Show the image only-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<h1><img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/></h1>
</a>
<!--Show the description-->
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
<b:section class='header-right section section' id='header-right'>
<b:widget id='HTML1' locked='false' title='' type='HTML' version='1' visible='true'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</header>
<div id='content-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' maxwidgets='' showaddelements='yes'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog' version='1' visible='true'>
<b:includable id='main' var='top'>
<b:if cond='!data:mobile'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
</div></div>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-outer">
</b:if>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-posts">
</b:if>
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comment_picker'/>
</div>
<!-- Ad -->
<b:if cond='data:post.includeAd'>
<div class='inline-ad'>
<data:adCode/>
</div>
</b:if>
</b:loop>
<b:if cond='data:numPosts != 0'>
</div></div>
</b:if>
</div>
<!-- navigation -->
<b:include name='nextprev'/>
<!-- feed links -->
<b:include name='feedLinks'/>
<b:else/>
<b:include name='mobile-main'/>
</b:if>
<b:if cond='data:top.showPlusOne'>
<data:top.googlePlusBootstrap/>
</b:if>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
<span expr:class='"item-control " + data:backlink.adminClass'>
<a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
<img src='https://resources.blogblog.com/img/icon_delete13.gif'/>
</a>
</span>
</b:includable>
<b:includable id='backlinks' var='post'>
<a name='links'/><h4><data:post.backlinksLabel/></h4>
<b:if cond='data:post.numBacklinks != 0'>
<dl class='comments-block' id='comments-block'>
<b:loop values='data:post.backlinks' var='backlink'>
<div class='collapsed-backlink backlink-control'>
<dt class='comment-title'>
<span class='backlink-toggle-zippy'> </span>
<a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
<b:include data='backlink' name='backlinkDeleteIcon'/>
</dt>
<dd class='comment-body collapseable'>
<data:backlink.snippet/>
</dd>
<dd class='comment-footer collapseable'>
<span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span>
<span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span>
</dd>
</div>
</b:loop>
</dl>
</b:if>
<p class='comment-footer'>
<a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + "_backlinks-create-link"' target='_blank'><data:post.createLinkLabel/></a>
</p>
</b:includable>
<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<h4 id='comment-post-message'>
<a expr:id='data:widget.instanceId + "_comment-editor-toggle-link"' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
</script>
</div>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
<span expr:class='"item-control " + data:comment.adminClass'>
<b:if cond='data:showCmtPopup'>
<div class='goog-toggle-button'>
<div class='goog-inline-block comment-action-icon'/>
</div>
<b:else/>
<a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
<img src='https://resources.blogblog.com/img/icon_delete13.gif'/>
</a>
</b:if>
</span>
</b:includable>
<b:includable id='comment_count_picker' var='post'>
<b:if cond='data:post.commentSource == 1'>
<span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-post-url='data:post.url' expr:data-url='data:post.url.canonical.http'>
</span>
<b:else/>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.commentLabelFull/>:
</a>
</b:if>
</b:includable>
<b:includable id='comment_picker' var='post'>
<b:if cond='data:post.commentSource == 1'>
<b:include data='post' name='iframe_comments'/>
<b:elseif cond='data:post.showThreadedComments'/>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:includable>
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4><data:post.commentLabelFull/>:</h4>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<b:if cond='data:post.hasOlderLinks'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
 
</b:if>
<data:post.commentRangeText/>
<b:if cond='data:post.hasNewerLinks'>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</b:if>
</span>
</b:if>
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:elseif cond='data:post.allowComments'/>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</p>
</b:if>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:include cond='data:post.showBacklinks' data='post' name='backlinks'/>
</div>
</div>
</div>
</b:includable>
<b:includable id='feedLinks'>
<b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>
<b:else/> <!--Post feed links -->
<div class='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:include cond='data:post.allowComments and data:post.feedLinks' data='post.feedLinks' name='feedLinksBody'/>
</b:loop>
</div>
</b:if>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>
<b:includable id='iframe_comments' var='post'>
<b:if cond='data:post.allowIframeComments'>
<script expr:src='data:post.iframeCommentSrc' type='text/javascript'/>
<div class='cmt_iframe_holder' expr:data-href='data:post.url.canonical' expr:data-viewtype='data:post.viewType'/>
<b:if cond='data:post.embedCommentForm == "false"'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</b:includable>
<b:includable id='mobile-index-post' var='post'>
<div class='mobile-date-outer date-outer'>
<b:if cond='data:post.dateHeader'>
<div class='date-header'>
<span><data:post.dateHeader/></span>
</div>
</b:if>
<div class='mobile-post-outer'>
<a expr:href='data:post.url'>
<h3 class='mobile-index-title entry-title' itemprop='name'>
<data:post.title/>
</h3>
<div class='mobile-index-arrow'>&rsaquo;</div>
<div class='mobile-index-contents'>
<b:if cond='data:post.thumbnailUrl'>
<div class='mobile-index-thumbnail'>
<div class='Image'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</div>
</b:if>
<div class='post-body'>
<b:if cond='data:post.snippet'><data:post.snippet/></b:if>
</div>
</div>
<div style='clear: both;'/>
</a>
<div class='mobile-index-comment'>
<b:include cond='data:blog.pageType != "static_page" and data:post.allowComments and data:post.numComments != 0' data='post' name='comment_count_picker'/>
</div>
</div>
</div>
</b:includable>
<b:includable id='mobile-main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<b:if cond='data:blog.pageType == "index"'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='mobile-index-post'/>
</b:loop>
<b:else/>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='mobile-post'/>
</b:loop>
</b:if>
</div>
<b:include name='mobile-nextprev'/>
</b:includable>
<b:includable id='mobile-nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<div class='mobile-link-button' id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>&lsaquo;</a>
</div>
</b:if>
<b:if cond='data:olderPageUrl'>
<div class='mobile-link-button' id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>&rsaquo;</a>
</div>
</b:if>
<div class='mobile-link-button' id='blog-pager-home-link'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</div>
<div class='mobile-desktop-link'>
<a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a>
</div>
</div>
<div class='clear'/>
</b:includable>
<b:includable id='mobile-post' var='post'>
<div class='date-outer'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<div class='date-posts'>
<div class='post-outer'>
<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.thumbnailUrl'>
<meta expr:content='data:post.thumbnailUrl' itemprop='image_url'/>
</b:if>
<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data:post.id' itemprop='postId'/>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:elseif cond='data:post.url and data:blog.url != data:post.url'/>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<div class='post-footer' style='display:none'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</span>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.url.canonical' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>
<span class='post-comment-link'>
<b:include cond='data:blog.pageType not in {"item","static_page"} and data:post.allowComments' data='post' name='comment_count_picker'/>
</span>
</div>
<div class='post-footer-line post-footer-line-2'>
<b:if cond='data:top.showMobileShare'>
<div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
<a href='javascript:void(0);'><data:shareMsg/></a>
</div>
</b:if>
<b:if cond='data:top.showDummy'>
<div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
</b:if>
</div>
</div>
</div>
<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comment_picker'/>
</div>
</div>
</div>
</b:includable>
<b:includable id='nextprev'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
</b:if>
</b:if>
</b:includable>
<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == "item"'> <div class='breadcrumbs'> Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != "true"'> , </b:if> </b:loop> </b:if> » <data:post.title/> </div> </b:if> </b:if>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
</b:if>
<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data:post.id' itemprop='postId'/>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<b:if cond='data:blog.pageType == "item"'>
<h1 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h1>
<div style='margin:10px 0;color: #999;font-size: 12px;border-bottom: 1px solid #ddd;padding:5px 0 10px 0;'>
Posted by <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<data:post.author/></a> on <data:post.dateHeader/>
</div>
</b:if>
</b:if>
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
<!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' expr:itemprop='(data:blog.metaDescription ? "" : "description ") + "articleBody"'>
<!-- Auto Readmore Start -->
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.firstImageUrl'> <a expr:href='data:post.url'><img class='thumbnail-post' expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/></a>
<b:else/> <a expr:href='data:post.url'><img class='thumbnail-post' expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibPWtU7VhBVatyvcOvgAEnsCcUR4WTYr-M53d_AeVi4bXdl-WWGp8YcRsqiT6aOia-yf7pOtAqnSLVSK9F8sCSeRvRncmR07_Hgzj78QbtTlKnUqfDzq6dg8rWx-_Yu3Tfc5dDGWLCKqrf/s220-Ic42/noimage.png'/></a>
</b:if>
<h2 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h2>
<div class='post-snippet'> <data:post.snippet/> </div>
<style>
.post-body {margin:0;line-height:1.4em;}
</style>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
<!--Auto Readmore Codes End-->
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1' style='display:none'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</span>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.url.canonical' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>
<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span> </td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>
<span class='post-comment-link'>
<b:include cond='data:blog.pageType not in {"item","static_page"} and data:post.allowComments' data='post' name='comment_count_picker'/>
</span>
<!-- backlinks -->
<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType not in {"item","static_page"} and data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>
</b:if>
</span>
<!-- share buttons -->
<div class='post-share-buttons goog-inline-block'>
<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
</div>
</div>
<div class='post-footer-line post-footer-line-2' style='display:none'>
<span class='post-labels'>
<b:if cond='data:top.showPostLabels and data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if>
</b:loop>
</b:if>
</span>
</div>
<div class='post-footer-line post-footer-line-3'>
<b:if cond='data:blog.pageType == "item"'>
<div class='addthis_toolbox addthis_default_style'>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet'/>
<a class='addthis_button_google_plusone' g:plusone:size='medium'/>
<a class='addthis_counter addthis_pill_style'/>
</div>
<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5156a09e76c1568f' type='text/javascript'/>
<div id='related-post'>
<div class='relhead'>
<h4><span>Related Posts</span></h4>
<div class='clear'/>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50"' type='text/javascript'/>
</b:loop>
<ul id='related-summary'>
<script type='text/javascript'>artikelterkait();</script>
</ul>
</div>
</div>
<div class='clear'/>
</b:if>
</div>
</div>
</div>
</b:includable>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='shareButtons' var='post'/>
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
</script>
</div>
</b:includable>
<b:includable id='threaded_comment_js' var='post'>
<script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
<script type='text/javascript'>
(function() {
var items = <data:post.commentJso/>;
var msgs = <data:post.commentMsgs/>;
var config = <data:post.commentConfig/>;
// <![CDATA[
var cursor = null;
if (items && items.length > 0) {
cursor = parseInt(items[items.length - 1].timestamp) + 1;
}
var bodyFromEntry = function(entry) {
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
return '<span class="deleted-comment">' + entry.content.$t + '</span>';
}
}
}
return entry.content.$t;
}
var parse = function(data) {
cursor = null;
var comments = [];
if (data && data.feed && data.feed.entry) {
for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
var comment = {};
// comment ID, parsed out of the original id format
var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + '';
if (entry.author && entry.author.constructor === Array) {
var auth = entry.author[0];
if (auth) {
comment.author = {
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
};
}
}
if (entry.link) {
if (entry.link[2]) {
comment.link = comment.permalink = entry.link[2].href;
}
if (entry.link[3]) {
var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
if (pid && pid[1]) {
comment.parentId = pid[1];
}
}
}
comment.deleteclass = 'item-control blog-admin';
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
} else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime') {
comment.displayTime = entry.gd$extendedProperty[k].value;
}
}
}
comments.push(comment);
}
}
return comments;
};
var paginator = function(callback) {
if (hasMore()) {
var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
if (cursor) {
url += '&published-min=' + new Date(cursor).toISOString();
}
window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length < 50 ? null
: parseInt(parsed[parsed.length - 1].timestamp) + 1
callback(parsed);
window.bloggercomments = null;
}
url += '&callback=bloggercomments';
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
};
var hasMore = function() {
return !!cursor;
};
var getMeta = function(key, comment) {
if ('iswriter' == key) {
var matches = !!comment.author
&& comment.author.name == config.authorName
&& comment.author.profileUrl == config.authorUrl;
return matches ? 'true' : '';
} else if ('deletelink' == key) {
return config.baseUri + '/delete-comment.g?blogID='
+ config.blogId + '&postID=' + comment.id;
} else if ('deleteclass' == key) {
return comment.deleteclass;
}
return '';
};
var replybox = null;
var replyUrlParts = null;
var replyParent = undefined;
var onReply = function(commentId, domId) {
if (replybox == null) {
// lazily cache replybox, and adjust to suit this style:
replybox = document.getElementById('comment-editor');
if (replybox != null) {
replybox.height = '250px';
replybox.style.display = 'block';
replyUrlParts = replybox.src.split('#');
}
}
if (replybox && (commentId !== replyParent)) {
replybox.src = '';
document.getElementById(domId).insertBefore(replybox, null);
replybox.src = replyUrlParts[0]
+ (commentId ? '&parentID=' + commentId : '')
+ '#' + replyUrlParts[1];
replyParent = commentId;
}
};
var hash = (window.location.hash || '#').substring(1);
var startThread, targetComment;
if (/^comment-form_/.test(hash)) {
startThread = hash.substring('comment-form_'.length);
} else if (/^c[0-9]+$/.test(hash)) {
targetComment = hash.substring(1);
}
// Configure commenting API:
var configJso = {
'maxDepth': config.maxThreadDepth
};
var provider = {
'id': config.postId,
'data': items,
'loadNext': paginator,
'hasMore': hasMore,
'getMeta': getMeta,
'onReply': onReply,
'rendered': true,
'initComment': targetComment,
'initReplyThread': startThread,
'config': configJso,
'messages': msgs
};
var render = function() {
if (window.goog && window.goog.comments) {
var holder = document.getElementById('comment-holder');
window.goog.comments.render(holder, provider);
}
};
// render now, or queue to render when library loads:
if (window.goog && window.goog.comments) {
render();
} else {
window.goog = window.goog || {};
window.goog.comments = window.goog.comments || {};
window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
window.goog.comments.loadQueue.push(render);
}
})();
// ]]>
</script>
</b:includable>
<b:includable id='threaded_comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<h4><data:post.commentLabelFull/>:</h4>
<div class='comments-content'>
<b:include cond='data:post.embedCommentForm' data='post' name='threaded_comment_js'/>
<div id='comment-holder'>
<data:post.commentHtml/>
</div>
</div>
<p class='comment-footer'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threaded-comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
</p>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:include cond='data:post.showBacklinks' data='post' name='backlinks'/>
</div>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<aside id='sidebar-wrapper'>
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search Here...' type='text'/>
<button id='search-button' type='submit'><span><i class='fa fa-search'/></span></button>
</form>
</div>
<div class='clear'/>
<b:section class='sidebar' id='sidebar' maxwidgets='' showaddelements='yes'>
<b:widget id='Feed1' locked='false' title='Recent Posts' type='Feed' version='1' visible='true'>
<b:includable id='main'>
<h2><data:title/></h2>
<div class='widget-content' expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
<span style='filter: alpha(25); opacity: 0.25;'>
<a expr:href='data:feedUrl'><data:loadingMsg/></a>
</span>
</div>
</b:includable>
</b:widget>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1' visible='true'>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='!data:showThumbnails'>
<b:if cond='!data:showSnippets'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'>
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, "1:1") : data:post.thumbnail' var='image'>
<img alt='' border='0' expr:src='data:image'/>
</b:with>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<b:if cond='data:showSnippets'>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
</div>
<div style='clear: both;'/>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
</aside>
<div class='clear'/>
</div>
<footer id='footer-wrapper'>
<div class='footer'>
Copyright © <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>. Template by <a class='creditlink' href='http://www.contohblog.com' id='creditlink' target='_blank' title='CB Blogger'>CB Blogger</a> & <a href='http://www.kaizentemplate.com/' rel='dofollow' target='_blank' title='KaizenTemplate'>Kaizen Template</a>. Powered by Blogger.
</div>
</footer>
</div>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
/*<![CDATA[*/
var perPage=6;
var numPages=6;
var prevText ='◄';
var nextText ='►';
var urlactivepage=location.href;
var home_page="/";
/*]]>*/
</script>
<script type='text/javascript'>
/*<![CDATA[*/
var noPage;var currentPage;var currentPageNo;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages/2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1}pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo/perPage)+1;if(lastPageNo-1==pageInfo/perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="<span class='showpageOf'>Page "+currentPageNo+' of '+lastPageNo+"</span>";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPageNo==2){if(currentPage=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a></span>'}}}if(pageStart>1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}if(pageStart>2){html+='... '}for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+='<span class="pagecurrent">'+jj+'</span>'}else if(jj==1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}if(pageEnd<lastPageNo-1){html+='... '}if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}}var nextnumber=parseInt(currentPageNo)+1;if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+nextnumber+');return false">'+nextText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+nextnumber+');return false">'+nextText+'</a></span>'}}var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function totalcountdata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)}function pagecurrentg(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){currentPage="page";if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(currentPage=="page"){var pAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}else{var pAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}location.href=pAddress}
/*]]>*/
</script>
</b:if>
</b:if>
</body>
</HTML>
Nguồn: VnHappy
Template tốt. Chuẩn seo. Tương thích mobi. Nói chung ôkê hihi :)
ReplyDeleteMấy temp AMP này thì đặc sắc lắm, load nhanh vl luôn.
ReplyDelete