Dibuat Hari ini Mei 2014 ya buat mirip facebook inginya hehe
tapi tak apa ini responsive kok bro :)
Kode HTML Template bisa copy, ini dia<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' 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'>
<head>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
body {background:#000 url(http://themes.googleusercontent.com/image?id=0BwVBOzw_-hbMNjUwODUzYTgtM2FlMi00NjA0LWE4ZjEtM2VmNzI3NDE4Zjhm);margin:0;padding:0;color:#111111;font:normal normal 13px Cuprum, Cuprum;text-align:center;}
a:link {color:#0088ff;text-decoration:none;}
a:visited {color:#0088FF;text-decoration:none;}
a:hover {color:#0066FF;text-decoration:underline;}
a img {
border-radius: 3px;
}
iframe {border:none;overflow:hidden;}
.titlex {display:none;}
button {background:#08F;padding:5px;border-radius:3px;color:#EEE;color:#000;}
button:hover {background:#06F;}
/* Headings */
h1, h2, h3, h4, h5, h6, .post-summary strong, .featuredpost .labeltext strong {font:normal normal 12px 'Cuprum',Cuprum,cuprum;text-transform:none;margin:0;}
.sidebar .widget > h2, .footer .widget > h2, .sf-menu a, ul.navtab li a {font:normal normal 12px 'Dancing Script',Dancing Script,Dancing Script;}
h1 {font-size:190%;}
h2 {font-size:160%;}
h3 {font-size:140%;}
h4 {font-size:130%;}
h5 {font-size:120%;}
h6 {font-size:110%;}
/* Header */
#header-wrapper {margin:auto;overflow:hidden;width:100%;height:218px;background:url(http://www.phoenixfm.com/wp-content/uploads/2013/04/freestyle-big.jpg) repeat center;}
#headtitle {width:800px;margin:28px auto;opacity:0;cursor:pointer;}
#headads {position:relative;background:#444444;float:right;top:-138px;right:50px;height:192px;width:100px;border:2px solid #0088FF;border-radius:3px;box-shadow:0 0 8px 0 #000;opacity:0.9;}
#header {margin:0;}
#header h1, #header p {margin:0;padding:0;font:normal normal 40px 'PT Sans Narrow',serif,sans-serif;text-transform:uppercase;color:#0000;}
#header a {color:#000;text-decoration:none;}
#header a:hover {color:#0000;}
#header .description {margin:0;padding:0 0 10px;text-transform:capitalize;font:normal normal 100% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;}
#header img {margin-left:0;margin-right:auto;}
#headads .widget > h2 {display:none;}
#headads .widget-content {margin:10px 0 0;}
/* Banner 88x31 */
#bukarahasiaads {margin:0px;padding:0 4px;text-align:center;}
#bukarahasiaads img {margin:auto;text-align:center;border-radius:3px;border:1px solid #111;}
#bukarahasiaads img:hover {opacity:0.7;filter:alpha(opacity=70);}
/* Navigation */
#mobilenav {display:none;}
#nav {height:45px;background-color:#444444;border-top:3px solid #0088FF;border-bottom:3px solid #0088FF;position:relative;box-shadow:0 0 8px 0 #000;}
#topmenunav {float:right;height:45px;}
#topnav .sf-menu a {color:#007ABE;height:29px;line-height:29px;}
.sf-menu, .sf-menu * {margin:0;padding:0;list-style:none;}
.sf-menu li {position:relative;}
.sf-menu ul {position:absolute;display:none;top:100%;left:0;z-index:99;}
.sf-menu > li {float:left;margin:0 1px;}
.sf-menu li:hover > ul, .sf-menu li.sfHover > ul {display:block;}
.sf-menu a {display:block;position:relative;}
.sf-menu > li > a {font-size:125%;}
.sf-menu ul ul {top:0;left:100%;}
.sf-menu {float:left;}
.sf-menu ul {min-width:12em;*width:12em;}
.sf-menu a {padding:0 10px;height:45px;line-height:3;text-decoration:none;zoom:1;}
.sf-menu a.home {text-indent:-9999px;padding:0;width:130px;height:130px;margin:10px;margin-top:-100px;background-image:url(http://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-ash4/t1.0-9/10320524_317181485101055_8832933496838467064_n.jpg);background-repeat:x-repeat;border:3px solid #0088FF;box-shadow:0 0 8px 0 #000;}
.sf-menu a {color:#FAFAFA;font-size:120%;}
.sf-menu li {white-space:nowrap;*white-space:normal;transition:background-color .2s;position:relative;}
.sf-menu ul li {background-color:#0088FF;}
.sf-menu ul a {font-weight:normal;height:30px;line-height:30px;}
.sf-menu ul a:hover {padding-left:12px;}
.sf-menu ul ul li {background:#0088FF;}
.sf-menu li:hover > a, .sf-menu li.sfHover, .sf-menu > li > a.current {background-color:#0088FF;transition:none;}
.sf-arrows .sf-with-ul {padding-right:2em;*padding-right:1em;}
.sf-arrows .sf-with-ul:after {content:'';position:absolute;top:50%;right:0.75em;margin-top:-3px;height:0;width:0;border:5px solid transparent;border-top-color: #FAFAFA;}
.sf-arrows > li > .sf-with-ul:focus:after, .sf-arrows > li:hover > .sf-with-ul:after, .sf-arrows > .sfHover > .sf-with-ul:after {border-top-color:white;}
.sf-arrows ul .sf-with-ul:after {margin-top:-5px;margin-right:-3px;border-color:transparent;border-left-color:#FAFAFA;}
.sf-arrows ul li > .sf-with-ul:focus:after, .sf-arrows ul li:hover > .sf-with-ul:after, .sf-arrows ul .sfHover > .sf-with-ul:after {border-left-color:white;}
.sf-menu li > i {position:absolute;top:0;right:5px;width:30px;height:30px;cursor:pointer;display:none;background-color:#CCC;}
/* Top Menu */
#lava {background:#222;float:right;width:34%;border-radius:3px;position:relative;text-align:center;height:45px;}
#lava ul {margin:auto;padding:0px 0px;list-style:none;position:absolute;left:0px;top:4px;z-index:100;}
#lava ul li {position:relative;float:left;}
#lava ul li a {display:block;margin-left:3px;padding:3px 15px;font:bold 11px/30px Tahoma,Verdana,Arial,Sans-Serif;text-decoration:none;color:#08F;text-shadow:0px -1px 0px rgba(0,0,0,0.4);}
#lava #box {position:absolute;left:0px;height:36px;top:5px;z-index:50;background-color:#181818;}
#lava #box .head {height:36px;border-left:2px solid #08F;border-right:2px solid #08F;}
#lava li ul {width:100%;height:auto;background-color:#274D5A;position:absolute;top:100%;left:0px;z-index:77;border-left:2px solid #AD1717;box-shadow:0px 1px 3px rgba(0,0,0,0.4);display:none;}
/* Outer-Wrapper */
#outer-wrapper {margin:0 auto;padding:0;text-align:left;font:normal normal 13px Cuprum, Cuprum;}
#content-wrapper {background:#33aaff;border-left:3px solid #0088FF;border-right:3px solid #0088FF;width:99,9%;padding:15px 0;box-shadow: 0 0 8px 0 #000;float:center}
#main-wrapper {width:100%;margin:10px 0 0 5px;float:left;word-wrap:break-word;overflow:hidden;}
#sidebar-wrapper {width:100%;margin:10px 5px 0 0;float:right;word-wrap:break-word;text-align:center;overflow:hidden;}
/* Post */
.postright {display:block;float:left;background:#FFF;width:100%;transition:center .4s ease-in-out, top .4s ease-in-out .4s;}
.arrow {position:absolute;top:50px;left:-10px;height:30px;width:10px;}
.cover {margin:0;color:#111;position:relative;font-size:11pt;}
a {color:#4444;text-decoration:none;}
.post h2 {text-align:left;margin:5px 0 0;height:30px;overflow:hidden;transition:all 0.2s ease-in-out;background:#222;font-weight: bold;font-size: 18pt;z-index: 10;padding: 4px 12px;}
.post h2 a:link, .post h2 a:visited {color:#ffff;text-decoration:none;}
.crop {
height: 190px;
overflow: hidden;
width: auto;
}
.crop img {
width: 220px;
height: auto;
margin: 12px;
margin-right: 0;
border-radius: 5px 0 0 5px;
}
.crop img:before {
content:"";
width: 0;
height: 0;
position: absolute;
top: 45%;
right: 0;
border: 7px solid rgba(0, 0, 0, 0);
border-color: rgba(0, 0, 0, 0) #FFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.posting {
position: absolute;
bottom: 45px;
right: 0px;
top: 38px;
margin: 12px;
margin-left: 0px;
overflow: hidden;
background: #33aaff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-16e6YIa8FYaDLQtG0Or02Re9gGWqQukQSlgi587hQjXTFpWdKpr0WTTNAwLiA9N6ynxCy7O6a5dv_yspvWLpshist8AiUzy44czR338eno86Xg4UwGdm2dTqX75qIhcXj05VaHijTZgn/w440-h165-no/) no-repeat center;
height: 131px;
width: 100%;
padding: 16px;
font-size: 17px;
color: #111;
text-align: justify;
border-radius: 0 5px 5px 0;
}
.jomore {
font-size: 8pt;
padding: 5px;
margin: 0 0 5px;
background: #444444;
height: 30px;
overflow: hidden;
border-top: 0px;
color: #EEE;
}
.comment-link {
white-space: nowrap;
}
.jomorelink {
transition: all 0.3s ease-in-out;
z-index: 24;
text-align: center;
height: 22px;
width: 100%;
background: #08F;
padding: 2px;
line-height: 25px;
position: absolute;
bottom: 5px;
right: 12px;
border-radius: 5px;
border-bottom: 3px solid #06F;
}
.jomorelink:hover {
background: #06F;
}
a.anes {
font-size: 17px;
color: #FAFAFA;
transition: all 0.4s ease-in-out;
font-family: sans-serif;
text-decoration: none;
}
.categ {
display: none;
}
.categ a:link, .categ a:visited {
text-decoration: none;
padding: 3px;
}
.title h2 {
text-decoration: none;
padding: 7px;
padding-left: 15px;
background: #fff;
margin-bottom: 15px;
line-height: 30px;
text-align: left;
margin: auto;
margin-top: 5px;
transition: all 0.3s ease-in-out;
font-weight: 200;
font-size: 17pt;
color: #FFF;
border-radius: 2px;
}
.title h2 a:link, .title h2 a:visited {
color: #ffff;
text-decoration: none;
}
.data {
padding: 4px;
margin: 6px 10px;
background: #fff;
font-size: 17px;
font-weight: 200;
letter-spacing: 0.01em;
color: #FFF;
border-radius: 3px;
}
.author, .clock {
padding: 3px 20px;
margin: 0px 0px 0px -10px;
font-size: 15px;
color: #06F;
}
.clock {
float: right;
}
.pagepost {
background-color: #FFF;
width: 100%;
margin: 10px auto;
padding: 10px 15px;
line-height: 1.6em;
border-left: 3px solid #08F;
border-right: 3px solid #08F;
border-radius: 3px;
box-shadow: 0 0 10px -3px #000;
}
.pagepost img {
padding: 3px;
box-shadow: 0 0 6px 0 #000;
height: auto;
margin: 8px;
}
.pagepost img:hover {
transition: all 0.3s;
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-webkit-transform: scale(1.1);
}
blockquote {
color: #111;
border-right: 3px solid #08F;
border-left: 3px solid #08F;
padding: 15px;
margin: 20px;
overflow: hidden;
background: #DDD;
}
.post-footer-line-1 {
border-top: 1px solid #FAFAFA;
}
.breadcrumb {
width: 100%;
float: left;
}
.breadcrumb {
overflow: hidden;
background: #222;
margin: -4px 0 5px -15px;
width: 100%;
font-size: 12px;
height: 30px;
z-index: 9;
}
.breadcrumb ul {
margin: auto;
margin-left: -20px;
}
.breadcrumb li {
position: relative;
display: block;
color: #EEE;
float: left;
text-decoration: none;
font-weight: 300;
font-size: 10pt;
letter-spacing: 0.02em;
padding: 5px;
}
.breadcrumb ul li a {
padding-right: 10px;
}
/* Posts */
.index h2.post-title, .archive h2.post-title {position:absolute;left:-9999px;}
.h2 {background:#222;height:25px;margin:7px 0;padding:5px 10px;font-size:21px;font-weight:bold;line-height:1;cursor:pointer;}
.h2 a {color:#FFFFFF;font-family:sans-serif;}
.h2 a:hover {font-style:italic;text-decoration:none;}
a.thumbimgx {width:150px;height:150px;display:block;float:left;margin:10px;border: 4px solid #DDD;border-radius: 3px;}
a.thumbimgx img {width:100%;height:100%;}
.post-summary strong {font-size:220%;}
.post-summary strong a {text-decoration:none;}
.post-more-link {float:right;padding:2px 5px;margin: 7px;padding-right: 3px;}
.post-more-link a {display:inline-block;padding:7px 10px;text-decoration:none;background-color:#F8F8F8;box-shadow:0 1px 2px #C4C4C4,inset 0 1px 2px #FFF;border-radius:2px;border:1px solid #D3D3D3;position:relative;}
.post-more-link a:hover, .post-footbg {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter:alpha(opacity=80);opacity:0.8;}
.post-more-link a:active {top:1px;box-shadow:0 0 2px #C4C4C4,inset 0 1px 2px #FFF;}
.post-summary p {font-size: 12px;background: #DDD;line-height: 1.6em;margin: auto;margin-right: 10px;padding: 12px 15px;float: right;width: 100%;border-radius: 5px;}
.post {position: relative;overflow: hidden;width: 100%;margin: 20px 0;background: #FFFFFF;border-left: 3px solid #0088FF;border-right: 3px solid #0088FF;border-radius: 3px;box-shadow: 0 0 10px -3px #000;}
.index .post-footer, .archive .post-footer {position:absolute;top:0;width:200px;height:200px;left:0;z-index:0;display:none;color:#FFFFFF;}
.index .post-footer a, .archive .post-footer a {color:#FFFFFF;text-decoration:none;}
.index .post-footer .post-footer-line-1, .archive .post-footer .post-footer-line-1 {padding:10px;line-height:1.6em;}
.index .dummy-container, .archive .dummy-container {width:100%;overflow:hidden;height:20px;}
.post-footbg {background-color:#0088FF;position:absolute;top:0;height:100%;width:100%;z-index:-1;}
.datex {position:absolute;top:0;right:15px;background-color:#0088FF;color:#FFFFFF;padding:3px 5px;text-align:center;text-shadow:0 1px 1px #888686;border-radius: 0px 0px 3px 3px;cursor: pointer;}
.datex strong, .datex span, .datex small {display:block;font-size:9px;}
.datex strong {font-size:22px;}
.datex.hidex {display:none;}
.tr-caption-container img {border:none;padding:0;}
.post blockquote {margin:1em 20px;}
.post blockquote p {margin:.75em 0;}
.index #Blog1 {margin: 10px;position: relative;}
.archive #Blog1 {padding:10px;margin:10px 10px 10px 5px;background-color:#FFFFFF;border:1px solid #DFDFDF;position:relative;}
.status-msg-border {border:1px solid #DFDFDF;}
.status-msg-bg {background-color:#FFFFFF;}
.item .post, .static_page .post, .error-custom {background-color:#FFFFFF;width:100%;margin: 10px auto;padding: 10px 15px;line-height: 1.6em;}
.item .post-footer, .static_page .post-footer {padding:10px 15px;margin:0 -15px;margin-top:10px;color:#FFFFFF;background-color:#0088FF;border-top:1px solid #DFDFDF;}
.item .post-footer a, .static_page .post-footer a {color:#FFFFFF;}
.item .post h1.post-title, .static_page .post h2.post-title {font-size: 200%;margin: 5px 0 10px;padding: 5px 15px;background: #222222;border-radius: 3px;}
.item .post h1.post-title a, .static_page .post h2.post-title a {color:#0088FF;text-decoration:none;font-weight: bold;}
.post-body h1, .post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6 {margin-bottom:10px;}
.post-body h1 {font-size:180%;}
.post-body h2 {font-size:160%;}
.post-body h3 {font-size:140%;}
.post-body h4 {font-size:130%;}
.post-body h5 {font-size:120%;}
.post-body h6 {font-size:110%;}
.post-body .left {float:left;margin:0 10px 5px 0;}
.post-body .right {float:right;margin:0 0 5px 10px;}
.post-body .center {margin:10px 0 15px 0;display:block;text-align:center;}
.breadcrumbs {padding:5px 10px;background-color:#DDD;border:1px solid #DFDFDF;border-radius: 3px;margin: auto;margin-bottom: 12px;}
.post-body blockquote {margin: 10px;padding: 10px;font-size: 110%;line-height: 1.6em;color: #222;background: #DDD;border-left: 5px solid #0088FF;border-right: 5px solid #0088FF;}
.post-body iframe {max-width: 100%;}
.pager-isi {overflow:hidden;margin:0 10px;}
.pager-isi a, .pager-isi .linkgrey {width:100%;display:block;float:left;padding:10px 0;font-size:120%;text-decoration:none;}
.pager-isi h6 {color:#2C2C2C;font-size:100%;margin:0;}
.pager-isi h5 {font-size:90%;margin:0;}
a.blog-pager-newer-link {text-align: left;
position: relative;
color: #EEE;
text-decoration: none;}
a.blog-pager-newer-link h6, a.blog-pager-newer-link h5 {padding-left:20px;}
a.blog-pager-older-link {text-align: right;
position: relative;
color: #EEE;
text-decoration: none;}
a.blog-pager-older-link h6, a.blog-pager-older-link h5 {padding-right:20px;}
.pager-isi .linkgrey.left {text-align:left;}
.pager-isi .linkgrey.right {text-align:right;}
a.blog-pager-newer-link span {width:0;height:0;position:absolute;top:50%;left:0;margin-top:-8px;border:8px solid transparent;border-right-color:#0088FF;}
a.blog-pager-older-link span {width:0;height:0;position:absolute;top:50%;right:0;margin-top:-8px;border:8px solid transparent;border-left-color:#0088FF;}
.post-more-link a.moreinfo {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZc_bVQKni7VCEwM84Z0n_n77esQS1ChWNBJrSEZkE2KB0ZKsRPgtpoACY42LYq-xwYLTKmZUDFA5d6vfj_k9ULZs39JbJ34PMDS1n2m2qYPiNjxpi1qWnW7kRi2IJL_XKpKEbK6FGklA/s1600/sprite1.png);background-repeat:no-repeat;background-position:3px -99px;text-indent:-9999px;width:30px;padding:7px 0;}
.post-timestamp .timestamp-link, .post-author.vcard .fn, .post-comment-link .comment-link, .post-labels span {padding-left:22px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZc_bVQKni7VCEwM84Z0n_n77esQS1ChWNBJrSEZkE2KB0ZKsRPgtpoACY42LYq-xwYLTKmZUDFA5d6vfj_k9ULZs39JbJ34PMDS1n2m2qYPiNjxpi1qWnW7kRi2IJL_XKpKEbK6FGklA/s1600/sprite1.png);background-repeat:no-repeat;display:block;padding-bottom:2px;}
.post-timestamp .timestamp-link {background-position:-2px -29px;}
.post-author.vcard .fn {background-position:-2px -52px;}
.post-comment-link .comment-link {background-position:-2px -73px;}
.post-labels span {background-position:-3px -173px;}
.error-custom {padding-bottom:200px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD1tXbaXtaGi78M7wdzRNHeb-0iKgsFmy927KgOKpXSCvijirKlJ52ls0Hog0VltMhl3l0bK4tGpzOACNVCM82L_125i0gSNVwV3y8BecN80wYTh7grMH-nO32QhRrJbuo2gTnCC1GBoI/s1600/backerror.png);background-repeat:no-repeat;background-position:100% 100%;}
.error-custom h2 {color:#0088FF;text-decoration:none;font-size:200%;margin:5px 0 10px;padding:5px 0;border-bottom:1px solid #DFDFDF;}
/* Comments */
.comments {background-color:#FFFFFF;border-left:3px solid #0088FF;border-right:3px solid #0088FF;margin:20px 7px;padding: 10px 15px;box-shadow:0 0 10px -3px #000;border-radius:5px;}
.comments > h4 {padding:5px 0;font-size:150%;margin-top:5px;}
.comments .comments-content .datetime {font-size:85%;}
.comments .continue a {text-decoration:none;}
.comments .comments-content .comment-replies .comment-replybox-thread #form-wrapper {padding:10px 15px;}
.comments .comments-content .comment-replies .comment-replybox-thread #form-wrapper, .comments .continue a {border:1px solid #DFDFDF;background-color:#F5F5F5;box-shadow:inset 0 1px 5px #DFDFDF;}
.comments .comments-content .inline-thread {border:1px solid #DFDFDF;border-left:2px solid #0088FF;}
.comments .comments-content .comment-content {line-height:1.5em;}
.comments .comments-content .icon.blog-author {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZc_bVQKni7VCEwM84Z0n_n77esQS1ChWNBJrSEZkE2KB0ZKsRPgtpoACY42LYq-xwYLTKmZUDFA5d6vfj_k9ULZs39JbJ34PMDS1n2m2qYPiNjxpi1qWnW7kRi2IJL_XKpKEbK6FGklA/s1600/sprite1.png);background-repeat:no-repeat;background-position:-1px -2px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter:alpha(opacity=60);opacity:0.6;}
.commentarea {border:1px solid #DFDFDF;border-left:2px solid #0088FF;margin-bottom:10px;padding:5px;line-height:1.5em;}
.commentarea .datecm {float:right;font-size:80%;}
.comment-form {max-width:100%;}
#blog-pager-newer-link {float: left;
text-decoration: none;
background: #222;
padding: 7px;
border-radius: 3px;
border-left: 5px solid #08F;}
#blog-pager-older-link {float: right;
text-decoration: none;
background: #222;
padding: 7px;
border-radius: 3px;
border-right: 5px solid #08F;}
#blog-pager > a {
display: none;
}
.feed-links {display:none;}
#comments h3 {font-size:18px;background:#222;color:#fff;font-weight:bold;width:100%;margin:0 0 20px -15px;padding:7px 15px;border-top:7px solid#FFF;}
.comment_avatar_wrap {width:42px;height:42px;border:1px solid #C4C4C4;border-top-color:#E4E4E4;border-left-color:#E4E4E4;background:#fcfcfc;padding:4px;border-radius:2px;text-align:center;margin-bottom:20px;}
#comments .avatar-image-container {float:left;margin:0 10px 0 0;width:42px;height:42px;max-width:42px;max-height:42px;padding:0;margin-bottom:10px;}
#comments .avatar-image-container img {width:42px;height:42px;max-width:42px;max-height:42px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxjrJ8LpFsOw4NsZ8-Q6x1sjY3-Aw3tprX_wyHEwwRsx-d31_nWzD3XUv3CKcCKjxSL68p5FWN8zuspoxusD4GiNzUdum8tdf5CRDCGnkEVXAxnL7haLj6xVz_Ct4CTtPo61fjSPnRx4wy/s1600/anon.jpg) no-repeat;}
.comment_name a {font-weight:bold;padding:5px 0 0 0;font-size:13px;text-decoration:none;}
.comment_admin .comment_name {font-weight:bold;padding:10px;font-size:13px;text-decoration:none;background:#eee;}
.comment_admin .comment_date {font-weight:normal;font-size:11px;}
.comment_name {background:#eee;padding:10px;font-size:13px;font-weight:bold;position:relative;}
.comment_service {margin-top:5px}
.comment_date {color:#a9a9a9;float:right;font-size:11px;font-weight:normal;margin-top:-3px;}
.comment_date a {color:#a9a9a9;float:right;font-size:11px;font-weight:normal;}
.comment_date a:hover {color:#a9a9a9;text-decoration:none;}
.comment_body {margin-left:66px;margin-top:-72px;background:#fcfcfc;border:1px solid #d1d1d1;padding:10px;border-radius: 2px;}
.comment_body p {line-height:1.5em;margin:5px 0 0 0;color:#666;border:1px solid #eee;font-size:13px;word-wrap:break-word;background:#FFF;padding:10px;}
.comment_inner {padding-bottom:5px;margin:5px 0 5px 0;}
.comment_child .comment_wrap {padding-left:7%;}
.comment_reply {display:inline-block;margin-top:8px;margin-left:-5px;padding:1px 12px;color:#FFF !important;text-align:center;text-decoration:none;border-radius:2px;background:#08F;font:11px/18px sans-serif;transition:background-color 1s ease-out 0s;}
.comment_reply:hover {text-decoration:none !important;background:#06F;}
.unneeded-paging-control {display:none;}
.comment-form {max-width:100%;!important;}
#comment-editor {width:100%!important;background:#DDD url('data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBBamF4TG9hZC5pbmZvACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACsACwAAAjIMjhjLltnYg/PFChveVvPLheA2hlhZoWYnfd6avqcMZy1J14fKLvrEs/k+uCAgMkwVAAAh+QQBCgACACwAAAAAKwALAIFPg6+qw9gAAAAAAAACPRSOKMsSD2FjsZqEwax885hh3veMZJiYn8qhSkNKcBy4B2vNsa3pJA6yAWUUGm9Y8n2Oyk7T4posYlLHrwAAIfkEAQoAAgAsAAAAACsACwCBT4OvqsPYAAAAAAAAAj1UjijLAg9hY6maalvcb+IPBhO3eeF5jKTUoKi6AqYLwutMYzaJ58nO6flSmpisNcwwjEfK6fKZLGJSqK4AACH5BAEKAAIALAAAAAArAAsAgU+Dr6rD2AAAAAAAAAJAVI4oy5bZGJiUugcbfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7') no-repeat 50% 30%;border-radius:5px;margin-bottom:20px;position: relative}
.comment_form a {text-decoration:none;text-transform:uppercase;font-weight:bold;font-family:Arial, Helvetica, Garuda, sans-serif;font-size:15px;}
.comment_form a:hover {text-decoration:underline;}
.comment-form p {background:#222;padding:10px;margin:5px 0 5px 0;color:#EEE;font-size:13px;line-height:20px;width:97%;border-radius:3px;position:relative;}
.comment-form p:after {content:"";width:0;height:0;position:absolute;bottom:-16px;left:15px;border:8px solid transparent;border-color:#222 transparent transparent;}
.comment_reply_form {padding:0 0 0 70px;}
.comment_reply_form .comment-form {width: 99%;}
.comment_emo_list {display:none;}
.emoWrap {background: #EEE;padding: 10px 15px;border-radius: 5px;margin: 10px auto;}
.comment_emo_list .item {float:left;text-align:center;margin:10px 10px 0 0;height:40px;width:41px;}
.comment_emo_list span {display:block;font-weight:bold;font-size:11px;letter-spacing:1px;}
.comment_emo_list span {display:block;font-weight:bold;font-size:11px;letter-spacing:1px;}
.comment_youtube {max-width:100%!important;width:400px;height:225px;display:block;margin:auto}
.comment_img {max-width:100%!important;}
.deleted-comment {padding:10px 10px 10px 10px;display:block;color:#CCC;}
.comment_arrow {display:block;width:9px;height:18px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY2p6hUfeEdIWbeOQla1_1Vn2_4DlWX9w_ylj6gZ1lkDhp6x_3su9WpXIvU-86q3KoWLK0CplDAaLxFiPgC-32zoB073bOdqSzFaBEzbQ8nZ1fQ7RZlVljbQ1ORn2Q54YZtQG7i27j-V4/s1600/comment-arrow.gif) no-repeat;position:absolute;margin-left:-19px;}
.comment_header {width:50px}
#respond {overflow:hidden;padding-left:10px;clear:both;}
.comment_avatar img {width:42px;height:42px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxjrJ8LpFsOw4NsZ8-Q6x1sjY3-Aw3tprX_wyHEwwRsx-d31_nWzD3XUv3CKcCKjxSL68p5FWN8zuspoxusD4GiNzUdum8tdf5CRDCGnkEVXAxnL7haLj6xVz_Ct4CTtPo61fjSPnRx4wy/s1600/anon.jpg) no-repeat}
.comment-delete img {float:right;margin-left:15px;margin-top:3px;margin-right:10px}
.comment_author_flag {display:none}
.comment_admin .comment_author_flag {display:inline;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlmiAuJYutPhC9FO6Be_6im2PqvNeLeuaLaeK7e0Sxc-G3OmwM3abXnBuYUxEmOJyZIUjP7mW4BtqKcZ1O1ZCOsgisEsbpWU8ib3cuC2Rk1FAbgH2nd6emnD5G1d3MtaTMfT-v0ojRB5A/s1600/author.png)no-repeat;font-size:13px;font-weight:normal;padding: 2px 6px;right:-23px;margin-top:-23px;color:#fff;border-radius:4px;text-transform:uppercase;position:absolute;width:36px;height:36px;}
/* Sidebar Content and Footer Content */
.sidebar {color:#666666;line-height:1.5em;}
.sidebar ul, .footer ul {list-style:none;margin:0 0 0;padding:0 0 0;}
.sidebar li, .footer li {margin:0;padding-top:0;padding-right:0;padding-bottom:.25em;padding-left:15px;line-height:1.5em;}
.sidebar .widget > h2 {background-color:#F5F5F5;margin:0;padding:8px 10px;font-size:140%;border-bottom:1px solid #DFDFDF;margin-bottom:10px;color:#0088FF;text-shadow:0 1px 1px #DFDFDF;font-weight:bold;}
.title-sidebar-atas {display:none;}
.sidebar .widget {background-color:#FFFFFF;margin:0 5px 15px 0;margin:10px;padding:10px 0;border-left:3px solid #0088FF;border-right: 3px solid #0088FF;border-radius:3px;box-shadow:0 0 10px -3px #000;}
.sidebar .widget-content {padding:0;margin:10px;}
ul.navtab, ul.navtab li {padding:0;margin:0;list-style:none;}
ul.navtab li {width:99px;float:left;text-align:center;overflow:hidden;}
ul.navtab {padding:10px 5px 0;background-color:#0088FF;height:36px;border-bottom:1px solid #0088FF;border-radius: 3px 3px 0 0;}
ul.navtab li a {height:35px;line-height:35px;display:block;text-decoration:none;text-transform:uppercase;background-color:#222222;color:#FFFFFF;border-radius:5px 5px 0 0;border:1px solid #06F;border-bottom:0;margin:0 1px;font-size:110%;}
ul.navtab li a.current {background-color:#FFFFFF;position:relative;z-index:2;height:36px;color: #0088FF;font-weight: bold;}
#sidebar-tengah {background-color:#FFFFFF;margin:10px;border-radius:3px;box-shadow:0 0 10px -3px #000;border-bottom:7px solid #0088FF;}
#sidebar-tengah .widget {background-color:transparent;border:0;margin:0;}
#sidebar-tengah .widget > h2 {display:none;}
#footer-wrapper {padding:5px 0 0;background-color:#222222;color:#FAFAFA;border-top:5px solid #0088FF;}
#footer-wrapper .row {padding:10px 5px;overflow:hidden;}
#footer-wrapper .grid {float:left;width:25%;}
.footer .widget {padding:0;margin:0 10px;}
.footer .widget > h2 {background-color:#222222;font-size:160%;margin:0 0 10px;padding:0 0 5px;color:#0088FF;border-bottom: 1px solid #000000;}
/* Profile */
.profile-img {margin:0 5px 5px 0;width:65px;height:65px;}
.profile-data {line-height:1.6em;}
.profile-data a {font-weight:bold;font-size:110%;}
.profile-textblock {line-height:1.5em;font-size:90%;font-style:italic;}
a.profile-link {text-decoration:none;float:right;font-size:75%;display:inline-block;padding:3px 5px;}
/* Layout */
body#layout .list-tabwrap {overflow:hidden;}
body#layout .sidebarmd-widget {float:left;width:100%;}
body#layout ul.navtab {display:none;}
#manualslide {overflow:hidden;}
body#layout #manualslide .add_widget, body#layout #manualslide .widget {width:100%;float:left;}
/* other */
img {max-width:100%;height:auto;width:auto\9;}
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"] {border:1px solid #DFDFDF;padding:5px 8px;outline:0;display:inline-block;border-radius:2px;}
input[type="submit"], input[type="button"], button {border:0;padding:6px 8px;outline:0;color:#FFFFFF;background-color:#0088FF;display:inline-block;cursor:pointer;position:relative;border-radius:2px;}
input[type="submit"]:active, input[type="button"]:active, button:active {top:1px;}
/* Widget Follow By Email */
.widget.FollowByEmail {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGDKIdKhZTJkS94s4O5r_l1R3i8-Fm7hF5Isra-Swrbo44fBIOnoPYUWIYsQI34dAXMtzV-xRpqpJqdaHsRD_FEdy68Qgyps6kH4l3JPqyncMisamNUeWK6C0aVEmagE8XgwTukFFlzAoT/s80/picons20.png);background-repeat:no-repeat;background-position:-10px 130%;}
.widget.FollowByEmail .widget-content {padding:10px 0;}
.FollowByEmail .follow-by-email-inner .follow-by-email-address {border:1px solid #D3D3D3;width:90%;padding:1px 5%;outline:0;}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit {background-color:#0088FF;position:relative;}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit:active {top:1px;}
/* Widget Recent Comment */
ul.rcomnetxx, ul.rcomnetxx li {list-style:none;padding:0;margin:0;overflow:hidden;}
ul.rcomnetxx {padding:10px 0;}
ul.rcomnetxx li {padding:5px 0;}
ul.rcomnetxx .kmtimg {display: block;
float: left;
margin: 0 5px 5px 0;
width: 50px;
height: 50px;
padding: 1px;
border: 2px solid #08F;
border-radius: 5px;}
ul.rcomnetxx .date {font-size:9px;}
ul.rcomnetxx p {margin: 5px 0;
background: #DDD;
padding: 5px;
border-radius: 5px;}
/* Widger Popular Post */
.PopularPosts .item-thumbnail {float: left;
margin: -10px 5px 5px 8px;
width: 72px;
height: 72px;}
.PopularPosts img {width: 72px;
height: 72px;
padding: 1px;
border-radius: 50%;
border: 2px solid #08F;}
.item-snippet {
background: #DDD;
color: #111;
padding: 5px;
border-radius: 5px;
}
/* Search Box and Result */
#searchnya {float:right;}
#searchnya input {padding:8px 10px;width:220px;margin:7px 0 0;background-color:#0F0F0F;color:#D1CDCD;}
#searchnya input, #searchnya button {border:0;border-radius:3px;display:inline-block;outline:0;font-size:12px;}
#searchnya input:focus {background-color:#0F0F0F;color:#D1CDCD;}
#searchnya button {background-color:#0088FF;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlZTZrdQPnm54CEoz65EZmE7MqDNgpD5uyxb-nrDzM72MAkM1vbZCvW3qwveo_lRlwjIMT1crPBXrFV0B910rEFBQL7OzG5ySnO47N-eVY2FVPg4CWfFh_ExpLR9fLzbYe7KH4Uik6on8/s22/button-search.png);background-position:50% 4px;background-repeat:no-repeat;padding:0;text-indent:-9999px;width:31px;height:31px;margin-right:5px;cursor:pointer;}
#search-result {background-color: rgba(17, 17, 17, 0.8);padding: 10px;margin: auto;margin-left: -17px;width: 290px;height: auto;position: absolute;top: 48px;z-index: 99;box-shadow: 0 0 7px 0 #000;border-radius: 0 0 3px 3px;display: none;}
#search-result * {margin:0 0 0 0;padding:0 0 0 0;}
#search-result h4, #search-result strong {display: block;
margin: 0 30px 10px 0;
font-size: 13px;
background: #111;
padding: 5px;
color: #08F;
border-radius: 3px;}
#search-result ol {list-style:none;overflow:hidden;max-height:450px;}
#search-result ol:hover {overflow:auto;}
#search-result ol a:hover {text-decoration:underline;}
#search-result .close {display: block;
position: absolute;
top: 6px;
background: #111;
padding: 0 7px;
font-size: 27px;
right: 6px;
line-height: normal;
color: #08F;
text-decoration: none}
#search-result li {padding:5px 0;}
#search-result strong {margin:0 0 3px 0;display:block;}
#search-result img {float:left;display:block;margin:0 5px 0 0;border-radius:2px;}
#search-result p {font-size:90%;}
/* Digital Time */
.tgltop {float:left;color:#FAFAFA;display:block;line-height:20px;margin:12px;padding-left:10px;padding-right:10px;border-left:7px ridge #0088FF;border-right:7px ridge #0088FF;}
/* News Ticker */
#topmenu {background-color:#222222;overflow:hidden;position:relative;height:45px;width:100%;border-bottom:4px solid #0088FF;box-shadow:0 0 8px 0 #000;}
#latst {width:100%;margin:auto;}
#newsticker {color:#FAFAFA;background:#222222;border-radius:3px;box-shadow:0 0 10px -3px #000;}
#newsticker a {color:#FAFAFA;text-decoration:none;}
.left .ticker-controls, .left .ticker-content, .left .ticker-title, .left .ticker {float:left;}
.ticker-wrapper.has-js {height:34px;overflow:hidden;margin:0;line-height:34px;}
.ticker {width:100%;position:relative;overflow:hidden;}
.ticker-title {background-color:#0088FF;padding:0 10px;color:#FAFAFA;font-weight:bold;border-radius:3px;}
.ticker-content {margin:0;position:absolute;font-weight:bold;overflow:hidden;white-space:nowrap;line-height:34px;padding:0 10px;font-size:10px;}
.ticker-content .date {padding:0 5px 0 0;border-right:1px solid #272727;}
.ticker-swipe {position:absolute;top:0;background-color:#222222;display:block;width:100%;height:30px;}
.ticker-swipe span {margin-left:1px;background-color:#222222;border-bottom:1px solid #FAFAFA;height:23px;width:7px;display:block;}
.ticker-controls {padding:8px 0 0;margin:0;list-style-type:none;float:left;display:none;}
.ticker-wrapper.has-js:hover .ticker-controls {display:block;}
.ticker-controls li {padding:0;margin-left:5px;float:left;cursor:pointer;height:16px;width:16px;display:block;}
.ticker-controls li.jnt-play-pause {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTQcgOOqXWMoauCD2zkUoltgjkNpzQYJNojPGlnFYAmJ55fOBzVpnDXMAVTQUadf6Ad2xACCtZH8ia8Wz248sdI1p_v6eExTFDdCFLUpM3Zin6ts4Q32Xle-1YnDM9QbGhm1VMzWc3jAw/s1600/controls.png);background-position:32px 16px;}
.ticker-controls li.jnt-play-pause.over {background-position:32px 32px;}
.ticker-controls li.jnt-play-pause.down {background-position:32px 0;}
.ticker-controls li.jnt-play-pause.paused {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTQcgOOqXWMoauCD2zkUoltgjkNpzQYJNojPGlnFYAmJ55fOBzVpnDXMAVTQUadf6Ad2xACCtZH8ia8Wz248sdI1p_v6eExTFDdCFLUpM3Zin6ts4Q32Xle-1YnDM9QbGhm1VMzWc3jAw/s1600/controls.png);background-position:48px 16px;}
.ticker-controls li.jnt-play-pause.paused.over {background-position:48px 32px;}
.ticker-controls li.jnt-play-pause.paused.down {background-position:48px 0;}
.ticker-controls li.jnt-prev {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTQcgOOqXWMoauCD2zkUoltgjkNpzQYJNojPGlnFYAmJ55fOBzVpnDXMAVTQUadf6Ad2xACCtZH8ia8Wz248sdI1p_v6eExTFDdCFLUpM3Zin6ts4Q32Xle-1YnDM9QbGhm1VMzWc3jAw/s1600/controls.png);background-position:0 16px;}
.ticker-controls li.jnt-prev.over {background-position:0 32px;}
.ticker-controls li.jnt-prev.down {background-position:0 0;}
.ticker-controls li.jnt-next {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTQcgOOqXWMoauCD2zkUoltgjkNpzQYJNojPGlnFYAmJ55fOBzVpnDXMAVTQUadf6Ad2xACCtZH8ia8Wz248sdI1p_v6eExTFDdCFLUpM3Zin6ts4Q32Xle-1YnDM9QbGhm1VMzWc3jAw/s1600/controls.png);background-position:16px 16px;}
.ticker-controls li.jnt-next.over {background-position:16px 32px;}
.ticker-controls li.jnt-next.down {background-position:16px 0;}
.js-hidden {display:none;}
/* Label */
.Label li {float:left;padding:0;margin:0 2px 5px;background-color:#F8F8F8;border-radius:2px;border:1px solid #D3D3D3;position:relative;}
.Label li a {display:inline-block;padding:4px 0 4px 8px;text-decoration:none;}
.Label li span {display:inline-block;padding:4px 8px 4px 4px;}
.Label li:active {top:1px;}
.Label li span:first-child {padding:4px 0 4px 8px;}
.footer .Label li {background-color:#0088FF;border:1px solid #0088FF;font-size: 90%;}
.footer .Label li a {color:#FFF;}
/* Featured Post */
.flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {outline:none;}
.slides, .flex-control-nav, .flex-direction-nav {margin:0;padding:0;list-style:none;}
.featuredpost {max-height:350px;position:relative;overflow:hidden;}
#autoslide .widget > h2, #manualslide .widget > h2 {display:none;}
#autoslide .widget, #manualslide .widget {margin:10px 10px 15px 5px;}
.featuredpost ul, .featuredpost li, .featuredpost ol {padding:0;margin:0;list-style:none;}
#autoslide .widget-content {margin:10px;}
.featuredpost .featpost li {overflow:hidden;height:320px;position:relative;}
.featuredpost .featpost img {width:100%;height:100%;}
.featuredpost .labeltext {bottom:30px;position:absolute;max-width:100%;padding:12px 10px;background:rgba(0, 0, 0, 0.85);border-radius:0 5px 5px 0;}
.featuredpost .labeltext strong {position:absolute;font-size:160%;font-weight:bold;background:rgba(0, 136, 255, 0.9);bottom:55px;z-index:10;padding:5px 10px;overflow:hidden;border-radius:0 5px;}
.featuredpost .labeltext a {color:#FAFAFA;text-decoration:none;}
.featuredpost .labeltext p {margin:8px 0 0;color:#FAFAFA;}
.featuredpost .flex-control-paging {position:absolute;bottom:7px;right:15px;}
.featuredpost .flex-control-paging li {float:left;margin:0 4px;}
.featuredpost .flex-control-paging a {display:block;background-color:#222222;text-indent:-9999px;width:12px;height:12px;border:2px solid #0088FF;cursor:pointer;border-radius:50%;}
.featuredpost .flex-control-paging a.flex-active {background-color:#0088FF;}
.featuredpost .flex-direction-nav a {top:50%;position:absolute;width:40px;height:35px;margin-top:-15px;background-color:rgba(34, 34, 34, 0.8);text-indent:-9999px;display:none;}
.featuredpost .flex-direction-nav a.flex-next {right:2px;border-radius:5px 0 0 5px;}
.featuredpost .flex-direction-nav a.flex-prev {left:2px;border-radius:0 5px 5px 0;}
.featuredpost:hover .flex-direction-nav a {display:block;outline:0;}
.featuredpost .flex-direction-nav i {width:0;height:0;position:absolute;top:50%;left:50%;margin-top:-6px;border:6px solid transparent;}
.featuredpost .flex-direction-nav a.flex-next i {margin-left:-2px;border-left-color:#FFFFFF;}
.featuredpost .flex-direction-nav a.flex-prev i {margin-left:-10px;border-right-color:#FFFFFF;}
#manualslide1 {max-height:385px;overflow:hidden;}
#manualslidenya {margin:10px;background-color:#FFFFFF;border-radius:2px;position:relative;box-shadow:0 0 10px -3px #000;}
#manualslidenya > div {border-top:7px solid #0088FF;border-bottom:7px solid #0088FF;border-radius:2px;padding:0 2px;}
#top {position:fixed;right:10px;bottom:10px;cursor:pointer;width:40px;height:40px;border-radius:2px;background-color:#0088FF;text-indent:-9999px;display:none;}
#top span {position:absolute;top:50%;left:50%;margin-left:-8px;margin-top:-12px;height:0;width:0;border:8px solid transparent;border-bottom-color:#FFF;}
#credit {padding:10px 0;text-align:center;border-top:1px solid #000000;}
.loadingxx {height:200px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQKHkyMsUWjnweow5e4omtcCUBDpK0mLC4BYaILHx2U_rNh5pyqqB6kc3_UUoAHOlArK3-wXD8YpRp4QKHI0QKCSIIUl4k96RoP5k1t9wP_Q9R1T9FhLSej_Z8awyLWrUP16_g5t1It14/s1600/anim_loading_sm_082208.gif);background-repeat:no-repeat;background-position:50% 50%;}
/* Related Post */
.related-post {margin: 35px 0 0 -8px;
margin-left: -8px;
width: 100%;
padding: 10px;
font: normal normal 11px/1.4 Arial,Sans-Serif;
background: #FFF;
border-left: 3px solid #08F;
border-right: 3px solid #08F;
border-radius: 5px;
box-shadow: 0 0 10px -3px #000;}
.related-post h4 {font-size:150%;color:#EEE;margin:auto;padding:7px;padding-left:10px;background:#222;border-radius:3px;}
.related-post a {color:#08F}
.related-post a:hover {color:#06F}
.related-post-style-5, .related-post-style-5 li {margin:0;padding:0;list-style:none;word-wrap:break-word;overflow:hidden;}
.related-post-style-5 .related-post-item {display:block;float:left;height:auto;padding:10px;}
.related-post-style-5 .related-post-item:first-child {border-left:none}
.related-post-style-5 .related-post-item-wrapper {display:block;position:relative;overflow:hidden;}
.related-post-style-5 .related-post-item-thumbnail {display:block;margin:0;width:100%;height:111px;max-width:none;max-height:none;background-color:#EEE;border:1px solid #DDD;border-radius:3px;padding:3px;}
.related-post-style-5 .related-post-item-tooltip {display:block;background-color:black;background-color:rgba(0,0,0,.9);position:absolute;top:0;right:0;bottom:0;left:0;padding:10px;line-height:normal;font-style:italic;color:white;overflow:hidden;text-align: center;}
#banner-footer {
background: #111;
padding: 7px;
margin: auto;
width: 100%;
height: 32px;
text-align: center;
border-radius: 5px;
}
/* RESPONSIVE */
@media only screen and (max-width:979px) {#outer-wrapper {width:768px;}
#main-wrapper {width:100%;}
#sidebar-wrapper {width:40%;}
#headtitle {min-width:200px;max-width:270px;}
#latst {width:520px;}
#manualslide1 {max-height:340px;}
.featuredpost {max-height:300px;}
.featuredpost .featpost li {height:300px;}
a.thumbimgx,#related_posts li {float:none;width:100%;}
.index .post-footer, .archive .post-footer {width:100%;}
.post-summary strong {font-size:200%;}
.featuredpost .labeltext {font-size:90%;}
#related_posts .inner {height:auto;}
#footer-wrapper .grid {width:50%;margin-bottom:10px;}
.showpageArea .showpagePoint, .showpageArea a {padding:4px 7px;}}
@media only screen and (max-width:767px) {#outer-wrapper {width:480px;}
#main-wrapper, #sidebar-wrapper {width:100%;float:none;}
#header img {margin-left:auto;}
#headads {display:none;}
#latst {display:none;}
#socialicon {float:none;width:100%;text-align:center;}
#socialicon li {display:inline-block;float:none;}
#headtitle {max-width:100%;width:100%;text-align:center;}
#mobilenav {display:inline-block;background-color:#0088FF;border-radius:2px;text-indent:-9999px;padding:0;width:35px;height:30px;margin:5px 0 0 5px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijMy39t7DRGa8B9DYnTqU0X2kxOHz2Qf1YetwBFu7clD5XsCYkY0VYt_I8ikBR6pEFf4Hflre0W3dVb8Vmdd6P8wbqEx7yfmWd4DJwqFMot8Ds3hxSPazf_3tPc_4MCZDysBxtVg7ilks/s1600/menu.png);background-position:0 0;background-repeat:no-repeat;}
#mobilenav.active {background-position:0 -34px;}
sf-menu {float:none;position:absolute;z-index:99;left:10px;right:10px;top:45px;background-color:#FFFFFF;display:none;border:1px solid #DBDBDB;border-top:0;}
.sf-menu li {float:none;}
.sf-menu a, .sf-menu a.home {line-height:30px;height:30px;color:#161616;background-color:#F0F0F0;text-indent:0;width:auto;margin:2px 5px;background-image:none;padding:0 10px;}
.sf-menu li:hover > ul, .sf-menu li.sfHover > ul {display:none;}
.sf-menu ul {position:static;}
.sf-menu ul li, .sf-menu ul ul li, .sf-menu > li > a.current {background-color:transparent;}
.sf-menu li > i {display:block;}
.sf-menu li > i::after {position:absolute;content:"+";line-height:30px;height:30px;width:30px;color:#FFFFFF;text-align:center;font-size:19px;}
.sf-menu ul a, .sf-menu ul a:hover {padding-left:20px;}
.sf-menu ul ul a, .sf-menu ul ul a:hover {padding-left:25px;}
.sf-menu li > i.active::after {content:"-";font-size:34px;text-indent:-1px;line-height:26px;}
.sf-menu li:hover > a {background-color:transparent;}
#autoslide .widget, #manualslide .widget, .index #Blog1, .archive #Blog1, .sidebar .widget, #sidebar-tengah, .breadcrumbs, .item .post, .static_page .post, #related_posts, .comments, .error-custom {margin:10px 5px 15px;}
#footer-wrapper .grid {width:100%;float:none;}
.separator a {float:none !important;margin:0 auto 15px !important;}
table.tr-caption-container {float:none !important;margin:0 auto 10px !important;padding:0;}
.post-body .left, .post-body .right {float:none;display:block;text-align:center;margin:10px 0 15px;}}
@media only screen and (max-width:479px) {#outer-wrapper {width:320px;}}
@media only screen and (max-width:319px) {#outer-wrapper {width:100%;}}
--></style>
<script src='' type='text/javascript'></script>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 200;
summary_img = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'.';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<div class="crop"><img src="'+img[0].src+'" width="270px;" /></div>';
summ = summary_img;
}
var summary = imgtag + '<div class="posting">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]></b:skin>
<script src='http://mkrprojectemp.googlecode.com/svn/trunk/JS/adamzmainjs.min.js' type='text/javascript'/>
<script class='jshilang' type='text/javascript'>
//<![CDATA[
//Digital Time and Date by MKR
function datetime(a){(function(c){var d={months:["January","February","March","April","May","June","July","August","September","October","November","December"],dateplace:"tglxnya",timeplace:"clockx"};d=c.extend({},d,a);var b=new Date();var i=b.getDate();var e=b.getMonth();var f=b.getYear();var g=(f<1000)?f+1900:f;document.getElementById(d.dateplace).innerHTML=d.months[e]+" "+i+", "+g;var h=function(k){if(k<10){k="0"+k}return k};var j=function(){var m="";var k=new Date();var o=k.getHours();var n=k.getMinutes();var l=k.getSeconds();if(o<12){m="AM"}else{m="PM"}if(o==0){o=12}if(o>12){o=o-12}o=h(o);n=h(n);l=h(l);document.getElementById(d.timeplace).innerHTML=o+":"+n+":"+l+" "+m};setInterval(j,500)})(jQuery)};
//]]></script>
<script type='text/javascript'>
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
</head>
<body class='ltr' itemscope='' itemtype='http://schema.org/WebPage'>
<style type='text/css'>
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height: 130px;
width: 30px;
float: left;
cursor: pointer;
background: url('http://img824.imageshack.us/img824/3249/7uxt.png') no-repeat;
}
.gbcontent{
float: left;
border: 2px solid #06F;
background: #222;
padding: 10px;
}
</style>
<script type='text/javascript'>
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id='gb'>
<div class='' onclick='showHideGB()'>
</div>
<div class=''>
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<script type='text/javascript'>
//<![CDATA[
// Original: http://www.queness.com/post/530/simple-lava-lamp-menu-tutorial-with-jquery
// Modified by Taufik Nurrohman: http://hompimpaalaihumgambreng.blogspot.com
$(function() {
// Append the floating bar
$('#lava').append('<div id="box"><div class="head"></div></div>')
// remove the fallback class if JavaScript enabled
.find('ul.fallback').removeClass('fallback');
// Retrieve the selected item position and width
var default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left),
default_width = $('#lava li.selected').width();
// Set the floating bar position and width
$('#box').css({left: default_left});
$('#box .head').css({width: default_width});
// if mouseover the menu item
$('#lava > ul > li').mouseenter(function() {
// Get the position and width of the menu item
left = Math.round($(this).offset().left - $('#lava').offset().left);
width = $(this).width();
// Set the floating bar position, width and transition
$('#box').stop(false, true).animate({left:left},{duration:1000, easing:'easeOutElastic'});
$('#box .head').stop(false, true).animate({width:width},{duration:1000, easing:'easeOutElastic'});
$('ul', this).filter(':not(:animated)').slideDown(600, 'easeInOutExpo');
// if user click on the menu
}).click(function() {
// reset the selected item
$('#lava li').removeClass('selected');
// select the current item
$(this).addClass('selected');
});
// If the mouse leave the menu item,
// hide the dropdown menu and reset the floating bar to the selected item
$('#lava li').mouseleave(function() {
$('ul', this).slideUp(600, 'easeOutQuart');
}).parents('#lava').mouseleave(function() {
// Retrieve the selected item position and width
default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
default_width = $('#lava li.selected').width();
// Set the floating bar position, width and transition
$('#box').stop(false, true).animate({left:default_left},{duration:1500, easing:'easeOutElastic'});
$('#box .head').stop(false, true).animate({width:default_width},{duration:1500, easing:'easeOutElastic'});
});
});
//]]>
</script>
</div>
<script type='text/javascript'>
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
</div>
<script src='' type='text/javascript'/>
<div class='index' id='outer-wrapper'>
<div id='topmenu'>
<div class='wrapnya'>
<span class='tgltop'>
<span id='tglxnya'/>
<span id='clockx'/>
<script class='jshilang' type='text/javascript'>
datetime();
</script>
</span>
</div>
</div>
</div>
<header id='header-wrapper'>
<div id='headtitle'>
<div class='header section' id='header'><div class='widget Header' id='Header1'>
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
Setyawan Evolution
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span>Melihat, Suka, Mempelajari, lalu Mencoba Berimajinasi</span></p>
</div>
</div>
</div></div>
</div>
<div id=''>
<div class='' id=''><div class='' id=''>
</div></div>
</div>
</header>
<nav class='navix' id='nav'>
<div class='wrap'>
<div id='searchnya'>
<form action='/search' id='ajax-search-form'>
<input name='q' onblur='if (this.value == "") {this.value = "Tulis disini untuk mencari..";}' onfocus='if (this.value == "Tulis disini untuk mencari..") {this.value = "";}' type='text' value=''/>
<button title='Search' type='submit'>Search</button>
</form>
</div>
<a href='#' id='mobilenav'>Select Menu</a>
<ul class='sf-menu' id='menunav' target='_blank'>
<li><a class='home' href='/'>Home</a></li>
<li><a href='/search/label/Blog'>Blog</a>
<ul>
</ul>
</li>
<li><a href='http://www.mastbro.id.ai'>About</a>
<ul>
</ul>
</li>
<li><a href='/p/sitemap.html'>Sitemap</a>
<ul>
</ul>
</li>
<li><a href='/search/label/template'>Template</a>
<ul>
</ul>
</li>
<li><a href='/search/label/catatan'>Catatan</a>
<ul>
<li><a href='/search/label/softwere'>Software</a></li>
</ul>
</li>
</ul>
<script type='text/javascript'>
//<![CDATA[
menunav (jQuery);
searchxx({
summaryLength:100,
scrthumbSize:50
});
//]]>
</script>
</div>
</nav>
<div id='content-wrapper'>
<b:section class='main-section' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable id='main' var='top'>
<b:if cond='data:mobile == "false"'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<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.dateHeader'>
<h1 class=''><span/></h1>
</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>
<!-- navigation -->
<b:include name='nextprev'/>
<!-- feed links -->
<b:include name='feedLinks'/>
<b:if cond='data:top.showStars'>
<script src='//www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
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:if cond='data:top.showDummy'>
<data:top.dummyBootstrap/>
</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='//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='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' 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>
<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' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</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='//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'>
<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' target='_blank'><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: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: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:if cond='data:post.allowComments'>
<b:if cond='data:post.feedLinks'>
<b:include data='post.feedLinks' name='feedLinksBody'/>
</b:if>
</b:if>
</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.canonicalUrl' 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=''>
<span/>
</div>
</b:if>
<div class='mobile-post-outer'>
<a expr:href='data:post.url'>
<h1 class='mobile-index-title entry-title' itemprop='name'>
<data:post.title/>
</h1>
<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:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.numComments != 0'>
<b:include data='post' name='comment_count_picker'/>
</b:if>
</b:if>
</b:if>
</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'>
<h1 class=''><span><data:post.dateHeader/></span></h1>
</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'>
<h1 class='post-title entry-title' itemprop='name'>
<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-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'>
<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.canonicalUrl' 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:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comment_count_picker'/>
</b:if>
</b:if>
</b:if>
</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: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>
</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>
<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: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: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'>
<h1 class='post-title entry-title' itemprop='name'>
<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-header'>
<div class='post-header-line-1'/>
</div>
<b:if cond='data:blog.metaDescription == ""'>
<!-- 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' itemprop='description articleBody'>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'/></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if></b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>Baca selengkapnya → </a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if></b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>
<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'>
<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.canonicalUrl' 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='star-ratings'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='280'/>
</b:if>
</span>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comment_count_picker'/>
</b:if>
</b:if>
</b:if>
</span>
<!-- backlinks -->
<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</b:if>
</span>
<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>
<!-- share buttons -->
<div class='post-share-buttons goog-inline-block'>
<b:if cond='data:post.sharePostUrl'>
<b:include data='post' name='shareButtons'/>
</b:if>
</div>
</div>
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='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='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</div>
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span>
</div>
<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' itemprop='image' width='50px'/>
</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>
</div>
</div>
</b:includable>
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</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.showPinterestButton'><a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + "&target=pinterest"' expr:title='data:top.shareToPinterestMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToPinterestMsg/></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'>
<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' frameborder='0' height='410' 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' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
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' 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)) {
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: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:includable>
</b:widget>
</b:section>
<div id='credit'>
<a href='/index.html'><data:blog.pageTitle/></a> © 2012-2014. All Rights Reserved. Powered by <a href='http://www.mastbro.id.ai/' target='_blank'>Tony Corporation
</a>. Design by <a href='https://www.facebook.com/tonyrezpectorblitar' target='_blank'>Muhammad Zakaria Sultony</a>
<p/></div>
</div>
<footer itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</footer>
</body></html>
