Guest User

Flex

a guest
Jul 16th, 2019
134
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE html>
  3. <HTML expr:dir='data:blog.languageDirection' itemscope='' itemtype='http://schema.org/NewsArticle' lang='id'>
  4. <b:attr cond='data:blog.isMobileRequest == &quot;true&quot;' name='amp' value='amp'/>
  5. <b:class cond='data:blog.pageType == &quot;static_page&quot;' name='static_page'/>
  6. &lt;head&gt;
  7. <meta charset='utf-8'/>
  8. <meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
  9. <meta content='IE=9; IE=8; IE=7; IE=EDGE; chrome=1' http-equiv='X-UA-Compatible'/>
  10. <b:if cond='data:blog.pageType == &quot;index&quot;'>
  11. <title><data:blog.pageTitle/></title>
  12. <b:else/>
  13. <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
  14. <title>404: Page Not Found | <data:blog.title/></title>
  15. <b:else/>
  16. <title><data:blog.pageName/></title>
  17. </b:if>
  18. </b:if>
  19. <!-- Chrome, Firefox OS and Opera -->
  20. <meta content='#EAEAEA' name='theme-color'/>
  21. <!-- Windows Phone -->
  22. <meta content='#EAEAEA' name='msapplication-navbutton-color'/>
  23. <link href='#' rel='manifest'/>
  24. <meta content='blogger' name='generator'/>
  25. <link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
  26. <link href='https://1.bp.blogspot.com/-Ktsa62xtoU4/WxaE7LVZdGI/AAAAAAAAx_E/YBYYOwwYKd820im1gnaNRaAgcwl0Bf6_gCLcBGAs/s32/amp.png' rel='icon' sizes='32x32'/>
  27. <link href='https://1.bp.blogspot.com/-Ktsa62xtoU4/WxaE7LVZdGI/AAAAAAAAx_E/YBYYOwwYKd820im1gnaNRaAgcwl0Bf6_gCLcBGAs/s192/amp.png' rel='icon' sizes='192x192'/>
  28. <link href='https://1.bp.blogspot.com/-Ktsa62xtoU4/WxaE7LVZdGI/AAAAAAAAx_E/YBYYOwwYKd820im1gnaNRaAgcwl0Bf6_gCLcBGAs/s180/amp.png' rel='apple-touch-icon-precomposed'/>
  29. <meta content='https://1.bp.blogspot.com/-Ktsa62xtoU4/WxaE7LVZdGI/AAAAAAAAx_E/YBYYOwwYKd820im1gnaNRaAgcwl0Bf6_gCLcBGAs/s144/amp.png' name='msapplication-TileImage'/>
  30. <b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
  31. <link expr:href='data:blog.url' rel='canonical'/>
  32. <link expr:href='data:blog.url + &quot;?m=1&quot;' rel='amphtml'/>
  33. </b:if>
  34. <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
  35. <link expr:href='data:blog.url' rel='canonical'/>
  36. </b:if>
  37. <link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
  38. <link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
  39. <link expr:href='&quot;//www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
  40. <link href='//www.blogger.com/openid-server.g' rel='openid.server'/>
  41. <link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
  42. <link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>
  43. <link href='https://plus.google.com/xxxxxxxxxxxxxx' rel='me'/>
  44. <link href='https://plus.google.com/xxxxxxxxxxxxxx' rel='publisher'/>
  45. <b:if cond='data:blog.pageType == &quot;item&quot;'>
  46. <meta expr:content='data:blog.pageName' property='og:title'/>
  47. <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
  48. <meta content='article' property='og:type'/>
  49. <b:if cond='data:blog.metaDescription'>
  50. <meta expr:content='data:blog.metaDescription' name='description'/>
  51. <meta expr:content='data:blog.metaDescription' property='og:description'/>
  52. <b:else/>
  53. <meta expr:content='&quot;Silahkan kunjungi postingan &quot; + data:blog.pageName + &quot; untuk membaca artikel selengkapnya.&quot;' name='description'/>
  54. <meta expr:content='&quot;Silahkan kunjungi postingan &quot; + data:blog.pageName + &quot; untuk membaca artikel selengkapnya.&quot;' property='og:description'/>
  55. </b:if>
  56. </b:if>
  57. <meta expr:content='data:blog.title' property='og:site_name'/>
  58. <b:if cond='data:blog.url == data:blog.homepageUrl'>
  59. <meta expr:content='data:blog.title' property='og:title'/>
  60. <meta content='website' property='og:type'/>
  61. <b:if cond='data:blog.metaDescription'>
  62. <meta expr:content='data:blog.metaDescription' name='description'/>
  63. <meta expr:content='data:blog.metaDescription' property='og:description'/>
  64. <b:else/>
  65. <meta expr:content='&quot;Silahkan kunjungi &quot; + data:blog.pageTitle + &quot; untuk membaca postingan-postingan menarik.&quot;' property='og:description'/>
  66. </b:if>
  67. </b:if>
  68. <b:if cond='data:blog.postImageUrl'>
  69. <meta expr:content='data:blog.postImageUrl' property='og:image'/>
  70. <meta content='530' property='og:image:width'/>
  71. <meta content='280' property='og:image:height'/>
  72. <meta expr:content='data:blog.pageName' property='og:image:alt'/>
  73. <b:else/>
  74. <b:if cond='data:blog.postImageThumbnailUrl'>
  75. <meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
  76. <meta content='530' property='og:image:width'/>
  77. <meta content='280' property='og:image:height'/>
  78. <meta expr:content='data:blog.pageName' property='og:image:alt'/>
  79. <b:else/>
  80. <meta content='https://1.bp.blogspot.com/-Ktsa62xtoU4/WxaE7LVZdGI/AAAAAAAAx_E/YBYYOwwYKd820im1gnaNRaAgcwl0Bf6_gCLcBGAs/s300/amp.png' property='og:image'/>
  81. <meta expr:content='data:blog.title' property='og:image:alt'/>
  82. <meta content='158' property='og:image:width'/>
  83. <meta content='158' property='og:image:height'/>
  84. </b:if>
  85. </b:if>
  86. <meta content='xxxxxxxxxxxxxx' property='fb:app_id'/>
  87. <meta content='xxxxxxxxxxxxxx' property='fb:admins'/>
  88. <meta content='xxxxxxxxxxxxxx' property='fb:profile_id'/>
  89. <meta content='xxxxxxxxxxxxxx' property='fb:pages'/>
  90. <meta content='xxxxxxxxxxxxxx' name='Author'/>
  91. <meta content='https://www.facebook.com/xxxxxxxxxxxxxx' property='article:author'/>
  92. <meta content='https://www.facebook.com/xxxxxxxxxxxxxx' property='article:publisher'/>
  93. <meta expr:content='data:blog.title' name='twitter:site'/>
  94. <meta content='summary_large_image' name='twitter:card'/>
  95. <meta content='@xxxxxxxxxxxxxx' name='twitter:creator'/>
  96.  
  97. <meta content='xxxxxxxxxxxxxx' name='alexaVerifyID'/>
  98. <meta content='xxxxxxxxxxxxxx' name='google-site-verification'/>
  99. <meta content='xxxxxxxxxxxxxx' name='msvalidate.01'/>
  100. <meta content='xxxxxxxxxxxxxx' name='yandex-verification'/>
  101.  
  102. <link href='//1.bp.blogspot.com' rel='dns-prefetch'/><link href='//2.bp.blogspot.com' rel='dns-prefetch'/><link href='//3.bp.blogspot.com' rel='dns-prefetch'/><link href='//4.bp.blogspot.com' rel='dns-prefetch'/><link href='//www.blogger.com' rel='dns-prefetch'/><link href='//fonts.googleapis.com' rel='dns-prefetch'/><link href='//resources.blogblog.com' rel='dns-prefetch'/><link href='//www.facebook.com' rel='dns-prefetch'/><link href='//plus.google.com' rel='dns-prefetch'/><link href='//twitter.com' rel='dns-prefetch'/><link href='//www.youtube.com' rel='dns-prefetch'/><link href='//feedburner.google.com' rel='dns-prefetch'/><link href='//feeds.feedburner.com' rel='dns-prefetch'/><link href='//github.com' rel='dns-prefetch'/><link href='//platform.twitter.com' rel='dns-prefetch'/><link href='//apis.google.com' rel='dns-prefetch'/><link href='//connect.facebook.net' rel='dns-prefetch'/><link href='//www.google-analytics.com' rel='dns-prefetch'/><link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/><link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/><link href='//www.gstatic.com' rel='dns-prefetch'/><link href='//www.googletagservices.com' rel='dns-prefetch'/><link href='//static.xx.fbcdn.net' rel='dns-prefetch'/><link href='//tpc.googlesyndication.com' rel='dns-prefetch'/><link href='//syndication.twitter.com' rel='dns-prefetch'/><link href='//fonts.gstatic.com' rel='dns-prefetch'/><link href='https://cdn.ampproject.org' rel='dns-prefetch'/><link href='https://3p.ampproject.net' rel='dns-prefetch'/><link href='https://cdn.rawgit.com' rel='dns-prefetch'/><link href='https://lh3.googleusercontent.com' rel='dns-prefetch'/><link href='https://tpc.googlesyndication.com' rel='dns-prefetch'/><link href='https://i.ytimg.com' rel='dns-prefetch'/><link href='https://i3.ytimg.com' rel='dns-prefetch'/><link href='https://img.youtube.com' rel='dns-prefetch'/><link href='https://www.googletagmanager.com' rel='dns-prefetch'/><link href='https://www.instagram.com' rel='dns-prefetch'/>
  103.  
  104. &lt;!-- /*<b:skin><![CDATA[
  105. #header-wrapper{width:100%;}
  106. #main-wrapper{width:60%;float:left;}
  107. #sidebar-wrapper{width:40%;float:right;}
  108. ul,li{list-style: none;}
  109. ]]></b:skin>
  110.  
  111. <style amp-custom='amp-custom'>
  112. /*<![CDATA[*/
  113. #main-wrapper,#sidebar-right,#sidebar-wrapper,.deleted-comment{word-wrap:break-word}
  114. #navbar-iframe{height:0;visibility:hidden;display:none}
  115. body{background:#EAEAEA;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;color:#555;}
  116. a{text-decoration:none;transition:all 400ms ease-in-out;color:#000}
  117. :active,:focus{outline:0}
  118. a img{border-width:0}
  119. *{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
  120. i.klik-url{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}
  121. ::selection{background:#11589D;color:#fff}
  122. .header-wrapper{margin:0 20px 0 0;padding:0;height:60px;display:inline-block;float:left;}
  123. #header{max-width:100%;width:300px;margin:10px 0 0;padding:0;}
  124. #header h1,#header p{margin:0;padding:0;}
  125. #header h1 span,#header p span,#header p a span,#header h1 a span,#header .description{position:fixed;top:-3000px;left:-3000px;font-size:0;opacity:0}
  126.  
  127. .head-wrapper{position:fixed;top:0;left:0;right:0;z-index:998;height:60px;}
  128. .content-wrapper{width:100%;max-width:1100px;margin:0 auto;padding:0;position:relative}
  129. .head-wrapper .content-wrapper{margin:0 auto;padding:0 10px;position:relative;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.05),0 3px 3px rgba(0,0,0,.05);}
  130. .outer-wrapper{margin:80px 0 0;padding:0;position:relative}
  131. #main-wrapper{width:calc(100% - 300px);float:left;margin:0 auto;padding:0;}
  132.  
  133. .post{background:#fff;margin:0 20px 0 0;padding:0 20px 20px;box-shadow:0 1px 0 rgba(0,0,0,.05),0 3px 3px rgba(0,0,0,.05);}
  134. .post h1.post-title{font-size:48px;font-weight:300;line-height:1.1;margin:20px 0;}
  135. .post h1.post-title a{color:#333;}
  136. .post-body {font-size:16px;font-weight:400;color:#555;line-height:1.5;counter-reset:blockquote;}
  137. .post-body h1,.post-body h2,.post-body h3,.post-body h4,.post-body h5,.post-body h6{font-weight:700;line-height:1.2;color:#333;;margin:10px 0}
  138. .post-body h1{font-size:38px}
  139. .post-body h2{font-size:32px}
  140. .post-body h3{font-size:28px}
  141. .post-body h4,.post-body h5,.post-body h6{font-size:22px}
  142. .post-body a{font-weight:500;color:#000;display:inline-block}
  143. .post-body a:hover{color:#777}
  144. .post-body i{font-style:italic}
  145. .post-body .separator a{margin:0}
  146. .post-body amp-youtube{margin:0 -20px}
  147. .dailynodisplay{display:none}
  148. .post-body amp-img.emojika{vertical-align:-12%}
  149. .thumb-post{position:relative;margin:0 -20px 10px}
  150. .post-body blockquote,.post-body blockquote.kata-kata{font-size:18px;font-family:Georgia;color:#000;border-left:3px solid #11589D;padding:10px;margin:0 -20px;background:rgba(17,88,157,.1);line-height:1.3}
  151. .post-body blockquote.kata-kata{counter-increment:blockquote;padding-left:40px;position:relative;}
  152. .post-body blockquote.kata-kata:before{content:counter(blockquote)'.';position:absolute;left:0;top:0;color:#000;font-size:18px;z-index:2;width:40px;height:40px;line-height:40px;text-align:center;}
  153. .post-body blockquote cite{color:#11589D;font-size:14px;font-style:italic;display:block;margin-top:5px;}
  154. .post-body blockquote cite:before{content:"\2014 \2009";color:#000;}
  155.  
  156. .post-body pre,.post-body pre code{color:#11589D}
  157. .post-body pre{border-left:3px solid #11589D;background:rgba(17,88,157,.1);padding:8px 10px;overflow:auto;max-width:calc(100% + 40px);text-align:left;margin:0 -20px;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}
  158. .post-body code,.post-body pre,.post-body pre code{font-family:Consolas,Monaco,'Andale Mono',monospace;white-space:initial;word-spacing:normal;word-break:normal;font-size:14px;line-height:1.3em}
  159. .post-body code{color:#11589D}
  160.  
  161. .post-body .table-responsive{min-height:.01%;overflow-x:auto}
  162. .post-body .table{width:100%;border-collapse:collapse;border-spacing:0}
  163. .post-body .table td,.post-body .table th{background-color:#F3F5EF;border:1px solid #bbb;color:#333;font-size:95%;padding:5px;vertical-align:top}
  164. .post-body .table tr:nth-child(even) td{background-color:#F0F0E5}
  165. .post-body .table th{background-color:#EAE2CF;color:#333;font-size:110%}
  166. .post-body .table tr.even:hover td,.post-body .table tr:hover td{color:#222;background-color:#FFFBEF}
  167. .tg-bf{font-weight:700}
  168. .tg-it{font-style:italic}
  169. .tg-left{text-align:left}
  170. .tg-right{text-align:right}
  171. .tg-center{text-align:center}
  172.  
  173. /* AMP Sidebar */
  174. .btn-sidebaramp{display:inline-block;background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 25 25' width='25' height='25' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23333' d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-repeat:no-repeat;background-size:35px 35px;background-position:center center;background-color:transparent;width:48px;height:60px;border:none;position:absolute;top:0;right:0;cursor:pointer}
  175. amp-sidebar{width:300px;padding:0;background:#fff}
  176. svg.amp-close-image{position:absolute;top:15px;left:16px;cursor:pointer;}
  177. amp-sidebar ul{margin-top:20px;padding:0;list-style:none;}
  178. amp-sidebar li{margin:0;list-style:none;padding:10px 20px}
  179. amp-sidebar li:first-child{padding-top:0;}
  180. amp-sidebar li a{color:#333;font-weight:500;font-size:16px;display:block}
  181. amp-sidebar li a:hover{color:#777}
  182. amp-sidebar button{margin-left:20px}
  183. #side-bar h6 {border:none;background-color:#fff;font-size:16px;font-weight:500;color:#333;padding:0;margin:0 0 10px 20px}
  184. amp-sidebar ul li.drop ul{margin-top:10px}
  185. amp-sidebar ul li.drop ul li,amp-sidebar ul li.drop ul li:first-child{padding:10px 20px 0 40px}
  186. amp-sidebar li.drop{margin:0;list-style:none;padding:0}
  187. amp-sidebar li.drop section{margin:0;list-style:none;padding:10px 0 0}
  188. amp-sidebar li.drop li{border:0}
  189. amp-sidebar li.drop li:last-child{padding:10px 20px 10px 40px;margin-bottom:-2px}
  190. #side-bar h6 svg{width:20px;height:20px;vertical-align:middle;float:right;margin-right:20px}
  191. #side-bar h6 svg path{fill:#333}
  192. section:not([expanded]) .show-less,section[expanded] .show-more{display:none}
  193. .logo_sidebar{width:60%;height:auto;margin:50px auto 0}
  194. .follow_sidebar{line-height:normal;letter-spacing:normal;text-transform:uppercase;font-weight:700;color:#333;font-size:.94rem;padding-top:1.5rem;display:block;text-align: center;}
  195. .ampstart-social-follow{margin:.5rem 0 1rem;-webkit-box-pack:initial;-ms-flex-pack:initial;justify-content:initial;display:block;text-align: center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;padding-left:0}
  196. .ampstart-social-follow li{display:inline-block;margin-right:0;padding:0}
  197. .p1{padding:.5rem}
  198. .inline-block{display:inline-block}
  199. svg:not(:root){overflow:hidden}
  200. .ampstart-icon,.ampstart-sidebar .ampstart-icon{fill:#333}
  201.  
  202. /* homepage */
  203. .home_page #main-wrapper{width:calc(100% - 320px);padding:0 0 60px;position:relative}
  204. .home_page .post-outer{margin:0 0 20px;padding:0;}
  205. .home_page .home-relative{position:relative;}
  206. .home_page .post{margin:0;padding:0;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.05),0 3px 3px rgba(0,0,0,.05)}
  207. .home_page .post .posts-thumb{width:30%;height:100%;float:left;position:relative;margin-right:10px;transition:all .3s ease-in-out}
  208. .home_page .post .posts-thumb amp-img{width:100%;height:100%}
  209. .home_page .post h2.post-title{font-size:18px;font-weight:700;margin:0;padding:10px;line-height:1.1;border-bottom:1px solid #ddd}
  210. .home_page .post h2.post-title a{color:#333;}
  211. .home_page .post:hover h2.post-title a{color:#000;}
  212. .home_page .post h2.post-title a:hover{color:#777;}
  213. .home_page .post .post-body .snippets{font-size:16px;margin:-5px 0 0;padding:10px;line-height:1.2;background-color:#fff;}
  214. .home_page .post .post-body h3{margin:0;}
  215. .home_page .post .posts-thumb .ribbon span{display:none}
  216.  
  217. .homepage .blog-posts>.post-outer:nth-child(1) .post .posts-thumb{position:relative;margin-right:0;float:none;width:100%;height:auto;overflow:hidden;background:#fff;}
  218. .homepage .blog-posts>.post-outer:nth-child(1) .post .posts-thumb amp-img {width:100%;height:auto;z-index:1}
  219. .homepage .blog-posts>.post-outer:nth-child(1) .post h2{padding:10px;margin:0;line-height:1}
  220. .homepage .blog-posts>.post-outer:nth-child(1) .post h2 a{font-size:40px;font-weight:300}
  221. .homepage .blog-posts>.post-outer:nth-child(1) .post .posts-thumb .ribbon span{color:#333;padding:10px 90px 10px 35px;font-size:22px;font-weight:900;z-index:2;transform:rotate(-30deg);-webkit-transform:rotate(-30deg);display:block;background:#9BC90D;box-shadow:0 3px 10px -5px rgba(0,0,0,1);position:absolute;top:15px;left:-40px}
  222.  
  223. /* Sidebar */
  224. aside{width:300px;float:right;padding:0;margin:0 auto;position:-webkit-sticky;position:sticky;top:80px}
  225. #sidebar-wrapper{width:300px;float:right;padding:0;margin:0}
  226. .sidebar h2{background-color:#fff;font-size:16px;margin:0;padding:10px;color:#333;text-transform:uppercase;}
  227. .footer,.sidebar{color:#333;line-height:1.3em;font-size:16px;font-weight:400;}
  228. .sidebar .widget{margin:0 auto 20px;padding:0;}
  229. .sidebar .widget-content{margin:0 auto;padding:0}
  230.  
  231. /* Menu Page */
  232. .page{display:inline-block;height:60px;line-height:60px;float:right;margin-right:38px;}
  233. .PageList ul{margin:0;padding:0;list-style:none;text-align:center;font-size:0;}
  234. .PageList ul li{margin:0;padding:0;list-style:none;height:60px;line-height:60px;float:left;}
  235. .PageList ul li a,.PageList ul li .search-open{display:inline-block;margin:0;padding:0 8px;font-size:14px;font-weight:400;color:#333;}
  236. .PageList ul li a:hover{color:#777}
  237. .PageList ul li .search-open svg{vertical-align:middle;cursor:pointer}
  238.  
  239. /* Search Box */
  240. .search-close{position:absolute;top:20px;right:20px;z-index:999;cursor:pointer}
  241. #search_box{position:fixed;top:100px;left:0;right:0;z-index:999;}
  242. .search_box .content-wrapper{background:#262626;padding:10px;-webkit-animation:slide-down .3s ease-out;-moz-animation:slide-down .3s ease-out}
  243. .BlogSearch h2.title{display:none}
  244. .BlogSearch .gsc-search-box{width:100%}
  245. .BlogSearch input.gsc-input{width:calc(100% - 10px);padding-right:4px\9;padding-left:4px\9;margin-bottom:0;-webkit-border-radius:3px;-moz-border-radius:3px;height:34px;padding:6px 12px;font-size:95%;line-height:1.428571429;color:#555;vertical-align:middle;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}
  246. .BlogSearch input.gsc-input:focus{border-color:#11589D;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(17,88,157,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(17,88,157,.6)}
  247. .BlogSearch input.gsc-input:-moz-placeholder{color:#999}
  248. .BlogSearch input.gsc-input::-moz-placeholder{color:#999;opacity:1}
  249. .BlogSearch input.gsc-input:-ms-input-placeholder{color:#999}
  250. .BlogSearch input.gsc-input::-webkit-input-placeholder{color:#999}
  251. .BlogSearch td.gsc-search-button{width:60px;}
  252. .BlogSearch input.gsc-search-button{background-color:#11589D;border:0;-webkit-border-radius:3px;-moz-border-radius:3px;width:100%;height:34px;padding:6px 0;text-align:center;font:700 95% Roboto;line-height:1.428571429;color:#fff;vertical-align:middle;background-image:none;border-radius:4px;cursor:pointer;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
  253.  
  254. /* Breadcrumb */
  255. .breadcrumbs{line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:10px 0;border-bottom:1px solid #ddd;font-size:80%;color:#555;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
  256. .breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:#555;font-weight:400}
  257. .breadcrumbs a:hover{color:#777}
  258. .breadcrumbs,.breadcrumbs a,.credit{font-weight:400}
  259. .breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
  260. .breadcrumbs svg path{fill:#555}
  261.  
  262. /* Posts Navigator */
  263. #blog-pager-newer-link,#blog-pager-older-link{font-size:100%}
  264. .blog-pager-older-link,.home-link, .blog-pager-newer-link{padding:0}
  265. .halaman-kanan,.halaman-kiri,.pager-title-left{transition:all .3s ease-in-out}
  266. .halaman{margin:20px 20px 20px 0;padding:10px 0;height:auto;background-color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.05),0 3px 3px rgba(0,0,0,.05);}
  267. .halaman-kanan,.halaman-kiri{color:#141924;background:0 0;width:50%;position:relative;margin:0}
  268. .halaman-kiri{height:auto;float:left;padding:0 10px 0 32px;text-align:left;}
  269. .halaman-kanan{height:auto;float:right;padding:0 32px 0 10px;text-align:right;}
  270. .halaman-kanan a:hover,.halaman-kanan:hover .pager-title-left,.halaman-kiri a:hover,.halaman-kiri:hover .pager-title-left{color:#e8554e}
  271. .current-pageleft,.current-pageright,.halaman-kanan a,.halaman-kiri a{font-size:16px;font-weight:500;background:0 0;color:#555;text-decoration:none;line-height:1.3em}
  272. #blog-pager,.isihalaman-kanan,.isihalaman-kiri{margin:0}
  273. .panahkanan,.panahkiri{position:absolute;top:50%;margin-top:-16px;color:#777;width:32px;height:32px}
  274. .panahkiri{left:0}
  275. .panahkanan{right:0}
  276.  
  277. /* Blog Pager */
  278. .home_page a.blog-pager-newer-link,.home_page a.blog-pager-older-link,.home_page .home-box,.home_page .last-box,.home_page a.home-link{box-shadow:0 1px 0 rgba(0,0,0,.05),0 3px 3px rgba(0,0,0,.05)}
  279. .home_page #blog-pager-newer-link svg,.home_page #blog-pager-older-link svg,.home_page .home-box svg,.home_page .last-box svg{width:44px;height:44px}
  280. .home_page #blog-pager-home-link svg{width:30px;height:30px;vertical-align:-10px}
  281. .home_page .home-box svg path,.home_page .last-box svg path{fill:#666}
  282. .home_page #blog-pager-newer-link{float:left;font-size:200%;font-weight:500}
  283. .home_page #blog-pager-older-link{float:right;font-size:200%;font-weight:500}
  284. .home_page #blog-pager,.home_page .blog-pager{clear:both;text-align:center;}
  285. .home_page #blog-pager-newer-link a,.home_page #blog-pager-older-link a,.home_page a.home-link{color:#333;transition:all .4s ease-in-out}
  286. .home_page #blog-pager-newer-link a:hover,.home_page #blog-pager-older-link a:hover,.home_page a.home-link:hover{color:red}
  287. .home_page a.blog-pager-newer-link,.home_page a.blog-pager-older-link,.home_page #blog-pager-home-link a.home-link{background:#fff;color:#666;padding:0;width:43px;height:43px;text-align:center;transition:all 400ms ease-in-out;position:absolute;bottom:20px;line-height:43px;border:1px solid transparent}
  288. .home_page a.blog-pager-older-link{border-radius:3px;right:0;z-index:2}
  289. .home_page a.blog-pager-newer-link{border-radius:3px;left:0;z-index:2}
  290. .home_page #blog-pager-home-link a.home-link{font-size:100%;font-weight:600;border-radius:3px;left:50%;margin-left:-22px}
  291. .home_page #blog-pager-newer-link a:hover,.home_page #blog-pager-older-link a:hover,.home_page .home-box:hover,.home_page .last-box:hover,.home_page #blog-pager-home-link a.home-link:hover{color:#333}
  292. .home_page .home-box,.home_page .last-box{background:#fff;color:#666;padding:0;border-radius:3px;position:absolute;bottom:20px;width:43px;height:43px;z-index:1;font-size:200%;font-weight:600;text-align:center;cursor:not-allowed;}
  293. .home_page .home-box{left:0;}
  294. .home_page .last-box{right:0;}
  295.  
  296. /* Related Posts */
  297. .related-post h4{margin:0 10px 10px 0;font-size:24px;font-weight:500;padding:0;color:#333}
  298. .related-post{width:100%;margin:0;padding:0;font-size:16px;text-align:left;}
  299. .related-wrapper{overflow:hidden;}
  300.  
  301. /* Social Share */
  302. .share-box{position:relative;margin-top:20px}
  303. .share-box.atas{margin-top:-6px;margin-bottom:10px;height:52px;overflow:hidden;}
  304. .share-box.atas amp-addthis iframe{margin-top:0;margin-left:-8px;}
  305. .displayinlineblock{display:inline-block;}.floatleft{float:left;}.borderradius3{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
  306.  
  307. .clear{clear:both}
  308.  
  309. /* Credit Footer */
  310. .credit{line-height:1.5em}
  311. .credit-wrapper{background:#fff;margin:0;padding:10px;font-size:90%;color:#555;box-shadow:0 1px 0 rgba(0,0,0,.05),0 3px 3px rgba(0,0,0,.05);}
  312. .credit-wrapper a:link,.credit-wrapper a:visited{color:#555;text-decoration:none}
  313. .credit-wrapper a:hover{color:#777;text-decoration:none}
  314. .credit-left{float:left}
  315. .credit-right{float:right}
  316.  
  317. .updated{border-bottom:0}
  318. abbr[title]{text-decoration:none}
  319. .post .jump-link,.quickedit{display:none}
  320.  
  321. /* Populer Posts */
  322. .PopularPosts .widget-content ul{width:100%;margin:0;padding:0;list-style-type:none;counter-reset:popcount}
  323. .PopularPosts .widget-content ul li{margin:0 0 10px;padding:0;height:170px;overflow:hidden;position:relative;box-shadow:0 1px 0 rgba(0,0,0,.05),0 3px 3px rgba(0,0,0,.05)}
  324. .PopularPosts .widget-content ul li:last-child{margin:0;}
  325. .PopularPosts .widget-content ul li a{color:#fff;text-decoration:none;font-size:18px;font-weight:500}
  326. .PopularPosts .widget-content ul li:hover .item-title a{bottom:0}
  327. .PopularPosts .widget-content ul li:hover img{-webkit-transform: scale(1.3);-ms-transform: scale(1.3);-o-transform: scale(1.3);transform: scale(1.3);}
  328. .PopularPosts .widget-content ul li img{width:100%;height:170px;padding-right:0;transition:all .6s ease-in-out;}
  329. .PopularPosts .item-thumbnail{float:none;margin:0 0 -4px}
  330. .PopularPosts .item-title a{padding:10px;position:absolute;bottom:-100px;left:0;right:0;text-align:left;background:rgba(0,0,0,.5);transition:all .3s ease-in-out}
  331. .PopularPosts .item-title a:hover{color:yellow}
  332. .PopularPosts .item-snippet{display:none}
  333.  
  334. /* Featured Post */
  335. #FeaturedPost1 h3{margin:0;padding:10px;line-height:1.1em;font-size:18px;font-weight:700;border-bottom:1px solid #ddd}
  336. #FeaturedPost1 h3 a{line-height:1.1em;color:#333}
  337. #FeaturedPost1 .post-summary h3 a:hover{color:#777}
  338. #FeaturedPost1 p{margin:0;padding:10px;color:#555}
  339. #FeaturedPost1{background-color:#fff;margin:0 0 20px;display:block;padding:0;box-shadow:0 1px 0 rgba(0,0,0,.05),0 3px 3px rgba(0,0,0,.05);}
  340.  
  341. /* Widget Label */
  342. #Label1 .widget-content{margin:0;padding:0 10px 5px 5px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.05),0 3px 3px rgba(0,0,0,.05)}
  343. .label-size{margin:0;padding:0}
  344. .label-size a,.label-size span{text-decoration:none;float:left;height:18px;line-height:18px;position:relative;margin-bottom:5px;margin-left:5px;padding:6px 10px;background:#333;border-radius:3px;color:#fff;font-weight:500;font-size:16px;text-align:center;display:inline-table;}
  345. .label-size a:hover,.label-size span:hover{background:#888;}
  346.  
  347. /* Subscribe Box */
  348. .follow-by-email-inner table{width:100%;}
  349. .follow-by-email-inner td{display:block;margin:0 -3px}
  350. .follow-by-email-inner .follow-by-email-address{width:100%;font-family:Roboto,sans-serif;font-weight:400;height:auto;margin:0 auto 5px;padding:10px;color:#333;position:relative;z-index:1;background:#fff;border:1px solid #ccc;border-radius: 4px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
  351. .follow-by-email-inner .follow-by-email-address:focus,.follow-by-email-inner .follow-by-email-submit:focus{outline:0}
  352. .follow-by-email-inner .follow-by-email-submit{display:block;width:100%;height:30px;font-family:Roboto,sans-serif;font-weight:500;font-size:16px;text-transform: uppercase;float:left;color:#FFF;padding:0 20px;cursor:pointer;background-color:#11589D;border:none;border-radius:2px;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
  353.  
  354. /* Button */
  355. @font-face{font-family:"Product Sans";src:url("https://cdn.rawgit.com/KompiAjaib/font/master/product-sans-regular.ttf") format("ttf");font-weight:normal;font-style:normal;}
  356. a.btn-download,a.btn-play,a.btn-google,a.btn-apple,a.btn-play:hover,a.btn-download:hover,a.btn-google:hover,a.btn-apple:hover{color:#fff}
  357. .btn{display:inline-block;padding:10px 16px;margin:5px;font-size:18px;line-height:1.3333333;border-radius:6px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;font-weight:500;text-decoration:none}
  358. .btn:active:focus,.btn:focus{outline:0}
  359. .btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0}
  360. .btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
  361. .btn-play{color:#fff;background-color:#D32F2F;border-color:#C62828;padding:10px 16px 10px 40px;position:relative;font-family: 'Product Sans', Arial, sans-serif;font-weight:600}
  362. .btn-play:focus{color:#fff;background-color:#C62828;border-color:#B71C1C}
  363. .btn-play:active,.btn-play:hover{color:#fff;background-color:#C62828;border-color:#B71C1C}
  364. .btn-play:before{content:"";color:#fff;background-image:url(https://1.bp.blogspot.com/-DpJGZ47Olck/WSkXyTDP1kI/AAAAAAAArQQ/UwIxH4hYRIkbgZkN0_mUrkK12HveGFsXACLcB/s1600/play.png);background-size:cover;background-repeat:no-repeat;width:30px;height:40px;position:absolute;left:0;top:50%;margin-top:-20px}
  365. .btn-download{color:#fff;background-color:#337ab7;border-color:#2e6da4;font-family: 'Product Sans', Arial, sans-serif;font-weight:600}
  366. .btn-download:focus{color:#fff;background-color:#286090;border-color:#122b40}
  367. .btn-download:active,.btn-download:hover{color:#fff;background-color:#286090;border-color:#204d74}
  368. .btn-google,.btn-apple{color:#fff;background-color:#111;border-color:#000;position:relative;font-family: 'Product Sans', Arial, sans-serif;font-weight:600}
  369. .btn-google{padding:15px 16px 5px 40px;}
  370. .btn-apple{padding:15px 22px 5px 50px;}
  371. .btn-google:focus,.btn-apple:focus{color:#fff;background-color:#555;border-color:#000}
  372. .btn-google:active,.btn-google:hover,.btn-apple:active,.btn-apple:hover{color:#fff;background-color:#555;border-color:#000;}
  373. .btn-apple:before,.btn-google:before{background-size:cover;background-repeat:no-repeat;width:30px;height:30px;margin-top:-15px;position:absolute}
  374. .btn-google:before{content:"";background-image:url(https://4.bp.blogspot.com/-52U3eP2JDM4/WSkIT1vbUxI/AAAAAAAArQA/iF1BeARv2To-2FGQU7V6UbNPivuv_lccACLcB/s30/nexus2cee_ic_launcher_play_store_new-1.png);left:6px;top:50%}
  375. .btn-google:after{content:"GET IT ON";position:absolute;top:5px;left:40px;font-size:10px;font-weight:400}
  376. .btn-apple:before{content:"";background-image:url(https://2.bp.blogspot.com/-pfguXOXm3fg/WfbA_JMxnOI/AAAAAAAAtoA/wkc55zw6kZ4cG-S-9K2HVie6RxXRhuvdACLcBGAs/s30/apple.png);left:10px;top:50%}
  377. .btn-apple:after{content:"Download on the";position:absolute;top:5px;left:50px;font-size:11px;font-weight:400}
  378. kbd{color:#333;display:inline-block;-moz-border-radius:3px;-moz-box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 2px #fff inset;-webkit-border-radius:3px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 2px #fff inset;background-color:#f7f7f7;border:1px solid #ccc;border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 2px #fff inset;font-family:Arial,Helvetica,sans-serif;font-size:11px;line-height:1.4;margin:0 .1em;padding:.1em .6em;text-shadow:0 1px 0 #fff;vertical-align:3px}
  379.  
  380. /* Label and Search Pages Status */
  381. .status-msg-wrap{font-size:14px;font-weight:400;width:100%;height:auto;color:#555;margin:0;position:relative;padding:0;}
  382. .status-msg-border{border:1px solid #fff;opacity:0;width:100%;position:relative;height:20px}
  383. .status-msg-bg{background-color:transparent;opacity:.8;width:100%;position:relative;z-index:1}
  384. .status-msg-body{text-align:center;margin:0;padding:6px 10px 10px;width:100%;word-wrap:break-word;z-index:4;line-height:1.3;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.05),0 3px 3px rgba(0,0,0,.05)}
  385. .status-msg-hidden{visibility:hidden;padding:.3em 0}
  386. .status-msg-wrap a{color:#fff;font-weight:500;text-decoration:none;background:#333;border-radius:2px;margin:0 6px 0 -6px;padding:3px 5px;width:130px;max-width:130px;display:inline-block;line-height:1.3}
  387. .status-msg-body b{font-size:20px;color:#333;display:block;margin-bottom:6px}
  388. .status-msg-body:after{content:"";display:block;clear:both}
  389. .status-msg-body a:last-child{margin-right:0}
  390.  
  391. /* Static Page */
  392. .static_page #sidebar-wrapper,.static_page #comments,.static_page .disqus,.static_page .leaderboard{display:none}
  393. .static_page .post h2{text-align:center;margin:0;padding:10px 0;border-bottom:1px solid #ddd}
  394. .static_page .post h2 a{font-size:24px;font-weight:700;color:#333;}
  395. .static_page .outer-wrapper{margin:80px 0 0;padding:0;position:relative}
  396. .static_page #main-wrapper{width:100%;padding:0}
  397. .static_page .post{margin:0 0 20px;}
  398. .static_page .post-body{margin:20px 0;padding:0;}
  399. .static_page a.home-link{visibility:hidden}
  400. .static_page .fb-comments{display:none;visibility:hidden}
  401.  
  402. /* Contact Page */
  403. .contact-box{margin-top:10px}
  404. .contact-box svg{width:24px;height:24px;vertical-align:-6px;margin-right:5px}
  405. .contact-box svg path{fill:#efefef}
  406. .contact-box .bbm svg{width:20px;height:20px;vertical-align:-5px;margin-right:5px}
  407. .contact-box .bbm{margin-top:6px}
  408. .post-body .contact-me a{color:#efefef;font-weight:400}
  409. .post-body .contact-me a[href^="http://"]:after,.post-body .contact-me a[href^="https://"]:after,.post-body .contact-me a[href^="mailto:"]: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:%23efefef' 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}
  410. .contact-me{display:block}
  411. .contact-me span{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}
  412. .contact-me amp-accordion h5 span{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
  413. .contact-box .map,.contact-box .bbm{position:relative;padding-left:29px}
  414. .contact-box .bbm .barcode-bbm{margin:10px 0;width:300px}
  415. .contact-box .bbm span span{font-weight:300}
  416. .contact-box .map svg{position:absolute;top:0;left:0}
  417. .contact-box .bbm svg{position:absolute;top:4px;left:0}
  418. .contact-box amp-accordion section:not([expanded]) .show-less,.contact-box amp-accordion section[expanded] .show-more{display:none}
  419. .contact-box amp-accordion h5{background:none;border:none;color:#efefef;font-weight:500;font-size:14px;margin:0;padding:0;text-align:left;}
  420.  
  421. /* Post Image Style */
  422. .img-center{text-align:center;margin:0 auto;}
  423. .img-left{clear:left;float:left;margin-bottom:1em;margin-right:1em;text-align:center;}
  424. .img-right{clear:right;float:right;margin-bottom:1em;margin-left:1em;text-align:center;}
  425. .img-width-100,.img-width-200,.img-width-300,.img-width-400,.img-width-500,.img-width-600{width:100%;text-align:center;clear:both}
  426. .img-width-100{max-width:100px;}
  427. .img-width-200{max-width:200px;}
  428. .img-width-300{max-width:300px;}
  429. .img-width-400{max-width:400px;}
  430. .img-width-500{max-width:500px;}
  431. .img-width-600{max-width:600px;}
  432.  
  433. /* CSS Untuk Iklan */
  434. .leaderboard{width:100%;height:auto;text-align:center;margin:0 0 20px;padding:0}
  435. .post-body .inline_wrapper{width:100%;height:auto;text-align:center;margin:0 0 10px;padding:0}
  436. .post-body .inline_wrapper span{color:#efefef;font-size:10px;margin:0 auto 5px;display:block}
  437. .iklan-bawahpost,.iklan-ataspost{width:100%;height:auto;text-align:center;padding:0;margin:20px auto;}
  438. .iklan-ataspost{margin:10px 0 20px;padding-top:10px;border-top:1px solid #ddd;}
  439. .iklan-bawahpost amp-fx-flying-carpet{width:100%;width:calc(100% + 20px);height:auto;margin:0 -10px;}
  440. .iklan-ataskomen{padding:0;margin:20px 20px 20px 0}
  441.  
  442. /* Disclaimer Box */
  443. .disclaimer_box{margin-right:20px;padding:2px;background:linear-gradient(60deg,#f79533,#f37055,#ef4e7b,#a166ab,#5073b8,#1098ad,#07b39b,#6fba82);border-radius:6px;box-shadow:0 1px 0 rgba(0,0,0,.05),0 3px 3px rgba(0,0,0,.05)}
  444. .disclaimer_box .content{background:#fff;color:#555;padding:8px 12px;font-size:95%;border-radius:4px;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
  445. .disclaimer_box .content p{margin:0;padding:0}
  446.  
  447. /* Follow Button & Comment Button */
  448. .follow-button,.buka-komen,.tutup-komen{font-family:Roboto,sans-serif;background-color:#fff;color:#333;font-size:16px;line-height:1.3em;padding:10px;display:block;min-width:54px;text-align:center;font-weight:500;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-transition:all 218ms;-moz-transition:all 218ms;-o-transition:all 218ms;transition:all 218ms;-webkit-user-select:none;-moz-user-select:none;box-shadow:0 1px 0 rgba(0,0,0,.05),0 3px 3px rgba(0,0,0,.05)}
  449. .follow-button{margin:10px 0 0;}
  450. .buka-komen{margin:20px 20px 20px 0;cursor:pointer;}
  451. .tutup-komen{margin:20px 20px 0 0;cursor:pointer;border-bottom:1px solid #ddd;-webkit-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;}
  452.  
  453. /* Comments */
  454. #komen{margin:0 20px 20px 0;padding:0 20px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.05),0 3px 3px rgba(0,0,0,.05)}
  455. .fb-comments{margin:0 -8px;padding:0;}
  456. #komen.disqus{margin:0 20px 20px 0;padding:0 12px 20px;}
  457.  
  458. /* Scroll To Top */
  459. .scrollToTop{color:#333;font-size:1.4em;box-shadow:0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);width:50px;height:50px;border-radius:100px;border:none;outline:0;background:#fff;z-index:997;bottom:10px;right:10px;position:fixed;opacity:0;visibility:hidden;cursor:pointer}
  460. #marker{position:absolute;top:100px;width:0;height:0}
  461. .scrollToTop svg{width:34px;height:34px;vertical-align:middle;}
  462. #totop:before{content:"";display:block;height:20px;margin-top:-20px;visibility:hidden}
  463.  
  464. .skip-navigation{background-color:#fff;color:#000;display:block;height:0;left:0;line-height:50px;overflow:hidden;padding-top:0;position:fixed;text-align:center;top:0;width:100%;z-index:900}
  465. .mb20{margin-bottom:20px}
  466.  
  467. .mobile-up,amp-youtube#test-off img,amp-instagram#test-off2 amp-img{display:none;visibility:hidden}
  468. amp-lightbox#open-lightbox{z-index:998}
  469. .lightbox-search{background:rgba(255,255,255,.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:998}
  470.  
  471. .spoiler input[type=checkbox]:checked~label:before,.spoiler input[type=checkbox]~label:before{content:"";height:0;width:0;border-style:solid;left:8px;position:absolute}
  472. .spoiler .spoiler_title{display:inline;float:left;margin:3px 10px 0 0;padding:4px 0;font-size:16px;line-height:1}
  473. .spoiler label{cursor:pointer;background:#26272a;margin:0;padding:4px 18px 4px 22px;outline:0;border-radius:3px;color:#efefef;transition:all .3s ease-in-out;display:inline;font-size:12px;font-family:arial,san-serif;line-height:1;position:relative}
  474. .spoiler input[type=checkbox]~label:before{border-width:4px 4px 4px 7px;border-color:transparent transparent transparent #fff;top:7px}
  475. .spoiler input[type=checkbox]:checked~label:before{border-width:7px 4px 4px;border-color:#fff transparent transparent;top:8px}
  476. .spoiler input{position:absolute;left:-999em;opacity:0}
  477. .spoiler .content_box{width:100%;border:1px solid #ddd;background:#efefef;height:auto;padding:6px 10px;margin:8px 0 0;overflow:hidden;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
  478. .spoiler .content_box .content{display:none}
  479. .spoiler .content p{padding:0;margin:0}
  480. .spoiler .content p img{margin:4px 0 0;max-width:100%;height:auto}
  481. .spoiler input[type=checkbox]:checked~.content_box .content{display:block;-webkit-animation:slide-down .3s ease-out;-moz-animation:slide-down .3s ease-out}
  482. @-webkit-keyframes slide-down{0%{opacity:0;-webkit-transform:translateY(-100%)}
  483. 100%{opacity:1;-webkit-transform:translateY(0)}
  484. }
  485. @-moz-keyframes slide-down{0%{opacity:0;-moz-transform:translateY(-100%)}
  486. 100%{opacity:1;-moz-transform:translateY(0)}
  487. }
  488. #close-comment::before,#open-comment::before,:target::before{content:"";display:block;height:60px;margin-top:-60px;visibility:hidden}
  489.  
  490. /* External link icon */
  491. .post-body a[href^="http://"]:after,.post-body 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:%23000' 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;margin-left:3px;vertical-align:-2px;display:inline-block;transition:all 400ms ease-in-out;}
  492. .post-body a[href^="http://"]:hover:after,.post-body a[href^="https://"]:hover:after{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:%23777' 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;}
  493. .post-body a[href^="http://www.myinfo.web.id/"]:after,.post-body a[href^="http://www.myinfo.web.id/"]:hover:after,.post-body a[href^="https://www.myinfo.web.id/"]:after,.post-body a[href^="https://www.myinfo.web.id/"]:hover:after{display:none}
  494.  
  495. /* Responsive */
  496. @media screen and (max-width:1024px){.home_page .content-wrapper,.content-wrapper{padding:0 10px}
  497. .search_box .content-wrapper{padding:10px}
  498. }
  499. @media screen and (max-width:960px){.home_page .post .post-body .snippets{font-size:90%}.home_page .post h2.post-title{font-size:16px}.home_page .post .posts-thumb{margin-right:10px}
  500. }
  501. @media screen and (max-width:800px){.homepage .blog-posts>.post-outer:nth-child(1) .post .posts-thumb,.homepage .blog-posts>.post-outer:nth-child(1) .post .posts-thumb amp-img{height:300px}
  502. }
  503. @media screen and (max-width:768px){.home_page .post h2.post-title{font-size:22px}
  504. .share-box.atas{height:98px;}.post h1.post-title{font-size:30px}
  505. }
  506. @media screen and (max-width:640px){.content-wrapper{padding:0;overflow:hidden}
  507. #main-wrapper,#sidebar-wrapper,.home_page #main-wrapper,aside{width:100%;float:none;margin:0 auto}
  508. .home_page #main-wrapper{padding:0 0 75px}
  509. .homepage .post .posts-thumb,.homepage .blog-posts>.post-outer:nth-child(1) .post .posts-thumb{position:relative;margin-right:0;float:none;width:100%;height:auto;max-height:unset;overflow:hidden;background:#fff;}
  510. .homepage .post .posts-thumb amp-img,.homepage .blog-posts>.post-outer:nth-child(1) .post .posts-thumb amp-img {width:100%;height:auto;max-height:unset;z-index:1}
  511. .homepage .post h2,.homepage .blog-posts>.post-outer:nth-child(1) .post h2{padding:10px;margin:0;line-height:1}
  512. .homepage .post h2 a,.homepage .blog-posts>.post-outer:nth-child(1) .post h2 a{font-size:20px;font-weight:700}
  513. .home_page .content-wrapper{padding:0 10px}
  514. .home_page .post .post-body .snippets{font-size:16px}
  515. .homepage .blog-posts>.post-outer:nth-child(1) .post .posts-thumb .ribbon span{display:none}
  516. .PopularPosts .widget-content ul li{height:auto}
  517. .post{margin:0;padding:0 10px 10px}
  518. .img-width-500.img-left,.img-width-500.img-right,.img-width-600.img-left,.img-width-600.img-right{clear:both;float:none;margin:1em auto;text-align:center}
  519. .post-body amp-youtube,.post-body blockquote,.post-body pre{margin:0 -10px}
  520. .post-body pre{max-width:calc(100% + 20px)}
  521. .post-body .table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar}
  522. .post-body .table-responsive>.table{margin-bottom:0}
  523. .post-body .table-responsive>.table>tbody>tr>td,.post-body .table-responsive>.table>tbody>tr>th,.post-body .table-responsive>.table>tfoot>tr>td,.post-body .table-responsive>.table>tfoot>tr>th,.post-body .table-responsive>.table>thead>tr>td,.post-body .table-responsive>.table>thead>tr>th{white-space:nowrap}
  524. .scrollToTop{bottom:90px}
  525. .desktop-up,amp-sidebar ul,amp-sidebar ul li amp-accordion{display:none;visibility:hidden}
  526. .mobile-up,amp-sidebar[side][open] ul,amp-sidebar[side][open] ul li amp-accordion{display:block;visibility:visible}
  527. .halaman,.iklan-ataskomen,.buka-komen{margin:20px 0}
  528. .disclaimer_box{margin:0 10px}
  529. .tutup-komen{margin:20px 0 0}
  530. .PageList ul li .search-open{margin:0 20px 0 0}
  531. .PageList ul li .search-open svg{width:30px;height:30px}
  532. #header{width:120px;margin:17px 0 0;}
  533. .PageList ul li,.btn-sidebaramp,.head-wrapper,.header-wrapper,.page{height:50px}
  534. .PageList ul li,.page{line-height:50px}
  535. .outer-wrapper{margin:50px 0 0}
  536. .home_page .post-outer,.leaderboard{margin:0 0 10px}
  537. #komen{margin:0 0 20px;padding:0 10px;}
  538. #komen.disqus{margin:0 0 20px;padding:0 2px;}
  539. .buka-komen,.tutup-komen{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}
  540. .search_box .content-wrapper{padding:10px}
  541. }
  542. @media screen and (max-width:414px){
  543. .btn-sidebaramp{top:0;right:15px;background-size:45px 45px;}
  544. .credit-left,.credit-right{float:none;text-align:center;width:100%}
  545. .img-width-100.img-left,.img-width-100.img-right,.img-width-200.img-left,.img-width-200.img-right,.img-width-300.img-left,.img-width-300.img-right,.img-width-400.img-left,.img-width-400.img-right{clear:both;float:none;margin:1em auto;text-align:center;}
  546. }
  547.  
  548. @media print{header,#blog-pager,#comments,#footer-wrapper,#header-wrapper,#related-post,#sidebar-wrapper,.blog-pager,.breadcrumbs,.postmeta,h3.date-header,.PageList,.search_box,.BlogSearch,.main_menu,.leaderboard,.share-box{display:none}
  549. body{background:#fff}
  550. #main-wrapper{width:100%;border:none}
  551. .outer-wrapper{border:none}
  552. .content-wrapper{max-width:100%;height:100%;overflow:hidden;border:none}
  553. .post-body{margin:0;padding:0}
  554. .credit-wrapper{background:#fff;color:#666;margin:0;padding:0}
  555. .credit-wrapper a:link, .credit-wrapper a:visited{background:#fff;color:#666;margin:0;padding:0}
  556. }
  557.  
  558. /* Error Page */
  559. #error-page{background:#efefef;position:fixed ;position:absolute;text-align:center;top:0;right:0;bottom:0;left:0;z-index:99999;width:100%}
  560. #error-page .error-404 {text-align: center; transition: all 0.8s ease 0s;color: #b0130d; font-size:800%; font-weight: 700;margin-bottom:0px;margin-top:0;line-height:1em}
  561. #error-page .large-heading1 {color: #000;font-size:400%;margin-top:1%;margin-bottom:0px;position:relative;font-weight:700}
  562. #error-page .large-heading2 {color: #000;font-size:250%;}
  563. #error-page .light-heading1 {color: #000;font-size:150%;}
  564. #error-page .light-heading2 {color: #000;font-size:100%;line-height:1.8em;}
  565. #error-page #search{text-align:center}
  566. #error-page #search ul{list-style:none}
  567. #error-page #search input{padding:6px 10px;margin:15px 0 0 -1px}
  568. #error-page .light-heading2 span{background:#ddd;border:1px solid #aaa;border-radius:3px;padding:2px 5px}
  569. /*]]>*/
  570. </style>
  571.  
  572. <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>
  573. <script async='async' src='https://cdn.ampproject.org/v0.js'/>
  574. <script async='async' custom-element='amp-analytics' src='https://cdn.ampproject.org/v0/amp-analytics-0.1.js'/>
  575. <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
  576. <script async='async' custom-element='amp-form' src='https://cdn.ampproject.org/v0/amp-form-0.1.js'/>
  577. <script async='async' custom-element='amp-accordion' src='https://cdn.ampproject.org/v0/amp-accordion-0.1.js'/>
  578. <script async='async' custom-element='amp-sidebar' src='https://cdn.ampproject.org/v0/amp-sidebar-0.1.js'/>
  579. <script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>
  580. <script async='async' custom-element='amp-lightbox' src='https://cdn.ampproject.org/v0/amp-lightbox-0.1.js'/>
  581. </b:if>
  582. <b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;error_page&quot;'>
  583. <script async='async' custom-element='amp-position-observer' src='https://cdn.ampproject.org/v0/amp-position-observer-0.1.js'/>
  584. <script async='async' custom-element='amp-animation' src='https://cdn.ampproject.org/v0/amp-animation-0.1.js'/>
  585. </b:if>
  586. <b:if cond='data:blog.pageType == &quot;item&quot;'>
  587. <!--<script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/>-->
  588. <script async='async' custom-element='amp-facebook-comments' src='https://cdn.ampproject.org/v0/amp-facebook-comments-0.1.js'/>
  589. <script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'/>
  590. <script async='async' custom-element='amp-carousel' src='https://cdn.ampproject.org/v0/amp-carousel-0.1.js'/>
  591. <script async='async' custom-element='amp-image-lightbox' src='https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js'/>
  592. <script async='async' custom-element='amp-instagram' src='https://cdn.ampproject.org/v0/amp-instagram-0.1.js'/>
  593. <script async='async' custom-element='amp-twitter' src='https://cdn.ampproject.org/v0/amp-twitter-0.1.js'/>
  594. <script async='async' custom-element='amp-facebook' src='https://cdn.ampproject.org/v0/amp-facebook-0.1.js'/>
  595. <script async='async' custom-element='amp-dailymotion' src='https://cdn.ampproject.org/v0/amp-dailymotion-0.1.js'/>
  596. <script async='async' custom-element='amp-addthis' src='https://cdn.ampproject.org/v0/amp-addthis-0.1.js'/>
  597. <script async='async' custom-element='amp-audio' src='https://cdn.ampproject.org/v0/amp-audio-0.1.js'/>
  598. <script async='async' custom-element='amp-video' src='https://cdn.ampproject.org/v0/amp-video-0.1.js'/>
  599. </b:if>
  600. <b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;true&quot;'>
  601. <script async='async' custom-element='amp-fx-flying-carpet' src='https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js'/>
  602. </b:if>
  603. <b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;true&quot; and not data:blog.searchQuery'>
  604. <script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
  605. <script async='async' custom-element='amp-sticky-ad' src='https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js'/>
  606. <script async='async' custom-element='amp-auto-ads' src='https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js'/>
  607. </b:if>
  608. <b:if cond='data:blog.url == data:blog.homepageUrl'>
  609. <script type='application/ld+json'>
  610. {
  611. &quot;@context&quot;: &quot;http://schema.org&quot;,
  612. &quot;@type&quot;: &quot;WebSite&quot;,
  613. &quot;url&quot;: &quot;https://www.myinfo.web.id/&quot;,
  614. &quot;potentialAction&quot;: {
  615. &quot;@type&quot;: &quot;SearchAction&quot;,
  616. &quot;target&quot;: &quot;https://www.myinfo.web.id/search?q={q}&quot;,
  617. &quot;query-input&quot;: &quot;required name=q&quot;
  618. }
  619. }
  620. </script>
  621. </b:if>
  622. &lt;/head&gt;&lt;!--<head/>--&gt;
  623. <body>
  624. <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
  625. <div id='error-page'>
  626. <div class='large-heading1'>OOPS!</div>
  627. <div class='error-404'>404</div>
  628. <div class='large-heading2'>LAMAN TIDAK DITEMUKAN</div><br/>
  629. <div class='light-heading1'>Mungkin halaman telah dihapus. Kami mohon maaf atas ketidaknyamanan ini.</div><br/>
  630. <div class='light-heading2'>Silahkan Klik <a expr:href='data:blog.homepageUrl' title='Homepage'><span><b>DI SINI</b></span></a> untuk kembali ke homepage <b><data:blog.title/></b>.
  631. </div>
  632. </div>
  633. </b:if>
  634. <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
  635. <b:class cond='data:blog.pageType == &quot;index&quot;' name='home_page'/>
  636. <b:class cond='data:blog.url == data:blog.homepageUrl' name='homepage'/>
  637. <b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;true&quot; and not data:blog.searchQuery'>
  638. <!-- iklan amp-auto-ad, silahkan sesuaikan data-ad-client -->
  639. <amp-auto-ads data-ad-client='ca-pub-xxxxxxxxxxxxxxxx' type='adsense'/>
  640. </b:if>
  641. <a aria-label='Skip' class='skip-navigation' href='#main' role='button' tabindex='0'>
  642. Skip to main content
  643. </a>
  644. <amp-sidebar id='side-bar' layout='nodisplay' side='right'>
  645. <svg aria-label='Close Sidebar' class='amp-close-image' height='20' on='tap:side-bar.close' role='button' tabindex='0' viewBox='0 0 24 24' width='20'>
  646. <path d='M19,3H16.3H7.7H5A2,2 0 0,0 3,5V7.7V16.4V19A2,2 0 0,0 5,21H7.7H16.4H19A2,2 0 0,0 21,19V16.3V7.7V5A2,2 0 0,0 19,3M15.6,17L12,13.4L8.4,17L7,15.6L10.6,12L7,8.4L8.4,7L12,10.6L15.6,7L17,8.4L13.4,12L17,15.6L15.6,17Z' fill='#333'/>
  647. </svg>
  648. <div class='logo_sidebar'>
  649. <amp-img expr:alt='data:blog.title' height='37' layout='responsive' noloading='' src='https://2.bp.blogspot.com/-doSVWhcusdQ/WxZEir8tcCI/AAAAAAAAx-0/q3IwdxHOzYQKeWsOl3JBrggCti3EFDShACLcBGAs/s1600-rw/kompi-flexible-2.png' width='300'><amp-img expr:alt='data:blog.title' fallback='' height='37' layout='responsive' noloading='' src='https://2.bp.blogspot.com/-doSVWhcusdQ/WxZEir8tcCI/AAAAAAAAx-0/q3IwdxHOzYQKeWsOl3JBrggCti3EFDShACLcBGAs/s1600/kompi-flexible-2.png' width='300'/></amp-img>
  650. </div>
  651. <nav>
  652. <ul>
  653. <li class='mobile-up'><a href='#' title='About'>About</a></li>
  654. <li class='mobile-up'><a href='#' title='Contact'>Contact</a></li>
  655. <li class='mobile-up'><a href='#' title='Sitemap'>Sitemap</a></li>
  656. <li class='mobile-up'><a href='#' title='Privacy'>Privacy</a></li>
  657. <li class='mobile-up'><a href='#' title='Disclaimer'>Disclaimer</a></li>
  658. <li><a href='#' title='Review'>Review</a></li>
  659. <li><a href='#' title='Pasang Iklan'>Pasang Iklan</a></li>
  660. <li><a href='https://cdn.rawgit.com/KompiAjaib/list-emoji/master/list_emojis.html' rel='nofollow noopener' target='_blank' title='Twemoji List'>Twemoji List</a></li>
  661. <!-- <li class='drop'><amp-accordion>
  662. <section>
  663. <h6>
  664. <span class='show-more'>Otomotif</span>
  665. <span class='show-less'>Otomotif</span>
  666. <svg viewBox='0 0 24 24'><path d='M7,10L12,15L17,10H7Z' fill='#000000'/></svg>
  667. </h6>
  668. <ul id='dropdown2'>
  669. <li><a href='/search/label/Otomotif?max-results=16' rel='nofollow' title='Berita Otomotif'>Berita Otomotif</a></li>
  670. <li><a href='/search/label/Honda?max-results=16' rel='nofollow' title='Honda'>Honda</a></li>
  671. <li><a href='/search/label/Yamaha?max-results=16' rel='nofollow' title='Yamaha'>Yamaha</a></li>
  672. <li><a href='/search/label/Suzuki?max-results=16' rel='nofollow' title='Suzuki'>Suzuki</a></li>
  673. </ul>
  674. </section>
  675. </amp-accordion>
  676. </li> -->
  677. </ul>
  678. </nav>
  679. <h3 class='follow_sidebar'>follow us</h3>
  680. <ul class='ampstart-social-follow list-reset flex justify-around items-center img-center flex-wrap m0 mb4'>
  681. <li>
  682. <a aria-label='Link to AMP HTML Facebook' class='inline-block p1' href='https://www.facebook.com/xxxxxxxxxxxx/' rel='nofollow noopener' target='_blank'><svg height='23.6' viewbox='0 0 56 55' width='24' xmlns='http://www.w3.org/2000/svg'><title>Facebook</title><path class='ampstart-icon ampstart-icon-fb' d='M47.5 43c0 1.2-.9 2.1-2.1 2.1h-10V30h5.1l.8-5.9h-5.9v-3.7c0-1.7.5-2.9 3-2.9h3.1v-5.3c-.6 0-2.4-.2-4.6-.2-4.5 0-7.5 2.7-7.5 7.8v4.3h-5.1V30h5.1v15.1H10.7c-1.2 0-2.2-.9-2.2-2.1V8.3c0-1.2 1-2.2 2.2-2.2h34.7c1.2 0 2.1 1 2.1 2.2V43'/></svg></a>
  683. </li>
  684. <li>
  685. <a aria-label='Link to AMP HTML Instagram' class='inline-block p1' href='https://www.instagram.com/xxxxxxxxxxxx/' rel='nofollow noopener' target='_blank'><svg height='24' viewbox='0 0 54 54' width='24' xmlns='http://www.w3.org/2000/svg'><title>instagram</title><path class='ampstart-icon ampstart-icon-instagram' d='M27.2 6.1c-5.1 0-5.8 0-7.8.1s-3.4.4-4.6.9c-1.2.5-2.3 1.1-3.3 2.2-1.1 1-1.7 2.1-2.2 3.3-.5 1.2-.8 2.6-.9 4.6-.1 2-.1 2.7-.1 7.8s0 5.8.1 7.8.4 3.4.9 4.6c.5 1.2 1.1 2.3 2.2 3.3 1 1.1 2.1 1.7 3.3 2.2 1.2.5 2.6.8 4.6.9 2 .1 2.7.1 7.8.1s5.8 0 7.8-.1 3.4-.4 4.6-.9c1.2-.5 2.3-1.1 3.3-2.2 1.1-1 1.7-2.1 2.2-3.3.5-1.2.8-2.6.9-4.6.1-2 .1-2.7.1-7.8s0-5.8-.1-7.8-.4-3.4-.9-4.6c-.5-1.2-1.1-2.3-2.2-3.3-1-1.1-2.1-1.7-3.3-2.2-1.2-.5-2.6-.8-4.6-.9-2-.1-2.7-.1-7.8-.1zm0 3.4c5 0 5.6 0 7.6.1 1.9.1 2.9.4 3.5.7.9.3 1.6.7 2.2 1.4.7.6 1.1 1.3 1.4 2.2.3.6.6 1.6.7 3.5.1 2 .1 2.6.1 7.6s0 5.6-.1 7.6c-.1 1.9-.4 2.9-.7 3.5-.3.9-.7 1.6-1.4 2.2-.7.7-1.3 1.1-2.2 1.4-.6.3-1.7.6-3.5.7-2 .1-2.6.1-7.6.1-5.1 0-5.7 0-7.7-.1-1.8-.1-2.9-.4-3.5-.7-.9-.3-1.5-.7-2.2-1.4-.7-.7-1.1-1.3-1.4-2.2-.3-.6-.6-1.7-.7-3.5 0-2-.1-2.6-.1-7.6 0-5.1.1-5.7.1-7.7.1-1.8.4-2.8.7-3.5.3-.9.7-1.5 1.4-2.2.7-.6 1.3-1.1 2.2-1.4.6-.3 1.6-.6 3.5-.7h7.7zm0 5.8c-5.4 0-9.7 4.3-9.7 9.7 0 5.4 4.3 9.7 9.7 9.7 5.4 0 9.7-4.3 9.7-9.7 0-5.4-4.3-9.7-9.7-9.7zm0 16c-3.5 0-6.3-2.8-6.3-6.3s2.8-6.3 6.3-6.3 6.3 2.8 6.3 6.3-2.8 6.3-6.3 6.3zm12.4-16.4c0 1.3-1.1 2.3-2.3 2.3-1.3 0-2.3-1-2.3-2.3 0-1.2 1-2.3 2.3-2.3 1.2 0 2.3 1.1 2.3 2.3z'/></svg></a>
  686. </li>
  687. <li>
  688. <a aria-label='Link to AMP HTML Twitter' class='inline-block p1' href='https://twitter.com/xxxxxxxxxxxx' rel='nofollow noopener' target='_blank'><svg height='22.2' viewbox='0 0 53 49' width='24' xmlns='http://www.w3.org/2000/svg'><title>Twitter</title><path class='ampstart-icon ampstart-icon-twitter' d='M45 6.9c-1.6 1-3.3 1.6-5.2 2-1.5-1.6-3.6-2.6-5.9-2.6-4.5 0-8.2 3.7-8.2 8.3 0 .6.1 1.3.2 1.9-6.8-.4-12.8-3.7-16.8-8.7C8.4 9 8 10.5 8 12c0 2.8 1.4 5.4 3.6 6.9-1.3-.1-2.6-.5-3.7-1.1v.1c0 4 2.8 7.4 6.6 8.1-.7.2-1.5.3-2.2.3-.5 0-1 0-1.5-.1 1 3.3 4 5.7 7.6 5.7-2.8 2.2-6.3 3.6-10.2 3.6-.6 0-1.3-.1-1.9-.1 3.6 2.3 7.9 3.7 12.5 3.7 15.1 0 23.3-12.6 23.3-23.6 0-.3 0-.7-.1-1 1.6-1.2 3-2.7 4.1-4.3-1.4.6-3 1.1-4.7 1.3 1.7-1 3-2.7 3.6-4.6'/></svg></a>
  689. </li>
  690. </ul>
  691. </amp-sidebar>
  692. <div id='totop'/>
  693. <div class='head-wrapper'>
  694. <div class='content-wrapper'>
  695. <button aria-label='Open Sidebar' class='btn-sidebaramp' on='tap:side-bar.toggle'/>
  696. <header class='header-wrapper'>
  697. <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  698. <b:widget id='Header1' locked='true' title='Kompi Flexible AMP (Header)' type='Header' version='1'>
  699. <b:widget-settings>
  700. <b:widget-setting name='displayUrl'/>
  701. <b:widget-setting name='displayHeight'>0</b:widget-setting>
  702. <b:widget-setting name='sectionWidth'>-1</b:widget-setting>
  703. <b:widget-setting name='useImage'>false</b:widget-setting>
  704. <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
  705. <b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
  706. <b:widget-setting name='displayWidth'>0</b:widget-setting>
  707. </b:widget-settings>
  708. <b:includable id='main'>
  709. <div id='header-inner'>
  710. <div class='titlewrapper'>
  711. <b:if cond='data:blog.pageType != &quot;item&quot;'>
  712. <h1 class='title'>
  713. <b:include name='title'/>
  714. </h1>
  715. <b:else/>
  716. <p class='title'>
  717. <b:include name='title'/>
  718. </p>
  719. </b:if>
  720. </div><b:include name='description'/>
  721. </div>
  722. </b:includable>
  723. <b:includable id='description'>
  724. <div class='descriptionwrapper'>
  725. <p class='description'><span><data:description/></span></p>
  726. </div>
  727. </b:includable>
  728. <b:includable id='title'>
  729. <a expr:href='data:blog.homepageUrl' expr:title='data:title'><amp-img expr:alt='data:title' expr:title='data:title' height='37' layout='responsive' noloading='' src='https://2.bp.blogspot.com/-doSVWhcusdQ/WxZEir8tcCI/AAAAAAAAx-0/q3IwdxHOzYQKeWsOl3JBrggCti3EFDShACLcBGAs/s1600-rw/kompi-flexible-2.png' width='300'><amp-img expr:alt='data:title' expr:title='data:title' fallback='' height='37' layout='responsive' noloading='' src='https://2.bp.blogspot.com/-doSVWhcusdQ/WxZEir8tcCI/AAAAAAAAx-0/q3IwdxHOzYQKeWsOl3JBrggCti3EFDShACLcBGAs/s1600/kompi-flexible-2.png' width='300'/></amp-img><span><data:title/></span></a>
  730. </b:includable>
  731. </b:widget>
  732. </b:section>
  733. </header>
  734. <b:section class='page' id='page' maxwidgets='1' showaddelement='no'>
  735. <b:widget id='PageList1' locked='true' title='Laman' type='PageList' version='1'>
  736. <b:widget-settings>
  737. <b:widget-setting name='pageListJson'><![CDATA[{'home': {'href': 'https://kompiflexibleamp.blogspot.com/', 'title': 'Home', 'position': 0}, '2676092630683912769': {'href': 'https://kompiflexibleamp.blogspot.com/p/about-kompi-dark.html', 'title': 'About', 'position': 1}, '520839599697352945': {'href': 'https://kompiflexibleamp.blogspot.com/p/contact.html', 'title': 'Contact', 'position': 2}, '1310654927597135694': {'href': 'https://kompiflexibleamp.blogspot.com/p/sitemap.html', 'title': 'Sitemap', 'position': 3}}]]></b:widget-setting>
  738. <b:widget-setting name='homeTitle'>Home</b:widget-setting>
  739. </b:widget-settings>
  740. <b:includable id='main'>
  741. <div class='widget-content'>
  742. <ul>
  743. <b:loop values='data:links' var='link'>
  744. <b:if cond='data:link.isCurrentPage'>
  745. <li class='selected desktop-up'><a expr:href='data:link.href' expr:title='data:link.title'><data:link.title/></a></li>
  746. <b:else/>
  747. <li class='desktop-up'><a expr:href='data:link.href' expr:title='data:link.title'><data:link.title/></a></li>
  748. </b:if>
  749. </b:loop>
  750. <li><span aria-label='Open Searchbox' class='search-open' id='search-open' on='tap:lightbox-search.toggleVisibility,open-lightbox,search.show' role='button' tabindex='0'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z' fill='#333'/></svg></span></li>
  751. </ul>
  752. </div>
  753. </b:includable>
  754. </b:widget>
  755. </b:section>
  756. <div class='clear'/>
  757. </div>
  758. </div>
  759. <div hidden='' id='search'>
  760. <amp-lightbox id='open-lightbox' layout='nodisplay'>
  761. <div aria-label='Close Searchbox' class='lightbox-search' hidden='' id='lightbox-search' on='tap:lightbox-search.toggleVisibility,open-lightbox.close,open-lightbox,search.hide' role='button' tabindex='0'/>
  762. <span aria-label='Open Searchbox' class='search-close' on='tap:lightbox-search.toggleVisibility,open-lightbox.close,open-lightbox,search.hide' role='button' tabindex='0'><svg height='34' viewBox='0 0 24 24' width='34'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='#333'/></svg></span>
  763. </amp-lightbox>
  764. <b:section class='search_box' id='search_box' maxwidgets='1' showaddelement='no'>
  765. <b:widget id='BlogSearch1' locked='true' title='Search This Blog' type='BlogSearch' version='1'>
  766. <b:includable id='main'>
  767. <div class='content-wrapper'>
  768. <!-- only display title if it's non-empty -->
  769. <b:if cond='data:title != &quot;&quot;'>
  770. <h2 class='title'><data:title/></h2>
  771. </b:if>
  772. <div class='widget-content'>
  773. <div expr:id='data:widget.instanceId + &quot;_form&quot;'>
  774. <form class='gsc-search-box' expr:action='data:blog.searchUrl'>
  775. <!-- <form action='https://cdn.rawgit.com/KompiAjaib/kompi-html/master/search-bloggue.html' class='gsc-search-box'> -->
  776. <b:attr cond='not data:view.isPreview' name='target' value='_top'/>
  777. <table cellpadding='0' cellspacing='0' class='gsc-search-box'>
  778. <tbody>
  779. <tr>
  780. <td class='gsc-input'>
  781. <!-- <input name='cx' type='hidden' value='partner-pub-xxxxxxxxxxxx:xxxxxxxxxxxx'/>
  782. <input name='cof' type='hidden' value='FORID:10'/>
  783. <input name='ie' type='hidden' value='UTF-8'/> -->
  784. <input autocomplete='off' class='gsc-input' expr:value='data:view.isSearch ? data:view.search.query.escaped : &quot;&quot;' name='q' placeholder='Search' required='' size='10' title='search' type='text'/>
  785. <input name='max-results' type='hidden' value='16'/>
  786. </td>
  787. <td class='gsc-search-button'>
  788. <input class='gsc-search-button' expr:value='data:messages.search' title='search' type='submit'/>
  789. </td>
  790. </tr>
  791. </tbody>
  792. </table>
  793. </form>
  794. </div>
  795. </div>
  796. </div>
  797. </b:includable>
  798. </b:widget>
  799. </b:section>
  800. <div class='clear'/>
  801. </div>
  802. <div class='clear'/>
  803. <div class='content-wrapper'>
  804. <div class='outer-wrapper'>
  805. <div class='leaderboard'>
  806. <b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;error_page&quot; and not data:blog.searchQuery'>
  807. <!-- iklan di bawah header, silahkan sesuaikan data
RAW Paste Data