API tools faq
paste
DrsMalware

AMP

DrsMalware
Nov 30th, 2016
353
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
XML 111.23 KB | None | 0 0
raw download clone embed print report
  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE html>
  3. <HTML amp='amp'>
  4. <head>
  5. <meta charset='utf-8'/>
  6. <meta content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui' name='viewport'/>
  7.  
  8. <b:if cond='data:blog.pageType == &quot;index&quot;'>
  9.     <title><data:blog.pageTitle/></title>
  10. <b:else/>
  11.     <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
  12.         <title>404: Page Not Found | <data:blog.title/></title>
  13.     <b:else/>
  14.         <title><data:blog.pageName/></title>
  15.     </b:if>
  16. </b:if>
  17. <meta content='blogger' name='generator'/>
  18. <link expr:href='data:blog.url' rel='amphtml'/>
  19. <link expr:href='data:blog.url' rel='canonical'/>
  20. <link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
  21. <link href='https://4.bp.blogspot.com/-K4gIDbjlKLY/WAhyn72yY3I/AAAAAAAAHzI/bzEy3MisWr4tYJlZKGgyDM_ISSEEwzo9wCK4B/s192/amp-icon-new.png' rel='apple-touch-icon'/>
  22. <link href='https://4.bp.blogspot.com/-K4gIDbjlKLY/WAhyn72yY3I/AAAAAAAAHzI/bzEy3MisWr4tYJlZKGgyDM_ISSEEwzo9wCK4B/s76/amp-icon-new.png' rel='apple-touch-icon' sizes='76x76'/>
  23. <link href='https://4.bp.blogspot.com/-K4gIDbjlKLY/WAhyn72yY3I/AAAAAAAAHzI/bzEy3MisWr4tYJlZKGgyDM_ISSEEwzo9wCK4B/s120/amp-icon-new.png' rel='apple-touch-icon' sizes='120x120'/>
  24. <link href='https://4.bp.blogspot.com/-K4gIDbjlKLY/WAhyn72yY3I/AAAAAAAAHzI/bzEy3MisWr4tYJlZKGgyDM_ISSEEwzo9wCK4B/s152/amp-icon-new.png' rel='apple-touch-icon' sizes='152x152'/>
  25. <link href='https://4.bp.blogspot.com/-K4gIDbjlKLY/WAhyn72yY3I/AAAAAAAAHzI/bzEy3MisWr4tYJlZKGgyDM_ISSEEwzo9wCK4B/s180/amp-icon-new.png' rel='apple-touch-icon' sizes='180x180'/>
  26. <link href='https://4.bp.blogspot.com/-K4gIDbjlKLY/WAhyn72yY3I/AAAAAAAAHzI/bzEy3MisWr4tYJlZKGgyDM_ISSEEwzo9wCK4B/s128/amp-icon-new.png' rel='icon' sizes='128x128'/>
  27. <link href='https://4.bp.blogspot.com/-K4gIDbjlKLY/WAhyn72yY3I/AAAAAAAAHzI/bzEy3MisWr4tYJlZKGgyDM_ISSEEwzo9wCK4B/s192/amp-icon-new.png' rel='icon' sizes='192x192'/>
  28. <meta content='https://4.bp.blogspot.com/-K4gIDbjlKLY/WAhyn72yY3I/AAAAAAAAHzI/bzEy3MisWr4tYJlZKGgyDM_ISSEEwzo9wCK4B/s180/amp-icon-new.png' name='msapplication-TileImage'/>
  29.  
  30. <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'/>
  31. <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'/>
  32. <link expr:href='&quot;http://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'/>
  33. <link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
  34. <link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
  35. <link href='https://plus.google.com/113292956133224747560' rel='me'/>
  36. <link href='https://plus.google.com/113292956133224747560' rel='publisher'/>
  37. <!--[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]-->
  38.  
  39. <b:if cond='data:blog.pageType == &quot;item&quot;'>
  40. <b:if cond='data:blog.postImageThumbnailUrl'>
  41. <link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
  42. </b:if>
  43. </b:if>
  44.  
  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 != &quot;&quot;'>
  50. <meta expr:content='data:blog.metaDescription' name='description' property='og:description'/>
  51. <meta expr:content='data:blog.pageName + &quot;, android, apk, gadget&quot;' name='keywords'/>
  52. <b:else/>
  53. <meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description' property='og:description'/>
  54. </b:if>
  55. </b:if>
  56.  
  57. <meta expr:content='data:blog.title' property='og:site_name'/>
  58.  
  59. <b:if cond='data:blog.url == data:blog.homepageUrl'>
  60. <meta expr:content='data:blog.metaDescription' name='description'/>
  61. <meta expr:content='data:blog.title' property='og:title'/>
  62. <meta content='website' property='og:type'/>
  63. <b:if cond='data:blog.metaDescription'>
  64. <meta expr:content='data:blog.metaDescription' property='og:description'/>
  65. <b:else/>
  66. <meta expr:content='&quot;Silahkan kunjungi &quot; + data:blog.pageTitle + &quot;Untuk membaca postingan-postingan menarik.&quot;' property='og:description'/>
  67. </b:if>
  68. </b:if>
  69. <b:if cond='data:blog.postImageUrl'>
  70. <meta expr:content='data:blog.postImageUrl' property='og:image'/>
  71. <b:else/>
  72. <b:if cond='data:blog.postImageThumbnailUrl'>
  73. <meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
  74. <b:else/>
  75. <meta content='https://4.bp.blogspot.com/-iWBMw0dwhQk/WAQpURA0MnI/AAAAAAAAHvc/VQ4aISNqoSgHC7BWAJyjpn0oFjFOsApCACK4B/s1600/amphtml-thumbnail2.jpg' property='og:image'/>
  76. </b:if>
  77. </b:if>
  78. <meta content='RPeddKqdLfKEV0gUDmitmq5hRs6L762HBSCsJOpS6Xo' name='google-site-verification'/>
  79. <meta content='100002355346619' property='fb:admins'/>
  80. <meta content='100002355346619' property='fb:profile_id'/>
  81. <b:if cond='data:blog.pageType == &quot;item&quot;'>
  82. <meta content='https://www.facebook.com/kangismet2' property='article:author'/>
  83. </b:if>
  84. <meta expr:content='data:blog.title' name='twitter:site'/>
  85. <meta content='summary_large_image' name='twitter:card'/>
  86. <meta content='@DroidPluss' name='twitter:creator'/>
  87.  
  88.  
  89. &lt;!-- <b:skin><![CDATA[
  90. section,nav,article,aside,hgroup,header,footer{display:block}
  91. #outer-wrapper {width:100%}
  92. #content-wrapper {max-width:768px;display:block;}
  93. ul, ol {list-style:none}
  94. /* CSS Simple Pre Code */
  95. pre {
  96.    background: #fff;
  97.    white-space: pre;
  98.    word-wrap: break-word;
  99.    overflow: auto;
  100. }
  101.  
  102. pre.code {
  103.    margin: 20px 25px;
  104.    border: 1px solid #d9d9d9;
  105.    border-radius: 2px;
  106.    position: relative;
  107.    box-shadow: 0 1px 1px rgba(0,0,0,.08);
  108. }
  109.  
  110. pre.code label {
  111.    font-family: sans-serif;
  112.    font-weight: normal;
  113.    font-size: 13px;
  114.    color: #444;
  115.    position: absolute;
  116.    left: 1px;
  117.    top: 16px;
  118.    text-align: center;
  119.    width: 60px;
  120.    -webkit-user-select: none;
  121.    -moz-user-select: none;
  122.    -ms-user-select: none;
  123.    pointer-events: none;
  124. }
  125.  
  126. pre.code code {
  127.    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
  128.    display: block;
  129.    margin: 0 0 0 60px;
  130.    padding: 15px 16px 14px;
  131.    border-left: 1px solid #d9d9d9;
  132.    overflow-x: auto;
  133.    font-size: 13px;
  134.    line-height: 19px;
  135.    color: #444;
  136. }
  137.  
  138. pre::after {
  139.    content: "double click to selection";
  140.    padding: 0;
  141.    width: auto;
  142.    height: auto;
  143.    position: absolute;
  144.    right: 18px;
  145.    top: 14px;
  146.    font-size: 12px;
  147.    color: #aaa;
  148.    line-height: 20px;
  149.    overflow: hidden;
  150.    -webkit-backface-visibility: hidden;
  151.    transition: all 0.3s ease;
  152. }
  153.  
  154. pre:hover::after {
  155.    opacity: 0;
  156.    visibility: visible;
  157. }
  158.  
  159. pre.code-css code {
  160.    color: #0288d1;
  161. }
  162.  
  163. pre.code-html code {
  164.    color: #558b2f;
  165. }
  166.  
  167. pre.code-javascript code {
  168.    color: #f57c00;
  169. }
  170.  
  171. pre.code-jquery code {
  172.    color: #78909c;
  173. }
  174. /* Germyload Blok Catatan */
  175. .germyload-additem,.germyload-cari,.germyload-catatan,.germyload-contact,.germyload-gear,.germyload-home,.germyload-info,.germyload-komentar,.germyload-mark,.germyload-tips,.germyload-trash,.germyload-warning,.germyload-winner{line-height:22px;min-height:38px;padding:10px 12px 12px 68px;margin:5px 0}
  176. .germyload-additem{background:#ABB7B7 url(https://3.bp.blogspot.com/-hNSaoXrdnbI/WCC-Bq4XLlI/AAAAAAAAAZM/a9QYLr48410WMQnzz69B29cdDS2v3XL_ACPcB/s1600/germyload-additem.png) no-repeat 12px 8px;color:#222}
  177. .germyload-cari{background:#19B5FE url(https://4.bp.blogspot.com/-mQxib5ei3jE/WCC-BsIUYlI/AAAAAAAAAZI/rkGBMWnKgPslyvHFvFL5DXUF12Pc6EX2ACPcB/s1600/germyload-cari.png) no-repeat 12px 8px;color:#222}
  178. .germyload-catatan{background:#F4D03F url(https://4.bp.blogspot.com/-kdYaHNKP-h8/WCC-Bjiud3I/AAAAAAAAAZE/NVVom4M5G5oOnoNqGzL0O3xUFkHYSAOoQCPcB/s1600/germyload-catatan.png) no-repeat 12px 8px;color:#222}
  179. .germyload-contact{background:#52B3D9 url(https://3.bp.blogspot.com/-Z8GGD_D152A/WCC-CKPfZLI/AAAAAAAAAZU/itgCLsK1yIMlg59boAhlH7Wag6ATiePjACPcB/s1600/germyload-contact.png) no-repeat 12px 8px;color:#222}
  180. .germyload-gear{background:#2ECC71 url(https://2.bp.blogspot.com/-RAMMSyhuRZQ/WCC-CFU2dII/AAAAAAAAAZQ/OtWDkzazx1o2tp1-Jjs79G8rWweLJHSmgCPcB/s1600/germyload-gear.png) no-repeat 12px 8px;color:#222}
  181. .germyload-home{background:#2ECC71 url(https://4.bp.blogspot.com/-RLmwcVrUdgU/WCC-CWJZ1lI/AAAAAAAAAZY/mli8NP9StHcto8Dif6r2Dg-KJuSldobeACPcB/s1600/germyload-home.png) no-repeat 12px 8px;color:#222}
  182. .germyload-info{background:#DADFE1 url(https://2.bp.blogspot.com/-s7ogPMNgq_I/WCC-C7VwjbI/AAAAAAAAAZc/m7tAFCtU9DoOJmFrsStR4rtiHyzbFUDfwCPcB/s1600/germyload-info.png) no-repeat 12px 8px;color:#222}
  183. .germyload-komentar{background:#1BA39C url(https://4.bp.blogspot.com/-L2xpOZbslU8/WCC-C4pkkjI/AAAAAAAAAZg/9ltF7iM-JowcLlksG9U-xUNaNvTb0j7VwCPcB/s1600/germyload-komentar.png) no-repeat 12px 8px;color:#222}
  184. .germyload-mark{background:#65C6BB url(https://2.bp.blogspot.com/-jiLfmjFUfL8/WCC-C2ybMrI/AAAAAAAAAZk/TzCZaAhkceQo4xayLqEjQOK1LwJL8497QCPcB/s1600/germyload-mark.png) no-repeat 12px 8px;color:#222}
  185. .germyload-tips{background:#7CADDE url(https://2.bp.blogspot.com/-Xiy9PaDfnqg/WCC-DaGsbQI/AAAAAAAAAZo/IVbgq-fpvBc7Vg0gmzqmbepet5KUYHonACPcB/s1600/germyload-tips.png) no-repeat 12px 8px;color:#fff}
  186. .germyload-trash{background:#5C97BF url(https://2.bp.blogspot.com/-Fctx5pIYxek/WCC-DjSsQYI/AAAAAAAAAZs/IJbQORmBgZAy4CM_h9l20pk0Vn3VlR3pQCPcB/s1600/germyload-trash.png) no-repeat 12px 8px;color:#222}
  187. .germyload-warning{background:#F7CA18 url(https://3.bp.blogspot.com/-EOBS_mjWQOo/WCC-DvZ6psI/AAAAAAAAAZw/eXVso7EDrfQn2DNjsFrksJwtHcBv6J2XACPcB/s1600/germyload-warning.png) no-repeat 12px 8px;color:#fff}
  188. .germyload-winner{background:#52B3D9 url(https://1.bp.blogspot.com/-iDPMCCsPTjs/WCC-D5oR-yI/AAAAAAAAAZ0/_tFR8Y7vJJ4k4hbwWRFUa180KeZbBYZkgCPcB/s1600/germyload-winner.png) no-repeat 12px 8px;color:#222}
  189. /* Youtube Responsive */
  190. .videoyoutube{text-align:center;margin:auto;width:100%;}
  191. .video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
  192. .video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
  193. /* CSS Button Style 2 by www.arlinadzgn.com */
  194. .button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
  195. .button2 ul{margin:0;padding:0}
  196. .button2 li{display:inline;margin:5px;padding:0;list-style:none}
  197. .button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden}
  198. .button2 li a.download{background:#3498db}
  199. .button2 li a.demo:hover,.button2 li a.download:hover{background:#666}
  200. .button2 li a.demo:active,.button2 li a.download:active{cursor:pointer}
  201. .button2 li a.demo:after,.button2 li a.download:after{content:'\F054';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s}
  202. .button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
  203. @-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
  204. @keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}
  205. ]]></b:skin>
  206.  
  207. <b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>
  208. <style amp-custom='amp-custom'>
  209. @font-face {
  210. font-family: &#39;Roboto&#39;;
  211. font-style: normal;
  212. font-weight: 400;
  213. src: local(&#39;Roboto&#39;), local(&#39;Roboto-Regular&#39;), url(https://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format(&#39;woff2&#39;), url(https://fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff) format(&#39;woff&#39;), url(https://fonts.gstatic.com/s/roboto/v15/QHD8zigcbDB8aPfIoaupKOvvDin1pK8aKteLpeZ5c0A.ttf) format(&#39;truetype&#39;);
  214. }
  215. @font-face {
  216. font-family: &#39;Roboto&#39;;
  217. font-style: normal;
  218. font-weight: 700;
  219. src: local(&#39;Roboto Bold&#39;), local(&#39;Roboto-Bold&#39;), url(https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format(&#39;woff2&#39;), url(https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format(&#39;woff&#39;), url(https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOCZ2oysoEQEeKwjgmXLRnTc.ttf) format(&#39;truetype&#39;);
  220. }
  221. @font-face {
  222. font-family: &#39;Roboto&#39;;
  223. font-style: italic;
  224. font-weight: 400;
  225. src: local(&#39;Roboto Italic&#39;), local(&#39;Roboto-Italic&#39;), url(https://fonts.gstatic.com/s/roboto/v15/vPcynSL0qHq_6dX7lKVByfesZW2xOQ-xsNqO47m55DA.woff2) format(&#39;woff2&#39;), url(https://fonts.gstatic.com/s/roboto/v15/1pO9eUAp8pSF8VnRTP3xnvesZW2xOQ-xsNqO47m55DA.woff) format(&#39;woff&#39;), url(https://fonts.gstatic.com/s/roboto/v15/W4wDsBUluyw0tK3tykhXEXYhjbSpvc47ee6xR_80Hnw.ttf) format(&#39;truetype&#39;);
  226. }
  227. @font-face {
  228. font-family: &#39;Roboto Slab&#39;;
  229. font-style: normal;
  230. font-weight: 400;
  231. src: local(&#39;Roboto Slab Regular&#39;), local(&#39;RobotoSlab-Regular&#39;), url(https://fonts.gstatic.com/s/robotoslab/v6/y7lebkjgREBJK96VQi37Zo4P5ICox8Kq3LLUNMylGO4.woff2) format(&#39;woff2&#39;), url(https://fonts.gstatic.com/s/robotoslab/v6/y7lebkjgREBJK96VQi37ZobN6UDyHWBl620a-IRfuBk.woff) format(&#39;woff&#39;), url(https://fonts.gstatic.com/s/robotoslab/v6/y7lebkjgREBJK96VQi37ZiwlidHJgAgmTjOEEzwu1L8.ttf) format(&#39;truetype&#39;);
  232. }
  233. @font-face {
  234. font-family: &#39;Roboto Slab&#39;;
  235. font-style: normal;
  236. font-weight: 700;
  237. src: local(&#39;Roboto Slab Bold&#39;), local(&#39;RobotoSlab-Bold&#39;), url(https://fonts.gstatic.com/s/robotoslab/v6/dazS1PrQQuCxC3iOAJFEJYlIZu-HDpmDIZMigmsroc4.woff2) format(&#39;woff2&#39;), url(https://fonts.gstatic.com/s/robotoslab/v6/dazS1PrQQuCxC3iOAJFEJTqR_3kx9_hJXbbyU8S6IN0.woff) format(&#39;woff&#39;), url(https://fonts.gstatic.com/s/robotoslab/v6/dazS1PrQQuCxC3iOAJFEJTdGNerWpg2Hn6A-BxWgZ_I.ttf) format(&#39;truetype&#39;);
  238. }
  239. /* fallback */
  240. @font-face {
  241.   font-family: &#39;Material Icons&#39;;
  242.   font-style: normal;
  243.   font-weight: 400;
  244.   src: local(&#39;Material Icons&#39;), local(&#39;MaterialIcons-Regular&#39;), url(https://fonts.gstatic.com/s/materialicons/v18/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format(&#39;woff2&#39;);
  245. }
  246.  
  247. .material-icons {
  248.   font-family: &#39;Material Icons&#39;;
  249.   font-weight: normal;
  250.   font-style: normal;
  251.   font-size: 24px;
  252.   line-height: 1;
  253.   letter-spacing: normal;
  254.   text-transform: none;
  255.   display: inline-block;
  256.   white-space: nowrap;
  257.   word-wrap: normal;
  258.   direction: ltr;
  259.   -webkit-font-feature-settings: &#39;liga&#39;;
  260.   -webkit-font-smoothing: antialiased;
  261. }
  262.  
  263. body {
  264.   background:#f9f9f9;
  265.   margin:0;
  266.   padding:0;
  267.   color:#333;
  268.   font-size:15px;
  269.   font-family:Roboto,Arial,Sans-serif;
  270.   border-top:300px solid #ebebeb;
  271. }
  272.  
  273. a:link {
  274.   color:#0e72b5;
  275.   text-decoration:none;
  276. }
  277. a:visited {
  278.   color:#0e72b5;
  279.   text-decoration:none;
  280. }
  281. a:hover {
  282.   color:#333;
  283.   text-decoration:underline;
  284. }
  285. a img {
  286.   border-width:0;
  287. }
  288.  
  289. /* Header */
  290.  
  291. #header-wrapper {
  292.   width:100%;
  293.   padding:0;
  294.   color:#212121;
  295.   font-weight:400;
  296.   background-color:#fff;
  297.   position:fixed;
  298.   top:0;
  299.   left:0;
  300.   width:100%;
  301.   height:60px;
  302.   box-shadow: 2px 1px 1px rgba(0,0,0,.15);
  303.   z-index:999;
  304. }
  305. #header {
  306.   max-width:768px;
  307.   color:#212121;
  308.   text-align:left;
  309.   margin:0 auto;
  310. }
  311.  
  312. #header h1 {
  313.   margin:0;
  314.   padding:0;
  315.   font-size:140%;
  316.   float:left;
  317.   color:#212121;
  318.   line-height:60px;
  319. }
  320.  
  321. #header a {
  322.   color:#212121;
  323.   text-decoration:none;
  324.   -webkit-transition:all .4s ease;
  325.   transition:all .4s ease;
  326. }
  327.  
  328. #header a:hover {
  329.   color:#0379c4;
  330. }
  331.  
  332. #header .description {
  333.   margin:0 0 0 20px;
  334.   padding:0 0 15px;
  335.   text-transform:capitalize;
  336.   line-height:60px;
  337.   float:left;
  338. }
  339.  
  340. #header amp-img {
  341.   margin-top:-5px;
  342.   margin-right:5px;
  343.   height:auto;
  344.   width:auto;
  345.   vertical-align:middle;
  346. }
  347.  
  348. #header-wrapper h5{background:none;border:none}
  349. .acc-header {max-width:320px;position:absolute;top:0;right:-2px;z-index:900;}
  350. .mi-22 {font-size:22px}
  351. .search-fixed {position:fixed;top:20px;right:17px;z-index:1001;}
  352. .search-wrapper{float:right;top:60px;right:0;background:#f8f8f8;border-left:1px solid #ddd;border-top:1px solid #ddd;padding:15px;box-shadow: 2px 1px 1px rgba(0,0,0,.15);z-index:1001}
  353. #search-box{width:250px;height:27px;float:right;padding:0;margin:0;position:relative}
  354. #search-box form{border:1px solid #ccc;line-height:27px}
  355. .search-form{border:none;color:gray;width:100%;padding:0 30px 0 10px;height:27px;line-height:27px;font-size:14px;font-weight:400;margin:0;-moz-box-sizing:border-box;box-sizing:border-box}
  356. .search-button{background:0 0;width:30px;height:29px;line-height:29px;padding:3px 0 0 0;text-align:center;margin:0;top:0;right:0;font-size:16px;color:#888;position:absolute;border:none;border-radius:0;text-shadow:none;box-shadow:none;cursor:pointer}
  357. .search-form:focus,.search-form:hover,.search-button:focus,.search-button:hover{border:none;outline:0;color:#000}
  358.  
  359. /* AMP Sidebar */
  360. .btn-amp-sidebar{display:inline-block;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0zIC02IDI0IDI0Ij48cGF0aCBmaWxsPSIjNEE0QTRBIiBkPSJNMCAxMmgxOHYtMkgwdjJNMCA3aDE4VjVIMHYyTTAgMHYyaDE4VjBIMCIvPjwvc3ZnPg==);background-repeat:no-repeat;background-size:30px 24px;background-position:center center;background-color:transparent;width:40px;height:40px;border:none;position:fixed;top:10px;left:10px;z-index:1001;cursor:pointer}
  361. amp-sidebar{width:240px;background:#27597a;color:#fff;}
  362. amp-sidebar ul{padding:0;list-style:none}
  363. amp-sidebar li{line-height:40px;padding:0;list-style:none;color:#fff;border-bottom:1px solid #30698f;text-align:center;font-size:14px}
  364. amp-sidebar li:nth-child(1){border-top:1px solid #30698f;}
  365. amp-sidebar li:hover{background:#2e6589}
  366. amp-sidebar li a{color:#fff;text-decoration:none;padding:5px 10px}
  367. amp-sidebar button{margin-left:20px}
  368. .amp-sidebar-image{line-height:100px;vertical-align:middle}
  369. .amp-close-image{top:15px;left:205px;cursor:pointer}
  370. a.sidebaramp{color:#fff;text-decoration:none}
  371. .amp-sidebar-about {min-width:240px;min-height:240px;text-align:center;font-size:14px;}
  372. .amp-sidebar-about p{padding:15px 15px 0 15px;line-height:1.4em}
  373. .amp-sidebar-profile {max-width:100px;min-width:100px;border-radius:100px;margin:20px auto;background:#517b94}
  374. .amp-sidebar-profile amp-img {border-radius:100px;}
  375. #sidebar h6 {border:none;background:none;font-size:14px;font-weight:normal;margin-left:20px}
  376. #sidebar p {line-height:1.6em}
  377. section[expanded] .show-more,section:not([expanded]) .show-less{display:none;}
  378. .contact-box {background:#194a6a;padding:20px;border-top:1px solid #30698f;text-align:left}
  379. .contact-box svg{width:20px; height:20px;vertical-align: -4px;margin-right:10px}
  380. .contact-box span svg path{fill:#accbdf}
  381. .contact-me {min-width:210px;display:block}
  382. p.soc-icon {margin-top:5px;height:30px;padding:0}
  383. .soc-icon svg{width:20px; height:20px;}
  384. .soc-icon span svg path{fill:#80aac6;transition: all .5s ease-in-out;}
  385. .soc-icon span svg:hover path{fill:#fff}
  386. .soc-icon .youtube svg {width: 24px;height: 24px;vertical-align: -2px;}
  387.  
  388. .status-msg-wrap{font-size:100%;width:auto;margin:0 30px 30px 0;position:relative;padding:0}
  389. .status-msg-border{border:1px solid #ccc;opacity:.4;width:100%;text-align:center;position:relative;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
  390. .status-msg-bg{background-color:#fff;opacity:.8;width:100%;position:relative;z-index:1}
  391. .status-msg-body{text-align:center;padding:.3em 0;width:auto;top:0;left:0;right:0;position:absolute;z-index:4}
  392. .status-msg-hidden{visibility:hidden;padding:.3em 0}
  393. .status-msg-wrap a{padding-left:.4em;font-weight:500}
  394.  
  395. /* Outer-Wrapper */
  396. #outer-wrapper {
  397.   width:100%;
  398.   margin:0 auto;
  399.   padding:0;
  400.   text-align:left;
  401. }
  402. #content-wrapper {
  403.   max-width:768px;
  404.   margin:0 auto;
  405. }
  406. #main-wrapper {
  407.   width:103%;margin:-180px auto 15px;
  408.   word-wrap:break-word; /* fix for long text breaking sidebar float in IE */
  409.   overflow:hidden;     /* fix for long non-text content breaking IE sidebar float */
  410. }
  411. .image-wrapper {width:100%:height:auto}
  412.  
  413. #sidebar-wrapper {display:none}
  414.  
  415. /* Headings */
  416.  
  417. h2 {
  418.   margin:1.5em 0 .75em;
  419.   line-height:1.4em;
  420.   text-transform:capitaize;
  421. }
  422.  
  423.  
  424. /* Posts */
  425. .post-meta {
  426. margin-top:-10px;
  427. display:block;
  428. text-align: left;
  429. font-size: 11px;
  430. color: #aaa;
  431. padding: 30px 10px 30px 0;
  432. border-top:1px solid #ddd;
  433. border-bottom:1px solid #ddd;
  434. -moz-box-sizing:border-box;
  435. -webkit-box-sizing:border-box;
  436. box-sizing:border-box;
  437. }
  438. .post-meta a {
  439. color: #0e72b5;
  440. text-decoration: none;
  441. }
  442. .post-meta a:hover {
  443. color:#aaa;
  444.   }
  445. .post-meta-span {
  446. margin-right: 15px;
  447. }
  448. .post {
  449.   width:47%;
  450.   padding:0;
  451.   background-color:#fff;
  452.   box-shadow: 0 0 3px rgba(0,0,0,0.12),0 0 2px rgba(0,0,0,0.18);
  453.   overflow: hidden;
  454.   border:1px solid #dbdbdb;
  455.   height:400px;
  456.   float:left;
  457.   margin:0 20px 20px 0;
  458.   position:relative
  459. }
  460. .post-inner{padding:20px}
  461. .post h2 {
  462.   margin:.25em 0 0 0;
  463.   padding:0 0 4px;
  464.   font-size:20px;
  465.   font-weight:700;
  466.   line-height:1.3em;
  467.   color:#333;
  468. }
  469.  
  470. .post h2 a, .post h3 a:visited, .post h3 strong {
  471.   display:block;
  472.   text-decoration:none;
  473.   color:#333;
  474.   transition: all .5s ease-in-out;
  475. }
  476.  
  477. .post h2 strong, .post h2 a:hover {
  478.   color:#0e72b5;
  479. }
  480. .post h3 {
  481.   margin:.25em 0 0 0;
  482.   padding:0 0 4px;
  483.   font-size:140%;
  484.   font-weight:700;
  485.   line-height:1.3em;
  486.   color:#333;
  487. }
  488. .post .post-title {
  489.   margin-bottom:15px;
  490. }
  491.  
  492. .post-body {
  493.   margin:15px 0 .75em;
  494.   line-height:1.6em;
  495. }
  496.  
  497. .post-body img{
  498.   width:100%
  499. }
  500. .post-body blockquote {
  501.   line-height:1.3em;  
  502. }
  503.  
  504. .post-footer {
  505.   margin:40px 0;
  506.   line-height:1.7em;
  507. }
  508.  
  509. .comment-link {
  510.   margin-left:.6em;
  511. }
  512. .post blockquote {
  513.   margin:1em 20px;
  514. }
  515. .post blockquote p {
  516.   margin:.75em 0;
  517. }
  518.  
  519. /* Costumize */
  520. .post-thumbnail {
  521.   width:100%;
  522.   height:auto;
  523.   float:left;
  524.   margin:2px 15px 15px 0;
  525. }
  526. pre {
  527. padding:.5em 1em;
  528. margin: 0;
  529. white-space:pre;
  530. overflow:auto;
  531. background-color:#f1f1f1;
  532. font-size:14px;
  533. clear:both;
  534. border-left:3px solid #ccc;
  535. color:#111;
  536. }
  537. code {
  538. font-family:Consolas,Monaco,&#39;Andale Mono&#39;,&#39;Courier New&#39;,Courier,Monospace;
  539. line-height:20px;
  540. color:#db4437;
  541. font-size:14px;
  542. }
  543. pre code {
  544. display: block; padding: 0.5em;
  545. line-height:1.5em;
  546. color: black;
  547. }
  548. ::selection { background: #1066b9;color:white }
  549. ::-moz-selection { background: #1066b9; color:white}
  550. .thumbnail-cadangan {display:none}
  551. .centered {text-align:center}
  552.  
  553.  
  554. #blog-pager-newer-link a{
  555.   float:left;margin-left:0;background:#aaa;color:#fff;border-radius:100px;width:30px;height:30px;transition:all .4s ease-out}
  556.  
  557. #blog-pager-older-link a{float:right;margin-right:20px;background:#aaa;color:#fff;border-radius:100px;width:30px;height:30px;transition:all .4s ease-out;}
  558.  
  559. .home-link {display:none}
  560.  
  561. #blog-pager-newer-link a:hover, #blog-pager-older-link a:hover{background:#0379c4;color:#fff}
  562. #blog-pager {
  563.   text-align:center;
  564. }
  565.  
  566. .font-arrow {font-size:28;vertical-align:-11px}
  567.  
  568. .feed-links {
  569.   display:none;
  570. }
  571. .clear {clear:both}
  572.  
  573. /* Profile
  574. ----------------------------------------------- */
  575. .profile-img {
  576.   float:left;
  577.   margin-top:0;
  578.   margin-right:5px;
  579.   margin-bottom:5px;
  580.   margin-left:0;
  581.   padding:4px;
  582.   border:1px solid #ccc;
  583. }
  584.  
  585. .profile-data {
  586.   margin:0;
  587.   text-transform:uppercase;
  588.   letter-spacing:.1em;
  589.   font-weight:bold;
  590.   line-height:1.6em;
  591. }
  592.  
  593. .profile-datablock {
  594.   margin:.5em 0 .5em;
  595. }
  596.  
  597. .profile-textblock {
  598.   margin:0.5em 0;
  599.   line-height:1.6em;
  600. }
  601.  
  602. .profile-link {
  603.   text-transform:uppercase;
  604.   letter-spacing:.1em;
  605. }
  606.  
  607. /* Footer
  608. ----------------------------------------------- */
  609. #footer-wrapper {
  610.   height:80px;
  611.   width:100%;
  612.   clear:both;
  613.   color:#666;
  614.   text-align:left;
  615.   display:block;
  616.   font-size:14px;
  617.   background-color:#ebebeb;
  618. }
  619. #footer {
  620.   max-width:768px;
  621.   margin:0 auto;
  622.   padding:0;
  623.   color:#999;
  624. }
  625. #footer a {
  626.   color:#666;
  627.   text-decoration:none;
  628. }
  629. #footer a:hover {
  630.   color:#0e72b5;
  631. }
  632. img {
  633. max-width:100%;
  634. height:auto;
  635. width:auto;
  636. }
  637. .creditpic{margin-top:20px;padding:30px 0 30px;position:relative}
  638. .credit-wrapper {max-width:768px;margin:0 auto}
  639. .credit{line-height:1.6em;font-size:12px;font-weight:400;color:#888;clear:both;margin:0 auto;padding:0;text-align:left}
  640. .credit-right{float:right}
  641. .credit a,.credit a:visited{color:#666;text-decoration:none}
  642. .credit a:hover{color:#0379C4;text-decoration:none}
  643. /* RESPONSIVE */
  644.  
  645. @media screen and (max-width:768px) {
  646. .post {width:46.5%;}
  647. #header, #content-wrapper, #footer {max-width:728px}
  648. #header h1 {text-align:center; margin:0 auto;float:none}
  649. .description {display:none}
  650. .post {margin-bottom:12px}
  651. #main-wrapper {margin-top:-200px}
  652. .search-wrapper{top:0}
  653. }
  654.  
  655. @media screen and (max-width:736px) {
  656. #header, #content-wrapper, #footer {max-width:690px}
  657. }
  658.  
  659. @media screen and (max-width:667px) {
  660. #header, #content-wrapper, #footer {max-width:627px}
  661. .post {height:420px}
  662. }
  663.  
  664. @media screen and (max-width:640px) {
  665. .post {width:46%;}
  666. #header, #content-wrapper, #footer {max-width:600px}
  667. #header h1 {text-align:center; margin:0 auto;float:none}
  668. .description {display:none}
  669. }
  670. @media screen and (max-width:600px) {
  671. #header, #content-wrapper, #footer {max-width:560px}
  672. #main-wrapper {margin-top:-215px}
  673. }
  674. @media screen and (max-width:568px) {
  675. #header, #content-wrapper, #footer {max-width:545px}
  676. }
  677. @media screen and (max-width:414px) {
  678. #main-wrapper {width:100%}
  679. .post {width:99%;box-shadow:none;height:390px}
  680. #header, #content-wrapper, #footer {max-width:390px}
  681. #blog-pager-older-link a {margin-right:0}
  682. .credit-right{float:left}
  683. .creditpic{padding:25px 0 20px;}
  684. #main-wrapper {margin-top:-225px}
  685. #search-box{width:270px}
  686. }
  687. @media screen and (max-width:375px) {
  688. #header, #content-wrapper, #footer {max-width:350px}
  689. .post {margin-bottom:10px}
  690. }
  691. @media screen and (max-width:360px) {
  692. #header, #content-wrapper, #footer {max-width:340px}
  693. #main-wrapper {margin-top:-230px}
  694. }
  695. @media screen and (max-width:320px) {
  696. #header, #content-wrapper, #footer {max-width:300px}
  697. .post-snippet {display:none}
  698. .post-inner {padding:5px 15px 0}
  699. .post {height:auto}
  700. }
  701. </style>
  702. </b:if>
  703. <b:if cond='data:blog.pageType == &quot;item&quot;'>
  704. <style amp-custom='amp-custom'>
  705. @font-face {
  706. font-family: &#39;Roboto&#39;;
  707. font-style: normal;
  708. font-weight: 400;
  709. src: local(&#39;Roboto&#39;), local(&#39;Roboto-Regular&#39;), url(https://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format(&#39;woff2&#39;), url(https://fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff) format(&#39;woff&#39;), url(https://fonts.gstatic.com/s/roboto/v15/QHD8zigcbDB8aPfIoaupKOvvDin1pK8aKteLpeZ5c0A.ttf) format(&#39;truetype&#39;);
  710. }
  711. @font-face {
  712. font-family: &#39;Roboto&#39;;
  713. font-style: normal;
  714. font-weight: 700;
  715. src: local(&#39;Roboto Bold&#39;), local(&#39;Roboto-Bold&#39;), url(https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format(&#39;woff2&#39;), url(https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format(&#39;woff&#39;), url(https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOCZ2oysoEQEeKwjgmXLRnTc.ttf) format(&#39;truetype&#39;);
  716. }
  717. @font-face {
  718. font-family: &#39;Roboto&#39;;
  719. font-style: italic;
  720. font-weight: 400;
  721. src: local(&#39;Roboto Italic&#39;), local(&#39;Roboto-Italic&#39;), url(https://fonts.gstatic.com/s/roboto/v15/vPcynSL0qHq_6dX7lKVByfesZW2xOQ-xsNqO47m55DA.woff2) format(&#39;woff2&#39;), url(https://fonts.gstatic.com/s/roboto/v15/1pO9eUAp8pSF8VnRTP3xnvesZW2xOQ-xsNqO47m55DA.woff) format(&#39;woff&#39;), url(https://fonts.gstatic.com/s/roboto/v15/W4wDsBUluyw0tK3tykhXEXYhjbSpvc47ee6xR_80Hnw.ttf) format(&#39;truetype&#39;);
  722. }
  723. @font-face {
  724. font-family: &#39;Roboto Slab&#39;;
  725. font-style: normal;
  726. font-weight: 400;
  727. src: local(&#39;Roboto Slab Regular&#39;), local(&#39;RobotoSlab-Regular&#39;), url(https://fonts.gstatic.com/s/robotoslab/v6/y7lebkjgREBJK96VQi37Zo4P5ICox8Kq3LLUNMylGO4.woff2) format(&#39;woff2&#39;), url(https://fonts.gstatic.com/s/robotoslab/v6/y7lebkjgREBJK96VQi37ZobN6UDyHWBl620a-IRfuBk.woff) format(&#39;woff&#39;), url(https://fonts.gstatic.com/s/robotoslab/v6/y7lebkjgREBJK96VQi37ZiwlidHJgAgmTjOEEzwu1L8.ttf) format(&#39;truetype&#39;);
  728. }
  729. @font-face {
  730. font-family: &#39;Roboto Slab&#39;;
  731. font-style: normal;
  732. font-weight: 700;
  733. src: local(&#39;Roboto Slab Bold&#39;), local(&#39;RobotoSlab-Bold&#39;), url(https://fonts.gstatic.com/s/robotoslab/v6/dazS1PrQQuCxC3iOAJFEJYlIZu-HDpmDIZMigmsroc4.woff2) format(&#39;woff2&#39;), url(https://fonts.gstatic.com/s/robotoslab/v6/dazS1PrQQuCxC3iOAJFEJTqR_3kx9_hJXbbyU8S6IN0.woff) format(&#39;woff&#39;), url(https://fonts.gstatic.com/s/robotoslab/v6/dazS1PrQQuCxC3iOAJFEJTdGNerWpg2Hn6A-BxWgZ_I.ttf) format(&#39;truetype&#39;);
  734. }
  735. /* fallback */
  736. @font-face {
  737.   font-family: &#39;Material Icons&#39;;
  738.   font-style: normal;
  739.   font-weight: 400;
  740.   src: local(&#39;Material Icons&#39;), local(&#39;MaterialIcons-Regular&#39;), url(https://fonts.gstatic.com/s/materialicons/v18/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format(&#39;woff2&#39;);
  741. }
  742.  
  743. .material-icons {
  744.   font-family: &#39;Material Icons&#39;;
  745.   font-weight: normal;
  746.   font-style: normal;
  747.   font-size: 24px;
  748.   line-height: 1;
  749.   letter-spacing: normal;
  750.   text-transform: none;
  751.   display: inline-block;
  752.   white-space: nowrap;
  753.   word-wrap: normal;
  754.   direction: ltr;
  755.   -webkit-font-feature-settings: &#39;liga&#39;;
  756.   -webkit-font-smoothing: antialiased;
  757. }
  758. body {
  759.   background:#f9f9f9;
  760.   margin:0;
  761.   padding:0;
  762.   color:#333;
  763.   font-size:15px;
  764.   font-family:Roboto,Arial,Sans-serif;
  765.   border-top:300px solid #ebebeb;
  766. }
  767. a:link {
  768.   color:#0e72b5;
  769.   text-decoration:none;
  770. }
  771. a:visited {
  772.   color:#0e72b5;
  773.   text-decoration:none;
  774. }
  775. a:hover {
  776.   color:#333;
  777.   text-decoration:underline;
  778. }
  779. a img {
  780.   border-width:0;
  781. }
  782.  
  783. /* Header */
  784.  
  785. #header-wrapper {
  786.   width:100%;
  787.   padding:0;
  788.   color:#212121;
  789.   font-weight:400;
  790.   background-color:#fff;
  791.   position:fixed;
  792.   top:0;
  793.   left:0;
  794.   width:100%;
  795.   height:60px;
  796.   box-shadow: 2px 1px 1px rgba(0,0,0,.15);
  797.   z-index:999;
  798. }
  799. #header {
  800.   max-width:768px;
  801.   color:#212121;
  802.   text-align:left;
  803.   margin:0 auto;
  804. }
  805.  
  806. #header h1 {
  807.   margin:0;
  808.   padding:0;
  809.   font-size:140%;
  810.   float:left;
  811.   color:#212121;
  812.   line-height:60px;
  813. }
  814.  
  815. #header a {
  816.   color:#212121;
  817.   text-decoration:none;
  818.   -webkit-transition:all .4s ease;
  819.   transition:all .4s ease;
  820. }
  821.  
  822. #header a:hover {
  823.   color:#0379c4;
  824. }
  825.  
  826. #header .description {
  827.   margin:0 0 0 20px;
  828.   padding:0 0 15px;
  829.   text-transform:capitalize;
  830.   line-height:60px;
  831.   float:left;
  832. }
  833.  
  834. #header amp-img {
  835.   margin-top:-5px;
  836.   margin-right:5px;
  837.   height:auto;
  838.   width:auto;
  839.   vertical-align:middle;
  840. }
  841.  
  842. #header-wrapper h5{background:none;border:none}
  843. .acc-header {max-width:320px;position:absolute;top:0;right:-2px;z-index:900;}
  844. .mi-22 {font-size:22px}
  845. .search-fixed {position:fixed;top:20px;right:17px;z-index:1001;}
  846. .search-wrapper{float:right;top:60px;right:0;background:#f8f8f8;border-left:1px solid #ddd;border-top:1px solid #ddd;padding:15px;box-shadow: 2px 1px 1px rgba(0,0,0,.15);z-index:1001}
  847. #search-box{width:250px;height:27px;float:right;padding:0;margin:0;position:relative}
  848. #search-box form{border:1px solid #ccc;line-height:27px}
  849. .search-form{border:none;color:gray;width:100%;padding:0 30px 0 10px;height:27px;line-height:27px;font-size:14px;font-weight:400;margin:0;-moz-box-sizing:border-box;box-sizing:border-box}
  850. .search-button{background:0 0;width:30px;height:29px;line-height:29px;padding:3px 0 0 0;text-align:center;margin:0;top:0;right:0;font-size:16px;color:#888;position:absolute;border:none;border-radius:0;text-shadow:none;box-shadow:none;cursor:pointer}
  851. .search-form:focus,.search-form:hover,.search-button:focus,.search-button:hover{border:none;outline:0;color:#000}
  852.  
  853. /* AMP Sidebar */
  854. .btn-amp-sidebar{display:inline-block;background-image:url(https://www.ampproject.org/static/img/hamburger.svg);background-repeat:no-repeat;background-size:30px 24px;background-position:center center;background-color:transparent;width:40px;height:40px;border:none;position:fixed;top:10px;left:10px;z-index:1001;cursor:pointer}
  855. amp-sidebar{width:240px;background:#27597a;color:#fff;}
  856. amp-sidebar ul{padding:0;list-style:none}
  857. amp-sidebar li{line-height:40px;padding:0;list-style:none;color:#fff;border-bottom:1px solid #30698f;text-align:center;font-size:14px}
  858. amp-sidebar li:nth-child(1){border-top:1px solid #30698f;}
  859. amp-sidebar li:hover{background:#2e6589}
  860. amp-sidebar li a{color:#fff;text-decoration:none;padding:5px 10px}
  861. amp-sidebar button{margin-left:20px}
  862. .amp-sidebar-image{line-height:100px;vertical-align:middle}
  863. .amp-close-image{top:15px;left:205px;cursor:pointer}
  864. a.sidebaramp{color:#fff;text-decoration:none}
  865. .amp-sidebar-about {min-width:240px;min-height:240px;text-align:center;font-size:14px;}
  866. .amp-sidebar-about p{padding:15px 15px 0 15px;line-height:1.4em}
  867. .amp-sidebar-profile {max-width:100px;min-width:100px;border-radius:100px;margin:20px auto;background:#517b94}
  868. .amp-sidebar-profile amp-img {border-radius:100px;}
  869. #sidebar h6 {border:none;background:none;font-size:14px;font-weight:normal;margin-left:20px}
  870. #sidebar p {line-height:1.6em}
  871. .contact-box {background:#194a6a;padding:20px;border-top:1px solid #30698f;text-align:left}
  872. .contact-box svg{width:20px; height:20px;vertical-align: -4px;margin-right:10px}
  873. .contact-box span svg path{fill:#accbdf}
  874. .contact-me {min-width:210px;display:block}
  875. p.soc-icon {margin-top:5px;height:30px;padding:0}
  876. .soc-icon svg{width:20px; height:20px;}
  877. .soc-icon span svg path{fill:#80aac6;transition: all .5s ease-in-out;}
  878. .soc-icon span svg:hover path{fill:#fff}
  879. .soc-icon .youtube svg {width: 24px;height: 24px;vertical-align: -2px;}
  880.  
  881. /* Outer-Wrapper */
  882. #outer-wrapper {
  883.   width:100%;
  884.   margin:0 auto;
  885.   padding:0;
  886.   text-align:left;
  887. }
  888. #content-wrapper {
  889.   max-width:768px;
  890.   margin:0 auto;
  891. }
  892. #main-wrapper {
  893.   width:100%;margin:-180px auto 15px;
  894.   word-wrap:break-word; /* fix for long text breaking sidebar float in IE */
  895.   overflow:hidden;     /* fix for long non-text content breaking IE sidebar float */
  896. }
  897. .image-wrapper {width:100%:height:auto}
  898.  
  899. #sidebar-wrapper {display:none}
  900.  
  901. /* Headings */
  902.  
  903. h2 {
  904.   margin:1.5em 0 .75em;
  905.   line-height:1.4em;
  906.   text-transform:capitaize;
  907. }
  908.  
  909. .breadcrumbs a,.breadcrumbs li{display:inline-block}
  910. .breadcrumbs{line-height:1.5em;width:auto;padding:0 0 10px;font-size:14px;color:#444;margin:0 30px 0 0;font-weight:500}
  911. .breadcrumbs li{list-style-type:none;float:left}
  912. .breadcrumbs a{text-decoration:none;outline:0;transition:all .3s ease-in-out;color:#444;font-weight:400}
  913. .breadcrumbs a:hover{color:#0379C4}
  914. .breadcrumbs-icon {vertical-align: -15%;font-size: inherit;text-rendering: optimizeLegibility}
  915.  
  916. /* Posts */
  917. .post-meta {
  918. width:100%
  919. margin-top:10px;
  920. margin-bottom:15px;
  921. display:block;
  922. text-align: left;
  923. font-size: 11px;
  924. color: #aaa;
  925. padding: 0;
  926. border-top:1px solid #ddd;
  927. border-bottom:1px solid #ddd;
  928. height:50px;
  929. }
  930. .post-meta a {
  931. color: #0e72b5;
  932. text-decoration: none;
  933. text-transform:uppercase;
  934. font-size:11px;
  935. color: #444;
  936. }
  937. .post-meta a:hover {
  938. color:#aaa;
  939.   }
  940. .post-meta-span {
  941. margin-right: 15px;
  942. }
  943. .post-meta-left {border-right: 1px solid #ddd;float:left;height:50px;margin-right:20px;padding-right:15px}
  944. .post-meta-right {float:left;vertical-align:middle;margin-top: 8px;}
  945. .meta-author {margin-top:13px;margin-bottom:2px}
  946. amp-social-share[type=&quot;twitter&quot;], amp-social-share[type=&quot;gplus&quot;], amp-social-share[type=&quot;facebook&quot;], amp-social-share[type=&quot;linkedin&quot;], amp-social-share[type=&quot;pinterest&quot;] {
  947.   background-color:#999;
  948.   border-radius:100px;
  949.   background-size:25px 25px;
  950.   transition:all .4s ease-out;
  951. }
  952. amp-social-share[type=&quot;twitter&quot;]:hover {background-color:#55ACEE}
  953. amp-social-share[type=&quot;gplus&quot;]:hover {background-color:#DC4E41}
  954. amp-social-share[type=&quot;facebook&quot;]:hover {background-color:#3B5998}
  955. amp-social-share[type=&quot;linkedin&quot;]:hover {background-color:#0077B5}
  956. amp-social-share[type=&quot;pinterest&quot;]:hover {background-color:#BD081C}
  957.  
  958. 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;}
  959. a:hover.color-label {background:#0379c4;color:#fff}
  960. .post-labels{margin-bottom:20px;position:absolute; width:92%;margin:-265px auto 0;text-align:center}
  961.  
  962. .post {
  963.   margin:0;
  964.   padding:0;
  965.   background-color:#fff;
  966.   box-shadow: 0 0 3px rgba(0,0,0,0.12),0 0 2px rgba(0,0,0,0.18);
  967.   overflow: hidden;
  968.   border:1px solid #dbdbdb;
  969. }
  970. .post-inner{padding:30px 30px 0;position:relative;margin:0 auto}
  971. .post h2 {
  972.   width:93%;
  973.   margin:0 auto;
  974.   padding:30px;
  975.   background-color:rgba(0,0,0,0.6);
  976.   font-size:220%;
  977.   font-weight:700;
  978.   line-height:1.3em;
  979.   text-align:center;
  980.   position:absolute;
  981.   top:-180px;
  982.   left:0;
  983.   color:#fff;
  984.   z-index:99;
  985. }
  986.  
  987. .post h2 a, .post h3 a:visited, .post h3 strong {
  988.   display:block;
  989.   text-decoration:none;
  990.   color:#333;
  991.   transition: all .5s ease-in-out;
  992. }
  993.  
  994. .post h2 strong, .post h2 a:hover {
  995.   color:#0e72b5;
  996. }
  997. .post h3 {
  998.   margin:.25em 0 0 0;
  999.   padding:0 0 4px;
  1000.   font-size:140%;
  1001.   font-weight:700;
  1002.   line-height:1.3em;
  1003.   color:#333;
  1004. }
  1005. .post .post-title {
  1006.   margin-bottom:15px;
  1007. }
  1008.  
  1009. .post-body {
  1010.   margin:25px 0 .75em;
  1011.   line-height:1.6em;
  1012. }
  1013.  
  1014. .post-body img{
  1015.   width:100%
  1016. }
  1017. .post-body blockquote {
  1018.   line-height:1.3em;  
  1019. }
  1020.  
  1021. .post-footer {
  1022.   margin:40px 0;
  1023.   line-height:1.7em;
  1024. }
  1025. .post-snippet {
  1026. white-space: nowrap;
  1027. overflow: hidden;
  1028. text-overflow: ellipsis;
  1029. }
  1030.  
  1031. .comment-link {
  1032.   margin-left:.6em;
  1033. }
  1034. .post blockquote {
  1035.   margin:1em 20px;
  1036. }
  1037. .post blockquote p {
  1038.   margin:.75em 0;
  1039. }
  1040.  
  1041. .related-box {max-height:360px;margin-top:-35px;}
  1042.  
  1043. section[expanded] .show-more,section:not([expanded]) .show-less{display:none}
  1044. .disqus-comments h4{background:none;border:none;width:50%;margin:0 auto;text-align:center;}
  1045. .disqus-hide{font-weight:400;line-height:60px;font-size:14px;margin:0 auto;padding:12px 90px;text-align:center;color:#333;background:#f8f8f8;border:none;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);border:1px solid #ddd;transition:all .4s ease-in-out;clear:both}
  1046.   .disqus-hide:hover {background:#eee}
  1047. .disqus-comments amp-iframe{margin-left:-8px;margin-right:-8px}
  1048.  
  1049.  
  1050. /* Costumize */
  1051. .post-thumbnail {
  1052.   width:100%;
  1053.   height:auto;
  1054.   float:left;
  1055.   margin:2px 15px 15px 0;
  1056. }
  1057. pre {
  1058. padding:.5em 1em;
  1059. margin: 0;
  1060. white-space:pre;
  1061. overflow:auto;
  1062. background-color:#f1f1f1;
  1063. font-size:14px;
  1064. clear:both;
  1065. border-left:3px solid #ccc;
  1066. color:#111;
  1067. }
  1068. code {
  1069. font-family:Consolas,Monaco,&#39;Andale Mono&#39;,&#39;Courier New&#39;,Courier,Monospace;
  1070. line-height:20px;
  1071. color:#db4437;
  1072. font-size:14px;
  1073. }
  1074. pre code {
  1075. display: block; padding: 0.5em;
  1076. line-height:1.5em;
  1077. color: black;
  1078. }
  1079. ::selection { background: #1066b9;color:white }
  1080. ::-moz-selection { background: #1066b9; color:white}
  1081. .thumbnail-cadangan {display:none}
  1082. .centered {text-align:center}
  1083. .copy-code {  
  1084.   -webkit-user-select: all;
  1085.   -moz-user-select: all;
  1086.   -ms-user-select: all;
  1087.   user-select: all;
  1088. }
  1089.  
  1090. #blog-pager-newer-link a{
  1091.   float:left;margin-left:0;background:#aaa;color:#fff;border-radius:100px;width:30px;height:30px;transition:all .4s ease-out}
  1092.  
  1093. #blog-pager-older-link a{float:right;margin-right:0;background:#aaa;color:#fff;border-radius:100px;width:30px;height:30px;transition:all .4s ease-out;}
  1094.  
  1095. .home-link {display:none}
  1096.  
  1097. #blog-pager-newer-link a:hover, #blog-pager-older-link a:hover{background:#0379c4;color:#fff}
  1098. #blog-pager {text-align:center;margin-top:20px}
  1099.  
  1100. .font-arrow {font-size:28;vertical-align:-11px}
  1101.  
  1102. .feed-links {
  1103.   display:none;
  1104. }
  1105. .clear {clear:both}
  1106.  
  1107. /* Profile
  1108. ----------------------------------------------- */
  1109. .profile-img {
  1110.   float:left;
  1111.   margin-top:0;
  1112.   margin-right:5px;
  1113.   margin-bottom:5px;
  1114.   margin-left:0;
  1115.   padding:4px;
  1116.   border:1px solid #ccc;
  1117. }
  1118.  
  1119. .profile-data {
  1120.   margin:0;
  1121.   text-transform:uppercase;
  1122.   letter-spacing:.1em;
  1123.   font-weight:bold;
  1124.   line-height:1.6em;
  1125. }
  1126.  
  1127. .profile-datablock {
  1128.   margin:.5em 0 .5em;
  1129. }
  1130.  
  1131. .profile-textblock {
  1132.   margin:0.5em 0;
  1133.   line-height:1.6em;
  1134. }
  1135.  
  1136. .profile-link {
  1137.   text-transform:uppercase;
  1138.   letter-spacing:.1em;
  1139. }
  1140.  
  1141. /* Footer
  1142. ----------------------------------------------- */
  1143. #footer-wrapper {
  1144.   height:80px;
  1145.   width:100%;
  1146.   clear:both;
  1147.   color:#666;
  1148.   text-align:left;
  1149.   display:block;
  1150.   font-size:14px;
  1151.   background-color:#ebebeb;
  1152. }
  1153. #footer {
  1154.   max-width:768px;
  1155.   margin:0 auto;
  1156.   padding:0;
  1157.   color:#888;
  1158. }
  1159. #footer a {
  1160.   color:#666;
  1161.   text-decoration:none;
  1162. }
  1163. #footer a:hover {
  1164.   color:#0e72b5;
  1165. }
  1166. img {
  1167. max-width:100%;
  1168. height:auto;
  1169. width:auto;
  1170. }
  1171.  
  1172. .creditpic{margin-top:20px;padding:30px 0 30px;position:relative}
  1173. .credit-wrapper {max-width:768px;margin:0 auto}
  1174. .credit{line-height:1.6em;font-size:12px;font-weight:400;color:#888;clear:both;margin:0 auto;padding:0;text-align:left}
  1175. .credit-right{float:right}
  1176. .credit a,.credit a:visited{color:#666;text-decoration:none}
  1177. .credit a:hover{color:#0379C4;text-decoration:none}
  1178.  
  1179. /* RESPONSIVE */
  1180.  
  1181. @media screen and (max-width:768px) {
  1182. .search-wrapper{top:0}
  1183. }
  1184. @media screen and (max-width:736px) {
  1185. #header, #content-wrapper, #footer {max-width:690px}
  1186. #header h1 {text-align:center; margin:0 auto;float:none}
  1187. .description {display:none}
  1188. .post h2{top:-150px;}
  1189. .post-labels {margin: -225px auto 0;}
  1190. .disqus-comments h4{width:75%}
  1191. .related-box {max-height:350px}
  1192. }
  1193.  
  1194. @media screen and (max-width:667px) {
  1195. #header, #content-wrapper, #footer {max-width:627px}
  1196. .post h2 {font-size:28px}
  1197. }
  1198.  
  1199. @media screen and (max-width:640px) {
  1200. #header, #content-wrapper, #footer {max-width:600px}
  1201. .breadcrumbs{padding:5px 0 10px;margin:0;}
  1202. }
  1203. @media screen and (max-width:600px) {
  1204. #header, #content-wrapper, #footer {max-width:560px}
  1205. }
  1206. @media screen and (max-width:568px) {
  1207. #header, #content-wrapper, #footer {max-width:545px}
  1208. }
  1209. @media screen and (max-width:414px) {
  1210. #main-wrapper {width:100%}
  1211. .post {width:100%;box-shadow:none;border:none}
  1212. .post-inner {padding:20px 20px 0}
  1213. .post h2 {position:relative;color:#222;background:none;font-size:24px;text-align: center;width:100%;padding:0;text-align:left;top:0}
  1214. .post-meta {position:relative;margin-top:20px}
  1215. .post-meta-left {margin-right:20px;padding-right:10px}
  1216. .post-meta-right {float:right}
  1217. a.color-label {font-size:12px;background:#999;padding:5px 10px;border-radius:3px;color:#fff;text-decoration:none;margin-bottom:15px;transition:all .4s ease-out;}
  1218. a:hover.color-label {background:#666;}
  1219. .post-labels{margin-bottom:40px;position:relative;margin:0;width:100%;text-align:left}
  1220. #main-wrapper {margin: -240px auto 15px;}
  1221. #blog-pager-older-link a {margin-right:15px}
  1222. #blog-pager-newer-link a {margin-left:15px}
  1223. #header, #footer {max-width:390px}
  1224. .credit-right{float:left}
  1225. .creditpic{padding:25px 0 20px;}
  1226. .breadcrumbs{margin:20px 0;}
  1227. .disqus-comments h4{width:90%}
  1228. .related-box {max-height:600px}
  1229. #search-box{width:270px}
  1230. }
  1231. @media screen and (max-width:375px) {
  1232. #header, #footer {max-width:350px}
  1233. .disqus-comments h4{width:100%}
  1234. .disqus-hide {padding:12px 60px}  
  1235. }
  1236. @media screen and (max-width:360px) {
  1237. #header, #footer {max-width:340px}
  1238. }
  1239. @media screen and (max-width:321px) {
  1240. #header, #footer {max-width:300px}
  1241. amp-social-share[type=&quot;linkedin&quot;]{display:none}
  1242. }
  1243. </style>
  1244. </b:if>
  1245. <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  1246. <style amp-custom='amp-custom'>
  1247. /*<![CDATA[*/
  1248. @font-face {
  1249. font-family: 'Roboto';
  1250. font-style: normal;
  1251. font-weight: 400;
  1252. src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff'), url(https://fonts.gstatic.com/s/roboto/v15/QHD8zigcbDB8aPfIoaupKOvvDin1pK8aKteLpeZ5c0A.ttf) format('truetype');
  1253. }
  1254. @font-face {
  1255. font-family: 'Roboto';
  1256. font-style: normal;
  1257. font-weight: 700;
  1258. src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'), url(https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOCZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype');
  1259. }
  1260. @font-face {
  1261. font-family: 'Roboto';
  1262. font-style: italic;
  1263. font-weight: 400;
  1264. src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v15/vPcynSL0qHq_6dX7lKVByfesZW2xOQ-xsNqO47m55DA.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v15/1pO9eUAp8pSF8VnRTP3xnvesZW2xOQ-xsNqO47m55DA.woff) format('woff'), url(https://fonts.gstatic.com/s/roboto/v15/W4wDsBUluyw0tK3tykhXEXYhjbSpvc47ee6xR_80Hnw.ttf) format('truetype');
  1265. }
  1266. @font-face {
  1267. font-family: 'Roboto Slab';
  1268. font-style: normal;
  1269. font-weight: 400;
  1270. src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://fonts.gstatic.com/s/robotoslab/v6/y7lebkjgREBJK96VQi37Zo4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotoslab/v6/y7lebkjgREBJK96VQi37ZobN6UDyHWBl620a-IRfuBk.woff) format('woff'), url(https://fonts.gstatic.com/s/robotoslab/v6/y7lebkjgREBJK96VQi37ZiwlidHJgAgmTjOEEzwu1L8.ttf) format('truetype');
  1271. }
  1272. @font-face {
  1273. font-family: 'Roboto Slab';
  1274. font-style: normal;
  1275. font-weight: 700;
  1276. src: local('Roboto Slab Bold'), local('RobotoSlab-Bold'), url(https://fonts.gstatic.com/s/robotoslab/v6/dazS1PrQQuCxC3iOAJFEJYlIZu-HDpmDIZMigmsroc4.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotoslab/v6/dazS1PrQQuCxC3iOAJFEJTqR_3kx9_hJXbbyU8S6IN0.woff) format('woff'), url(https://fonts.gstatic.com/s/robotoslab/v6/dazS1PrQQuCxC3iOAJFEJTdGNerWpg2Hn6A-BxWgZ_I.ttf) format('truetype');
  1277. }
  1278. /* fallback */
  1279. @font-face {
  1280.  font-family: 'Material Icons';
  1281.  font-style: normal;
  1282.  font-weight: 400;
  1283.  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v18/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
  1284. }
  1285.  
  1286. .material-icons {
  1287.  font-family: 'Material Icons';
  1288.  font-weight: normal;
  1289.  font-style: normal;
  1290.  font-size: 24px;
  1291.  line-height: 1;
  1292.  letter-spacing: normal;
  1293.  text-transform: none;
  1294.  display: inline-block;
  1295.  white-space: nowrap;
  1296.  word-wrap: normal;
  1297.  direction: ltr;
  1298.  -webkit-font-feature-settings: 'liga';
  1299.  -webkit-font-smoothing: antialiased;
  1300. }
  1301. body {
  1302.  background:#f9f9f9;
  1303.  margin:0;
  1304.  padding:0;
  1305.  color:#333;
  1306.  font-size:15px;
  1307.  font-family:Roboto,Arial,Sans-serif;
  1308.  border-top:300px solid #ebebeb;
  1309. }
  1310. a:link {
  1311.  color:#0e72b5;
  1312.  text-decoration:none;
  1313. }
  1314. a:visited {
  1315.  color:#0e72b5;
  1316.  text-decoration:none;
  1317. }
  1318. a:hover {
  1319.  color:#333;
  1320.  text-decoration:underline;
  1321. }
  1322. a img {
  1323.  border-width:0;
  1324. }
  1325.  
  1326. /* Header */
  1327.  
  1328. #header-wrapper {
  1329.  width:100%;
  1330.  padding:0;
  1331.  color:#212121;
  1332.  font-weight:400;
  1333.  background-color:#fff;
  1334.  position:fixed;
  1335.  top:0;
  1336.  left:0;
  1337.  width:100%;
  1338.  height:60px;
  1339.  box-shadow: 2px 1px 1px rgba(0,0,0,.15);
  1340.  z-index:999;
  1341. }
  1342. #header {
  1343.  max-width:768px;
  1344.  color:#212121;
  1345.  text-align:left;
  1346.  margin:0 auto;
  1347. }
  1348.  
  1349. #header h1 {
  1350.  margin:0;
  1351.  padding:0;
  1352.  font-size:140%;
  1353.  float:left;
  1354.  color:#212121;
  1355.  line-height:60px;
  1356. }
  1357.  
  1358. #header a {
  1359.  color:#212121;
  1360.  text-decoration:none;
  1361.  -webkit-transition:all .4s ease;
  1362.  transition:all .4s ease;
  1363. }
  1364.  
  1365. #header a:hover {
  1366.  color:#0379c4;
  1367. }
  1368.  
  1369. #header .description {
  1370.  margin:0 0 0 20px;
  1371.  padding:0 0 15px;
  1372.  text-transform:capitalize;
  1373.  line-height:60px;
  1374.  float:left;
  1375. }
  1376.  
  1377. #header amp-img {
  1378.  margin-top:-5px;
  1379.  margin-right:5px;
  1380.  height:auto;
  1381.  width:auto;
  1382.  vertical-align:middle;
  1383. }
  1384.  
  1385. #header-wrapper h5{background:none;border:none}
  1386. .acc-header {max-width:320px;position:absolute;top:0;right:-2px;z-index:900;}
  1387. .mi-22 {font-size:22px}
  1388. .search-fixed {position:fixed;top:20px;right:17px;z-index:1001;}
  1389. .search-wrapper{float:right;top:60px;right:0;background:#f8f8f8;border-left:1px solid #ddd;border-top:1px solid #ddd;padding:15px;box-shadow: 2px 1px 1px rgba(0,0,0,.15);z-index:1001}
  1390. #search-box{width:250px;height:27px;float:right;padding:0;margin:0;position:relative}
  1391. #search-box form{border:1px solid #ccc;line-height:27px}
  1392. .search-form{border:none;color:gray;width:100%;padding:0 30px 0 10px;height:27px;line-height:27px;font-size:14px;font-weight:400;margin:0;-moz-box-sizing:border-box;box-sizing:border-box}
  1393. .search-button{background:0 0;width:30px;height:29px;line-height:29px;padding:3px 0 0 0;text-align:center;margin:0;top:0;right:0;font-size:16px;color:#888;position:absolute;border:none;border-radius:0;text-shadow:none;box-shadow:none;cursor:pointer}
  1394. .search-form:focus,.search-form:hover,.search-button:focus,.search-button:hover{border:none;outline:0;color:#000}
  1395.  
  1396. /* AMP Sidebar */
  1397. .btn-amp-sidebar{display:inline-block;background-image:url(https://www.ampproject.org/static/img/hamburger.svg);background-repeat:no-repeat;background-size:30px 24px;background-position:center center;background-color:transparent;width:40px;height:40px;border:none;position:fixed;top:10px;left:10px;z-index:1001;cursor:pointer}
  1398. amp-sidebar{width:240px;background:#27597a;color:#fff;}
  1399. amp-sidebar ul{padding:0;list-style:none}
  1400. amp-sidebar li{line-height:40px;padding:0;list-style:none;color:#fff;border-bottom:1px solid #30698f;text-align:center;font-size:14px}
  1401. amp-sidebar li:nth-child(1){border-top:1px solid #30698f;}
  1402. amp-sidebar li:hover{background:#2e6589}
  1403. amp-sidebar li a{color:#fff;text-decoration:none;padding:5px 10px}
  1404. amp-sidebar button{margin-left:20px}
  1405. .amp-sidebar-image{line-height:100px;vertical-align:middle}
  1406. .amp-close-image{top:15px;left:205px;cursor:pointer}
  1407. a.sidebaramp{color:#fff;text-decoration:none}
  1408. .amp-sidebar-about {min-width:240px;min-height:240px;text-align:center;font-size:14px;}
  1409. .amp-sidebar-about p{padding:15px 15px 0 15px;line-height:1.4em}
  1410. .amp-sidebar-profile {max-width:100px;min-width:100px;border-radius:100px;margin:20px auto;background:#517b94}
  1411. .amp-sidebar-profile amp-img {border-radius:100px;}
  1412. #sidebar h6 {border:none;background:none;font-size:14px;font-weight:normal;margin-left:20px}
  1413. #sidebar p {line-height:1.6em}
  1414. section[expanded] .show-more,section:not([expanded]) .show-less{display:none;}
  1415. .contact-box {background:#194a6a;padding:20px;border-top:1px solid #30698f;text-align:left}
  1416. .contact-box svg{width:20px; height:20px;vertical-align: -4px;margin-right:10px}
  1417. .contact-box span svg path{fill:#accbdf}
  1418. .contact-me {min-width:210px;display:block}
  1419. p.soc-icon {margin-top:5px;height:30px;padding:0}
  1420. .soc-icon svg{width:20px; height:20px;}
  1421. .soc-icon span svg path{fill:#80aac6;transition: all .5s ease-in-out;}
  1422. .soc-icon span svg:hover path{fill:#fff}
  1423. .soc-icon .youtube svg {width: 24px;height: 24px;vertical-align: -2px;
  1424. }
  1425.  
  1426. /* Outer-Wrapper */
  1427. #outer-wrapper {
  1428.  width:100%;
  1429.  margin:0 auto;
  1430.  padding:0;
  1431.  text-align:left;
  1432. }
  1433. #content-wrapper {
  1434.  max-width:768px;
  1435.  margin:0 auto;
  1436. }
  1437. #main-wrapper {
  1438.  width:100%;margin:-180px auto 15px;
  1439.  word-wrap:break-word; /* fix for long text breaking sidebar float in IE */
  1440.  overflow:hidden;     /* fix for long non-text content breaking IE sidebar float */
  1441. }
  1442. .image-wrapper {width:100%:height:auto}
  1443.  
  1444. #sidebar-wrapper {display:none}
  1445.  
  1446. /* Headings */
  1447.  
  1448. h2 {
  1449.  margin:1.5em 0 .75em;
  1450.  line-height:1.4em;
  1451.  text-transform:capitaize;
  1452. }
  1453.  
  1454.  
  1455. /* Posts */
  1456. .post-meta {
  1457. width:100%
  1458. margin-top:10px;
  1459. margin-bottom:15px;
  1460. display:block;
  1461. text-align: left;
  1462. font-size: 11px;
  1463. color: #aaa;
  1464. padding: 0;
  1465. border-top:1px solid #ddd;
  1466. border-bottom:1px solid #ddd;
  1467. height:50px;
  1468. }
  1469. .post-meta a {
  1470. color: #0e72b5;
  1471. text-decoration: none;
  1472. text-transform:uppercase;
  1473. font-size:11px;
  1474. color: #444;
  1475. }
  1476. .post-meta a:hover {
  1477. color:#aaa;
  1478.  }
  1479. .post-meta-span {
  1480. margin-right: 15px;
  1481. }
  1482. .post-meta-left {border-right: 1px solid #ddd;float:left;height:50px;margin-right:20px;padding-right:15px}
  1483. .post-meta-right {float:left;vertical-align:middle;margin-top: 8px;}
  1484. .meta-author {margin-top:13px;margin-bottom:2px}
  1485. amp-social-share[type=&quot;twitter&quot;], amp-social-share[type=&quot;gplus&quot;], amp-social-share[type=&quot;facebook&quot;], amp-social-share[type=&quot;linkedin&quot;], amp-social-share[type=&quot;pinterest&quot;] {
  1486.  background-color:#999;
  1487.  border-radius:100px;
  1488.  background-size:25px 25px;
  1489.  transition:all .4s ease-out;
  1490. }
  1491. amp-social-share[type=&quot;twitter&quot;]:hover {background-color:#55ACEE}
  1492. amp-social-share[type=&quot;gplus&quot;]:hover {background-color:#DC4E41}
  1493. amp-social-share[type=&quot;facebook&quot;]:hover {background-color:#3B5998}
  1494. amp-social-share[type=&quot;linkedin&quot;]:hover {background-color:#0077B5}
  1495. amp-social-share[type=&quot;pinterest&quot;]:hover {background-color:#BD081C}
  1496.  
  1497. 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;}
  1498. a:hover.color-label {background:#0379c4;color:#fff}
  1499. .post-labels{margin-bottom:20px;position:absolute; width:92%;margin:-265px auto 0;text-align:center}
  1500.  
  1501. .post {
  1502.  margin:0;
  1503.  padding:0;
  1504.  background-color:#fff;
  1505.  box-shadow: 0 0 3px rgba(0,0,0,0.12),0 0 2px rgba(0,0,0,0.18);
  1506.  overflow: hidden;
  1507.  border:1px solid #dbdbdb;
  1508. }
  1509. .post-inner{padding:30px;position:relative;margin:0 auto}
  1510. .post h2 {
  1511.  width:93%;
  1512.  margin:0 auto;
  1513.  padding:30px;
  1514.  background-color:rgba(0,0,0,0.6);
  1515.  font-size:220%;
  1516.  font-weight:700;
  1517.  line-height:1.3em;
  1518.  text-align:center;
  1519.  position:absolute;
  1520.  top:-120px;
  1521.  left:0;
  1522.  color:#fff;
  1523.  z-index:99;
  1524. }
  1525.  
  1526. .post h2 a, .post h3 a:visited, .post h3 strong {
  1527.  display:block;
  1528.  text-decoration:none;
  1529.  color:#333;
  1530.  transition: all .5s ease-in-out;
  1531. }
  1532.  
  1533. .post h2 strong, .post h2 a:hover {
  1534.  color:#0e72b5;
  1535. }
  1536. .post h3 {
  1537.  margin:.25em 0 0 0;
  1538.  padding:0 0 4px;
  1539.  font-size:140%;
  1540.  font-weight:700;
  1541.  line-height:1.3em;
  1542.  color:#333;
  1543. }
  1544. .post .post-title {
  1545.  margin-bottom:15px;
  1546. }
  1547.  
  1548. .post-body {
  1549.  margin:0;
  1550.  line-height:1.6em;
  1551. }
  1552.  
  1553. .post-body img{
  1554.  width:100%
  1555. }
  1556. .post-body blockquote {
  1557.  line-height:1.3em;  
  1558. }
  1559.  
  1560. .post-footer {
  1561.  margin:40px 0;
  1562.  line-height:1.7em;
  1563. }
  1564. .post-snippet {
  1565. white-space: nowrap;
  1566. overflow: hidden;
  1567. text-overflow: ellipsis;
  1568. }
  1569.  
  1570. .comment-link {
  1571.  margin-left:.6em;
  1572. }
  1573. .post blockquote {
  1574.  margin:1em 20px;
  1575. }
  1576. .post blockquote p {
  1577.  margin:.75em 0;
  1578. }
  1579.  
  1580.  
  1581. .daftar-isi h4 {text-align:center;padding:5px}
  1582. .daftar-isi p {margin:10px}
  1583. amp-accordion>section[expanded] {line-height:i.6em;}
  1584.  
  1585. /* Costumize */
  1586. .post-thumbnail {
  1587.  width:100%;
  1588.  height:auto;
  1589.  float:left;
  1590.  margin:2px 15px 15px 0;
  1591. }
  1592. pre {
  1593. padding:.5em 1em;
  1594. margin: 0;
  1595. white-space:pre;
  1596. overflow:auto;
  1597. background-color:#f1f1f1;
  1598. font-size:14px;
  1599. clear:both;
  1600. border-left:3px solid #ccc;
  1601. color:#111;
  1602. }
  1603. code {
  1604. font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;
  1605. line-height:20px;
  1606. color:#db4437;
  1607. font-size:14px;
  1608. }
  1609. pre code {
  1610. display: block; padding: 0.5em;
  1611. line-height:1.5em;
  1612. color: black;
  1613. }
  1614. ::selection { background: #1066b9;color:white }
  1615. ::-moz-selection { background: #1066b9; color:white}
  1616. .thumbnail-cadangan {display:none}
  1617. .centered {text-align:center}
  1618.  
  1619. #blog-pager-newer-link a{
  1620.  float:left;margin-left:0;background:#aaa;color:#fff;border-radius:100px;width:30px;height:30px;transition:all .4s ease-out}
  1621.  
  1622. #blog-pager-older-link a{float:right;margin-right:0;background:#aaa;color:#fff;border-radius:100px;width:30px;height:30px;transition:all .4s ease-out;}
  1623.  
  1624. .home-link {display:none}
  1625.  
  1626. #blog-pager-newer-link a:hover, #blog-pager-older-link a:hover{background:#0379c4;color:#fff}
  1627. #blog-pager {text-align:center;margin-top:20px}
  1628.  
  1629. .font-arrow {font-size:28;vertical-align:-11px}
  1630.  
  1631. .feed-links {
  1632.  display:none;
  1633. }
  1634. .clear {clear:both}
  1635.  
  1636. /* Profile
  1637. ----------------------------------------------- */
  1638. .profile-img {
  1639.  float:left;
  1640.  margin-top:0;
  1641.  margin-right:5px;
  1642.  margin-bottom:5px;
  1643.  margin-left:0;
  1644.  padding:4px;
  1645.  border:1px solid #ccc;
  1646. }
  1647.  
  1648. .profile-data {
  1649.  margin:0;
  1650.  text-transform:uppercase;
  1651.  letter-spacing:.1em;
  1652.  font-weight:bold;
  1653.  line-height:1.6em;
  1654. }
  1655.  
  1656. .profile-datablock {
  1657.  margin:.5em 0 .5em;
  1658. }
  1659.  
  1660. .profile-textblock {
  1661.  margin:0.5em 0;
  1662.  line-height:1.6em;
  1663. }
  1664.  
  1665. .profile-link {
  1666.  text-transform:uppercase;
  1667.  letter-spacing:.1em;
  1668. }
  1669.  
  1670. /* Footer
  1671. ----------------------------------------------- */
  1672. #footer-wrapper {
  1673.  height:80px;
  1674.  width:100%;
  1675.  clear:both;
  1676.  color:#666;
  1677.  text-align:left;
  1678.  display:block;
  1679.  font-size:14px;
  1680.  background-color:#ebebeb;
  1681. }
  1682. #footer {
  1683.  max-width:768px;
  1684.  margin:0 auto;
  1685.  padding:0;
  1686.  color:#888;
  1687. }
  1688. #footer a {
  1689.  color:#666;
  1690.  text-decoration:none;
  1691. }
  1692. #footer a:hover {
  1693.  color:#0e72b5;
  1694. }
  1695. img {
  1696. max-width:100%;
  1697. height:auto;
  1698. width:auto;
  1699. }
  1700.  
  1701. .creditpic{margin-top:20px;padding:30px 0 30px;position:relative}
  1702. .credit-wrapper {max-width:768px;margin:0 auto}
  1703. .credit{line-height:1.6em;font-size:12px;font-weight:400;color:#888;clear:both;margin:0 auto;padding:0;text-align:left}
  1704. .credit-right{float:right}
  1705. .credit a,.credit a:visited{color:#666;text-decoration:none}
  1706. .credit a:hover{color:#0379C4;text-decoration:none}
  1707.  
  1708. /* RESPONSIVE */
  1709.  
  1710. @media screen and (max-width:768px) {
  1711. .search-wrapper{top:0}
  1712. }
  1713. @media screen and (max-width:736px) {
  1714. #header, #content-wrapper, #footer {max-width:690px}
  1715. #header h1 {text-align:center; margin:0 auto;float:none}
  1716. .description {display:none}
  1717. .post h2{top:-150px;}
  1718. .post-labels {margin: -225px auto 0;}
  1719. }
  1720.  
  1721. @media screen and (max-width:667px) {
  1722. #header, #content-wrapper, #footer {max-width:627px}
  1723. .post h2 {font-size:28px}
  1724. }
  1725.  
  1726. @media screen and (max-width:640px) {
  1727. #header, #content-wrapper, #footer {max-width:600px}
  1728. }
  1729. @media screen and (max-width:600px) {
  1730. #header, #content-wrapper, #footer {max-width:560px}
  1731. }
  1732. @media screen and (max-width:568px) {
  1733. #header, #content-wrapper, #footer {max-width:545px}
  1734. }
  1735. @media screen and (max-width:414px) {
  1736. #main-wrapper {width:100%}
  1737. .post {width:100%;box-shadow:none;border:none}
  1738. .post-inner {padding:20px}
  1739. .post h2 {position:relative;color:#222;background:none;font-size:24px;text-align: center;width:100%;padding:0;text-align:left;top:0}
  1740. .post-meta {position:relative;margin-top:20px}
  1741. .post-meta-left {margin-right:20px;padding-right:10px}
  1742. .post-meta-right {float:right}
  1743. a.color-label {font-size:12px;background:#999;padding:5px 10px;border-radius:3px;color:#fff;text-decoration:none;margin-bottom:15px;transition:all .4s ease-out;}
  1744. a:hover.color-label {background:#666;}
  1745. .post-labels{margin-bottom:40px;position:relative;margin:0;width:100%;text-align:left}
  1746. #main-wrapper {margin: -240px auto 15px;}
  1747. #blog-pager-older-link a {margin-right:15px}
  1748. #blog-pager-newer-link a {margin-left:15px}
  1749. #header, #footer {max-width:390px}
  1750. .credit-right{float:left}
  1751. .creditpic{padding:25px 0 20px;}
  1752. #search-box{width:270px}
  1753. }
  1754. @media screen and (max-width:375px) {
  1755. #header, #footer {max-width:350px}
  1756. }
  1757. @media screen and (max-width:360px) {
  1758. #header, #footer {max-width:340px}
  1759. }
  1760. @media screen and (max-width:320px) {
  1761. #header, #footer {max-width:300px}
  1762. }
  1763. /*]]>*/
  1764. </style>
  1765. </b:if>
  1766.  
  1767. <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>
  1768. <script async='async' src='https://cdn.ampproject.org/v0.js'/>
  1769. <script async='async' custom-element='amp-sidebar' src='https://cdn.ampproject.org/v0/amp-sidebar-0.1.js'/>
  1770. <script async='async' custom-element='amp-form' src='https://cdn.ampproject.org/v0/amp-form-0.1.js'/>
  1771. <script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/>
  1772. <script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>
  1773. <script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'/>
  1774. <script async='async' custom-element='amp-image-lightbox' src='https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js'/>
  1775. <script async='async' custom-element='amp-list' src='https://cdn.ampproject.org/v0/amp-list-0.1.js'/>
  1776. <script async='async' custom-template='amp-mustache' src='https://cdn.ampproject.org/v0/amp-mustache-0.1.js'/>
  1777. <script async='async' custom-element='amp-analytics' src='https://cdn.ampproject.org/v0/amp-analytics-0.1.js'/>
  1778. <script async='async' custom-element='amp-carousel' src='https://cdn.ampproject.org/v0/amp-carousel-0.1.js'/>
  1779. <script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
  1780. <script async='async' custom-element='amp-accordion' src='https://cdn.ampproject.org/v0/amp-accordion-0.1.js'/>
  1781. <script async='async' custom-element='amp-facebook' src='https://cdn.ampproject.org/v0/amp-facebook-0.1.js'/>
  1782. <script async='async' custom-element='amp-install-serviceworker' src='https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js'/>
  1783.  
  1784. &lt;!--</head>--&gt;&lt;/head&gt;
  1785.  
  1786. <body itemscope='itemscope' itemtype='http://schema.org/WebPage'>
  1787.  <amp-analytics id='analytics1' type='googleanalytics'>
  1788. <script type='application/json'>
  1789. {
  1790.   &quot;vars&quot;: {
  1791.     &quot;account&quot;: &quot;UA-85986961-1&quot;
  1792.   },
  1793.   &quot;triggers&quot;: {
  1794.     &quot;trackPageview&quot;: {
  1795.       &quot;on&quot;: &quot;visible&quot;,
  1796.       &quot;request&quot;: &quot;pageview&quot;
  1797.     }
  1798.   }
  1799. }
  1800. </script>
  1801. </amp-analytics>
  1802.  
  1803. <button class='btn-amp-sidebar' on='tap:sidebar.toggle'/>
  1804. <amp-sidebar id='sidebar' layout='nodisplay' side='left'>
  1805. <amp-img alt='close sidebar' class='amp-close-image' height='20' on='tap:sidebar.close' role='button' src='https://ampbyexample.com/img/ic_close_black_18dp_2x.png' tabindex='0' width='20'/>
  1806. <div class='amp-sidebar-profile'><amp-img alt='AMP HTML' height='100' layout='responsive' src='https://4.bp.blogspot.com/-KJHdUvIRBV0/WDfN1dsfk2I/AAAAAAAAArY/g7sarm8H0OkhKJXtdtF-xKdDXFPsGxOCACLcB/s1600/gl1.png' width='100'/></div>
  1807.   <span class='amp-sidebar-about'><p>Germy Load adalah sebuah blog yang berbagi seputar dunia maya. dari blogger, coding, hingga hacking. Yang di release pada pertengahan tahun 2016.</p>
  1808. <p class='soc-icon'>
  1809. <span><a href='https://web.facebook.com/GermyLoad/' itemprop='sameAs' target='_blank' title='Facebook'>
  1810. <svg viewBox='0 0 24 24'>
  1811.     <path d='M19,4V7H17A1,1 0 0,0 16,8V10H19V13H16V20H13V13H11V10H13V7.5C13,5.56 14.57,4 16.5,4M20,2H4A2,2 0 0,0 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z'/>
  1812.   </svg></a></span>
  1813. <span><a href='https://twitter.com/StevinMeong' itemprop='sameAs' target='_blank' title='Twitter'>
  1814. <svg viewBox='0 0 24 24'>
  1815.   <path d='M17.71,9.33C17.64,13.95 14.69,17.11 10.28,17.31C8.46,17.39 7.15,16.81 6,16.08C7.34,16.29 9,15.76 9.9,15C8.58,14.86 7.81,14.19 7.44,13.12C7.82,13.18 8.22,13.16 8.58,13.09C7.39,12.69 6.54,11.95 6.5,10.41C6.83,10.57 7.18,10.71 7.64,10.74C6.75,10.23 6.1,8.38 6.85,7.16C8.17,8.61 9.76,9.79 12.37,9.95C11.71,7.15 15.42,5.63 16.97,7.5C17.63,7.38 18.16,7.14 18.68,6.86C18.47,7.5 18.06,7.97 17.56,8.33C18.1,8.26 18.59,8.13 19,7.92C18.75,8.45 18.19,8.93 17.71,9.33M20,2H4A2,2 0 0,0 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z'/>
  1816.   </svg></a></span>
  1817. <span><a href='https://plus.google.com/104920062110694515505' itemprop='sameAs' target='_blank' title='Google Plus'>
  1818. <svg viewBox='0 0 24 24'>
  1819.     <path d='M20,2A2,2 0 0,1 22,4V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V4C2,2.89 2.9,2 4,2H20M20,12H18V10H17V12H15V13H17V15H18V13H20V12M9,11.29V13H11.86C11.71,13.71 11,15.14 9,15.14C7.29,15.14 5.93,13.71 5.93,12C5.93,10.29 7.29,8.86 9,8.86C10,8.86 10.64,9.29 11,9.64L12.36,8.36C11.5,7.5 10.36,7 9,7C6.21,7 4,9.21 4,12C4,14.79 6.21,17 9,17C11.86,17 13.79,15 13.79,12.14C13.79,11.79 13.79,11.57 13.71,11.29H9Z'/>
  1820.   </svg></a></span>
  1821. <span class='youtube'><a href='https://www.youtube.com/channel/UCt--WNlqYTizbJzLuNCj9bQ' itemprop='sameAs' target='_blank' title='YouTube'>
  1822. <svg viewBox='0 0 24 24'>
  1823.     <path d='M10,16.5V7.5L16,12M20,4.4C19.4,4.2 15.7,4 12,4C8.3,4 4.6,4.19 4,4.38C2.44,4.9 2,8.4 2,12C2,15.59 2.44,19.1 4,19.61C4.6,19.81 8.3,20 12,20C15.7,20 19.4,19.81 20,19.61C21.56,19.1 22,15.59 22,12C22,8.4 21.56,4.91 20,4.4Z'/>
  1824.   </svg></a></span>
  1825. </p>
  1826. </span>
  1827. <nav>
  1828.     <ul>
  1829.       <li><a class='sidebaramp' href='/'>Home</a></li>
  1830.       <li><a class='sidebaramp' href='https://germyload.blogspot.co.id/search/label/blogger' itemprop='url' title='Blogger'>Blogger</a></li>
  1831.       <li>      
  1832. </li>
  1833.       <li><a class='sidebaramp' href='https://germyload.blogspot.co.id/search/label/informasi' itemprop='url' title='Informasi'>Informasi</a></li>
  1834.       <li><a class='sidebaramp' href='https://germyload.blogspot.co.id/search/label/template' itemprop='url' title='Template'>Template</a></li>
  1835.       <li><a class='sidebaramp' href='https://germyload.blogspot.co.id/search/label/widget' itemprop='url' title='Widget'>Widget</a></li>
  1836.       <li><a class='sidebaramp' href='https://germyload.blogspot.co.id/p/site-map.html' itemprop='url' title='Sitemap'>Sitemap</a></li>
  1837.     </ul>
  1838.   </nav>
  1839.   </amp-sidebar>
  1840.  
  1841.    <header id='header-wrapper' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
  1842.       <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  1843.         <b:widget id='Header1' locked='true' title='tester (Header)' type='Header' version='1' visible='true'>
  1844.           <b:includable id='main'>
  1845.  
  1846.   <b:if cond='data:useImage'>
  1847.     <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
  1848.       <!--
  1849.      Show image as background to text. You can't really calculate the width
  1850.      reliably in JS because margins are not taken into account by any of
  1851.      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
  1852.      width if the user is using shrink to fit.
  1853.      This results in a margin-width's worth of pixels being cropped. If the
  1854.      user is not using shrink to fit then we expand the header.
  1855.      -->
  1856.       <b:if cond='data:mobile'>
  1857.           <div id='header-inner'>
  1858.             <div class='titlewrapper' style='background: transparent'>
  1859.               <h1 class='title' style='background: transparent; border-width: 0px'>
  1860.                 <b:include name='title'/>
  1861.               </h1>
  1862.             </div>
  1863.             <b:include name='description'/>
  1864.           </div>
  1865.         <b:else/>
  1866.           <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
  1867.             <div class='titlewrapper' style='background: transparent'>
  1868.               <h1 class='title' style='background: transparent; border-width: 0px'>
  1869.                 <b:include name='title'/>
  1870.               </h1>
  1871.             </div>
  1872.             <b:include name='description'/>
  1873.           </div>
  1874.         </b:if>
  1875.     <b:else/>
  1876.       <!--Show the image only-->
  1877.       <div id='header-inner'>
  1878.         <a expr:href='data:blog.homepageUrl' style='display: block'>
  1879.           <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
  1880.         </a>
  1881.         <!--Show the description-->
  1882.         <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
  1883.           <b:include name='description'/>
  1884.         </b:if>
  1885.       </div>
  1886.     </b:if>
  1887.   <b:else/>
  1888.     <!--No header image -->
  1889.     <div id='header-inner'>
  1890.       <div class='titlewrapper'>
  1891.         <h1 class='title'>
  1892.           <b:include name='title'/>
  1893.         </h1>
  1894.       </div>
  1895.       <b:include name='description'/>
  1896.     </div>
  1897.   </b:if>
  1898. </b:includable>
  1899.           <b:includable id='description'>
  1900.   <div class='descriptionwrapper'>
  1901.     <p class='description'><span><data:description/></span></p>
  1902.   </div>
  1903. </b:includable>
  1904.           <b:includable id='title'>
  1905.     <a expr:href='data:blog.homepageUrl' expr:title='data:title' itemprop='url'><span itemprop='name'><amp-img alt='Logo' expr:title='data:title' height='30' src='https://2.bp.blogspot.com/-Gwr5P8uOy7I/WARCMkUJUgI/AAAAAAAAHvs/wbnz3_FS8qI-RDwV9Gk4Tkk1LUfN0eCngCK4B/s1600/ampicon2.png' width='30'/> <data:title/></span></a>
  1906. </b:includable>
  1907.         </b:widget>
  1908.       </b:section>
  1909.  
  1910. <amp-accordion>
  1911.     <section class='acc-header'>
  1912.       <h5>
  1913.         <span class='show-more search-fixed'><i class='material-icons  mi-22'>&#59574;</i></span>
  1914.         <span class='show-less search-fixed'><i class='material-icons  mi-22'>&#58829;</i></span>
  1915.       </h5>
  1916. <div class='search-wrapper'>
  1917. <div id='search-box'>
  1918. <div itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WebSite'>
  1919. <meta content='https://germyload.blogspot.com' itemprop='url'/>
  1920.   <form action='https://germyload.blogspot.com/search' itemprop='potentialAction' itemscope='itemscope' itemtype='http://schema.org/SearchAction' method='get' target='_blank'>
  1921. <meta content='https://germyload.blogspot.com/search?q={q}' itemprop='target'/>
  1922. <input class='search-form' id='feed-q-input' itemprop='query-input' name='q' placeholder='Search' required='required' type='text'/>
  1923. <button class='search-button' title='Search' type='submit'><i class='material-icons'>&#59574;</i></button>
  1924.   </form></div>
  1925. </div>
  1926. </div>
  1927.     </section>
  1928.   </amp-accordion>
  1929.  
  1930.     </header>
  1931.  
  1932.  
  1933.  
  1934.  
  1935. <div id='outer-wrapper'>
  1936.     <div id='content-wrapper'>
  1937.      <div itemscope='itemscope' itemtype='http://schema.org/Blog'>
  1938.       <div id='main-wrapper'>
  1939.         <b:section class='main' id='main' showaddelement='no'>
  1940.           <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1' visible='true'>
  1941.             <b:includable id='main' var='top'>
  1942.   <b:if cond='data:mobile == &quot;false&quot;'>
  1943.  
  1944.     <!-- posts -->
  1945.     <div class='blog-posts hfeed'>
  1946.  
  1947.       <b:include data='top' name='status-message'/>
  1948.  
  1949.       <b:loop values='data:posts' var='post'>
  1950.         <b:if cond='data:post.isDateStart'>
  1951.           <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
  1952.             &lt;/div&gt;&lt;/div&gt;
  1953.           </b:if>
  1954.         </b:if>
  1955.         <b:if cond='data:post.isDateStart'>
  1956.           &lt;div class=&quot;date-outer&quot;&gt;
  1957.         </b:if>
  1958.         <b:if cond='data:post.isDateStart'>
  1959.           &lt;div class=&quot;date-posts&quot;&gt;
  1960.         </b:if>
  1961.         <div class='post-outer'>
  1962.         <b:include data='post' name='post'/>
  1963.         <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  1964.           <b:if cond='data:post.showThreadedComments'>
  1965.             <b:include data='post' name='threaded_comments'/>
  1966.           <b:else/>
  1967.             <b:include data='post' name='comments'/>
  1968.           </b:if>
  1969.         </b:if>
  1970.         <b:if cond='data:blog.pageType == &quot;item&quot;'>
  1971.           <b:if cond='data:post.showThreadedComments'>
  1972.             <b:include data='post' name='threaded_comments'/>
  1973.           <b:else/>
  1974.             <b:include data='post' name='comments'/>
  1975.           </b:if>
  1976.         </b:if>
  1977.         </div>
  1978.       </b:loop>
  1979.       <b:if cond='data:numPosts != 0'>
  1980.         &lt;/div&gt;&lt;/div&gt;
  1981.       </b:if>
  1982.       <data:adEnd/>
  1983.     </div>
  1984.  
  1985.     <!-- navigation -->
  1986.     <b:include name='nextprev'/>
  1987.  
  1988.  
  1989.   <b:else/>
  1990.     <b:include name='mobile-main'/>
  1991.   </b:if>
  1992.  
  1993.  
  1994. </b:includable>
  1995.             <b:includable id='backlinkDeleteIcon' var='backlink'>
  1996.   <span expr:class='&quot;item-control &quot; + data:backlink.adminClass'>
  1997.     <a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
  1998.       <img src='https://resources.blogblog.com/img/icon_delete13.gif'/>
  1999.     </a>
  2000.   </span>
  2001. </b:includable>
  2002.             <b:includable id='backlinks' var='post'>
  2003.   <a name='links'/><h4><data:post.backlinksLabel/></h4>
  2004.   <b:if cond='data:post.numBacklinks != 0'>
  2005.     <dl class='comments-block' id='comments-block'>
  2006.       <b:loop values='data:post.backlinks' var='backlink'>
  2007.         <div class='collapsed-backlink backlink-control'>
  2008.           <dt class='comment-title'>
  2009.             <span class='backlink-toggle-zippy'>&#160;</span>
  2010.             <a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
  2011.             <b:include data='backlink' name='backlinkDeleteIcon'/>
  2012.           </dt>
  2013.           <dd class='comment-body collapseable'>
  2014.             <data:backlink.snippet/>
  2015.           </dd>
  2016.           <dd class='comment-footer collapseable'>
  2017.             <span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span>
  2018.             <span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span>
  2019.           </dd>
  2020.         </div>
  2021.       </b:loop>
  2022.     </dl>
  2023.   </b:if>
  2024.   <p class='comment-footer'>
  2025.     <a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + &quot;_backlinks-create-link&quot;' target='_blank'><data:post.createLinkLabel/></a>
  2026.   </p>
  2027. </b:includable>
  2028.             <b:includable id='breadcrumb' var='posts'>
  2029. <b:if cond='data:blog.homepageUrl != data:blog.url and data:blog.pageType == &quot;item&quot;'>
  2030. <b:loop values='data:posts' var='post'>
  2031. <b:if cond='data:post.labels'>
  2032. <div class='breadcrumbs' id='breadcrumbs'>
  2033. <div id='bread-crumbs'>
  2034. <span itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'><i class='material-icons breadcrumbs-icon'>&#59530;</i> Home&amp;nbsp;</span></a></span>&amp;nbsp;<i class='material-icons breadcrumbs-icon'>&#58133;</i>
  2035. <b:loop values='data:post.labels' var='label'>
  2036. <span itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?max-results=15&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a><b:if cond='data:label.isLast != &quot;true&quot;'> <i class='material-icons breadcrumbs-icon'>&#58133;</i> </b:if></span>
  2037. </b:loop>
  2038.  <i class='material-icons breadcrumbs-icon'>&#58133;</i> <span><data:post.title/></span>
  2039. </div></div>
  2040. </b:if>
  2041. </b:loop>
  2042. </b:if>
  2043. </b:includable>
  2044.             <b:includable id='comment-form' var='post'>
  2045.   <!--<div class='comment-form'>
  2046.    <a name='comment-form'/>
  2047.    <b:if cond='data:mobile'>
  2048.      <h4 id='comment-post-message'>
  2049.        <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
  2050.      <p><data:blogCommentMessage/></p>
  2051.      <data:blogTeamBlogMessage/>
  2052.      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
  2053.      <iframe allowtransparency='' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' src='' style='display: none' width='100%'/>
  2054.    <b:else/>
  2055.      <h4 id='comment-post-message'><data:postCommentMsg/></h4>
  2056.      <p><data:blogCommentMessage/></p>
  2057.      <data:blogTeamBlogMessage/>
  2058.      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
  2059.      <iframe allowtransparency='' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' src='' width='100%'/>
  2060.    </b:if>-->
  2061.    <!-- <data:post.friendConnectJs/>
  2062.    <data:post.cmtfpIframe/>
  2063.    <script>
  2064.      BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
  2065.    </script>
  2066.  </div>-->
  2067. </b:includable>
  2068.             <b:includable id='commentDeleteIcon' var='comment'>
  2069.   <span expr:class='&quot;item-control &quot; + data:comment.adminClass'>
  2070.     <b:if cond='data:showCmtPopup'>
  2071.       <div class='goog-toggle-button'>
  2072.         <div class='goog-inline-block comment-action-icon'/>
  2073.       </div>
  2074.     <b:else/>
  2075.       <a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
  2076.         <img src='https://resources.blogblog.com/img/icon_delete13.gif'/>
  2077.       </a>
  2078.     </b:if>
  2079.   </span>
  2080. </b:includable>
  2081.             <b:includable id='comment_count_picker' var='post'>
  2082.   <b:if cond='data:post.commentSource == 1'>
  2083.     <span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-post-url='data:post.url' expr:data-url='data:post.url.canonical.http'>
  2084.     </span>
  2085.   <b:else/>
  2086.     <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
  2087.       <data:post.commentLabelFull/>:
  2088.     </a>
  2089.   </b:if>
  2090. </b:includable>
  2091.             <b:includable id='comment_picker' var='post'>
  2092.   <b:if cond='data:post.commentSource == 1'>
  2093.     <b:include data='post' name='iframe_comments'/>
  2094.   <b:elseif cond='data:post.showThreadedComments'/>
  2095.     <b:include data='post' name='threaded_comments'/>
  2096.   <b:else/>
  2097.     <b:include data='post' name='comments'/>
  2098.   </b:if>
  2099. </b:includable>
  2100.             <b:includable id='comments' var='post'>
  2101.   <!-- <div class='comments' id='comments'>
  2102.    <b:if cond='data:post.allowComments'>
  2103.      <h4>
  2104.        <b:if cond='data:post.numComments == 1'>
  2105.          1 <data:commentLabel/>:
  2106.        <b:else/>
  2107.          <data:post.numComments/> <data:commentLabelPlural/>:
  2108.        </b:if>
  2109.      </h4>
  2110.  
  2111.      <b:if cond='data:post.commentPagingRequired'>
  2112.        <span class='paging-control-container'>
  2113.          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
  2114.          &#160;
  2115.          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
  2116.          &#160;
  2117.          <data:post.commentRangeText/>
  2118.          &#160;
  2119.          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
  2120.          &#160;
  2121.          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
  2122.        </span>
  2123.      </b:if>
  2124.  
  2125.      <div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
  2126.        <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
  2127.          <b:loop values='data:post.comments' var='comment'>
  2128.            <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
  2129.              <b:if cond='data:comment.favicon'>
  2130.                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
  2131.              </b:if>
  2132.              <a expr:name='data:comment.anchorName'/>
  2133.              <b:if cond='data:blog.enabledCommentProfileImages'>
  2134.                <data:comment.authorAvatarImage/>
  2135.              </b:if>
  2136.              <b:if cond='data:comment.authorUrl'>
  2137.                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
  2138.              <b:else/>
  2139.                <data:comment.author/>
  2140.              </b:if>
  2141.              <data:commentPostedByMsg/>
  2142.            </dt>
  2143.            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
  2144.              <b:if cond='data:comment.isDeleted'>
  2145.                <span class='deleted-comment'><data:comment.body/></span>
  2146.              <b:else/>
  2147.                <p>
  2148.                  <data:comment.body/>
  2149.                </p>
  2150.              </b:if>
  2151.            </dd>
  2152.            <dd class='comment-footer'>
  2153.              <span class='comment-timestamp'>
  2154.                <a expr:href='data:comment.url' title='comment permalink'>
  2155.                  <data:comment.timestamp/>
  2156.                </a>
  2157.                <b:include data='comment' name='commentDeleteIcon'/>
  2158.              </span>
  2159.            </dd>
  2160.          </b:loop>
  2161.        </dl>
  2162.      </div>
  2163.  
  2164.      <b:if cond='data:post.commentPagingRequired'>
  2165.        <span class='paging-control-container'>
  2166.          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
  2167.            <data:post.oldestLinkText/>
  2168.          </a>
  2169.          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
  2170.            <data:post.olderLinkText/>
  2171.          </a>
  2172.          &#160;
  2173.          <data:post.commentRangeText/>
  2174.          &#160;
  2175.          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
  2176.            <data:post.newerLinkText/>
  2177.          </a>
  2178.          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
  2179.            <data:post.newestLinkText/>
  2180.          </a>
  2181.        </span>
  2182.      </b:if>
  2183.  
  2184.      <p class='comment-footer'>
  2185.        <b:if cond='data:post.embedCommentForm'>
  2186.          <b:if cond='data:post.allowNewComments'>
  2187.            <b:include data='post' name='comment-form'/>
  2188.          <b:else/>
  2189.            <data:post.noNewCommentsText/>
  2190.          </b:if>
  2191.        <b:else/>
  2192.          <b:if cond='data:post.allowComments'>
  2193.            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
  2194.          </b:if>
  2195.        </b:if>
  2196.  
  2197.      </p>
  2198.    </b:if>
  2199.    <b:if cond='data:showCmtPopup'>
  2200.      <div id='comment-popup'>
  2201.        <amp-iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
  2202.        </amp-iframe>
  2203.      </div>
  2204.    </b:if>
  2205.  
  2206.    <div id='backlinks-container'>
  2207.    <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
  2208.       <b:if cond='data:post.showBacklinks'>
  2209.         <b:include data='post' name='backlinks'/>
  2210.       </b:if>
  2211.    </div>
  2212.    </div>
  2213.  </div> -->
  2214. </b:includable>
  2215.             <b:includable id='disqus-comments' var='post'>
  2216. <div class='disqus-comments' id='disqus_comments'>
  2217. <amp-accordion>
  2218.     <section>
  2219. <h4>
  2220. <span class='show-more disqus-hide'>Tambahkan Komentar</span>
  2221. </h4>
  2222. <span class='disqus-box'><amp-iframe expr:src='&quot;https://cdn.rawgit.com/kangismet/ki-html/master/disqus4.html?shortname=stevin_germy&amp;url=&quot; + data:blog.canonicalUrl' frameborder='0' height='300' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups allow-forms' width='600'>
  2223. <div aria-label='Disqus Comments' overflow='' role='button' tabindex='0'>Disqus Comments</div>
  2224.   </amp-iframe></span>
  2225. </section>
  2226.   </amp-accordion>
  2227.                 </div>
  2228. </b:includable>
  2229.             <b:includable id='feedLinks'>
  2230.   <b:if cond='data:blog.pageType != &quot;item&quot;'> <!-- Blog feed links -->
  2231.     <b:if cond='data:feedLinks'>
  2232.       <div class='blog-feeds'>
  2233.         <b:include data='feedLinks' name='feedLinksBody'/>
  2234.       </div>
  2235.     </b:if>
  2236.  
  2237.     <b:else/> <!--Post feed links -->
  2238.     <div class='post-feeds'>
  2239.       <b:loop values='data:posts' var='post'>
  2240.         <b:if cond='data:post.allowComments'>
  2241.           <b:if cond='data:post.feedLinks'>
  2242.             <b:include data='post.feedLinks' name='feedLinksBody'/>
  2243.           </b:if>
  2244.         </b:if>
  2245.       </b:loop>
  2246.     </div>
  2247.   </b:if>
  2248. </b:includable>
  2249.             <b:includable id='feedLinksBody' var='links'>
  2250. </b:includable>
  2251.             <b:includable id='iframe_comments' var='post'>
  2252.  
  2253.   <b:if cond='data:post.allowIframeComments'>
  2254.     <script expr:src='data:post.iframeCommentSrc'/>
  2255.     <div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data-viewtype='data:post.viewType'/>
  2256.  
  2257.     <b:if cond='data:post.embedCommentForm == &quot;false&quot;'>
  2258.       <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
  2259.     </b:if>
  2260.   </b:if>
  2261. </b:includable>
  2262.             <b:includable id='mobile-index-post' var='post'>
  2263.   <div class='mobile-date-outer date-outer'>
  2264.     <b:if cond='data:post.dateHeader'>
  2265.       <div class='date-header'>
  2266.         <span><data:post.dateHeader/></span>
  2267.       </div>
  2268.     </b:if>
  2269.  
  2270.     <div class='mobile-post-outer'>
  2271.       <a expr:href='data:post.url'>
  2272.         <h3 class='mobile-index-title entry-title'>
  2273.           <data:post.title/>
  2274.         </h3>
  2275.  
  2276.         <div class='mobile-index-arrow'>&amp;rsaquo;</div>
  2277.  
  2278.         <div class='mobile-index-contents'>
  2279.           <b:if cond='data:post.thumbnailUrl'>
  2280.             <div class='mobile-index-thumbnail'>
  2281.               <div class='Image'>
  2282.                 <img expr:src='data:post.thumbnailUrl'/>
  2283.               </div>
  2284.             </div>
  2285.           </b:if>
  2286.  
  2287.           <div class='post-body'>
  2288.             <b:if cond='data:post.snippet'><data:post.snippet/></b:if>
  2289.           </div>
  2290.         </div>
  2291.  
  2292.         <div class='clear'/>
  2293.       </a>
  2294.  
  2295.       <div class='mobile-index-comment'>
  2296.         <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  2297.           <b:if cond='data:post.allowComments'>
  2298.             <b:if cond='data:post.numComments != 0'>
  2299.               <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>
  2300.             </b:if>
  2301.           </b:if>
  2302.         </b:if>
  2303.       </div>
  2304.     </div>
  2305.   </div>
  2306. </b:includable>
  2307.             <b:includable id='mobile-main' var='top'>
  2308.     <!-- posts -->
  2309.     <div class='blog-posts hfeed'>
  2310.  
  2311.       <b:include data='top' name='status-message'/>
  2312.  
  2313.       <b:if cond='data:blog.pageType == &quot;index&quot;'>
  2314.         <b:loop values='data:posts' var='post'>
  2315.           <b:include data='post' name='mobile-index-post'/>
  2316.         </b:loop>
  2317.       <b:else/>
  2318.         <b:loop values='data:posts' var='post'>
  2319.           <b:include data='post' name='mobile-post'/>
  2320.         </b:loop>
  2321.       </b:if>
  2322.     </div>
  2323.  
  2324.    <b:include name='mobile-nextprev'/>
  2325. </b:includable>
  2326.             <b:includable id='mobile-nextprev'>
  2327.   <div class='blog-pager' id='blog-pager'>
  2328.     <b:if cond='data:newerPageUrl'>
  2329.       <div class='mobile-link-button' id='blog-pager-newer-link'>
  2330.       <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&amp;lsaquo;</a>
  2331.       </div>
  2332.     </b:if>
  2333.  
  2334.     <b:if cond='data:olderPageUrl'>
  2335.       <div class='mobile-link-button' id='blog-pager-older-link'>
  2336.       <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>&amp;rsaquo;</a>
  2337.       </div>
  2338.     </b:if>
  2339.  
  2340.     <div class='mobile-link-button' id='blog-pager-home-link'>
  2341.     <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
  2342.     </div>
  2343.  
  2344.     <div class='mobile-desktop-link'>
  2345.       <a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a>
  2346.     </div>
  2347.  
  2348.   </div>
  2349.   <div class='clear'/>
  2350. </b:includable>
  2351.             <b:includable id='mobile-post' var='post'>
  2352.   <div class='date-outer'>
  2353.     <b:if cond='data:post.dateHeader'>
  2354.       <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
  2355.     </b:if>
  2356.     <div class='date-posts'>
  2357.       <div class='post-outer'>
  2358.  
  2359.         <div class='post hentry uncustomized-post-template'>
  2360.           <b:if cond='data:post.title'>
  2361.             <h3 class='post-title entry-title'>
  2362.               <b:if cond='data:post.link'>
  2363.                 <a expr:href='data:post.link'><data:post.title/></a>
  2364.               <b:else/>
  2365.                 <b:if cond='data:post.url'>
  2366.                   <b:if cond='data:blog.url != data:post.url'>
  2367.                     <a expr:href='data:post.url'><data:post.title/></a>
  2368.                   <b:else/>
  2369.                     <data:post.title/>
  2370.                   </b:if>
  2371.                 <b:else/>
  2372.                   <data:post.title/>
  2373.                 </b:if>
  2374.               </b:if>
  2375.             </h3>
  2376.           </b:if>
  2377.  
  2378.           <div class='post-header'>
  2379.             <div class='post-header-line-1'/>
  2380.           </div>
  2381.  
  2382.           <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
  2383.             <data:post.body/>
  2384.             <div class='clear'/> <!-- clear for photos floats -->
  2385.           </div>
  2386.  
  2387.           <div class='post-footer'>
  2388.             <div class='post-footer-line post-footer-line-1'>
  2389.             </div>
  2390.  
  2391.             <div class='post-footer-line post-footer-line-2'>
  2392.             </div>
  2393.  
  2394.           </div>
  2395.         </div>
  2396.  
  2397.         <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  2398.           <b:if cond='data:post.showThreadedComments'>
  2399.             <b:include data='post' name='threaded_comments'/>
  2400.           <b:else/>
  2401.             <b:include data='post' name='comments'/>
  2402.           </b:if>
  2403.         </b:if>
  2404.         <b:if cond='data:blog.pageType == &quot;item&quot;'>
  2405.           <b:if cond='data:post.showThreadedComments'>
  2406.             <b:include data='post' name='threaded_comments'/>
  2407.           <b:else/>
  2408.             <b:include data='post' name='comments'/>
  2409.           </b:if>
  2410.         </b:if>
  2411.       </div>
  2412.     </div>
  2413.   </div>
  2414. </b:includable>
  2415.             <b:includable id='nextprev'>
  2416.   <div class='blog-pager' id='blog-pager'>
  2417.     <b:if cond='data:newerPageUrl'>
  2418.       <span id='blog-pager-newer-link'>
  2419.       <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><i class='material-icons font-arrow'>&#58132;</i></a>
  2420.       </span>
  2421.     </b:if>
  2422.  
  2423.     <b:if cond='data:olderPageUrl'>
  2424.       <span id='blog-pager-older-link'>
  2425.       <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><i class='material-icons font-arrow'>&#58828;</i></a>
  2426.       </span>
  2427.     </b:if>
  2428.  
  2429.     <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
  2430.  
  2431.     <b:if cond='data:mobileLinkUrl'>
  2432.       <div class='blog-mobile-link'>
  2433.         <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
  2434.       </div>
  2435.     </b:if>
  2436.  
  2437.   </div>
  2438.   <div class='clear'/>
  2439. </b:includable>
  2440.             <b:includable id='post' var='post'>
  2441.  
  2442.   <article class='post hentry' itemscope='itemscope' itemtype='http://schema.org/Blog'>
  2443.  
  2444.     <b:if cond='data:post.firstImageUrl'>
  2445.       <meta expr:content='data:post.firstImageUrl' itemprop='image'/>
  2446.     <b:else/>
  2447.       <amp-img alt='thumbnail-cadangan' class='thumbnail-cadangan' height='393' itemprop='image' src='https://4.bp.blogspot.com/-iWBMw0dwhQk/WAQpURA0MnI/AAAAAAAAHvc/VQ4aISNqoSgHC7BWAJyjpn0oFjFOsApCACK4B/s1600/amphtml-thumbnail2.jpg' width='769'/>
  2448.     </b:if>
  2449.       <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  2450.   <b:if cond='data:blog.pageType != &quot;item&quot;'>
  2451.     <b:if cond='data:post.firstImageUrl'>
  2452.       <a expr:href='data:post.url'><amp-img alt='thumbnail' expr:src='data:post.firstImageUrl' height='393' layout='responsive' width='768'/></a>
  2453.     <b:else/>
  2454.       <a expr:href='data:post.url'><amp-img alt='thumbnail' height='393' layout='responsive' src='https://4.bp.blogspot.com/-iWBMw0dwhQk/WAQpURA0MnI/AAAAAAAAHvc/VQ4aISNqoSgHC7BWAJyjpn0oFjFOsApCACK4B/s1600/amphtml-thumbnail2.jpg' width='769'/></a>
  2455.     </b:if>
  2456.   </b:if>
  2457. </b:if>
  2458.  
  2459. <b:if cond='data:blog.pageType == &quot;item&quot;'>
  2460. <div class='image-wrapper'>
  2461.     <div class='post-firstimage'>
  2462.         <b:if cond='data:blog.postImageUrl'>
  2463.             <div class='firstimage'>
  2464.                 <amp-img expr:alt='data:post.title' expr:src='data:blog.postImageUrl' height='393' layout='responsive' width='769'/>
  2465.                 </div>
  2466.                 <b:else/>
  2467.               <div class='firstimage'>
  2468.                 <amp-img expr:alt='data:post.title' expr:title='data:post.title' height='393' layout='responsive' src='https://4.bp.blogspot.com/-iWBMw0dwhQk/WAQpURA0MnI/AAAAAAAAHvc/VQ4aISNqoSgHC7BWAJyjpn0oFjFOsApCACK4B/s1600/amphtml-thumbnail2.jpg' width='769'/>
  2469.                 </div>
  2470.             </b:if>
  2471.         </div>
  2472.   </div>
  2473. </b:if>
  2474.  
  2475. <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  2476. <div class='image-wrapper'>
  2477.     <div class='post-firstimage'>
  2478.         <b:if cond='data:blog.postImageUrl'>
  2479.             <div class='firstimage'>
  2480.                 <amp-img expr:alt='data:post.title' expr:src='data:blog.postImageUrl' height='270' layout='responsive' width='769'/>
  2481.                 </div>
  2482.                 <b:else/>
  2483.               <div class='firstimage'>
  2484.                 <amp-img expr:alt='data:post.title' expr:title='data:post.title' height='270' layout='responsive' src='https://1.bp.blogspot.com/-SCn6U5g7oBg/WAcwAIej2RI/AAAAAAAAHy0/PzEuRa1-xXA3sTfmbno1ynE1WUrqcRn-wCK4B/s1600/amphtml-thumbnail3.jpg' width='769'/>
  2485.                 </div>
  2486.             </b:if>
  2487.         </div>
  2488.   </div>
  2489. </b:if>
  2490.  
  2491.  
  2492. <div class='post-inner'>
  2493.  
  2494.     <b:if cond='data:post.title'>
  2495.       <h2 class='post-title entry-title' itemprop='headline'>
  2496.       <b:if cond='data:post.link'>
  2497.         <a expr:href='data:post.link' itemprop='url' rel='bookmark'><data:post.title/></a>
  2498.       <b:else/>
  2499.         <b:if cond='data:post.url'>
  2500.           <b:if cond='data:blog.url != data:post.url'>
  2501.             <a expr:href='data:post.url' itemprop='url' rel='bookmark'><data:post.title/></a>
  2502.           <b:else/>
  2503.             <data:post.title/>
  2504.           </b:if>
  2505.         <b:else/>
  2506.           <data:post.title/>
  2507.         </b:if>
  2508.       </b:if>
  2509.       </h2>
  2510.     </b:if>
  2511.  
  2512. <b:if cond='data:blog.pageType == &quot;item&quot;'>
  2513.            <b:if cond='data:post.labels'>
  2514.              <div class='post-labels'>                           
  2515.                 <b:loop values='data:post.labels' var='label'>
  2516.                 <a class='color-label' expr:href='data:label.url' rel='tag nofollow'><span itemprop='keywords'><data:label.name/></span></a>
  2517.                 </b:loop>              
  2518.            </div>
  2519.            </b:if>
  2520. </b:if>
  2521.  
  2522. <!-- Post Meta -->
  2523. <b:if cond='data:blog.pageType == &quot;item&quot;'>
  2524. <b:include data='posts' name='breadcrumb'/>
  2525.           <div class='post-meta'>
  2526. <div class='post-meta-left'>
  2527.            <div class='post-meta-span meta-author'>By
  2528.               <span class='post-author vcard'>
  2529.                 <b:if cond='data:top.showAuthor'>
  2530.                   <b:if cond='data:post.authorProfileUrl'>
  2531.                     <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
  2532.                       <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
  2533.                       <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
  2534.                         <span itemprop='name'><data:post.author/></span>
  2535.                       </a>
  2536.                     </span>
  2537.                   <b:else/>
  2538.                     <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
  2539.                       <span itemprop='name'><data:post.author/></span>
  2540.                     </span>
  2541.                   </b:if>
  2542.                 </b:if>
  2543.               </span>
  2544.            </div>          
  2545.            <b:if cond='data:post.dateHeader'>
  2546.            <div class='post-meta-span meta-date'>
  2547.              <span class='fa fa-calendar-check-o'/>
  2548.               <abbr class='updated published' expr:title='data:post.timestampISO8601' itemprop='datePublished'>
  2549.               <data:post.dateHeader/>
  2550.               </abbr>
  2551.            </div>
  2552.            </b:if>
  2553.   </div>
  2554.   <div class='post-meta-right'>
  2555.    <amp-social-share height='35' type='twitter' width='35'> </amp-social-share>
  2556.     <amp-social-share height='35' type='gplus' width='35'/>
  2557.     <amp-social-share height='35' type='pinterest' width='35'/>
  2558.     <amp-social-share height='35' type='linkedin' width='35'/>
  2559.     <amp-social-share data-param-app_id='254325784911610' height='35' type='facebook' width='35'/>
  2560.   </div>
  2561.         </div>
  2562.   <div class='clear'/>
  2563.   </b:if>
  2564. <!-- Post Meta End -->
  2565.  
  2566.     <div class='post-header'>
  2567.     <div class='post-header-line-1'/>
  2568.     </div>
  2569.  
  2570.  
  2571.     <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
  2572. <meta expr:content='data:blog.metaDescription' itemprop='description'/>
  2573.  
  2574.  
  2575. <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  2576.   <b:if cond='data:blog.pageType != &quot;item&quot;'>
  2577.     <div class='post-snippet'>
  2578.       <data:post.snippet/>
  2579.     </div>
  2580. </b:if>
  2581. </b:if>
  2582.  
  2583. <b:if cond='data:blog.pageType == &quot;item&quot;'>
  2584.   <data:post.body/>
  2585. </b:if>
  2586. <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  2587.   <data:post.body/>
  2588. </b:if>
  2589.       <div class='clear'/> <!-- clear for photos floats -->
  2590.     </div>
  2591.  
  2592.     <b:if cond='data:post.hasJumpLink'>
  2593.       <div class='jump-link'>
  2594.         <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
  2595.       </div>
  2596.     </b:if>
  2597.  
  2598. <b:if cond='data:blog.pageType == &quot;item&quot;'>
  2599.     <div class='post-footer'>
  2600.     <div class='post-footer-line post-footer-line-1'>
  2601.  
  2602. <b:if cond='data:post.labels'>
  2603.  <b:loop index='x' values='data:post.labels' var='label'>
  2604.    <b:if cond='data:x==0'>
  2605.     <div class='related-box'>
  2606.     <amp-iframe expr:src='&quot;https://kangismet.github.io/blogger-related-posts/related3.html?label=&quot; + data:label.name + &quot;&amp;url=&quot; + data:blog.homepageUrl' frameborder='0' height='1100' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' width='650'>
  2607.     <div aria-label='Related Posts' overflow='' role='button' tabindex='0'>Related Posts</div>
  2608.    </amp-iframe>
  2609.    </div>
  2610.    </b:if>
  2611.  </b:loop>
  2612. <div class='clear'/>
  2613. </b:if>
  2614. <div class='clear'/>
  2615. <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='disqus-comments'/>
  2616.     </div>
  2617.  
  2618.  
  2619.       <div class='post-footer-line post-footer-line-2'>
  2620.       </div>
  2621.  
  2622.       <div class='post-footer-line post-footer-line-3'><span class='post-location'>
  2623.         <b:if cond='data:top.showLocation'>
  2624.           <b:if cond='data:post.location'>
  2625.             <data:postLocationLabel/>
  2626.             <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
  2627.           </b:if>
  2628.         </b:if>
  2629.       </span> </div>
  2630.     </div>
  2631.     </b:if>
  2632. </div>
  2633.   </article>              
  2634. </b:includable>
  2635.             <b:includable id='postQuickEdit' var='post'>
  2636.   <b:if cond='data:post.editUrl'>
  2637.     <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
  2638.       <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
  2639.         <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
  2640.       </a>
  2641.     </span>
  2642.   </b:if>
  2643. </b:includable>
  2644.             <b:includable id='shareButtons' var='post'>
  2645.   <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' 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 + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' 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 + &quot;&amp;target=twitter&quot;' 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 + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' 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 + &quot;&amp;target=pinterest&quot;' 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>
  2646. </b:includable>
  2647.             <b:includable id='status-message'>
  2648.   <b:if cond='data:navMessage'>
  2649.   <div class='status-msg-wrap'>
  2650.     <div class='status-msg-body'>
  2651.       <data:navMessage/>
  2652.     </div>
  2653.     <div class='status-msg-border'>
  2654.       <div class='status-msg-bg'>
  2655.         <div class='status-msg-hidden'><data:navMessage/></div>
  2656.       </div>
  2657.     </div>
  2658.   </div>
  2659.   <div class='clear'/>
  2660.   </b:if>
  2661.  
  2662. </b:includable>
  2663.             <b:includable id='threaded-comment-form' var='post'>
  2664.   <div class='comment-form'>
  2665.     <a name='comment-form'/>
  2666.     <b:if cond='data:mobile'>
  2667.       <p><data:blogCommentMessage/></p>
  2668.       <data:blogTeamBlogMessage/>
  2669.       <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
  2670.       <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
  2671.     <b:else/>
  2672.       <p><data:blogCommentMessage/></p>
  2673.       <data:blogTeamBlogMessage/>
  2674.       <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
  2675.       <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
  2676.     </b:if>
  2677.     <data:post.friendConnectJs/>
  2678.     <data:post.cmtfpIframe/>
  2679.     <script>
  2680.       BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
  2681.     </script>
  2682.   </div>
  2683. </b:includable>
  2684.             <b:includable id='threaded_comment_js' var='post'>
  2685.   <script async='async' expr:src='data:post.commentSrc'/>
  2686.  
  2687.   <script>
  2688.     (function() {
  2689.       var items = <data:post.commentJso/>;
  2690.       var msgs = <data:post.commentMsgs/>;
  2691.       var config = <data:post.commentConfig/>;
  2692.  
  2693. // <![CDATA[
  2694.      var cursor = null;
  2695.      if (items && items.length > 0) {
  2696.        cursor = parseInt(items[items.length - 1].timestamp) + 1;
  2697.      }
  2698.  
  2699.      var bodyFromEntry = function(entry) {
  2700.        if (entry.gd$extendedProperty) {
  2701.          for (var k in entry.gd$extendedProperty) {
  2702.            if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
  2703.              return '<span class="deleted-comment">' + entry.content.$t + '</span>';
  2704.            }
  2705.          }
  2706.        }
  2707.        return entry.content.$t;
  2708.      }
  2709.  
  2710.      var parse = function(data) {
  2711.        cursor = null;
  2712.        var comments = [];
  2713.        if (data && data.feed && data.feed.entry) {
  2714.          for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
  2715.            var comment = {};
  2716.            // comment ID, parsed out of the original id format
  2717.            var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
  2718.            comment.id = id ? id[2] : null;
  2719.            comment.body = bodyFromEntry(entry);
  2720.            comment.timestamp = Date.parse(entry.published.$t) + '';
  2721.            if (entry.author && entry.author.constructor === Array) {
  2722.              var auth = entry.author[0];
  2723.              if (auth) {
  2724.                comment.author = {
  2725.                  name: (auth.name ? auth.name.$t : undefined),
  2726.                  profileUrl: (auth.uri ? auth.uri.$t : undefined),
  2727.                  avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
  2728.                };
  2729.              }
  2730.            }
  2731.            if (entry.link) {
  2732.              if (entry.link[2]) {
  2733.                comment.link = comment.permalink = entry.link[2].href;
  2734.              }
  2735.              if (entry.link[3]) {
  2736.                var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
  2737.                if (pid && pid[1]) {
  2738.                  comment.parentId = pid[1];
  2739.                }
  2740.              }
  2741.            }
  2742.            comment.deleteclass = 'item-control blog-admin';
  2743.            if (entry.gd$extendedProperty) {
  2744.              for (var k in entry.gd$extendedProperty) {
  2745.                if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
  2746.                  comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
  2747.                }
  2748.              }
  2749.            }
  2750.            comments.push(comment);
  2751.          }
  2752.        }
  2753.        return comments;
  2754.      };
  2755.  
  2756.      var paginator = function(callback) {
  2757.        if (hasMore()) {
  2758.          var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
  2759.          if (cursor) {
  2760.            url += '&published-min=' + new Date(cursor).toISOString();
  2761.          }
  2762.          window.bloggercomments = function(data) {
  2763.            var parsed = parse(data);
  2764.            cursor = parsed.length < 50 ? null
  2765.                : parseInt(parsed[parsed.length - 1].timestamp) + 1
  2766.            callback(parsed);
  2767.            window.bloggercomments = null;
  2768.          }
  2769.          url += '&callback=bloggercomments';
  2770.          var script = document.createElement('script');
  2771.          script.src = url;
  2772.          document.getElementsByTagName('head')[0].appendChild(script);
  2773.        }
  2774.      };
  2775.      var hasMore = function() {
  2776.        return !!cursor;
  2777.      };
  2778.      var getMeta = function(key, comment) {
  2779.        if ('iswriter' == key) {
  2780.          var matches = !!comment.author
  2781.              && comment.author.name == config.authorName
  2782.              && comment.author.profileUrl == config.authorUrl;
  2783.          return matches ? 'true' : '';
  2784.        } else if ('deletelink' == key) {
  2785.          return config.baseUri + '/delete-comment.g?blogID='
  2786.               + config.blogId + '&postID=' + comment.id;
  2787.        } else if ('deleteclass' == key) {
  2788.          return comment.deleteclass;
  2789.        }
  2790.        return '';
  2791.      };
  2792.  
  2793.      var replybox = null;
  2794.      var replyUrlParts = null;
  2795.      var replyParent = undefined;
  2796.  
  2797.      var onReply = function(commentId, domId) {
  2798.        if (replybox == null) {
  2799.          // lazily cache replybox, and adjust to suit this style:
  2800.          replybox = document.getElementById('comment-editor');
  2801.          if (replybox != null) {
  2802.            replybox.height = '250px';
  2803.            replybox.style.display = 'block';
  2804.            replyUrlParts = replybox.src.split('#');
  2805.          }
  2806.        }
  2807.        if (replybox && (commentId !== replyParent)) {
  2808.          document.getElementById(domId).insertBefore(replybox, null);
  2809.          replybox.src = replyUrlParts[0]
  2810.              + (commentId ? '&parentID=' + commentId : '')
  2811.              + '#' + replyUrlParts[1];
  2812.          replyParent = commentId;
  2813.        }
  2814.      };
  2815.  
  2816.      var hash = (window.location.hash || '#').substring(1);
  2817.      var startThread, targetComment;
  2818.      if (/^comment-form_/.test(hash)) {
  2819.        startThread = hash.substring('comment-form_'.length);
  2820.      } else if (/^c[0-9]+$/.test(hash)) {
  2821.        targetComment = hash.substring(1);
  2822.      }
  2823.  
  2824.      // Configure commenting API:
  2825.      var configJso = {
  2826.        'maxDepth': config.maxThreadDepth
  2827.      };
  2828.      var provider = {
  2829.        'id': config.postId,
  2830.        'data': items,
  2831.        'loadNext': paginator,
  2832.        'hasMore': hasMore,
  2833.        'getMeta': getMeta,
  2834.        'onReply': onReply,
  2835.        'rendered': true,
  2836.        'initComment': targetComment,
  2837.        'initReplyThread': startThread,
  2838.        'config': configJso,
  2839.        'messages': msgs
  2840.      };
  2841.  
  2842.      var render = function() {
  2843.        if (window.goog && window.goog.comments) {
  2844.          var holder = document.getElementById('comment-holder');
  2845.          window.goog.comments.render(holder, provider);
  2846.        }
  2847.      };
  2848.  
  2849.      // render now, or queue to render when library loads:
  2850.      if (window.goog && window.goog.comments) {
  2851.        render();
  2852.      } else {
  2853.        window.goog = window.goog || {};
  2854.        window.goog.comments = window.goog.comments || {};
  2855.        window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
  2856.        window.goog.comments.loadQueue.push(render);
  2857.      }
  2858.    })();
  2859. // ]]>
  2860.   </script>
  2861. </b:includable>
  2862.             <b:includable id='threaded_comments' var='post'>
  2863.   <div class='comments' id='comments'>
  2864.     <a name='comments'/>
  2865.     <h4>
  2866.       <b:if cond='data:post.numComments == 1'>
  2867.         1 <data:commentLabel/>:
  2868.       <b:else/>
  2869.         <data:post.numComments/> <data:commentLabelPlural/>:
  2870.       </b:if>
  2871.     </h4>
  2872.  
  2873.     <div class='comments-content'>
  2874.       <b:if cond='data:post.embedCommentForm'>
  2875.         <b:include data='post' name='threaded_comment_js'/>
  2876.       </b:if>
  2877.       <div id='comment-holder'>
  2878.          <data:post.commentHtml/>
  2879.       </div>
  2880.     </div>
  2881.  
  2882.     <p class='comment-footer'>
  2883.       <b:if cond='data:post.allowNewComments'>
  2884.         <b:include data='post' name='threaded-comment-form'/>
  2885.       <b:else/>
  2886.         <data:post.noNewCommentsText/>
  2887.       </b:if>
  2888.     </p>
  2889.  
  2890.     <b:if cond='data:showCmtPopup'>
  2891.       <div id='comment-popup'>
  2892.         <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
  2893.         </iframe>
  2894.       </div>
  2895.     </b:if>
  2896.  
  2897.     <div id='backlinks-container'>
  2898.     <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
  2899.        <b:if cond='data:post.showBacklinks'>
  2900.          <b:include data='post' name='backlinks'/>
  2901.        </b:if>
  2902.     </div>
  2903.     </div>
  2904.   </div>
  2905. </b:includable>
  2906.           </b:widget>
  2907.         </b:section>
  2908.       </div>
  2909.  
  2910.       <aside id='sidebar-wrapper'>
  2911.         <b:section class='sidebar' id='sidebar' preferred='yes'/>
  2912.       </aside>
  2913.  
  2914.       <!-- spacer for skins that want sidebar and main to be the same height-->
  2915.       <div class='clear'>&#160;</div>
  2916.       </div>
  2917.     </div> <!-- end content-wrapper -->
  2918.  
  2919.     <footer id='footer-wrapper'>
  2920.         <div class='footer' id='footer'>
  2921.             <div class='clear'/>
  2922. <div class='creditpic'>
  2923. <div class='credit-wrapper'>
  2924. <div class='credit'>
  2925. Copyright &#169; <span itemprop='copyrightYear'>2016</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>
  2926. <div class='credit-right'>Created by <a href='https://germyload.blogspot.co.id/' title='Germy Load'>Germy Load</a> Supported by <a href='https://web.facebook.com/GermyLoad/' title='Stevin Germy'>Stevin Germy</a></div>
  2927. <div class='clear'/>
  2928. </div>
  2929. </div>
  2930. </div>
  2931. <div class='clear'/>
  2932.         </div>
  2933.     </footer>
  2934.  
  2935.   </div> <!-- end outer-wrapper -->
  2936.   <b:include data='blog' name='google-analytics'/>
  2937. &lt;!--</body>--&gt;&lt;/body&gt;
  2938. </HTML>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!