>
<!DOCTYPE html>
<html b:css='false' b:responsive='true' b:version='2' class='v2'
expr:dir='data:blog.languageDirection' lang='id'
xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'>
<b:attr cond='data:blog.isMobileRequest == "true"' name='amp'
value='amp'/>
<head>
<meta content='width=device-width,minimum-scale=1,initial-scale=1'
name='viewport'/>
<meta charset='utf-8'/>
<b:include data='blog' name='all-head-content'/>
<!-- Meta keywords otomatis homepage, static page, dan post -->
<b:if cond='data:blog.pageType in {"index"} and data:blog.homepageUrl ==
data:blog.url'>
<meta expr:content='data:blog.title' name='keywords'/>
<b:elseif cond='data:blog.pageType in {"item","static_page"}'/>
<meta expr:content='data:blog.pageName' name='keywords'/>
</b:if>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css' rel='stylesheet'/>
]]></b:skin>
<style>
.post-body .separator > a, .post-body .separator > span {
margin-left: 0 !important;
}
.back-to-top {
position: fixed !important;
}
#blog-pager {
clear:both !important;
}
.showpageOf {
display: none !important;
}
.footer-widget .widget {
margin-bottom: 0px !important;
}
.related-post ul {
padding: 0 !important;
}
@media screen and (min-width:801px){
#cssmenu ul {
display: block !important;
}
}
@media screen and (max-width:800px){
#cssmenu ul li a, #cssmenu ul ul li a {
color: #888 !important;
}
.header img {
display: inline-block !important;
}
}
@media only screen and (max-width:480px){
.comments .comments-content .comment-replies{
margin-left:20px !important;
}
.comments .comment-block {
padding: 15px !important;
}
.comment .comment-thread.inline-thread .comment {
margin: 0 0 0 0 !important;
}
}
</style>
</b:if>
<style amp-custom='amp-custom'>
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'),
url(https://fonts.gstatic.com/s/roboto/v16/Hgo13k-
tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'),
url(https://fonts.gstatic.com/s/roboto/v16/Hgo13k-tfSpn0qi1SFdUfT8E0i7KZn-
EPnyo3HZu7kw.woff)
format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/Hgo13k-
tfSpn0qi1SFdUfSZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'),
url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2)
format('woff2'),
url(https://fonts.gstatic.com/s/roboto/v16/2UX7WLTfW3W8TclTUvlFyQ.woff)
format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/
QHD8zigcbDB8aPfIoaupKOvvDin1pK8aKteLpeZ5c0A.ttf) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'),
url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhm
VJw.woff2) format('woff2'),
url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-
EPnyo3HZu7kw.woff)
format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/
RxZJdnzeo3R5zSexge8UUSZ2oysoEQEeKwjgmXLRnTc.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/v16/d-
6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'),
url(https://fonts.gstatic.com/s/roboto/v16/d-6IYplOFocCacKzxwXSOD8E0i7KZn-
EPnyo3HZu7kw.woff)
format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/d-
6IYplOFocCacKzxwXSOCZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
src: local('Roboto Black'), local('Roboto-Black'),
url(https://fonts.gstatic.com/s/roboto/v16/mnpfi9pxYH-
Go5UiibESIltXRa8TVwTICgirnJhmVJw.woff2) format('woff2'),
url(https://fonts.gstatic.com/s/roboto/v16/mnpfi9pxYH-Go5UiibESIj8E0i7KZn-
EPnyo3HZu7kw.woff)
format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/mnpfi9pxYH-
Go5UiibESIiZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 300;
src: local('Roboto Light Italic'), local('Roboto-LightItalic'),
url(https://fonts.gstatic.com/s/roboto/v16/7m8l7TlFO-
S3VkhHuR0at44P5ICox8Kq3LLUNMylGO4.woff2) format('woff2'),
url(https://fonts.gstatic.com/s/roboto/v16/7m8l7TlFO-S3VkhHuR0at4bN6UDyHWBl620a-
IRfuBk.woff)
format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/7m8l7TlFO-
S3VkhHuR0atywlidHJgAgmTjOEEzwu1L8.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/v16/vPcynSL0qHq_6dX7lKVByfesZW2xOQ-
xsNqO47m55DA.woff2) format('woff2'),
url(https://fonts.gstatic.com/s/roboto/v16/1pO9eUAp8pSF8VnRTP3xnvesZW2xOQ-
xsNqO47m55DA.woff)
format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/
W4wDsBUluyw0tK3tykhXEXYhjbSpvc47ee6xR_80Hnw.ttf) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 500;
src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
url(https://fonts.gstatic.com/s/roboto/v16/OLffGBTaF0XFOW1gnuHF0Y4P5ICox8Kq3LLUNMyl
GO4.woff2) format('woff2'),
url(https://fonts.gstatic.com/s/roboto/v16/OLffGBTaF0XFOW1gnuHF0YbN6UDyHWBl620a-
IRfuBk.woff) format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/
OLffGBTaF0XFOW1gnuHF0SwlidHJgAgmTjOEEzwu1L8.ttf) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 700;
src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
url(https://fonts.gstatic.com/s/roboto/v16/t6Nd4cfPRhZP44Q5QAjcC44P5ICox8Kq3LLUNMyl
GO4.woff2) format('woff2'),
url(https://fonts.gstatic.com/s/roboto/v16/t6Nd4cfPRhZP44Q5QAjcC4bN6UDyHWBl620a-
IRfuBk.woff) format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/
t6Nd4cfPRhZP44Q5QAjcCywlidHJgAgmTjOEEzwu1L8.ttf) format('truetype');
}
.amp-form-vio {
margin: 15px 20px;
padding: 0;
}
.amp-form-vio input[type='search'] {
padding: 8px 12px;
border: 0;
border-radius: 3px;
color: #888;
outline: none;
width: 70%;
}
.amp-form-vio input[type='submit'] {
background: linear-gradient(to top left, #222, #555);
color: #fff;
padding: 8px 12px;
border: 0;
border-radius: 3px;
outline: none;
width: 28%;
}
.amp-form-vio input[type='submit']:hover {
background: linear-gradient(to top left, #555, #222);
cursor: pointer;
}
.amp-form-vio input[type='search']:focus {
color: #333;
}
/**
* Eric Meyer's Reset CSS v2.0 http://meyerweb.com/eric/tools/css/reset/
* http://cssreset.com
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,a
cronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,su
b,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,captio
n,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,f
ooter,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{marg
in:0;padding:0;border:0;/*font-size:100%;*/font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{displ
ay:block;}body{line-
height:1;display:block;}*{margin:0;padding:0;}html{display:block;}blockquote,q{quot
es:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';con
tent:none;}table{border-collapse:collapse;border-spacing:0;}
.quickedit,.thread-toggle,.edit-post,.item-control{display:none;}
/* FRAMEWORK */
strong,b{font-weight:bold;}
cite,em,i{font-style:italic;}
a:link{color:#49ACE1;text-decoration:none;outline:none;}
a:visited{color:#49ACE1;text-decoration:none;}
a:hover{color:#444;text-decoration:none;}
a img{border:none;border-width:0;outline:none;}
abbr,acronym{border-bottom:1px dotted;cursor:help;}
sup,sub{vertical-align:baseline;position:relative;top:-.4em;font-size:86%;}
sub{top:.4em;}small{font-size:86%;}
kbd{font-size:80%;border:1px solid #777;padding:2px 5px;border-bottom-
width:2px;border-radius:3px;}
mark{background-color:#ffce00;color:black;}
p,blockquote,pre,table,figure,hr,form,ol,ul,dl{margin:1.5em 0;}
hr{height:1px;border:none;background-color:#666;}
h1{font-size:1.8rem}
h2{font-size:1.6rem}
h3{font-size:1.4rem}
h4{font-size:1.2rem}
h5{font-size:1rem}
h6{font-size:0.9rem}
/* heading */
h1,h2,h3,h4,h5,h6 {
margin: 0 0 0.6em;
font-weight: 500;
}
/* list */
ol,ul,dl{margin: .5em 0em .5em 3em}
li{margin: .5em 0}
dt{font-weight: 500}
dd{margin: 0 0 .5em 2em}
/* form */
input,button,select,textarea{font:inherit;font-size:100%;line-
height:normal;vertical-align:baseline;}
textarea{display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-
box;box-sizing:border-box;}
/* code, blockquote */
pre,code{font-family:"Courier New",Courier,Monospace;color:inherit;}
pre{white-space:pre;word-wrap:normal;overflow:auto;}
blockquote{background:#f6f6f6;margin-left:2em;margin-right:2em;padding:1em
1em;font-style:italic;font-size:105%;}
blockquote:before {
content: "\f10d";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
padding-right:4px;
color:#666;
}
/* table */
table[border="1"] td, table[border="1"] th {
vertical-align: top;
text-align: left;
font-size: 13px;
padding: 3px 5px;
border: 1px solid #f6f6f6;
}
table[border="1"] th {
background: #eee;
}
table, img {
max-width: 100%;
height: auto;
}
iframe {
max-width: 100%;
}
td.tr-caption {
color: #777;
}
.clear {
clear: both;
}
.clear:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
/* TRANSISI */
a:link, .label-count, #cssmenu ul ul li, #cssmenu > ul > li.has-sub >
a:before, #cssmenu ul ul li.has-sub > a:before, .berlangganan-box input.submit-
email[type="submit"], .berlangganan-box input.email-
address[type="text"] {
transition: all 0.2s;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
}
.related-post-style-3 .related-post-item {
transition: opacity 0.2s linear;
}
.img-thumbnail, .img-thumbnail img, .label-info-th a, .info-1, .info-2, h2.post-
title, .post-snippet, .sidebar-sticky {
transition: all .2s linear;
-o-transition: all .2s linear;
-moz-transition: all .2s linear;
-webkit-transition: all .2s linear;
}
body {
background: #fff;
margin: 0 0 0 0;
padding: 0 0 0 0;
color: #777;
font: normal normal 16px Roboto, Arial, sans-serif;
text-align: left;
}
/* WRAPPER */
#wrapper {
background: #fff;
max-width: 1000px;
margin: 0 auto;
padding: 70px 30px 30px;
overflow: hidden;
}
/* HEADER */
#header-container {
background: #5b86e5;
background: linear-gradient(to right, #5b86e5, #36d1dc);
-webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 999;
height: 48px;
}
#header-wrapper {
max-width: 1000px;
margin: 0 auto;
position: relative;
}
.header {
max-width: 400px;
float: left;
margin-right: 28px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.header h1.title, .header p.title {
font: 500 25px Roboto, Arial, sans-serif;
color: #fff;
margin: 0;
text-transform: uppercase;
padding: 9px 0;
}
.header .description {
color: #fff;
margin: -10px 0 4px 0;
padding: 0;
font-size: 0.7em;
display: none;
}
.header a, .header a:hover {
color: #fff;
}
.header img {
display: block;
width: auto;
max-height: 28px;
}
.header img.header-logo, .header amp-img {
margin: 10px 0;
}
/* POST WRAPPER */
.post-container {
padding-right: 25px;
}
#post-wrapper {
background:transparent;
float:left;
width:70%;
max-width:700px;
margin:0 0 10px;
}
.breadcrumbs a {
color: #49ACE1;
}
.post {
margin-bottom: 20px;
}
.post-body {
font:normal normal 16px Roboto, Arial, sans-serif;
color:#777;
line-height: 1.6em;
text-align: left;
word-wrap: break-word;
}
h2.post-title, h1.post-title {
font: 500 20px Roboto, Arial, sans-serif;
}
h1.post-title {
font-size: 30px;
margin-bottom: 12px;
}
h2.post-title {
margin-bottom: 12px;
}
h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {
color: #444;
line-height: 1.3em;
}
h2.post-title a:hover, h1.post-title a:hover {
color: #49ACE1;
}
.img-thumbnail {
position: relative;
float: left;
width: 255px;
height: 170px;
}
.img-thumbnail img {
width: 255px;
height: 170px;
display: block;
}
.label-info-th {
display: block;
z-index: 2;
position: relative;
margin-bottom: 10px;
}
.label-line, .label-line-c {
position:relative;
}
.label-line-c {
text-align: center;
margin-bottom: 6px;
}
.label-line:before, .label-line-c:before {
z-index: 1;
content: "";
width: 100%;
height: 2px;
background: #efefef;
position: absolute;
top: 50%;
left: 0;
margin-top: -2px;
}
.label-info-th a {
color: #888;
background: #fff;
display: inline-block;
padding: 6px 12px;
margin: 1px 0;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
border: 2px solid #efefef;
}
.label-info-th a:hover {
color: #49ACE1;
}
.post-info {
color: #777;
font: normal normal 13px Roboto, Arial, sans-serif;
}
.info-1, .info-2, h2.post-title, .post-snippet {
margin-left: 275px;
}
.info-1 {
margin-top: 12px;
}
.info-2 {
margin-top: 12px;
}
.info-3 {
margin-bottom: 1.6em;
}
.post-info a {
display: inline-block;
color: #777;
}
.post-info a:hover {
color: #49ACE1;
}
.author-info:after {
content: "-";
padding: 0 2px;
}
.edit-post:before, .comment-info:before {
content: "-";
padding: 0 2px;
}
/* SIDEBAR WIDGET */
#sidebar-wrapper {
background:transparent;
float:right;
width:30%;
max-width:300px;
margin:0 auto;
}
.sidebar h2, .sidebar-sticky h2, .latest-post-title h2, .above-post-widget
h2, .comments h3, .breadcrumbs {
font: 500 15px Roboto, Arial, sans-serif;
margin-bottom: 15px;
padding: 0px 0px 5px;
color: #49ACE1;
text-transform: uppercase;
display: inline-block;
border-bottom: 2px solid #efefef;
}
.section:last-child .widget:last-child, .sidebar .widget, .sidebar-
sticky .widget, .above-post-widget .widget, .bellow-header-widget .widget, #blog-
pager {
margin:0 0 30px;
clear:both;
}
.sidebar ul, .sidebar ol, .sidebar-sticky ul, .sidebar-sticky ol {
list-style-type:none;
margin: 0;
padding: 0;
}
.sidebar li, .sidebar-sticky li {
margin:5px 0;
padding: 0;
}
.sidebar-sticky {
z-index: 997;
}
.sidebar .widget-content, .sidebar-sticky .widget-content {
overflow: hidden;
}
.bellow-header-widget {
text-align: center;
}
.bellow-header-widget h2 {
display: none;
}
.bellow-header-widget .widget {
overflow: hidden;
}
.bellow-header-widget img, .bellow-header-widget iframe{
max-width: 100%;
border: none;
overflow: hidden;
}
/* CUSTOM WIDGET */
.widget ul {
line-height:1.4em;
}
/* Label */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
transition: all 0.25s;
-moz-transition: all 0.25s;
-webkit-transition: all 0.25s;
line-height:1.2;
display: block;
float: left;
margin: 0 3px 3px 0;
color: #49ACE1;
font-size: 12px;
text-transform: uppercase;
border: 1px solid #49ACE1;
}
.label-size a,.label-size span{
display: inline-block;
color: #49ACE1;
padding: 6px 8px;
}
.label-size:hover {
border: 1px solid #444;
}
.label-size:hover a, .label-size:hover .label-count {
color: #444;
}
.label-count {
margin-left: -12px;
margin-right: 0px;
}
.list-label-widget-content ul li {
display: block;
margin: 0 0 5px;
}
.list-label-widget-content ul li:last-child {
margin-bottom: 10px
}
/* Feed */
.Feed ul li {
display: block;
margin: 0 0 10px;
}
.Feed ul li:last-child {
margin-bottom: 10px;
}
.Feed .item-date, .Feed .item-author {
color: #999;
}
.Feed .item-title {
font-weight: 500;
}
/* Popular Posts */
.PopularPosts .widget-content ul, .PopularPosts .widget-content ul li {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
outline:none;
}
.PopularPosts .widget-content ul {
margin: 0;
list-style:none;
counter-reset:num;
}
.PopularPosts .widget-content ul li img {
display: block;
width: 70px;
height: 70px;
float: left;
}
.PopularPosts .widget-content ul li {
margin: 0 0 10px;
counter-increment: num;
position: relative;
}
.PopularPosts ul li:last-child {
margin-bottom: 0px;
}
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight: 500;
text-decoration: none;
color: #444;
}
.PopularPosts ul li .item-title a:hover, .PopularPosts ul li a:hover {
color: #49ACE1;
}
.PopularPosts ul li .item-thumbnail-only:before, .PopularPosts ul li .item-
content:before, .PopularPosts ul li > a:before {
font-size: 30px;
font-weight: 500;
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
background: linear-gradient(#49ACE1, #fff);
width: 26px;
padding-top: 10px;
text-align: center;
content: counter(num);
color: #fff;
}
.PopularPosts ul li > a {
display: block;
padding-left: 32px;
min-height: 45px;
}
.PopularPosts .item-title, .PopularPosts .item-thumbnail, .PopularPosts .item-
snippet {
margin-left: 32px;
}
.PopularPosts .item-title {
line-height: 1.6;
margin-right: 8px;
min-height: 40px;
}
.PopularPosts .item-thumbnail {
float: left;
margin-right: 8px;
}
.PopularPosts .item-snippet {
line-height: 1.6em;
font-size: 14px;
margin-top: 8px;
}
/* Featured Post */
.FeaturedPost .post-summary {
background: #f7f7f7;
position: relative;
padding: 0;
min-height: 200px;
max-height: 450px;
overflow: hidden;
}
.FeaturedPost .post-summary h3 {
font: 500 20px Roboto, Arial, sans-serif;
position: absolute;
bottom: 58px;
z-index: 1;
font-size: 28px;
margin: 0 15px;
}
.FeaturedPost .post-summary h3:after {
content:"";
position:absolute;
top:-0.25em;
right:100%;
bottom:-0.25em;
width:0.25em;
}
.FeaturedPost .post-summary h3 a {
color: #444;
background: #fff;
padding: 2px 8px;
-webkit-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
}
.FeaturedPost .post-summary h3 a:hover {
color: #49ACE1;
}
.FeaturedPost .post-summary p {
position: absolute;
background: #ffffff;
color: #5a5a5a;
padding: 3px 8px;
bottom: 15px;
margin: 0 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 90%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 1;
}
.FeaturedPost .image {
display: block;
}
/* Profile */
.Profile .widget-content {
text-align: center;
padding: 30px;
border: 2px solid #efefef;
margin: 0 auto;
max-width: 300px;
}
.Profile .profile-img, .Profile amp-img {
border-radius: 50%;
float: none;
}
.Profile .profile-name-link {
color: #777;
font-size: .9em;
opacity: 1;
overflow: hidden;
}
.Profile .profile-name-link:hover {
color: #49ACE1;
}
.Profile .profile-link {
border-style: solid;
border-width: 1px;
cursor: pointer;
font-size: 13px;
font-weight: 400;
padding: 6px 22px;
display: inline-block;
line-height: normal;
}
.profile-textblock {
margin: .8em 0;
font-size: 14px;
line-height: 1.5em;
}
.profile-img {
float: left;
display:inline;
opacity:10;
margin:0 6px 3px 0;
}
.profile-data {
margin: 0;
}
.profile-datablock {
margin: .5em 0;
}
.profile-name-link {
background: no-repeat left top;
box-sizing: border-box;
display: inline-block;
max-width: 100%;
min-height: 20px;
padding-left: 20px;
}
/* Archive */
#ArchiveList .toggle {
cursor: pointer;
font-family: Arial, sans-serif;
}
#ArchiveList .toggle-open {
_font-size: 1.7em;
line-height: .6em;
}
#ArchiveList {
text-align: left;
}
#ArchiveList a.post-count-link, #ArchiveList a.post-count-link:link, #ArchiveList
a.post-count-link:visited {
text-decoration: none;
}
#ArchiveList a.toggle, #ArchiveList a.toggle:link, #ArchiveList a.toggle:visited,
#ArchiveList a.toggle:hover {
color: inherit;
text-decoration: none;
}
.BlogArchive #ArchiveList ul li {
background: none;
list-style: none;
list-style-image: none;
list-style-position: outside;
border-width: 0;
padding-left: 15px;
text-indent: -15px;
margin: .25em 0;
background-image: none;
}
.BlogArchive #ArchiveList ul ul li {
padding-left: 1.2em;
}
.BlogArchive #ArchiveList ul {
margin: 0;
padding: 0;
list-style: none;
list-style-image: none;
border-width: 0;
}
.BlogArchive #ArchiveList ul.posts li {
padding-left: 1.3em;
}
#ArchiveList .collapsed ul {
display: none;
}
/* Artikel Terbaru */
.artikel-terbaru ul li {
border-bottom: 2px dotted #efefef;
padding-bottom: 8px;
margin-bottom: 8px;
font-weight: 500;
}
.list-label-widget-content ul li, .LinkList ul li, .PageList ul li {
border-bottom: 2px dotted #efefef;
padding-bottom: 5px;
}
.artikel-terbaru ul li:before, .list-label-widget-content ul li:before, .LinkList
ul li:before, .PageList ul li:before {
content: "\f14b";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
margin-right: 6px;
}
.artikel-terbaru ul li:before {
content: "\f14b";
}
.list-label-widget-content ul li:before {
content: "\f07b";
}
.LinkList ul li:before {
content: "\f14c";
}
.PageList ul li:before {
content: "\f249";
}
/* SUBSCRIBER BOX */
.berlangganan-box {
background: #5b86e5;
background: linear-gradient(to right, #5b86e5, #36d1dc);
color: #fff;
padding: 15px;
margin: 20px 0;
text-align: center;
}
.berlangganan-box p {
margin:15px 0;
}
.berlangganan-box input.email-address[type="text"] {
width: 60%;
padding: 10px;
text-align: center;
border-radius: 2px;
border: none;
outline: none;
}
.berlangganan-box input.submit-email[type="submit"] {
background: #fff;
padding: 10px 15px;
border-radius: 2px;
color: #777;
border: none;
outline: none;
}
.berlangganan-box input.submit-email[type="submit"]:hover {
background: #777;
color: #fff;
cursor: pointer;
}
.berlangganan-box input.email-address[type="text"]:focus {
background: #fffcd2;
}
/* Back to top */
#back-to-top {
background: linear-gradient(to top left, #5b86e5, #36d1dc);
color:#fff;
padding:8px 10px;
font-size:24px;
border-radius: 22px;
box-shadow: 0 1px 2px 0 rgba(0,0,0,.15), 0 1px 1px 0 rgba(0,0,0,.30);
}
.back-to-top {
position: absolute;
bottom: 25px;
right: 20px;
z-index: 998;
}
/* Share button */
.share-this-pleaseeeee {
display: inline-block;
margin: 0;
color: #afafaf;
text-transform: uppercase;
font-size: 16px;
background: #fff;
z-index: 1;
position: relative;
padding: 0 10px;
font-weight: 500;
}
#share-container {
margin: 20px auto;
overflow: hidden;
}
#share {
width: 100%;
text-align: center;
}
#share a {
width: 25%;
height: 40px;
display: block;
font-size: 24px;
color: #fff;
transition: opacity 0.15s linear;
float: left;
}
#share a:hover {
opacity: 0.8;
}
#share i {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.facebook {
background: #3b5998;
}
.twitter {
background: #55acee;
}
.googleplus {
background: #dd4b39;
}
.linkedin {
background: #0077b5;
}
.pinterest {
background: #cb2027;
}
.whatsapp {
background: #25d366;
}
/* Status Msg */
.status-msg-wrap {
font-size: 110%;
width: 90%;
margin: 0 auto 15px;
position: relative;
}
.status-msg-border {
border: none;
filter: alpha(opacity=40);
-moz-opacity: .4;
opacity: .4;
width: 100%;
position: relative;
}
.status-msg-bg {
background-color: transparent;
opacity: .8;
filter: alpha(opacity=30);
-moz-opacity: .8;
width: 100%;
position: relative;
z-index: 1;
}
.status-msg-body {
text-align: center;
padding: .3em 0;
width: 100%;
position: absolute;
z-index: 4;
}
.status-msg-hidden {
visibility: hidden;
padding: .3em 0;
}
.status-msg-wrap a {
padding-left: .4em;
}
/* PAGE NAVIGATION */
#blog-pager {
padding:2px 0;
text-align: center;
}
#blog-pager-newer-link a {
float:left;
display:block;
}
#blog-pager-older-link a {
float:right;
display:block;
}
.displaypageNum a,.showpage a,.pagecurrent, #blog-pager-newer-link a, #blog-pager-
older-link a {
font-size: 12px;
padding: 8px 12px;
margin: 2px 3px 2px 0px;
display: inline-block;
color: #49ACE1;
border: 1px solid #49ACE1;
}
#blog-pager-older-link a:hover, #blog-pager-newer-link a:hover, a.home-
link:hover, .displaypageNum a:hover,.showpage a:hover, .pagecurrent {
color: #444;
border: 1px solid #444;
}
.showpageOf {
}
#blog-pager .pages {
border: none;
}
/* FOOTER WIDGET */
#footer-widget-container {
background: #f8f8f8;
font-size: 18px;
}
.footer-widget {
max-width: 1000px;
margin: 0 auto;
text-align: center;
}
.footer-widget h2 {
display: none;
}
.footer-widget .widget {
padding: 20px 0px;
}
/* SOCIAL ICON */
ul.nav-social {
list-style: none;
margin: 0;
padding: 0;
}
ul.nav-social li {
display: inline-block;
padding: 0px 15px;
margin: 0;
}
ul.nav-social li a {
color: #999;
}
ul.nav-social li a:hover {
color:#555;
}
ul.nav-social li a.fcb:hover {
color:#3B5A9B;
}
ul.nav-social li a.gpl:hover {
color:#DD4B39;
}
ul.nav-social li a.twt:hover {
color:#1BB2E9;
}
ul.nav-social li a.ytb:hover {
color:#ED3F41;
}
ul.nav-social li a.lkdn:hover {
color:#007fb2;
}
ul.nav-social li a.igicon:hover {
color:#527fa4;
}
/* SEARCH FORM */
.search-icon {
position: absolute;
top: 11px;
right: 0px;
font-size: 19px;
}
.search-icon a {
color: #fff;
}
#searchfs {
position: fixed;
z-index:9999;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
opacity: 0;
}
#searchfs.open {
-webkit-transform: translate(0px, 0px) scale(1, 1);
-moz-transform: translate(0px, 0px) scale(1, 1);
-o-transform: translate(0px, 0px) scale(1, 1);
-ms-transform: translate(0px, 0px) scale(1, 1);
transform: translate(0px, 0px) scale(1, 1);
opacity: 1;
z-index: 9999;
}
#searchfs input[type="search"] {
position: absolute;
top: 50%;
left: 0;
margin-top: -51px;
width: 70%;
margin-left: 15%;
color: rgb(255, 255, 255);
background: transparent;
border-top: 1px solid rgba(255, 255, 255, .8);
border-bottom: 2px solid rgba(255, 255, 255, .5);
border-left: 0px solid transparent;
border-right: 0px solid transparent;
font-size: 40px;
text-align: center;
outline: none;
padding: 10px;
}
#searchfs .close {
position: fixed;
top: 20px;
right: 30px;
color: #fff;
background-color: transparent;
opacity: 0.8;
font-size: 40px;
border: none;
outline: none;
}
#searchfs .close:hover {
cursor: pointer;
}
/* NAV MENU */
#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #head-mobile {
border: 0;
list-style: none;
line-height: 1;
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu ul li a {
position: relative;
}
#cssmenu #head-mobile {
position: relative;
display: none
}
#cssmenu {
text-align: left;
}
#cssmenu ul {
margin: 0;
display: block;
height: 48px;
overflow: hidden;
}
#cssmenu > ul > li {
float: left;
margin: 0;
}
#cssmenu > ul > li > a {
padding: 17px;
font: 500 12px Roboto, Arial, sans-serif;
letter-spacing: 0.8px;
text-decoration: none;
text-transform: uppercase;
color: #fff;
}
#cssmenu > ul > li:hover > a, #cssmenu ul li.active a {
color: #fff;
}
#cssmenu > ul > li:hover, #cssmenu ul li.active:hover, #cssmenu ul li.active,
#cssmenu ul li.has-sub.active:hover {
background: rgba(64,64,64,0.1);
-webkit-transition: background .2s ease;
-ms-transition: background .2s ease;
transition: background .2s ease;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 25px
}
#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #fff;
content:''
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #fff;
content:'';
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
z-index: 1;
-webkit-box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15);
box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15);
height: auto;
}
#cssmenu ul ul li {
height: 0;
background :#f8f8f8;
margin: 0;
}
#cssmenu ul ul li:hover {
background: #efefef;
}
#cssmenu li:hover > ul {
left: auto
}
#cssmenu li:hover > ul > li {
height: 33px
}
#cssmenu ul ul ul{
margin-left: 100%;
top: 0
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150,150,150,0.15);
padding: 10px 25px 10px 15px;
max-width: 100%;
min-width: 150px;
font-size: 12px;
text-decoration: none;
color: #888;
font-weight: 400;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a {
border-bottom: 0
}
#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #888;
content:''
}
#cssmenu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #888;
content:'';
}
#cssmenu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0
}
#cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover {
background: #efefef;
}
#cssmenu ul ul ul li.active a {
border-left:1px solid #333
}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul
> li.has-sub > ul > li.active> a{
border-top: 1px solid #333
}
.button {
width: 25px;
height: 20px;
position: absolute;
top: 14px;
cursor: pointer;
z-index: 2;
outline: none;
}
#non-amp-page .button {
left: 0;
display: none;
}
#amp-page-outer .button {
right: 0;
}
.mline1, .mline2, .mline3 {
position: absolute;
display: block;
height: 3px;
width: 22px;
background: #fff;
content:'';
border-radius: 5px;
transition: all 0.2s;
}
#amp-page-outer .button span {
right: 0;
}
#non-amp-page .button span {
left: 0;
}
.mline1 {
top: 0;
}
.mline2 {
top: 7px;
}
.mline3 {
top: 14px;
}
.button.menu-opened .mline1 {
top: 8px;
border: 0;
height: 3px;
width: 22px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg)
}
.button.menu-opened .mline2 {
top: 8px;
width: 22px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg)
}
.button.menu-opened .mline3 {display: none;height:0;}
/* FOOTER */
#footer-container {
background: #222;
padding: 20px 5px;
overflow: hidden;
color: #ddd;
font-size: 12px;
text-align: center;
}
#footer-wrapper {
max-width: 1000px;
margin: 0 auto;
}
#footer-wrapper a {
color: #ddd;
}
#footer-wrapper a:hover {
color: #fff;
}
/* RELATED POSTS */
.related-post {
margin: 30px auto 0;
overflow: hidden;
}
.related-post h4 {
position:relative;
margin: 0;
display: inline-block;
font-weight: 500;
color: #afafaf;
text-transform: uppercase;
font-size: 16px;
z-index: 1;
background: #fff;
padding: 0 10px;
}
.related-post ul {
font-size: 14px;
}
/* Style 3 */
.related-post-style-3,
.related-post-style-3 li {
margin: 0;
padding: 0;
list-style: none;
word-wrap: break-word;
overflow: hidden;
}
.related-post-style-3 .related-post-item {
float: left;
width: 23.5%;
height: auto;
margin-right: 2%;
margin-bottom: 10px;
}
.related-post-style-3 .related-post-item:nth-of-type(4n+0) {
margin-right: 0;
}
.related-post-style-3 .related-post-item:nth-of-type(4n+1) {
clear: both;
}
.related-post-style-3 .related-post-item:hover {
opacity: 0.7;
}
.related-post-style-3 .related-post-item-thumbnail {
display: block;
max-height: none;
background-color: transparent;
border: none;
padding: 0;
max-width: 100%;
}
.related-post-style-3 .related-post-item-title {
color: #444;
}
.related-post-style-3 .related-post-item-tooltip {
padding: 10px 0;
}
.related-post-item-tooltip .related-post-item-title {
font-weight: 500;
display: block;
}
.contact-form-widget {
}
.contact-form-success-message, .contact-form-error-message {
background: #f9edbe;
border: 0 solid #f0c36d;
font-size: 14px;
text-align: center;
max-width: 500px;
border-radius: 3px;
}
.contact-form-success-message-with-border, .contact-form-error-message-with-border
{
background: #f9edbe;
border: 1px solid #f0c36d;
font-size: 14px;
text-align: center;
max-width: 600px;
border-radius: 3px;
box-sizing: border-box;
padding: 5px 10px;
}
.contact-form-cross {
height: 11px;
margin: 0 5px;
vertical-align: -8.5%;
width: 11px;
}
.contact-form-email, .contact-form-name {
color: inherit;
height: 40px;
margin-top: 5px;
max-width: 300px;
width: 100%;
padding: 0 15px;
border-radius: 3px;
border: 1px solid #cacaca;
box-sizing: border-box;
}
.contact-form-email-message {
color: inherit;
margin-top: 5px;
vertical-align: top;
max-width: 600px;
width: 100%;
border-radius: 3px;
border: 1px solid #cacaca;
padding: 15px;
}
.contact-form-email:hover, .contact-form-name:hover, .contact-form-email-
message:hover {
outline: none;
border: 1px solid #49ACE1;
}
.contact-form-email:focus, .contact-form-name:focus, .contact-form-email-
message:focus {
outline: none;
border: 1px solid #49ACE1;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
background: #f8f8f8;
}
.contact-form-button {
display: block;
font-size: 14px;
line-height: 24px;
padding: 5px 20px;
margin: 30px 0;
text-align: center;
border: none;
background: #49ACE1;
color: #fff;
border-radius: 3px;
font-weight: 500;
}
.contact-form-button:hover, .contact-form-button.hover {
cursor: pointer;
outline: none;
opacity: .85;
}
.contact-form-button.focus, .contact-form-button.right.focus, .contact-form-
button.mid.focus, .contact-form-button.left.focus {
outline: none;
}
.contact-form-button-submit:focus, .contact-form-button-submit.focus {
outline: none;
opacity: .85;
}
.swajib {
font-weight: bold;
color: #e85e5e;
}
.ctitles {
font-weight: 500;
display: block;
margin: 30px 0 0;
}
/* COMMENT FORM */
.hidecomments {
text-align: center;
margin: 20px 0;
font-weight: 500;
}
#comments-block {
margin: 15px 0;
}
.comment-body {
padding: 15px 0;
margin: 0 0;
}
.comment-body p {
margin: 0;
}
.comment-form {
overflow: hidden;
margin-top: 20px;
}
.comment-footer {
margin: 0 0 30px;
}
#comments-block .avatar-image-container {
display: none;
}
h4#comment-post-message {
display: none;
margin: 0 0 0 0;
}
.comments{
clear: both;
margin-top: 10px;
margin-bottom: 0
}
.comments .comments-content{
font-size: 14px;
margin-bottom: 30px
}
.comments .comments-content .comment-thread ol{
text-align: left;
margin: 13px 0;
padding: 0;
list-style: none;
}
.comment .avatar-image-container {
float: left;
max-height: 36px;
overflow: hidden;
width: 36px;
}
.comments .avatar-image-container img {
max-width: 34px;
border-radius: 17px;
}
.comments .comment-block{
position: relative;
padding: 20px;
margin-left: 45px;
border: 2px solid #efefef;
border-radius: 10px;
word-break: break-word;
}
.comments .comments-content .comment-replies{
margin:10px 0;
margin-left:45px
}
.comments .comments-content .comment-thread:empty{
display:none
}
.comments .comment-replybox-single {
margin-left:45px
}
.comments .comment-replybox-thread {
}
iframe#comment-editor {
min-height: 220px;
}
.comments .comments-content .comment{
margin-bottom:6px;
padding:0
}
.comments .comments-content .comment:first-child {
padding:0;
margin:0
}
.comments .comments-content .comment:last-child {
padding:0;
margin:0
}
.comments .comment-thread.inline-thread .comment, .comments .comment-thread.inline-
thread .comment:last-child {
margin:0px 0px 5px 14%
}
.comment .comment-thread.inline-thread .comment:nth-child(6) {
margin:0px 0px 5px 12%;
}
.comment .comment-thread.inline-thread .comment:nth-child(5) {
margin:0px 0px 5px 10%;
}
.comment .comment-thread.inline-thread .comment:nth-child(4) {
margin:0px 0px 5px 8%;
}
.comment .comment-thread.inline-thread .comment:nth-child(3) {
margin:0px 0px 5px 4%;
}
.comment .comment-thread.inline-thread .comment:nth-child(2) {
margin:0px 0px 5px 2%;
}
.comment .comment-thread.inline-thread .comment:nth-child(1) {
margin:0px 0px 5px 0;
}
.comments .comments-content .comment-thread{
margin:0;
padding:0
}
.comments .comments-content .inline-thread{
background:#fff;
margin:0
}
.comments .comments-content .icon.blog-author {
display:inline;
height: 18px;
margin: 0 0 -4px 6px;
width: 18px;
}
.comments .comments-content .icon.blog-author:after {
content:"\f058";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
padding-right:4px;
color:#49ACE1;
}
.comments .comments-content .comment-header {
font-size:14px;
margin: 0 0 15px;
}
.comments .comments-content .comment-content {
margin: 0 0 15px;
text-align: left;
line-height: 1.6;
}
.comments .comments-content .datetime {
margin-left: 6px;
}
.comments .comments-content .datetime a {
color:#bbbbbb;
}
.comments .comments-content .user {
font-weight: 500;
font-style: normal;
}
.comments .comment .comment-actions a {
display:inline-block;
font-weight:500;
font-size:13px;
line-height:15px;
margin:4px 8px 0 0;
}
.comments .continue a {
display:inline-block;
font-size:13px;
padding: .5em;
}
.comments .comment .comment-actions a:hover, .comments .continue a:hover{
text-decoration:underline;
}
.pesan-komentar {
padding: 0 8px;
}
.pesan-komentar p {
margin: 5px 0;
}
.comments .comments-content .loadmore {
max-height: 24px;
opacity: 1;
overflow: hidden;
line-height: 24px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 0 0;
text-align: center;
font-weight: 500;
}
.deleted-comment {
font-style: italic;
opacity: .5;
}
/* MEDIA QUERY */
@media only screen and (max-width:1080px){
#wrapper {
margin: 0 auto;
}
.footer-widget, #footer-navmenu-container {
max-width: 100%;
}
#header-wrapper, .footer-widget .widget, #footer-navmenu-container {
padding-left: 30px;
padding-right: 30px;
}
.sticky-mobile {
margin-right: 30px;
}
.img-thumbnail, .img-thumbnail img {
width: 180px;
height: 120px;
}
.info-1, .info-2, h2.post-title, .post-snippet {
margin-left: 195px;
}
}
@media only screen and (max-width:800px){
#header-wrapper {
padding-left: 0px;
padding-right: 0px;
position: relative;
}
#wrapper {
padding: 70px 20px 20px;
}
#cssmenu > ul > li > a {
padding: 12px 20px;
}
.footer-widget .widget, #footer-navmenu-container {
padding-left: 20px;
padding-right: 20px;
}
#non-amp-page .button {
left: 20px;
}
.header {
position: absolute;
top: 0;
left: 45px;
right: 45px;
z-index: 1;
text-align: center;
float: none;
display: inline-block;
max-width: 100%;
margin-right: 0;
}
.search-icon, #amp-page-outer .button {
right: 20px;
}
}
@media only screen and (max-width:768px){
#post-wrapper, #sidebar-wrapper {
float:none;
width:100%;
max-width:100%
}
.post-container {
padding: 0 0 20px 0;
}
}
</style>
body#layout #footer-wrapper {
position: relative;
background: #fff;
height: 40px;
border: 1px solid #ddd;
}
body#layout #footer-wrapper:after {
content:"Footer";
color:#999;
position:absolute;
top:12px;
}
body#layout #footer-navmenu {
position: relative;
display: block;
padding:0;
font-size: 14px;
color: #fff;
background: #bbbbbb;
border: 1px solid #8e8e8e;
font-weight: bold;
margin: 0 20px 8px;
height: 50px;
}
body#layout #footer-navmenu:after {
content: "Menu navigasi harus diedit melalui Edit HTML";
color: #fff;
position: absolute;
top: 17px;
left: 20px;
visibility: visible;
}
]]></b:template-skin>
</b:if>
<!--</head>--></head>
<body>
</amp-sidebar>
</b:if>
<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'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0
0;height:0px;'><b:include name='title'/></h1>
</b:if>
</b:if>
<b:if cond='data:blog.isMobileRequest == "false"'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img class='header-logo' 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'/>
</a>
<b:else/>
</b:if>
<!--Show the description-->
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0
0;height:0px;'><b:include name='title'/></h1>
</b:if>
</b:if>
</b:if>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType == "static_page"'>
<p class='title'><b:include name='title'/></p>
<b:else/>
<h1 class='title'><b:include name='title'/></h1>
</b:if>
<b:else/>
<p class='title'><b:include name='title'/></p>
</b:if>
<b:include name='description'/>
</div>
</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'>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
</nav>
<b:else/>
<div class='button' on='tap:sidebar1.toggle' role='button' tabindex='0'>
<span class='mline1'/>
<span class='mline2'/>
<span class='mline3'/>
</div>
</b:if>
<div class='clear'/>
</header>
</div>
<!-- header wrapper end -->
<div class='clear'/>
<div class='latest-post-title'>
<h2>Latest Posts</h2>
</div>
</b:if>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isDateStart'>
<b:if cond='data:post.isFirstPost == "false"'>
</div></div>
</b:if>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-outer">
</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:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comment_picker'/>
</b:if>
</div>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>
</b:loop>
<b:if cond='data:numPosts != 0'>
</div></div>
</b:if>
<data:adEnd/>
</div>
<b:if cond='data:top.showStars'>
<script src='//www.google.com/jsapi'/>
<script>
google.load("annotations", "1", {"locale":
"<data:top.languageCode/>"});
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>
<b:else/>
<b:include name='mobile-main'/>
</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'>
<amp-img src='//www.blogger.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='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl'
rel='nofollow'>Home</a></span> › <span><data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'><span itemscope='' itemtype='http://data-
vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl'
itemprop='url'><span itemprop='title'>Home</span></a></span> › <b:loop
values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-
vocabulary.org/Breadcrumb'><a expr:href='data:label.url + "?&max-
results=8"' itemprop='url'><span
itemprop='title'><data:label.name/></span></a></span><b:if
cond='data:label.isLast != "true"'> › </b:if> </b:loop>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl'
rel='nofollow'>Home</a></span> › <span>Uncategories</span> ›
<span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl'
rel='nofollow'>Home</a></span> › <span>Archive for
<data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.searchQuery'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl'
rel='nofollow'>Home</a></span> › <span><data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'> <span><a
expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> › <span>All
post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span>
› <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</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>
<div class='pesan-komentar'><p><data:blogCommentMessage/></p></div>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-
comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-
editor' src='' style='display: none' width='100%'/>
<b:else/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<div class='pesan-komentar'><p><data:blogCommentMessage/></p></div>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-
comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-
editor' src='' width='100%'/>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script>
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'>
<amp-img src='//www.blogger.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.canonicalUrl'>
</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:else/>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:includable>
<b:includable id='comments' var='post'>
<b:if cond='data:blog.isMobileRequest == "false"'>
<!-- comment full page and pop up -->
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h3><b:if cond='data:post.numComments == 0'> 0 Response to
"<data:blog.pageName/>"</b:if> <b:if cond='data:post.numComments == 1'> 1
Response to "<data:blog.pageName/>" </b:if> <b:if
cond='data:post.numComments > 1'> <data:post.numComments/> Responses to
"<data:blog.pageName/>" </b:if></h3>
<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>
<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:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</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:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
<b:else/>
</b:if>
</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:if cond='data:post.allowIframeComments'>
<script expr:src='data:post.iframeCommentSrc'/>
<div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl'
expr:data-viewtype='data:post.viewType'/>
<div class='mobile-post-outer'>
<div class='mobile-index-contents'>
<b:if cond='data:post.thumbnailUrl'>
<div class='mobile-index-thumbnail'>
<div class='Image'>
<amp-img expr:src='data:post.thumbnailUrl'/>
</div>
</div>
<b:else/>
<div class='mobile-index-thumbnail'>
<div class='Image'>
<amp-img expr:alt='data:post.title'
expr:title='data:post.title'
src='//3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/s66-c/no-
image.png'/>
</div>
</div>
</b:if>
<a expr:href='data:post.url'>
<h3 class='mobile-index-title entry-title' itemprop='name'>
<data:post.title/>
</h3>
</a>
<div class='post-body'>
<div class='post-info'>
<b:if cond='data:top.showAuthor'>
<b:if cond='data:post.authorProfileUrl'>
<span class='author-info'>
<span 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>
</span>
<b:else/>
<span class='author-info'>
<span itemprop='author' itemscope='itemscope'
itemtype='http://schema.org/Person'>
<span
itemprop='name'><data:post.author/></span>
</span>
</span>
</b:if>
</b:if>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl'
itemprop='url'/>
<span class='time-info'>
/ <a class='timestamp-link' expr:href='data:post.url'
rel='bookmark' title='permanent link'><span class='published updated'
expr:content='data:post.timestampISO8601'
itemprop='datePublished'><data:post.timestamp/></span></a>
</span>
</b:if>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType !=
"static_page"'>
<b:if cond='data:post.allowComments'>
<span class='comment-info'>
/ <a expr:href='data:post.addCommentUrl'> <b:if
cond='data:post.numComments == 0'> Add Comment </b:if> <b:if
cond='data:post.numComments == 1'> 1 Comment </b:if> <b:if
cond='data:post.numComments > 1'> <data:post.numComments/> Comments </b:if>
</a>
</span>
</b:if>
</b:if>
</b:if>
</div>
</div>
</div>
</div>
</div>
</b:includable>
<b:includable id='mobile-main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<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-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'>
<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>
<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'><span class='published'
expr:title='data:post.timestampISO8601'
itemprop='datePublished'><data:post.timestamp/></span></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>
</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'>
<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>
<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:includable>
<b:includable id='post' var='post'>
<article class='post'>
<b:switch var='data:blog.pageType'>
<b:case value='static_page'/>
<!-- Posting halaman statis -->
<div>
<b:if cond='data:post.title'>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
<div class='post-body entry-content' expr:id='"post-body-" +
data:post.id'>
<data:post.body/>
<div style='clear: both;'/>
</div>
</div>
<b:case value='item'/>
<!-- Posting halaman item -->
<div>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image'/>
</b:if>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h1 class='post-title entry-title' itemprop='name headline'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
<b:else/>
</b:if>
<data:post.body/>
<b:else/>
<!-- kode iklan di bawah artikel bukan AMP -->
</b:if>
</div>
</div>
<b:default/>
<!-- Posting halaman default (index, arsip, dll.) -->
<b:if cond='data:post.labels'>
<div class='label-line'>
<span class='label-info-th'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + "?&max-results=8"'
rel='tag'><data:label.name/></a><b:if cond='data:label.isLast !=
"true"'/>
</b:loop>
</span>
</div>
</b:if>
<b:include data='post' name='postthumbnail'/>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image'/>
</b:if>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title' itemprop='name headline'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
</b:includable>
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<span class='edit-post'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<strong>Edit</strong>
</a>
</span>
</span>
</b:if>
</b:includable>
<b:includable id='postauthorbox' var='post'>
<b:if cond='data:blog.isMobileRequest == "false"'>
<b:if cond='data:post.authorAboutMe'>
<div class='author-profile' itemprop='author' itemscope='itemscope'
itemtype='http://schema.org/Person'>
<b:if cond='data:post.authorPhoto.url'>
<img expr:src='data:post.authorPhoto.url' height='90' itemprop='image'
width='90'/>
</b:if>
<div>
<a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url'
rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</div>
<span itemprop='description'><data:post.authorAboutMe/></span>
</div>
</b:if>
<b:else/>
<b:if cond='data:post.authorAboutMe'>
<div class='author-profile' itemprop='author' itemscope='itemscope'
itemtype='http://schema.org/Person'>
<b:if cond='data:post.authorPhoto.url'>
<amp-img expr:src='data:post.authorPhoto.url' height='90' layout='fixed'
width='90'/>
<meta expr:content='data:post.authorPhoto.url' itemprop='image'/>
</b:if>
<div>
<a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url'
rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</div>
<span itemprop='description'><data:post.authorAboutMe/></span>
</div>
</b:if>
</b:if>
</b:includable>
<b:includable id='postauthorinfo' var='post'>
<b:if cond='data:top.showAuthor'>
<span class='author-info'>
By <span itemprop='author' itemscope='itemscope'
itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<b:if cond='data:post.authorProfileUrl'>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author'
title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
<b:else/>
<span itemprop='name'><data:post.author/></span>
</b:if>
</span>
</span>
</b:if>
</b:includable>
<b:includable id='postcommentinfo' var='post'>
<b:if cond='data:blog.isMobileRequest == "false"'>
<b:if cond='data:post.allowComments'>
<span class='comment-info'>
<a expr:href='data:post.addCommentUrl'> <b:if cond='data:post.numComments == 0'>
Add Comment </b:if> <b:if cond='data:post.numComments == 1'> 1 Comment </b:if>
<b:if cond='data:post.numComments > 1'> <data:post.numComments/> Comments
</b:if>
</a>
</span>
</b:if>
</b:if>
</b:includable>
<b:includable id='postcommentinfo2' var='post'>
<b:if cond='data:blog.isMobileRequest == "false"'>
<b:if cond='data:post.allowComments'>
<span class='comment-info'>
<a href='#comment-form'> <b:if cond='data:post.numComments == 0'> Add Comment
</b:if> <b:if cond='data:post.numComments == 1'> 1 Comment </b:if> <b:if
cond='data:post.numComments > 1'> <data:post.numComments/> Comments </b:if>
</a>
</span>
</b:if>
</b:if>
</b:includable>
<b:includable id='postdateinfo' var='post'>
<b:if cond='data:post.dateHeader'>
<span class='time-info'><span class='updated published'
expr:title='data:post.timestampISO8601'>
<meta expr:content='data:post.timestampISO8601' itemprop='datePublished'/>
<data:post.dateHeader/>
</span></span>
<b:else/>
<b:if cond='data:top.showTimestamp'>
<span class='time-info'><span class='updated published'
expr:title='data:post.timestampISO8601'>
<meta expr:content='data:post.timestampISO8601' itemprop='datePublished'/>
<data:post.timestamp/>
</span></span>
</b:if>
</b:if>
</b:includable>
<b:includable id='postlabelinfo' var='post'>
<b:if cond='data:post.labels'>
<span class='label-info'>
<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:loop>
</span>
</b:if>
</b:includable>
<b:includable id='postsharebutton' var='post'>
<div id='share-container'>
<div class='label-line-c'>
<p class='share-this-pleaseeeee'>Share this post</p>
</div>
<div id='share'>
<!-- facebook -->
<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u="
+ data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<!-- twitter -->
<a class='twitter' expr:href='"http://twitter.com/share?url=" +
data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<!-- google plus -->
<a class='googleplus' expr:href='"http://plus.google.com/share?url=" +
data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<!-- linkedin
<a class='linkedin' expr:href='"http://www.linkedin.com/shareArticle?
mini=true&amp;url=" + data:post.url + "&amp;title=" +
data:post.title + "&amp;summary=" + data:post.snippets'
rel='nofollow' target='_blank'><i class='fa fa-linkedin'></i></a> -->
<!-- pinterest
<a class='pinterest' expr:href='"http://pinterest.com/pin/create/button/?
url=" + data:post.url + "&amp;media=" + data:blog.postImageUrl +
"&amp;description=" + data:post.title' rel='nofollow'
target='_blank'><i class='fa fa-pinterest-p'></i></a> -->
<a class='whatsapp' data-action='share/whatsapp/share'
expr:href='"whatsapp://send?text=" + data:post.title + "%20%2D
%20" + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'/></a>
</div>
</div>
</b:includable>
<b:includable id='postthumbnail' var='post'>
<b:if cond='data:blog.isMobileRequest == "true"'>
<div class='img-thumbnail'>
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'><amp-img expr:alt='data:post.title'
expr:src='resizeImage(data:post.thumbnailUrl, 180, "300:200")'
expr:title='data:post.title' height='120' layout='responsive' width='180'/>
</a>
<b:else/>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'><amp-img expr:alt='data:post.title'
expr:src='data:post.firstImageUrl' expr:title='data:post.title' height='120'
layout='responsive' width='180'/>
</a>
<b:else/>
<a expr:href='data:post.url'><amp-img expr:alt='data:post.title'
expr:title='data:post.title' height='120' layout='responsive'
src='//3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/w180-
h120-c/no-image.png' width='180'/>
</a>
</b:if>
</b:if>
</div>
<b:else/>
<div class='img-thumbnail'>
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'><img expr:alt='data:post.title'
expr:src='resizeImage(data:post.thumbnailUrl, 420, "300:200")'
expr:title='data:post.title'/>
</a>
<b:else/>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'><img 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 expr:alt='data:post.title'
expr:title='data:post.title'
src='//3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/w420-
h280-c/no-image.png'/>
</a>
</b:if>
</b:if>
</div>
</b:if>
</b:includable>
<b:includable id='relatedpost' var='post'>
<b:if cond='data:blog.isMobileRequest == "false"'>
<div class='related-post' expr:id='"related-post-" + data:post.id'/>
<script>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels'
var='label'>"<data:label.name/>"<b:if cond='data:label.isLast !=
"true"'>, </b:if></b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<div class='label-line-c'><h4>Related
Posts</h4></div>",
numPosts: 8,
titleLength: "auto",
thumbnailWidth: 250,
thumbnailHeight: 170,
noImage:
"//3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/w255-
h170-c/no-image.png",
containerId: "related-post-<data:post.id/>",
newTabLink: false,
moreText: "Read More",
widgetStyle: 3,
callBack: function() {}
};
</script>
<b:else/>
<amp-iframe expr:src='"https://cdn.rawgit.com/sugengid/html/003939ed/rp.html?
url=" + data:blog.homepageUrl' frameborder='0' height='350' id='rp-amp'
layout='fixed-height' resizable='resizable' sandbox='allow-scripts allow-same-
origin allow-modals allow-popups' width='auto'>
<div aria-label='Related Posts' overflow='' role='button' tabindex='0'>Related
Posts</div>
</amp-iframe>
</b:if>
</b:includable>
<b:includable id='shareButtons' var='post'>
<b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button
sb-email' expr:href='data:post.sharePostUrl + "&target=email"'
expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-
text'><data:top.emailThisMsg/></span></a></b:if><b:if
cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-
blog' expr:href='data:post.sharePostUrl + "&target=blog"'
expr:onclick='"window.open(this.href, \"_blank\", \
"height=270,width=475\"); return false;"'
expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-
text'><data:top.blogThisMsg/></span></a></b:if><b:if
cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-
twitter' expr:href='data:post.sharePostUrl + "&target=twitter"'
expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-
link-text'><data:top.shareToTwitterMsg/></span></a></b:if><b:if
cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-
facebook' expr:href='data:post.sharePostUrl + "&target=facebook"'
expr:onclick='"window.open(this.href, \"_blank\", \
"height=430,width=640\"); return false;"'
expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-
link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if
cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut'
expr:href='data:post.sharePostUrl + "&target=orkut"'
expr:title='data:top.shareToOrkutMsg' target='_blank'><span class='share-button-
link-text'><data:top.shareToOrkutMsg/></span></a></b:if><b:if
cond='data:top.showDummy'><div class='goog-inline-block dummy-
container'><data:post.dummyTag/></div></b:if>
</b:includable>
<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'>
<div class='pesan-komentar'><p><data:blogCommentMessage/></p></div>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-
comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-
editor' src='' style='display: none' width='100%'/>
<b:else/>
<div class='pesan-komentar'><p><data:blogCommentMessage/></p></div>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-
comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-
editor' src='' width='100%'/>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>',
'<data:post.communityId/>');
</script>
</div>
</b:includable>
<b:includable id='threaded_comment_js' var='post'>
<script async='async' expr:src='data:post.commentSrc'/>
<script>
(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;
}
<div class='comments-content'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='threaded_comment_js'/>
</b:if>
<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:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
<b:else/>
</b:if>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
<!-- post wrapper end -->
<dl class='profile-datablock'>
<dt class='profile-data'>
<a class='profile-name-link g-profile' expr:href='data:userUrl'
expr:style='"background-image: url(" + data:profileLogo + ");"'
rel='author'>
<data:displayname/>
</a>
<b:if cond='data:hasgoogleprofile'>
<br/>
<div class='g-follow' data-annotation='bubble' data-height='20'
expr:data-href='data:userUrl'/>
</b:if>
</dt>
<b:if cond='data:showlocation'>
<dd class='profile-data'><data:location/></dd>
</b:if>
</div>
</b:includable>
</b:widget>
<b:widget id='Label1' locked='false' title='Labels' type='Label' version='1'>
<b:widget-settings>
<b:widget-setting name='sorting'>ALPHA</b:widget-setting>
<b:widget-setting name='display'>CLOUD</b:widget-setting>
<b:widget-setting name='selectedLabelsList'><![CDATA[Action
Movie,Business,Comedy,Culture,Fashion,Games,Horror,Life &
style,Magazine,Romance,Romcom,Sci-fic,Sports,Technology,Travel]]></b:widget-
setting>
<b:widget-setting name='showType'>ALL</b:widget-setting>
<b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-
widget-content"'>
<b:if cond='data:display == "list"'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span
expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection'
expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection'
expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML1' locked='false' title='' type='HTML' version='1'>
<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 class='clear'/>
<b:section class='sidebar-sticky' id='sidebar-sticky' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts'
type='PopularPosts' version='1'>
<b:widget-settings>
<b:widget-setting name='numItemsToShow'>4</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='showSnippets'>false</b:widget-setting>
<b:widget-setting name='timeRange'>LAST_YEAR</b:widget-setting>
</b:widget-settings>
<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'>
<amp-img alt='data:post.title' expr:src='data:image'
height='72' layout='fixed' width='72'/>
</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>
</div>
</aside>
<!-- sidebar wrapper end -->
<div class='clear'/>
</div>
<!-- wrapper end -->
<div class='sticky-stop'/>
<div id='footer-widget-container'>
<b:section class='footer-widget' id='footer-widget' maxwidgets='1'
showaddelement='yes'/>
</div>
</nav>
</div>
<!-- footer nav menu end -->
</b:if>
<script>
//<![CDATA[
/*
Sticky-kit v1.1.2 | WTFPL | Leaf Corcoran 2015 | http://leafo.net
*/
(function(){var b,f;b=this.jQuery||
window.jQuery;f=b(window);b.fn.stick_in_parent=function(d){var
A,w,J,n,B,K,p,q,k,E,t;null==d&&(d={});t=d.sticky_class;B=d.inner_scrolling;E=d.reca
lc_every;k=d.parent;q=d.offset_top;p=d.spacer;w=d.bottoming;null==q&&(q=0);null==k&
&(k=void 0);null==B&&(B=!0);null==t&&(t="is_stuck");A=b(document);null==w&&(w=!
0);J=function(a,d,n,C,F,u,r,G){var v,H,m,D,I,c,g,x,y,z,h,l;if(!
a.data("sticky_kit")){a.data("sticky_kit",!0);I=A.height();g=a.parent();null!
=k&&(g=g.closest(k));
if(!g.length)throw"failed to find stick parent";v=m=!1;(h=null!=p?
p&&a.closest(p):b("<div />"))&&h.css("position",a.css("position"));x=function(){var
c,f,e;if(!G&&(I=A.height(),c=parseInt(g.css("border-top-
width"),10),f=parseInt(g.css("padding-top"),10),d=parseInt(g.css("padding-
bottom"),10),n=g.offset().top+c+f,C=g.height(),m&&(v=m=!
1,null==p&&(a.insertAfter(h),h.detach()),a.css({position:"",top:"",width:"",bottom:
""}).removeClass(t),e=!0),F=a.offset().top-(parseInt(a.css("margin-top"),10)||0)-q,
u=a.outerHeight(!0),r=a.css("float"),h&&h.css({width:a.outerWidth(!
0),height:u,display:a.css("display"),"vertical-align":a.css("vertical-
align"),"float":r}),e))return l()};x();if(u!==C)return D=void
0,c=q,z=E,l=function(){var b,l,e,k;if(!G&&(e=!1,null!=z&&(--z,0>=z&&(z=E,x(),e=!
0)),e||A.height()===I||x(),e=f.scrollTop(),null!=D&&(l=e-D),D=e,m?
(w&&(k=e+u+c>C+n,v&&!k&&(v=!
1,a.css({position:"fixed",bottom:"",top:c}).trigger("sticky_kit:unbottom"))),e<F&&(
m=!1,c=q,null==p&&("left"!==r&&"right"!==r||a.insertAfter(h),
h.detach()),b={position:"",width:"",top:""},a.css(b).removeClass(t).trigger("sticky
_kit:unstick")),B&&(b=f.height(),u+q>b&&!v&&(c-=l,c=Math.max(b-
u,c),c=Math.min(q,c),m&&a.css({top:c+"px"})))):e>F&&(m=!
0,b={position:"fixed",top:c},b.width="border-box"===a.css("box-sizing")?
a.outerWidth()+"px":a.width()
+"px",a.css(b).addClass(t),null==p&&(a.after(h),"left"!==r&&"right"!==r||
h.append(a)),a.trigger("sticky_kit:stick")),m&&w&&(null==k&&(k=e+u+c>C+n),!
v&&k)))return v=!0,"static"===g.css("position")&&g.css({position:"relative"}),
a.css({position:"absolute",bottom:d,top:"auto"}).trigger("sticky_kit:bottom")},y=fu
nction(){x();return l()},H=function(){G=!
0;f.off("touchmove",l);f.off("scroll",l);f.off("resize",y);b(document.body).off("st
icky_kit:recalc",y);a.off("sticky_kit:detach",H);a.removeData("sticky_kit");a.css({
position:"",bottom:"",top:"",width:""});g.position("position","");if(m)return
null==p&&("left"!==r&&"right"!==r||
a.insertAfter(h),h.remove()),a.removeClass(t)},f.on("touchmove",l),f.on("scroll",l)
,f.on("resize",
y),b(document.body).on("sticky_kit:recalc",y),a.on("sticky_kit:detach",H),setTimeou
t(l,0)}};n=0;for(K=this.length;n<K;n++)d=this[n],J(b(d));return this}}).call(this);
// search form
$(function(){$('a[href="#searchfs"]').on("click",function(e){e.preventDefault(),$
("#searchfs").addClass("open"),$('#searchfs > form >
input[type="search"]').focus()}),$("#searchfs, #searchfs button.close").on("click
keyup",function(e){e.target!=this&&"close"!=e.target.className&&27!=e.keyCode||$
(this).removeClass("open")})});
// nav menu
!function(s){s.fn.menumaker=function(n){var
e=s(this),o=s.extend({format:"dropdown",sticky:!1},n);return this.each(function()
{s(this).find(".button").on("click",function(){s(this).toggleClass("menu-
opened");var n=s(this).next("ul");n.hasClass("open")?
n.slideToggle(150).removeClass("open"):
(n.slideToggle(150).addClass("open"),"dropdown"===o.format&&n.find("ul").show())}),
e.find("li ul").parent().addClass("has-sub"),multiTg=function(){e.find(".has-
sub").prepend('<span class="submenu-button"></span>'),e.find(".submenu-
button").on("click",function(){s(this).toggleClass("submenu-
opened"),s(this).siblings("ul").hasClass("open")?
s(this).siblings("ul").removeClass("open").slideToggle(150):s(this).siblings("ul").
addClass("open").slideToggle(150)})},"multitoggle"===o.format?
multiTg():e.addClass("dropdown"),!0===o.sticky&&e.css("position","fixed")})}}
(jQuery),function(s){s(document).ready(function()
{s("#cssmenu").menumaker({format:"multitoggle"})})}(jQuery);
//]]>
</script>
<script>
//<![CDATA[
jQuery(document).ready(function(){var i=jQuery(window).width();function e()
{jQuery("#sidebar-
sticky").stick_in_parent({parent:"#wrapper",offset_top:70})}i<768?jQuery("#sidebar-
sticky").trigger("sticky_kit:detach"):e(),jQuery(window).resize(function()
{(i=jQuery(window).width())<768?jQuery("#sidebar-
sticky").trigger("sticky_kit:detach"):e()})});
//]]>
</script>
</b:if>
<!--</body>--></body>
</html>