 |
| Tutorial Membuat kerangka template |
Bagi yang ingin belajar membuat template dari dasar, silahkan anda coba edit atau modif kerangka template di bawah ini sesuka anda..
dalam membuat template membutuhkan ketelitian yang telaten karena bisa mempengaruhi kualitas template saudara..
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML expr:dir='data:blog.languageDirection' lang='id' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<!--[if IE]>
</script> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script>
<![endif]-->
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link expr:title='data:blog.title + " - Atom"' href='/feeds/posts/default' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' rel='canonical'/>
<!-- SEO Meta Tag -->
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0' name='viewport'/>
</b:if>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.title' name='keywords'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<link href='https://plus.google.com/u/110006204262397138484/?rel=author'/>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.pageName' name='keywords'/>
</b:if>
</b:if>
</b:if>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
<b:else/>
<meta content='index,follow' name='robots'/>
</b:if>
<meta content='text/html;charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>
<!-- SEO Title Tag -->
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:blog.isMobile'>
<title><data:blog.pageTitle/> Mobile Version</title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<title>Archive for <data:blog.pageName/></title>
<meta content='noindex,nofollow,noarchive' name='robots'/>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
<title>Page Not Found</title>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.isMobile'>
<title><data:blog.pageName/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
</b:if>
</b:if>
</b:if>
<!-- Facebook Open Graph -->
<b:if cond='data:blog.pageType == "item"'>
<meta content='YOUR-FACEBOOK-ID' property='fb:admins'/>
<meta content='YOUR-FACEBOOK-APP-ID' property='fb:app_id'/>
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhvnvNssAVk9oyzy_NcOA_Zd5Wo_nGam2V5LD38FwjHOzQEylnADKh1o3DX0uenAqdKGn4z0KDmiBNIE8QDZlFoCQs2Pbi-ZBHHqBZ8Jq4vM5ZpbOiXEwH1jOwrhSUxMbaCPaKo9R_o7w/s120-c/default.png' property='og:image'/>
</b:if>
</b:if>
<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow:400,700' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>
<link href='//www.blogger.com/static/v1/widgets/1832531788-widget_css_bundle.css' rel='stylesheet' type='text/css'/>
<!-- Kode untuk Menyembunyikan CSS Reset Blogger dari Damar Zaky (http://damzaky.blogspot.com) dioptimalkan oleh Mas Sugeng -->
<style type="text/css"><!-- /* <b:skin><![CDATA[#wrapper{width:980px;}#post-wrapper{float:left;width:670px;clear:both;}#right-post{float:left;width:180px;}#sidebar-wrapper{float:right;width:310px;}#footer-wrapper,#footer-wrapper2{width:100%;overfloe:hidden;}#footer-top .kiri,#footer-top .kiri2,#footer-top .tengah{float:left;width:243px;}#footer-top .kanan{float:right;width:250px;}#widget-label-kiri{float:left;width:335px;}#widget-label-kanan{float:right;width:335px;}#header-wrapper{margin-top:20px;}#header{float:left;width:250px;}#header-right{float:right;width:728px;}#topwrapper{width:980px;}#navigation{width:904px;}#navigation li,#topnav li{list-style:none;display:inline-block;float:left;}#posting{float:left;width:490px;}#footer-bottom{width:980px;}#footer-top{width:980px;}.Navbar .widget-content{margin: 0 3px 0 0 !important;width:720px;}*/]]></b:skin>
<style type='text/css'>
-----------------------------------------------
Blogger Template Style
Name: Fastest Magz
Date: 30 Mei 2013
Designer: Mas Sugeng
URL: http://www.mas-sugeng.com
----------------------------------------------- */
/**
* 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,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin: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{display:block;}body{line-height:1;display:block;}*{margin:0;padding:0;}html{display:block;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}
/* FRAMEWORK */
body{background:#f2f2f2;margin:0;padding:0 0 0 0;color:#555;font:x-small Arial,Geneva,sans-serif;font-size/* */:/**/small;font-size:/**/small;text-align:center;}strong,b{font-weight:bold;}cite,em,i{font-style:italic;}a:link{color:#0099cc;text-decoration:none;outline:none;}a:visited{color:#0099cc;text-decoration:none;}a:hover{color:#006c8e;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 #999;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,h2,h3,h4,h5,h6{font-weight:bold;line-height:normal;margin:0 0 1em;}h1{font-size:200%}h2{font-size:180%}h3{font-size:160%}h4{font-size:140%}h5{font-size:120%}h6{font-size:100%}ol,ul,dl{margin-left:3em}ol{list-style:decimal outside}ul{list-style:disc outside}li{margin:.5em 0}table.tr-caption-container td{background:#f8f8f8;}table.tr-caption-container{max-width:100%;}dt{font-weight:bold}dd{margin:0 0 .5em 2em}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;}pre,code{font-family:"Courier New",Courier,Monospace;color:inherit;}pre{white-space:pre;word-wrap:normal;overflow:auto;}blockquote{background:#f8f8f8;margin-left:2em;margin-right:2em;border-left:4px solid #ccc;padding:1em 1em;font-style:italic;}table[border="1"] th,
table[border="1"] td,
table[border="1"] caption{border:1px solid;padding:.2em .5em;text-align:left;vertical-align:top;}th{font-weight:bold;}table[border="1"] caption{border:none;font-style:italic;}table{background:#fafafa;margin:0 0 14px;}td,th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #ccc;}th{background:#ddd;}
/* Blogger CSS Reset */
#navbar-iframe,.status-msg-wrap,.post-feeds,.feed-links,#Attribution1{display:none;}a,#navigation li .sub-nav-wrapper .sub-nav li,#at-gambar,.social-item-outer{transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;}
/* ELEMENT */
#wrapper{position:relative;background:#fff;border-radius:0 0 3px 3px;border:1px solid #e2e2e2;border-top:none !important;width:980px;margin:0 auto 20px;padding:0 0 20px 0;font-size:14px;text-align:left;overflow:hidden;}#header-wrapper{overflow:hidden;height:auto;padding:0 20px;}#content-wrapper{height:auto;margin-bottom:10px;padding:0 20px;}#post-wrapper{float:left;width:640px;}#right-post{float:left;width:120px;margin:15px 15px 0px 0;}#right-post img{display:block;margin:0 auto;}#sidebar-wrapper{float:right;width:300px;}#footer-wrapper{width:100%;background:#393939;border-bottom:1px solid #4b4b4b;border-top:3px solid #426DEC;overflow:hidden;padding:0px;font-size:12px;color:#9c9c9c;}#footer-wrapper2{width:100%;background:#2b2b2b;border-top:1px solid #1b1b1b;overflow:hidden;padding:0;color:#9c9c9c;}#footer-top .kiri,#footer-top .kiri2,#footer-top .tengah{float:left;width:233px;margin:15px 15px 15px 0px;}#footer-top .kanan{float:right;width:236px;margin:15px 0px 15px 0px;}.post-bottom{padding-right:15px;}#widget-label-kiri{float:left;width:305px;}#widget-label-kanan{float:right;width:305px;}
/* HEADER */
#header{float:left;margin:15px 0;padding:0;width:200px;min-height:90px;}#header img{display:block;max-width:200px;height:100%;}#header-right{float:right;padding:0;overflow:hidden;margin:15px 0;width:728px;min-height:90px;}#header-right img,#header-right iframe{display:block;max-width:100%;max-height:90px;border:none;overflow:hidden;}.titlewrapper{margin:0 0 0 0;padding:0 0 0 0;}.header h1.title,.header p.title{font-family:'Oswald',Verdana,Sans-serif;font-size:22px;font-weight:bold;color:#555;line-height:1.3em;letter-spacing:-0.4px;margin:0 0 6px;}.header .description{font-family:'Oswald',Verdana,Sans-serif;color:#666;font-size:12px;margin:3px 0;}.header a,.header a:hover{color:#555;}
/* Top navigation */
#topwrapper{background:#f8f8f8;width:980px;overflow:hidden;height:35px;border-bottom:1px solid #e2e2e2;}#search-top{float:left;margin:4px 0px 4px 20px;display:none;}#search-top input[type="text"]{box-shadow:inset 2px 2px 0px #f0f0f0;border-radius:3px 0 0 3px;height:25px;width:100px;line-height:24px;background-color:#f8f8f8;border:1px solid #d3d3d3;outline:none;font-size:13px;padding:0 10px;float:left;}#search-top input#search-button-top{box-shadow: inset 1px 1px 0 #f9f9f9;border-radius:0 3px 3px 0;height:27px;width:30px;color:#555;background-color:#f0f0f0;border:1px solid #d3d3d3;border-left:none;float:left;cursor:pointer;}#search-top input#search-button-top:hover{background-color:#e9e9e9;}
/* Headline */
.newspic{float:left;font-family:"Archivo Narrow",Verdana,Sans-Serif;font-size:13px;width:480px;overflow:hidden;margin:0;padding:0 0 0 20px;height:34px;line-height:34px;}span.breakingnews{background:#F1B000;text-transform:none;color:#fff;float:left;line-height:27px;margin:4px 8px 4px 0;padding:0 8px;}.news a:link,.news a:visited{color:#000;text-decoration:none;}.news a:hover{color:#0099cc;text-decoration:underline;}.labelfield{color:#0099cc;font-size:100%;}.datefield{color:#aaa;font-weight:normal;}#example1{float:left;max-width:380px;overflow:hidden;padding:0;text-align:left;background-color:transparent;}#example1 img{display:none;}code{color:#0099CC;}#example1 a:link,#example1 a:visited{color:#0099cc;text-decoration:none;}#example1 a:hover{color:#555;text-decoration:none;}.tinynav2{display:none;width:590px;margin:0 auto;border-radius:0px;padding:5px 8px;background-color:#393939;color:#eee;font-weight:bold;border:2px solid #426DEC;cursor:pointer;outline:none;}.tinynav1{border-radius:3px;background:#f8f8f8;display:none;width:150px;margin:4px 20px 4px 0px;padding:3px 5px;float:right;border:1px solid #d3d3d3;outline:none;}#topnav{font-family:"Archivo Narrow",Verdana,Sans-Serif;margin:0;float:right;width:480px;overflow:hidden;height:35px;line-height:35px;list-style-type:none;padding:0 0 0 0;}#topnav li{display:block;float:right;margin:0 0 0 0;}#topnav li a{padding:0 20px;color:#666;font-size:13px;display:block;text-decoration:none;}#topnav li a:hover{color:#000;box-shadow:inset 0px -3px 0px rgba(0,0,0,0.3);background:#f0f0f0;}#topnav li:nth-child(1) a:hover{box-shadow:inset 0px -2px 0px #E50700;}#topnav li:nth-child(2) a:hover{box-shadow:inset 0px -2px 0px #0084C5;}#topnav li:nth-child(3) a:hover{box-shadow:inset 0px -2px 0px #6CAC00;}#topnav li:nth-child(4) a:hover{box-shadow:inset 0px -2px 0px #00C3B7;}#topnav li:nth-child(5) a:hover{box-shadow:inset 0px -2px 0px #FF8168;}#topnav li:nth-child(6) a:hover{box-shadow:inset 0px -2px 0px #FFBA0F;}
/* NAVIGATION */
#navigation{height:38px;width:904px;position:relative;background-color:#393939;box-shadow:0 2px 6px 0 #ccc;-moz-box-shadow:0 2px 6px 0 #ccc;margin:0 auto 0;padding:0 18px 0 18px;border-bottom:3px solid #426DEC;}#navigation li{position:relative;line-height:38px;float:left;list-style:none;display:inline-block;padding:0 0 0 0;margin:0 0 0 0;}#navigation li a{padding:0 18px;color:#eee;display:block;font-family:'Oswald',Arial,Helvetica,sans-serif;letter-spacing:0.5;font-size:14px;font-weight:500;text-align:left;text-shadow:1px 1px 0 #222;}#navigation li a.home{background-position:16px -54px;width:46px;padding:0 0;background-color:#426DEC;text-indent:-9999px;overflow:hidden;}#navigation li a{border-left:1px solid #222;border-right:1px solid #444;}#navigation li:hover a{background-color:#426DEC;color:#fff;}#navigation li .sub-nav-wrapper{display:block;position:absolute;z-index:30;margin-left:0px;}#navigation li .sub-nav-wrapper .sub-nav{width:150px;margin:4px 0 0 0;padding:0 0 0 0;background:#fff;border-top:1px solid #fff;box-shadow:0 1px 2px rgba(0,0,0,0.35);}#navigation li:hover .sub-nav-wrapper{display:block;}#navigation li .sub-nav-wrapper .sub-nav li{list-style:none;float:none !important;line-height:26px;display:block;margin:0 0 0 0;padding:0;text-align:left;border-bottom:1px solid #d7d7d7;}#navigation li .sub-nav-wrapper .sub-nav li:first-child{}#navigation li .sub-nav-wrapper .sub-nav li:last-child{border:none;}#navigation li .sub-nav-wrapper .sub-nav li a{border:none !important;background:transparent !important;display:block;padding:0 20px;font-size:12px;font-weight:small;color:#4b4b4b !important;text-shadow:none;box-shadow:inset 0 0 2px rgba(255,255,255,1.0);-moz-box-shadow:inset 0 0 2px rgba(255,255,255,1.0);-webkit-box-shadow:inset 0 0 2px rgba(255,255,255,1.0);}#navigation li .sub-nav-wrapper .sub-nav li:hover{background:#eaeaea;border-bottom:1px solid #ccc;}#navigation li .sub-nav-wrapper{pointer-events:none;opacity:0;filter:alpha(opacity=0);top:0;transition:all 0.35s ease-in-out;-moz-transition:all 0.35s ease-in-out;-webkit-transition:all 0.35s ease-in-out;}#navigation li:hover .sub-nav-wrapper{pointer-events:auto;opacity:1;filter:alpha(opacity=100);top:30px;}
#navigation #search{font-family:'Oswald',Arial,Helvetica,sans-serif;float:right;margin:5px 0 5px 10px;}#navigation li.search{float:right;line-height:normal;}#navigation #search input[type="text"]{height:28px;line-height:28px;background-color:#5b5b5b;background-position:188px -245px;border:0 none;font-size:14px;font-weight:500;text-shadow:1px 1px 0 #222;color:#fff;width:48px;padding:0 15px;-webkit-transition:all 0.7s ease 0 s;-moz-transition:all 0.7s ease 0s;-o-transition: all 0.7s ease 0s;transition:all 0.7s ease 0s;box-shadow: inset 2px 2px 0 #4f4f4f;}#navigation #search input#search-button{height:28px;width:30px;background-color:#4b4b4b;background-position:8px -246px;border:none;float:right;cursor:pointer;}#navigation #search input[type="text"]:focus{background-color:#fff;text-shadow:none !important;outline:none;width:140px;color:#555;box-shadow: inset 2px 2px 0 #eee;}#navigation #search input#search-button,.post-info-icon,.home,.back-to-top{background-image:url("http://3.bp.blogspot.com/-60fYApN0j2M/Ub8uXOv4rNI/AAAAAAAACBs/6PDa4uu3cHk/s1600/csg-51bf2d6764c79.png");background-repeat:no-repeat;}
/* POSTING */
.breadcrumbs{text-align: left;color:#999;margin:0px 0px 10px;padding:0 0 3px;font-size:11px;line-height:1.4;border-bottom:1px dotted #e2e2e2;}#posting{float:left;width:490px;margin:15px 15px 0 0;padding:0;font-size:0.92em;}.post{position:relative;min-height:120px;border-bottom:1px solid #f2f2f2;padding:0 0 15px;margin:0 0 15px;}.post img,.post iframe{max-width:100%;}.post h2.post-title,.post h1.post-title{font-family:"Archivo Narrow",Verdana,Sans-Serif;font-weight:bold;margin:0 0 0 0;}.post h2.post-title{font-size:1.3em;padding-left:172px;}.post h1.post-title{font-size:1.6em;margin-bottom:4px;}.post h2.post-title a,.post h1.post-title a,.post h2.post-title a:visited,.post h1.post-title a:visited{color:#555;}.post h2.post-title a:hover,.post h1.post-title a:hover{color:#0099cc;}.post-body{line-height:1.4em;text-align:justify;}.postthumb{padding:2px;border:1px solid #e8e8e8;position:absolute;top:0px;left:0px;transition:all 0.15s ease-in-out 0s;float:left;margin:0;width:154px;height:120px;display:block;overflow:hidden;}.postthumb:hover{background:#FFD62C;border:1px solid #FFD62C;}.postthumb img{width:154px;height:120px;}.post-label{position:absolute;top:3px;left:3px;width:154px;z-index:10;}.post-label a{font-family: 'Oswald',Verdana,Sans-serif;text-transform:uppercase;background-color:#426DEC;background-color:rgba(66,109,236,0.6);color:#fff;font-size:10px;display:block;float:left;padding:4px 8px;}.post-label a:hover{background:rgba(66,109,236,10);}.post-info{display:block;margin:10px 0 10px 172px;padding:3px 0;color:#999;line-height:1.6em;border-top:1px dotted #e2e2e2;border-bottom:1px dotted #e2e2e2;font-size:11px;overflow:hidden;}.post-info a{color:#999;}.readmore{margin-top:4px;}.readmore a{font-size:11px;font-weight:bold;}.post-info-icon{display:inline-block;float:left;margin:0 12px 0 0;}.post-info a:hover{color:#000;}.jam{background-position:0 -98px;height:16px;padding:0 0 0 17px}.komentar{background-position:0 -132px;height:16px;padding:0 0 0 17px;}.label{background-position:0 -166px;height:16px;padding:0 0 0 17px;}.admin{background-position:0 1px;height:16px;padding:0 0 0 17px;}.tanggal{background-position:0 -32px;height:16px;padding:0 0 0 17px;}.snippetpost{padding-left:172px;text-align:left;}.share-button-box{background:#f8f8f8;padding:8px 12px 5px;overflow:hidden;margin:20px 0 0 0;border:1px solid #e2e2e2;}.plus-button,.like-button,.tweet-button,.linkedin-button{float:left;}.plus-button iframe{width:120px;}.share-button-box .fb_iframe_widget span{width:100px !important;}.tweet-button iframe{width:108px !important;}.linkedin-button iframe{width:120px;}.artikel-info{margin:6px 0 0;padding:12px;border:1px solid #e9e9e9;background:#f8f8f8;overflow:hidden;}
.thumb-info{float:left;margin:0 8px 0 0;width:80px;height:65px !important;}#blog-pager{font-family:"Oswald",Arial,Sans-Serif;font-size:13px;margin:-8px 0 10px;overflow:hidden;}#blog-pager-newer-link{float:left;padding:0;}#blog-pager-older-link{float:right;padding:0px;}#blog-pager a{color:#555;}#blog-pager a:hover{color:#0099cc;}#blog-pager-older-link:hover,#blog-pager-newer-link:hover{}.widget-label h2,.widget-label h3{background:#f8f8f8;color:#555;padding:5px 8px;font-family:'Oswald',Verdana,Sans-serif;line-height:1.2em;font-size:14px;font-weight:bold;letter-spacing:0.5;margin:0 0 0 0;text-transform:uppercase;border-top:3px solid #e9e9e9;border-right:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;border-left:1px solid #e9e9e9;}#widget-label-kanan .widget:nth-child(1) h2,#widget-label-kanan .widget:nth-child(1) h3,#widget-label-kanan .widget:nth-child(4) h2,#widget-label-kanan .widget:nth-child(4) h3{border-top:3px solid #E50700 !important;}#widget-label-kanan .widget:nth-child(2) h2,#widget-label-kanan .widget:nth-child(2) h3,#widget-label-kanan .widget:nth-child(5) h2,#widget-label-kanan .widget:nth-child(5) h3{border-top:3px solid #0084C5 !important;}#widget-label-kanan .widget:nth-child(3) h2,#widget-label-kanan .widget:nth-child(3) h3,#widget-label-kanan .widget:nth-child(6) h2,#widget-label-kanan .widget:nth-child(6) h3{border-top:3px solid #6CAC00 !important;}#widget-label-kiri .widget:nth-child(1) h2,#widget-label-kiri .widget:nth-child(1) h3,#widget-label-kiri .widget:nth-child(4) h2,#widget-label-kiri .widget:nth-child(4) h3{border-top:3px solid #00C3B7 !important;}#widget-label-kiri .widget:nth-child(2) h2,#widget-label-kiri .widget:nth-child(2) h3,#widget-label-kiri .widget:nth-child(5) h2,#widget-label-kiri .widget:nth-child(5) h3{border-top:3px solid #FF8168 !important;}#widget-label-kiri .widget:nth-child(3) h2,#widget-label-kiri .widget:nth-child(3) h3,#widget-label-kiri .widget:nth-child(6) h2,#widget-label-kiri .widget:nth-child(6) h3{border-top:3px solid #FFBA0F !important;}#right-post .widget:nth-child(1) h2,#right-post .widget:nth-child(1) h3{border-bottom:3px solid #E50700 !important;}#right-post .widget:nth-child(2) h2,#right-post .widget:nth-child(2) h3{border-bottom:3px solid #0084C5 !important;}#right-post .widget:nth-child(3) h2,#right-post .widget:nth-child(3) h3{border-bottom:3px solid #6CAC00 !important;}#right-post .widget:nth-child(1) h2,#right-post .widget:nth-child(1) h3{border-bottom:3px solid #00C3B7 !important;}#right-post .widget:nth-child(2) h2,#right-post .widget:nth-child(2) h3{border-bottom:3px solid #FF8168 !important;}#right-post .widget:nth-child(3) h2,#right-post .widget:nth-child(3) h3{border-bottom:3px solid #FFBA0F !important;}
.widget-label .widget-content{overflow:hidden;margin:0 0 5px 0;padding:10px 0;}.label-size-1, .label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;filter:alpha(100);opacity:10}.cloud-label-widget-content{text-align:left}.label-size{display:block;float:left;background:#426DEC;margin:0 2px 2px 0;color:#eee;}.label-size a,.label-size span{display:inline-block;color:#fff;padding:6px 8px;}.label-size:hover{background:#393939}
.label-count{white-space:nowrap;padding-right:8px;margin-left:-4px;}.label-size{line-height:1.2}#footer-top .label-size{background:#555 !important;}#footer-top .label-size:hover{background:#426DEC !important;}#footer-top .label-size a{color:#eee !important;}.showpageArea{float:left;color:#555;font-size:11px;margin:10px 0;}.showpageArea a{color:#555;text-shadow:0 1px 2px #fff;}.showpageNum a{padding:5px 12px;margin:0 2px 0 0;border:1px solid #e8e8e8;background:#f8f8f8;}.showpageNum a:hover,.showpage:hover{border:1px solid #b2b2b2;color:#555 !important;}.showpage{margin:0 0 0 0;}.showpage:hover a{color:#555 !important;}.showpageOf,.showpage{padding:5px 12px;margin:0 2px 0 0;border:1px solid #e8e8e8;background:#f8f8f8;}.showpagePoint{background:#f8f8f8;padding:5px 12px;margin: 0 2px 0 0;border:1px solid #b2b2b2;}
/* SIDEBAR */
.social-box{width:280px;padding:10px 9px;margin:0;overflow:hidden;background-color:#f9f9f9;border:1px solid #e9e9e9;text-align:center;}a.social-item-box{display:block;color:#4b4b4b;float:left;width:64px;overflow:hidden;margin:0;padding:4px 0;background-image:url("http://4.bp.blogspot.com/-BijS0OXNqUM/Ub9XA_RlZLI/AAAAAAAACCM/c19K_XX4R30/s1600/csg-51bf56d8dd195.png");background-repeat:no-repeat;}.social-item-outer{margin:0 0 0 8px;overflow:hidden;float:left;display:inline-block;}.social-item-outer:hover{background:#f0f0f0;background:-webkit-linear-gradient(top, #f9f9f9, #f0f0f0);background:-moz-linear-gradient(top, #f9f9f9, #f0f0f0);background:-ms-linear-gradient(top, #f9f9f9, #f0f0f0);background:-o-linear-gradient(top, #f9f9f9, #f0f0f0);background:linear-gradient(top, #f9f9f9, #f0f0f0);}.social-item-outer:nth-child(1):hover{box-shadow:0px -2px 0px #E50700 inset;}.social-item-outer:nth-child(2):hover{box-shadow:0px -2px 0px #0084C5 inset}.social-item-outer:nth-child(3):hover{box-shadow:0px -2px 0px #6CAC00 inset;}.social-item-outer:nth-child(4):hover{box-shadow:0px -2px 0px #00C3B7 inset;}.social-item-outer:hover{box-shadow:0px -2px 0px #FF8168 inset;}.social-item-outer:first-child{margin-left:0px;}.facebook-box{background-position:7px 4px;}.rss-box{background-position:-73px 4px;}.twitter-box{background-position:-153px 4px;}.googleplus-box{background-position:-233px 4px;}.counter{margin:60px 0 0 0;font-family:'Oswald',Verdana,Sans-serif;line-height:1.2em;font-size:16px;font-weight:500;}.social-title{color:#888;font-size:11px;}.sidebar{margin:15px 0 0 0;padding:0 0 0 0;font-size:0.92em;}.sidebar h3, .sidebar h2, #right-post h2, #right-post h3{font-family:'Oswald',Verdana,Sans-serif;line-height:1.2em;font-size:15px;font-weight:bold;letter-spacing:0.5;padding:2px 0;color:#555;margin:0 0 10px 0;text-transform:uppercase;border-bottom:3px solid #4b4b4b;}.sidebar .widget-content, #right-post .widget-content{overflow:hidden;margin:0 0 5px 0;padding:0 0 10px;}.widget-content ul,.widget-content ol{list-style:none;margin:0 0 0 0;padding:0 0 0 0;}.widget-content ul li,.widget-content ol li{padding:2px 0;border-bottom:1px dotted #e2e2e2;}.widget-content ul li:last-child,.widget-content ol li:last-child{border-bottom:none !important;}#sidebar img,#sidebar iframe{max-width:100%;border:none;}.PopularPosts .item-snippet{font-size:11px;color:#888;max-height:45px;overflow:hidden;
}.PopularPosts .item-thumbnail{transition: all 0.15s ease-in-out 0s;margin:0 8px 0 0;display:inline;opacity:10;}.PopularPosts .item-thumbnail a img{height:69px;width:69px;display:block;margin:0;padding:2px;border:1px solid #e8e8e8 !important;}.PopularPosts .item-thumbnail a img:hover{background:#FFD62C;border:1px solid #FFD62C !important;}.PopularPosts .widget-content ul li{padding:3px 0px !important;border-bottom:1px dotted #e2e2e2;}.PopularPosts .item-title{font-weight:bold;}.profile-img{background:#555;transition: all 0.15s ease-in-out 0s;padding:4px;border:1px solid #2b2b2b;display:inline;opaciry:10;margin:0 8px 5px 0;}.profile-img:hover,.follow-by-email-inner input[type="text"]:focus{border-color: rgb(111, 162, 208);box-shadow: 0px 0px 6px rgba(0, 125, 230, 0.8);opacity:0.9;}
/* FOOTER */
#footer-bottom{text-align:left;width:980px;margin:0 auto;padding:20px 0;overflow:hidden;}#footer-top{text-align:left;overflow:hidden;width:980px;margin:0 auto;padding:0;tex-shadow:0px -1px #222;}#footer-top h2,#footer-top h3{display:inline-block;color:#eee;font-family:'Archivo Narrow',Verdana,Sans-serif;line-height:1.2em;font-size:1.5em;font-weight:bold;padding:3px 0;margin:0 0 0 0;tex-shadow:0px -1px #222;}#footer-top .widget-content{overflow:hidden;margin:0 0 5px 0;padding:10px 0;}#footer-top .PopularPosts .widget-content ul li,#footer-top .widget-content ul li{border-bottom:1px dotted #666;}#footer-wrapper a,#footer-wrapper2 a{color:#9c9c9c;}#footer-wrapper a:hover,#footer-wrapper2 a:hover{color:#fff;}.post img,.sidebar img{max-width:100%;}
/* Recent posts by labels */
img.label_thumb{padding:2px;border:1px solid #e8e8e8;transition:all 0.15s ease-in-out 0s;position:absolute;top:0;left:0;float:left;height:46px;width:56px;opacity:10;}img.label_thumb:hover{background:#FFD62C;border:1px solid #FFD62C;}.label_with_thumbs{float:left;width:100%;min-height:60px;margin:0;padding:0;}ul.label_with_thumbs li{padding:0 0 3px 68px;position:relative;min-height:53px;margin:0 0 6px 0;border-bottom:1px dotted #e2e2e2;}ul.label_with_thumbs li:last-child{border-bottom:none;}.label_with_thumbs li{list-style:none;font-size:11px;color:#999;}.label_with_thumbs .title-label a{float:left;display:inline-block;font-weight:bold;font-size:13px;margin:0 0 3px;padding:0;color:#555;width:100%;}.label_with_thumbs a:hover{color:#0099cc;}.label_with_thumbs strong{padding-left:0px;}a.comment-label{font-size:11px;color:#999;}a.more-label{font-size:11px;color:#999;}
/* VIEWPORT */
@-wekit-viewport{width:device-width;max-zoom:2;min-zoom:0.5}@-moz-viewport{width:device-width;max-zoom:2;min-zoom:0.5}@-ms-viewport{width:device-width;max-zoom:2;min-zoom:0.5}@-o-viewport{width:device-width;max-zoom:2;min-zoom:0.5}@viewport{width:device-width;max-zoom:2;min-zoom:0.5}
/* MEDIA QUERIES */
@media screen and (min-width:100px) and (max-width:314px){.fotleft{float:none !important;text-align:center !important;}.fotright{float:none !important;text-align:center !important;}#navigation,.newspic,#topnav,.jam,.post-label{display:none}#wrapper{width:230px !important;}#topwrapper{width:230px;}#header-wrapper,#content-wrapper{padding:0 6px;}#search-top{margin:4px 0px 4px 6px;}#search-top input[type="text"]{width:60px;}.tinynav1{margin:4px 6px 4px 0px;width:102px;}#header,#header-right{width:218px;float:none;text-align:center;min-height:0px;}#header{margin-bottom:10px;}#header-right{margin-top:0px;}#header-right img,#header-right iframe{margin:0 auto;max-width:218px;}#right-post{margin:0 0 0 0px;width:218px;}#post-wrapper,#sidebar-wrapper{width:218px;}#posting{width:218px;margin:15px 0 0 0 !important;}table.tr-caption-container,div.separator img{max-width:190px !important;}.post-bottom{padding-right:0px;}.postthumb{width:54px;height:44px;}.postthumb img{width:54px;height:44px;}.post-label{width:54px;}.post h2.post-title,.snippetpost{padding-left:66px;}.post-info{margin-left:66px;}#at-gambar a img{width:79px !important;height:79px !important;}.box-related{width:79px !important;font-size:10px;}#at-gambar{padding-right:0px !important;}#at-gambar a:nth-child(1){display:none !important;}#widget-label-kiri,#widget-label-kanan{width:218px;}ul.label_with_thumbs li{padding-left:66px;}.PopularPosts .item-thumbnail{margin:0 6px 0 0;}.social-box{width:216px;padding:10px 0 10px 0px;}.social-item-outer{margin:0 22px 0 22px;}.social-item-outer:first-child{margin-left:22px !important;}a.social-item-box{margin-bottom:6px;}#footer-top,#footer-bottom{width:230px;}#footer-top .kiri,#footer-top .kiri2,#footer-top .tengah,#footer-top .kanan{width:230px;margin:15px 0 15px 0;}}
@media screen and (min-width:314px) and (max-width:394px){.fotleft{float:none !important;text-align:center !important;}.fotright{float:none !important;text-align:center !important;}#navigation,.newspic,#topnav,.jam{display:none}#wrapper{width:310px !important;}#topwrapper{width:310px;}#header-wrapper,#content-wrapper{padding:0 8px;}#search-top{margin:4px 0px 4px 8px;}#search-top input[type="text"]{width:93px;}.tinynav1{margin:4px 8px 4px 0px;width:143px;}#header,#header-right{width:294px;float:none;text-align:center;min-height:0px;}#header{margin-bottom:10px;}#header-right{margin-top:0px;}#header-right img,#header-right iframe{margin:0 auto;max-width:294px;}#right-post{margin:0 0 0 0px;width:294px;}#post-wrapper,#sidebar-wrapper{width:294px;}#posting{width:294px;margin:15px 0 0 0 !important;}table.tr-caption-container img,div.separator img{max-width:260px !important;}.post-bottom{padding-right:0px;}.postthumb{width:114px;height:84px;}.postthumb img{width:114px;height:84px;}.post-label{width:114px;}.post h2.post-title,.snippetpost{padding-left:126px;}.post-info{margin-left:126px;}#at-gambar a img{width:72px !important;height:72px !important;}.box-related{width:72px !important;font-size:11px;}#at-gambar a:nth-child(1),#at-gambar a:nth-child(2){display:none !important;}#widget-label-kiri, #widget-label-kanan{width:294px;}.social-box{width:274px;}.social-item-outer{margin:0 0 0 16px;}a.social-item-box{width:56px;}.facebook-box{background-position:3px 4px;}.rss-box{background-position:-77px 4px;}.twitter-box{background-position:-157px 4px;}.googleplus-box{background-position:-237px 4px;}#footer-top,#footer-bottom{width:310px;}#footer-top .kiri,#footer-top .kiri2, #footer-top .tengah,#footer-top .kanan{width:310px;margin:15px 0 15px 0;}}
@media screen and (min-width:394px) and (max-width:474px){.fotleft{float:none !important;text-align:center !important;}.fotright{float:none !important;text-align:center !important;}#navigation,.newspic,#topnav{display:none}#wrapper{width:390px !important;}#topwrapper{width:390px;}#header-wrapper,#content-wrapper{padding:0 10px;}#search-top{margin:4px 0px 4px 10px;}.tinynav1{margin:4px 10px 4px 0px;}#header,#header-right{width:370px;float:none;text-align:center;min-height:0px;}#header{margin-bottom:10px;}#header-right{margin-top:0px;}#header-right img, #header-right iframe{margin:0 auto;max-width:370px;}#right-post{margin:0 0 0 0px;width:370px;}#post-wrapper,#sidebar-wrapper{width:370px}#posting{width:370px;margin:15px 0 0 0 !important;}table.tr-caption-container img,div.separator img{max-width:330px !important;}.post-bottom{padding-right:0px;}.postthumb{width:114px;height:84px;}.postthumb img{width:114px;height:84px;}.post-label{width:114px;}.post h2.post-title,.snippetpost{padding-left:128px;}.post-info{margin-left:128px;}#at-gambar a img{width:97px !important;height:97px !important;}.box-related{width:97px !important;}#at-gambar a:nth-child(1),#at-gambar a:nth-child(2){display:none !important;}#widget-label-kiri,#widget-label-kanan{width:370px;}.social-box{width:300px;padding:10px 34px;}.social-item-outer{margin:0 0 0 13px;}#footer-top,#footer-bottom{width:390px;}#footer-top .kiri,#footer-top .kiri2,#footer-top .tengah,#footer-top .kanan{width:390px;margin:15px 0 15px 0;}}
@media screen and (min-width:474px) and (max-width:594px){.fotleft{float:none !important;text-align:center !important;}.fotright{float:none !important;text-align:center !important;}#navigation,.newspic,#topnav {display:none}#wrapper{width:470px !important;}#topwrapper{width:470px;}#header,#header-right{width:430px;float:none;text-align:center;min-height:0px;}#header{margin-bottom:10px;}#header-right{margin-top:0px;}#header-right img,#header-right iframe{margin:0 auto;max-width:400px;}#right-post{margin:0 0 0 0px;width:430px;}#post-wrapper, #sidebar-wrapper{width:430px;}#posting{width:430px;margin:15px 0 0 0 !important;}table.tr-caption-container img,div.separator img{max-width:430px !important;}.post-bottom{padding-right:0px;}#at-gambar a:nth-child(1){display:none !important;}#at-gambar a img{width:82px !important;height:82px !important;}.box-related{width:82px !important;font-size:11px;}#widget-label-kiri,#widget-label-kanan{width:430px;float:right;}.social-box{width:360px;padding:10px 34px;}.social-item-outer{margin:0 0 0 34px;}#footer-top,#footer-bottom{width:470px;}#footer-top .kiri,#footer-top .kiri2,#footer-top .tengah,#footer-top .kanan{width:470px;margin:15px 0 15px 0;}}
@media screen and (min-width:594px) and (max-width:634px){.fotleft{float:none !important;text-align:center !important;}.fotright{float:none !important;text-align:center !important;}#navigation,.newspic,#topnav{display:none}#wrapper{width:590px !important;}#topwrapper{width:590px;}#header,#header-right{width:550px;float:none;text-align:center;min-height:0px;}#header{margin-bottom:10px;}#header-right{margin-top:0px;}#header-right img,#header-right iframe{margin:0 auto;max-width:550px;}#right-post{margin:15px 0 0 15px;}#post-wrapper,#sidebar-wrapper{width:550px;}#posting{width:415px;margin:15px 0 0 0 !important;}.post-bottom{padding-right:0px;}#at-gambar a img{width:86px !important;height:86px !important;}.box-related{width:86px !important;font-size:11px;}#widget-label-kiri,#widget-label-kanan{width:550px;}.social-box{width:478px;padding:10px 34px;}.social-item-outer{margin:0 0 0 73px;}#footer-top,#footer-bottom{width:590px;}#footer-top .kiri,#footer-top .kiri2,#footer-top .tengah,#footer-top .kanan{width:590px;margin:15px 0 15px 0;}}
@media screen and (min-width:634px) and (max-width:760px){#navigation,.newspic,#topnav{display:none}#wrapper{width:630px !important}#topwrapper{width:630px;}#header,#header-right{width:590px;float:none;text-align:center;min-height:0px;}#header{margin-bottom:10px;}#header-right{margin-top:0px;}#header-right img,#header-right iframe{margin:0 auto;max-width:590px;}#right-post{margin:15px 0 0 15px;}#post-wrapper,#sidebar-wrapper{width:590px;}#posting{width:455px;margin:15px 0 0 0 !important;}.post-bottom{padding-right:0px;}#at-gambar a img{width:94px !important;height:94px !important;}.box-related{width:94px !important;font-size:11px;}#widget-label-kiri,#widget-label-kanan{width:590px;}.social-box{width:518px;padding:10px 34px;}.social-item-outer{margin:0 0 0 86px;}#footer-top,#footer-bottom{width:630px;}#footer-top .kiri,#footer-top .kiri2,#footer-top .tengah,#footer-top .kanan{width:630px;margin:15px 0 15px 0;}}
@media screen and (min-width:760px) and (max-width:794px){#wrapper{width:756px !important;}#topwrapper{width:756px;}#header,#header-right{width:716px;float:none;text-align:center;min-height:0px;}#header{margin-bottom:10px;}#header-right{margin-top:0px;}#header-right img, #header-right iframe{margin:0 auto;max-width:716px;}#navigation{width:680px;}#navigation #search,.newspic{display:none;}#search-top{display:block;}#right-post{clear:both;float:left;margin-top:0px;}#post-wrapper{width:448px;}#posting{width:433px;margin:15px 15px 0px 0px !important;}#post-bottom{float:right;width:313px;padding-right:0px;}#at-gambar a:nth-child(1){display:none !important;}#at-gambar a img{width:82px !important;height:82px !important;}.box-related{width:82px !important;font-size:11px;}#sidebar-wrapper{width:268px;}.social-box{width:248px;}a.social-item-box{width:56px;}.facebook-box{background-position:3px 4px;}.rss-box{background-position:-77px 4px;}.twitter-box{background-position:-157px 4px;}.googleplus-box{background-position:-237px 4px;}#widget-label-kiri,#widget-label-kanan{width:298px;}#footer-top,#footer-bottom{width:756px}#footer-top .kiri{width:370px;float:left;margin:15px 0 15px 0;}#footer-top .kiri2{width:370px;float:left;margin:15px 0 15px 15px;}#footer-top .tengah{width:370px;float:left;margin:0px 0 15px 0;}#footer-top .kanan{width:370px;float:right;margin:0px 0 15px 15px;}}
@media screen and (min-width:794px) and (max-width:954px){#wrapper{width:790px !important;}#topwrapper{width:790px;}#header,#header-right{width:750px;float:none;text-align:center;min-height:0px;}#header{margin-bottom:10px;}#header-right{margin-top:0px;}#header-right img,#header-right iframe{margin:0 auto;}#navigation{width:714px;
}#navigation #search,.newspic{display:none;}#search-top{display:block;}#right-post{clear:both;float:left;margin-top:0px;}#post-wrapper{width:450px;}#posting{width:435px;margin:15px 15px 0px 0px !important;}#post-bottom{float:right;width:315px;padding-right:0px;}#at-gambar a:nth-child(1){display:none !important;}#at-gambar a img{width:82px !important;height:82px !important;}.box-related{width:82px !important;font-size:11px;}#widget-label-kiri,#widget-label-kanan{width:300px;}#footer-top,#footer-bottom{width:790px;}#footer-top .kiri{width:387px;float:left;margin:15px 0 15px 0;}#footer-top .kiri2{width:387px;float:left;margin:15px 0 15px 15px;}#footer-top .tengah{width:387px;float:left;margin:0px 0 15px 0;}#footer-top .kanan{width:387px;float:right;margin:0px 0 15px 15px;}}
@media screen and (min-width:954px) and (max-width:980px){#wrapper{width:950px !important;}#topwrapper{width:950px;}#topnav{width:450px;}#header{width:170px;}#header img{max-width:170px;}#navigation{width:874px;}#post-wrapper{width:610px;}#widget-label-kiri, #widget-label-kanan{width:290px;}#posting{width:460px;}#footer-top, #footer-bottom{width:950px;}#footer-top .kiri,#footer-top .kiri2,#footer-top .tengah{width:225px;}#footer-top .kanan{width:230px;}}
@media screen and (max-width: 759px) {.tinynav2,#search-top,.tinynav1{display:block;}}
@media screen and (max-width: 634px) {.tinynav2{width:550px;}}
@media screen and (max-width: 594px) {.tinynav2{width:430px;}}
@media screen and (max-width: 474px) {.tinynav2{width:370px;}}
@media screen and (max-width: 394px) {.tinynav2{width:294px;}}
@media screen and (max-width: 314px) {.tinynav2{width:218px;}}
.fb-comments{width: 100% !important;}
.fb-comments iframe[style]{width: 100% !important;}
.fb-like-box{width: 100% !important;}
.fb-like-box iframe[style]{width: 100% !important;}
.fb-comments span{width: 100% !important;}
.fb-comments iframe span[style]{width: 100% !important;}
.fb-like-box span{width: 100% !important;}
.fb-like-box iframe span[style]{width: 100% !important;}
.fotleft{float:left}
.fotright{float:right;text-align:right;}
</style>
<b:if cond='data:blog.pageType == "error_page"'>
<style type='text/css'>#post-wrapper,#posting{width:100% !important;}.status-msg-wrap{background:#fff url(http://2.bp.blogspot.com/-GJqe_Mw3nCA/Udkt6st2LGI/AAAAAAAACFg/vnAqikDNzmQ/s1600/404.png) no-repeat center 10px;display:block;margin:0 auto;position:relative;min-height:150px;font-family:"Archivo Narrow",Verdana,Sans-Serif;text-shadow:1px 1px #fff, 2px 2px #ccc, 3px 3px #ddd, 4px 4px #eee;font-size:2.2em;font-weight:bold;}.status-msg-body{padding:150px 0 20px 0;max-width:100% !important;width:auto !important;position:relative !important;}.status-msg-border,#blog-pager,.right-post,.sidebar,.widget-label{display:none !important;}</style>
</b:if>
<b:if cond='data:blog.pageType != "index"'>
<style type='text/css'>
/* KOMENTAR */
.comments h3{color:#3b3b3b;font-family:"Archivo Narrow",Arial, Sans-Serif;font-weight:500;margin:0 0 0 0;font-size:1.6em;padding:0 0 10px;}h4#comment-post-message{margin:0 0 0 0;}.comments{clear:both;margin-top:10px;margin-bottom:0}
.comments .comments-content{font-size:13px;margin-bottom:8px}.comments .comment .comment-actions a{background:#f0f0f0;border:1px solid #d2d2d2;box-shadow:0px 1px 1px #f2f2f2, inset 0px 1px 0px #fff;text-shadow:0px 1px 0px #fff;color:#8c8c8c;font-size:9px;line-height:15px;padding:8px 0px;-moz-border-radius:2px;border-radius:2px;text-align:center;font-weight:bold;position:relative;margin-right:10px;padding:3px 8px}.comments .comment .comment-actions a:hover{text-decoration:none;border:1px solid #b2b2b2;box-shadow:0px 3px 1px #f2f2f2,inset 0px 1px 0px #fff;}.comments .comments-content .comment-thread ol{text-align:left;margin:13px 0;padding:0}.comments .comments-content .inline-thread{padding:0;margin:0}.comments .comments-content .comment-thread{margin:0;padding:0}.comments .comments-content .comment-thread:empty{display:none}.comments .comments-content .comment-replies{margin-top:8px;margin-left:55px}.comments .thread-toggle {
margin-bottom:10px;}.comments .comment-thread.inline-thread .comment{margin:0px 0px 5px 38%;}.comment .comment-thread.inline-thread .comment:nth-child(6) {margin:0px 0px 5px 38%;}.comment .comment-thread.inline-thread .comment:nth-child(5) {margin:0px 0px 5px 30%;}.comment .comment-thread.inline-thread .comment:nth-child(4) {margin:0px 0px 5px 24%;}.comment .comment-thread.inline-thread .comment:nth-child(3) {margin:0px 0px 5px 16%;}.comment .comment-thread.inline-thread .comment:nth-child(2) {margin:0px 0px 5px 8%;}.comment .comment-thread.inline-thread .comment:nth-child(1) {margin:0px 0px 5px 0;}.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 .comments-content .user{font-weight:bold;margin:0}.comments .comments-content .icon.blog-author{position:absolute;top:-2px;right:-2px;margin:0;background-image: url("http://3.bp.blogspot.com/-c0gwWErZ6ZI/UbSD539E_qI/AAAAAAAAAPQ/vQuaJw27r1A/s1600/bitmap.png");width:59px;height:43px;}.comments .comments-content .datetime{ margin-left:6px;font-style:italic;font-size:11px}.comments .comments-content .datetime a{color:#666}.comments .comments-content .comment-header{margin:0;padding:0}.comments .comments-content .comment-content{text-align:left;margin:0;padding:12px 0 8px;font-size:12px}.comments .comments-content .owner-actions{border:1px solid #ccc}.comments .comments-replybox{height:250px;max-width:100%}.comments .comment-replybox-single{padding:0;margin:8px 0;margin-left:55px}.comments .comment-replybox-thread{margin:8px 0 0 0;padding:0;}.comments .thread-toggle{cursor:pointer;padding:0;margin:0;display:block}.comments .continue a{background:#f0f0f0;border:1px solid #d2d2d2;box-shadow:0px 1px 1px #f2f2f2, inset 0px 1px 0px #fff;text-shadow:0px 1px 0px #fff;color:#8c8c8c;font-size:9px;line-height:15px;padding:8px 0px;-moz-border-radius:2px;border-radius:2px;text-align:center;font-weight:bold;position:relative;margin:0;padding:4px 8px;display:block}.comments .continue a:hover{border:1px solid #b2b2b2;box-shadow:0px 3px 1px #f2f2f2,inset 0px 1px 0px #fff;}.comments .continue a:active{top:2px;left:2px}.comments .comments-content .loadmore{border:1px solid #e9e9e9;cursor:pointer;height:30px;max-height:30px;margin-top:8px;}.comments .comments-content .loadmore.loaded{max-height:30px;opacity:.3;overflow:hidden}.comments .comments-content .loadmore a{
padding:0;display:block;line-height:30px;text-align:center}.comments .comments-content .loadmore a:hover{border:1px solid #d9d9d9;}.comments .thread-chrome.thread-collapsed{display:none}.comments .thread-toggle{display:inline-block}.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:0.3em;padding-right:4px}.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;}.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent}.comments .avatar-image-container{background:#F8f8f8;float:left;overflow:hidden;border:1px solid #e9e9e9;padding:3px;max-height:42px;width:42px}.comments .avatar-image-container img{width:42px !important;max-width:42px !important;height:42px !important;}.comments .comment-block{position:relative;background:#F8f8f8;padding:12px;margin-left:55px;border:1px solid #e9e9e9}#comment-editor{width:96%;background:#f8f8f8;padding:12px 2% 12px 2%;margin:0;box-shadow: 1px 1px 0px #e9e9e9 inset, -1px -1px 0px #e9e9e9 inset;}
</style>
</b:if>
<!-- Script Related Post With Thumbnail -->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#at-gambar{background:#f8f8f8;padding:12px;margin:6px 0 0;border:1px solid #e9e9e9;overflow:hidden;}#at-gambar h2{font-family:"Archivo Narrow", Arial, Sans-Serif;font-weight:600;font-size:1.5em;padding:0 0 10px;margin:0}#at-gambar a{font-family:'Oswald',Verdana,Sans-serif;color:#4b4b4b;box-shadow:0px 2px 2px #f0f0f0;overflow:hidden;text-align:center;font-size:12px;border:1px solid #d3d3d3;text-decoration:none;margin:0 5px 5px 0;padding:6px;float:left;}#at-gambar a img{width:100px;height:98px;}.box-related{width:100px;padding-left:3px;height:50px;border:0px none;margin:0 0 5px;padding:0pt;line-height:normal;font-stretch:normal;}#at-gambar a:last-child{margin-right:0px;}#at-gambar a:nth-child(1):hover{box-shadow:0px -3px 0px #E50700 inset;}#at-gambar a:nth-child(2):hover{box-shadow:0px -3px 0px #0084C5 inset;}#at-gambar a:nth-child(3):hover{box-shadow:0px -3px 0px #6CAC00 inset;}
#at-gambar a:nth-child(4):hover{box-shadow:0px -3px 0px #00C3B7 inset;}
#at-gambar a:nth-child(5):hover{box-shadow:0px -3px 0px #FF8168 inset;}#at-gambar a:hover{box-shadow:0px -3px 0px #FF8168 inset;}#at-gambar a:nth-child(1):hover,#at-gambar a:nth-child(2):hover,#at-gambar a:nth-child(3):hover,#at-gambar a:nth-child(4):hover,#at-gambar a:nth-child(5):hover,#at-gambar a:hover{background:#f0f0f0;background:-webkit-linear-gradient(top, #fff, #f0f0f0);background:-moz-linear-gradient(top, #fff, #f0f0f0);background:-ms-linear-gradient(top, #fff, #f0f0f0);background:-o-linear-gradient(top, #fff, #f0f0f0);background:linear-gradient(top, #fff, #f0f0f0);}#at-gambar img{width:100%;margin:0;padding:0}
#posting{width:auto !important;max-width:100%;margin:15px 20px 15px 0px;}
</style>
<script> var defaultnoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1-22XWTUe6X91emCokeCWR2zlLHMhPxq8NRWehG7wcdtkjh32SK9tqnpDoUP4Qn_f6aFgcdYdJfLWlaRglFsu2ZENa1nz75_IK4bijfviYVwBYnBCClUb7sgZMKjdLvFiyvyGxjP6lqI/s100/picture_not_available.png"; var maxresults = 5; var splittercolor = "#d3d3d3 "; var relatedpoststitle = "You Might Like :"; </script>
<script src='http://yourjavascript.com/1376828511/terkait-v8.js' type='text/javascript'/>
</b:if>
<!-- Headline -->
<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'/>
<script type='text/javascript'>
//<![CDATA[
var gfeedfetcher_loading_image="http://3.bp.blogspot.com/-YDemUmb6mk8/Ub9mpleHHOI/AAAAAAAACCc/u_rMQ9wdYlU/s1600/9.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img alt="loading" title="loading" src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};
var gfeedfetcher_loading_image="http://3.bp.blogspot.com/-YDemUmb6mk8/Ub9mpleHHOI/AAAAAAAACCc/u_rMQ9wdYlU/s1600/9.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
//]]>
</script>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1-22XWTUe6X91emCokeCWR2zlLHMhPxq8NRWehG7wcdtkjh32SK9tqnpDoUP4Qn_f6aFgcdYdJfLWlaRglFsu2ZENa1nz75_IK4bijfviYVwBYnBCClUb7sgZMKjdLvFiyvyGxjP6lqI/s1600/picture_not_available.png';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'" alt="'+posttitle+'" title="'+posttitle+'"/></a>');document.write('<div class="title-label"><a href="'+posturl+'" target ="_top">'+posttitle+'</a></div>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+'-'+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a class="comment-label" href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a class="more-label" href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<style>
#posting{width:auto !important;max-width:100%;margin:15px 20px 15px 0px;}
.postthumb {display:none !important;}
h2.post-title {padding-left:0px !important;padding-bottom:13px;}
</style>
</b:if>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>
<script>
$(function () {
// TinyNav.js 1
$('#topnav').tinyNav({
active: 'current'
});
// TinyNav.js 2
$('#navigation').tinyNav({
active: 'current'
});
});
</script>
</head>
<body expr:class='"loading" + data:blog.mobileClass'>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
<b:includable id='main'><script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener('load',
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
</script>
<div id="navbar-iframe-container"></div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">
gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() {
if (gapi.iframes && gapi.iframes.getContext) {
gapi.iframes.getContext().openChild({
url: 'https://www.blogger.com/navbar.g?targetBlogID\758283199725144440060\46blogName\75Tutorial\46publishMode\75PUBLISH_MODE_BLOGSPOT\46navbarType\75LIGHT\46layoutType\75LAYOUTS\46searchRoot\75http://tutorial-for-me.blogspot.com/search\46blogLocale\75in\46v\0752\46homepageUrl\75http://tutorial-for-me.blogspot.com/\46vt\75-441608843384085410',
where: document.getElementById("navbar-iframe-container"),
id: "navbar-iframe"
});
}
});
</script><script type="text/javascript">
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js';
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(script);
}})();
</script>
</b:includable>
</b:widget>
</b:section>
<!-- wrapper start -->
<div id='wrapper'>
<div id='topwrapper'>
<form action='/search' id='search-top' method='get'> <input name='q' placeholder='Search...' size='40' type='text'/><input id='search-button-top' type='submit' value='GO'/></form>
<div class='newspic'>
<span class='breakingnews'>News Update</span>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker("example1", "example1class", 5000, "_new")
cssfeed.addFeed("Feed Blog", "http://tutorial-for-me.blogspot.com/feeds/posts/default") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("span") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<!-- top navigation -->
<ul id='topnav'>
<li class='current'><a href='#'>About</a></li>
<li><a href='#'>Privacy Policy</a></li>
<li><a href='#'>Disclaimer</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
<div style='clear:both;'/>
<!-- header wrapper start -->
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tutorial (Header)' type='Header'>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "BEHIND"'>
<!--
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width if the user is using shrink to fit.
This results in a margin-width's worth of pixels being cropped. If the
user is not using shrink to fit then we expand the header.
-->
<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
<b:else/>
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--Show the image only-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
<!--Show the description-->
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<b:if cond='data:blog.pageType != "item"'>
<h1 class='title'><b:include name='title'/></h1>
<b:include name='description'/>
<b:else/>
<p class='title'><b:include name='title'/></p>
<b:include name='description'/>
</b:if>
</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'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
<b:section class='header' id='header-right' maxwidgets='1' showaddelement='yes'/>
</div>
<!-- header wrapper end -->
<!-- navigation start -->
<nav>
<ul id='navigation'>
<li class='current'>
<a class='home' href='/'>Home</a>
</li>
<li>
<a href='#'>Teknologi</a>
<div class='sub-nav-wrapper'><ul class='sub-nav'>
<li><a href='#'>Gadget</a></li>
<li><a href='#'>Review</a></li>
<li><a href='#'>Harga</a></li>
</ul></div>
</li>
<li>
<a href='#'>Sepakbola</a>
<div class='sub-nav-wrapper'><ul class='sub-nav'>
<li><a href='#'>Liga Inggris</a></li>
<li><a href='#'>Liga Spanyol</a></li>
<li><a href='#'>Liga Italia</a></li>
</ul></div>
</li>
<li>
<a href='#'>Entertainment</a>
<div class='sub-nav-wrapper'><ul class='sub-nav'>
<li><a href='#'>Gosip</a></li>
<li><a href='#'>Biodata Artis</a></li>
<li><a href='#'>Foto Artis</a></li>
</ul></div>
</li>
<li>
<a href='#'>Menu</a>
<div class='sub-nav-wrapper'><ul class='sub-nav'>
<li><a href='#'>Submenu1</a></li>
<li><a href='#'>Submenu2</a></li>
<li><a href='#'>Submenu3</a></li>
</ul></div>
</li>
<li>
<a href='http://fastestmagz.blogspot.com/p/testing-statis-page.html'>Statis</a>
</li>
<li>
<a href='http://fastestmagz.blogspot.com/error'>Error</a>
</li>
<li class='search'>
<form action='/search' id='search' method='get'> <input name='q' placeholder='Search...' size='40' type='text'/><input id='search-button' type='submit' value=''/></form>
</li>
</ul>
</nav>
<!-- navigation end -->
<!-- content wrapper start -->
<div id='content-wrapper'>
<!-- post wrapper start -->
<aside id='post-wrapper'>
<b:section class='main' id='posting' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>
<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.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='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> » <span><data:post.title/></span>
</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>
<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='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.forceIframeComments'>
<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/>
<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:if>
</b:includable>
<b:includable id='comment_picker' var='post'>
<b:if cond='data:post.forceIframeComments'>
<b:include data='post' name='iframe_comments'/>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
<b:else/>
<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:if>
</b:includable>
<b:includable id='comments' var='post'>
<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>
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b: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='date-header'>
<span><data:post.dateHeader/></span>
</div>
</b:if>
<div class='mobile-post-outer'>
<a expr:href='data:post.url'>
<h3 class='mobile-index-title entry-title' itemprop='name'>
<data:post.title/>
</h3>
</a>
<div class='mobile-index-contents'>
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'>
<div class='mobile-thumbnail'>
<img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
</div>
</a>
<b:else/>
<a expr:href='data:post.url'>
<div class='mobile-thumbnail'>
<img expr:alt='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1-22XWTUe6X91emCokeCWR2zlLHMhPxq8NRWehG7wcdtkjh32SK9tqnpDoUP4Qn_f6aFgcdYdJfLWlaRglFsu2ZENa1nz75_IK4bijfviYVwBYnBCClUb7sgZMKjdLvFiyvyGxjP6lqI/s100/picture_not_available.png'/>
</div>
</a>
</b:if>
<div class='post-body'>
<div class='index-post'>
<b:if cond='data:post.snippet'><data:post.snippet/></b:if>
</div>
</div>
</div>
<div style='clear: both;'/>
<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'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<div class='date-posts'>
<div class='post-outer'>
<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.thumbnailUrl'>
<meta expr:content='data:post.thumbnailUrl' itemprop='image_url'/>
</b:if>
<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data:post.id' itemprop='postId'/>
<a expr:class='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: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>
</h3>
</b:if>
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<div class='post-footer'>
<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' style='display:none;'>
<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' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<a expr:class='data:post.id'/>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.thumbnailUrl'>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_size=160;
image_tag='<img src="'+image_url.replace('/s72-c/','/s'+image_size+'/')+'" alt="'+post_title+'" title="'+post_title+'"/>';
if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
<a expr:href='data:post.url'><div class='postthumb'><script type='text/javascript'>
document.write(bp_thumbnail_resize("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script></div></a>
<b:else/>
<b:if cond='data:post.firstImageUrl'><a expr:href='data:post.url'><div class='postthumb'><img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/></div></a>
<b:else/>
<a expr:href='data:post.url'><div class='postthumb'><img expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1-22XWTUe6X91emCokeCWR2zlLHMhPxq8NRWehG7wcdtkjh32SK9tqnpDoUP4Qn_f6aFgcdYdJfLWlaRglFsu2ZENa1nz75_IK4bijfviYVwBYnBCClUb7sgZMKjdLvFiyvyGxjP6lqI/s160/picture_not_available.png'/></div></a>
</b:if>
</b:if>
<b:if cond='data:post.labels'>
<div class='post-label'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag nofollow'><data:label.name/></a><b:if cond='data:label.isLast != "true"'/>
</b:loop>
</div>
</b:if>
<b:if cond='data:post.title'>
<h2 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'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<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' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
<b:else/> <data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
</b:if>
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
<b:if cond='data:blog.pageType == "static_page"'>
<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>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='post-body entry-content' expr:id='"summary" + data:post.id' itemprop='articleBody'>
<div class='post-info'>
<div class='post-info-icon admin'>
<b:if cond='data:top.showAuthor'>
<span class='vcard'>
<span class='fn'>
<data:post.author/>
</span>
</span>
</b:if>
</div>
<div class='post-info-icon komentar'>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <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>
</b:if>
</div>
<div class='post-info-icon jam'>
<abbr class='updated published' expr:title='data:post.timestampISO8601'>
<data:post.timestamp/>
</abbr>
</div>
</div>
<b:if cond='data:post.snippet'>
<div class='snippetpost'>
<data:post.snippet/><br/>
<div class='readmore'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>Read More →</a>
</div>
</div>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link' style='display:none;'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
</div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div itemscope='itemscope' itemtype='http://data-vocabulary.org/Review'>
<div class='post-info' style='padding:0 0 0 0 !important;margin:0 0 15px 0 !important;border-top:none !important;border-bottom:none !important;'>
<div class='post-info-icon admin'>
<b:if cond='data:top.showAuthor'>
<span class='vcard'>
<span class='fn'>
<span itemprop='reviewer'>
<data:post.author/>
</span>
</span>
</span>
</b:if>
</div>
<div class='post-info-icon komentar'>
<b:if cond='data:post.allowComments'>
<a expr:onclick='data:post.addCommentOnclick' href='#comments'> <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>
</b:if>
</div>
<b:if cond='data:post.labels'>
<div class='post-info-icon label'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag nofollow'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</div>
</b:if>
<b:if cond='data:post.dateHeader'>
<div class='post-info-icon tanggal'>
<abbr class='updated published' expr:title='data:post.timestampISO8601'>
<data:post.dateHeader/>
</abbr>
</div>
</b:if>
</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='share-button-box'>
<div class='plus-button'>
<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
</div>
<div class='like-button'>
<div class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-width='90' expr:data-href='data:post.url'/>
</div>
<div class='tweet-button'>
<a class='twitter-share-button' data-lang='id' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<div class='linkedin-button'>
<script src='//platform.linkedin.com/in.js' type='text/javascript'>
lang: en_US
</script>
<script data-counter='right' expr:data-url='data:post.url' type='IN/Share'/>
</div>
</div>
<div class='clear'/>
<div class='artikel-info' itemprop='description'>
<b:if cond='data:post.firstImageUrl'><img class='thumb-info' expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/></b:if>
<b>Title</b> : <span itemprop='itemreviewed'><data:blog.pageName/></span><br/>
<b>Description</b> : <b:if cond='data:post.snippet'><data:post.snippet/></b:if><br/>
<b>Rating</b> : <span itemprop='rating'>5</span>
</div>
<div class='clear'/>
<div id='at-gambar'>
<b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=999"' type='text/javascript'/> </b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script>
</div>
</div>
</b:if>
<!-- facebook comment here -->
<b:if cond='data:blog.pageType == "item"'>
<div style='margin-top:20px'>
<div class='fb-comments' data-num-posts='5' data-width='612' expr:data-href='data:blog.url'/>
</div>
</b:if>
</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='edit' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' title='edit' 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.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'/>
<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>
<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>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:section class='right-post' id='right-post' showaddelement='yes'/>
<div class='post-bottom'>
<b:section class='widget-label' id='widget-label-kiri' preferred='yes'/>
<b:section class='widget-label' id='widget-label-kanan' preferred='yes'/>
</div>
</b:if>
</b:if>
</aside>
<!-- post wrapper end -->
<!-- sidebar wrapper start -->
<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</aside>
<!-- sidebar wrapper end -->
</div>
<!-- content wrapper end -->
<div class='clear'/>
</div>
<!-- wrapper end -->
<div id='footer-wrapper'>
<div id='footer-top'>
<b:section class='kiri' id='kiri' preferred='yes'/>
<b:section class='kiri2' id='kiri2' preferred='yes'/>
<b:section class='tengah' id='tengah' preferred='yes'/>
<b:section class='kanan' id='kanan' preferred='yes'/>
</div>
</div>
<div id='footer-wrapper2'>
<div id='footer-bottom'>
<span class='fotleft'>Copyright 2013 <b:if cond='data:blog.title'><a expr:href='data:blog.homepageUrl' rel='copyright'><data:blog.title/></a></b:if> - All Rights Reserved</span>
<span class='fotright'>Design by <a href='http://www.mas-sugeng.com' target='_blank' title='Mas Sugeng'>Mas Sugeng</a> - Powered by <a href='http://www.blogger.com' rel='nofollow'>Blogger</a>
</span>
</div>
</div>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=4;
var displayPageNum=4;
var upPageWord ='Prev ';
var downPageWord =' Next';
</script>
</b:if>
</b:if>
<script>
window.___gcfg = {lang: 'id'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
<script src='http://yourjavascript.com/3617612118/allscript3.js' type='text/javascript'/>
</body>
</HTML>
Semoga Informasi Tentang Tutorial Membuat Kerangka Template bermanfaat bagi anda...
Sumber http://www.gubuk45.com/2013/04/membuat-kerangka-template-blogspot.html