Template Blog Premium Valid AMP 100% GRATIS
Juli 20, 2021
Add Comment
Halo saudara-saudaraku sesama blogger di seluruh nusantara, Salam sukses untuk kita semua :)
Pada kesempatan yang berbahagia ini, saya akan berbagi Script HTML Quick Start Template Premium Blog Programmer Bojonegoro Valid AMP 100% GRATIS yang pernah atau sedang digunakan blog tercinta ini :)
Berikut tampilan awal dari template AMP yang akan saya bagikan:
Karena saya ingin berbagi aja hehehe.. berbagi itu indah wkwkwk...
Alasan lainnya: Karena menurut pengalaman saya yang masih newbie ini, para blogger pemula itu suka sekali mengganti-ganti template blognya.
Saya sendiri pun sampai sekarang juga masih suka mengganti-ganti template.
Kalau di hitung-hitung mungkin sudah belasan bahkan puluhan kali ganti template hingga lupa kalau harus membuat konten hehehe :D
Bahkan yang lebih parah, bukan hanya templatenya yang di ganti melainkan juga blognya yang di hapus lalu buat blog baru lagi, edit template lagi lalu di hapus lagi wkwkwk :v gitu aja terus sampai sukses :D
Temen-temen pernah nggak mengalaminya?
Kalau saya dulu sering seperti itu :v
Padahal saat itu saya telah mengedit template secara total pada blog baru saya, dengan mengatur menu navigasi, menambahkan menu wajib seperti privacy policy, disclaimer, terms of service, sitemap dan lain sebagainya dan pada akhirnya di hapus juga.
Yah, kalau di ingat-ingat nyesel juga sih ... kenapa dulu harus di hapus blognya, padahal kan ngedit template juga lumayan menguras tenaga, waktu dan pikiran hehehe...
Tapi sudahlah ... Mungkin inilah yang dinamakan Proses ya sob :v
Nah, belajar dari pengalaman tersebut, maka mulai dari sekarang saya ingin lebih fokus untuk membuat konten-konten yang original, berkualitas dan bermanfaat daripada sibuk mengedit atau mengganti-ganti template yang menguras tenaga dan membuang-buang waktu.
Saya pun bermaksud mengajak temen-temen blogger pemula yang baru menjajaki dunia blogging seperti saya ini agar jangan terlalu sibuk mengedit atau mengganti-ganti template blog, lebih baik fokus pada konten atau isi dari blog temen-temen.
Walaupun begitu, tampilan juga penting ya sob... Maka dari itu, saya akan membagikan Script HTML Quick Start Template Premium Blog Programmer Bojonegoro dengan tampilan yang cukup bagus ini(menurut saya :v).
Jadi temen-temen tidak perlu capek-capek lagi mengedit atau mengganti-ganti template, karena sudah saya editkan menu navigasinya serta sudah saya sediakan tools-tools seperti HTML Editor, Parse HTML, Color Picker dan AMP Image Creator. Temen-temen tinggal menyesuaikan data dan link-linknya saja sesuai dengan blog kalian hehehe...
Tetapi template ini lebih cocok untuk digunakan oleh temen-temen yang memiliki blog dengan niche tentang pemrograman ya ...
Niche lain juga cocok, cuma yang harus di edit atau di sesuaikan lebih banyak :v
Oh ya, untuk memastikan apakah template yang akan saya bagikan ini benar-benar valid AMP 100% atau tidak, silakan temen-temen cek hasil pengujian AMP DISINI.
Oke, tanpa basa-basi lagi.
Berikut Script HTML Quick Start Template Premium Blog Programmer Bojonegoro Valid AMP 100% GRATIS
Pada kesempatan yang berbahagia ini, saya akan berbagi Script HTML Quick Start Template Premium Blog Programmer Bojonegoro Valid AMP 100% GRATIS yang pernah atau sedang digunakan blog tercinta ini :)
Berikut tampilan awal dari template AMP yang akan saya bagikan:
Mengapa saya membagikan Quick Start Template Premium Blog Programmer Bojonegoro ini?
Karena saya ingin berbagi aja hehehe.. berbagi itu indah wkwkwk...
Alasan lainnya: Karena menurut pengalaman saya yang masih newbie ini, para blogger pemula itu suka sekali mengganti-ganti template blognya.
Saya sendiri pun sampai sekarang juga masih suka mengganti-ganti template.
Kalau di hitung-hitung mungkin sudah belasan bahkan puluhan kali ganti template hingga lupa kalau harus membuat konten hehehe :D
Bahkan yang lebih parah, bukan hanya templatenya yang di ganti melainkan juga blognya yang di hapus lalu buat blog baru lagi, edit template lagi lalu di hapus lagi wkwkwk :v gitu aja terus sampai sukses :D
Temen-temen pernah nggak mengalaminya?
Kalau saya dulu sering seperti itu :v
Padahal saat itu saya telah mengedit template secara total pada blog baru saya, dengan mengatur menu navigasi, menambahkan menu wajib seperti privacy policy, disclaimer, terms of service, sitemap dan lain sebagainya dan pada akhirnya di hapus juga.
Yah, kalau di ingat-ingat nyesel juga sih ... kenapa dulu harus di hapus blognya, padahal kan ngedit template juga lumayan menguras tenaga, waktu dan pikiran hehehe...
Tapi sudahlah ... Mungkin inilah yang dinamakan Proses ya sob :v
Nah, belajar dari pengalaman tersebut, maka mulai dari sekarang saya ingin lebih fokus untuk membuat konten-konten yang original, berkualitas dan bermanfaat daripada sibuk mengedit atau mengganti-ganti template yang menguras tenaga dan membuang-buang waktu.
Saya pun bermaksud mengajak temen-temen blogger pemula yang baru menjajaki dunia blogging seperti saya ini agar jangan terlalu sibuk mengedit atau mengganti-ganti template blog, lebih baik fokus pada konten atau isi dari blog temen-temen.
Seperti kata mastah "Konten adalah raja dari sebuah blog atau website".Jadi, memiliki konten yang original dan berkualitas itu jauh lebih penting daripada sekedar tampilan hehehe...
Walaupun begitu, tampilan juga penting ya sob... Maka dari itu, saya akan membagikan Script HTML Quick Start Template Premium Blog Programmer Bojonegoro dengan tampilan yang cukup bagus ini(menurut saya :v).
Jadi temen-temen tidak perlu capek-capek lagi mengedit atau mengganti-ganti template, karena sudah saya editkan menu navigasinya serta sudah saya sediakan tools-tools seperti HTML Editor, Parse HTML, Color Picker dan AMP Image Creator. Temen-temen tinggal menyesuaikan data dan link-linknya saja sesuai dengan blog kalian hehehe...
Tetapi template ini lebih cocok untuk digunakan oleh temen-temen yang memiliki blog dengan niche tentang pemrograman ya ...
Niche lain juga cocok, cuma yang harus di edit atau di sesuaikan lebih banyak :v
Oh ya, untuk memastikan apakah template yang akan saya bagikan ini benar-benar valid AMP 100% atau tidak, silakan temen-temen cek hasil pengujian AMP DISINI.
Oke, tanpa basa-basi lagi.
Berikut Script HTML Quick Start Template Premium Blog Programmer Bojonegoro Valid AMP 100% GRATIS
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML amp='amp'>
<head>
<meta content='lWIPDjfYRc8SGLEMvHKzsYTxV0N5Nxd7rTOvkaS4cjA' name='google-site-verification'/>
<meta charset='utf-8'/>
<meta content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui' name='viewport'/>
<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
<title>404: Page Not Found | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> - Programmer Bojonegoro</title>
</b:if>
</b:if>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.url' rel='amphtml'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"https://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link href='https://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link href='https://plus.google.com/+Tubianto' rel='me'/>
<link href='https://plus.google.com/+Tubianto' rel='publisher'/>
<!--[if IE]> <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]-->
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
</b:if>
<meta content='all' name='audience'/>
<meta content='Tubianto' name='author'/>
<meta content='blogger' name='generator'/>
<meta content='translate' name='google'/>
<meta content='general' name='rating'/>
<meta content='id' name='geo.country'/>
<meta content='Indonesia' name='geo.placename'/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description' property='og:description'/>
<b:if cond='data:blog.homepageUrl == data:blog.url'><meta expr:content='data:blog.title' name='Keywords'/></b:if>
<b:if cond='data:blog.pageType == "item"'><meta expr:content='data:blog.pageName' name='Keywords'/></b:if>
<b:else/>
<meta expr:content='data:blog.metaDescription + " - " + data:blog.pageName + " - " + data:blog.title' name='description' property='og:description'/>
</b:if>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='"Silahkan kunjungi " + data:blog.pageTitle + "Untuk membaca postingan-postingan menarik."' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDzrdDDszzrj03uSNNIYOPgiXx1SE_GlNzAkmTyaoiERglo07a2GEDsu5EOAl53LQ1l0eJlSIsXLhxDBAdID714CCiwJCyisenCijUAjqBmuYjodTKX5q71CD4eYBh5kWGn_jHoURplr8/s1600/logo-pb.PNG' property='og:image'/>
</b:if>
</b:if>
<meta content='DevzV6UFchWcEkVChAhiLll7LfEN_8XMAWTNHeqOl-M' name='google-site-verification'/>
<meta content='S7fcAOX03CVx8Sr-WaE49nG0Lwn2KJPk1ETYR_fMRm4' name='google-site-verification'/>
<meta content='https://www.facebook.com/tubianto.tigerboys' property='fb:admins'/>
<b:if cond='data:blog.pageType == "item"'>
<meta content='https://www.facebook.com/tubianto.tigerboys' property='article:author'/>
</b:if>
<meta expr:content='data:blog.title' name='twitter:site'/>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@tubianto99' name='twitter:creator'/>
<!-- <b:skin><![CDATA[
#header{width:350px;margin:0;padding:0}
.main-wrapper{width:540px;float:left}
.sidebar-wrapper{width:250px;float:right}
#sidebar-left,ul, ol {list-style:none}
.atas posting{
width: 578px;
padding:10px 0px 10px 10px;
background:#fff;
margin:0px 0px 10px 0px;
text-align:left;
border:1px solid #ccc;
}
.atas posting .widget{
}
]]></b:skin>
<b:if cond='data:blog.pageType != "item" and data:blog.pageType != "static_page"'>
<style amp-custom='amp-custom'>
#widget-social{padding:0;margin:0 auto}
ul.pbsocial{border:0;list-style:none;overflow:hidden;margin:10px}
.pbsocial li{float:right;background:none;margin-left:4px;padding:0}
.pbsocial li a {display:block;width:47px;height:47px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5lzwFE1_dfFfTAv7dyTepI2SJDKxqZrWv34B7iDSjPSEnKu48IbgMbpNjoWxTVWLURTlWZ0xsVzr9uOR7xdHK9iFczxRhsUO7JkGqFB0biD3sD73-Q64M6-IiZY72DccQE2U4oOQXC_gV/s1600/mixicon.png) no-repeat transparent;text-indent:-99999em}
.pbsocial li a:hover{padding:0}
.pbsocial li.youicon a{background-position:-248px 0;transition:all 200ms ease-in-out}
.pbsocial li.rssicon a{background-position:-186px 0;transition:all 200ms ease-in-out}
.pbsocial li.gicon a{background-position:-124px 0;transition:all 200ms ease-in-out}
.pbsocial li.twicon a{background-position:-62px 0;transition:all 200ms ease-in-out}
.pbsocial li.fbicon a{background-position:0 0;transition:all 200ms ease-in-out}
.pbsocial li.youicon a:hover{background-position:-248px -62px}
.pbsocial li.rssicon a:hover{background-position:-186px -62px}
.pbsocial li.gicon a:hover{background-position:-124px -62px}
.pbsocial li.twicon a:hover{background-position:-62px -62px;}
.pbsocial li.fbicon a:hover{background-position:0 -62px}
.contact-box{margin-top:10px}
.contact-box svg{width:24px;height:24px;vertical-align:-6px;margin-right:5px}
.contact-box svg path{fill:#444}
.contact-box .bbm svg{width:20px;height:20px;vertical-align:-5px;margin-right:5px}
.post-body .contact-me a{color:#444;font-weight:300}
.post-body .contact-me a[href^="http://"]:after,.post-body .contact-me a[href^="https://"]:after{content:"";background:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='16' height='16' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:#444' d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat;background-size:16px 16px;width:16px;height:16px;display:inline-block;margin-left:3px;vertical-align:-2px}
.contact-me{display:block}
.contact-me span{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}
.contact-me amp-accordion h5 span{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.contact-box .map,.contact-box .bbm{position:relative;padding-left:29px}
.contact-box .bbm .barcode-bbm{margin:10px 0;width:300px}
.contact-box .bbm span span{font-weight:300}
.contact-box .map svg{position:absolute;top:0;left:0}
.contact-box .bbm svg{position:absolute;top:4px;left:0}
.contact-box amp-accordion section:not([expanded]) .show-less,.contact-box amp-accordion section[expanded] .show-more{display:none}
.contact-box amp-accordion h5{background:none;border:none;color:#444;font-weight:500;font-size:18px;margin:0;padding:0;text-align:left;}
@media screen and (max-width:414px){.contact-box amp-iframe{height:550px}
.contact-box .bbm .barcode-bbm{width:100%}
}
.related-post{margin:20px 20px 0;padding:0}
.related-post h4{font-size:20px;margin:0 0 10px;}
.related-post .underpost1,.related-post .underpost2{width:50%;display:inline-block;float:left;}
.related-post .underpost1{margin-bottom:10px;}
.related-post .underpost2{margin:20px 0;}
.clear{clear:both;}
@media screen and (max-width:414px){
.related-post .underpost1,.related-post .underpost2{width:100%;display:block;float:none;}
.related-post .underpost1{margin-bottom:0;}
.related-post .underpost2{margin:20px 0 0;}
}
div#FollowByEmail1{border:1px solid #ffffff;background:#fff;border-radius:3px;padding:10px;width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#FollowByEmail1 h2{font-family:Roboto,sans-serif;font-size:18px;font-weight:300;text-transform:capitalize;color:#666;margin-bottom:15px;padding:0;line-height:1em}
#FollowByEmail1 p{font-family:Roboto,sans-serif;font-size:14px;font-weight:300;text-transform:capitalize;color:#666;margin-top:15px;padding:0;line-height:1em}
#FollowByEmail1 table{width:100%}
#FollowByEmail1 table td:nth-child(1){width:80%}
#FollowByEmail1 table td:nth-child(2){width:20%}
.FollowByEmail .follow-by-email-inner .follow-by-email-address{background:#efefef;width:100%;height:44px;padding:0 10px;font-family:Roboto,sans-serif;font-size:14px;border:0;outline:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit{height:44px;font-family:Roboto,sans-serif;text-transform:uppercase;border-radius:0;padding:0 10px;width:100%;font-size:14px;background:#00c2ff;border:0;outline:0;cursor:pointer;color:#fff;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
src: local('Poppins'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v1/HLBysyo0MQBO_7E-DWLwzg.woff2) format('woff2');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
src: local('Poppins Medium'), local('Poppins-Medium'), url(https://fonts.gstatic.com/s/poppins/v1/yQWaOD4iNU5NTY0apN-qj_k_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
src: local('Poppins SemiBold'), local('Poppins-SemiBold'), url(https://fonts.gstatic.com/s/poppins/v1/zO07Oxe3SOlw0l2YX2sdIfk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
src: local('Poppins Bold'), local('Poppins-Bold'), url(https://fonts.gstatic.com/s/poppins/v1/57TQ-anwthzkETEIO4jESPk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
}
/* Material Icon */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format('truetype');
}
.material-icons {font-family: 'Material Icons';font-weight:normal;font-style:normal;font-size:inherit;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;vertical-align:middle;}
body{background:#ffffff;font-family: 'Poppins', sans-serif;font-size:13.6px;margin:0;font-weight:400;line-height:22px;text-decoration:none}
#header h1,#header p,.Navtop ul li a,.search-form{text-transform:uppercase}
.main-wrapper,.sidebar-wrapper{word-wrap:break-word;overflow:hidden}
.Label ul,.sidebar ul,ul.sidebar-menu li,ul.sidebar-menu li ul li{list-style:none}
#credit,.clear{clear:both}
a,a:link,a:visited{color:#f50;text-decoration:none}
a:active,a:hover{color:#111;text-decoration:none}
.search-wrapper{height:60px;float:right;display:inline;padding:0}
#header .description,#items-thumbnail,#items-thumbnail amp-img,.breadcrumbs,.thumbamp,h2.date-header{display:none}
#search-box{width:190px;height:50px;float:right;padding:0;margin:0;position:relative}
#search-box form{border:0;line-height:60px}
.search-button,.search-form{line-height:60px;border:0;height:60px;margin:0}
.search-form{border:3px solid #00c2ff;background:#fff;color:gray;width:100%;padding-left:20px;font-size:12px;letter-spacing:1px;font-weight:400;box-sizing:border-box}
.search-button{background:#00c2ff;width:40px;text-align:center;top:0;right:0;font-size:25px;color:#fff;position:absolute;border-radius:0;text-shadow:none;box-shadow:none}
.search-button:focus,.search-button:hover,.search-form:focus,.search-form:hover{border:0;outline:0;color:#000}
.header-wrapper{box-shadow:0 1px 10px 0px #00ffe2;background:#00c2ff;width:100%;height:60px;position:fixed;z-index:999;overflow:hidden}
#header{background:#00c2ff;height:60px;float:left;width:auto;overflow:hidden;z-index:999;margin:0;padding:0}
#header-inner{margin:5px;padding:0}
#header-inner a{color:#fff}
#header h1,#header p{font-size:20px;line-height:12px;color:#fff;padding:20px 5px;margin:0;font-weight:700}
#header h1 a,#header h1.title a:hover{color:#FFF;text-decoration:none}
#header img-amp{border:0;background:0 0;width:auto;height:auto;margin:0 auto}
.Navtop {
float: right;
width: auto;
height: auto;
padding:5px;
margin: 0;
background: #00c2ff;
}
.Navtop ul{margin:0 auto;padding:0;line-height:3em}
.Navtop ul li{display:inline-block;margin:0 auto;padding-top:8px}
.Navtop ul li a:hover{color:#eee;}
.Navtop ul li a {
color: #ffffff;
padding: 15px 10px 10px;
font-size: 25px;
font-weight: 400;
margin-top: 0;
margin-left: -4px;
}
/* MENU BOTTOM*/
.Navbottom{
text-align: center;
width: auto;
height: auto;
background: #00c2ff;
}
.Navbottom ul {
display: inline-block;
list-style: none;
padding:0;
}
.Navbottom ul li {
display:inline-block;
float: left;
}
.Navbottom ul li a{
display: block;
text-decoration: none;
color: #ffffff;
font-size: 25px;
font-weight: 400;
padding: 0px 10%;
}
.Navbottom ul li a:hover{
color:#eee;
}
h2,h3.date-header{text-transform:none}
.outerpic-wrapper{width:100%;padding:0;overflow:hidden}
.content-wrapper{position:relative;max-width:1024px;margin-left:135px}
.outer-wrapper{position:relative;width:100%;padding:0;margin-top:60px}
.main-wrapper {
width: 690px;
margin: 0 0 0 15px;
float: left;
}
h2{line-height:1.4em;color:#333;margin:.5em 0 .25em}
h3.date-header{font:400 12px Arial;color:#666;line-height:1.2em;margin:.1em 0}
.postag a,.sidebar h2{text-transform:uppercase}
.post{box-shadow:0 1px 2px 0px #5f5f5f; border: 1px solid #ddd; border-radius: 5px; margin:15px 0;padding-right:20px;background:#fff;height:200px;}
.post h1,.post h2{font-size:150%;line-height:1.5em;color:#555;margin:0;padding-top:15px;font-weight:400;text-align:left}
.post h1 a,.post h1 a:visited,.post h1 strong,.post h2 a,.post h2 a:visited,.post h2 strong{display:block;text-decoration:none;color:#333}
.post h1 a:hover,.post h1 strong,.post h2 a:hover,.post h2 strong{color:#aaa}
.summary {
font-size: 13px;
line-height: 1.8em;
color: #555;
margin: 1em 0 .75em;
padding-right: 15px;
}
.thumbnail-area{width:250px;height:100%;overflow:hidden;padding:0;margin:0 20px 0 0;display:inline;float:left}
.thumbnailjpg{width:100%;height:100%;margin:0;padding:0;border:0;outline:0}
.PopularPosts .widget-content{padding:0;box-sizing:border-box}
.PopularPosts .widget-content ul{width:100%;padding:0;list-style-type:none;background:rgb(0, 159, 255)}
.PopularPosts .widget-content ul li {
margin: 0;
padding: 10px 0 10px 60px;
position: relative;
overflow: hidden;
border-top: 1px solid #2b2b2b;
border-bottom: 1px solid #111;
}
.PopularPosts .widget-content ul li:last-child{border-bottom:none}
.PopularPosts .widget-content ul li .item-title{color:#fff;line-height:1.1em;padding:0 10px 0 0}
.PopularPosts .widget-content ul li .item-title a{text-decoration:none;font-size:13px;font-weight:400}
.PopularPosts .widget-content ul li .item-title a:hover{color:#fff}
.PopularPosts .item-snippet{font-size:14px;font-weight:400;margin-top:10px;line-height:1.1em}
.PopularPosts .widget-content ul li amp-img{width:300px;height:180px;padding-right:0;transition:all .5s ease-out}
.PopularPosts .widget-content ul li:first-child{border-bottom:none;padding:0}
.PopularPosts .widget-content ul li:first-child .item-thumbnail{margin:0;width:100%;height:180px;overflow:hidden;display:block}
.PopularPosts .widget-content ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;text-align:left;padding:15px 20px 15px 60px;background:rgba(0, 159, 255, 0.68);z-index:1}
.PopularPosts .widget-content ul li:first-child .item-title a{color:#fff}
.PopularPosts .item-snippet,.PopularPosts .widget-content ul li .item-thumbnail{display:none}
.PopularPosts .widget-content ul{padding-left:0;counter-reset:popcount}
.PopularPosts .widget-content ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:10px;top:50%;margin-top:-19px;color:#fff;font-size:38px;line-height:1;z-index:2}
.sidebar .PopularPosts .item-title a{color:#ffffff;text-decoration:none}
.PopularPosts .widget-content ul li:first-child .item-title:before{color:#fff}
.postag a{display:inline-block;margin-bottom:-16px;text-decoration:none;font-size:11px;cursor:pointer}
.home-link,.postag a:nth-child(10),.postag a:nth-child(11),.postag a:nth-child(2),.postag a:nth-child(3),.postag a:nth-child(4),.postag a:nth-child(5),.postag a:nth-child(6),.postag a:nth-child(7),.postag a:nth-child(8),.postag a:nth-child(9){display:none}
.postag a:hover{background:0 0;color:#555}
#blog-pager-newer-link a,#blog-pager-older-link a{border-radius:5px;border:1px solid #ddd;box-shadow:0 1px 2px 0px #5f5f5f;background:#00c2ff;padding-top:5px;color:#fff;width:40px;height:30px;transition:all .4s ease-out;margin-bottom:20px}
#blog-pager-newer-link a{float:left;margin-left:0}
#blog-pager-older-link a{float:right}
#blog-pager-newer-link a:hover,#blog-pager-older-link a:hover{background:#f50;color:#fff}
#blog-pager{text-align:center;margin-bottom:20px}
.sidebar-wrapper{width:300px;float:right}
.sidebar h2 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkzjgb1Tj0RHANSThcdtiy2Ih0G5jD1aTkqIy9Ts1-rI_7JWRzBEX81ZLRRgnLMTmpoWywPU3FYjBbdUQ3fLZk56aOxkp3CZcoHvYdcl3ghWzpcHDOnyF42c_2FVUYmGQJERFB0ulH6OdO/s1600/sub-blue-darker.png) bottom right no-repeat;
color: #fff;
font-size: 14px;
top: 0;
margin: 0;
padding: 15px 0 15px 13px;
}
.sidebar{color:#111;line-height:1em;margin:5px 0}
.sidebar li{line-height:1.5em;margin:0;padding:5px 0 4px}
.sidebar li:last-child{background:0 0}
.sidebar .widget{margin:15px 0 10px 1px;padding:0}
.sidebar .widget-content{margin:0 auto;padding:0}
.sidebar a:link,.sidebar a:visited{text-decoration:none;line-height:1.5em;font-weight:400}
.sidebar li a:hover{color:#aaa}
.sidebar ul{margin:0;padding:5px 0}
#sidebar-left{top:60px;width:134px;float:left;height:100%;background:#fff;position:fixed}
#sidebar-left h2{font-size:110%;letter-spacing:0;color:#a3c5d9;padding:5px 0 10px;margin:0 12px 10px 10px;font-weight:400}
#sidebar-left .widget-content{padding:0;margin:0}
.left-menu{height:100%;margin:0;font-size:12px}
.nav-collapse.collapse{display:inline}
ul.sidebar-menu,ul.sidebar-menu li ul.sub{margin:-2px 0 0;padding:0}
ul.sidebar-menu{margin-top:10px}
#sidebar>ul>li>ul.sub,.postsocial{display:none}
#sidebar>ul>li>ul.sub>li>a,#sidebar>ul>li.active>ul.sub{display:block}
ul.sidebar-menu li ul.sub li{background:#394659;margin-bottom:0;margin-left:0;margin-right:0}
ul.sidebar-menu li ul.sub li a{font-size:12px;padding:0 0 0 32px;line-height:35px;height:35px;transition:all .3s ease;color:#eee}
ul.sidebar-menu li ul.sub li a:hover{color:#abaeb6;transition:all .3s ease;display:block}
ul.sidebar-menu li{line-height:20px;margin-bottom:5px}
ul.sidebar-menu li.sub-menu{line-height:15px}
ul.sidebar-menu li a span{display:inline-block}
ul.sidebar-menu li a{color:#555;text-decoration:none;display:block;padding:15px 0 15px 20px;font-size:13px;font-weight:400;outline:0;transition:all .3s ease}
ul.sidebar-menu li a:focus,ul.sidebar-menu li a:hover{background:#f50;color:#fff;display:block;transition:all .3s ease}
.Label li,.Label li a,.label-size a{position:relative;transition:all .3s ease-out}
ul.sidebar-menu li a i{font-size:15px;padding-right:6px}
ul.sidebar-menu li a:focus i,ul.sidebar-menu li a:hover i{color:#fff}
#Label1 h2{background:#243568}
.widget-content.cloud-label-widget-content{width:100%;display:inline-block}
.widget-content.list-label-widget-content{padding:0}
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;opacity:1}
.cloud-label-widget-content{text-align:left;padding:10px}
.Label li,.Label ul{background:#1b3682;padding:0;margin:0}
.label-count{white-space:nowrap}
.Label ul{width:100%}
.Label li{text-align:left;max-width:100%;overflow:hidden;border-bottom:1px solid #2346a8;border-top:1px solid #13265b}
.Label li:hover,.label-size a:hover{color:#e64c65}
.Label li a,.label-size a{padding:17px 20px 19px;display:block;line-height:1.2em;color:#eee;text-decoration:none;font-weight:400}
.Label li a:hover{color:#aaa}
.Label li span,.label-count{float:right;height:27px;line-height:25px;padding:0 10px;text-align:center;display:inline-block;background:#f50;color:#fff;position:absolute;top:15px;right:17px;z-index:2;border-radius:99em}
.label-size{width:100%;position:relative}
.label-size{display:block;min-width:100%}
#footer {width:100%;padding:0;}
#credit{font-size:12px;color:#888;overflow:hidden;padding:30px;line-height:18px;text-align:center;text-transform:capitalize}
#credit a{color:#999;text-decoration:none}
#credit a:hover{color:#888;text-decoration:none}
/* Mobile */
@media screen and (max-width:1024px){
.header-wrapper{width:100%}
.main-wrapper{width:62%;}
.thumbnail-area {height: 100%;}
.post h2 {padding-right:15px;font-size:17px;;line-height:1.3em;}
.summary{font-size:12px;line-height:1.4em;padding-right:8px}
}
@media screen and (max-width:960px){
.header-wrapper{width:100%}
.main-wrapper{width:62%;}
.thumbnail-area {height: 100%;}
.post h2 {padding-right:15px;font-size:17px;line-height:1.3em;}
.summary{font-size:12px;line-height:1.4em;padding-right:8px}
.sidebar-wrapper {width:34.5%;float:right;}
}
@media screen and (max-width: 800px){
.content-wrapper{position:relative;width:100%;margin:0 auto}
.main-wrapper{margin-left:0;width:100%;}
#header2{text-align:center;width:100%}
#sidebar-left{display:none}
.sidebar-wrapper{width:300px;margin:0 auto;float:none}
}
@media screen and (max-width: 760px){
.outer-wrapper{padding:0}
.main-wrapper{margin-right:0;width:100%;min-height:0}
.footer{width:auto;margin:15px}
}
@media screen and (max-width: 480px){
.summary{display:none}
.post {height:auto;}
.post h2 {font-size: 20px;}
.thumbnail-area {width:200px;}
}
@media screen and (max-width: 375px){
.summary{display:none}
.post {height:auto;}
.post h2 {font-size:15px;}
.thumbnail-area {width:150px;}
}
@media screen and (max-width: 320px){
#search-box {width: 140px;}
.thumbnail-area {width:120px;}
.post h2 {font-size: 13px;padding-right:0;}
}
@media screen and (max-width: 240px){
.post h2 {font-size: 13px;padding-right:0;}
.thumbnail-area {display:none;}
.post {padding:10px;}
.above_post {
padding-top: 8px;
width: 300px;
margin: 0 20px 5px 0;
display: inline;
float: left
}
@media screen and (max-width:414px) {
.above_post {
padding-top: 10px;
width: 100%;
height: auto;
margin: 0 0 10px;
display: block;
float: none
}
}
@media screen and (max-width:414px){.shortener-box amp-iframe{height:45px}
}
@media screen and (max-width:375px){.shortener-box amp-iframe{height:60px}
}
/* syntax highlighter Otomatis Tanpa Javascript */
pre {
padding: .8em 1em;
margin: 0.5em 0;
background-color: #20201d;
border-left: 4px solid #1194f2;
font-size: 13px;
color: #fff;
font-family: Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;
line-height: 1.4em;
position: relative;
white-space: pre-wrap;
word-wrap: break-word;
overflow: auto;
max-height: 200px;
}
code {
font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;
font-size: 13px;
color: #1194f2;
}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#93a1a1;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#F5821E}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#008800}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#268bd2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#A2886F}
pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo{color:#000;font-weight:bold}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#eee8d5}
</style>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<style amp-custom='amp-custom'>
#widget-social{padding:0;margin:2 auto}
ul.pbsocial{border:0;list-style:none;overflow:hidden;margin:10px}
.pbsocial li{float:right;background:none;margin-left:4px;padding:0}
.pbsocial li a {display:block;width:47px;height:47px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5lzwFE1_dfFfTAv7dyTepI2SJDKxqZrWv34B7iDSjPSEnKu48IbgMbpNjoWxTVWLURTlWZ0xsVzr9uOR7xdHK9iFczxRhsUO7JkGqFB0biD3sD73-Q64M6-IiZY72DccQE2U4oOQXC_gV/s1600/mixicon.png) no-repeat transparent;text-indent:-99999em}
.pbsocial li a:hover{padding:0}
.pbsocial li.youicon a{background-position:-248px 0;transition:all 200ms ease-in-out}
.pbsocial li.rssicon a{background-position:-186px 0;transition:all 200ms ease-in-out}
.pbsocial li.gicon a{background-position:-124px 0;transition:all 200ms ease-in-out}
.pbsocial li.twicon a{background-position:-62px 0;transition:all 200ms ease-in-out}
.pbsocial li.fbicon a{background-position:0 0;transition:all 200ms ease-in-out}
.pbsocial li.youicon a:hover{background-position:-248px -62px}
.pbsocial li.rssicon a:hover{background-position:-186px -62px}
.pbsocial li.gicon a:hover{background-position:-124px -62px}
.pbsocial li.twicon a:hover{background-position:-62px -62px;}
.pbsocial li.fbicon a:hover{background-position:0 -62px}
.contact-box{margin-top:10px}
.contact-box svg{width:24px;height:24px;vertical-align:-6px;margin-right:5px}
.contact-box svg path{fill:#444}
.contact-box .bbm svg{width:20px;height:20px;vertical-align:-5px;margin-right:5px}
.post-body .contact-me a{color:#444;font-weight:300}
.post-body .contact-me a[href^="http://"]:after,.post-body .contact-me a[href^="https://"]:after{content:"";background:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='16' height='16' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:#444' d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat;background-size:16px 16px;width:16px;height:16px;display:inline-block;margin-left:3px;vertical-align:-2px}
.contact-me{display:block}
.contact-me span{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}
.contact-me amp-accordion h5 span{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.contact-box .map,.contact-box .bbm{position:relative;padding-left:29px}
.contact-box .bbm .barcode-bbm{margin:10px 0;width:300px}
.contact-box .bbm span span{font-weight:300}
.contact-box .map svg{position:absolute;top:0;left:0}
.contact-box .bbm svg{position:absolute;top:4px;left:0}
.contact-box amp-accordion section:not([expanded]) .show-less,.contact-box amp-accordion section[expanded] .show-more{display:none}
.contact-box amp-accordion h5{background:none;border:none;color:#444;font-weight:500;font-size:18px;margin:0;padding:0;text-align:left;}
@media screen and (max-width:414px){.contact-box amp-iframe{height:550px}
.contact-box .bbm .barcode-bbm{width:100%}
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
src: local('Poppins'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v1/HLBysyo0MQBO_7E-DWLwzg.woff2) format('woff2');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
src: local('Poppins Medium'), local('Poppins-Medium'), url(https://fonts.gstatic.com/s/poppins/v1/yQWaOD4iNU5NTY0apN-qj_k_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
}
/* latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
src: local('Poppins SemiBold'), local('Poppins-SemiBold'), url(https://fonts.gstatic.com/s/poppins/v1/zO07Oxe3SOlw0l2YX2sdIfk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
src: local('Poppins Bold'), local('Poppins-Bold'), url(https://fonts.gstatic.com/s/poppins/v1/57TQ-anwthzkETEIO4jESPk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
}
/* Material Icon */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format('truetype');
}
.material-icons {font-family: 'Material Icons';font-weight:normal;font-style:normal;font-size:inherit;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;vertical-align:middle;}
/* Framwork */
body{background:#ffffff;font-family: 'Poppins', sans-serif;font-size:13.6px;margin:0;font-weight:400;line-height:22px;text-decoration:none}
.Navtop ul li a,.search-form{font-weight:400;text-transform:uppercase}
#header h1,#header p,.Navtop ul li a,.search-form{text-transform:uppercase}
#credit,.clear{clear:both}
.Label ul,.sidebar ul,ul.sidebar-menu li,ul.sidebar-menu li ul li{list-style:none}
a,a:link,a:visited{color:#f50;text-decoration:none}
a:active,a:hover{color:#111;text-decoration:none}
.search-wrapper{height:60px;float:right;display:inline;padding:0}
#search-box{width:190px;height:50px;float:right;padding:0;margin:0;position:relative}
#search-box form{border:0;line-height:60px}
.search-button,.search-form{height:60px;line-height:60px;border:0;margin:0}
.search-form{background:#fff;color:gray;width:100%;padding-left:20px;font-size:12px;letter-spacing:1px;box-sizing:border-box}
.search-button{background:#00c2ff;width:40px;text-align:center;top:0;right:0;font-size:25px;color:#fff;position:absolute;border-radius:0;text-shadow:none;box-shadow:none}
.search-button:focus,.search-button:hover,.search-form:focus,.search-form:hover{border:0;outline:0;color:#000}
.Navtop {
float: right;
width: auto;
height: auto;
padding:5px;
margin: 0;
background: #00c2ff;
}
#header,.header-wrapper{height:60px;z-index:999;overflow:hidden}
.Navtop ul{margin:0 auto;padding:0;line-height:3em}
.Navtop ul li{display:inline-block;margin:0 auto;padding-top:8px}
#header .description,#items-thumbnail,#items-thumbnail amp-img,.breadcrumbs,.meta-author,.thumbamp,h2.date-header{display:none}
.Navtop ul li a:hover{color:#eee;}
.Navtop ul li a {
color: #fff;
padding: 15px 10px 10px;
font-size: 25px;
font-weight: 400;
margin-top: 0;
margin-left: -4px;
}
/* MENU BOTTOM*/
.Navbottom{
text-align: center;
width: auto;
height: auto;
background: #00c2ff;
}
.Navbottom ul {
display: inline-block;
list-style: none;
padding:0;
}
.Navbottom ul li {
display:inline-block;
float: left;
}
.Navbottom ul li a{
display: block;
text-decoration: none;
color: #ffffff;
font-size: 25px;
font-weight: 400;
padding: 0px 10%;
}
.Navbottom ul li a:hover{
color:#eee;
}
.header-wrapper{box-shadow:0 1px 10px 0px #00ffe2;background:#00c2ff;width:100%;position:fixed}
#header{background:#00c2ff;float:left;width:auto;margin:0;padding:0}
#header-inner{margin:5px;padding:0}
#header-inner a{color:#fff}
#header h1,#header p{font-size:20px;line-height:12px;color:#fff;padding:20px 5px;margin:0;font-weight:700}
#header h1 a,#header h1.title a:hover{color:#f07468;text-decoration:none}
#header img-amp{border:0;background:0 0;width:auto;height:auto;margin:0 auto}
.outerpic-wrapper{width:100%;padding:0;overflow:hidden}
.content-wrapper{position:relative;max-width:1024px;margin-left:135px}
.outer-wrapper{position:relative;width:100%;padding:0;margin-top:65px}
.main-wrapper {
width: 690px;
margin: 0 0 0 15px;
float: left;
}
h3.date-header{text-transform:none;font:400 12px Arial;color:#666;line-height:1.2em;margin:.1em 0}
.post{margin:10px 0;padding:0;background:#fff}
.post h1,.post h2{line-height:1.5em;color:#555;margin:0;text-align:left}
.post h1{font-size:200%;padding-top:15px;padding-left:15px;padding-bottom:10px;font-weight:400}
.post h2{font-size:140%;font-weight:600}
#credit,.Label li span,.center,.label-count,.post-labels,.postadsbottom{text-align:center}
.post h1 a,.post h1 a:visited,.post h1 strong,.post h2 a,.post h2 a:visited,.post h2 strong{display:block;text-decoration:none;color:#333}
.post h1 a:hover,.post h1 strong,.post h2 a:hover,.post h2 strong{color:#aaa}
.post-body{padding:15px;font-size:15px;line-height:1.7em;color:#666;margin:20px 0 .75em}
.resource{font-size:12px;color:#555;line-height:1.2em;background-color:#f7edcd;padding:10px}
.btn-primary{color:#fff;background-color:#f50;border-color:#2e6da4}
a.btn-primary{color:#fff}
.btn-primary:focus{color:#fff;background-color:#eb570d;border-color:#122b40}
.btn-primary:hover{color:#fff;background-color:#eb570d;border-color:#204d74}
.btn-lg{padding:5px 6px;font-size:16px;line-height:1.3333333;border-radius:6px}
.postadstop{display:inline-block;width:auto;height:auto;margin:0 15px 15px 0;float:left}
.postadsbottom{display:block;width:100%;height:auto;margin:20px auto}
.postadstop amp-img{width:100%;max-width:300px;height:auto}
.postadsbottom amp-img{width:100%;max-width:728px;height:auto}
.postadsbottom span,.postadstop span{font-size:13px;font-weight:400;color:#555;text-align:center;margin:0 auto 5px;display:block}
.post-body amp-img{max-width:100%;height:auto;padding:.1em}
.post amp-img{max-width:100%;height:auto;padding:.1em;margin:0 auto}
.comments{background:#fff;margin-top:20px;padding:10px}
#header2 amp-img,.sidebar amp-img{max-width:100%;width:auto;border:0;max-height:100%}
.sidebar-wrapper{width:300px;float:right;word-wrap:break-word;overflow:hidden}
.sidebar h2 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkzjgb1Tj0RHANSThcdtiy2Ih0G5jD1aTkqIy9Ts1-rI_7JWRzBEX81ZLRRgnLMTmpoWywPU3FYjBbdUQ3fLZk56aOxkp3CZcoHvYdcl3ghWzpcHDOnyF42c_2FVUYmGQJERFB0ulH6OdO/s1600/sub-blue-darker.png) bottom right no-repeat;
color: #fff;
font-size: 14px;
top: 0;
margin: 0;
padding: 15px 0 15px 13px;
}
.sidebar{color:#111;line-height:1em;margin:5px 0}
.sidebar li{line-height:1.5em;margin:0;padding:5px 0 4px}
.sidebar li:last-child{background:0 0}
.sidebar .widget{margin:10px 0 10px 1px;padding:0}
.sidebar .widget-content{margin:0 auto;padding:0}
.sidebar a:link,.sidebar a:visited{text-decoration:none;line-height:1.5em;font-weight:400}
.sidebar li a:hover{color:#aaa}
.sidebar ul{margin:0;padding:5px 0}
#sidebar-left{top:60px;width:134px;float:left;height:100%;background:#fff;position:fixed}
#sidebar-left h2{font-size:110%;letter-spacing:0;color:#a3c5d9;padding:5px 0 10px;margin:0 12px 10px 10px;font-weight:400}
#sidebar-left .widget-content{padding:0;margin:0}
.left-menu{height:100%;margin:0;font-size:12px}
.nav-collapse.collapse{display:inline}
ul.sidebar-menu,ul.sidebar-menu li ul.sub{margin:-2px 0 0;padding:0}
ul.sidebar-menu{margin-top:10px}
#sidebar>ul>li>ul.sub{display:none}
#sidebar>ul>li>ul.sub>li>a,#sidebar>ul>li.active>ul.sub{display:block}
ul.sidebar-menu li ul.sub li{background:#394659;margin-bottom:0;margin-left:0;margin-right:0}
ul.sidebar-menu li ul.sub li a{font-size:12px;padding:0 0 0 32px;line-height:35px;height:35px;transition:all .3s ease;color:#eee}
ul.sidebar-menu li ul.sub li a:hover{color:#abaeb6;transition:all .3s ease;display:block}
ul.sidebar-menu li{line-height:20px;margin-bottom:5px}
ul.sidebar-menu li.sub-menu{line-height:15px}
ul.sidebar-menu li a span{display:inline-block}
ul.sidebar-menu li a{color:#555;text-decoration:none;display:block;padding:15px 0 15px 20px;font-size:13px;font-weight:400;outline:0;transition:all .3s ease}
ul.sidebar-menu li a:focus,ul.sidebar-menu li a:hover{background:#f50;color:#fff;display:block;transition:all .3s ease}
ul.sidebar-menu li a i{font-size:15px;padding-right:6px}
ul.sidebar-menu li a:focus i,ul.sidebar-menu li a:hover i{color:#fff}
#footer{width:100%;padding:0;margin:20px}
#credit{font-size:12px;color:#888;width:100%;overflow:hidden;padding:40px 0 10px;line-height:18px;text-transform:capitalize;position:relative}
#credit a{color:#999;text-decoration:none}
#credit a:hover{color:#888;text-decoration:none}
.PopularPosts .widget-content{padding:0;box-sizing:border-box}
.PopularPosts .widget-content ul{width:100%;padding:0;list-style-type:none;background:rgb(0, 159, 255)}
.PopularPosts .widget-content ul li {
margin: 0;
padding: 10px 0 10px 60px;
position: relative;
overflow: hidden;
border-top: 1px solid #2b2b2b;
border-bottom: 1px solid #111;
}
.PopularPosts .widget-content ul li:last-child{border-bottom:none}
.PopularPosts .widget-content ul li .item-title{color:#fff;line-height:1.1em;padding:0 10px 0 0}
.PopularPosts .widget-content ul li .item-title a{text-decoration:none;font-size:13px;font-weight:400}
.PopularPosts .widget-content ul li .item-title a:hover{color:#fff}
.PopularPosts .item-snippet{font-size:14px;font-weight:400;margin-top:10px;line-height:1.1em}
.PopularPosts .widget-content ul li amp-img{width:300px;height:180px;padding-right:0;transition:all .5s ease-out}
.PopularPosts .widget-content ul li:first-child{border-bottom:none;padding:0}
.PopularPosts .widget-content ul li:first-child .item-thumbnail{margin:0;width:100%;height:180px;overflow:hidden;display:block}
.PopularPosts .widget-content ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;text-align:left;padding:15px 20px 15px 60px;background:rgba(0, 159, 255, 0.68);z-index:1}
.PopularPosts .widget-content ul li:first-child .item-title a{color:#fff}
#blog-pager,.PopularPosts .item-snippet,.PopularPosts .widget-content ul li .item-thumbnail,.blog-pager{display:none}
.PopularPosts .widget-content ul{padding-left:0;counter-reset:popcount}
.PopularPosts .widget-content ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:10px;top:50%;margin-top:-19px;color:#fFF;font-size:38px;line-height:1;z-index:2}
.Label li,.Label li a,.label-size a{position:relative;transition:all .3s ease-out}
.sidebar .PopularPosts .item-title a{color:#FFF;text-decoration:none}
.PopularPosts .widget-content ul li:first-child .item-title:before{color:#fff}
.post-meta,.post-meta a{font-size:9px;color:#777}
.post-meta{width:100%;display:block;text-align:left;padding-left:15px}
.post-meta a{text-decoration:none;text-transform:normal}
.post-meta a:hover{color:#aaa}
.post-meta-span{padding-right:15px;padding-left:5px;margin-bottom:-6px;font-weight:700}
.post-meta-left{float:right;padding-left:5px;border-radius:5px;padding-right:10px}
.postsocial{float:left;margin:-15px 15px;}
.meta-author{margin-bottom:1px}
#Label1 h2{background:#243568}
.widget-content.cloud-label-widget-content{width:100%;display:inline-block}
.widget-content.list-label-widget-content{padding:0}
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;opacity:1}
.cloud-label-widget-content{text-align:left;padding:10px}
.Label li,.Label ul{background:#1b3682;padding:0;margin:0}
.label-count{white-space:nowrap}
.Label ul{width:100%}
.Label li{text-align:left;max-width:100%;overflow:hidden;border-bottom:1px solid #2346a8;border-top:1px solid #13265b}
.Label li:hover,.label-size a:hover{color:#e64c65}
.Label li a,.label-size a{padding:17px 20px 19px;display:block;line-height:1.2em;color:#eee;text-decoration:none;font-weight:400}
.Label li a:hover{color:#aaa}
.Label li span,.label-count{float:right;height:27px;line-height:25px;padding:0 10px;display:inline-block;background:#f50;color:#fff;position:absolute;top:15px;right:17px;z-index:2;border-radius:99em}
amp-social-share[type="facebook"],amp-social-share[type="gplus"],amp-social-share[type="linkedin"],amp-social-share[type="pinterest"],amp-social-share[type="twitter"]{border-radius:2px;background-size:18px 18px;transition:all .4s ease-out}
.label-size{position:relative;display:block;width:100%;min-width:100%}
amp-social-share[type="twitter"]{background-color:#55acee}
amp-social-share[type="gplus"]{background-color:#dc4e41}
amp-social-share[type="facebook"]{background-color:#3b5998}
amp-social-share[type="linkedin"]{background-color:#0077b5}
amp-social-share[type="pinterest"]{background-color:#bd081c}
a.color-label{font-size:15px;font-weight:700;background:#fff;padding:5px 10px;border-radius:3px;color:#555;text-decoration:none;margin-bottom:15px;transition:all .4s ease-out}
a:hover.color-label{background:#0379c4;color:#fff}
.post-labels{position:absolute;width:92%;margin:-265px auto 0}
pre {padding:.5em 1em;margin:1.3em 0;white-space:pre;word-wrap:normal;overflow:auto;background-color:#0F0F0F;font-size:12px;clear:both;color:#84999b;}
pre code {display: block; padding: 0.5em;color: #839496;line-height:1.4em;}
/* Mobile */
@media screen and (max-width:1024px){
.header-wrapper{width:100%}
.main-wrapper{width:62%;}
.thumbnail-area {height: 100%;}
}
@media screen and (max-width:960px){
.header-wrapper{width:100%}
.sidebar-wrapper {width:34.5%;float:right;}
}
@media screen and (max-width: 800px){
.content-wrapper{position:relative;width:100%;margin:0 auto}
.main-wrapper{margin-left:0;width:100%;}
#header2{text-align:center;width:100%}
#sidebar-left{display:none}
.sidebar-wrapper{width:300px;float:none;margin:0 auto;}
}
@media screen and (max-width: 760px){
.outer-wrapper{padding:0}
.main-wrapper{margin-right:0;width:100%;min-height:0}
.footer{width:auto;margin:15px}
}
@media screen and (max-width: 320px){
.sidebar-wrapper{width:100%}
.post-meta-left{display:none}
.post h1{line-height:1.2em;font-size:180%;}
.postsocial {float:left;margin-top:10px;margin-left:15px}
.post-body {margin:40px 0 .75em;
}
/* syntax highlighter Otomatis Tanpa Javascript */
pre {
padding: .8em 1em;
margin: 0.5em 0;
background-color: #20201d;
border-left: 4px solid #1194f2;
font-size: 13px;
color: #fff;
font-family: Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;
line-height: 1.4em;
position: relative;
white-space: pre-wrap;
word-wrap: break-word;
overflow: auto;
max-height: 200px;
}
code {
font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;
font-size: 13px;
color: #1194f2;
}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#93a1a1;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#F5821E}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#008800}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#268bd2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#A2886F}
pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo{color:#000;font-weight:bold}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#eee8d5}
</style>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<style amp-custom='amp-custom'>
#widget-social{padding:0;margin:2 auto}
ul.pbsocial{border:0;list-style:none;overflow:hidden;margin:10px}
.pbsocial li{float:right;background:none;margin-left:4px;padding:0}
.pbsocial li a {display:block;width:47px;height:47px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5lzwFE1_dfFfTAv7dyTepI2SJDKxqZrWv34B7iDSjPSEnKu48IbgMbpNjoWxTVWLURTlWZ0xsVzr9uOR7xdHK9iFczxRhsUO7JkGqFB0biD3sD73-Q64M6-IiZY72DccQE2U4oOQXC_gV/s1600/mixicon.png) no-repeat transparent;text-indent:-99999em}
.pbsocial li a:hover{padding:0}
.pbsocial li.youicon a{background-position:-248px 0;transition:all 200ms ease-in-out}
.pbsocial li.rssicon a{background-position:-186px 0;transition:all 200ms ease-in-out}
.pbsocial li.gicon a{background-position:-124px 0;transition:all 200ms ease-in-out}
.pbsocial li.twicon a{background-position:-62px 0;transition:all 200ms ease-in-out}
.pbsocial li.fbicon a{background-position:0 0;transition:all 200ms ease-in-out}
.pbsocial li.youicon a:hover{background-position:-248px -62px}
.pbsocial li.rssicon a:hover{background-position:-186px -62px}
.pbsocial li.gicon a:hover{background-position:-124px -62px}
.pbsocial li.twicon a:hover{background-position:-62px -62px;}
.pbsocial li.fbicon a:hover{background-position:0 -62px}
.contact-box{margin-top:10px}
.contact-box svg{width:24px;height:24px;vertical-align:-6px;margin-right:5px}
.contact-box svg path{fill:#444}
.contact-box .bbm svg{width:20px;height:20px;vertical-align:-5px;margin-right:5px}
.post-body .contact-me a{color:#444;font-weight:300}
.post-body .contact-me a[href^="http://"]:after,.post-body .contact-me a[href^="https://"]:after{content:"";background:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='16' height='16' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:#444' d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat;background-size:16px 16px;width:16px;height:16px;display:inline-block;margin-left:3px;vertical-align:-2px}
.contact-me{display:block}
.contact-me span{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}
.contact-me amp-accordion h5 span{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.contact-box .map,.contact-box .bbm{position:relative;padding-left:29px}
.contact-box .bbm .barcode-bbm{margin:10px 0;width:300px}
.contact-box .bbm span span{font-weight:300}
.contact-box .map svg{position:absolute;top:0;left:0}
.contact-box .bbm svg{position:absolute;top:4px;left:0}
.contact-box amp-accordion section:not([expanded]) .show-less,.contact-box amp-accordion section[expanded] .show-more{display:none}
.contact-box amp-accordion h5{background:none;border:none;color:#444;font-weight:500;font-size:18px;margin:0;padding:0;text-align:left;}
@media screen and (max-width:414px){.contact-box amp-iframe{height:550px}
.contact-box .bbm .barcode-bbm{width:100%}
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
src: local('Poppins'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v1/HLBysyo0MQBO_7E-DWLwzg.woff2) format('woff2');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
src: local('Poppins Medium'), local('Poppins-Medium'), url(https://fonts.gstatic.com/s/poppins/v1/yQWaOD4iNU5NTY0apN-qj_k_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
}
/* latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
src: local('Poppins SemiBold'), local('Poppins-SemiBold'), url(https://fonts.gstatic.com/s/poppins/v1/zO07Oxe3SOlw0l2YX2sdIfk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
src: local('Poppins Bold'), local('Poppins-Bold'), url(https://fonts.gstatic.com/s/poppins/v1/57TQ-anwthzkETEIO4jESPk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
}
/* Material Icon */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format('truetype');
}
.material-icons {font-family: 'Material Icons';font-weight:normal;font-style:normal;font-size:inherit;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;vertical-align:middle;}
/* Framwork */
body{background:#ffffff;font-family: 'Poppins', sans-serif;font-size:13.6px;font-weight:400;margin:0;line-height:22px;text-decoration:none}
a,a:link,a:visited{color:#f50;text-decoration:none}
a:active,a:hover{color:#111;text-decoration:none}
.Navtop ul li a,.search-form{font-weight:400;text-transform:uppercase}
#header h1,#header p,.Navtop ul li a,.search-form{text-transform:uppercase}
#credit,.clear{clear:both}
.search-wrapper{height:60px;float:right;display:inline;padding:0}
#search-box{width:190px;height:50px;float:right;padding:0;margin:0;position:relative}
#search-box form{border:0;line-height:60px}
.search-button,.search-form{height:60px;line-height:60px;border:0;margin:0}
.search-form{background:#fff;color:gray;width:100%;padding-left:20px;font-size:12px;letter-spacing:1px;box-sizing:border-box}
.search-button{background:#00c2ff;width:40px;text-align:center;top:0;right:0;font-size:25px;color:#fff;position:absolute;border-radius:0;text-shadow:none;box-shadow:none}
.search-button:focus,.search-button:hover,.search-form:focus,.search-form:hover{border:0;outline:0;color:#000}
.Navtop {
float: right;
width: auto;
height: auto;
padding:5px;
margin: 0;
background: #00c2ff;
}
#header,.header-wrapper{height:60px;z-index:999;overflow:hidden}
.Navtop ul{margin:0 auto;padding:0;line-height:3em}
.Navtop ul li{display:inline-block;margin:0 auto;padding-top:8px}
#blog-pager,#header .description,#items-thumbnail,#items-thumbnail amp-img,.breadcrumbs,.sidebar-wrapper,.thumbamp,h2.date-header{display:none}
.Navtop ul li a:hover{color:#eee;}
.Navtop ul li a {
color: #fff;
padding: 15px 10px 10px;
font-size: 25px;
font-weight: 400;
margin-top: 0;
margin-left: -4px;
}
/* MENU BOTTOM*/
.Navbottom{
text-align: center;
width: auto;
height: auto;
background: #00c2ff;
}
.Navbottom ul {
display: inline-block;
list-style: none;
padding:0;
}
.Navbottom ul li {
display:inline-block;
float: left;
}
.Navbottom ul li a{
display: block;
text-decoration: none;
color: #ffffff;
font-size: 25px;
font-weight: 400;
padding: 0px 10%;
}
.Navbottom ul li a:hover{
color:#eee;
}
.header-wrapper{background:#00c2ff;width:100%;position:fixed}
#header{background:#00c2ff;float:left;width:auto;margin:0;padding:0}
#header-inner{margin:5px;padding:0}
#header h1,#header p{font-size:20px;line-height:12px;color:#fff;padding:20px 5px 0;margin:0;font-weight:700}
#header h1.title a:hover{color:#f07468;text-decoration:none}
#header h1 a{color:#fff;text-decoration:none}
#header img-amp{border:0;background:0 0;width:auto;height:auto;margin:0 auto}
.outerpic-wrapper{width:100%;padding:0;overflow:hidden}
.content-wrapper{position:relative;max-width:1024px;margin:0 auto}
.outer-wrapper{position:relative;width:100%;padding:0;margin-top:60px}
.main-wrapper{width:100%;margin:0;float:left;word-wrap:break-word;overflow:hidden}
h3.date-header{text-transform:none;font:400 12px Arial;color:#666;line-height:1.2em;margin:.1em 0}
.post{margin:10px 0;padding:0;background:#fff}
.post h1,.post h2{font-size:200%;line-height:1.5em;color:#555;margin:0;padding-top:15px;padding-left:15px;padding-bottom:10px;font-weight:400;text-align:center}
.post h1 a,.post h1 a:visited,.post h1 strong,.post h2 a,.post h2 a:visited,.post h2 strong{display:block;text-decoration:none;color:#333}
.post h1 a:hover,.post h1 strong,.post h2 a:hover,.post h2 strong{color:#aaa}
.post-body{padding:15px;font-size:15px;line-height:1.7em;color:#666;margin:-10px 0 .75em}
.comments{background:#fff;margin-top:20px;padding:10px}
#sidebar-left,.postsocial{display:none}
#footer{width:100%;padding:0;margin:20px}
#credit{font-size:12px;color:#888;width:100%;overflow:hidden;padding:10px;line-height:18px;text-align:center;text-transform:capitalize;position:relative}
#credit a{color:#999;text-decoration:none}
#credit a:hover{color:#888;text-decoration:none}
/* Mobile */
@media screen and (max-width:1024px){
#sidebar-left,.postsocial{display:none}
.content-wrapper {margin: 0 auto;}
}
@media screen and (max-width: 800px){
.content-wrapper{position:relative;width:100%;margin:0 auto}
.main-wrapper{margin-left:0;width:100%;}
#header2{text-align:center;width:100%}
#sidebar-left{display:none}
}
@media screen and (max-width: 760px){
.outer-wrapper{padding:0}
#header2{text-align:center;width:100%}
.main-wrapper{margin-right:0;width:100%;min-height:0}
.footer{width:auto;margin:15px}
}
@media screen and (max-width: 480px){
.search-wrapper,#search-box{width:100%;height:73px;}
.thumbnail-area,.thumbnailjpg{display:none}
.summary,.postag a,.post h1,.post h2{padding-left:20px;padding-right:15px}
.post{padding-bottom:10px}
#header2{text-align:center;width:100%}
.footer .widget{margin-left:10px}
#footer1,.footer .widget-content,.footer{float:none;width:100%;margin:0 auto;}
}
@media screen and (max-width: 240px){
#header amp-img{border:0 none;background:none;max-width:95%;height:auto;margin:0 auto}
}
/* syntax highlighter Otomatis Tanpa Javascript */
pre {
padding: .8em 1em;
margin: 0.5em 0;
background-color: #20201d;
border-left: 4px solid #1194f2;
font-size: 13px;
color: #fff;
font-family: Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;
line-height: 1.4em;
position: relative;
white-space: pre-wrap;
word-wrap: break-word;
overflow: auto;
max-height: 200px;
}
code {
font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;
font-size: 13px;
color: #1194f2;
}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#93a1a1;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#F5821E}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#008800}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#268bd2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#A2886F}
pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo{color:#000;font-weight:bold}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#eee8d5}
</style>
</b:if>
<style amp-boilerplate='amp-boilerplate'>
body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'/>
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
<script async='async' custom-element='amp-fx-flying-carpet' src='https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js'/>
<script async='async' src='https://cdn.ampproject.org/v0.js'/>
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>
<script async='async' custom-element='amp-form' src='https://cdn.ampproject.org/v0/amp-form-0.1.js'/>
<script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/>
<script async='async' custom-element='amp-analytics' src='https://cdn.ampproject.org/v0/amp-analytics-0.1.js'/>
<script async='async' custom-element='amp-fx-flying-carpet' src='https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js'/>
<b:if cond='data:blog.pageType != "static_page" and data:blog.isMobileRequest == "true" and data:blog.pageType != "error_page"'>
<script async='async' custom-element='amp-sticky-ad' src='https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js'/>
</b:if>
<!-- START SITEMAP -->
<b:if cond='data:blog.url == "https://programmerbojonegoro.blogspot.co.id/p/sitemap.html"'/>
<!-- END SITEMAP -->
</head><!--<head/>-->
<body itemscope='itemscope' itemtype='https://schema.org/WebPage'>
<amp-analytics id='analytics1' type='googleanalytics'>
<script type='application/json'>
{
"vars": {
"account": "UA-109564932-2"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
<header itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/WPHeader'>
<div class='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Programmer Bojonegoro (Header)' type='Header' version='1'>
<b:widget-settings>
<b:widget-setting name='displayUrl'/>
<b:widget-setting name='displayHeight'>0</b:widget-setting>
<b:widget-setting name='sectionWidth'>384</b:widget-setting>
<b:widget-setting name='useImage'>false</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
<b:widget-setting name='displayWidth'>0</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div id='header-inner'>
<div class='titlewrapper'>
<b:if cond='data:blog.pageType != "item"'>
<h1 class='title' itemprop='headline'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' itemprop='headline'>
<b:include name='title'/>
</p>
</b:if>
</div><b:include name='description'/>
</div>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description' itemprop='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>
<div itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/WebSite'>
<div class='search-wrapper'>
<div id='search-box'>
<div itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/WebSite'>
<form action='/search' itemprop='potentialAction' itemscope='itemscope' itemtype='https://schema.org/SearchAction' method='get' target='_blank'>
<meta content='/search?q={q}' itemprop='target'/>
<input class='search-form' id='feed-q-input' itemprop='query-input' name='q' placeholder='Search' required='required' type='text'/>
<button class='search-button' title='Search' type='submit'><i class='material-icons'></i></button>
</form></div></div></div></div>
<div class='mobile-hide'>
<nav class='Navtop' itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
<ul>
<li><a href='https://programmerbojonegoro.blogspot.co.id/search/label/Apps' itemprop='url' target='_blank' title='Apps'><span itemprop='name'><i class='material-icons'>apps</i></span></a></li>
<li><a href='https://programmerbojonegoro.blogspot.co.id/p/about.html' itemprop='url' target='_blank' title='About'><span itemprop='name'><i class='material-icons'>account_circle</i></span></a></li>
<li><a href='https://programmerbojonegoro.blogspot.co.id/p/contact-admin.html' itemprop='url' target='_blank' title='Contact Admin'><span itemprop='name'><i class='material-icons'>contacts</i></span></a></li>
<li><a href='https://programmerbojonegoro.blogspot.co.id/p/tos.html' itemprop='url' target='_blank' title='Privacy'><span itemprop='name'><i class='material-icons'>warning</i></span></a></li>
<li><a href='https://programmerbojonegoro.blogspot.co.id/p/sitemap.html' itemprop='url' target='_blank' title='Sitemap'><span itemprop='name'><i class='material-icons'>view_list</i></span></a></li>
<li><a href='https://web.facebook.com/groups/programmerbojonegoro' itemprop='url' target='_blank' title='Fb Group'><span itemprop='name'><i class='material-icons'>group</i></span></a></li>
<li><a href='https://programmerbojonegoro.blogspot.co.id/p/html-editor.html' itemprop='url' target='_blank' title='HTML Editor'><i class='material-icons'>edit</i><span itemprop='name'/></a></li>
<li><a href='https://programmerbojonegoro.blogspot.co.id/p/parse-html.html' itemprop='url' target='_blank' title='Parse HTML'><i class='material-icons'>autorenew</i><span itemprop='name'/></a></li>
<li><a href='https://programmerbojonegoro.blogspot.co.id/p/color-picker.html' itemprop='url' target='_blank' title='Color Picker'><i class='material-icons'>color_lens</i><span itemprop='name'/></a></li>
<li><a href='http://programmerbojonegoro.blogspot.co.id/p/amp-image-creator_77.html' itemprop='url' target='_blank' title='AMP Image Creator'><i class='material-icons'>photo</i><span itemprop='name'/></a></li>
<li><a href='http://programmerbojonegoro.blogspot.co.id/p/partner.html' itemprop='url' target='_blank' title='My Partners'><i class='material-icons'>mood</i><span itemprop='name'/></a></li>
<li><a href='http://programmerbojonegoro.blogspot.co.id/p/chatbox-programmer-bojonegoro.html' itemprop='url' target='_blank' title='Chat Box'><i class='material-icons'>question_answer</i><span itemprop='name'/></a></li>
<li><a href='https://drive.google.com/file/d/14eadjiAdDXnB7jgSsvJSSVuoDhQ7hCdx/view' itemprop='url' target='_blank' title='Download Aplikasi Programmer Bojonegoro'><i class='material-icons'>file_download</i><span itemprop='name'/></a></li>
</ul>
</nav>
</div>
</div></header><!-- end header-wrapper -->
<div class='clear'/>
<div itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/WPSideBar'>
<aside id='sidebar-left'>
<div class='nav-collapse ' id='sidebar' tabindex='5000'>
<!-- sidebar menu start-->
<ul class='sidebar-menu'>
<li class='active'><a class='' href='/' title='Beranda'><i class='material-icons'>home</i><span><b>Beranda</b></span></a></li>
<li><a href='https://programmerbojonegoro.blogspot.co.id/search/label/HTML' itemprop='url' title='HTML'><i class='material-icons'>code</i><span itemprop='name'><b>HTML</b></span></a></li>
<li><a href='https://programmerbojonegoro.blogspot.co.id/search/label/CSS' itemprop='url' title='CSS'><i class='material-icons'>code</i><span itemprop='name'><b>CSS</b></span></a></li>
<li><a href='https://programmerbojonegoro.blogspot.co.id/search/label/JavaScript' itemprop='url' title='Javascript'><i class='material-icons'>code</i><span itemprop='name'><b>JAVASCRIPT</b></span></a></li>
<li><a href='https://programmerbojonegoro.blogspot.co.id/search/label/PHP' itemprop='url' title='PHP'><i class='material-icons'>code</i><span itemprop='name'><b>PHP</b></span></a></li>
<li><a href='https://programmerbojonegoro.blogspot.co.id/search/label/Java' itemprop='url' title='Java'><i class='material-icons'>code</i><span itemprop='name'><b>JAVA</b></span></a></li>
<li><a href='https://programmerbojonegoro.blogspot.co.id/search/label/Python' itemprop='url' title='Python'><i class='material-icons'>code</i><span itemprop='name'><b>PYTHON</b></span></a></li>
<li><a href='https://programmerbojonegoro.blogspot.co.id/search/label/SQL' itemprop='url' title='SQL'><i class='material-icons'>code</i><span itemprop='name'><b>SQL</b></span></a></li>
<li><a href='https://programmerbojonegoro.blogspot.co.id/search/label/Framework' itemprop='url' title='Framework'><i class='material-icons'>group_work</i><span itemprop='name'><b>FRAMEWORK</b></span></a></li>
<li><a href='http://tubianto.blogspot.co.id/' itemprop='url' target='_blank' title='Tips & Trik'><i class='material-icons'>lightbulb_outline</i><span itemprop='name'/><b>Tips & Trik</b></a></li>
</ul>
<!-- sidebar menu end-->
</div>
</aside></div>
<div class='content-wrapper'>
<div class='outerpic-wrapper'>
<div class='outer-wrapper'>
<div itemscope='itemscope' itemtype='https://schema.org/Blog'>
<div class='main-wrapper'>
<b:section class='atas posting' id='atas posting' preferred='yes'>
<b:widget id='HTML3' locked='false' title='' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'><br/>
<a href="http://kodetiket.com/peluang-usaha" target="_blank"><amp-img layout="responsive" height="90" width="720" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIc4bvNo3ioWhflKyYq7efXIpw1LPulm7ucj-P612dcrSVjKvyv_ZkN99I230uCmMxFn5nQzh6lX0C69rt0D7mLxPwFr5fA0zAwBJMGE0J0ay6cJ6Pp9_wJKXDjuDNxB7SFJ8TvpeWWDQ/s1600/Ads.png" alt="Kodetiket.com" title="Business tour and travel" ></amp-img></a></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'>
<b:widget-settings>
<b:widget-setting name='showDateHeader'>true</b:widget-setting>
<b:widget-setting name='style.textcolor'>#2196f3</b:widget-setting>
<b:widget-setting name='showShareButtons'>true</b:widget-setting>
<b:widget-setting name='authorLabel'>By</b:widget-setting>
<b:widget-setting name='showCommentLink'>false</b:widget-setting>
<b:widget-setting name='style.urlcolor'>#212121</b:widget-setting>
<b:widget-setting name='showAuthor'>true</b:widget-setting>
<b:widget-setting name='style.linkcolor'>#757575</b:widget-setting>
<b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
<b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='timestampLabel'>-</b:widget-setting>
<b:widget-setting name='showAuthorProfile'>false</b:widget-setting>
<b:widget-setting name='style.layout'>1x1</b:widget-setting>
<b:widget-setting name='showLabels'>false</b:widget-setting>
<b:widget-setting name='showLocation'>false</b:widget-setting>
<b:widget-setting name='showTimestamp'>true</b:widget-setting>
<b:widget-setting name='postsPerAd'>1</b:widget-setting>
<b:widget-setting name='showBacklinks'>false</b:widget-setting>
<b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showInlineAds'>false</b:widget-setting>
<b:widget-setting name='showReactions'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='top'>
<b:if cond='data:mobile == "false"'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<b:loop index='x' 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:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "item"'>
<b:if cond='data:x==1'>
<div class='post'>
</div>
</b:if>
<b:if cond='data:x==3'>
<div class='post'>
</div>
</b:if>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>
<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 cond='data:blog.pageType == "item"'>
<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>
</div>
</b:loop>
<b:if cond='data:numPosts != 0'>
</div></div>
</b:if>
<data:adEnd/>
</div>
<!-- navigation -->
<b:include name='nextprev'/>
<b:else/>
<b:include name='mobile-main'/>
</b:if>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
<span expr:class='"item-control " + data:backlink.adminClass'>
<a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
<amp-img src='https://resources.blogblog.com/img/icon_delete13.gif'/>
</a>
</span>
</b:includable>
<b:includable id='backlinks' var='post'>
<a name='links'/><h4><data:post.backlinksLabel/></h4>
<b:if cond='data:post.numBacklinks != 0'>
<dl class='comments-block' id='comments-block'>
<b:loop values='data:post.backlinks' var='backlink'>
<div class='collapsed-backlink backlink-control'>
<dt class='comment-title'>
<span class='backlink-toggle-zippy'> </span>
<a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
<b:include data='backlink' name='backlinkDeleteIcon'/>
</dt>
<dd class='comment-body collapseable'>
<data:backlink.snippet/>
</dd>
<dd class='comment-footer collapseable'>
<span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span>
<span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span>
</dd>
</div>
</b:loop>
</dl>
</b:if>
<p class='comment-footer'>
<a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + "_backlinks-create-link"' target='_blank'><data:post.createLinkLabel/></a>
</p>
</b:includable>
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url and data:blog.pageType == "item"'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' id='breadcrumbs'>
<div id='bread-crumbs'>
<span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'><i class='material-icons breadcrumbs-icon'></i> Home&nbsp;</span></a></span>&nbsp;<i class='material-icons breadcrumbs-icon'></i>
<b:loop values='data:post.labels' var='label'>
<span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + "?max-results=15"' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a><b:if cond='data:label.isLast != "true"'> <i class='material-icons breadcrumbs-icon'></i> </b:if></span>
</b:loop>
<i class='material-icons breadcrumbs-icon'></i> <span><data:post.title/></span>
</div></div>
</b:if>
</b:loop>
</b:if>
</b:includable>
<b:includable id='comment-form' var='post'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='comment_count_picker' var='post'/>
<b:includable id='comment_picker' var='post'/>
<b:includable id='comments' var='post'>
<amp-iframe expr:src='"https://cdn.rawgit.com/Tubianto/Disqus-html/0e55619d/Disqus.html?shortname=programmer-bojonegoro&fontBodyFamily=sans-serif&fontLinkColor=e8554e&url=" + data:blog.canonicalUrl' frameborder='0' height='300' layout='responsive' resizable='resizable' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' width='600'> <div aria-label='Disqus Comments' overflow='' role='button' tabindex='0'>Disqus Comments</div> </amp-iframe></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'>
</b:includable>
<b:includable id='iframe_comments' var='post'>
<b:if cond='data:post.allowIframeComments'>
<script expr:src='data:post.iframeCommentSrc'/>
<div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data-viewtype='data:post.viewType'/>
<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'>
<data:post.title/>
</h3>
<div class='mobile-index-arrow'>&rsaquo;</div>
<div class='mobile-index-contents'>
<b:if cond='data:post.thumbnailUrl'>
<div class='mobile-index-thumbnail'>
<div class='Image'>
<amp-img expr:src='data:post.thumbnailUrl'/>
</div>
</div>
</b:if>
<div class='post-body'>
<b:if cond='data:post.snippet'><data:post.snippet/></b:if>
</div>
</div>
<div class='clear'/>
</a>
<div class='mobile-index-comment'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.numComments != 0'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</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'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<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>
</h2>
</b:if>
<b:else/>
<h1 class='post-title entry-title'>
<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>
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
<data:post.body/>
<div class='clear'/> <!-- clear for photos floats -->
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
</div>
<div class='post-footer-line post-footer-line-2'>
</div>
</div>
</div>
<b:if cond='data:blog.pageType == "static_page"'>
<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 cond='data:blog.pageType == "item"'>
<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>
</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'><i class='material-icons font-arrow'></i></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'><i class='material-icons font-arrow'></i></a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
</b:includable>
<b:includable id='post' var='post'>
<article class='post hentry' itemscope='itemscope' itemtype='https://schema.org/Blog'>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image'/>
<b:else/>
</b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div class='thumbnail-area'>
<b:if cond='data:post.firstImageUrl'>
<div class='thumbnailjpg'>
<a expr:href='data:post.url'>
<amp-img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' height='200' layout='responsive' width='250'/>
</a>
</div>
<b:else/>
<div class='thumbnailjpg'>
<a expr:href='data:post.url'>
</a>
</div>
</b:if>
</div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
</b:if>
<div class='post-inner'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<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>
</h2>
</b:if>
<b:else/>
<h1 class='post-title entry-title'>
<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>
<!-- Post Meta -->
<b:if cond='data:blog.pageType == "item"'>
<b:include data='posts' name='breadcrumb'/>
<div class='post-meta'>
<div class='post-meta-left'>
<div class='post-meta-span meta-author'>
<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='https://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='https://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</span>
</div>
<b:if cond='data:post.dateHeader'>
<div class='post-meta-span meta-date'>
<span class='fa fa-calendar-check-o'/>
<abbr class='updated published' expr:title='data:post.timestampISO8601' itemprop='datePublished'>
<data:post.dateHeader/>
</abbr>
</div>
</b:if>
</div>
</div>
<div class='clear'/>
</b:if>
<div class='postsocial'>
<amp-social-share height='35' type='twitter' width='35'/>
<amp-social-share height='35' type='gplus' width='35'/>
<amp-social-share height='35' type='pinterest' width='35'/>
<amp-social-share height='35' type='linkedin' width='35'/>
<amp-social-share data-param-app_id='145634995501895' height='35' type='facebook' width='35'/>
</div>
<!-- Post Meta End -->
<b:if cond='data:blog.pageType != "item"'>
<div class='postag'>
<b:loop values='data:post.labels' var='label'><a expr:href='data:label.url + "?&max-results=8"' expr:title='data:label.name' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'> </b:if></b:loop></div>
</b:if>
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
<b:if cond='data:blog.pageType == "item"'>
<div class='above_post'>
<amp-fx-flying-carpet height='250px'>
</amp-fx-flying-carpet>
</div>
</b:if>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div class='summary'>
<data:post.snippet/>
</div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
<div class='clear'/> <!-- clear for photos floats -->
</div>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<div class='clear'/>
</div>
<div class='post-footer-line post-footer-line-2'>
</div>
<div class='post-footer-line post-footer-line-3'><span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span> </div>
</div>
<amp-iframe expr:src='"https://cdn.rawgit.com/KompiAjaib/FileX/master/url-shortener.html?api=AIzaSyBzKkzgzd9zdK1Bif7Rw4VDIGFupuLCoXg&url=" + data:blog.canonicalUrl' frameborder='0' height='30' layout='responsive' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' width='747'>
</amp-iframe>
<b:if cond='data:blog.pageType == "item"'>
<div class='shortener-box'> </div>
</b:if>
</b:if>
</div>
</article>
</b:includable>
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
</b:includable>
<b:includable id='shareButtons' var='post'>
<b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showPinterestButton'><a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + "&target=pinterest"' expr:title='data:top.shareToPinterestMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToPinterestMsg/></span></a></b:if><b:if cond='data:top.showPlusOne'><div class='goog-inline-block google-plus-share-container'><data:post.googlePlusShareTag/></div></b:if>
</b:includable>
<b:includable id='status-message'/>
<b:includable id='threaded-comment-form' var='post'/>
<b:includable id='threaded_comment_js' var='post'/>
<b:includable id='threaded_comments' var='post'/>
</b:widget>
</b:section>
</div>
<div itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/WPSideBar'>
<aside class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'>
<b:widget id='PopularPosts1' locked='false' title='Terpopuler' type='PopularPosts' version='1'>
<b:widget-settings>
<b:widget-setting name='numItemsToShow'>10</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='showSnippets'>true</b:widget-setting>
<b:widget-setting name='timeRange'>LAST_WEEK</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='!data:showThumbnails'>
<b:if cond='!data:showSnippets'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'>
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href'>
<b:with value='data:post.featuredImage.isResizable? resizeImage(data:post.featuredImage, 300) : data:post.thumbnail' var='image'>
<amp-img expr:alt='data:post.title' expr:src='data:image' expr:title='data:post.title' height='180' width='300'/>
</b:with>
</a>
</div>
<b:else/>
<div class='item-thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title'>
<amp-img expr:alt='data:post.title' expr:title='data:post.title' height='180' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdaV_R0lqTevM74xhzLnoR2QwfiKXq-VMraGxrzmx-a8wBQRXBNyBPpiz5kedksJZtKN3U_fhOs9NQ4qPcfgyJwL5peWcTIXQwfD0Wkpxe4gR5sZaiLzzqaMt7OSJH-ff8-bhJOnm98_UH/s100/no-thumbnail.png' width='300'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
<b:if cond='data:showSnippets'>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
</div>
<div class='clear'/>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
<b:widget id='Label1' locked='false' title='Labels' type='Label' version='1'>
<b:widget-settings>
<b:widget-setting name='sorting'>ALPHA</b:widget-setting>
<b:widget-setting name='display'>LIST</b:widget-setting>
<b:widget-setting name='selectedLabelsList'/>
<b:widget-setting name='showType'>ALL</b:widget-setting>
<b:widget-setting name='showFreqNumbers'>true</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
</div>
</b:includable>
</b:widget>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive' version='1'>
<b:widget-settings>
<b:widget-setting name='showStyle'>FLAT</b:widget-setting>
<b:widget-setting name='yearPattern'>yyyy</b:widget-setting>
<b:widget-setting name='showWeekEnd'>true</b:widget-setting>
<b:widget-setting name='monthPattern'>MMMM</b:widget-setting>
<b:widget-setting name='dayPattern'>MMM dd</b:widget-setting>
<b:widget-setting name='weekPattern'>MM/dd</b:widget-setting>
<b:widget-setting name='chronological'>true</b:widget-setting>
<b:widget-setting name='showPosts'>false</b:widget-setting>
<b:widget-setting name='frequency'>MONTHLY</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:include cond='data:style == "HIERARCHY"' data='data' name='interval'/>
<b:include cond='data:style == "FLAT"' data='data' name='flat'/>
<b:include cond='data:style == "MENU"' data='data' name='menu'/>
</div>
</div>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul class='flat'>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='interval'>
<ul class='hierarchy'>
<li expr:class='"archivedate " + data:interval.expclass'>
<b:include cond='data:interval.toggleId' data='interval' name='toggle'/>
<a class='post-count-link' expr:href='data:interval.url'>
<data:interval.name/>
</a>
<span class='post-count' dir='ltr'>(<data:interval.post-count/>)</span>
<b:include cond='data:interval.data' data='interval.data' name='interval'/>
<b:include cond='data:interval.posts' data='interval.posts' name='posts'/>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='post'>
<li><a expr:href='data:post.url'><data:post.title/></a></li>
</b:loop>
</ul>
</b:includable>
<b:includable id='toggle' var='interval'>
<a class='toggle' href='javascript:void(0)'>
<span expr:class='"zippy" + (data:interval.expclass == "expanded" ? " toggle-open" : "")'>
<b:if cond='data:interval.expclass == "expanded"'>
▼ 
<b:elseif cond='data:blog.languageDirection == "rtl"'/>
◄ 
<b:else/>
► 
</b:if>
</span>
</a>
</b:includable>
</b:widget>
<b:widget id='HTML2' locked='false' title='Like Fanspage Kami' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'><amp-iframe width="300"
height="214"
sandbox="allow-scripts allow-same-origin allow-popups"
frameborder="0"
scrolling="no"
src="https://cdn.rawgit.com/KompiAjaib/kompi-html/master/like-boxfb.html?page=programmerbojonegoro">
</amp-iframe></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
<b:widget id='FollowByEmail1' locked='false' title='Berlanggan Gratis' type='FollowByEmail' version='1'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='widget-content'>
<div class='follow-by-email-inner'>
<form expr:action='"https://feedburner.google.com/fb/a/mailverify?uri=" + data:feedPath' method='get' target='_blank'>
<table>
<tr>
<td>
<input class='follow-by-email-address' name='email' placeholder='Your Email Address...' title='Your Email Address' type='text'/>
</td>
<td>
<input class='follow-by-email-submit' type='submit' value='Submit'/>
</td>
</tr>
</table>
<input expr:value='data:feedPath' name='uri' type='hidden'/>
<input name='loc' type='hidden' value='en_US'/>
</form>
</div>
</div>
</b:if>
</b:includable>
</b:widget>
<b:widget id='HTML1' locked='false' title='' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'><script type="text/javascript">
( function() {
if (window.CHITIKA === undefined) { window.CHITIKA = { 'units' : [] }; };
var unit = {"calltype":"async[2]","publisher":"Tubianto18","width":550,"height":250,"sid":"Chitika Default"};
var placement_id = window.CHITIKA.units.length;
window.CHITIKA.units.push(unit);
document.write('<div id="chitikaAdBlock-' + placement_id + '"></div>');
}());
</script>
<script type="text/javascript" src="//cdn.chitika.net/getads.js" async></script></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</aside></div>
<div class='clr'/>
</div></div>
<footer itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/WPFooter'>
<div id='footer'>
<div id='credit'>
Copyright © <span itemprop='copyrightYear'>2017</span> <span itemprop='copyrightHolder' itemscope='itemscope' itemtype='https://schema.org/Organization'><a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'><span itemprop='name'><data:blog.title/></span></a></span>
<div class='clear'/>
</div></div></footer>
<nav class='Navbottom' itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
<ul>
<li><a href='https://programmerbojonegoro.blogspot.co.id/p/about.html' itemprop='url' target='_blank' title='About'><span itemprop='name'><i class='material-icons'>account_circle</i></span></a></li>
<li><a href='https://programmerbojonegoro.blogspot.co.id/p/contact-admin.html' itemprop='url' target='_blank' title='Contact Admin'><span itemprop='name'><i class='material-icons'>contacts</i></span></a></li>
<li><a href='https://programmerbojonegoro.blogspot.co.id/p/sitemap.html' itemprop='url' target='_blank' title='Sitemap'><span itemprop='name'><i class='material-icons'>view_list</i></span></a></li>
<li><a href='https://web.facebook.com/groups/programmerbojonegoro' itemprop='url' target='_blank' title='Fb Group'><span itemprop='name'><i class='material-icons'>group</i></span></a></li>
<li><a href='https://programmerbojonegoro.blogspot.co.id/p/html-editor.html' itemprop='url' target='_blank' title='HTML Editor'><i class='material-icons'>edit</i><span itemprop='name'/></a></li>
<li><a href='http://programmerbojonegoro.blogspot.co.id/p/partner.html' itemprop='url' target='_blank' title='My Partners'><i class='material-icons'>mood</i><span itemprop='name'/></a></li>
<li><a href='http://programmerbojonegoro.blogspot.co.id/p/chatbox-programmer-bojonegoro.html' itemprop='url' target='_blank' title='Chat Box'><i class='material-icons'>question_answer</i><span itemprop='name'/></a></li>
<li><a href='https://drive.google.com/file/d/14eadjiAdDXnB7jgSsvJSSVuoDhQ7hCdx/view' itemprop='url' target='_blank' title='Download Aplikasi Programmer Bojonegoro'><i class='material-icons'>file_download</i><span itemprop='name'/></a></li>
</ul>
</nav>
</div></div>
<b:if cond='data:blog.pageType != "static_page" and data:blog.isMobileRequest == "true" and data:blog.pageType != "error_page"'>
</b:if>
<!--</body>--></body>
</HTML>
0 Response to "Template Blog Premium Valid AMP 100% GRATIS"
Posting Komentar