tamanmerah

Webium Blogger Template

Oct 21st, 2026
15
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 217.82 KB | None | 0 0
  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE html>
  3. <html b:css='false' b:defaultwidgetversion='2' b:js='true' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.0.0' expr:class='data:blog.languageDirection' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  4. <head>
  5. <meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=5' name='viewport'/>
  6.  
  7. <title><data:view.title.escaped/></title>
  8.  
  9. <b:loop values='{&quot;//1.bp.blogspot.com&quot;, &quot;//2.bp.blogspot.com&quot;, &quot;//3.bp.blogspot.com&quot;, &quot;//4.bp.blogspot.com&quot;, &quot;//www.blogger.com&quot;, &quot;//fonts.googleapis.com&quot;, &quot;//use.fontawesome.com&quot;, &quot;//ajax.googleapis.com&quot;, &quot;//fonts.gstatic.com&quot;, &quot;//feedburner.google.com&quot;, &quot;//feeds.feedburner.com&quot;, &quot;//apis.google.com&quot;, &quot;//cdnjs.cloudflare.com&quot;, &quot;//www.google-analytics.com&quot;,&quot;//www.gstatic.com&quot;, &quot;//www.googletagservices.com&quot;,&quot;//disqus.com&quot;, &quot;//c.disquscdn.com&quot;}' var='link'>
  10. <link expr:href='data:link' rel='dns-prefetch preconnect'/>
  11. </b:loop>
  12.  
  13. <b:include name='headContent'/>
  14.  
  15. <b:skin version='1.0.0'><![CDATA[
  16. /* -----------------------------------------------
  17. Blogger Template Style
  18. Name : Webium
  19. Version : 1.0
  20. Author : EL Creative Developer
  21. Author Url : https://www.elcreativeacademy.com/
  22. ----------------------------------------------- */
  23.  
  24. /*
  25. <Variable name="keycolor" description="Main Color" type="color" default="$(main.color)" value="#1a8917"/>
  26.  
  27. <Group description="Default Settings" selector="body">
  28. <Variable name="main.width" description="Theme Width" type="length" default="1192px" min="800px" max="1200px" value="1192px"/>
  29. <Variable name="main.color" description="Main Color" type="color" default="#1a8917" value="#1a8917"/>
  30. <Variable name="link.color" description="Link Color" type="color" default="$(main.color)" value="#1a8917"/>
  31. </Group>
  32.  
  33. <Group description="Header" selector="header">
  34. <Variable name="header.width" description="Header Max Width" type="length" default="1192px" min="800px" max="1200px" value="1192px"/>
  35. <Variable name="header.color.background" description="Header Background Color" type="color" default="#ffc017" value="#ffc017"/>
  36. <Variable name="header.color.backgroundscroll" description="Header Background Scroll" type="color" default="#ffffff" value="#ffffff"/>
  37. <Variable name="header.color.text" description="Header Text Color" type="color" default="#212121" value="#212121"/>
  38. <Variable name="header.color.border" description="Header Border Color" type="color" default="#292929" value="#292929"/>
  39. <Variable name="header.color.menu" description="Header Mobile Menu Color" type="color" default="$(header.color.text)" value="#212121"/>
  40. <Variable name="header.color.menubg" description="Header Mobile Menu Background" type="color" default="#ffffff" value="#ffffff"/>
  41. <Variable name="header.color.menuborder" description="Header Mobile Menu Border" type="color" default="#e6e6e6" value="#e6e6e6"/>
  42. <Variable name="header.color.menuboxshdow" description="Header Mobile Menu Box Shadow" type="color" default="$(header.color.menuborder)" value="#e6e6e6"/>
  43. </Group>
  44.  
  45. <Group description="Index Post" selector=".blog-wrapper">
  46. <Variable name="index.color.metatop" description="Post Meta Top Color" type="color" default="$(index.color.text)" value="#212121"/>
  47. <Variable name="index.color.text" description="Post Title Color" type="color" default="#212121" value="#212121"/>
  48. <Variable name="index.color.snippet" description="Post Summary Color" type="color" default="#757575" value="#757575"/>
  49. <Variable name="index.color.metabottom" description="Post Meta Bottom Color" type="color" default="$(index.color.snippet)" value="#757575"/>
  50. <Variable name="index.color.metabottomicon" description="Post Meta Bottom Icon Color" type="color" default="$(index.color.metabottom)" value="#757575"/>
  51. <Variable name="index.color.loadmore" description="Load More Button Color" type="color" default="#1a8917" value="#1a8917"/>
  52. <Variable name="index.color.loadmorebg" description="Load More Button Background" type="color" default="#ffffff" value="#ffffff"/>
  53. <Variable name="index.color.loadmoreborder" description="Load More Button Border" type="color" default="$(index.color.loadmore)" value="#1a8917"/>
  54. </Group>
  55.  
  56. <Group description="Item Post" selector=".blog-wrapper">
  57. <Variable name="item.main.widthheader" description="Post Header Width" type="length" default="680px" min="500px" max="1200px" value="680px"/>
  58. <Variable name="item.color.text" description="Post Title Color" type="color" default="#212121" value="#212121"/>
  59. <Variable name="item.color.snippet" description="Post Summary Color" type="color" default="#757575" value="#757575"/>
  60. <Variable name="item.color.author" description="Post Author Color" type="color" default="$(item.color.text)" value="#212121"/>
  61. <Variable name="item.color.authorborder" description="Post Author Border Color" type="color" default="#1a8917" value="#1a8917"/>
  62. <Variable name="item.color.meta" description="Post Meta Color" type="color" default="$(item.color.snippet)" value="#757575"/>
  63. <Variable name="item.color.metaicon" description="Post Meta Icon Color" type="color" default="$(item.color.text)" value="#212121"/>
  64. <Variable name="item.color.post" description="Text Color" type="color" default="$(item.color.text)" value="#212121"/>
  65. <Variable name="item.color.share" description="Share Menu Color" type="color" default="$(item.color.snippet)" value="#757575"/>
  66. <Variable name="item.color.sharehover" description="Share Menu Color Hover" type="color" default="$(item.color.text)" value="#212121"/>
  67. <Variable name="item.color.sharebg" description="Share Menu Background" type="color" default="#ffffff" value="#ffffff"/>
  68. <Variable name="item.color.shareborder" description="Share Menu Border" type="color" default="#e6e6e6" value="#e6e6e6"/>
  69. <Variable name="item.color.shareshadow" description="Share Menu Box Shadow" type="color" default="$(item.color.shareborder)" value="#e6e6e6"/>
  70. <Variable name="item.main.widthfooter" description="Post Footer Width" type="length" default="680px" min="500px" max="1200px" value="680px"/>
  71. <Variable name="item.color.labeltext" description="Label Color" type="color" default="$(item.color.text)" value="#212121"/>
  72. <Variable name="item.color.labelbg" description="Label Background" type="color" default="#f2f2f2" value="#f2f2f2"/>
  73. <Variable name="item.color.metabottom" description="Meta Bottom Color" type="color" default="$(item.color.snippet)" value="#757575"/>
  74. <Variable name="item.color.imagelightbox" description="Image Lightbox Background Color" type="color" default="#ffffff" value="#ffffff"/>
  75. </Group>
  76.  
  77. /* Widget */
  78. <Variable hideEditor="true" name="widget.color.title" description="Widget Title Color" type="color" default="#212121" value="#212121"/>
  79. <Variable hideEditor="true" name="widget.color.border" description="Widget Border Color" type="color" default="#e6e6e6" value="#e6e6e6"/>
  80. <Variable hideEditor="true" name="widget.color.posttitle" description="Widget Post Title Color" type="color" default="$(widget.color.title)" value="#212121"/>
  81. <Variable hideEditor="true" name="widget.color.postmetatop" description="Widget Post Meta Top Color" type="color" default="$(widget.color.title)" value="#212121"/>
  82. <Variable hideEditor="true" name="widget.color.postsnippet" description="Widget Post Snippet Color" type="color" default="#757575" value="#757575"/>
  83. <Variable hideEditor="true" name="widget.color.popularcounter" description="Popular Post Counter Color" type="color" default="$(widget.color.border)" value="#e6e6e6"/>
  84. <Variable hideEditor="true" name="widget.color.searchcolor" description="Search Color" type="color" default="$(widget.color.title)" value="#212121"/>
  85. <Variable hideEditor="true" name="widget.color.labeltext" description="Label Text Color" type="color" default="#757575" value="#757575"/>
  86. <Variable hideEditor="true" name="widget.color.labelbackground" description="Label Background Color" type="color" default="#fafafa" value="#fafafa"/>
  87. <Variable hideEditor="true" name="widget.color.labelborder" description="Label Border Color" type="color" default="#e6e6e6" value="#e6e6e6"/>
  88. <Variable hideEditor="true" name="widget.color.labelbutton" description="Profile Button Color" type="color" default="$(widget.color.title)" value="#212121"/>
  89. <Variable hideEditor="true" name="widget.color.labelbuttoncolorhover" description="Profile Button Hover Color" type="color" default="$(widget.color.title)" value="#212121"/>
  90. <Variable hideEditor="true" name="widget.color.labelbuttonborderhover" description="Profile Button Border Hover Color" type="color" default="$(widget.color.title)" value="#212121"/>
  91. <Variable hideEditor="true" name="widget.color.labelbuttonborder" description="Profile Button Border Color" type="color" default="$(widget.color.postsnippet)" value="#757575"/>
  92.  
  93. <Group description="Footer" selector="footer">
  94. <Variable name="footer.color.text" description="Footer Text Color" type="color" default="#ffffff" value="#ffffff"/>
  95. <Variable name="footer.color.background" description="Footer Background Color" type="color" default="#212121" value="#212121"/>
  96. </Group>
  97.  
  98. <Variable hideEditor="true" name="body.background" description="Body Background" type="background" color="#ffffff" default="#ffffff none repeat scroll top left" value="#dddfe2 none repeat scroll top left"/>
  99. <Variable hideEditor="true" name="body.font" description="Font" type="font" default="normal 400 14px Arial, sans-serif" value="normal 400 14px Arial,sans-serif"/>
  100. <Variable hideEditor="true" name="body.text.color" description="Text Color" type="color" default="#212121" value="#212121"/>
  101. <Variable hideEditor="true" name="body.text.font" description="1" type="font" default="$(body.font)" value="normal 400 14px Arial, sans-serif"/>
  102. <Variable hideEditor="true" name="posts.background.color" description="2" type="color" default="#ffffff" value="#ffffff"/>
  103. <Variable hideEditor="true" name="body.link.color" description="3" type="color" default="$(main.color)" value="#1a8917"/>
  104. <Variable hideEditor="true" name="body.link.visited.color" description="4" type="color" default="#1a8917" value="#1a8917"/>
  105. <Variable hideEditor="true" name="body.link.hover.color" description="5" type="color" default="#1a8917" value="#1a8917"/>
  106. <Variable hideEditor="true" name="blog.title.font" description="6" type="font" default="$(body.text.font)" value="normal 400 14px Arial, sans-serif"/>
  107. <Variable hideEditor="true" name="blog.title.color" description="7" type="color" default="#ffffff" value="#ffffff"/>
  108. <Variable hideEditor="true" name="header.icons.color" description="8" type="color" default="#ffffff" value="#ffffff"/>
  109. <Variable hideEditor="true" name="tabs.font" description="9" type="font" default="$(body.text.font)" value="normal 400 14px Arial, sans-serif"/>
  110. <Variable hideEditor="true" name="tabs.color" description="10" type="color" default="#e5e5e5" value="#e5e5e5"/>
  111. <Variable hideEditor="true" name="tabs.selected.color" description="11" type="color" default="#ffffff" value="#ffffff"/>
  112. <Variable hideEditor="true" name="tabs.overflow.background.color" description="12" type="color" default="#ffffff" value="#ffffff"/>
  113. <Variable hideEditor="true" name="tabs.overflow.color" description="13" type="color" default="$(body.text.color)" value="#212121"/>
  114. <Variable hideEditor="true" name="tabs.overflow.selected.color" description="14" type="color" default="$(body.text.color)" value="#212121"/>
  115. <Variable hideEditor="true" name="posts.title.color" description="15" type="color" default="$(body.text.color)" value="#212121"/>
  116. <Variable hideEditor="true" name="posts.title.font" description="16" type="font" default="$(body.text.font)" value="normal 400 14px Arial, sans-seri"/>
  117. <Variable hideEditor="true" name="posts.text.font" description="17" type="font" default="$(body.text.font)" value="normal 400 14px Arial, sans-seri"/>
  118. <Variable hideEditor="true" name="posts.text.color" description="18" type="color" default="$(body.text.color)" value="#212121"/>
  119. <Variable hideEditor="true" name="posts.icons.color" description="19" type="color" default="$(body.text.color)" value="#212121"/>
  120. <Variable hideEditor="true" name="labels.background.color" description="20" type="color" default="$(main.color)" value="#1a8917"/>
  121. */
  122.  
  123. /*
  124. * Prefixed by https://autoprefixer.github.io
  125. * PostCSS: v7.0.29,
  126. * Autoprefixer: v9.7.6
  127. * Browsers: last 4 version
  128. */
  129.  
  130. /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  131. html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
  132.  
  133.  
  134. *{-webkit-tap-highlight-color:transparent}
  135. body {
  136. font-family: system-ui, -apple-system, BlinkMacSystemFont,
  137. "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  138. overflow: hidden;
  139. overflow-y: auto;
  140. width: 100%;
  141. }
  142.  
  143. a {
  144. text-decoration: none;
  145. color: $(link.color);
  146. }
  147. img:not([src]):not([srcset]) {
  148. visibility: hidden;
  149. }
  150. input:required, input:invalid {
  151. -webkit-box-shadow:none;
  152. box-shadow:none;
  153. }
  154.  
  155. .button-icon {
  156. background: transparent;
  157. border: none;
  158. outline: none;
  159. cursor: pointer;
  160. }
  161. .backdrop.active {
  162. -webkit-transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, visibility 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  163. -o-transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, visibility 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  164. transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, visibility 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  165. pointer-events: all;
  166. z-index: 999;
  167. background-color: rgba(0, 0, 0, 0.08);
  168. position: fixed;
  169. left: 0;
  170. top: 0;
  171. height: 100%;
  172. width: 100%;
  173. }
  174.  
  175. /* ----- Header ----- */
  176. .header-wrapper {
  177. -webkit-box-align: center;
  178. -ms-flex-align: center;
  179. align-items: center;
  180. background-color: $(header.color.background);
  181. border-bottom: 1px solid $(header.color.border);
  182. display: -webkit-box;
  183. display: -ms-flexbox;
  184. display: flex;
  185. left: 0;
  186. min-height: 74px;
  187. position: fixed;
  188. right: 0;
  189. top: 0;
  190. z-index: 999;
  191. -webkit-transition: background-color 300ms linear;
  192. -o-transition: background-color 300ms linear;
  193. transition: background-color 300ms linear;
  194. }
  195. .header-wrapper .header-section {
  196. -webkit-box-align: center;
  197. -ms-flex-align: center;
  198. align-items: center;
  199. display: inherit;
  200. -webkit-box-pack: justify;
  201. -ms-flex-pack: justify;
  202. justify-content: space-between;
  203. max-width: $(header.width);
  204. margin: 0 auto;
  205. width: 100%;
  206. position: relative
  207. }
  208. .header-wrapper .header-section .Header h1 {
  209. margin: 0;
  210. }
  211. .header-wrapper .header-section .Header .header-logo-image img ~ h1 {
  212. border: 0;
  213. clip: rect(0 0 0 0);
  214. height: 1px;
  215. margin: -1px;
  216. overflow: hidden;
  217. padding: 0;
  218. position: absolute;
  219. width: 1px;
  220. }
  221. .header-wrapper .header-section .Header img {
  222. max-height: 25px;
  223. width: auto;
  224. display: block;
  225. }
  226. .header-wrapper .header-section .Header a {
  227. color: $(header.color.text);
  228. -webkit-user-select: none;
  229. -moz-user-select: none;
  230. -ms-user-select: none;
  231. user-select: none;
  232. }
  233. .header-wrapper .header-section .LinkList .menu-item, .footer-wrapper .footer-section .LinkList .menu-item:not(:last-child) {
  234. margin-right: 24px;
  235. }
  236. .blog-pager span {
  237. border-radius: 4px;
  238. background: $(header.color.text);
  239. border: 1px solid $(header.color.text);
  240. color: #fff;
  241. padding: 8px 16px;
  242. -webkit-user-select: none;
  243. -moz-user-select: none;
  244. -ms-user-select: none;
  245. user-select: none;
  246. font-size: 14px
  247. }
  248. .header-wrapper .header-section .LinkList a, .footer-wrapper .footer-section .LinkList a {
  249. color: $(header.color.text);
  250. -webkit-user-select: none;
  251. -moz-user-select: none;
  252. -ms-user-select: none;
  253. user-select: none;
  254. font-size: 14px;
  255. line-height: 20px;
  256. }
  257. .header-wrapper .header-section .LinkList .button-icon svg {
  258. fill: $(header.color.text);
  259. }
  260. .header-height {
  261. background-color: $(header.color.backgroundscroll);
  262. height: 74px;
  263. }
  264. .header-wrapper .header-section .LinkList, .header-wrapper .header-section .LinkList .button-icon {
  265. display: -webkit-box;
  266. display: -ms-flexbox;
  267. display: flex;
  268. -webkit-box-align: center;
  269. -ms-flex-align: center;
  270. align-items: center;
  271. -webkit-box-pack: center;
  272. -ms-flex-pack: center;
  273. justify-content: center;
  274. }
  275. .header-wrapper .header-section .LinkList .button-icon:not(.search-menu) {
  276. display: none
  277. }
  278.  
  279. /* ----- Main Section ----- */
  280. .inner-wrapper {
  281. display: -ms-grid;
  282. display: grid;
  283. -ms-grid-rows: 1fr;
  284. grid-template-rows: 1fr;
  285. -ms-grid-columns: (1fr)[8] (minmax(48px, 1fr))[4];
  286. grid-template-columns: repeat(8, 1fr) repeat(4, minmax(48px, 1fr));
  287. max-width: $(main.width);
  288. margin: 0 auto;
  289. overflow: hidden
  290. }
  291. .inner-wrapper {
  292. -ms-grid-column: 1;
  293. -ms-grid-column-span: 12;
  294. grid-column: 1 / span 12;
  295. -ms-grid-row: 2;
  296. grid-row-start: 2;
  297. padding-top: 56px;
  298. }
  299.  
  300. body:not(.item):not(.static_page) .main-wrapper .blog-wrapper {
  301. -ms-grid-column: 1;
  302. -ms-grid-column-span: 7;
  303. grid-column: 1 / span 7;
  304. -ms-grid-row: 2;
  305. grid-row-start: 2;
  306. }
  307.  
  308. .main-top-wrapper {
  309. -ms-grid-column: 1;
  310. -ms-grid-column-span: 12;
  311. grid-column: 1 / span 12;
  312. -ms-grid-row: 1;
  313. grid-row-start: 1;
  314. }
  315. .main-top-wrapper .HTML {
  316. background-color: $(header.color.background);
  317. border-bottom: 1px solid $(header.color.border);
  318. }
  319. .main-top-wrapper .HTML .jumbotron-content, .main-top-wrapper .popular-jumbotron {
  320. max-width: $(main.width);
  321. margin: 0 auto;
  322. padding: 33px 0 51px 0;
  323. }
  324. .main-top-wrapper .popular-jumbotron .popular-widget {
  325. width: 100%;
  326. -webkit-box-align: start;
  327. -ms-flex-align: start;
  328. align-items: flex-start;
  329. -webkit-box-pack: justify;
  330. -ms-flex-pack: justify;
  331. justify-content: space-between;
  332. display: -ms-grid;
  333. display: grid;
  334. -ms-grid-columns: 1fr 10px 1fr 10px 1fr;
  335. grid-template-columns: repeat(3, 1fr);
  336. gap: 10px;
  337. }
  338. .main-top-wrapper .PopularPosts .popular-widget .post {
  339. margin: 0;
  340. }
  341. .main-top-wrapper .HTML .jumbotron-content .title {
  342. font-size: 70px;
  343. line-height: 74px;
  344. margin: 0;
  345. font-weight: 500;
  346. letter-spacing: -0.05em;
  347. color: $(header.color.text);
  348. }
  349. .main-top-wrapper .HTML .jumbotron-content p {
  350. line-height: 24px;
  351. font-size: 18px;
  352. margin: 52px 0 25px 0;
  353. color: $(header.color.text)
  354. }
  355. .main-top-wrapper .HTML .jumbotron-content .jumbotron-inner {
  356. max-width: 550px;
  357. }
  358. .main-top-wrapper .HTML .jumbotron-content .all-content {
  359. line-height: 24px;
  360. padding: 8px 20px;
  361. border: 1px solid $(header.color.text);
  362. border-radius: 4px;
  363. color: $(header.color.text);
  364. max-width: 550px;
  365. }
  366. .main-top-wrapper .widget:last-child {
  367. border-bottom: 1px solid $(widget.color.border);
  368. }
  369. .main-top-wrapper .search-page-form {
  370. padding: 56px 0 40px 0;
  371. width: 100%;
  372. max-width: $(main.width);
  373. margin: 0 auto;
  374. }
  375. .main-top-wrapper .search-page-form input {
  376. font-size: 52px;
  377. height: 80px;
  378. padding: 0;
  379. width: 100%;
  380. border: 0;
  381. border-bottom: 1px solid rgba(0,0,0,.15);
  382. outline: none;
  383. }
  384.  
  385. .item .main-wrapper .blog-wrapper, .static_page .main-wrapper .blog-wrapper {
  386. -ms-grid-column: 1;
  387. -ms-grid-column-span: 12;
  388. grid-column: 1 / span 12;
  389. -ms-grid-row: 2;
  390. grid-row-start: 2;
  391. }
  392. .index .main-wrapper .blog-post, .FeaturedPost .post, .PopularPosts .popular-widget .post {
  393. -webkit-box-align: center;
  394. -ms-flex-align: center;
  395. align-items: center;
  396. display: -webkit-box;
  397. display: -ms-flexbox;
  398. display: flex;
  399. -webkit-box-pack: justify;
  400. -ms-flex-pack: justify;
  401. justify-content: space-between;
  402. margin-bottom: 48px;
  403. -webkit-user-select: none;
  404. -moz-user-select: none;
  405. -ms-user-select: none;
  406. user-select: none;
  407. gap: 20px
  408. }
  409. .index .main-wrapper .blog-post .block-meta {
  410. width: 100%
  411. }
  412. .index .main-wrapper .blog-post .post-meta-top, .index .main-wrapper .blog-post .post-meta-bottom, .FeaturedPost .post .post-meta-top, .FeaturedPost .post .post-meta-bottom, .PopularPosts .popular-widget .post-meta-top, .PopularPosts .popular-widget .post-meta-bottom {
  413. -webkit-box-align: center;
  414. -ms-flex-align: center;
  415. align-items: center;
  416. display: -webkit-box;
  417. display: -ms-flexbox;
  418. display: flex;
  419. font-size: 14px;
  420. -webkit-box-orient: horizontal;
  421. -webkit-box-direction: normal;
  422. -ms-flex-direction: row;
  423. flex-direction: row;
  424. -ms-flex-wrap: wrap;
  425. flex-wrap: wrap;
  426. padding-bottom: 8px;
  427. gap: 5px
  428. }
  429. .index .main-wrapper .blog-post .post-meta-top .author-avatar, .FeaturedPost .post .post-meta-top .author-avatar, .PopularPosts .popular-widget .post-meta-top .author-avatar {
  430. border-radius: 50%;
  431. display: block;
  432. max-height: 20px;
  433. max-width: 20px;
  434. height: 20px;
  435. width: 20px;
  436. background-repeat: no-repeat;
  437. background-size: cover;
  438. background-position: center;
  439. }
  440. .index .main-wrapper .blog-post .post-meta-top {
  441. color: $(index.color.metatop)
  442. }
  443. .index .main-wrapper .blog-post .post-meta-top strong, .FeaturedPost .post .post-meta-top strong, .PopularPosts .popular-widget .post-meta-top strong {
  444. font-weight: 500
  445. }
  446. .index .main-wrapper .blog-post .post-image-link {
  447. -webkit-box-align: center;
  448. -ms-flex-align: center;
  449. align-items: center;
  450. display: -webkit-box;
  451. display: -ms-flexbox;
  452. display: flex;
  453. height: 133px;
  454. -webkit-box-pack: center;
  455. -ms-flex-pack: center;
  456. justify-content: center;
  457. overflow: hidden;
  458. width: 200px;
  459. }
  460. .index .main-wrapper .blog-post .post-image-link .post-thumb {
  461. width: 100%;
  462. height: 100%;
  463. background-position: center;
  464. background-repeat: no-repeat;
  465. background-size: cover;
  466. }
  467. .index .main-wrapper .blog-post .post-meta-bottom .post-time, .PopularPosts .popular-widget .post-meta-bottom, .FeaturedPost .post .post-meta-bottom .post-time, .PopularPosts .popular-widget .post-meta-bottom .post-time {
  468. color: $(index.color.metabottom);
  469. display: -webkit-box;
  470. display: -ms-flexbox;
  471. display: flex;
  472. -webkit-box-align: center;
  473. -ms-flex-align: center;
  474. align-items: center;
  475. gap: 6px;
  476. }
  477. .index .main-wrapper .blog-post .post-meta-bottom .post-time svg {
  478. fill: currentColor;
  479. }
  480.  
  481. .index .main-wrapper .blog-post .post-meta-bottom, .FeaturedPost .post .post-meta-bottom, .PopularPosts .popular-widget .post-meta-bottom {
  482. -webkit-box-align: center;
  483. -ms-flex-align: center;
  484. align-items: center;
  485. -webkit-box-pack: justify;
  486. -ms-flex-pack: justify;
  487. justify-content: space-between;
  488. padding-bottom: 0;
  489. }
  490. .index .main-wrapper .blog-post .post-title {
  491. color: $(index.color.text);
  492. }
  493. .index .main-wrapper .blog-post .post-meta-bottom .post-comment {
  494. width: 25px;
  495. height: 25px;
  496. color: $(index.color.metabottomicon);
  497. fill: currentColor;
  498. padding: 18px;
  499. }
  500. .index .main-wrapper .blog-post .post-title h2, .FeaturedPost .post .post-title h2, .PopularPosts .popular-widget .post-title h2 {
  501. display: -webkit-box;
  502. font-size: 22px;
  503. font-weight: 700;
  504. line-height: 28px;
  505. margin: 0;
  506. overflow: hidden;
  507. -o-text-overflow: ellipsis;
  508. text-overflow: ellipsis;
  509. -webkit-line-clamp: 2;
  510. -webkit-box-orient: vertical;
  511. }
  512. .index .main-wrapper .blog-post .post-title .post-snippet {
  513. display: block;
  514. padding-top: 4px;
  515. color: $(index.color.snippet)
  516. }
  517. .main-wrapper .sidebar-wrapper {
  518. -ms-grid-column: 9;
  519. -ms-grid-column-span: 4;
  520. grid-column: 9 / span 4;
  521. -ms-grid-row: 2;
  522. grid-row-start: 2;
  523. }
  524. .main-wrapper .blog-pager {
  525. -webkit-box-align: center;
  526. -ms-flex-align: center;
  527. align-items: center;
  528. display: -webkit-box;
  529. display: -ms-flexbox;
  530. display: flex;
  531. -webkit-box-pack: center;
  532. -ms-flex-pack: center;
  533. justify-content: center;
  534. padding: 24px 0;
  535. }
  536. .search .main-wrapper .blog-pager {
  537. -webkit-box-pack: justify;
  538. -ms-flex-pack: justify;
  539. justify-content: space-between;
  540. }
  541. .main-wrapper .blog-pager span {
  542. background-color: $(index.color.loadmorebg);
  543. color: $(index.color.loadmore);
  544. border: 1px solid $(index.color.loadmoreborder);
  545. cursor: pointer;
  546. }
  547. .main-wrapper .blog-pager span.loading {
  548. cursor: wait;
  549. }
  550. .main-wrapper .blog-pager span.loaded {
  551. cursor: no-drop;
  552. }
  553.  
  554. .item .post-body, .static_page .post-body {
  555. letter-spacing: -0.003em;
  556. line-height: 28px;
  557. font-size: 22px;
  558. max-width: 680px;
  559. margin: 0 auto;
  560. color: $(item.color.post)
  561. }
  562. .post-body :is(p, ul, ol, pre, blockquote, br) + :is(h1, h2, h3, h4, h5, h6) {
  563. margin: 3rem 0 1rem 0;
  564. }
  565. .post-body a:hover {
  566. text-decoration: underline;
  567. }
  568. .post-body pre {
  569. padding: 20px;
  570. font-size: 16px;
  571. letter-spacing: -0.022em;
  572. line-height: 1.18;
  573. white-space: pre-wrap;
  574. background-color: $(item.color.shareborder)
  575. }
  576. .item .post-body .tr-caption-container td, .static_page .post-body .tr-caption-container td {
  577. text-align: center;
  578. margin-top: 10px;
  579. font-size: 14px;
  580. color: $(item.color.meta);
  581. font-family: Arial, sans-serif;
  582. }
  583. .item .post-body img, .static_page .post-body img {
  584. max-width: 100%;
  585. }
  586. .item .post-body .separator a, .static_page .post-body .separator a {
  587. cursor: -webkit-zoom-in;
  588. cursor: zoom-in;
  589. margin: 0 auto !important
  590. }
  591. .item .post-body blockquote, .static_page .post-body blockquote {
  592. padding-left: 23px;
  593. -webkit-box-shadow: $(item.color.post) 3px 0px 0px 0px inset;
  594. box-shadow: $(item.color.post) 3px 0px 0px 0px inset;
  595. margin: 0 0 0 -20px;
  596. }
  597. .rtl .item .post-body blockquote, .rtl .static_page .post-body blockquote {
  598. margin: 0 -20px 0 0;
  599. padding-right: 23px;
  600. padding-left: 0;
  601. -webkit-box-shadow: #212121 3px 0px 0px 0px;
  602. box-shadow: #212121 3px 0px 0px 0px;
  603. }
  604. .item .post-header, .static_page .post-header {
  605. margin: 0 auto 56px auto;
  606. max-width: $(item.main.widthheader);
  607. }
  608. .static_page .comment-container {
  609. margin: 56px auto;
  610. max-width: $(item.main.widthfooter);
  611. }
  612. .item .post-header .post-title, .static_page .post-header .post-title {
  613. color: $(item.color.text);
  614. line-height: 56px;
  615. letter-spacing: -0.011em;
  616. font-size: 46px;
  617. margin: 0;
  618. }
  619. .item .post-header .post-description, .static_page .post-header .post-description {
  620. line-height: 28px;
  621. font-size: 20px;
  622. color: $(item.color.snippet);
  623. font-weight: 400;
  624. margin: 10px 0 0 0;
  625. }
  626. .item .post-header .post-meta, .static_page .post-header .post-meta {
  627. display: -webkit-box;
  628. display: -ms-flexbox;
  629. display: flex;
  630. -webkit-box-orient: horizontal;
  631. -webkit-box-direction: normal;
  632. -ms-flex-direction: row;
  633. flex-direction: row;
  634. -webkit-box-pack: justify;
  635. -ms-flex-pack: justify;
  636. justify-content: space-between;
  637. -webkit-box-align: center;
  638. -ms-flex-align: center;
  639. align-items: center;
  640. margin: 15px 0 0 0;
  641. position: relative;
  642. }
  643. .item .post-header .post-meta .share-toggle {
  644. position: relative;
  645. }
  646. .item .post-header .post-meta .share-toggle button {
  647. display: -webkit-box;
  648. display: -ms-flexbox;
  649. display: flex;
  650. padding: 0;
  651. -webkit-box-align: center;
  652. -ms-flex-align: center;
  653. align-items: center;
  654. -webkit-box-pack: center;
  655. -ms-flex-pack: center;
  656. justify-content: center;
  657. color: $(item.color.metaicon);
  658. fill: currentColor;
  659. }
  660. .item .post-header .post-meta .post-comment {
  661. display: -webkit-box;
  662. display: -ms-flexbox;
  663. display: flex;
  664. -webkit-box-align: center;
  665. -ms-flex-align: center;
  666. align-items: center;
  667. -webkit-box-pack: center;
  668. -ms-flex-pack: center;
  669. justify-content: center;
  670. gap: 3px;
  671. cursor: pointer;
  672. -webkit-user-select: none;
  673. -moz-user-select: none;
  674. -ms-user-select: none;
  675. user-select: none;
  676. color: $(item.color.metaicon);
  677. fill: currentColor;
  678. }
  679. .item .post-header .post-meta .share-toggle #toggle-share, .item .post-footer #toggle-social {
  680. -webkit-box-shadow: $(item.color.shareshadow) 0px 1px 4px;
  681. box-shadow: $(item.color.shareshadow) 0px 1px 4px;
  682. margin-top: 5px;
  683. border: 1px solid $(item.color.shareborder);
  684. border-radius: 4px;
  685. position: absolute;
  686. background-color: $(item.color.sharebg);
  687. padding: 8px 0;
  688. left: 50%;
  689. -webkit-transform: translate3d(-50%, 0px, 0px);
  690. transform: translate3d(-50%, 0px, 0px);
  691. width: -webkit-max-content;
  692. width: -moz-max-content;
  693. width: max-content;
  694. max-width: 220px;
  695. }
  696. .item .post-header .post-meta .share-toggle #toggle-share::before, .item .post-footer #toggle-social::before {
  697. content: "";
  698. background-color: $(item.color.sharebg);
  699. width: 14px;
  700. height: 14px;
  701. -webkit-transform: rotate(45deg) translate(6px, 6px);
  702. -ms-transform: rotate(45deg) translate(6px, 6px);
  703. transform: rotate(45deg) translate(6px, 6px);
  704. position: absolute;
  705. top: -13px;
  706. -webkit-box-shadow: $(item.color.shareshadow) -1px -1px 1px -1px;
  707. box-shadow: $(item.color.shareshadow) -1px -1px 1px -1px;
  708. left: calc(50% - 7px);
  709. }
  710. .item .post-header .post-meta .share-toggle ul, .item .post-footer .post-meta ul.share-links {
  711. list-style: none;
  712. padding: 8px 0;
  713. margin: 0;
  714. }
  715. .item .post-header .post-meta .share-toggle li, .item .post-footer .post-meta .share-links li {
  716. padding: 8px 20px;
  717. word-break: break-word;
  718. }
  719. .item .post-header .post-meta .share-toggle a, .item .post-footer .share-links a {
  720. color: $(item.color.share)
  721. }
  722. .item .post-header .post-meta .share-toggle a:hover, .item .post-footer .share-links a:hover {
  723. color: $(item.color.sharehover)
  724. }
  725. .item .post-header .meta-author-date, .item .post-header .meta-button {
  726. display: -webkit-box;
  727. display: -ms-flexbox;
  728. display: flex;
  729. -webkit-box-orient: horizontal;
  730. -webkit-box-direction: normal;
  731. -ms-flex-direction: row;
  732. flex-direction: row;
  733. -webkit-box-align: center;
  734. -ms-flex-align: center;
  735. align-items: center;
  736. -webkit-box-pack: center;
  737. -ms-flex-pack: center;
  738. justify-content: center;
  739. gap: 10px;
  740. }
  741. .item .post-header .meta-author-date svg {
  742. position: absolute;
  743. left: -5px;
  744. width: 57px;
  745. height: 57px;
  746. fill: $(item.color.authorborder);
  747. }
  748. .rtl .item .post-header .meta-author-date svg {
  749. left: auto;
  750. right: -5px;
  751. }
  752. .item .post-header .meta-author-date .author-avatar {
  753. border-radius: 50%;
  754. width: 48px;
  755. height: 48px;
  756. background-size: cover;
  757. background-repeat: no-repeat;
  758. background-position: center;
  759. }
  760. .item .post-header .meta-author-date .post-meta-top {
  761. display: -webkit-box;
  762. display: -ms-flexbox;
  763. display: flex;
  764. -webkit-box-orient: vertical;
  765. -webkit-box-direction: normal;
  766. -ms-flex-direction: column;
  767. flex-direction: column;
  768. -webkit-box-align: start;
  769. -ms-flex-align: start;
  770. align-items: flex-start;
  771. -webkit-box-pack: center;
  772. -ms-flex-pack: center;
  773. justify-content: center;
  774. gap: 5px;
  775. }
  776. .item .post-header .meta-author-date .post-meta-top .post-author {
  777. color: $(item.color.author);
  778. }
  779. .item .post-header .meta-author-date .post-time {
  780. font-size: 14px;
  781. color: $(item.color.meta);
  782. }
  783. .item .post-footer {
  784. overflow: hidden;
  785. display: block;
  786. width: 100%;
  787. padding: 25px 0;
  788. }
  789. .item .post-footer .footer-post-content {
  790. max-width: $(item.main.widthfooter);
  791. margin: 0 auto;
  792. }
  793. .item .post-footer .meta-button {
  794. position: relative;
  795. }
  796. .item .post-footer .label-link {
  797. background-color: $(item.color.labelbg);
  798. padding: 5px 10px;
  799. line-height: 22px;
  800. color: $(item.color.labeltext);
  801. font-size: 13px;
  802. border-radius: 3px;
  803. margin: 0 8px 8px 0;
  804. display: inline-block;
  805. }
  806. .item .post-footer .post-meta {
  807. margin: 25px 0;
  808. display: -webkit-box;
  809. display: -ms-flexbox;
  810. display: flex;
  811. -webkit-box-align: center;
  812. -ms-flex-align: center;
  813. align-items: center;
  814. -webkit-box-pack: justify;
  815. -ms-flex-pack: justify;
  816. justify-content: space-between;
  817. }
  818. .item .post-footer .meta-author-date .post-comment, .item .post-footer .meta-button, .item .post-footer #toggle-social {
  819. display: -webkit-box;
  820. display: -ms-flexbox;
  821. display: flex;
  822. gap: 10px;
  823. -webkit-box-align: center;
  824. -ms-flex-align: center;
  825. align-items: center;
  826. -webkit-box-pack: center;
  827. -ms-flex-pack: center;
  828. justify-content: center;
  829. cursor: pointer;
  830. -webkit-user-select: none;
  831. -moz-user-select: none;
  832. -ms-user-select: none;
  833. user-select: none;
  834. color: $(item.color.metabottom)
  835. }
  836. .item .post-footer .meta-button svg {
  837. fill: $(item.color.metabottom);
  838. }
  839. .item .post-footer .about-author {
  840. display: -webkit-box;
  841. display: -ms-flexbox;
  842. display: flex;
  843. -webkit-box-pack: justify;
  844. -ms-flex-pack: justify;
  845. justify-content: space-between;
  846. padding-top: 32px;
  847. border-top: 1px solid $(widget.color.border);
  848. gap: 20px;
  849. }
  850. .item .post-footer .about-author .avatar-container {
  851. border-radius: 100px;
  852. }
  853. .item .post-footer .about-author .author-avatar {
  854. width: 80px;
  855. height: 80px;
  856. border-radius: 100px;
  857. background-position: center;
  858. background-repeat: no-repeat;
  859. background-size: cover;
  860. display: block;
  861. }
  862. .item .post-footer .about-author .author-name {
  863. display: -webkit-box;
  864. display: -ms-flexbox;
  865. display: flex;
  866. -webkit-box-orient: vertical;
  867. -webkit-box-direction: normal;
  868. -ms-flex-direction: column;
  869. flex-direction: column;
  870. margin-bottom: 6px;
  871. }
  872. .item .post-footer .about-author .author-name span {
  873. letter-spacing: 0.077em;
  874. line-height: 18px;
  875. color: $(item.color.meta);
  876. font-size: 13px;
  877. text-transform: uppercase;
  878. }
  879. .item .post-footer .about-author .author-name .authors {
  880. font-size: 24px;
  881. font-weight: 500;
  882. color: $(item.color.text);
  883. }
  884. .item .post-footer .about-author .description-text {
  885. line-height: 24px;
  886. color: $(item.color.meta);
  887. margin: 0
  888. }
  889. .item .post-footer #toggle-social {
  890. top: 33px;
  891. right: -110px;
  892. left: auto;
  893. -webkit-transform: translate3d(-110px, 0px, 0px);
  894. transform: translate3d(-110px, 0px, 0px);
  895. }
  896. .rtl .item .post-footer #toggle-social {
  897. right: auto;
  898. left: -110px;
  899. -webkit-transform: translate3d(110px, 0px, 0px);
  900. transform: translate3d(110px, 0px, 0px);
  901. }
  902. .item .post-footer #toggle-social::before {
  903. left: 85%;
  904. }
  905. .rtl .item .post-footer #toggle-social::before {
  906. left: 0;
  907. right: 85%;
  908. }
  909. .item #comments {
  910. visibility: hidden;
  911. opacity: 0;
  912. }
  913. .item #comments.active {
  914. visibility: visible;
  915. opacity: 1;
  916. z-index: 1000;
  917. display: block;
  918. position: relative;
  919. }
  920. .item #comments .comment-container {
  921. -webkit-transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, -webkit-transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  922. transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, -webkit-transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  923. -o-transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  924. transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  925. transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, -webkit-transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  926. -webkit-transform: translateX(-414px);
  927. -ms-transform: translateX(-414px);
  928. transform: translateX(-414px);
  929. width: 414px;
  930. top: 0;
  931. left: 100%;
  932. position: fixed;
  933. opacity: 1;
  934. background-color: white;
  935. height: 100%;
  936. -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px;
  937. box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px;
  938. overflow: auto;
  939. }
  940. .rtl .item #comments .comment-container {
  941. left: auto;
  942. right: 100%;
  943. -webkit-transform: translateX(414px);
  944. -ms-transform: translateX(414px);
  945. transform: translateX(414px);
  946. }
  947. .item #comments .comments-title {
  948. padding: 24px;
  949. display: -webkit-box;
  950. display: -ms-flexbox;
  951. display: flex;
  952. -webkit-box-align: center;
  953. -ms-flex-align: center;
  954. align-items: center;
  955. -webkit-box-pack: justify;
  956. -ms-flex-pack: justify;
  957. justify-content: space-between;
  958. }
  959. .item #comments .comments-title h3 {
  960. margin: 0;
  961. }
  962. .item #comments .close-comment {
  963. display: -webkit-box;
  964. display: -ms-flexbox;
  965. display: flex;
  966. -webkit-box-align: center;
  967. -ms-flex-align: center;
  968. align-items: center;
  969. -webkit-box-pack: center;
  970. -ms-flex-pack: center;
  971. justify-content: center;
  972. cursor: pointer;
  973. }
  974. .comments .comments-content{margin:0px 24px;overflow: hidden;}
  975. .comment-thread ol{padding:0;margin:0;}
  976. .toplevel-thread ol > li:first-child{margin:0;}
  977. .comment-thread .comment{position:relative;padding:0;margin:25px 0 0;list-style:none;border-radius:0}
  978. .comment-thread .avatar-image-container{width:35px;height:35px;border-radius:100%;overflow:hidden;float: left;}
  979. .avatar-image-container img{width:100%;height:100%;border-radius:100%}
  980. .comment-header {
  981. display: -webkit-box;
  982. display: -ms-flexbox;
  983. display: flex;
  984. -webkit-box-orient: vertical;
  985. -webkit-box-direction: normal;
  986. -ms-flex-direction: column;
  987. flex-direction: column;
  988. padding-left: 15px;
  989. }
  990. .comments .comment-header .user{font-size:14px;color:#212121;font-style:normal;}
  991. .comments .comment-header .user a{color:#212121;}
  992. .comments .comment-header .icon.user{display:none;}
  993. .comment-header .datetime a{font-size:14px;color:#757575;}
  994. .comments .comment-content{font-size:14px;line-height:24px;}
  995. .comments .comment-actions{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align: center;-ms-flex-align: center;align-items: center;gap: 15px;}
  996. .comments .comment-actions a{color:#212121;font-size:13px;font-style:normal;}
  997. .item-control{display:none}
  998. .comments .comment-replies{padding:0 0 0 20px;border-left: 3px solid rgb(230, 230, 230);}
  999. .rtl .comments .comment-replies {
  1000. padding: 0 20px 0 0;
  1001. border-right: 3px solid rgb(230, 230, 230);
  1002. border-left: none;
  1003. }
  1004. .thread-expanded .thread-count a,.loadmore{display:none}
  1005. .comments .continue:not(#top-continue) {display:none}
  1006. .comment-thread.toplevel-thread > ol > .comment > .comment-replybox-single iframe{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 0 0 23px;margin:15px 0 0}
  1007. span.blog-admin, span.pid-546483537 {
  1008. display: inherit !important
  1009. }
  1010. #top-ra li:last-child {
  1011. margin-bottom: 25px;
  1012. }
  1013. .comment-form {
  1014. margin: 0px 24px;
  1015. }
  1016. .comments #top-continue {
  1017. text-align: center;
  1018. padding: 12px 0;
  1019. margin: 12px 0;
  1020. }
  1021.  
  1022. .search-label .main-wrapper .blog-post .post-meta-top {
  1023. padding: 8px 0 0 0;
  1024. }
  1025. .search-label .main-wrapper .blog-post .post-meta-bottom {
  1026. padding: 0;
  1027. }
  1028. .search-label .blog-posts .blog-post:first-child {
  1029. -webkit-box-orient: vertical;
  1030. -webkit-box-direction: reverse;
  1031. -ms-flex-direction: column-reverse;
  1032. flex-direction: column-reverse;
  1033. margin-bottom: 20px;
  1034. }
  1035. .search-label .blog-posts .blog-post:first-child .block-meta {
  1036. margin: 13px 0 0 0;
  1037. }
  1038. .search-label .main-wrapper .blog-post:first-child .post-title h2 {
  1039. letter-spacing: -0.016em;
  1040. line-height: 40px;
  1041. font-size: 32px;
  1042. }
  1043. .search-label .main-wrapper .blog-post:first-child .post-title .post-snippet {
  1044. margin-top: 10px;
  1045. padding: 0;
  1046. }
  1047. .search-label .main-wrapper .blog-post .post-meta-top {
  1048. padding: 0;
  1049. margin-top: 16px;
  1050. }
  1051. .search-label .main-wrapper .blog-post .post-meta-bottom {
  1052. padding: 0;
  1053. }
  1054. .search-label .blog-post:first-child .post-image, .search-label .main-wrapper .blog-post:first-child .post-image-link, .search-label .main-wrapper .blog-post:first-child .post-image-link img {
  1055. width: 100%;
  1056. height: 100%;
  1057. }
  1058. .search-label .main-wrapper .blog-post:first-child .post-image-link .post-thumb {
  1059. height: 382px;
  1060. }
  1061. .search-label .main-wrapper .blog-post:not(:first-child) {
  1062. padding: 12px 0;
  1063. margin: 0;
  1064. }
  1065. .search-label .main-wrapper .blog-post:not(:first-child) .post-title h2 {
  1066. font-size: 18px;
  1067. line-height: 24px;
  1068. }
  1069. .search-label .main-wrapper .blog-post:not(:first-child) .post-image-link {
  1070. max-width: 152px;
  1071. height: 100px;
  1072. }
  1073. .search-label .main-wrapper .blog-post:not(:first-child) .post-image-link .post-thumb {
  1074. width: 100%;
  1075. height: 100%;
  1076. display: block;
  1077. }
  1078. .message-query {
  1079. text-align: center;
  1080. }
  1081. .hidden-section, .search-active .inner-wrapper, .search-active .jumbotron-section, body:not(.search-active) .search-page-form, .search-active .footer-wrapper {
  1082. display: none;
  1083. }
  1084.  
  1085. .scrolled-meta {
  1086. position: fixed;
  1087. max-width: 131px;
  1088. top: calc(50vh - 20%);
  1089. will-change: opacity, max-height;
  1090. -webkit-transition: opacity 200ms ease 0s, max-height 200ms ease 0s;
  1091. -o-transition: opacity 200ms ease 0s, max-height 200ms ease 0s;
  1092. transition: opacity 200ms ease 0s, max-height 200ms ease 0s;
  1093. max-height: 0;
  1094. overflow: hidden;
  1095. }
  1096. .scrolled-meta .scrolled-title {
  1097. color: $(item.color.text);
  1098. font-weight: 500;
  1099. margin-bottom: 5px;
  1100. -o-text-overflow: ellipsis;
  1101. text-overflow: ellipsis;
  1102. overflow: hidden;
  1103. }
  1104. .scrolled-description {
  1105. font-size: 14px;
  1106. color: $(item.color.snippet);
  1107. display: -webkit-box;
  1108. overflow: hidden;
  1109. -o-text-overflow: ellipsis;
  1110. text-overflow: ellipsis;
  1111. -webkit-line-clamp: 6;
  1112. -webkit-box-orient: vertical;
  1113. }
  1114. .scrolled-top {
  1115. border-bottom: 1px solid rgb(230, 230, 230);
  1116. padding-bottom: 28px;
  1117. }
  1118. .scrolled-bottom {
  1119. padding-top: 28px;
  1120. }
  1121. .scrolled-bottom .share-icon {
  1122. display: -ms-grid;
  1123. display: grid;
  1124. -ms-grid-columns: 1fr 5px 1fr 5px 1fr 5px 1fr;
  1125. grid-template-columns: repeat(4,1fr);
  1126. -webkit-box-align: center;
  1127. -ms-flex-align: center;
  1128. align-items: center;
  1129. -webkit-box-pack: center;
  1130. -ms-flex-pack: center;
  1131. justify-content: center;
  1132. gap: 5px;
  1133. }
  1134. .scrolled-bottom svg {
  1135. fill: $(item.color.snippet);
  1136. }
  1137. .scrolled-bottom .post-comments {
  1138. color: $(item.color.snippet);
  1139. margin-top: 19px;
  1140. display: -webkit-box;
  1141. display: -ms-flexbox;
  1142. display: flex;
  1143. -webkit-box-align: center;
  1144. -ms-flex-align: center;
  1145. align-items: center;
  1146. cursor: pointer;
  1147. -webkit-user-select: none;
  1148. -moz-user-select: none;
  1149. -ms-user-select: none;
  1150. user-select: none;
  1151. }
  1152.  
  1153. .error .error-wrapper {
  1154. margin: 20px auto 60px auto;
  1155. }
  1156. .error .error-wrapper .not-found {
  1157. font-size: 18px;
  1158. text-transform: uppercase;
  1159. font-weight: 400;
  1160. }
  1161. .error .error-wrapper h3 {
  1162. font-size: 152px;
  1163. margin: 11px 0 0 0;
  1164. color: rgba(0,0,0,.3);
  1165. font-weight: normal;
  1166. }
  1167. .error .error-wrapper h4 {
  1168. line-height: 66px;
  1169. font-size: 66px;
  1170. margin: 11px 0 0 0;
  1171. font-weight: normal;
  1172. }
  1173. .error .error-wrapper .not-found-description {
  1174. line-height: 24px;
  1175. font-size: 20px;
  1176. color: rgba(0,0,0,.84);
  1177. margin: 11px 0;
  1178. }
  1179. .error .error-wrapper a {
  1180. color: inherit;
  1181. text-decoration: underline;
  1182. }
  1183.  
  1184. /* ----- Footer ----- */
  1185. .footer-wrapper {
  1186. background-color: $(footer.color.background);
  1187. padding: 32px 0px;
  1188. margin-top: 30px
  1189. }
  1190. .footer-wrapper .footer-section {
  1191. -webkit-box-align: center;
  1192. -ms-flex-align: center;
  1193. align-items: center;
  1194. display: -webkit-box;
  1195. display: -ms-flexbox;
  1196. display: flex;
  1197. -webkit-box-pack: justify;
  1198. -ms-flex-pack: justify;
  1199. justify-content: space-between;
  1200. max-width: $(main.width);
  1201. margin: 0 auto;
  1202. }
  1203. .footer-wrapper .footer-section img {
  1204. max-height: 22px;
  1205. }
  1206. .footer-wrapper .footer-section .LinkList a {
  1207. color: $(footer.color.text)
  1208. }
  1209. .footer-wrapper .footer-section .LinkList a:hover {
  1210. text-decoration: underline
  1211. }
  1212.  
  1213. /* ----- Widgets ----- */
  1214. .sidebar-section .widget {
  1215. border-bottom: 1px solid $(widget.color.border);
  1216. margin-bottom: 30px;
  1217. padding-bottom: 30px;
  1218. }
  1219. .sidebar-section .widget .title {
  1220. -webkit-user-select: none;
  1221. -moz-user-select: none;
  1222. -ms-user-select: none;
  1223. user-select: none;
  1224. color: $(widget.color.title);
  1225. }
  1226. .FeaturedPost .post .post-title, .PopularPosts .popular-widget .post-title, .Profile .profile-link .profile-name {
  1227. color: $(widget.color.posttitle);
  1228. }
  1229. .PopularPosts .popular-widget .post-meta-top, .FeaturedPost .post .post-meta-top {
  1230. color: $(widget.color.postmetatop);
  1231. }
  1232. .FeaturedPost .post .post-title .post-snippet {
  1233. color: $(widget.color.postsnippet)
  1234. }
  1235.  
  1236. .Label h3.title {
  1237. letter-spacing: 0.083em;
  1238. text-transform: uppercase;
  1239. font-size: 12px;
  1240. margin: 0 0 16px 0;
  1241. line-height: 16px;
  1242. }
  1243. .Label .label-widget.cloud span {
  1244. display: inline-block;
  1245. font-size: 14px;
  1246. }
  1247. .Label .label-widget.cloud span a {
  1248. padding: 6px 16px;
  1249. line-height: 20px;
  1250. margin: 0 8px 8px 0;
  1251. border: 1px solid $(widget.color.labelborder);
  1252. border-radius: 3px;
  1253. display: inline-block;
  1254. }
  1255. .rtl .Label .label-widget.cloud span a {
  1256. margin: 0 0 8px 8px;
  1257. }
  1258. .Label .label-widget a {
  1259. color: $(widget.color.labeltext);
  1260. }
  1261. .Label .label-widget.list ul:first-child {
  1262. padding: 0;
  1263. list-style: inside;
  1264. }
  1265. .Label .label-widget.list li {
  1266. line-height: 1.5;
  1267. }
  1268.  
  1269. .FeaturedPost .post {
  1270. -webkit-box-orient: vertical;
  1271. -webkit-box-direction: normal;
  1272. -ms-flex-direction: column;
  1273. flex-direction: column;
  1274. margin: 0
  1275. }
  1276. .FeaturedPost .post .post-image {
  1277. margin-bottom: 20px;
  1278. width: 100%;
  1279. height: 245px;
  1280. }
  1281. .FeaturedPost .post .post-image-link {
  1282. display: block;
  1283. height: 100%;
  1284. overflow: hidden;
  1285. width: 100%;
  1286. position: relative;
  1287. }
  1288. .FeaturedPost .post .post-image-link span {
  1289. width: 100%;
  1290. height: 100%;
  1291. background-size: cover;
  1292. display: block;
  1293. background-repeat: no-repeat;
  1294. background-position: center;
  1295. }
  1296. .FeaturedPost .post .post-meta-bottom .post-time, .PopularPosts .popular-widget .post-meta-bottom .post-time {
  1297. display: -webkit-box;
  1298. display: -ms-flexbox;
  1299. display: flex;
  1300. -webkit-box-align: center;
  1301. -ms-flex-align: center;
  1302. align-items: center;
  1303. -webkit-box-pack: center;
  1304. -ms-flex-pack: center;
  1305. justify-content: center;
  1306. }
  1307. .FeaturedPost .post .post-meta-bottom .post-time svg, .PopularPosts .popular-widget .post-meta-bottom .post-time svg {
  1308. fill: currentColor;
  1309. }
  1310.  
  1311. .Profile .profile-widget {
  1312. padding: 32px;
  1313. background-color: $(widget.color.labelbackground);
  1314. display: -webkit-box;
  1315. display: -ms-flexbox;
  1316. display: flex;
  1317. -webkit-box-orient: vertical;
  1318. -webkit-box-direction: normal;
  1319. -ms-flex-direction: column;
  1320. flex-direction: column;
  1321. -webkit-box-pack: center;
  1322. -ms-flex-pack: center;
  1323. justify-content: center;
  1324. }
  1325. .Profile .profile-widget h3.title {
  1326. font-size: 14px;
  1327. letter-spacing: 0.083em;
  1328. margin: 0;
  1329. text-transform: uppercase;
  1330. }
  1331. .Profile .profile-widget .profile {
  1332. -webkit-box-align: center;
  1333. -ms-flex-align: center;
  1334. align-items: center;
  1335. display: -webkit-box;
  1336. display: -ms-flexbox;
  1337. display: flex;
  1338. -webkit-box-pack: justify;
  1339. -ms-flex-pack: justify;
  1340. justify-content: space-between;
  1341. padding-top: 16px;
  1342. -webkit-user-select: none;
  1343. -moz-user-select: none;
  1344. -ms-user-select: none;
  1345. user-select: none;
  1346. }
  1347. .Profile .profile-link {
  1348. -webkit-box-align: center;
  1349. -ms-flex-align: center;
  1350. align-items: center;
  1351. display: -webkit-box;
  1352. display: -ms-flexbox;
  1353. display: flex;
  1354. margin-right: 8px;
  1355. overflow: hidden;
  1356. gap:10px
  1357. }
  1358. .Profile .profile-link .profile-name {
  1359. font-weight: 700;
  1360. }
  1361. .Profile .profile-follow, .FollowByEmail .follow-by-email-submit, .ContactForm .contact-form-button {
  1362. -webkit-box-align: center;
  1363. -ms-flex-align: center;
  1364. align-items: center;
  1365. border: 1px solid $(widget.color.labelbuttonborder);
  1366. border-radius: 4px;
  1367. color: $(widget.color.labelbutton);
  1368. display: -webkit-box;
  1369. display: -ms-flexbox;
  1370. display: flex;
  1371. font-size: 14px;
  1372. -webkit-box-pack: center;
  1373. -ms-flex-pack: center;
  1374. justify-content: center;
  1375. min-height: 20px;
  1376. padding: 6px 12px;
  1377. }
  1378. .Profile .profile-follow:hover, .FollowByEmail .follow-by-email-submit:hover {
  1379. border-color: $(widget.color.labelbuttonborderhover);
  1380. color: $(widget.color.labelbuttoncolorhover);
  1381. }
  1382. .Profile .profile-widget .profile-img {
  1383. border-radius: 50%;
  1384. height: 48px;
  1385. width: 48px;
  1386. border-radius: 100px;
  1387. background-position: center;
  1388. background-size: cover;
  1389. background-repeat: no-repeat;
  1390. }
  1391.  
  1392. .PopularPosts .popular-widget .post-title h2 {
  1393. font-size: 18px;
  1394. line-height: 22px;
  1395. }
  1396. .PopularPosts .popular-widget {
  1397. counter-reset: section;
  1398. }
  1399. .PopularPosts .popular-widget .post {
  1400. -webkit-box-align: unset;
  1401. -ms-flex-align: unset;
  1402. align-items: unset;
  1403. width: 100%;
  1404. margin-bottom: 24px;
  1405. gap: 20px;
  1406. }
  1407. .PopularPosts .popular-widget .post .block-meta {
  1408. width: 100%;
  1409. }
  1410. .PopularPosts .popular-widget .post::before {
  1411. counter-increment: section;
  1412. content: counter(section, decimal-leading-zero);
  1413. color: $(widget.color.popularcounter);
  1414. font-weight: 700;
  1415. font-size: 28px;
  1416. min-width: 28px;
  1417. }
  1418. .PopularPosts .popular-widget .post:last-child {
  1419. margin: 0
  1420. }
  1421. .PopularPosts .popular-widget .post-meta-bottom .post-time, .FeaturedPost .post .post-meta-bottom .post-time {
  1422. padding-top: 8px;
  1423. }
  1424. .PopularPosts .title {
  1425. display: -webkit-box;
  1426. display: -ms-flexbox;
  1427. display: flex;
  1428. -webkit-box-align: center;
  1429. -ms-flex-align: center;
  1430. align-items: center;
  1431. gap: 10px;
  1432. letter-spacing: 0.083em;
  1433. line-height: 16px;
  1434. font-size: 12px;
  1435. text-transform: uppercase;
  1436. }
  1437.  
  1438. .BlogSearch .search-input {
  1439. background-color: transparent;
  1440. -webkit-box-align: center;
  1441. -ms-flex-align: center;
  1442. align-items: center;
  1443. display: -webkit-box;
  1444. display: -ms-flexbox;
  1445. display: flex;
  1446. -webkit-box-pack: justify;
  1447. -ms-flex-pack: justify;
  1448. justify-content: space-between;
  1449. padding: 10px 0;
  1450. }
  1451. .BlogSearch .search-action {
  1452. -webkit-appearance: none;
  1453. -moz-appearance: none;
  1454. appearance: none;
  1455. -webkit-box-align: center;
  1456. -ms-flex-align: center;
  1457. align-items: center;
  1458. background: transparent;
  1459. border: none;
  1460. display: -webkit-box;
  1461. display: -ms-flexbox;
  1462. display: flex;
  1463. margin-right: 8px;
  1464. padding: 0;
  1465. cursor: pointer;
  1466. color: $(widget.color.searchcolor)
  1467. }
  1468. .BlogSearch .search-input input {
  1469. background-color: transparent;
  1470. width: 100%;
  1471. line-height: 1.5;
  1472. border: none;
  1473. outline: none;
  1474. color: $(widget.color.searchcolor)
  1475. }
  1476. .BlogSearch .search-input input:focus {
  1477. border: none;
  1478. outline: none;
  1479. }
  1480.  
  1481. .BlogArchive .archive-widget {
  1482. max-height: 50vh;
  1483. overflow: hidden;
  1484. overflow-y: auto;
  1485. }
  1486. .BlogArchive a {
  1487. color: inherit;
  1488. }
  1489. .BlogArchive a:hover {
  1490. text-decoration: underline;
  1491. }
  1492. .BlogArchive ul:not(.hierarchy-content ul):first-child {
  1493. padding-left: 0;
  1494. list-style-position: inside;
  1495. }
  1496. .BlogArchive li {
  1497. line-height: 1.5;
  1498. }
  1499.  
  1500. .FollowByEmail .followemail-widget form {
  1501. display: -webkit-box;
  1502. display: -ms-flexbox;
  1503. display: flex;
  1504. -webkit-box-orient: vertical;
  1505. -webkit-box-direction: normal;
  1506. -ms-flex-direction: column;
  1507. flex-direction: column;
  1508. -webkit-box-align: center;
  1509. -ms-flex-align: center;
  1510. align-items: center;
  1511. padding: 10px 30px 30px;
  1512. text-align: center;
  1513. }
  1514. .FollowByEmail .followemail-widget h3 {
  1515. margin: 0
  1516. }
  1517. .FollowByEmail .follow-by-email-address {
  1518. width: 80%;
  1519. line-height: 2;
  1520. border: none;
  1521. outline: none;
  1522. margin-bottom: 20px;
  1523. border-bottom: 1px solid #e6e6e6;
  1524. }
  1525. .FollowByEmail .follow-by-email-submit {
  1526. background: transparent;
  1527. line-height: 2;
  1528. cursor: pointer;
  1529. }
  1530.  
  1531. .ContactForm .contact-form-widget form {
  1532. display: -webkit-box;
  1533. display: -ms-flexbox;
  1534. display: flex;
  1535. -webkit-box-orient: vertical;
  1536. -webkit-box-direction: normal;
  1537. -ms-flex-direction: column;
  1538. flex-direction: column;
  1539. -webkit-box-align: center;
  1540. -ms-flex-align: center;
  1541. align-items: center;
  1542. -webkit-box-pack: justify;
  1543. -ms-flex-pack: justify;
  1544. justify-content: space-between;
  1545. }
  1546. .ContactForm .contact-form-widget input:not(.contact-form-button) {
  1547. background-color: transparent;
  1548. width: 80%;
  1549. line-height: 2;
  1550. border: none;
  1551. outline: none;
  1552. margin-bottom: 20px;
  1553. border-bottom: 1px solid #e6e6e6;
  1554. }
  1555. .ContactForm .contact-form-widget textarea {
  1556. width: 80%;
  1557. line-height: 1.5;
  1558. border: none;
  1559. resize: vertical;
  1560. outline: none;
  1561. margin-bottom: 20px;
  1562. border-bottom: 1px solid #e6e6e6;
  1563. }
  1564. .ContactForm .contact-form-button {
  1565. background: transparent;
  1566. font-size: 16px;
  1567. cursor: pointer;
  1568. }
  1569.  
  1570. /* ----- Plugin ----- */
  1571. .blur-up {
  1572. -webkit-filter: opacity(0);
  1573. filter: opacity(0);
  1574. transition: filter 200ms, -webkit-filter 200ms;
  1575. }
  1576.  
  1577. .blur-up.lazyloaded {
  1578. -webkit-filter: opacity(1);
  1579. filter: opacity(1);
  1580. }
  1581.  
  1582. [aria-hidden='true'], [data-a11y-toggle]:not([aria-controls]) {
  1583. display: none !important;
  1584. }
  1585.  
  1586. .CSS_LIGHTBOX {
  1587. z-index: 999 !important;
  1588. cursor: -webkit-zoom-out;
  1589. cursor: zoom-out;
  1590. }
  1591. .CSS_LIGHTBOX_BG_MASK {
  1592. background: $(item.color.imagelightbox) !important;
  1593. }
  1594. .CSS_LIGHTBOX_SCALED_IMAGE_IMG {
  1595. outline: none !important;
  1596. -webkit-animation: scale .5s ease;
  1597. animation: scale .5s ease;
  1598. cursor: -webkit-zoom-out !important;
  1599. cursor: zoom-out !important;
  1600. }
  1601. .CSS_LIGHTBOX_FILMSTRIP {
  1602. background-color: transparent !important
  1603. }
  1604. @-webkit-keyframes scale {
  1605. from {
  1606. -webkit-transform: scale(0);
  1607. transform: scale(0);
  1608. }
  1609. to {
  1610. -webkit-transform: scale(1);
  1611. transform: scale(1);
  1612. }
  1613. }
  1614. @keyframes scale {
  1615. from {
  1616. -webkit-transform: scale(0);
  1617. transform: scale(0);
  1618. }
  1619. to {
  1620. -webkit-transform: scale(1);
  1621. transform: scale(1);
  1622. }
  1623. }
  1624.  
  1625. @media (min-width: 1025px) and (max-width: 1280px) {
  1626. .header-wrapper .header-section, .inner-wrapper, .footer-wrapper .footer-section, .main-top-wrapper .HTML .jumbotron-content, .main-top-wrapper .search-page-form form, .main-top-wrapper .popular-jumbotron {
  1627. margin: 0 64px;
  1628. }
  1629. .item .post-header .post-meta .share-toggle #toggle-share {
  1630. left: 0;
  1631. -webkit-transform: translate3d(-65%, 0px, 0px);
  1632. transform: translate3d(-65%, 0px, 0px);
  1633. }
  1634. .item .post-header .post-meta .share-toggle #toggle-share::before {
  1635. left: 68%;
  1636. }
  1637. }
  1638.  
  1639. @media (min-width: 768px) and (max-width: 1024px) {
  1640. .header-wrapper .header-section, .inner-wrapper, .footer-wrapper .footer-section, .main-top-wrapper .HTML .jumbotron-content, .main-top-wrapper .search-page-form form, .main-top-wrapper .popular-jumbotron {
  1641. margin: 0 64px;
  1642. }
  1643. .item .post-header .post-meta .share-toggle #toggle-share {
  1644. left: 0;
  1645. -webkit-transform: translate3d(-65%, 0px, 0px);
  1646. transform: translate3d(-65%, 0px, 0px);
  1647. }
  1648. .item .post-header .post-meta .share-toggle #toggle-share::before {
  1649. left: 68%;
  1650. }
  1651. .index .main-wrapper .blog-post .post-title .post-snippet, .search-label .main-wrapper .blog-post .post-title .post-snippet {
  1652. overflow: hidden;
  1653. -o-text-overflow: ellipsis;
  1654. text-overflow: ellipsis;
  1655. -webkit-line-clamp: 2;
  1656. -webkit-box-orient: vertical;
  1657. display: -webkit-box;
  1658. }
  1659. .main-wrapper {
  1660. -ms-grid-columns: 1fr;
  1661. grid-template-columns: 1fr;
  1662. -ms-grid-rows: 1fr;
  1663. grid-template-rows: 1fr;
  1664. }
  1665. .main-wrapper > *:nth-child(1) {
  1666. -ms-grid-row:1;-ms-grid-column:1;
  1667. }
  1668. body:not(.item):not(.static_page) .main-wrapper .blog-wrapper, .main-wrapper .sidebar-wrapper {
  1669. -ms-grid-column: 1;
  1670. -ms-grid-column-span: 12;
  1671. grid-column: 1 / span 12;
  1672. -ms-grid-row: 1;
  1673. grid-row-start: 3;
  1674. padding-bottom: 25px;
  1675. }
  1676. body:not(.item):not(.static_page) .main-wrapper .blog-wrapper {
  1677. -ms-grid-row: 2;
  1678. grid-row-start: 2;
  1679. }
  1680. .item .post-header .post-title, .static_page .post-header .post-title {
  1681. line-height: 42px;
  1682. letter-spacing: -0.016em;
  1683. font-size: 34px;
  1684. }
  1685. .item .post-header .post-description {
  1686. line-height: 22px;
  1687. font-size: 16px;
  1688. }
  1689. .item .post-body, .static_page .post-body {
  1690. line-height: 24px;
  1691. font-size: 22px;
  1692. }
  1693. .item #comments .comment-container {
  1694. border-top-right-radius: 20px;
  1695. border-top-left-radius: 20px;
  1696. left: 0;
  1697. width: 100%;
  1698. -webkit-transform: translateY(30px);
  1699. -ms-transform: translateY(30px);
  1700. transform: translateY(30px);
  1701. -webkit-transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, -webkit-transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  1702. transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, -webkit-transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  1703. -o-transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  1704. transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  1705. transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, -webkit-transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  1706. -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px;
  1707. box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px;
  1708. top: 0px;
  1709. height: 100%;
  1710. right: 0;
  1711. }
  1712. .search-label .main-wrapper .blog-post .post-title .post-snippet {
  1713. overflow: hidden;
  1714. -o-text-overflow: ellipsis;
  1715. text-overflow: ellipsis;
  1716. -webkit-line-clamp: 2;
  1717. -webkit-box-orient: vertical;
  1718. display: -webkit-box;
  1719. }
  1720.  
  1721. .error .error-wrapper {
  1722. margin: 0;
  1723. }
  1724. .error .error-wrapper .not-found {
  1725. font-size: 16px;
  1726. }
  1727. .error .error-wrapper h3 {
  1728. line-height: 104px;
  1729. font-size: 92px;
  1730. }
  1731. .error .error-wrapper h4 {
  1732. line-height: 36px;
  1733. font-size: 34px;
  1734. }
  1735. .error .error-wrapper .not-found-description {
  1736. line-height: 20px;
  1737. font-size: 18px;
  1738. }
  1739. .scrolled-meta {
  1740. display: none
  1741. }
  1742. .main-top-wrapper .popular-jumbotron .popular-widget {
  1743. -ms-grid-columns: (1fr)[2];
  1744. grid-template-columns: repeat(2, 1fr);
  1745. }
  1746. }
  1747.  
  1748. @media (min-width: 481px) and (max-width: 767px) {
  1749. .header-wrapper .header-section, .inner-wrapper, .footer-wrapper .footer-section, .main-top-wrapper .HTML .jumbotron-content, .main-top-wrapper .search-page-form form, .main-top-wrapper .popular-jumbotron {
  1750. margin: 0px 24px
  1751. }
  1752. .item .post-header .post-meta .share-toggle #toggle-share {
  1753. left: 0;
  1754. -webkit-transform: translate3d(-65%, 0px, 0px);
  1755. transform: translate3d(-65%, 0px, 0px);
  1756. }
  1757. .item .post-header .post-meta .share-toggle #toggle-share::before {
  1758. left: 68%;
  1759. }
  1760. .index:not(.search-label) .main-wrapper .blog-post .post-title .post-snippet, .post-time .divider, .post-time .translate, .post-time .updated, .scrolled-meta {
  1761. display: none;
  1762. }
  1763. .main-wrapper {
  1764. -ms-grid-columns: 1fr;
  1765. grid-template-columns: 1fr;
  1766. -ms-grid-rows: 1fr;
  1767. grid-template-rows: 1fr;
  1768. }
  1769. .inner-wrapper {
  1770. padding-top: 40px;
  1771. }
  1772. .main-wrapper > *:nth-child(1) {-ms-grid-row:1;-ms-grid-column:1;
  1773. }
  1774. body:not(.item):not(.static_page) .main-wrapper .blog-wrapper, .main-wrapper .sidebar-wrapper {
  1775. -ms-grid-column: 1;
  1776. -ms-grid-column-span: 12;
  1777. grid-column: 1 / span 12;
  1778. -ms-grid-row: 1;
  1779. grid-row-start: 3;
  1780. padding-bottom: 25px;
  1781. }
  1782. body:not(.item):not(.static_page) .main-wrapper .blog-wrapper {
  1783. -ms-grid-row: 2;
  1784. grid-row-start: 2;
  1785. }
  1786. .index .main-wrapper .blog-post .post-title h2 {
  1787. font-size: 18px;
  1788. line-height: 22px;
  1789. }
  1790. .index .main-wrapper .blog-post .post-meta-bottom {
  1791. font-size: 13px;
  1792. padding-top: 4px;
  1793. }
  1794. .index .main-wrapper .blog-post .post-image-link, .search-label .main-wrapper .blog-post:not(:first-child) .post-image-link {
  1795. width: 100px;
  1796. height: 100px;
  1797. }
  1798. .index .main-wrapper .blog-post {
  1799. margin-bottom: 32px;
  1800. }
  1801. .item .post-header .post-title, .static_page .post-header .post-title {
  1802. line-height: 42px;
  1803. letter-spacing: -0.016em;
  1804. font-size: 34px;
  1805. }
  1806. .item .post-header .post-description {
  1807. line-height: 22px;
  1808. font-size: 16px;
  1809. }
  1810. .item .post-body, .static_page .post-body {
  1811. line-height: 24px;
  1812. font-size: 20px;
  1813. }
  1814. .item #comments .comment-container {
  1815. border-top-right-radius: 20px;
  1816. border-top-left-radius: 20px;
  1817. left: 0;
  1818. width: 100%;
  1819. -webkit-transform: translateY(30px);
  1820. -ms-transform: translateY(30px);
  1821. transform: translateY(30px);
  1822. -webkit-transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, -webkit-transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  1823. transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, -webkit-transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  1824. -o-transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  1825. transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  1826. transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, -webkit-transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  1827. -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px;
  1828. box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px;
  1829. top: 0px;
  1830. height: 100%;
  1831. right: 0;
  1832. }
  1833. .item .post-footer .about-author {
  1834. padding-top: 24px;
  1835. }
  1836. .item .post-footer .about-author .author-avatar {
  1837. height: 40px;
  1838. width: 40px;
  1839. }
  1840. .item .post-footer .about-author .author-name span {
  1841. font-size: 12px;
  1842. line-height: 16px;
  1843. letter-spacing: 0.083em;
  1844. }
  1845. .item .post-footer .about-author .author-name .authors {
  1846. font-size: 16px;
  1847. line-height: 20px;
  1848. }
  1849. .item .post-footer .about-author .description-text {
  1850. padding-top: 8px;
  1851. line-height: 20px;
  1852. font-size: 14px;
  1853. }
  1854. .search-label .main-wrapper .blog-post:first-child .post-title h2 {
  1855. font-size: 22px;
  1856. letter-spacing: 0px;
  1857. line-height: 28px;
  1858. }
  1859. .search-label .main-wrapper .blog-post .post-title .post-snippet {
  1860. overflow: hidden;
  1861. -o-text-overflow: ellipsis;
  1862. text-overflow: ellipsis;
  1863. -webkit-line-clamp: 2;
  1864. -webkit-box-orient: vertical;
  1865. display: -webkit-box;
  1866. }
  1867. .main-top-wrapper .search-page-form input {
  1868. font-size: 34px;
  1869. height: 50px;
  1870. }
  1871.  
  1872. .error .error-wrapper {
  1873. margin: 0;
  1874. text-align: center;
  1875. }
  1876. .error .error-wrapper .not-found {
  1877. font-size: 16px;
  1878. }
  1879. .error .error-wrapper h3 {
  1880. line-height: 104px;
  1881. font-size: 92px;
  1882. }
  1883. .error .error-wrapper h4 {
  1884. line-height: 36px;
  1885. font-size: 34px;
  1886. }
  1887. .error .error-wrapper .not-found-description {
  1888. line-height: 20px;
  1889. font-size: 18px;
  1890. }
  1891.  
  1892. .header-wrapper .header-section .LinkList .button-icon, .header-wrapper .header-section .LinkList .menu-widget.active {
  1893. display: -webkit-box !important;
  1894. display: -ms-flexbox !important;
  1895. display: flex !important;
  1896. }
  1897.  
  1898. .header-wrapper .header-section .LinkList .menu-widget {
  1899. left: 100%;
  1900. -webkit-transform: translate3d(-100%, 65%, 0);
  1901. transform: translate3d(-100%, 65%, 0);
  1902. display: none;
  1903. -webkit-box-orient: vertical;
  1904. -webkit-box-direction: normal;
  1905. -ms-flex-direction: column;
  1906. flex-direction: column;
  1907. -webkit-box-shadow: $(header.color.menuboxshdow) 0px 1px 4px;
  1908. box-shadow: $(header.color.menuboxshdow) 0px 1px 4px;
  1909. margin-top: 5px;
  1910. border: 1px solid $(header.color.menuborder);
  1911. border-radius: 4px;
  1912. position: absolute;
  1913. padding: 8px 0;
  1914. width: -webkit-max-content;
  1915. width: -moz-max-content;
  1916. width: max-content;
  1917. max-width: 220px;
  1918. background-color: $(header.color.menubg);
  1919. }
  1920. .header-wrapper .header-section .LinkList .menu-widget::before {
  1921. right: 8%;
  1922. content: "";
  1923. background-color: $(header.color.menubg);
  1924. width: 14px;
  1925. height: 14px;
  1926. -webkit-transform: rotate(45deg) translate(6px, 6px);
  1927. -ms-transform: rotate(45deg) translate(6px, 6px);
  1928. transform: rotate(45deg) translate(6px, 6px);
  1929. position: absolute;
  1930. top: -13px;
  1931. -webkit-box-shadow: $(header.color.menuboxshdow) -1px -1px 1px -1px;
  1932. box-shadow: $(header.color.menuboxshdow) -1px -1px 1px -1px;
  1933. }
  1934. .header-wrapper .header-section .LinkList .menu-item {
  1935. margin: 0;
  1936. padding: 8px 20px;
  1937. word-break: break-word;
  1938. }
  1939. .header-wrapper .header-section .LinkList .menu-item a {
  1940. color: $(header.color.menu)
  1941. }
  1942. .main-top-wrapper .popular-jumbotron .popular-widget {
  1943. -ms-grid-columns: (1fr)[1];
  1944. grid-template-columns: repeat(1, 1fr);
  1945. }
  1946. .index .main-wrapper .blog-post .post-meta-bottom .post-comment {
  1947. padding: 12px;
  1948. }
  1949. .item .post-body blockquote, .static_page .post-body blockquote {
  1950. padding-left: 23px;
  1951. margin: 0;
  1952. }
  1953. .rtl .item .post-body blockquote, .rtl .static_page .post-body blockquote {
  1954. padding-left: 0;
  1955. padding-right: 23px;
  1956. }
  1957. }
  1958.  
  1959. @media (min-width: 320px) and (max-width: 480px) {
  1960. .header-wrapper .header-section, .inner-wrapper, .footer-wrapper .footer-section, .main-top-wrapper .HTML .jumbotron-content, .main-top-wrapper .search-page-form form, .main-top-wrapper .popular-jumbotron {
  1961. margin: 0px 24px
  1962. }
  1963. .item .post-header .post-meta .share-toggle #toggle-share {
  1964. left: 0;
  1965. -webkit-transform: translate3d(-65%, 0px, 0px);
  1966. transform: translate3d(-65%, 0px, 0px);
  1967. }
  1968. .item .post-header .post-meta .share-toggle #toggle-share::before {
  1969. left: 68%;
  1970. }
  1971. .index:not(.search-label) .main-wrapper .blog-post .post-title .post-snippet, .post-time .divider, .post-time .translate, .post-time .updated, .scrolled-meta {
  1972. display: none;
  1973. }
  1974. .main-wrapper {
  1975. -ms-grid-columns: 1fr;
  1976. grid-template-columns: 1fr;
  1977. -ms-grid-rows: 1fr;
  1978. grid-template-rows: 1fr;
  1979. }
  1980. .inner-wrapper {
  1981. padding-top: 40px;
  1982. }
  1983. .main-wrapper > *:nth-child(1) {-ms-grid-row:1;-ms-grid-column:1;
  1984. }
  1985. body:not(.item):not(.static_page) .main-wrapper .blog-wrapper, .main-wrapper .sidebar-wrapper {
  1986. -ms-grid-column: 1;
  1987. -ms-grid-column-span: 12;
  1988. grid-column: 1 / span 12;
  1989. -ms-grid-row: 1;
  1990. grid-row-start: 3;
  1991. padding-bottom: 25px;
  1992. }
  1993. body:not(.item):not(.static_page) .main-wrapper .blog-wrapper {
  1994. -ms-grid-row: 2;
  1995. grid-row-start: 2;
  1996. }
  1997. .index .main-wrapper .blog-post .post-title h2 {
  1998. font-size: 18px;
  1999. line-height: 22px;
  2000. }
  2001. .index .main-wrapper .blog-post .post-meta-bottom {
  2002. font-size: 13px;
  2003. padding-top: 4px;
  2004. }
  2005. .index .main-wrapper .blog-post .post-image-link, .search-label .main-wrapper .blog-post:not(:first-child) .post-image-link {
  2006. width: 77px;
  2007. height: 77px;
  2008. }
  2009. .index .main-wrapper .blog-post {
  2010. margin-bottom: 32px;
  2011. }
  2012. .item .post-header .post-title, .static_page .post-header .post-title {
  2013. line-height: 42px;
  2014. letter-spacing: -0.016em;
  2015. font-size: 34px;
  2016. }
  2017. .item .post-header .post-description {
  2018. line-height: 22px;
  2019. font-size: 16px;
  2020. }
  2021. .item .post-body, .static_page .post-body {
  2022. line-height: 22px;
  2023. font-size: 18px;
  2024. }
  2025. .item #comments .comment-container {
  2026. border-top-right-radius: 20px;
  2027. border-top-left-radius: 20px;
  2028. left: 0;
  2029. width: 100%;
  2030. -webkit-transform: translateY(30px);
  2031. -ms-transform: translateY(30px);
  2032. transform: translateY(30px);
  2033. -webkit-transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, -webkit-transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  2034. transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, -webkit-transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  2035. -o-transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  2036. transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  2037. transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, -webkit-transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  2038. -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px;
  2039. box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px;
  2040. top: 0px;
  2041. height: 100%;
  2042. right: 0;
  2043. }
  2044. .item .post-footer .about-author {
  2045. padding-top: 24px;
  2046. }
  2047. .item .post-footer .about-author .author-avatar {
  2048. height: 40px;
  2049. width: 40px;
  2050. }
  2051. .item .post-footer .about-author .author-name span {
  2052. font-size: 12px;
  2053. line-height: 16px;
  2054. letter-spacing: 0.083em;
  2055. }
  2056. .item .post-footer .about-author .author-name .authors {
  2057. font-size: 16px;
  2058. line-height: 20px;
  2059. }
  2060. .item .post-footer .about-author .description-text {
  2061. padding-top: 8px;
  2062. line-height: 20px;
  2063. font-size: 14px;
  2064. }
  2065. .search-label .main-wrapper .blog-post:first-child .post-title h2 {
  2066. font-size: 22px;
  2067. letter-spacing: 0px;
  2068. line-height: 28px;
  2069. }
  2070. .search-label .main-wrapper .blog-post .post-title .post-snippet {
  2071. overflow: hidden;
  2072. -o-text-overflow: ellipsis;
  2073. text-overflow: ellipsis;
  2074. -webkit-line-clamp: 2;
  2075. -webkit-box-orient: vertical;
  2076. display: -webkit-box;
  2077. }
  2078. .main-top-wrapper .search-page-form input {
  2079. font-size: 34px;
  2080. height: 50px;
  2081. }
  2082.  
  2083. .error .error-wrapper {
  2084. margin: 0;
  2085. text-align: center;
  2086. }
  2087. .error .error-wrapper .not-found {
  2088. font-size: 16px;
  2089. }
  2090. .error .error-wrapper h3 {
  2091. line-height: 104px;
  2092. font-size: 92px;
  2093. }
  2094. .error .error-wrapper h4 {
  2095. line-height: 36px;
  2096. font-size: 34px;
  2097. }
  2098. .error .error-wrapper .not-found-description {
  2099. line-height: 20px;
  2100. font-size: 18px;
  2101. }
  2102.  
  2103. .header-wrapper .header-section .LinkList .button-icon, .header-wrapper .header-section .LinkList .menu-widget.active {
  2104. display: -webkit-box !important;
  2105. display: -ms-flexbox !important;
  2106. display: flex !important;
  2107. }
  2108.  
  2109. .header-wrapper .header-section .LinkList .menu-widget {
  2110. left: 100%;
  2111. -webkit-transform: translate3d(-100%, 65%, 0);
  2112. transform: translate3d(-100%, 65%, 0);
  2113. display: none;
  2114. -webkit-box-orient: vertical;
  2115. -webkit-box-direction: normal;
  2116. -ms-flex-direction: column;
  2117. flex-direction: column;
  2118. -webkit-box-shadow: $(header.color.menuboxshdow) 0px 1px 4px;
  2119. box-shadow: $(header.color.menuboxshdow) 0px 1px 4px;
  2120. margin-top: 5px;
  2121. border: 1px solid $(header.color.menuborder);
  2122. border-radius: 4px;
  2123. position: absolute;
  2124. background-color: $(header.color.menubg);
  2125. padding: 8px 0;
  2126. width: -webkit-max-content;
  2127. width: -moz-max-content;
  2128. width: max-content;
  2129. max-width: 220px;
  2130. }
  2131. .header-wrapper .header-section .LinkList .menu-widget::before {
  2132. right: 8%;
  2133. content: "";
  2134. background-color: $(header.color.menubg);
  2135. width: 14px;
  2136. height: 14px;
  2137. -webkit-transform: rotate(45deg) translate(6px, 6px);
  2138. -ms-transform: rotate(45deg) translate(6px, 6px);
  2139. transform: rotate(45deg) translate(6px, 6px);
  2140. position: absolute;
  2141. top: -13px;
  2142. -webkit-box-shadow: $(header.color.menuboxshdow) -1px -1px 1px -1px;
  2143. box-shadow: $(header.color.menuboxshdow) -1px -1px 1px -1px;
  2144. }
  2145. .header-wrapper .header-section .LinkList .menu-item {
  2146. margin: 0;
  2147. padding: 8px 20px;
  2148. word-break: break-word;
  2149. }
  2150. .header-wrapper .header-section .LinkList .menu-item a {
  2151. color: $(header.color.menu)
  2152. }
  2153. .main-top-wrapper .popular-jumbotron .popular-widget {
  2154. -ms-grid-columns: (1fr)[1];
  2155. grid-template-columns: repeat(1, 1fr);
  2156. }
  2157. .main-top-wrapper .HTML .jumbotron-content .title {
  2158. font-size: 48px;
  2159. line-height: 52px;
  2160. letter-spacing: -0.04em;
  2161. }
  2162. .main-top-wrapper .HTML .jumbotron-content p {
  2163. font-size: 16px;
  2164. line-height: 20px;
  2165. }
  2166. .index .main-wrapper .blog-post .post-meta-bottom .post-comment {
  2167. padding: 12px;
  2168. }
  2169. .item .post-body blockquote, .static_page .post-body blockquote {
  2170. padding-left: 23px;
  2171. margin: 0;
  2172. }
  2173. .rtl .item .post-body blockquote, .rtl .static_page .post-body blockquote {
  2174. padding-left: 0;
  2175. padding-right: 23px;
  2176. }
  2177. }
  2178.  
  2179. ]]></b:skin>
  2180.  
  2181.  
  2182.  
  2183. <b:if cond='data:view.isLayoutMode'>
  2184. <b:template-skin><![CDATA[
  2185. /*
  2186. * Prefixed by https://autoprefixer.github.io
  2187. * PostCSS: v7.0.29,
  2188. * Autoprefixer: v9.7.6
  2189. * Browsers: last 4 version
  2190. */
  2191.  
  2192. body#layout {
  2193. max-width: 980px;
  2194. margin: 0 auto;
  2195. background: transparent;
  2196. border: none;
  2197. }
  2198. body#layout div.section {
  2199. background: transparent;
  2200. border: transparent;
  2201. width: 100%;
  2202. overflow: hidden;
  2203. }
  2204. body#layout .section h4 {
  2205. text-align: center;
  2206. margin: 0;
  2207. }
  2208. body#layout .dropregion {
  2209. display: none;
  2210. }
  2211.  
  2212. body#layout .widget-content {
  2213. border-radius: 4px;
  2214. }
  2215. body#layout .draggable-widget .widget-content {
  2216. border-top-left-radius: 0;
  2217. border-bottom-left-radius: 0;
  2218. }
  2219.  
  2220. body#layout div.section#header-section .widget {
  2221. float: left;
  2222. width: 49.467%
  2223. }
  2224. body#layout div.section#header-section .Header {
  2225. margin-right: 10px;
  2226. }
  2227.  
  2228. body#layout .inner-wrapper {
  2229. width: 100%;
  2230. }
  2231. body#layout .blog-wrapper {
  2232. float: left;
  2233. width: 60%;
  2234. }
  2235. body#layout .sidebar-wrapper {
  2236. float: left;
  2237. width: 40%;
  2238. }
  2239. body#layout .hidden-section {
  2240. display: none
  2241. }
  2242. ]]>
  2243. </b:template-skin>
  2244. </b:if>
  2245.  
  2246. <b:defaultmarkups>
  2247. <b:defaultmarkup type='Common'>
  2248. <b:includable id='headContent'>
  2249. <meta expr:content='data:view.description.escaped' name='description'/>
  2250. <meta expr:content='&quot;text/html; charset=&quot; + data:blog.encoding' http-equiv='Content-Type'/>
  2251. <meta content='blogger' name='generator'/>
  2252. <meta expr:content='data:skin.vars.keycolor' name='theme-color'/>
  2253. <meta expr:content='data:skin.vars.keycolor' name='msapplication-navbutton-color'/>
  2254. <b:if cond='data:blog.adultContent'>
  2255. <meta content='adult' name='rating'/>
  2256. </b:if>
  2257.  
  2258. <b:include name='openGraph'/>
  2259.  
  2260. <link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
  2261. <link expr:href='data:view.url.canonical' rel='canonical'/>
  2262.  
  2263. <b:tag cond='data:view.isMultipleItems and data:widgets.Blog.first.posts[0].featuredImage' expr:href='data:widgets.Blog.first.posts[0].featuredImage' name='link' rel='image_src'/>
  2264. <b:tag cond='data:view.isSingleItem and data:view.featuredImage' expr:href='data:view.featuredImage' name='link' rel='image_src'/>
  2265.  
  2266. <data:blog.feedLinks/>
  2267. <data:blog.meTag/>
  2268. </b:includable>
  2269. <b:includable id='openGraph'>
  2270. <b:if cond='data:view.isHomepage'>
  2271. <meta content='website' property='og:type'/>
  2272. </b:if>
  2273. <b:if cond='data:view.isSingleItem'>
  2274. <meta content='article' property='og:type'/>
  2275. </b:if>
  2276. <b:if cond='data:view.isMultipleItems and not data:view.isHomepage'>
  2277. <meta content='object' property='og:type'/>
  2278. </b:if>
  2279. <meta expr:content='data:blog.title.escaped' property='og:site_name'/>
  2280. <meta expr:content='data:view.title.escaped' property='og:title'/>
  2281. <meta expr:content='data:blog.url.canonical' property='og:url'/>
  2282. <meta expr:content='data:view.description.escaped' property='og:description'/>
  2283. <b:tag cond='data:view.isMultipleItems and data:widgets.Blog.first.posts[0].featuredImage' expr:content='data:widgets.Blog.first.posts[0].featuredImage' name='meta' property='og:image'/>
  2284. <b:if cond='data:view.featuredImage'>
  2285. <meta expr:content='data:view.featuredImage' property='og:image'/>
  2286. <meta expr:content='data:view.featuredImage' name='twitter:image'/>
  2287. </b:if>
  2288. <meta content='summary_large_image' name='twitter:card'/>
  2289. <meta expr:content='data:view.title.escaped' name='twitter:title'/>
  2290. <meta expr:content='data:blog.url.canonical' name='twitter:url'/>
  2291. <meta expr:content='data:view.description.escaped' name='twitter:description'/>
  2292.  
  2293. <b:if cond='data:view.isHomepage'>
  2294. <script type='application/ld+json'>{&quot;@context&quot;:&quot;http://schema.org&quot;,&quot;@type&quot;:&quot;WebSite&quot;,&quot;name&quot;:&quot;<data:view.title.escaped/>&quot;,&quot;url&quot;:&quot;<data:view.url.canonical/>&quot;,&quot;potentialAction&quot;:{&quot;@type&quot;:&quot;SearchAction&quot;,&quot;target&quot;:&quot;<data:view.url.canonical/>search?q={search_term_string}&quot;,&quot;query-input&quot;:&quot;required name=search_term_string&quot;}}</script>
  2295. </b:if>
  2296. </b:includable>
  2297. <b:includable id='translate'>
  2298. <b:switch var='data:blog.locale'>
  2299. <b:case value='en'/>
  2300. <b:include name='customLanguage'/>
  2301. <b:default/>
  2302. <b:include name='customLanguage'/>
  2303. </b:switch>
  2304. </b:includable>
  2305. <b:includable id='customLanguage'>
  2306. <b:switch var='data:message'>
  2307. <b:case value='translateIn'/><b:if cond='data:blog.locale == &quot;en&quot;'>In<b:elseif cond='data:blog.locale == &quot;es&quot;'/>En<b:elseif cond='data:blog.locale == &quot;pt&quot;'/>No<b:elseif cond='data:blog.locale == &quot;id&quot;'/>Dalam<b:else/>In</b:if>
  2308. <b:case value='translateUpdated'/><b:if cond='data:blog.locale == &quot;en&quot;'>Updated<b:elseif cond='data:blog.locale == &quot;es&quot;'/>Actualizado<b:elseif cond='data:blog.locale == &quot;pt&quot;'/>Atualizada<b:elseif cond='data:blog.locale == &quot;id&quot;'/>Diperbarui<b:else/>Updated</b:if>
  2309. <b:case value='translateLoadMore'/><b:if cond='data:blog.locale == &quot;en&quot;'>Load More<b:elseif cond='data:blog.locale == &quot;es&quot;'/>Carga más<b:elseif cond='data:blog.locale == &quot;pt&quot;'/>Carregue mais<b:elseif cond='data:blog.locale == &quot;id&quot;'/>Muat Lebih Banyak<b:else/>Load More</b:if>
  2310. <b:case value='translateLoading'/><b:if cond='data:blog.locale == &quot;en&quot;'>Loading<b:elseif cond='data:blog.locale == &quot;es&quot;'/>Cargando<b:elseif cond='data:blog.locale == &quot;pt&quot;'/>Carregando<b:elseif cond='data:blog.locale == &quot;id&quot;'/>Memuat<b:else/>Loading</b:if>
  2311. <b:case value='translateLoadNoMore'/><b:if cond='data:blog.locale == &quot;en&quot;'>There are no other posts<b:elseif cond='data:blog.locale == &quot;es&quot;'/>No hay otras publicaciones<b:elseif cond='data:blog.locale == &quot;pt&quot;'/>Não há outras postagens<b:elseif cond='data:blog.locale == &quot;id&quot;'/>Tidak ada postingan lainnya<b:else/>There are no other posts</b:if>
  2312. <b:case value='translateLoadError'/><b:if cond='data:blog.locale == &quot;en&quot;'>Error loading post<b:elseif cond='data:blog.locale == &quot;es&quot;'/>Error al cargar la publicación<b:elseif cond='data:blog.locale == &quot;pt&quot;'/>Erro ao carregar postagem<b:elseif cond='data:blog.locale == &quot;id&quot;'/>Kesalahan memuat postingan<b:else/>Error loading post</b:if>
  2313. <b:case value='translateSubscribeEmail'/><b:if cond='data:blog.locale == &quot;en&quot;'>Get notification of the latest articles directly via your email.<b:elseif cond='data:blog.locale == &quot;es&quot;'/>Reciba notificaciones de los últimos artículos directamente a través de su correo electrónico.<b:elseif cond='data:blog.locale == &quot;pt&quot;'/>Receba notificações sobre os artigos mais recentes diretamente por e-mail.<b:elseif cond='data:blog.locale == &quot;id&quot;'/>Dapatkan notifikasi artikel terbaru langsung melalui email Anda.<b:else/>Get notification of the latest articles directly via your email.</b:if>
  2314. <b:case value='translateShareTo'/><b:if cond='data:blog.locale == &quot;en&quot;'>Share to<b:elseif cond='data:blog.locale == &quot;es&quot;'/>Compartir a<b:elseif cond='data:blog.locale == &quot;pt&quot;'/>Compartilhar com<b:elseif cond='data:blog.locale == &quot;id&quot;'/>Bagikan ke<b:else/>Share to</b:if>
  2315. <b:case value='translateTrendingOn'/><b:if cond='data:blog.locale == &quot;en&quot;'>Trending On <b:elseif cond='data:blog.locale == &quot;es&quot;'/>Tendencia en <b:elseif cond='data:blog.locale == &quot;pt&quot;'/>Tendência em <b:elseif cond='data:blog.locale == &quot;id&quot;'/>Sedang Tren di <b:else/>Trending On </b:if>
  2316. <b:case value='translateAllContent'/><b:if cond='data:blog.locale == &quot;en&quot;'>All Post<b:elseif cond='data:blog.locale == &quot;es&quot;'/>Todos los mensajes<b:elseif cond='data:blog.locale == &quot;pt&quot;'/>Todas as postagens<b:elseif cond='data:blog.locale == &quot;id&quot;'/>Semua Postingan<b:else/>All Post</b:if>
  2317. </b:switch>
  2318. </b:includable>
  2319. <b:includable id='widget-title'>
  2320. <b:if cond='data:title != &quot;&quot;'>
  2321. <h3 class='title'><data:title/></h3>
  2322. </b:if>
  2323. </b:includable>
  2324. <b:includable id='globalJS'>
  2325. <script>//<![CDATA[
  2326. /*! lazysizes - v5.3.0 */
  2327. !function(e){var t=function(n,f,s){"use strict";var m,y;if(function(){var e,t={lazyClass:"lazyload",loadedClass:"lazyloaded",loadingClass:"lazyloading",preloadClass:"lazypreload",errorClass:"lazyerror",autosizesClass:"lazyautosizes",fastLoadedClass:"ls-is-cached",iframeLoadMode:0,srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",minSize:40,customMedia:{},init:!0,expFactor:1.5,hFac:.8,loadMode:2,loadHidden:!0,ricTimeout:0,throttleDelay:125};for(e in y=n.lazySizesConfig||n.lazysizesConfig||{},t)e in y||(y[e]=t[e])}(),!f||!f.getElementsByClassName)return{init:function(){},cfg:y,noSupport:!0};function o(e,t){return de[t]||(de[t]=new RegExp("(\\s|^)"+t+"(\\s|$)")),de[t].test(e[ae]("class")||"")&&de[t]}function c(e,t){o(e,t)||e.setAttribute("class",(e[ae]("class")||"").trim()+" "+t)}function u(e,t){(t=o(e,t))&&e.setAttribute("class",(e[ae]("class")||"").replace(t," "))}function z(e,t,a,n,i){var s=f.createEvent("Event");return(a=a||{}).instance=m,s.initEvent(t,!n,!i),s.detail=a,e.dispatchEvent(s),s}function h(e,t){var a;!ee&&(a=n.picturefill||y.pf)?(t&&t.src&&!e[ae]("srcset")&&e.setAttribute("srcset",t.src),a({reevaluate:!0,elements:[e]})):t&&t.src&&(e.src=t.src)}function g(e,t){return(getComputedStyle(e,null)||{})[t]}function i(e,t,a){for(a=a||e.offsetWidth;a<y.minSize&&t&&!e._lazysizesWidth;)a=t.offsetWidth,t=t.parentNode;return a}function e(a,e){return e?function(){fe(a)}:function(){var e=this,t=arguments;fe(function(){a.apply(e,t)})}}function t(e){function t(){a=null,e()}var a,n,i=function(){var e=s.now()-n;e<99?ie(i,99-e):(oe||t)(t)};return function(){n=s.now(),a=a||ie(i,99)}}var a,r,l,v,p,C,b,d,A,E,_,w,M,N,L,x,W,S,B,T,F,R,D,k,H,O,P,$,q,I,U,j,G,J,K,Q,V,X,Y,Z=f.documentElement,ee=n.HTMLPictureElement,te="addEventListener",ae="getAttribute",ne=n[te].bind(n),ie=n.setTimeout,se=n.requestAnimationFrame||ie,oe=n.requestIdleCallback,re=/^picture$/i,le=["load","error","lazyincluded","_lazyloaded"],de={},ce=Array.prototype.forEach,ue=function(t,a,e){var n=e?te:"removeEventListener";e&&ue(t,a),le.forEach(function(e){t[n](e,a)})},fe=(X=[],Y=V=[],we._lsFlush=_e,we),me=(R=/^img$/i,D=/^iframe$/i,k="onscroll"in n&&!/(gle|ing)bot/.test(navigator.userAgent),P=-1,x=pe,S=O=H=0,B=y.throttleDelay,T=y.ricTimeout,F=oe&&49<T?function(){oe(Ce,{timeout:T}),T!==y.ricTimeout&&(T=y.ricTimeout)}:e(function(){ie(Ce)},!0),q=e(be),I=function(e){q({target:e.target})},U=e(function(t,e,a,n,i){var s,o,r,l,d;(r=z(t,"lazybeforeunveil",e)).defaultPrevented||(n&&(a?c(t,y.autosizesClass):t.setAttribute("sizes",n)),s=t[ae](y.srcsetAttr),a=t[ae](y.srcAttr),i&&(o=(d=t.parentNode)&&re.test(d.nodeName||"")),l=e.firesLoad||"src"in t&&(s||a||o),r={target:t},c(t,y.loadingClass),l&&(clearTimeout(C),C=ie(ge,2500),ue(t,I,!0)),o&&ce.call(d.getElementsByTagName("source"),Ae),s?t.setAttribute("srcset",s):a&&!o&&(D.test(t.nodeName)?(n=a,0==(d=(e=t).getAttribute("data-load-mode")||y.iframeLoadMode)?e.contentWindow.location.replace(n):1==d&&(e.src=n)):t.src=a),i&&(s||o)&&h(t,{src:a})),t._lazyRace&&delete t._lazyRace,u(t,y.lazyClass),fe(function(){var e=t.complete&&1<t.naturalWidth;l&&!e||(e&&c(t,y.fastLoadedClass),be(r),t._lazyCache=!0,ie(function(){"_lazyCache"in t&&delete t._lazyCache},9)),"lazy"==t.loading&&O--},!0)}),G=t(function(){y.loadMode=3,$()}),J=function(){p||(s.now()-d<999?ie(J,999):(p=!0,y.loadMode=3,$(),ne("scroll",Ee,!0)))},{_:function(){d=s.now(),m.elements=f.getElementsByClassName(y.lazyClass),v=f.getElementsByClassName(y.lazyClass+" "+y.preloadClass),ne("scroll",$,!0),ne("resize",$,!0),ne("pageshow",function(e){var t;!e.persisted||(t=f.querySelectorAll("."+y.loadingClass)).length&&t.forEach&&se(function(){t.forEach(function(e){e.complete&&j(e)})})}),n.MutationObserver?new MutationObserver($).observe(Z,{childList:!0,subtree:!0,attributes:!0}):(Z[te]("DOMNodeInserted",$,!0),Z[te]("DOMAttrModified",$,!0),setInterval($,999)),ne("hashchange",$,!0),["focus","mouseover","click","load","transitionend","animationend"].forEach(function(e){f[te](e,$,!0)}),/d$|^c/.test(f.readyState)?J():(ne("load",J),f[te]("DOMContentLoaded",$),ie(J,2e4)),m.elements.length?(pe(),fe._lsFlush()):$()},checkElems:$=function(e){var t;(e=!0===e)&&(T=33),W||(W=!0,(t=B-(s.now()-S))<0&&(t=0),e||t<9?F():ie(F,t))},unveil:j=function(e){var t,a,n,i;e._lazyRace||(!(i="auto"==(n=(a=R.test(e.nodeName))&&(e[ae](y.sizesAttr)||e[ae]("sizes"))))&&p||!a||!e[ae]("src")&&!e.srcset||e.complete||o(e,y.errorClass)||!o(e,y.lazyClass))&&(t=z(e,"lazyunveilread").detail,i&&ye.updateElem(e,!0,e.offsetWidth),e._lazyRace=!0,O++,U(e,t,i,n,a))},_aLSL:Ee}),ye=(r=e(function(e,t,a,n){var i,s,o;if(e._lazysizesWidth=n,n+="px",e.setAttribute("sizes",n),re.test(t.nodeName||""))for(s=0,o=(i=t.getElementsByTagName("source")).length;s<o;s++)i[s].setAttribute("sizes",n);a.detail.dataAttr||h(e,a.detail)}),{_:function(){a=f.getElementsByClassName(y.autosizesClass),ne("resize",l)},checkElems:l=t(function(){var e,t=a.length;if(t)for(e=0;e<t;e++)he(a[e])}),updateElem:he}),ze=function(){!ze.i&&f.getElementsByClassName&&(ze.i=!0,ye._(),me._())};function he(e,t,a){var n=e.parentNode;n&&(a=i(e,n,a),(t=z(e,"lazybeforesizes",{width:a,dataAttr:!!t})).defaultPrevented||(a=t.detail.width)&&a!==e._lazysizesWidth&&r(e,n,t,a))}function ge(e){O--,e&&!(O<0)&&e.target||(O=0)}function ve(e){return null==L&&(L="hidden"==g(f.body,"visibility")),L||!("hidden"==g(e.parentNode,"visibility")&&"hidden"==g(e,"visibility"))}function pe(){var e,t,a,n,i,s,o,r,l,d,c,u=m.elements;if((b=y.loadMode)&&O<8&&(e=u.length)){for(t=0,P++;t<e;t++)if(u[t]&&!u[t]._lazyRace)if(!k||m.prematureUnveil&&m.prematureUnveil(u[t]))j(u[t]);else if((o=u[t][ae]("data-expand"))&&(i=+o)||(i=H),l||(l=!y.expand||y.expand<1?500<Z.clientHeight&&500<Z.clientWidth?500:370:y.expand,d=(m._defEx=l)*y.expFactor,c=y.hFac,L=null,H<d&&O<1&&2<P&&2<b&&!f.hidden?(H=d,P=0):H=1<b&&1<P&&O<6?l:0),r!==i&&(A=innerWidth+i*c,E=innerHeight+i,s=-1*i,r=i),d=u[t].getBoundingClientRect(),(N=d.bottom)>=s&&(_=d.top)<=E&&(M=d.right)>=s*c&&(w=d.left)<=A&&(N||M||w||_)&&(y.loadHidden||ve(u[t]))&&(p&&O<3&&!o&&(b<3||P<4)||function(e,t){var a,n=e,i=ve(e);for(_-=t,N+=t,w-=t,M+=t;i&&(n=n.offsetParent)&&n!=f.body&&n!=Z;)(i=0<(g(n,"opacity")||1))&&"visible"!=g(n,"overflow")&&(a=n.getBoundingClientRect(),i=M>a.left&&w<a.right&&N>a.top-1&&_<a.bottom+1);return i}(u[t],i))){if(j(u[t]),n=!0,9<O)break}else!n&&p&&!a&&O<4&&P<4&&2<b&&(v[0]||y.preloadAfterLoad)&&(v[0]||!o&&(N||M||w||_||"auto"!=u[t][ae](y.sizesAttr)))&&(a=v[0]||u[t]);a&&!n&&j(a)}}function Ce(){W=!1,S=s.now(),x()}function be(e){var t=e.target;t._lazyCache?delete t._lazyCache:(ge(e),c(t,y.loadedClass),u(t,y.loadingClass),ue(t,I),z(t,"lazyloaded"))}function Ae(e){var t,a=e[ae](y.srcsetAttr);(t=y.customMedia[e[ae]("data-media")||e[ae]("media")])&&e.setAttribute("media",t),a&&e.setAttribute("srcset",a)}function Ee(){3==y.loadMode&&(y.loadMode=2),G()}function _e(){var e=Y;for(Y=V.length?X:V,Q=!(K=!0);e.length;)e.shift()();K=!1}function we(e,t){K&&!t?e.apply(this,arguments):(Y.push(e),Q||(Q=!0,(f.hidden?ie:se)(_e)))}return ie(function(){y.init&&ze()}),m={cfg:y,autoSizer:ye,loader:me,init:ze,uP:h,aC:c,rC:u,hC:o,fire:z,gW:i,rAF:fe}}(e,e.document,Date);e.lazySizes=t,"object"==typeof module&&module.exports&&(module.exports=t)}("undefined"!=typeof window?window:{});
  2328.  
  2329. !function(){"use strict";function e(t,e){return Array.prototype.slice.call((e||document).querySelectorAll(t))}function a(t){if(t.closest)return t.closest("[data-a11y-toggle]");for(;t;){if(1===t.nodeType&&t.hasAttribute("data-a11y-toggle"))return t;t=t.parentNode}return null}function i(t){var e,a=t&&o[t.getAttribute("aria-controls")];a&&(t=r["#"+a.id],e="false"===a.getAttribute("aria-hidden"),a.setAttribute("aria-hidden",e),t.forEach(function(t){t.setAttribute("aria-expanded",!e)}))}function t(t){r=e("[data-a11y-toggle]",t).reduce(function(t,e){var a="#"+e.getAttribute("data-a11y-toggle");return t[a]=t[a]||[],t[a].push(e),t},r),(t=Object.keys(r)).length&&e(t).forEach(function(e){var t=r["#"+e.id],a=e.hasAttribute("data-a11y-toggle-open"),i=[];t.forEach(function(t){t.id||t.setAttribute("id","a11y-toggle-"+n++),t.setAttribute("aria-controls",e.id),t.setAttribute("aria-expanded",a),i.push(t.id)}),e.setAttribute("aria-hidden",!a),e.hasAttribute("aria-labelledby")||e.setAttribute("aria-labelledby",i.join(" ")),o[e.id]=e})}var n=0,r={},o={};document.addEventListener("DOMContentLoaded",function(){t()}),document.addEventListener("click",function(t){i(a(t.target))}),document.addEventListener("keyup",function(t){13!==t.which&&32!==t.which||(t=a(t.target))&&"button"===t.getAttribute("role")&&i(t)}),window&&(window.a11yToggle=t)}();
  2330.  
  2331. var toggleComments = document.querySelectorAll([".item .post-comment", ".item .backdrop", ".item .post-comments"]), closeComment = document.querySelector(".item .close-comment"), backdrop = document.querySelector(".backdrop"), commentSelect = document.querySelector("#comments"), menuToggle = document.querySelector(".header-wrapper .header-section .LinkList .button-icon.menu"), menuWidget = document.querySelector(".header-wrapper .header-section .LinkList .menu-widget"), searchToggle = document.querySelector(".header-wrapper .header-section .LinkList .button-icon.search-menu"),
  2332. headerScroll = document.querySelector(".header-wrapper"), innerScroll = document.querySelector(".clearfix"), headerScrolls = window.getComputedStyle(headerScroll, null).getPropertyValue("background-color"), headerScrollBg = window.getComputedStyle(document.querySelector(".header-height"), null).getPropertyValue("background-color");
  2333. function checkOffsetHeader() {
  2334. headerScroll.getBoundingClientRect().top + document.body.scrollTop + headerScroll.offsetHeight >= innerScroll.getBoundingClientRect().top + document.body.scrollTop - 10 + 4 * (innerScroll.getBoundingClientRect().top + document.body.scrollTop) && (headerScroll.style.backgroundColor = headerScrollBg);
  2335. headerScroll.getBoundingClientRect().top + document.body.scrollTop + headerScroll.offsetHeight <= 4 * (innerScroll.getBoundingClientRect().top + document.body.scrollTop) && (headerScroll.style.backgroundColor = headerScrolls);
  2336. }
  2337. menuToggle.addEventListener("click", function() {
  2338. menuWidget.classList.toggle("active");
  2339. });
  2340. searchToggle.addEventListener("click", function() {
  2341. document.body.classList.toggle("search-active");
  2342. document.querySelector(".main-top-wrapper .search-page-form input").focus();
  2343. });
  2344. toggleComments.forEach(function(a) {
  2345. a.addEventListener("click", function() {
  2346. backdrop.classList.toggle("active");
  2347. commentSelect.classList.toggle("active");
  2348. });
  2349. });
  2350. document.addEventListener("scroll", function() {
  2351. checkOffsetHeader();
  2352. });
  2353. //]]>
  2354. <b:if cond='data:view.isHomepage'>//<![CDATA[
  2355. !function(j,A){j.InfiniteScroll=function(t){function d(t,e){return(e=e||A).querySelectorAll(t)}function o(t){return void 0!==t}function r(t){return"function"==typeof t}function l(t,e){if(o(a[t]))for(var n in a[t])a[t][n](e)}function e(){return T.innerHTML=f.text.loading,g=!0,L?(v.classList.add(f.state.loading),l("loading",[f]),void s(L,function(t,e){v.className=M+" "+f.state.load,(u=A.createElement("div")).innerHTML=t;var n=d("title",u),o=d(f.target.post,u),r=d(f.target.anchors+" "+f.target.anchor,u),a=d(f.target.post,h),n=n&&n[0]?n[0].innerHTML:"";if(o.length&&a.length){a=a[a.length-1];A.title=n,a.insertAdjacentHTML("afterend",'<span class="fi" id="#fi:'+E+'"></span>'),u=A.createElement("div");for(var i=0,s=o.length;i<s;++i)u.appendChild(o[i]);a.insertAdjacentHTML("afterend",u.innerHTML),c(),L=!!r.length&&r[0].href,g=!1,E++,l("load",[f,t,e])}},function(t,e){v.classList.add(f.state.error),g=!1,c(1),l("error",[f,t,e])})):(v.classList.add(f.state.loaded),T.innerHTML=f.text.loaded,l("loaded",[f]))}function c(t){T.innerHTML="",p&&(u.innerHTML=f.text[t?"error":"load"],(t=u.firstChild).onclick=function(){return 2===f.type&&(p=!1),e(),!1},T.appendChild(t))}var f={target:{posts:".posts",post:".post",anchors:".anchors",anchor:".anchor"},text:{load:"%s",loading:"%s",loaded:"%s",error:"%s"},state:{load:(s="infinite-scroll-state-")+"load",loading:s+"loading",loaded:s+"loaded",error:s+"error"}},a={load:[],loading:[],loaded:[],error:[]};(f=function t(e,n){for(var o in e=e||{},n)e[o]="object"==typeof n[o]?t(e[o],n[o]):n[o];return e}(f,t||{})).on=function(t,e,n){return o(t)?o(e)?void(o(n)?a[t][n]=e:a[t].push(e)):a[t]:a},f.off=function(t,e){o(e)?delete a[t][e]:a[t]=[]};var n,i,u=null,s=function(t,e,n){var o;j.XMLHttpRequest&&((o=new XMLHttpRequest).onreadystatechange=function(){4===o.readyState&&(200===o.status?e&&r(e)&&e(o.responseText,o):n&&r(n)&&n(o.responseText,o))},o.open("GET",t),o.send())},p=1!==f.type,g=!1,h=d(f.target.posts)[0],T=d(f.target.anchors)[0],L=d(f.target.anchor,T),H=A.body,v=A.documentElement,M=v.className||"",m=(h.offsetTop,h.offsetHeight,0),y=j.innerHeight,x=null,E=1;return L.length&&(L=L[0].href,h.insertAdjacentHTML("afterbegin",'<span class="fi" id="#fi:0"></span>'),u=A.createElement("div"),c(),(i=function(){m=h.offsetTop+h.offsetHeight,y=j.innerHeight,n=H.scrollTop||v.scrollTop,g||n+y<m||e()})(),0!==f.type&&j.addEventListener("scroll",function(){lazyLoadInstance.update()||p||(x&&j.clearTimeout(x),x=j.setTimeout(i,500))},!1)),f}}(window,document);
  2356. //]]>
  2357. var infinite_scroll = new InfiniteScroll({
  2358. type: 0,
  2359. target: {
  2360. posts: &#39;.blog-posts&#39;,
  2361. post: &#39;.blog-post&#39;,
  2362. anchors: &#39;.blog-pager&#39;,
  2363. anchor: &#39;.blog-pager-older-link&#39;
  2364. },
  2365. text: {
  2366. load: `<span class='load'><b:include data='{ message: &quot;translateLoadMore&quot; }' name='translate'/></span>`,
  2367. loading: `<span class='loading'><b:include data='{ message: &quot;translateLoading&quot; }' name='translate'/></span>`,
  2368. loaded: `<span class='loaded'><b:include data='{ message: &quot;translateLoadNoMore&quot; }' name='translate'/></span>`,
  2369. error: `<span class='error'><b:include data='{ message: &quot;translateLoadError&quot; }' name='translate'/></span>`
  2370. }
  2371. });
  2372. </b:if>
  2373. <b:if cond='data:view.isSingleItem'>//<![CDATA[
  2374. var socialFloat = document.querySelector(".scrolled-meta"), header = document.querySelector(".post-body"), footer = document.querySelector(".post-footer");
  2375. function checkOffsetTop() {
  2376. socialFloat.getBoundingClientRect().top + document.body.scrollTop + socialFloat.offsetHeight >= footer.getBoundingClientRect().top + document.body.scrollTop - 10 && (socialFloat.style.maxHeight = "0");
  2377. document.body.scrollTop + window.innerHeight < footer.getBoundingClientRect().top + document.body.scrollTop && (socialFloat.style.maxHeight = "100%");
  2378. socialFloat.getBoundingClientRect().top + document.body.scrollTop + socialFloat.offsetHeight >= header.getBoundingClientRect().top + document.body.scrollTop - 10 + 4 * (header.getBoundingClientRect().top + document.body.scrollTop) && (socialFloat.style.opacity = "1");
  2379. socialFloat.getBoundingClientRect().top + document.body.scrollTop + socialFloat.offsetHeight <= 4 * (header.getBoundingClientRect().top + document.body.scrollTop) && (socialFloat.style.opacity = "0");
  2380. }
  2381. document.addEventListener("scroll", function() {
  2382. checkOffsetTop();
  2383. });
  2384. //]]>
  2385. <b:if cond='!data:view.isPage'>
  2386. closeComment.addEventListener(&quot;click&quot;,function(){backdrop.classList.remove(&quot;active&quot;),commentSelect.classList.remove(&quot;active&quot;)});
  2387. </b:if>
  2388. </b:if>
  2389. </script>
  2390. </b:includable>
  2391. </b:defaultmarkup>
  2392. <b:defaultmarkup type='Header'>
  2393. <b:includable id='main' var='this'>
  2394. <div class='header-widget'>
  2395. <b:include cond='data:imagePlacement in {&quot;REPLACE&quot;, &quot;BEFORE_DESCRIPTION&quot;}' name='image'/>
  2396. <b:include cond='data:imagePlacement == &quot;BEHIND&quot;' name='title'/>
  2397. </div>
  2398. </b:includable>
  2399. <b:includable id='image'>
  2400. <a class='header-logo-image' expr:href='data:blog.homepageUrl'>
  2401. <img class='lazyload blur-up' expr:alt='data:blog.title.escaped' expr:data-src='resizeImage(data:image, 280)' expr:height='data:height' expr:width='data:width' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='/>
  2402.  
  2403. <b:if cond='data:view.isHomepage'>
  2404. <b:if cond='data:widget.sectionId == &quot;header-section&quot;'>
  2405. <h1 id='header-title'><data:title/></h1>
  2406. </b:if>
  2407. </b:if>
  2408. </a>
  2409. </b:includable>
  2410. <b:includable id='title'>
  2411. <h1 class='header-blog-title'>
  2412. <b:tag expr:href='data:blog.homepageUrl' name='a'>
  2413. <data:title/>
  2414. </b:tag>
  2415. </h1>
  2416. </b:includable>
  2417. </b:defaultmarkup>
  2418. <b:defaultmarkup type='Label'>
  2419. <b:includable id='main' var='this'>
  2420. <b:include name='widget-title'/>
  2421. <b:include name='content'/>
  2422. </b:includable>
  2423. <b:includable id='cloud'>
  2424. <b:loop values='data:labels' var='label'>
  2425. <span class='label-size'>
  2426. <b:class expr:name='&quot;label-size-&quot; + data:label.cssSize'/>
  2427. <a class='label-name' expr:href='data:label.url'>
  2428. <data:label.name/>
  2429. <b:if cond='data:this.showFreqNumbers'>
  2430. (<data:label.count/>)
  2431. </b:if>
  2432. </a>
  2433. </span>
  2434. </b:loop>
  2435. </b:includable>
  2436. <b:includable id='content'>
  2437. <div class='label-widget'>
  2438. <b:class expr:name='data:this.display'/>
  2439.  
  2440. <b:include cond='data:this.display == &quot;list&quot;' name='list'/>
  2441. <b:include cond='data:this.display == &quot;cloud&quot;' name='cloud'/>
  2442. </div>
  2443. </b:includable>
  2444. <b:includable id='list'>
  2445. <ul>
  2446. <b:loop values='data:labels' var='label'>
  2447. <li>
  2448. <a class='label-name' expr:href='data:label.url'>
  2449. <data:label.name/>
  2450. <b:if cond='data:this.showFreqNumbers'>
  2451. (<data:label.count/>)
  2452. </b:if>
  2453. </a>
  2454. </li>
  2455. </b:loop>
  2456. </ul>
  2457. </b:includable>
  2458. </b:defaultmarkup>
  2459. <b:defaultmarkup type='FeaturedPost'>
  2460. <b:includable id='main' var='this'>
  2461. <div class='featured-widget'>
  2462. <b:loop values='data:posts' var='post'>
  2463. <b:include data='post' name='content'/>
  2464. </b:loop>
  2465. </div>
  2466. </b:includable>
  2467. <b:includable id='content' var='post'>
  2468. <article class='post'>
  2469. <div class='post-image'>
  2470. <b:if cond='data:post.featuredImage'>
  2471. <b:if cond='data:post.featuredImage.isYouTube'>
  2472. <a class='post-image-link' expr:aria-label='data:post.title' expr:href='data:post.url'>
  2473. <span class='post-thumb lazyload blur-up' expr:style='&quot;background-image: url(&quot; + data:post.featuredImage + &quot;)&quot;'/>
  2474. </a>
  2475.  
  2476. <b:else/>
  2477. <a class='post-image-link' expr:aria-label='data:post.title' expr:href='data:post.url'>
  2478. <span class='post-thumb lazyload blur-up' expr:style='&quot;background-image: url(&quot; + resizeImage(data:post.featuredImage, 400) + &quot;)&quot;'/>
  2479. </a>
  2480. </b:if>
  2481.  
  2482. <b:else/>
  2483. <a class='post-image-link' expr:aria-label='data:post.title' expr:href='data:post.url'>
  2484. <span class='post-thumb lazyload blur-up' style='background-image: url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)'/>
  2485. </a>
  2486. </b:if>
  2487. </div>
  2488.  
  2489. <div class='block-meta'>
  2490. <div class='post-meta-top'>
  2491. <b:if cond='data:post.author.authorPhoto.image'>
  2492. <span class='author-avatar lazyload blur-up' expr:style='&quot;background-image: url(&quot; + resizeImage(data:post.author.authorPhoto.image, 40, &quot;1:1&quot;) + &quot;)&quot;'/>
  2493. </b:if>
  2494. <div class='meta'>
  2495.  
  2496. <span class='post-author'><strong><data:post.author.name/></strong></span>
  2497. <span class='translate'><b:include data='{ message: &quot;translateIn&quot; }' name='translate'/></span>
  2498. <b:if cond='data:post.labels'>
  2499. <span class='post-category'><strong><data:post.labels.first.name/></strong></span>
  2500. </b:if>
  2501. </div>
  2502. </div>
  2503. <a class='post-title' expr:href='data:post.url' rel='bookmark'>
  2504. <h2><data:post.title/></h2>
  2505. <span class='post-snippet'><b:eval expr='data:post.snippets.short snippet { length: 123 }'/></span>
  2506. </a>
  2507. <div class='post-meta-bottom'>
  2508. <span class='post-time'>
  2509. <time class='published' expr:datetime='data:post.date.iso8601'><data:post.date/></time>
  2510. <svg height='15' viewBox='0 0 15 15' width='15'><path d='M7.44 2.32c.03-.1.09-.1.12 0l1.2 3.53a.29.29 0 0 0 .26.2h3.88c.11 0 .13.04.04.1L9.8 8.33a.27.27 0 0 0-.1.29l1.2 3.53c.03.1-.01.13-.1.07l-3.14-2.18a.3.3 0 0 0-.32 0L4.2 12.22c-.1.06-.14.03-.1-.07l1.2-3.53a.27.27 0 0 0-.1-.3L2.06 6.16c-.1-.06-.07-.12.03-.12h3.89a.29.29 0 0 0 .26-.19l1.2-3.52z'/></svg>
  2511. </span>
  2512. </div>
  2513. </div>
  2514. </article>
  2515. </b:includable>
  2516. </b:defaultmarkup>
  2517. <b:defaultmarkup type='Profile'>
  2518. <b:includable id='main' var='this'>
  2519. <b:include name='content'/>
  2520. </b:includable>
  2521. <b:includable id='content'>
  2522. <b:if cond='data:team'>
  2523. <div class='profile-widget team'>
  2524. <b:include name='widget-title'/>
  2525. <b:include name='teamProfile'/>
  2526. </div>
  2527.  
  2528. <b:else/>
  2529. <div class='profile-widget individual'>
  2530. <b:include name='widget-title'/>
  2531. <b:include name='userProfile'/>
  2532. </div>
  2533. </b:if>
  2534. </b:includable>
  2535. <b:includable id='teamProfile'>
  2536. <b:loop values='data:authors' var='author'>
  2537. <div class='profile'>
  2538. <b:include data='author' name='teamProfileLink'/>
  2539. </div>
  2540. </b:loop>
  2541. </b:includable>
  2542. <b:includable id='teamProfileLink'>
  2543. <a class='profile-link g-profile' expr:href='data:userUrl' rel='nofollow noopener noreferer' target='_blank'>
  2544. <b:include name='profileImage'/>
  2545.  
  2546. <span class='profile-name'><data:display-name/></span>
  2547. </a>
  2548. <a class='profile-follow' expr:href='data:userUrl' rel='nofollow noopener noreferer' target='_blank'><data:messages.visitProfile/></a>
  2549. </b:includable>
  2550. <b:includable id='profileImage'>
  2551. <b:if cond='data:authorPhoto.image'>
  2552. <b:include name='authorProfileImage'/>
  2553.  
  2554. <b:else/>
  2555. <b:include name='defaultProfileImage'/>
  2556. </b:if>
  2557. </b:includable>
  2558. <b:includable id='authorProfileImage'>
  2559. <span class='profile-img lazyload blur-up' expr:style='&quot;background-image: url(&quot; + resizeImage(data:authorPhoto.image, 48) + &quot;)&quot;'/>
  2560. </b:includable>
  2561. <b:includable id='defaultProfileImage'>
  2562. <span class='profile-img lazyload blur-up' style='background-image: url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)'/>
  2563. </b:includable>
  2564.  
  2565. <b:includable id='userProfile'>
  2566. <div class='profile'>
  2567. <a class='profile-link g-profile' expr:href='data:userUrl' rel='nofollow noopener noreferer' target='_blank'>
  2568. <b:include name='profileImage'/>
  2569.  
  2570. <span class='profile-name'><data:displayname/></span>
  2571. </a>
  2572. <a class='profile-follow' expr:href='data:userUrl' rel='nofollow noopener noreferer' target='_blank'><data:messages.visitProfile/></a>
  2573. </div>
  2574. </b:includable>
  2575. </b:defaultmarkup>
  2576. <b:defaultmarkup type='PopularPosts'>
  2577. <b:includable id='main' var='this'>
  2578. <b:if cond='data:title == &quot;&quot;'>
  2579. <h3 class='title'><svg fill='none' height='28' viewBox='0 0 28 29' width='28'><circle cx='14' cy='14.79' r='9.5' stroke='currentColor'/><path d='M5.46 18.36l4.47-4.48M9.97 13.87l3.67 3.66M13.67 17.53l5.1-5.09M16.62 11.6h3M19.62 11.6v3' stroke='currentColor' stroke-linecap='round'/></svg><b:include data='{ message: &quot;translateTrendingOn&quot; }' name='translate'/> <data:blog.title/></h3>
  2580.  
  2581. <else/>
  2582. <h3 class='title'><svg fill='none' height='28' viewBox='0 0 28 29' width='28'><circle cx='14' cy='14.79' r='9.5' stroke='currentColor'/><path d='M5.46 18.36l4.47-4.48M9.97 13.87l3.67 3.66M13.67 17.53l5.1-5.09M16.62 11.6h3M19.62 11.6v3' stroke='currentColor' stroke-linecap='round'/></svg><data:title/></h3>
  2583. </b:if>
  2584.  
  2585. <div class='popular-widget'>
  2586. <b:loop values='data:posts' var='post'>
  2587. <b:include data='post' name='content'/>
  2588. </b:loop>
  2589. </div>
  2590. </b:includable>
  2591. <b:includable id='content' var='post'>
  2592. <article class='post'>
  2593. <div class='block-meta'>
  2594. <div class='post-meta-top'>
  2595. <b:if cond='data:post.author.authorPhoto.image'>
  2596. <span class='author-avatar lazyload blur-up' expr:style='&quot;background-image: url(&quot; + resizeImage(data:post.author.authorPhoto.image, 40, &quot;1:1&quot;) + &quot;)&quot;'/>
  2597. </b:if>
  2598. <div class='meta'>
  2599. <span class='post-author'><strong><data:post.author.name/></strong></span>
  2600. <span class='translate'><b:include data='{ message: &quot;translateIn&quot; }' name='translate'/></span>
  2601. <b:if cond='data:post.labels'>
  2602. <span class='post-category'><strong><data:post.labels.first.name/></strong></span>
  2603. </b:if>
  2604. </div>
  2605. </div>
  2606. <a class='post-title' expr:href='data:post.url' rel='bookmark'>
  2607. <h2><data:post.title/></h2>
  2608. </a>
  2609. <div class='post-meta-bottom'>
  2610. <span class='post-time'>
  2611. <time class='published' expr:datetime='data:post.date.iso8601'><data:post.date/></time>
  2612. <svg height='15' viewBox='0 0 15 15' width='15'><path d='M7.44 2.32c.03-.1.09-.1.12 0l1.2 3.53a.29.29 0 0 0 .26.2h3.88c.11 0 .13.04.04.1L9.8 8.33a.27.27 0 0 0-.1.29l1.2 3.53c.03.1-.01.13-.1.07l-3.14-2.18a.3.3 0 0 0-.32 0L4.2 12.22c-.1.06-.14.03-.1-.07l1.2-3.53a.27.27 0 0 0-.1-.3L2.06 6.16c-.1-.06-.07-.12.03-.12h3.89a.29.29 0 0 0 .26-.19l1.2-3.52z'/></svg>
  2613. </span>
  2614. </div>
  2615. </div>
  2616. </article>
  2617. </b:includable>
  2618. </b:defaultmarkup>
  2619. <b:defaultmarkup type='BlogSearch'>
  2620. <b:includable id='main'>
  2621. <b:include name='content'/>
  2622. </b:includable>
  2623. <b:includable id='content'>
  2624. <div class='search-widget' role='search'>
  2625. <b:include name='searchForm'/>
  2626. </div>
  2627. </b:includable>
  2628. <b:includable id='searchForm'>
  2629. <form expr:action='data:blog.searchUrl'>
  2630. <b:attr cond='not data:view.isPreview' name='target' value='_top'/>
  2631. <b:include name='urlParamsAsFormInput'/>
  2632.  
  2633. <div class='search-input'>
  2634. <button class='search-action' expr:aria-label='data:messages.search.escaped' expr:value='data:messages.search.escaped' type='submit'><svg fill='currentColor' height='25' viewBox='0 0 25 25' width='25'><path d='M20.07 18.93l-4.16-4.15a6 6 0 1 0-.88.88l4.15 4.16a.62.62 0 1 0 .89-.89zM6.5 11a4.75 4.75 0 1 1 9.5 0 4.75 4.75 0 0 1-9.5 0z'/></svg></button>
  2635. <input autocomplete='off' expr:aria-label='data:messages.searchThisBlog' expr:placeholder='data:messages.searchThisBlog' expr:value='data:view.isSearch ? data:view.search.query.escaped : &quot;&quot;' name='q' required=''/>
  2636. </div>
  2637. </form>
  2638. </b:includable>
  2639. </b:defaultmarkup>
  2640. <b:defaultmarkup type='BlogArchive'>
  2641. <b:includable id='main' var='this'>
  2642. <b:include name='widget-title'/>
  2643. <b:include name='content'/>
  2644. </b:includable>
  2645. <b:includable id='content'>
  2646. <div class='archive-widget'>
  2647. <div id='ArchiveList'>
  2648. <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
  2649. <b:include cond='data:this.style == &quot;HIERARCHY&quot;' name='hierarchy'/>
  2650. <b:include cond='data:this.style in {&quot;FLAT&quot;, &quot;MENU&quot;}' name='flat'/>
  2651. </div>
  2652. </div>
  2653. </div>
  2654. </b:includable>
  2655. <b:includable id='hierarchy'>
  2656. <b:include data='data' name='interval'/>
  2657. </b:includable>
  2658. <b:includable id='interval' var='intervals'>
  2659. <ul class='hierarchy'>
  2660. <b:loop values='data:intervals' var='interval'>
  2661. <li class='archivedate'>
  2662. <a class='post-count-link' expr:href='data:interval.url'><data:interval.name/> (<data:interval.post-count/>)</a>
  2663. <div class='hierarchy-content'>
  2664. <b:include cond='data:interval.data' data='interval.data' name='interval'/>
  2665. <b:include cond='data:interval.posts' data='interval.posts' name='posts'/>
  2666. </div>
  2667. </li>
  2668. </b:loop>
  2669. </ul>
  2670. </b:includable>
  2671.  
  2672. <b:includable id='flat'>
  2673. <ul class='flat'>
  2674. <b:loop values='data:data' var='i'>
  2675. <li class='archivedate'>
  2676. <a expr:href='data:i.url'>
  2677. <data:i.name/> (<data:i.post-count/>)
  2678. </a>
  2679. </li>
  2680. </b:loop>
  2681. </ul>
  2682. </b:includable>
  2683. <b:includable id='posts' var='posts'>
  2684. <ul class='posts hierarchy'>
  2685. <b:loop values='data:posts' var='post'>
  2686. <li>
  2687. <a expr:href='data:post.url'><data:post.title/></a>
  2688. </li>
  2689. </b:loop>
  2690. </ul>
  2691. </b:includable>
  2692. </b:defaultmarkup>
  2693. <b:defaultmarkup type='FollowByEmail'>
  2694. <b:includable id='main'>
  2695. <b:include name='content'/>
  2696. </b:includable>
  2697. <b:includable id='content'>
  2698. <div class='followemail-widget'>
  2699. <form action='https://feedburner.google.com/fb/a/mailverify' expr:onsubmit='&quot;window.open(\&quot;https://feedburner.google.com/fb/a/mailverify?uri=&quot; + data:feedPath + &quot;\&quot;, \&quot;popupwindow\&quot;, \&quot;scrollbars=yes,width=550,height=520\&quot;); return true&quot;' method='post' target='popupwindow'>
  2700. <b:include name='widget-title'/>
  2701. <p><b:include data='{ message: &quot;translateSubscribeEmail&quot; }' name='translate'/></p>
  2702. <input autocomplete='off' class='follow-by-email-address' expr:placeholder='data:messages.emailAddress' name='email' required='' type='email'/>
  2703. <input class='follow-by-email-submit' expr:value='data:messages.getEmailNotifications' type='submit'/>
  2704.  
  2705. <input expr:value='data:feedPath' name='uri' type='hidden'/>
  2706. <input name='loc' type='hidden' value='en_US'/>
  2707. </form>
  2708. </div>
  2709. </b:includable>
  2710. </b:defaultmarkup>
  2711. <b:defaultmarkup type='ContactForm'>
  2712. <b:includable id='main'>
  2713. <b:include name='widget-title'/>
  2714. <b:include name='content'/>
  2715. </b:includable>
  2716. <b:includable id='content'>
  2717. <div class='contact-form-widget'>
  2718. <form name='contact-form'>
  2719. <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' expr:placeholder='data:contactFormNameMsg' name='name' size='30' type='text' value=''/>
  2720. <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' expr:placeholder='data:contactFormEmailMsg' name='email' size='30' type='text' value=''/>
  2721. <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' expr:placeholder='data:contactFormMessageMsg' name='email-message' rows='5'/>
  2722.  
  2723. <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
  2724.  
  2725. <div style='text-align: center; max-width: 222px; width: 100%'>
  2726. <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
  2727. <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
  2728. </div>
  2729. </form>
  2730. </div>
  2731. </b:includable>
  2732. </b:defaultmarkup>
  2733. </b:defaultmarkups>
  2734.  
  2735. <b:if cond='data:widgets.AdSense.first or data:blog.adsenseClientId'>
  2736. <script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
  2737. </b:if>
  2738.  
  2739. <b:include data='blog' name='google-analytics'/>
  2740. </head>
  2741. <body expr:class='data:blog.pageType'>
  2742. <b:class cond='data:view.search.query or data:view.isSearch' name='search'/>
  2743. <b:class cond='data:view.search.label' name='search-label'/>
  2744. <b:class cond='data:view.isError' name='error'/>
  2745.  
  2746. <header class='header-wrapper'>
  2747. <b:section class='header-section' id='header-section' maxwidgets='2' name='Header' showaddelement='no'>
  2748. <b:widget id='Header1' locked='true' title='Buku Harian (Header)' type='Header' version='2' visible='true'>
  2749. <b:widget-settings>
  2750. <b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbHGsaHBIMjqKWq1Cys5wfrt5wU9yCrEyf5EthxXnQXnHQEPGUsEe1cHstr-lM3tPrxGOvkdkyJxn_Zan5zX-4roHXz8d3LyIRDb2K7H39O-1PqQkBSDmSRC8r9Ltlzs8KSWe5JO8A71JiAdi0HtVHimZRjFQtF_oaxql_ERwESN4jgoGQ6gWtVwJt1Q/s1195/1000678082.png</b:widget-setting>
  2751. <b:widget-setting name='displayHeight'>1195</b:widget-setting>
  2752. <b:widget-setting name='sectionWidth'>150</b:widget-setting>
  2753. <b:widget-setting name='useImage'>true</b:widget-setting>
  2754. <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
  2755. <b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
  2756. <b:widget-setting name='displayWidth'>896</b:widget-setting>
  2757. </b:widget-settings>
  2758. <b:includable id='main' var='this'>
  2759. <div class='header-widget'>
  2760. <b:include cond='data:imagePlacement in {&quot;REPLACE&quot;, &quot;BEFORE_DESCRIPTION&quot;}' name='image'/>
  2761. <b:include cond='data:imagePlacement == &quot;BEHIND&quot;' name='title'/>
  2762. </div>
  2763. </b:includable>
  2764. <b:includable id='behindImageStyle'>
  2765. <b:if cond='data:sourceUrl'>
  2766. <b:include cond='data:this.image' data='{ image: data:this.image, selector: &quot;.header-widget&quot; }' name='responsiveImageStyle'/>
  2767. <style type='text/css'>
  2768. .header-widget {
  2769. background-position: <data:blog.locale.languageAlignment/>;
  2770. background-repeat: no-repeat;
  2771. background-size: cover;
  2772. }
  2773. </style>
  2774. </b:if>
  2775. </b:includable>
  2776. <b:includable id='description'>
  2777. <p>
  2778. <data:this.description/>
  2779. </p>
  2780. </b:includable>
  2781. <b:includable id='image'>
  2782. <a class='header-logo-image' expr:href='data:blog.homepageUrl'>
  2783. <img class='lazyload blur-up' expr:alt='data:blog.title.escaped' expr:data-src='resizeImage(data:image, 280)' expr:height='data:height' expr:width='data:width' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='/>
  2784.  
  2785. <b:if cond='data:view.isHomepage'>
  2786. <b:if cond='data:widget.sectionId == &quot;header-section&quot;'>
  2787. <h1 id='header-title'><data:title/></h1>
  2788. </b:if>
  2789. </b:if>
  2790. </a>
  2791. </b:includable>
  2792. <b:includable id='title'>
  2793. <h1 class='header-blog-title'>
  2794. <b:tag expr:href='data:blog.homepageUrl' name='a'>
  2795. <data:title/>
  2796. </b:tag>
  2797. </h1>
  2798. </b:includable>
  2799. </b:widget>
  2800. <b:widget id='LinkList99' locked='true' title='Menu' type='LinkList' version='2' visible='true'>
  2801. <b:includable id='main'>
  2802. <div class='menu-widget'>
  2803. <b:loop values='data:links' var='link'><span class='menu-item'><a expr:href='data:link.target'><data:link.name/></a></span></b:loop>
  2804. </div>
  2805.  
  2806. <button aria-label='Menu' class='button-icon search-menu' type='button'><svg height='25' viewBox='0 0 25 25' width='25'><path d='M20.07 18.93l-4.16-4.15a6 6 0 1 0-.88.88l4.15 4.16a.62.62 0 1 0 .89-.89zM6.5 11a4.75 4.75 0 1 1 9.5 0 4.75 4.75 0 0 1-9.5 0z'/></svg></button>
  2807.  
  2808. <button aria-label='Menu' class='button-icon menu' type='button'><svg height='24' viewBox='0 0 384.97 384.97' width='24'><path d='M12.03,120.303h360.909c6.641,0,12.03-5.39,12.03-12.03c0-6.641-5.39-12.03-12.03-12.03H12.03 c-6.641,0-12.03,5.39-12.03,12.03C0,114.913,5.39,120.303,12.03,120.303z'/><path d='M372.939,180.455H12.03c-6.641,0-12.03,5.39-12.03,12.03s5.39,12.03,12.03,12.03h360.909c6.641,0,12.03-5.39,12.03-12.03 S379.58,180.455,372.939,180.455z'/><path d='M372.939,264.667H132.333c-6.641,0-12.03,5.39-12.03,12.03c0,6.641,5.39,12.03,12.03,12.03h240.606 c6.641,0,12.03-5.39,12.03-12.03C384.97,270.056,379.58,264.667,372.939,264.667z'/></svg></button>
  2809. </b:includable>
  2810. <b:includable id='content'>
  2811. <div class='widget-content'>
  2812. <ul>
  2813. <b:loop values='data:links' var='link'>
  2814. <li><a expr:href='data:link.target'><data:link.name/></a></li>
  2815. </b:loop>
  2816. </ul>
  2817. </div>
  2818. </b:includable>
  2819. </b:widget>
  2820. </b:section>
  2821. </header>
  2822.  
  2823. <div class='header-height'/>
  2824.  
  2825. <main class='main-wrapper'>
  2826. <section class='main-top-wrapper'>
  2827. <b:section class='jumbotron-section' cond='data:view.isHomepage' id='jumbotron-section' maxwidgets='2' name='Jumbotron' showaddelement='no'>
  2828. <b:widget id='HTML99' locked='true' title='' type='HTML' version='2' visible='true'>
  2829. <b:includable id='main'>
  2830. <div class='jumbotron-content'>
  2831. <div class='jumbotron-inner'>
  2832. <b:if cond='data:title != &quot;&quot;'>
  2833. <h2 class='title'><data:title/></h2>
  2834. </b:if>
  2835. <p><data:content/></p>
  2836.  
  2837. <a class='all-content' expr:href='data:blog.searchUrl'><b:include data='{ message: &quot;translateAllContent&quot; }' name='translate'/></a>
  2838. </div>
  2839. </div>
  2840. </b:includable>
  2841. </b:widget>
  2842. <b:widget id='PopularPosts99' locked='true' title='' type='PopularPosts' version='2' visible='true'>
  2843. <b:widget-settings>
  2844. <b:widget-setting name='numItemsToShow'>10</b:widget-setting>
  2845. <b:widget-setting name='showThumbnails'>true</b:widget-setting>
  2846. <b:widget-setting name='showSnippets'>true</b:widget-setting>
  2847. <b:widget-setting name='timeRange'>LAST_YEAR</b:widget-setting>
  2848. </b:widget-settings>
  2849. <b:includable id='main' var='this'>
  2850. <div class='popular-jumbotron'>
  2851. <b:if cond='data:title == &quot;&quot;'>
  2852. <h3 class='title'><svg fill='none' height='28' viewBox='0 0 28 29' width='28'><circle cx='14' cy='14.79' r='9.5' stroke='currentColor'/><path d='M5.46 18.36l4.47-4.48M9.97 13.87l3.67 3.66M13.67 17.53l5.1-5.09M16.62 11.6h3M19.62 11.6v3' stroke='currentColor' stroke-linecap='round'/></svg><b:include data='{ message: &quot;translateTrendingOn&quot; }' name='translate'/> <data:blog.title/></h3>
  2853.  
  2854. <else/>
  2855. <h3 class='title'><svg fill='none' height='28' viewBox='0 0 28 29' width='28'><circle cx='14' cy='14.79' r='9.5' stroke='currentColor'/><path d='M5.46 18.36l4.47-4.48M9.97 13.87l3.67 3.66M13.67 17.53l5.1-5.09M16.62 11.6h3M19.62 11.6v3' stroke='currentColor' stroke-linecap='round'/></svg><data:title/></h3>
  2856. </b:if>
  2857.  
  2858. <div class='popular-widget'>
  2859. <b:loop values='data:posts' var='post'>
  2860. <b:include data='post' name='content'/>
  2861. </b:loop>
  2862. </div>
  2863. </div>
  2864. </b:includable>
  2865. <b:includable id='blogThisShare'>
  2866. <b:with value='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' var='onclick'>
  2867. <b:include name='platformShare'/>
  2868. </b:with>
  2869. </b:includable>
  2870. <b:includable id='bylineByName' var='byline'>
  2871. <b:switch var='data:byline.name'>
  2872. <b:case value='share'/>
  2873. <b:include cond='data:post.shareUrl' name='postShareButtons'/>
  2874. <b:case value='comments'/>
  2875. <b:include cond='data:post.allowComments' name='postCommentsLink'/>
  2876. <b:case value='location'/>
  2877. <b:include cond='data:post.location' name='postLocation'/>
  2878. <b:case value='timestamp'/>
  2879. <b:include cond='not data:view.isPage' name='postTimestamp'/>
  2880. <b:case value='author'/>
  2881. <b:include name='postAuthor'/>
  2882. <b:case value='labels'/>
  2883. <b:include cond='data:post.labels' name='postLabels'/>
  2884. <b:case value='icons'/>
  2885. <b:include cond='data:post.emailPostUrl' name='emailPostIcon'/>
  2886. </b:switch>
  2887. </b:includable>
  2888. <b:includable id='bylineRegion' var='regionItems'>
  2889. <b:loop values='data:regionItems' var='byline'>
  2890. <b:include data='byline' name='bylineByName'/>
  2891. </b:loop>
  2892. </b:includable>
  2893. <b:includable id='commentsLink'>
  2894. <a class='comment-link' expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
  2895. <b:if cond='data:post.numberOfComments &gt; 0'>
  2896. <b:message name='messages.numberOfComments'>
  2897. <b:param expr:value='data:post.numberOfComments' name='numComments'/>
  2898. </b:message>
  2899. <b:else/>
  2900. <data:messages.postAComment/>
  2901. </b:if>
  2902. </a>
  2903. </b:includable>
  2904. <b:includable id='commentsLinkIframe'>
  2905. <!-- G+ comments, no longer available. The includable is retained for backwards-compatibility. -->
  2906. </b:includable>
  2907. <b:includable id='content' var='post'>
  2908. <article class='post'>
  2909. <div class='block-meta'>
  2910. <div class='post-meta-top'>
  2911. <b:if cond='data:post.author.authorPhoto.image'>
  2912. <span class='author-avatar lazyload blur-up' expr:style='&quot;background-image: url(&quot; + resizeImage(data:post.author.authorPhoto.image, 40, &quot;1:1&quot;) + &quot;)&quot;'/>
  2913. </b:if>
  2914. <div class='meta'>
  2915. <span class='post-author'><strong><data:post.author.name/></strong></span>
  2916. <span class='translate'><b:include data='{ message: &quot;translateIn&quot; }' name='translate'/></span>
  2917. <b:if cond='data:post.labels'>
  2918. <span class='post-category'><strong><data:post.labels.first.name/></strong></span>
  2919. </b:if>
  2920. </div>
  2921. </div>
  2922. <a class='post-title' expr:href='data:post.url' rel='bookmark'>
  2923. <h2><data:post.title/></h2>
  2924. </a>
  2925. <div class='post-meta-bottom'>
  2926. <span class='post-time'>
  2927. <time class='published' expr:datetime='data:post.date.iso8601'><data:post.date/></time>
  2928. <svg height='15' viewBox='0 0 15 15' width='15'><path d='M7.44 2.32c.03-.1.09-.1.12 0l1.2 3.53a.29.29 0 0 0 .26.2h3.88c.11 0 .13.04.04.1L9.8 8.33a.27.27 0 0 0-.1.29l1.2 3.53c.03.1-.01.13-.1.07l-3.14-2.18a.3.3 0 0 0-.32 0L4.2 12.22c-.1.06-.14.03-.1-.07l1.2-3.53a.27.27 0 0 0-.1-.3L2.06 6.16c-.1-.06-.07-.12.03-.12h3.89a.29.29 0 0 0 .26-.19l1.2-3.52z'/></svg>
  2929. </span>
  2930. </div>
  2931. </div>
  2932. </article>
  2933. </b:includable>
  2934. <b:includable id='emailPostIcon'>
  2935. <span class='byline post-icons'>
  2936. <!-- email post links -->
  2937. <span class='item-action'>
  2938. <a expr:href='data:post.emailPostUrl' expr:title='data:messages.emailPost'>
  2939. <b:include data='{ iconClass: &quot;touch-icon sharing-icon&quot; }' name='emailIcon'/>
  2940. </a>
  2941. </span>
  2942. </span>
  2943. </b:includable>
  2944. <b:includable id='facebookShare'>
  2945. <b:with value='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' var='onclick'>
  2946. <b:include name='platformShare'/>
  2947. </b:with>
  2948. </b:includable>
  2949. <b:includable id='footerBylines'>
  2950. <b:if cond='data:widgets.Blog.first.footerBylines'>
  2951. <b:loop index='i' values='data:widgets.Blog.first.footerBylines' var='region'>
  2952. <b:if cond='not data:region.items.empty'>
  2953. <div expr:class='&quot;post-footer-line post-footer-line-&quot; + (data:i + 1)'>
  2954. <b:with value='&quot;footer-&quot; + (data:i + 1)' var='regionName'>
  2955. <b:include data='region.items' name='bylineRegion'/>
  2956. </b:with>
  2957. </div>
  2958. </b:if>
  2959. </b:loop>
  2960. </b:if>
  2961. </b:includable>
  2962. <b:includable id='googlePlusShare'>
  2963. </b:includable>
  2964. <b:includable id='headerByline'>
  2965. <b:if cond='data:widgets.Blog.first.headerByline'>
  2966. <div class='post-header'>
  2967. <div class='post-header-line-1'>
  2968. <b:with value='&quot;header-1&quot;' var='regionName'>
  2969. <b:include data='data:widgets.Blog.first.headerByline.items' name='bylineRegion'/>
  2970. </b:with>
  2971. </div>
  2972. </div>
  2973. </b:if>
  2974. </b:includable>
  2975. <b:includable id='linkShare'>
  2976. <b:with value='&quot;window.prompt(\&quot;Copy to clipboard: Ctrl+C, Enter\&quot;, \&quot;&quot; + data:originalUrl + &quot;\&quot;); return false;&quot;' var='onclick'>
  2977. <b:include name='platformShare'/>
  2978. </b:with>
  2979. </b:includable>
  2980. <b:includable id='otherSharingButton'>
  2981. <span class='sharing-platform-button sharing-element-other' expr:aria-label='data:messages.shareToOtherApps.escaped' expr:data-url='data:originalUrl' expr:title='data:messages.shareToOtherApps.escaped' role='menuitem' tabindex='-1'>
  2982. <b:with value='{key: &quot;sharingOther&quot;}' var='platform'>
  2983. <b:include name='sharingPlatformIcon'/>
  2984. </b:with>
  2985. <span class='platform-sharing-text'><data:messages.shareOtherApps.escaped/></span>
  2986. </span>
  2987. </b:includable>
  2988. <b:includable id='platformShare'>
  2989. <a expr:class='&quot;goog-inline-block sharing-&quot; + data:platform.key' expr:data-url='data:originalUrl' expr:href='data:shareUrl + &quot;&amp;target=&quot; + data:platform.target' expr:onclick='data:onclick ? data:onclick : &quot;&quot;' expr:title='data:platform.shareMessage' target='_blank'>
  2990. <span class='share-button-link-text'>
  2991. <data:platform.shareMessage/>
  2992. </span>
  2993. </a>
  2994. </b:includable>
  2995. <b:includable id='postAuthor'>
  2996. <span class='byline post-author vcard'>
  2997. <span class='post-author-label'>
  2998. <data:byline.label/>
  2999. </span>
  3000. <span class='fn'>
  3001. <b:if cond='data:post.author.profileUrl'>
  3002. <meta expr:content='data:post.author.profileUrl'/>
  3003. <a class='g-profile' expr:href='data:post.author.profileUrl' rel='author' title='author profile'>
  3004. <span><data:post.author.name/></span>
  3005. </a>
  3006. <b:else/>
  3007. <span><data:post.author.name/></span>
  3008. </b:if>
  3009. </span>
  3010. </span>
  3011. </b:includable>
  3012. <b:includable id='postCommentsLink'>
  3013. <span class='byline post-comment-link container'>
  3014. <b:include cond='data:post.commentSource != 1' name='commentsLink'/>
  3015. </span>
  3016. </b:includable>
  3017. <b:includable id='postJumpLink' var='post'>
  3018. <div class='jump-link flat-button'>
  3019. <a expr:href='data:post.url fragment &quot;more&quot;' expr:title='data:post.title'>
  3020. <b:eval expr='data:blog.jumpLinkMessage'/>
  3021. </a>
  3022. </div>
  3023. </b:includable>
  3024. <b:includable id='postLabels'>
  3025. <span class='byline post-labels'>
  3026. <span class='byline-label'><data:byline.label/></span>
  3027. <b:loop index='i' values='data:post.labels' var='label'>
  3028. <a expr:href='data:label.url' rel='tag'>
  3029. <data:label.name/>
  3030. </a>
  3031. </b:loop>
  3032. </span>
  3033. </b:includable>
  3034. <b:includable id='postLocation'>
  3035. <span class='byline post-location'>
  3036. <data:byline.label/>
  3037. <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
  3038. </span>
  3039. </b:includable>
  3040. <b:includable id='postReactions'>
  3041. <!-- Reaction feature no longer available. The includable is retained for backwards-compatibility. -->
  3042. </b:includable>
  3043. <b:includable id='postShareButtons'>
  3044. <div class='byline post-share-buttons goog-inline-block'>
  3045. <b:with value='data:sharingId ?: ((data:widget.instanceId ?: &quot;sharing&quot;) + &quot;-&quot; + (data:regionName ?: &quot;byline&quot;) + &quot;-&quot; + data:post.id)' var='sharingId'>
  3046. <!-- Note: 'sharingButtons' includable is from the default Sharing widget markup. -->
  3047. <b:include data='{ sharingId: data:sharingId, originalUrl: data:post.url, platforms: data:this.sharing.platforms, shareUrl: data:post.shareUrl, shareTitle: data:post.title, }' name='sharingButtons'/>
  3048. </b:with>
  3049. </div>
  3050. </b:includable>
  3051. <b:includable id='postTimestamp'>
  3052. <span class='byline post-timestamp'>
  3053. <data:byline.label/>
  3054. <b:if cond='data:post.url'>
  3055. <meta expr:content='data:post.url.canonical'/>
  3056. <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
  3057. <time class='published' expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'>
  3058. <data:post.date/>
  3059. </time>
  3060. </a>
  3061. </b:if>
  3062. </span>
  3063. </b:includable>
  3064. <b:includable id='sharingButton'>
  3065. <span expr:aria-label='data:platform.shareMessage' expr:class='&quot;sharing-platform-button sharing-element-&quot; + data:platform.key' expr:data-href='data:shareUrl + &quot;&amp;target=&quot; + data:platform.target' expr:data-url='data:originalUrl' expr:title='data:platform.shareMessage' role='menuitem' tabindex='-1'>
  3066. <b:include name='sharingPlatformIcon'/>
  3067. <span class='platform-sharing-text'><data:platform.name/></span>
  3068. </span>
  3069. </b:includable>
  3070. <b:includable id='sharingButtonContent'>
  3071. <div class='flat-icon-button ripple'>
  3072. <b:include name='shareIcon'/>
  3073. </div>
  3074. </b:includable>
  3075. <b:includable id='sharingButtons'>
  3076. <div class='sharing' expr:aria-owns='&quot;sharing-popup-&quot; + data:sharingId' expr:data-title='data:shareTitle'>
  3077. <button class='sharing-button touch-icon-button' expr:aria-controls='&quot;sharing-popup-&quot; + data:sharingId' expr:aria-label='data:messages.share.escaped' expr:id='&quot;sharing-button-&quot; + data:sharingId' role='button'>
  3078. <b:include name='sharingButtonContent'/>
  3079. </button>
  3080. <b:include name='sharingButtonsMenu'/>
  3081. </div>
  3082. </b:includable>
  3083. <b:includable id='sharingButtonsMenu'>
  3084. <div class='share-buttons-container'>
  3085. <ul aria-hidden='true' class='share-buttons hidden' expr:aria-label='data:messages.share.escaped' expr:id='&quot;sharing-popup-&quot; + data:sharingId' role='menu'>
  3086. <b:loop values='(data:platforms ?: data:blog.sharing.platforms) filter (p =&gt; p.key not in {&quot;blogThis&quot;})' var='platform'>
  3087. <li>
  3088. <b:include name='sharingButton'/>
  3089. </li>
  3090. </b:loop>
  3091. <li aria-hidden='true' class='hidden'>
  3092. <b:include name='otherSharingButton'/>
  3093. </li>
  3094. </ul>
  3095. </div>
  3096. </b:includable>
  3097. <b:includable id='sharingPlatformIcon'>
  3098. <b:include data='{ iconClass: (&quot;touch-icon sharing-&quot; + data:platform.key) }' expr:name='data:platform.key + &quot;Icon&quot;'/>
  3099. </b:includable>
  3100. <b:includable id='snippetedPostByline'>
  3101. <b:with value='(data:widgets first (w =&gt; w.type == &quot;Blog&quot;)).allBylineItems' var='blogBylines'>
  3102. <div class='item-byline'>
  3103. <b:with value='data:blogBylines first (i =&gt; i.name == &quot;author&quot;)' var='byline'>
  3104. <b:include cond='data:byline and data:this.postDisplay.showAuthor' data='post' name='postAuthor'/>
  3105. </b:with>
  3106. <b:with value='data:blogBylines first (i =&gt; i.name == &quot;timestamp&quot;)' var='byline'>
  3107. <b:include cond='data:byline and data:this.postDisplay.showDate' data='post' name='postTimestamp'/>
  3108. </b:with>
  3109. </div>
  3110. </b:with>
  3111. </b:includable>
  3112. <b:includable id='snippetedPostContent'>
  3113. <div class='post-content'>
  3114. <b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/>
  3115. <b:include cond='data:this.postDisplay.showDate or data:this.postDisplay.showAuthor' name='snippetedPostByline'/>
  3116. <b:include cond='data:this.postDisplay.showSnippet' data='post' name='postSnippet'/>
  3117. <b:include cond='data:this.postDisplay.showFeaturedImage and data:post.featuredImage' name='snippetedPostThumbnail'/>
  3118. </div>
  3119. </b:includable>
  3120. <b:includable id='snippetedPostThumbnail'>
  3121. <div class='item-thumbnail'>
  3122. <a expr:href='data:post.url'>
  3123. <b:include data='{ image: data:post.featuredImage, imageSizes: [72, 144], imageRatio: &quot;1:1&quot;, sourceSizes: &quot;72px&quot; }' name='responsiveImage'/>
  3124. </a>
  3125. </div>
  3126. </b:includable>
  3127. <b:includable id='snippetedPostTitle'>
  3128. <b:if cond='data:post.title != &quot;&quot;'>
  3129. <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
  3130. </b:if>
  3131. </b:includable>
  3132. <b:includable id='snippetedPosts'>
  3133. <div role='feed'>
  3134. <!-- Don't render the post that we're currently already looking at. -->
  3135. <b:loop values='data:posts filter (p =&gt; p.id != data:view.postId)' var='post'>
  3136. <article class='post' role='article'>
  3137. <b:include name='snippetedPostContent'/>
  3138. </article>
  3139. </b:loop>
  3140. </div>
  3141. </b:includable>
  3142. </b:widget>
  3143. </b:section>
  3144.  
  3145. <div class='clearfix'/>
  3146.  
  3147. <div class='search-page-form'>
  3148. <form expr:action='data:blog.searchUrl'>
  3149. <b:attr cond='not data:view.isPreview' name='target' value='_top'/>
  3150. <b:include name='urlParamsAsFormInput'/>
  3151.  
  3152. <input autocomplete='off' expr:aria-label='data:messages.searchThisBlog' expr:placeholder='data:messages.searchThisBlog' expr:value='data:view.isSearch ? data:view.search.query.escaped : &quot;&quot;' name='q'/>
  3153. </form>
  3154. </div>
  3155. </section>
  3156.  
  3157. <section class='inner-wrapper'>
  3158. <section class='blog-wrapper'>
  3159. <b:section class='main-section' id='main-section' maxwidgets='1' name='Main' showaddelement='no'>
  3160. <b:widget id='Blog1' locked='true' title='Postingan Blog' type='Blog' version='2' visible='true'>
  3161. <b:widget-settings>
  3162. <b:widget-setting name='showDateHeader'>false</b:widget-setting>
  3163. <b:widget-setting name='commentLabel'>comments</b:widget-setting>
  3164. <b:widget-setting name='showShareButtons'>true</b:widget-setting>
  3165. <b:widget-setting name='showCommentLink'>false</b:widget-setting>
  3166. <b:widget-setting name='postLocationLabel'>Location:</b:widget-setting>
  3167. <b:widget-setting name='showAuthor'>false</b:widget-setting>
  3168. <b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
  3169. <b:widget-setting name='timestampLabel'/>
  3170. <b:widget-setting name='reactionsLabel'/>
  3171. <b:widget-setting name='showAuthorProfile'>false</b:widget-setting>
  3172. <b:widget-setting name='style.layout'>1x1</b:widget-setting>
  3173. <b:widget-setting name='showLabels'>true</b:widget-setting>
  3174. <b:widget-setting name='showLocation'>false</b:widget-setting>
  3175. <b:widget-setting name='postLabelsLabel'/>
  3176. <b:widget-setting name='showTimestamp'>false</b:widget-setting>
  3177. <b:widget-setting name='postsPerAd'>1</b:widget-setting>
  3178. <b:widget-setting name='showBacklinks'>false</b:widget-setting>
  3179. <b:widget-setting name='showInlineAds'>false</b:widget-setting>
  3180. <b:widget-setting name='showReactions'>false</b:widget-setting>
  3181. </b:widget-settings>
  3182. <b:includable id='main' var='this'>
  3183. <b:if cond='data:posts.empty'>
  3184. <div class='message-query'>
  3185. <b:if cond='data:view.isMultipleItems and data:posts.empty'><data:messages.noResultsFound/></b:if>
  3186. </div>
  3187. </b:if>
  3188.  
  3189. <b:if cond='data:view.isArchive'>
  3190. <div class='queryMessage'>
  3191. <b:if cond='data:posts.empty'>
  3192. <span class='query-info query-error'><data:view.archive.rangeMessage/></span>
  3193. <b:else/>
  3194. <span class='query-info query-success'><data:view.archive.rangeMessage/></span>
  3195. </b:if>
  3196. </div>
  3197. </b:if>
  3198.  
  3199. <b:if cond='data:view.isError'>
  3200. <div class='error-wrapper'>
  3201. <div class='not-found'><data:messages.noResultsFound/></div>
  3202. <h3>404</h3>
  3203. <h4><data:messages.theresNothingHere/></h4>
  3204. <div class='not-found-description'><data:navMessage/></div>
  3205. <a class='homepage' expr:href='data:blog.homepageUrl'><i class='fas fa-home'/> <data:messages.home/></a>
  3206. </div>
  3207. </b:if>
  3208.  
  3209. <div class='blog-posts container'>
  3210. <b:loop index='i' values='data:posts' var='post'>
  3211. <b:if cond='data:view.isHomepage and !data:view.isPreview'>
  3212. <b:if cond='data:i != 0'>
  3213. <b:if cond='data:post.includeAd and data:post.adNumber'>
  3214. <b:if cond='data:this.adCode or data:this.adClientId or data:blog.adsenseClientId'>
  3215. <div expr:class='&quot;index-post-ads post-ad-&quot; + data:i'>
  3216. <div class='inline-ad-wrapper'>
  3217. <b:if cond='data:this.adCode != &quot;&quot;'>
  3218. <data:this.adCode/>
  3219.  
  3220. <b:else/>
  3221. <b:if cond='data:this.adClientId or data:blog.adsenseClientId'>
  3222. <ins class='adsbygoogle' data-ad-format='fluid' data-ad-layout-key='-75+cz-2f-19+kd' expr:data-ad-client='data:adClientId ?: data:blog.adsenseClientId' expr:data-ad-host='data:blog.adsenseHostId' expr:data-analytics-uacct='data:blog.analyticsAccountNumber' expr:style='data:style ?: &quot;display: block;&quot;' style='display:inline-block'/>
  3223. <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
  3224. </b:if>
  3225. </b:if>
  3226. </div>
  3227. </div>
  3228. </b:if>
  3229. </b:if>
  3230. </b:if>
  3231. </b:if>
  3232.  
  3233. <article class='blog-post post'>
  3234. <b:class cond='data:view.isMultipleItems' name='index-post'/>
  3235. <b:class cond='data:view.isSingleItem' name='item-post'/>
  3236.  
  3237. <b:if cond='data:view.isMultipleItems'>
  3238. <script type='application/ld+json'>{&quot;@context&quot;:&quot;https://schema.org&quot;,&quot;@type&quot;:&quot;NewsArticle&quot;,&quot;mainEntityOfPage&quot;:{&quot;@type&quot;:&quot;WebPage&quot;,&quot;@id&quot;:&quot;<data:post.url.canonical.jsonEscaped/>&quot;},&quot;headline&quot;:&quot;<data:post.title.jsonEscaped/>&quot;,&quot;description&quot;:&quot;<data:view.description.jsonEscaped/>&quot;,&quot;image&quot;:[&quot;<data:post.featuredImage.jsonEscaped/>&quot;],&quot;datePublished&quot;:&quot;<data:post.date.iso8601.jsonEscaped/>&quot;,&quot;dateModified&quot;:&quot;<data:post.lastUpdated.iso8601.jsonEscaped/>&quot;,&quot;author&quot;:{&quot;@type&quot;:&quot;Person&quot;,&quot;name&quot;:&quot;<data:post.author.name.jsonEscaped/>&quot;},&quot;publisher&quot;:{&quot;@type&quot;:&quot;Organization&quot;,&quot;name&quot;:&quot;Blogger&quot;,&quot;logo&quot;:{&quot;@type&quot;:&quot;ImageObject&quot;,&quot;url&quot;:&quot;https://lh3.googleusercontent.com/ULB6iBuCeTVvSjjjU1A-O8e9ZpVba6uvyhtiWRti_rBAs9yMYOFBujxriJRZ-A=h60&quot;,&quot;width&quot;:206,&quot;height&quot;:60}}}</script>
  3239. <b:include data='post' name='postMetadataJSON'/>
  3240.  
  3241. <div class='block-meta'>
  3242. <b:include cond='!data:view.search.label' name='postMetaTop'/>
  3243.  
  3244. <a class='post-title' expr:href='data:post.url' rel='bookmark'><h2><data:post.title/></h2><span class='post-snippet'><b:eval expr='data:post.snippets.short snippet { length: 123 }'/></span></a>
  3245.  
  3246. <b:include cond='data:view.search.label' name='postMetaTop'/>
  3247. <b:include cond='!data:view.search.label' name='postMetaBottom'/>
  3248. </div>
  3249.  
  3250.  
  3251. <div class='post-image'>
  3252. <b:if cond='data:post.featuredImage'>
  3253. <b:if cond='data:post.featuredImage.isYouTube'>
  3254. <a class='post-image-link' expr:aria-label='data:post.title' expr:href='data:post.url'><span class='post-thumb lazyload blur-up' expr:style='&quot;background-image: url(&quot; + data:post.featuredImage + &quot;)&quot;'/></a>
  3255.  
  3256. <b:else/>
  3257. <a class='post-image-link' expr:aria-label='data:post.title' expr:href='data:post.url'><span class='post-thumb lazyload blur-up' expr:style='&quot;background-image: url(&quot; + resizeImage(data:post.featuredImage, 200) + &quot;)&quot;'/></a>
  3258. </b:if>
  3259.  
  3260. <b:else/>
  3261. <a class='post-image-link' expr:aria-label='data:post.title' expr:href='data:post.url'><span class='post-thumb lazyload blur-up' style='background-image: url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)'/></a>
  3262. </b:if>
  3263. </div>
  3264. </b:if>
  3265.  
  3266. <b:if cond='data:view.isSingleItem'>
  3267. <script type='application/ld+json'>{&quot;@context&quot;:&quot;https://schema.org&quot;,&quot;@type&quot;:&quot;NewsArticle&quot;,&quot;mainEntityOfPage&quot;:{&quot;@type&quot;:&quot;WebPage&quot;,&quot;@id&quot;:&quot;<data:post.url.canonical.jsonEscaped/>&quot;},&quot;headline&quot;:&quot;<data:post.title.jsonEscaped/>&quot;,&quot;description&quot;:&quot;<data:view.description.jsonEscaped/>&quot;,&quot;image&quot;:[&quot;<data:post.featuredImage.jsonEscaped/>&quot;],&quot;datePublished&quot;:&quot;<data:post.date.iso8601.jsonEscaped/>&quot;,&quot;dateModified&quot;:&quot;<data:post.lastUpdated.iso8601.jsonEscaped/>&quot;,&quot;author&quot;:{&quot;@type&quot;:&quot;Person&quot;,&quot;name&quot;:&quot;<data:post.author.name.jsonEscaped/>&quot;},&quot;publisher&quot;:{&quot;@type&quot;:&quot;Organization&quot;,&quot;name&quot;:&quot;Blogger&quot;,&quot;logo&quot;:{&quot;@type&quot;:&quot;ImageObject&quot;,&quot;url&quot;:&quot;https://lh3.googleusercontent.com/ULB6iBuCeTVvSjjjU1A-O8e9ZpVba6uvyhtiWRti_rBAs9yMYOFBujxriJRZ-A=h60&quot;,&quot;width&quot;:206,&quot;height&quot;:60}}}</script>
  3268. <b:include data='post' name='postMetadataJSON'/>
  3269.  
  3270. <div class='scrolled-meta'>
  3271. <div class='scrolled-top'>
  3272. <div class='scrolled-title'><data:post.title/></div>
  3273. <b:if cond='data:blog.metaDescription != &quot;&quot;'><div class='scrolled-description'><data:blog.metaDescription/></div></b:if>
  3274. </div>
  3275. <div class='scrolled-bottom'>
  3276. <div class='share-icon'>
  3277. <a class='twitter' expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url.canonical + &quot;&amp;text=&quot; + data:post.title' rel='nofollow noopener noreferer' target='_blank' title='Twitter'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z'/></svg></a>
  3278. <a class='linkedin' expr:href='&quot;https://www.linkedin.com/shareArticle?url=&quot; + data:post.url.canonical' rel='nofollow noopener noreferer' target='_blank' title='LinkedIn'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M19 3A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19M18.5 18.5V13.2A3.26 3.26 0 0 0 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17A1.4 1.4 0 0 1 15.71 13.57V18.5H18.5M6.88 8.56A1.68 1.68 0 0 0 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19A1.69 1.69 0 0 0 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56M8.27 18.5V10.13H5.5V18.5H8.27Z'/></svg></a>
  3279. <a class='facebook' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url.canonical' rel='nofollow noopener noreferer' target='_blank' title='Facebook'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z'/></svg></a>
  3280.  
  3281. <a class='reddit' expr:href='&quot;https://reddit.com/submit?url=&quot; + data:post.url.canonical + &quot;&amp;title=&quot; + data:post.title' rel='nofollow noopener noreferer' target='_blank'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M14.5 15.41C14.58 15.5 14.58 15.69 14.5 15.8C13.77 16.5 12.41 16.56 12 16.56C11.61 16.56 10.25 16.5 9.54 15.8C9.44 15.69 9.44 15.5 9.54 15.41C9.65 15.31 9.82 15.31 9.92 15.41C10.38 15.87 11.33 16 12 16C12.69 16 13.66 15.87 14.1 15.41C14.21 15.31 14.38 15.31 14.5 15.41M10.75 13.04C10.75 12.47 10.28 12 9.71 12C9.14 12 8.67 12.47 8.67 13.04C8.67 13.61 9.14 14.09 9.71 14.08C10.28 14.08 10.75 13.61 10.75 13.04M14.29 12C13.72 12 13.25 12.5 13.25 13.05S13.72 14.09 14.29 14.09C14.86 14.09 15.33 13.61 15.33 13.05C15.33 12.5 14.86 12 14.29 12M22 12C22 17.5 17.5 22 12 22S2 17.5 2 12C2 6.5 6.5 2 12 2S22 6.5 22 12M18.67 12C18.67 11.19 18 10.54 17.22 10.54C16.82 10.54 16.46 10.7 16.2 10.95C15.2 10.23 13.83 9.77 12.3 9.71L12.97 6.58L15.14 7.05C15.16 7.6 15.62 8.04 16.18 8.04C16.75 8.04 17.22 7.57 17.22 7C17.22 6.43 16.75 5.96 16.18 5.96C15.77 5.96 15.41 6.2 15.25 6.55L12.82 6.03C12.75 6 12.68 6.03 12.63 6.07C12.57 6.11 12.54 6.17 12.53 6.24L11.79 9.72C10.24 9.77 8.84 10.23 7.82 10.96C7.56 10.71 7.2 10.56 6.81 10.56C6 10.56 5.35 11.21 5.35 12C5.35 12.61 5.71 13.11 6.21 13.34C6.19 13.5 6.18 13.62 6.18 13.78C6.18 16 8.79 17.85 12 17.85C15.23 17.85 17.85 16.03 17.85 13.78C17.85 13.64 17.84 13.5 17.81 13.34C18.31 13.11 18.67 12.6 18.67 12Z'/></svg></a>
  3282. <a class='pinterest' expr:href='&quot;https://www.pinterest.com/pin/create/button/?url=&quot; + data:post.url.canonical + &quot;&amp;media=&quot; + data:post.featuredImage + &quot;&amp;description=&quot; + data:post.title' rel='nofollow noopener noreferer' target='_blank' title='Pinterest'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z'/></svg></a>
  3283.  
  3284. <b:if cond='data:blog.isMobileRequest'>
  3285. <a class='whatsapp' expr:href='&quot;https://api.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url.canonical' rel='nofollow noopener noreferer' target='_blank'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z'/></svg></a>
  3286.  
  3287. <b:else/>
  3288. <a class='whatsapp' expr:href='&quot;https://web.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url.canonical' rel='nofollow noopener noreferer' target='_blank' title='WhatsApp'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z'/></svg></a>
  3289. </b:if>
  3290.  
  3291. <b:if cond='data:blog.isMobileRequest'>
  3292. <a class='telegram' expr:href='&quot;https://telegram.me/share/url?url=&quot; + data:post.url.canonical + &quot;&amp;text=&quot; + data:post.title' rel='nofollow noopener noreferer' target='_blank' title='Telegram'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M9.78,18.65L10.06,14.42L17.74,7.5C18.08,7.19 17.67,7.04 17.22,7.31L7.74,13.3L3.64,12C2.76,11.75 2.75,11.14 3.84,10.7L19.81,4.54C20.54,4.21 21.24,4.72 20.96,5.84L18.24,18.65C18.05,19.56 17.5,19.78 16.74,19.36L12.6,16.3L10.61,18.23C10.38,18.46 10.19,18.65 9.78,18.65Z'/></svg></a>
  3293. </b:if>
  3294.  
  3295. <a class='email' expr:href='&quot;mailto:?subject=&quot; + data:post.title + &quot;&amp;body=&quot; + data:post.url.canonical' rel='nofollow noopener noreferer' target='_blank' title='Email'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M13 17H17V14L22 18.5L17 23V20H13V17M20 4H4A2 2 0 0 0 2 6V18A2 2 0 0 0 4 20H11V18H4V8L12 13L20 8V14H22V6A2 2 0 0 0 20 4M12 11L4 6H20Z'/></svg></a>
  3296. </div>
  3297.  
  3298. <div class='post-comments'>
  3299. <svg height='25' width='25'><path d='M19.07 21.12a6.33 6.33 0 0 1-3.53-1.1 7.8 7.8 0 0 1-.7-.52c-.77.21-1.57.32-2.38.32-4.67 0-8.46-3.5-8.46-7.8C4 7.7 7.79 4.2 12.46 4.2c4.66 0 8.46 3.5 8.46 7.8 0 2.06-.85 3.99-2.4 5.45a6.28 6.28 0 0 0 1.14 2.59c.15.21.17.48.06.7a.69.69 0 0 1-.62.38h-.03zm0-1v.5l.03-.5h-.03zm-3.92-1.64l.21.2a6.09 6.09 0 0 0 3.24 1.54 7.14 7.14 0 0 1-.83-1.84 5.15 5.15 0 0 1-.16-.75 2.4 2.4 0 0 1-.02-.29v-.23l.18-.15a6.6 6.6 0 0 0 2.3-4.96c0-3.82-3.4-6.93-7.6-6.93-4.19 0-7.6 3.11-7.6 6.93 0 3.83 3.41 6.94 7.6 6.94.83 0 1.64-.12 2.41-.35l.28-.08z' fill-rule='evenodd'/></svg> <span class='post-comments-link'><data:post.numberOfComments/></span>
  3300. </div>
  3301. </div>
  3302. </div>
  3303.  
  3304. <div class='item-post-inner'>
  3305. <div class='post-header'>
  3306. <b:include data='post' name='postHeader'/>
  3307. </div>
  3308.  
  3309. <div class='post-body post-content' id='post-body'>
  3310. <data:post.body/>
  3311. </div>
  3312. </div>
  3313.  
  3314. <div class='post-footer'>
  3315. <b:if cond='data:view.isPost'>
  3316. <div class='footer-post-content'>
  3317. <b:if cond='data:allBylineItems.labels and data:post.labels'>
  3318. <div class='post-tags'>
  3319. <b:loop values='data:post.labels' var='label'><a class='label-link' expr:href='data:label.url' rel='tag'><data:label.name/></a></b:loop>
  3320. </div>
  3321. </b:if>
  3322.  
  3323. <b:if cond='!data:view.isPage'>
  3324. <div class='post-meta'>
  3325. <div class='meta-author-date'>
  3326. <div class='post-comment'>
  3327. <svg fill='currentColor' height='33' width='33'><path d='M24.28 25.5l.32-.29c2.11-1.94 3.4-4.61 3.4-7.56C28 11.83 22.92 7 16.5 7S5 11.83 5 17.65s5.08 10.66 11.5 10.66c1.22 0 2.4-.18 3.5-.5l.5-.15.41.33a8.86 8.86 0 0 0 4.68 2.1 7.34 7.34 0 0 1-1.3-4.15v-.43zm1 .45c0 1.5.46 2.62 1.69 4.44.22.32.01.75-.38.75a9.69 9.69 0 0 1-6.31-2.37c-1.2.35-2.46.54-3.78.54C9.6 29.3 4 24.09 4 17.65 4 11.22 9.6 6 16.5 6S29 11.22 29 17.65c0 3.25-1.42 6.18-3.72 8.3z' fill-rule='evenodd'/></svg> <span class='post-comments-link'><data:post.numberOfComments/> <data:messages.comments/></span>
  3328. </div>
  3329. </div>
  3330.  
  3331. <div class='meta-button'>
  3332. <b:if cond='data:allBylineItems.share'>
  3333. <a class='twitter' expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url.canonical + &quot;&amp;text=&quot; + data:post.title' rel='nofollow noopener noreferer' target='_blank' title='Twitter'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z'/></svg></a>
  3334. <a class='linkedin' expr:href='&quot;https://www.linkedin.com/shareArticle?url=&quot; + data:post.url.canonical' rel='nofollow noopener noreferer' target='_blank' title='LinkedIn'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M19 3A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19M18.5 18.5V13.2A3.26 3.26 0 0 0 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17A1.4 1.4 0 0 1 15.71 13.57V18.5H18.5M6.88 8.56A1.68 1.68 0 0 0 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19A1.69 1.69 0 0 0 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56M8.27 18.5V10.13H5.5V18.5H8.27Z'/></svg></a>
  3335. <a class='facebook' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url.canonical' rel='nofollow noopener noreferer' target='_blank' title='Facebook'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z'/></svg></a>
  3336.  
  3337. <button aria-label='Social Share' class='more-menu button-icon' data-a11y-toggle='toggle-social' type='button'>
  3338. <svg height='25' width='25'><path d='M5 12.5c0 .55.2 1.02.59 1.41.39.4.86.59 1.41.59.55 0 1.02-.2 1.41-.59.4-.39.59-.86.59-1.41 0-.55-.2-1.02-.59-1.41A1.93 1.93 0 0 0 7 10.5c-.55 0-1.02.2-1.41.59-.4.39-.59.86-.59 1.41zm5.62 0c0 .55.2 1.02.58 1.41.4.4.87.59 1.42.59.55 0 1.02-.2 1.41-.59.4-.39.59-.86.59-1.41 0-.55-.2-1.02-.59-1.41a1.93 1.93 0 0 0-1.41-.59c-.55 0-1.03.2-1.42.59-.39.39-.58.86-.58 1.41zm5.6 0c0 .55.2 1.02.58 1.41.4.4.87.59 1.43.59.56 0 1.03-.2 1.42-.59.39-.39.58-.86.58-1.41 0-.55-.2-1.02-.58-1.41a1.93 1.93 0 0 0-1.42-.59c-.56 0-1.04.2-1.43.59-.39.39-.58.86-.58 1.41z' fill-rule='evenodd'/></svg>
  3339. </button>
  3340.  
  3341. <div aria-hidden='true' class='data-toggle' id='toggle-social'>
  3342. <b:if cond='data:allBylineItems.share'>
  3343. <ul class='share-links'>
  3344.  
  3345. <b:if cond='data:blog.isMobileRequest'>
  3346. <li class='whatsapp whatsapp-mobile'><a class='whatsapp' expr:href='&quot;https://api.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url.canonical' rel='nofollow noopener noreferer' target='_blank'><span><b:include data='{ message: &quot;translateShareTo&quot; }' name='translate'/> WhatsApp</span></a></li>
  3347. <b:else/>
  3348. <li class='whatsapp whatsapp-desktop'><a class='whatsapp' expr:href='&quot;https://web.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url.canonical' rel='nofollow noopener noreferer' target='_blank' title='WhatsApp'><span><b:include data='{ message: &quot;translateShareTo&quot; }' name='translate'/> WhatsApp</span></a></li>
  3349. </b:if>
  3350. <b:if cond='data:blog.isMobileRequest'>
  3351. <li class='telegram'><a class='telegram' expr:href='&quot;https://telegram.me/share/url?url=&quot; + data:post.url.canonical + &quot;&amp;text=&quot; + data:post.title' rel='nofollow noopener noreferer' target='_blank' title='Telegram'><span><b:include data='{ message: &quot;translateShareTo&quot; }' name='translate'/> Telegram</span></a></li>
  3352. </b:if>
  3353. <li class='email'><a class='email' expr:href='&quot;mailto:?subject=&quot; + data:post.title + &quot;&amp;body=&quot; + data:post.url.canonical' rel='nofollow noopener noreferer' target='_blank' title='Email'><span><b:include data='{ message: &quot;translateShareTo&quot; }' name='translate'/> Email</span></a></li>
  3354. </ul>
  3355. </b:if>
  3356. </div>
  3357. </b:if>
  3358. </div>
  3359. </div>
  3360. </b:if>
  3361.  
  3362. <b:if cond='data:post.author.aboutMe'>
  3363. <div class='about-author'>
  3364. <div class='avatar-container'>
  3365. <b:if cond='data:post.author.authorPhoto.image'>
  3366. <span class='author-avatar lazyload blur-up' expr:style='&quot;background-image: url(&quot; + resizeImage(data:post.author.authorPhoto.image, 80, &quot;1:1&quot;) + &quot;)&quot;'/>
  3367. </b:if>
  3368. </div>
  3369. <div class='author-description'>
  3370. <div class='author-name'>
  3371. <span><data:messages.postedBy/></span><div class='authors'><data:post.author.name/></div>
  3372. </div>
  3373. <p class='description-text'><data:post.author.aboutMe/></p>
  3374. </div>
  3375. </div>
  3376. </b:if>
  3377. </div>
  3378.  
  3379. <b:if cond='data:allBylineItems.backlinks'>
  3380. <div class='related-post' expr:id='&quot;related-post-&quot; + data:post.id'/>
  3381. </b:if>
  3382. </b:if>
  3383. </div>
  3384.  
  3385. <b:if cond='data:view.isSingleItem and data:post.allowComments'>
  3386. <b:if cond='data:post.commentSource == 1'>
  3387. <b:if cond='data:post.allowIframeComments'>
  3388. <script expr:src='data:post.iframeCommentSrc' type='text/javascript'/>
  3389.  
  3390. <div class='cmt_iframe_holder' expr:data-href='data:post.url.canonical' expr:data-viewtype='data:post.viewType'/>
  3391.  
  3392. <b:if cond='!data:post.embedCommentForm'>
  3393. <b:if cond='data:view.isMultipleItems'>
  3394. <span class='byline post-comment-link container'>
  3395. <b:include cond='data:post.commentSource != 1' name='commentsLink'/>
  3396. <b:include cond='data:post.commentSource == 1' name='commentsLinkIframe'/>
  3397. </span>
  3398. </b:if>
  3399. </b:if>
  3400. </b:if>
  3401.  
  3402. <b:elseif cond='data:post.showThreadedComments'/>
  3403. <section class='comments threaded' expr:data-embed='data:post.embedCommentForm' expr:data-num-comments='data:post.numberOfComments' id='comments'>
  3404. <b:class cond='data:post.numberOfComments == &quot;0&quot;' name='no-comments'/>
  3405.  
  3406. <div class='comment-container'>
  3407. <b:if cond='data:post.numberOfComments == 0'>
  3408. <div class='comments-title'><h3 class='title'><data:messages.comments/></h3><b:if cond='!data:view.isPage'><div class='close-comment'><svg height='25' viewBox='0 0 25 25' width='25'><path d='M18.13 6.11l-5.61 5.61-5.6-5.61-.81.8 5.61 5.61-5.61 5.61.8.8 5.61-5.6 5.61 5.6.8-.8-5.6-5.6 5.6-5.62'/></svg></div></b:if></div>
  3409.  
  3410. <b:if cond='data:this.messages.blogComment != &quot;&quot;'>
  3411. <p class='comments-message'><data:this.messages.blogComment/></p>
  3412. </b:if>
  3413.  
  3414. <b:else/>
  3415. <div class='comments-title'><h3 class='title'><data:post.numberOfComments/> <data:messages.comments/></h3><b:if cond='!data:view.isPage'><div class='close-comment'><svg height='25' viewBox='0 0 25 25' width='25'><path d='M18.13 6.11l-5.61 5.61-5.6-5.61-.81.8 5.61 5.61-5.61 5.61.8.8 5.61-5.6 5.61 5.6.8-.8-5.6-5.6 5.6-5.62'/></svg></div></b:if></div>
  3416.  
  3417. <b:if cond='data:this.messages.blogComment != &quot;&quot;'>
  3418. <p class='comments-message'><data:this.messages.blogComment/></p>
  3419. </b:if>
  3420. </b:if>
  3421.  
  3422. <div class='comments-content'>
  3423. <b:if cond='data:post.embedCommentForm'>
  3424. <script defer='defer'>//<![CDATA[
  3425. (function(){function e(c){if(Error.captureStackTrace)Error.captureStackTrace(this,e);else{var a=Error().stack;a&&(this.stack=a)}c&&(this.message=c+"")}var g=this||self,h=null,i=function(b){return(b=b.querySelector&&b.querySelector("script[nonce]"))&&(b=b.nonce||b.getAttribute("nonce"))&&/^[\w+/_-]+[=]{0,2}$/.test(b)?b:""},a=function(d,a){function b(){}b.prototype=a.prototype,d.superClass_=a.prototype,d.prototype=new b,d.prototype.constructor=d,d.base=function(b,c){for(var d=Array(arguments.length-2),e=2;e<arguments.length;e++)d[e-2]=arguments[e];return a.prototype[c].apply(b,d)}},b=function(b){return b};a(e,Error),e.prototype.name="CustomError";var c=function(g,h){g=g.split("%s");for(var b="",i=g.length-1,f=0;f<i;f++)b+=g[f]+(f<h.length?h[f]:"%s");e.call(this,b+g[i])};a(c,e),c.prototype.name="AssertionError";var d,j=function(b){throw new c("Failure"+(b?": "+b:""),Array.prototype.slice.call(arguments,1))},k=function(c,a){this.privateDoNotAccessOrElseTrustedResourceUrlWrappedValue_=a===f?c:""};k.prototype.toString=function(){return this.privateDoNotAccessOrElseTrustedResourceUrlWrappedValue_+""};var f={},n=function(e,a){a:{try{var l=e&&e.ownerDocument,m=l&&(l.defaultView||l.parentWindow);if(m=m||g,m.Element&&m.Location){l=m;break a}}catch(a){}l=null}if(l&&"undefined"!=typeof l.HTMLScriptElement&&(!e||!(e instanceof l.HTMLScriptElement)&&(e instanceof l.Location||e instanceof l.Element))){if(l=typeof e,"object"==l&&null!=e||"function"==l)try{var n=e.constructor.displayName||e.constructor.name||Object.prototype.toString.call(e)}catch(a){n="<object could not be stringified>"}else n=void 0===e?"undefined":null===e?"null":typeof e;j("Argument is not a %s (or a non-Element, non-Location mock); got: %s","HTMLScriptElement",n)}a instanceof k&&a.constructor===k?a=a.privateDoNotAccessOrElseTrustedResourceUrlWrappedValue_:(n=typeof a,j("expected object of type TrustedResourceUrl, got '"+a+"' of type "+("object"==n?a?Array.isArray(a)?"array":n:"null":n)),a="type_error:TrustedResourceUrl"),e.src=a,(a=e.ownerDocument&&e.ownerDocument.defaultView)&&a!=g?a=i(a.document):(null===h&&(h=i(g.document)),a=h),a&&e.setAttribute("nonce",a)},o=function(){var c=document,a="SCRIPT";return"application/xhtml+xml"===c.contentType&&(a=a.toLowerCase()),c.createElement(a)},p=function(e){if(void 0===d){var h=null,i=g.trustedTypes;if(i&&i.createPolicy)try{h=i.createPolicy("goog#html",{createHTML:b,createScript:b,createScriptURL:b})}catch(a){g.console&&g.console.error(a.message)}d=h}return e=(h=d)?h.createScriptURL(e):e,new k(e,f)};a=function(e,g,b){var c=null;e&&0<e.length&&(c=parseInt(e[e.length-1].timestamp,10)+1);var h,i,j,k=null,m=null,r=null,l=(window.location.hash||"#").substring(1);/^comment-form_/.test(l)?i=l.substring(13):/^c[0-9]+$/.test(l)&&(j=l.substring(1));var s={id:b.postId,data:e,loadNext:function(a){if(c){var d=b.feed+"?alt=json&v=2&orderby=published&reverse=false&max-results=50";c&&(d+="&published-min="+new Date(c).toISOString()),window.bloggercomments=function(b){c=null;var d=[];if(b&&b.feed&&b.feed.entry)for(var f,g=0;f=b.feed.entry[g];g++){var i={},j=/blog-(\d+).post-(\d+)/.exec(f.id.$t);i.id=j?j[2]:null,j=i;a:{var k=void 0,l=f&&(f.content&&f.content.$t||f.summary&&f.summary.$t)||"";if(f&&f.gd$extendedProperty)for(k in f.gd$extendedProperty)if("blogger.contentRemoved"==f.gd$extendedProperty[k].name){k="<span class=\"deleted-comment\">"+l+"</span>";break a}k=l}if(j.body=k,i.timestamp=Date.parse(f.published.$t)+"",f.author&&f.author.constructor===Array&&(j=f.author[0])&&(i.author={name:j.name?j.name.$t:void 0,profileUrl:j.uri?j.uri.$t:void 0,avatarUrl:j.gd$image?j.gd$image.src:void 0}),f.link&&(f.link[2]&&(i.link=i.permalink=f.link[2].href),f.link[3]&&(j=/.*comments\/default\/(\d+)\?.*/.exec(f.link[3].href))&&j[1]&&(i.parentId=j[1])),i.deleteclass="item-control blog-admin",f.gd$extendedProperty)for(var m in f.gd$extendedProperty)"blogger.itemClass"==f.gd$extendedProperty[m].name?i.deleteclass+=" "+f.gd$extendedProperty[m].value:"blogger.displayTime"==f.gd$extendedProperty[m].name&&(i.displayTime=f.gd$extendedProperty[m].value);d.push(i)}c=50>d.length?null:parseInt(d[d.length-1].timestamp,10)+1,a(d),window.bloggercomments=null};var e=o();e.type="text/javascript",n(e,p(d+"&callback=bloggercomments")),document.getElementsByTagName("head")[0].appendChild(e)}},hasMore:function(){return!!c},getMeta:function(a,c){return"iswriter"==a?c.author&&c.author.name==b.authorName&&c.author.profileUrl==b.authorUrl?"true":"":"deletelink"==a?b.baseUri+"/delete-comment.g?blogID="+b.blogId+"&postID="+c.id:"deleteclass"==a?c.deleteclass:""},onReply:function(a,b){null==k&&(k=document.getElementById("comment-editor"),null!=k&&(r=k.style.height,k.style.display="block",m=k.src.split("#"))),k&&a&&a!==h&&(document.getElementById(b).insertBefore(k,null),b=m[0]+(a?"&parentID="+a:""),m[1]&&(b=b+"#"+m[1]),k.src=b,k.style.height=r||k.style.height,h=a,k.removeAttribute("data-resized"),k.dispatchEvent(new Event("iframeMoved")))},rendered:!0,initComment:j,initReplyThread:i,config:{maxDepth:b.maxThreadDepth},messages:g};e=function(){window.goog&&window.goog.comments&&window.goog.comments.render(document.getElementById("comment-holder"),s)},window.goog&&window.goog.comments?e():(window.goog=window.goog||{},window.goog.comments=window.goog.comments||{},window.goog.comments.loadQueue=window.goog.comments.loadQueue||[],window.goog.comments.loadQueue.push(e))};var l=["blogger","widgets","blog","initThreadedComments"],q=g;l[0]in q||"undefined"==typeof q.execScript||q.execScript("var "+l[0]);for(var s;l.length&&(s=l.shift());)l.length||void 0===a?q=q[s]&&q[s]!==Object.prototype[s]?q[s]:q[s]={}:q[s]=a}).call(this);
  3426. //]]>
  3427. blogger.widgets.blog.initThreadedComments(<data:post.commentJso/>,<data:post.commentMsgs/>,<data:post.commentConfig/>);
  3428. </script>
  3429. </b:if>
  3430.  
  3431. <div id='comment-holder'>
  3432. <data:post.commentHtml/>
  3433. </div>
  3434. </div>
  3435.  
  3436. <p class='comment-footer'>
  3437. <b:if cond='data:post.allowNewComments'>
  3438. <div class='comment-form'>
  3439. <a name='comment-form'/>
  3440.  
  3441. <b:if cond='data:this.messages.blogComment != &quot;&quot;'>
  3442. <p><data:this.messages.blogComment/></p>
  3443. </b:if>
  3444.  
  3445. <a expr:href='data:post.commentFormIframeSrc appendParams {skin: &quot;contempo&quot;}' id='comment-editor-src'/>
  3446.  
  3447. <iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight ?: &quot;90px&quot;' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
  3448. <data:post.cmtfpIframe/>
  3449. <script type='text/javascript'>BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);</script>
  3450. </div>
  3451.  
  3452. <b:else/>
  3453. <b:if cond='data:post.noNewCommentsText != &quot;&quot;'><span><data:post.noNewCommentsText/></span></b:if>
  3454. </b:if>
  3455. </p>
  3456. <b:if cond='data:showCmtPopup'>
  3457. <div id='comment-popup'>
  3458. <iframe allowtransparency='allowtransparency' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'/>
  3459. </div>
  3460. </b:if>
  3461. </div>
  3462. </section>
  3463.  
  3464. <b:else/>
  3465. <section expr:class='&quot;comments&quot; + (data:post.embedCommentForm ? &quot; embed&quot; : &quot;&quot;)' expr:data-num-comments='data:post.numberOfComments' id='comments'>
  3466. <b:class cond='data:post.numberOfComments == &quot;0&quot;' name='no-comments'/>
  3467.  
  3468. <div class='comment-container'>
  3469. <b:if cond='data:post.allowComments'>
  3470. <b:if cond='data:post.numberOfComments == 0'>
  3471. <div class='comments-title'><h3 class='title'><data:messages.comments/></h3><b:if cond='!data:view.isPage'><div class='close-comment'><svg height='25' viewBox='0 0 25 25' width='25'><path d='M18.13 6.11l-5.61 5.61-5.6-5.61-.81.8 5.61 5.61-5.61 5.61.8.8 5.61-5.6 5.61 5.6.8-.8-5.6-5.6 5.6-5.62'/></svg></div></b:if></div>
  3472.  
  3473. <b:if cond='data:this.messages.blogComment != &quot;&quot;'>
  3474. <p class='comments-message'><data:this.messages.blogComment/></p>
  3475. </b:if>
  3476.  
  3477. <b:else/>
  3478. <div class='comments-title'><h3 class='title'><data:post.numberOfComments/> <data:messages.comments/></h3><b:if cond='!data:view.isPage'><div class='close-comment'><svg height='25' viewBox='0 0 25 25' width='25'><path d='M18.13 6.11l-5.61 5.61-5.6-5.61-.81.8 5.61 5.61-5.61 5.61.8.8 5.61-5.6 5.61 5.6.8-.8-5.6-5.6 5.6-5.62'/></svg></div></b:if></div>
  3479.  
  3480. <b:if cond='data:this.messages.blogComment != &quot;&quot;'>
  3481. <p class='comments-message'><data:this.messages.blogComment/></p>
  3482. </b:if>
  3483. </b:if>
  3484.  
  3485. <div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
  3486. <b:include cond='data:post.comments' data='post.comments' name='commentList'/>
  3487. </div>
  3488.  
  3489. <b:if cond='data:post.commentPagingRequired'>
  3490. <div class='paging-control-container'>
  3491. <b:if cond='data:post.hasOlderLinks'>
  3492. <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
  3493. <data:messages.oldest/>
  3494. </a>
  3495. <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
  3496. <data:messages.older/>
  3497. </a>
  3498. </b:if>
  3499.  
  3500. <span class='comment-range-text'>
  3501. <data:post.commentRangeText/>
  3502. </span>
  3503.  
  3504. <b:if cond='data:post.hasNewerLinks'>
  3505. <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
  3506. <data:messages.newer/>
  3507. </a>
  3508. <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
  3509. <data:messages.newest/>
  3510. </a>
  3511. </b:if>
  3512. </div>
  3513. </b:if>
  3514.  
  3515. <div class='footer'>
  3516. <b:if cond='data:post.embedCommentForm'>
  3517. <b:if cond='data:post.allowNewComments'>
  3518. <div class='comment-form'>
  3519.  
  3520. <b:if cond='data:this.messages.blogComment != &quot;&quot;'>
  3521. <p><data:this.messages.blogComment/></p>
  3522. </b:if>
  3523.  
  3524. <a expr:href='data:post.commentFormIframeSrc appendParams {skin: &quot;contempo&quot;}' id='comment-editor-src'/>
  3525.  
  3526. <iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight ?: &quot;90px&quot;' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
  3527.  
  3528. <data:post.cmtfpIframe/>
  3529. <script type='text/javascript'>
  3530. BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);
  3531. </script>
  3532. </div>
  3533.  
  3534. <b:else/>
  3535. <data:post.noNewCommentsText/>
  3536. </b:if>
  3537.  
  3538. <b:else/>
  3539. <b:if cond='data:post.allowComments'>
  3540. <a expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
  3541. <b:message name='messages.postAComment'/>
  3542. </a>
  3543. </b:if>
  3544. </b:if>
  3545. </div>
  3546. </b:if>
  3547.  
  3548. <b:if cond='data:showCmtPopup'>
  3549. <div id='comment-popup'>
  3550. <iframe allowtransparency='allowtransparency' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
  3551. </iframe>
  3552. </div>
  3553. </b:if>
  3554. </div>
  3555. </section>
  3556. </b:if>
  3557. </b:if>
  3558. </b:if>
  3559. </article>
  3560. </b:loop>
  3561. </div>
  3562.  
  3563. <b:if cond='data:view.isMultipleItems'>
  3564. <div class='blog-pager' id='blog-pager'>
  3565. <b:if cond='data:olderPageUrl'>
  3566. <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:messages.olderPosts'><data:messages.olderPosts/></a>
  3567. </b:if>
  3568.  
  3569. <b:if cond='data:newerPageUrl'>
  3570. <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:messages.newerPosts'><data:messages.newerPosts/></a>
  3571. </b:if>
  3572. </div>
  3573. </b:if>
  3574. </b:includable>
  3575. <b:includable id='aboutPostAuthor'>
  3576. <div class='author-name'>
  3577. <a class='g-profile' expr:href='data:post.author.profileUrl' rel='author' title='author profile'>
  3578. <span>
  3579. <data:post.author.name/>
  3580. </span>
  3581. </a>
  3582. </div>
  3583. <div>
  3584. <span class='author-desc'>
  3585. <data:post.author.aboutMe/>
  3586. </span>
  3587. </div>
  3588. </b:includable>
  3589. <b:includable id='addComments'>
  3590. <a expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
  3591. <b:message name='messages.postAComment'/>
  3592. </a>
  3593. </b:includable>
  3594. <b:includable id='blogThisShare'>
  3595. <b:with value='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' var='onclick'>
  3596. <b:include name='platformShare'/>
  3597. </b:with>
  3598. </b:includable>
  3599. <b:includable id='bylineByName' var='byline'>
  3600. <b:switch var='data:byline.name'>
  3601. <b:case value='share'/>
  3602. <b:include cond='data:post.shareUrl' name='postShareButtons'/>
  3603. <b:case value='comments'/>
  3604. <b:include cond='data:post.allowComments' name='postCommentsLink'/>
  3605. <b:case value='location'/>
  3606. <b:include cond='data:post.location' name='postLocation'/>
  3607. <b:case value='timestamp'/>
  3608. <b:include cond='not data:view.isPage' name='postTimestamp'/>
  3609. <b:case value='author'/>
  3610. <b:include name='postAuthor'/>
  3611. <b:case value='labels'/>
  3612. <b:include cond='data:post.labels' name='postLabels'/>
  3613. <b:case value='icons'/>
  3614. <b:include cond='data:post.emailPostUrl' name='emailPostIcon'/>
  3615. </b:switch>
  3616. </b:includable>
  3617. <b:includable id='bylineRegion' var='regionItems'>
  3618. <b:loop values='data:regionItems' var='byline'>
  3619. <b:include data='byline' name='bylineByName'/>
  3620. </b:loop>
  3621. </b:includable>
  3622. <b:includable id='commentAuthorAvatar'>
  3623. <div class='avatar-image-container'>
  3624. <img class='author-avatar' expr:src='data:comment.authorAvatarSrc' height='35' width='35'/>
  3625. </div>
  3626. </b:includable>
  3627. <b:includable id='commentDeleteIcon' var='comment'>
  3628. <span expr:class='&quot;item-control &quot; + data:comment.adminClass'>
  3629. <b:if cond='data:showCmtPopup'>
  3630. <div class='goog-toggle-button'>
  3631. <div class='goog-inline-block comment-action-icon'/>
  3632. </div>
  3633. <b:else/>
  3634. <a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:messages.deleteComment'>
  3635. <img src='https://resources.blogblog.com/img/icon_delete13.gif'/>
  3636. </a>
  3637. </b:if>
  3638. </span>
  3639. </b:includable>
  3640. <b:includable id='commentForm' var='post'>
  3641. <div class='comment-form'>
  3642. <a name='comment-form'/>
  3643. <h4 id='comment-post-message'><data:messages.postAComment/></h4>
  3644. <b:if cond='data:this.messages.blogComment != &quot;&quot;'>
  3645. <p><data:this.messages.blogComment/></p>
  3646. </b:if>
  3647. <b:include data='post' name='commentFormIframeSrc'/>
  3648. <iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight ?: &quot;90px&quot;' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
  3649. <data:post.cmtfpIframe/>
  3650. <script type='text/javascript'>
  3651. BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);
  3652. </script>
  3653. </div>
  3654. </b:includable>
  3655. <b:includable id='commentFormIframeSrc' var='post'>
  3656. <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
  3657. </b:includable>
  3658. <b:includable id='commentItem' var='comment'>
  3659. <div class='comment' expr:id='&quot;c&quot; + data:comment.id'>
  3660. <b:include cond='data:blog.enabledCommentProfileImages' name='commentAuthorAvatar'/>
  3661.  
  3662. <div class='comment-block'>
  3663. <div class='comment-author'>
  3664. <b:if cond='data:comment.authorUrl'>
  3665. <b:message name='messages.authorSaidWithLink'>
  3666. <b:param expr:value='data:comment.author' name='authorName'/>
  3667. <b:param expr:value='data:comment.authorUrl' name='authorUrl'/>
  3668. </b:message>
  3669. <b:else/>
  3670. <b:message name='messages.authorSaid'>
  3671. <b:param expr:value='data:comment.author' name='authorName'/>
  3672. </b:message>
  3673. </b:if>
  3674. </div>
  3675. <div expr:class='&quot;comment-body&quot; + (data:comment.isDeleted ? &quot; deleted&quot; : &quot;&quot;)'>
  3676. <data:comment.body/>
  3677. </div>
  3678. <div class='comment-footer'>
  3679. <span class='comment-timestamp'>
  3680. <a expr:href='data:comment.url' title='comment permalink'>
  3681. <data:comment.timestamp/>
  3682. </a>
  3683. <b:include data='comment' name='commentDeleteIcon'/>
  3684. </span>
  3685. </div>
  3686. </div>
  3687. </div>
  3688. </b:includable>
  3689. <b:includable id='commentList' var='comments'>
  3690. <div id='comments-block'>
  3691. <b:loop values='data:comments' var='comment'>
  3692. <div class='comment' expr:id='&quot;c&quot; + data:comment.id'>
  3693. <b:if cond='data:blog.enabledCommentProfileImages'>
  3694. <div class='avatar-image-container'>
  3695. <span class='author-avatar lazyload blur-up' expr:style='&quot;background-image: url(&quot; + resizeImage(data:comment.authorAvatarSrc, 35) + &quot;)&quot;'/>
  3696. </div>
  3697. </b:if>
  3698.  
  3699. <div class='comment-block'>
  3700. <div class='comment-author'>
  3701. <b:if cond='data:comment.authorUrl'>
  3702. <b:message name='messages.authorSaidWithLink'>
  3703. <b:param expr:value='data:comment.author' name='authorName'/>
  3704. </b:message>
  3705.  
  3706. <b:else/>
  3707. <b:message name='messages.authorSaid'>
  3708. <b:param expr:value='data:comment.author' name='authorName'/>
  3709. </b:message>
  3710. </b:if>
  3711. </div>
  3712.  
  3713. <div expr:class='&quot;comment-body&quot; + (data:comment.isDeleted ? &quot; deleted&quot; : &quot;&quot;)'>
  3714. <data:comment.body/>
  3715. </div>
  3716.  
  3717. <div class='comment-footer'>
  3718. <span class='comment-timestamp'>
  3719. <a expr:href='data:comment.url' title='comment permalink'>
  3720. <data:comment.timestamp/>
  3721. </a>
  3722.  
  3723. <span expr:class='&quot;item-control &quot; + data:comment.adminClass'>
  3724. <b:if cond='data:showCmtPopup'>
  3725. <div class='goog-toggle-button'>
  3726. <div class='goog-inline-block comment-action-icon'/>
  3727. </div>
  3728.  
  3729. <b:else/>
  3730. <a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:messages.deleteComment'>
  3731. <img src='https://resources.blogblog.com/img/icon_delete13.gif'/>
  3732. </a>
  3733. </b:if>
  3734. </span>
  3735. </span>
  3736. </div>
  3737. </div>
  3738. </div>
  3739. </b:loop>
  3740. </div>
  3741. </b:includable>
  3742. <b:includable id='commentPicker' var='post'>
  3743. <b:if cond='data:post.showThreadedComments'>
  3744. <b:include data='post' name='threadedComments'/>
  3745. <b:else/>
  3746. <b:include data='post' name='comments'/>
  3747. </b:if>
  3748. </b:includable>
  3749. <b:includable id='comments' var='post'>
  3750. <section expr:class='&quot;comments&quot; + (data:post.embedCommentForm ? &quot; embed&quot; : &quot;&quot;)' expr:data-num-comments='data:post.numberOfComments' id='comments'>
  3751. <a name='comments'/>
  3752. <b:if cond='data:post.allowComments'>
  3753.  
  3754. <b:include name='commentsTitle'/>
  3755.  
  3756. <div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
  3757. <b:include cond='data:post.comments' data='post.comments' name='commentList'/>
  3758. </div>
  3759.  
  3760. <b:if cond='data:post.commentPagingRequired'>
  3761. <div class='paging-control-container'>
  3762. <b:if cond='data:post.hasOlderLinks'>
  3763. <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
  3764. <data:messages.oldest/>
  3765. </a>
  3766. <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
  3767. <data:messages.older/>
  3768. </a>
  3769. </b:if>
  3770.  
  3771. <span class='comment-range-text'>
  3772. <data:post.commentRangeText/>
  3773. </span>
  3774.  
  3775. <b:if cond='data:post.hasNewerLinks'>
  3776. <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
  3777. <data:messages.newer/>
  3778. </a>
  3779. <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
  3780. <data:messages.newest/>
  3781. </a>
  3782. </b:if>
  3783. </div>
  3784. </b:if>
  3785.  
  3786. <div class='footer'>
  3787. <b:if cond='data:post.embedCommentForm'>
  3788. <b:if cond='data:post.allowNewComments'>
  3789. <b:include data='post' name='commentForm'/>
  3790. <b:else/>
  3791. <data:post.noNewCommentsText/>
  3792. </b:if>
  3793. <b:else/>
  3794. <b:if cond='data:post.allowComments'>
  3795. <b:include data='post' name='addComments'/>
  3796. </b:if>
  3797. </b:if>
  3798. </div>
  3799. </b:if>
  3800. <b:if cond='data:showCmtPopup'>
  3801. <div id='comment-popup'>
  3802. <iframe allowtransparency='allowtransparency' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
  3803. </iframe>
  3804. </div>
  3805. </b:if>
  3806. </section>
  3807. </b:includable>
  3808. <b:includable id='commentsLink'>
  3809. <a class='comment-link' expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
  3810. <b:if cond='data:post.numberOfComments &gt; 0'>
  3811. <b:message name='messages.numberOfComments'>
  3812. <b:param expr:value='data:post.numberOfComments' name='numComments'/>
  3813. </b:message>
  3814. <b:else/>
  3815. <data:messages.postAComment/>
  3816. </b:if>
  3817. </a>
  3818. </b:includable>
  3819. <b:includable id='commentsLinkIframe'>
  3820. <!-- G+ comments, no longer available. The includable is retained for backwards-compatibility. -->
  3821. </b:includable>
  3822. <b:includable id='commentsTitle'>
  3823. <h3 class='title'><data:messages.comments/></h3>
  3824. </b:includable>
  3825. <b:includable id='defaultAdUnit'>
  3826. <ins class='adsbygoogle' data-ad-format='auto' expr:data-ad-client='data:adClientId ?: data:blog.adsenseClientId' expr:data-ad-host='data:blog.adsenseHostId' expr:style='data:style ?: &quot;display: block;&quot;'>
  3827. <b:attr cond='not data:blog.analytics4' expr:value='data:blog.analyticsAccountNumber' name='data-analytics-uacct'/>
  3828. </ins>
  3829. <script>
  3830. (adsbygoogle = window.adsbygoogle || []).push({});
  3831. </script>
  3832. </b:includable>
  3833. <b:includable id='emailPostIcon'>
  3834. <span class='byline post-icons'>
  3835. <!-- email post links -->
  3836. <span class='item-action'>
  3837. <a expr:href='data:post.emailPostUrl' expr:title='data:messages.emailPost'>
  3838. <b:include data='{ iconClass: &quot;touch-icon sharing-icon&quot; }' name='emailIcon'/>
  3839. </a>
  3840. </span>
  3841. </span>
  3842. </b:includable>
  3843. <b:includable id='facebookShare'>
  3844. <b:with value='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' var='onclick'>
  3845. <b:include name='platformShare'/>
  3846. </b:with>
  3847. </b:includable>
  3848. <b:includable id='feedLinks'>
  3849. <b:if cond='!data:view.isPost'> <!-- Blog feed links -->
  3850. <b:if cond='data:feedLinks'>
  3851. <div class='blog-feeds'>
  3852. <b:include data='feedLinks' name='feedLinksBody'/>
  3853. </div>
  3854. </b:if>
  3855. <b:else/> <!--Post feed links -->
  3856. <div class='post-feeds'>
  3857. <b:loop values='data:posts' var='post'>
  3858. <b:if cond='data:post.allowComments and data:post.feedLinks'>
  3859. <b:include data='post.feedLinks' name='feedLinksBody'/>
  3860. </b:if>
  3861. </b:loop>
  3862. </div>
  3863. </b:if>
  3864. </b:includable>
  3865. <b:includable id='feedLinksBody' var='links'>
  3866. <div class='feed-links'>
  3867. <data:messages.subscribeTo/>
  3868. <b:loop values='data:links' var='f'>
  3869. <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
  3870. </b:loop>
  3871. </div>
  3872. </b:includable>
  3873. <b:includable id='footerBylines'>
  3874. <b:if cond='data:widgets.Blog.first.footerBylines'>
  3875. <b:loop index='i' values='data:widgets.Blog.first.footerBylines' var='region'>
  3876. <b:if cond='not data:region.items.empty'>
  3877. <div expr:class='&quot;post-footer-line post-footer-line-&quot; + (data:i + 1)'>
  3878. <b:with value='&quot;footer-&quot; + (data:i + 1)' var='regionName'>
  3879. <b:include data='region.items' name='bylineRegion'/>
  3880. </b:with>
  3881. </div>
  3882. </b:if>
  3883. </b:loop>
  3884. </b:if>
  3885. </b:includable>
  3886. <b:includable id='googlePlusShare'>
  3887. </b:includable>
  3888. <b:includable id='headerByline'>
  3889. <b:if cond='data:widgets.Blog.first.headerByline'>
  3890. <div class='post-header'>
  3891. <div class='post-header-line-1'>
  3892. <b:with value='&quot;header-1&quot;' var='regionName'>
  3893. <b:include data='data:widgets.Blog.first.headerByline.items' name='bylineRegion'/>
  3894. </b:with>
  3895. </div>
  3896. </div>
  3897. </b:if>
  3898. </b:includable>
  3899. <b:includable id='homePageLink'>
  3900. <a class='home-link' expr:href='data:blog.homepageUrl'>
  3901. <data:messages.home/>
  3902. </a>
  3903. </b:includable>
  3904. <b:includable id='iframeComments' var='post'>
  3905. <!-- G+ comments, no longer available. The includable is retained for backwards-compatibility. -->
  3906. </b:includable>
  3907. <b:includable id='inlineAd' var='post'>
  3908. <b:if cond='!data:view.isPreview'>
  3909. <b:if cond='data:this.adCode or data:this.adClientId or data:blog.adsenseClientId'>
  3910. <!-- Ad -->
  3911. <div class='inline-ad'>
  3912. <b:if cond='data:this.adCode != &quot;&quot;'>
  3913. <data:this.adCode/>
  3914. <b:else/>
  3915. <b:include cond='data:this.adClientId or data:blog.adsenseClientId' name='defaultAdUnit'/>
  3916. </b:if>
  3917. </div>
  3918. </b:if>
  3919. <b:else/>
  3920. <div class='inline-ad'>
  3921. <div class='inline-ad-placeholder'>
  3922. <span><b:message name='messages.adsGoHere'/></span>
  3923. </div>
  3924. </div>
  3925. </b:if>
  3926. </b:includable>
  3927. <b:includable id='linkShare'>
  3928. <b:with value='&quot;window.prompt(\&quot;Copy to clipboard: Ctrl+C, Enter\&quot;, \&quot;&quot; + data:originalUrl + &quot;\&quot;); return false;&quot;' var='onclick'>
  3929. <b:include name='platformShare'/>
  3930. </b:with>
  3931. </b:includable>
  3932. <b:includable id='nextPageLink'>
  3933. <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:messages.olderPosts'>
  3934. <data:messages.olderPosts/>
  3935. </a>
  3936. </b:includable>
  3937. <b:includable id='otherSharingButton'>
  3938. <span class='sharing-platform-button sharing-element-other' expr:aria-label='data:messages.shareToOtherApps.escaped' expr:data-url='data:originalUrl' expr:title='data:messages.shareToOtherApps.escaped' role='menuitem' tabindex='-1'>
  3939. <b:with value='{key: &quot;sharingOther&quot;}' var='platform'>
  3940. <b:include name='sharingPlatformIcon'/>
  3941. </b:with>
  3942. <span class='platform-sharing-text'><data:messages.shareOtherApps.escaped/></span>
  3943. </span>
  3944. </b:includable>
  3945. <b:includable id='platformShare'>
  3946. <a expr:class='&quot;goog-inline-block sharing-&quot; + data:platform.key' expr:data-url='data:originalUrl' expr:href='data:shareUrl + &quot;&amp;target=&quot; + data:platform.target' expr:onclick='data:onclick ? data:onclick : &quot;&quot;' expr:title='data:platform.shareMessage' target='_blank'>
  3947. <span class='share-button-link-text'>
  3948. <data:platform.shareMessage/>
  3949. </span>
  3950. </a>
  3951. </b:includable>
  3952. <b:includable id='post' var='post'>
  3953. <div class='post'>
  3954. <b:include data='post' name='postMeta'/>
  3955. <b:include data='post' name='postTitle'/>
  3956. <b:include name='headerByline'/>
  3957. <b:if cond='data:view.isSingleItem'>
  3958. <b:include data='post' name='postBody'/>
  3959. <b:else/>
  3960. <b:include data='post' name='postBodySnippet'/>
  3961. <b:include data='post' name='postJumpLink'/>
  3962. </b:if>
  3963. <b:include data='post' name='postFooter'/>
  3964. </div>
  3965. </b:includable>
  3966. <b:includable id='postAuthor'>
  3967. <span class='byline post-author vcard'>
  3968. <span class='post-author-label'>
  3969. <data:byline.label/>
  3970. </span>
  3971. <span class='fn'>
  3972. <b:if cond='data:post.author.profileUrl'>
  3973. <meta expr:content='data:post.author.profileUrl'/>
  3974. <a class='g-profile' expr:href='data:post.author.profileUrl' rel='author' title='author profile'>
  3975. <span><data:post.author.name/></span>
  3976. </a>
  3977. <b:else/>
  3978. <span><data:post.author.name/></span>
  3979. </b:if>
  3980. </span>
  3981. </span>
  3982. </b:includable>
  3983. <b:includable id='postBody' var='post'>
  3984. <!-- If metaDescription is empty, use the post body as the schema.org description too, for G+/FB snippeting. -->
  3985. <div class='post-body entry-content float-container' expr:id='&quot;post-body-&quot; + data:post.id'>
  3986. <data:post.body/>
  3987. </div>
  3988. </b:includable>
  3989. <b:includable id='postBodySnippet' var='post'>
  3990. <b:include data='post' name='postBody'/>
  3991. </b:includable>
  3992. <b:includable id='postCommentsAndAd' var='post'>
  3993. <article class='post-outer-container'>
  3994. <!-- Post title and body -->
  3995. <div class='post-outer'>
  3996. <b:include data='post' name='post'/>
  3997. </div>
  3998.  
  3999. <!-- Comments -->
  4000. <b:include cond='data:view.isSingleItem' data='post' name='commentPicker'/>
  4001.  
  4002. <!-- Show ad inside post container, after comments, if single item. -->
  4003. <b:include cond='data:view.isSingleItem and data:post.includeAd' data='post' name='inlineAd'/>
  4004. </article>
  4005.  
  4006. <!-- Show ad outside post container (between posts) for feed pages. -->
  4007. <b:include cond='data:view.isMultipleItems and data:post.includeAd' data='post' name='inlineAd'/>
  4008. </b:includable>
  4009. <b:includable id='postCommentsLink'>
  4010. <b:if cond='data:view.isMultipleItems'>
  4011. <span class='byline post-comment-link container'>
  4012. <b:include cond='data:post.commentSource != 1' name='commentsLink'/>
  4013. </span>
  4014. </b:if>
  4015. </b:includable>
  4016. <b:includable id='postFooter' var='post'>
  4017. <div class='post-footer'>
  4018. <b:include name='footerBylines'/>
  4019. <b:include data='post' name='postFooterAuthorProfile'/>
  4020. </div>
  4021. </b:includable>
  4022. <b:includable id='postFooterAuthorProfile' var='post'>
  4023. <b:if cond='data:post.author.aboutMe and data:view.isPost'>
  4024. <div class='author-profile'>
  4025. <b:if cond='data:post.author.authorPhoto.url'>
  4026. <img class='author-image' expr:src='data:post.author.authorPhoto.url' width='50px'/>
  4027. <div class='author-about'>
  4028. <b:include data='post' name='aboutPostAuthor'/>
  4029. </div>
  4030. <b:else/>
  4031. <b:include data='post' name='aboutPostAuthor'/>
  4032. </b:if>
  4033. </div>
  4034. </b:if>
  4035. </b:includable>
  4036. <b:includable id='postHeader' var='post'>
  4037. <b:if cond='data:view.isSingleItem'>
  4038. <b:if cond='data:view.isPost'>
  4039. <script type='application/ld+json'>{
  4040. &quot;@context&quot;: &quot;http://schema.org&quot;,
  4041. &quot;@type&quot;: &quot;BreadcrumbList&quot;,
  4042. &quot;itemListElement&quot;: [{
  4043. &quot;@type&quot;: &quot;ListItem&quot;,
  4044. &quot;position&quot;: 1,
  4045. &quot;name&quot;: &quot;<data:messages.home/>&quot;,
  4046. &quot;item&quot;: &quot;<data:blog.homepageUrl.canonical/>&quot;
  4047. },{
  4048. &quot;@type&quot;: &quot;ListItem&quot;,
  4049. &quot;position&quot;: 2,
  4050. &quot;name&quot;: &quot;<b:if cond='data:post.labels'><data:post.labels.first.name/></b:if>&quot;,
  4051. &quot;item&quot;: &quot;<data:post.labels.first.url.canonical/>&quot;
  4052. },{
  4053. &quot;@type&quot;: &quot;ListItem&quot;,
  4054. &quot;position&quot;: 3,
  4055. &quot;name&quot;: &quot;<data:post.title/>&quot;,
  4056. &quot;item&quot;: &quot;<data:post.url.canonical/>&quot;
  4057. }]
  4058. }
  4059. </script>
  4060. </b:if>
  4061. <b:if cond='data:view.isPage'>
  4062. <script type='application/ld+json'>{
  4063. &quot;@context&quot;: &quot;http://schema.org&quot;,
  4064. &quot;@type&quot;: &quot;BreadcrumbList&quot;,
  4065. &quot;itemListElement&quot;: [{
  4066. &quot;@type&quot;: &quot;ListItem&quot;,
  4067. &quot;position&quot;: 1,
  4068. &quot;name&quot;: &quot;<data:messages.home/>&quot;,
  4069. &quot;item&quot;: &quot;<data:blog.homepageUrl.canonical/>&quot;
  4070. },{
  4071. &quot;@type&quot;: &quot;ListItem&quot;,
  4072. &quot;position&quot;: 2,
  4073. &quot;name&quot;: &quot;<data:post.title/>&quot;,
  4074. &quot;item&quot;: &quot;<data:post.url.canonical/>&quot;
  4075. }]
  4076. }
  4077. </script>
  4078. </b:if>
  4079. </b:if>
  4080.  
  4081. <b:if cond='data:view.isSingleItem'>
  4082. <h1 class='post-title'>
  4083. <data:post.title/>
  4084. </h1>
  4085. <b:if cond='data:view.isPost and data:blog.metaDescription != &quot; &quot;'>
  4086. <p class='post-description'><data:blog.metaDescription/></p>
  4087. </b:if>
  4088. </b:if>
  4089.  
  4090. <b:if cond='!data:view.isPage'>
  4091. <div class='post-meta'>
  4092. <div class='meta-author-date'>
  4093. <b:if cond='data:post.author.authorPhoto.image'>
  4094. <svg height='57' viewBox='0 0 57 57' width='57'><path clip-rule='evenodd' d='M28.5 1.2A27.45 27.45 0 0 0 4.06 15.82L3 15.27A28.65 28.65 0 0 1 28.5 0C39.64 0 49.29 6.2 54 15.27l-1.06.55A27.45 27.45 0 0 0 28.5 1.2zM4.06 41.18A27.45 27.45 0 0 0 28.5 55.8a27.45 27.45 0 0 0 24.44-14.62l1.06.55A28.65 28.65 0 0 1 28.5 57 28.65 28.65 0 0 1 3 41.73l1.06-.55z' fill-rule='evenodd'/></svg>
  4095.  
  4096. <span class='author-avatar lazyload blur-up' expr:style='&quot;background-image: url(&quot; + resizeImage(data:post.author.authorPhoto.image, 40, &quot;1:1&quot;) + &quot;)&quot;'/>
  4097. </b:if>
  4098. <div class='post-meta-top'>
  4099. <span class='post-author'><strong><data:post.author.name/></strong></span>
  4100. <span class='post-time'><time class='published' expr:datetime='data:post.date.iso8601'><data:post.date/></time></span>
  4101. </div>
  4102. </div>
  4103.  
  4104. <div class='meta-button'>
  4105. <div class='share-toggle'>
  4106. <button aria-label='Social Share' class='button-icon' data-a11y-toggle='toggle-share' type='button'>
  4107. <svg height='25' width='25'><g fill-rule='evenodd'><path d='M15.6 5a.42.42 0 0 0 .17-.3.42.42 0 0 0-.12-.33l-2.8-2.79a.5.5 0 0 0-.7 0l-2.8 2.8a.4.4 0 0 0-.1.32c0 .12.07.23.16.3h.02a.45.45 0 0 0 .57-.04l2-2V10c0 .28.23.5.5.5s.5-.22.5-.5V2.93l2.02 2.02c.08.07.18.12.3.13.11.01.21-.02.3-.08v.01'/><path d='M18 7h-1.5a.5.5 0 0 0 0 1h1.6c.5 0 .9.4.9.9v10.2c0 .5-.4.9-.9.9H6.9a.9.9 0 0 1-.9-.9V8.9c0-.5.4-.9.9-.9h1.6a.5.5 0 0 0 .35-.15A.5.5 0 0 0 9 7.5a.5.5 0 0 0-.15-.35A.5.5 0 0 0 8.5 7H7a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h11a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2'/></g></svg>
  4108. </button>
  4109.  
  4110. <div aria-hidden='true' class='data-toggle' id='toggle-share'>
  4111. <b:if cond='data:allBylineItems.share'>
  4112. <ul class='share-links'>
  4113. <li class='facebook-f'><a class='facebook' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url.canonical' rel='nofollow noopener noreferer' target='_blank' title='Facebook'><b:include data='{ message: &quot;translateShareTo&quot; }' name='translate'/> <span>Facebook</span></a></li>
  4114. <li class='twitter'><a class='twitter' expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url.canonical + &quot;&amp;text=&quot; + data:post.title' rel='nofollow noopener noreferer' target='_blank' title='Twitter'><b:include data='{ message: &quot;translateShareTo&quot; }' name='translate'/> <span>Twitter</span></a></li>
  4115. <li class='reddit'><a class='reddit' expr:href='&quot;https://reddit.com/submit?url=&quot; + data:post.url.canonical + &quot;&amp;title=&quot; + data:post.title' rel='nofollow noopener noreferer' target='_blank'><b:include data='{ message: &quot;translateShareTo&quot; }' name='translate'/> <span>Reddit</span></a></li>
  4116. <li class='pinterest-p'><a class='pinterest' expr:href='&quot;https://www.pinterest.com/pin/create/button/?url=&quot; + data:post.url.canonical + &quot;&amp;media=&quot; + data:post.featuredImage + &quot;&amp;description=&quot; + data:post.title' rel='nofollow noopener noreferer' target='_blank' title='Pinterest'><span><b:include data='{ message: &quot;translateShareTo&quot; }' name='translate'/> Pinterest</span></a></li>
  4117. <b:if cond='data:blog.isMobileRequest'>
  4118. <li class='whatsapp whatsapp-mobile'><a class='whatsapp' expr:href='&quot;https://api.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url.canonical' rel='nofollow noopener noreferer' target='_blank'><span><b:include data='{ message: &quot;translateShareTo&quot; }' name='translate'/> WhatsApp</span></a></li>
  4119. <b:else/>
  4120. <li class='whatsapp whatsapp-desktop'><a class='whatsapp' expr:href='&quot;https://web.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url.canonical' rel='nofollow noopener noreferer' target='_blank' title='WhatsApp'><span><b:include data='{ message: &quot;translateShareTo&quot; }' name='translate'/> WhatsApp</span></a></li>
  4121. </b:if>
  4122. <b:if cond='data:blog.isMobileRequest'>
  4123. <li class='telegram'><a class='telegram' expr:href='&quot;https://telegram.me/share/url?url=&quot; + data:post.url.canonical + &quot;&amp;text=&quot; + data:post.title' rel='nofollow noopener noreferer' target='_blank' title='Telegram'><span><b:include data='{ message: &quot;translateShareTo&quot; }' name='translate'/> Telegram</span></a></li>
  4124. </b:if>
  4125. <li class='linkedin'><a class='linkedin' expr:href='&quot;https://www.linkedin.com/shareArticle?url=&quot; + data:post.url.canonical' rel='nofollow noopener noreferer' target='_blank' title='LinkedIn'><span><b:include data='{ message: &quot;translateShareTo&quot; }' name='translate'/> LinkedIn</span></a></li>
  4126. <li class='email'><a class='email' expr:href='&quot;mailto:?subject=&quot; + data:post.title + &quot;&amp;body=&quot; + data:post.url.canonical' rel='nofollow noopener noreferer' target='_blank' title='Email'><span><b:include data='{ message: &quot;translateShareTo&quot; }' name='translate'/> Email</span></a></li>
  4127. </ul>
  4128. </b:if>
  4129. </div>
  4130. </div>
  4131.  
  4132. <div class='post-comment'>
  4133. <svg fill='currentColor' height='25' width='25'><path d='M19.07 21.12a6.33 6.33 0 0 1-3.53-1.1 7.8 7.8 0 0 1-.7-.52c-.77.21-1.57.32-2.38.32-4.67 0-8.46-3.5-8.46-7.8C4 7.7 7.79 4.2 12.46 4.2c4.66 0 8.46 3.5 8.46 7.8 0 2.06-.85 3.99-2.4 5.45a6.28 6.28 0 0 0 1.14 2.59c.15.21.17.48.06.7a.69.69 0 0 1-.62.38h-.03zm0-1v.5l.03-.5h-.03zm-3.92-1.64l.21.2a6.09 6.09 0 0 0 3.24 1.54 7.14 7.14 0 0 1-.83-1.84 5.15 5.15 0 0 1-.16-.75 2.4 2.4 0 0 1-.02-.29v-.23l.18-.15a6.6 6.6 0 0 0 2.3-4.96c0-3.82-3.4-6.93-7.6-6.93-4.19 0-7.6 3.11-7.6 6.93 0 3.83 3.41 6.94 7.6 6.94.83 0 1.64-.12 2.41-.35l.28-.08z' fill-rule='evenodd'/></svg> <span class='post-comments-link'><data:post.numberOfComments/></span>
  4134. </div>
  4135. </div>
  4136. </div>
  4137. </b:if>
  4138. </b:includable>
  4139. <b:includable id='postJumpLink' var='post'>
  4140. <div class='jump-link flat-button'>
  4141. <a expr:href='data:post.url fragment &quot;more&quot;' expr:title='data:post.title'>
  4142. <b:eval expr='data:blog.jumpLinkMessage'/>
  4143. </a>
  4144. </div>
  4145. </b:includable>
  4146. <b:includable id='postLabels'>
  4147. <span class='byline post-labels'>
  4148. <span class='byline-label'><data:byline.label/></span>
  4149. <b:loop index='i' values='data:post.labels' var='label'>
  4150. <a expr:href='data:label.url' rel='tag'>
  4151. <data:label.name/>
  4152. </a>
  4153. </b:loop>
  4154. </span>
  4155. </b:includable>
  4156. <b:includable id='postLocation'>
  4157. <span class='byline post-location'>
  4158. <data:byline.label/>
  4159. <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
  4160. </span>
  4161. </b:includable>
  4162. <b:includable id='postMeta' var='post'>
  4163. <b:include data='post' name='postMetadataJSON'/>
  4164. </b:includable>
  4165. <b:includable id='postMetaBottom'>
  4166. <div class='post-meta-bottom'>
  4167. <span class='post-time'>
  4168. <time class='published' expr:datetime='data:post.date.iso8601'>
  4169. <data:post.date/>
  4170. </time>
  4171. </span>
  4172.  
  4173. <a class='post-comment' expr:href='data:post.commentsUrl' expr:title='data:messages.comments'>
  4174. <svg fill='currentColor' height='25' width='25'>
  4175. <path d='M19.07 21.12a6.33 6.33 0 0 1-3.53-1.1 7.8 7.8 0 0 1-.7-.52c-.77.21-1.57.32-2.38.32-4.67 0-8.46-3.5-8.46-7.8C4 7.7 7.79 4.2 12.46 4.2c4.66 0 8.46 3.5 8.46 7.8 0 2.06-.85 3.99-2.4 5.45a6.28 6.28 0 0 0 1.14 2.59c.15.21.17.48.06.7a.69.69 0 0 1-.62.38h-.03zm0-1v.5l.03-.5h-.03zm-3.92-1.64l.21.2a6.09 6.09 0 0 0 3.24 1.54 7.14 7.14 0 0 1-.83-1.84 5.15 5.15 0 0 1-.16-.75 2.4 2.4 0 0 1-.02-.29v-.23l.18-.15a6.6 6.6 0 0 1-2.3-4.96c0-3.82-3.4-6.93-7.6-6.93-4.19 0-7.6 3.11-7.6 6.93 0 3.83 3.41 6.94 7.6 6.94.83 0 1.64-.12 2.41-.35l.28-.08z' fill-rule='evenodd'/>
  4176. </svg>
  4177. </a>
  4178. </div>
  4179. </b:includable>
  4180. <b:includable id='postMetaTop'>
  4181. <div class='post-meta-top'>
  4182. <b:if cond='data:post.author.authorPhoto.image and !data:view.search.label'>
  4183. <span class='author-avatar lazyload blur-up' expr:style='&quot;background-image: url(&quot; + resizeImage(data:post.author.authorPhoto.image, 40, &quot;1:1&quot;) + &quot;)&quot;'/>
  4184. </b:if>
  4185.  
  4186. <div class='meta'>
  4187. <b:if cond='data:allBylineItems.author'>
  4188. <span class='post-author'><strong><data:post.author.name/></strong></span>
  4189. </b:if>
  4190.  
  4191. <span class='translate'><b:include data='{ message: &quot;translateIn&quot; }' name='translate'/></span>
  4192.  
  4193. <b:if cond='data:post.labels'>
  4194. <span class='post-category'><strong><data:post.labels.first.name/></strong></span>
  4195. </b:if>
  4196. </div>
  4197. </div>
  4198. </b:includable>
  4199. <b:includable id='postMetadataJSONImage'>
  4200. &quot;image&quot;: {
  4201. &quot;@type&quot;: &quot;ImageObject&quot;,
  4202. <b:if cond='data:post.featuredImage.isResizable'>
  4203. &quot;url&quot;: &quot;<b:eval expr='resizeImage(data:post.featuredImage, 1200, &quot;1200:630&quot;)'/>&quot;,
  4204. &quot;height&quot;: 630,
  4205. &quot;width&quot;: 1200
  4206. <b:else/>
  4207. &quot;url&quot;: &quot;https://blogger.googleusercontent.com/img/b/U2hvZWJveA/AVvXsEgfMvYAhAbdHksiBA24JKmb2Tav6K0GviwztID3Cq4VpV96HaJfy0viIu8z1SSw_G9n5FQHZWSRao61M3e58ImahqBtr7LiOUS6m_w59IvDYwjmMcbq3fKW4JSbacqkbxTo8B90dWp0Cese92xfLMPe_tg11g/w1200/&quot;,
  4208. &quot;height&quot;: 348,
  4209. &quot;width&quot;: 1200
  4210. </b:if>
  4211. },
  4212. </b:includable>
  4213. <b:includable id='postMetadataJSONPublisher'>
  4214. &quot;publisher&quot;: {
  4215. &quot;@type&quot;: &quot;Organization&quot;,
  4216. &quot;name&quot;: &quot;Blogger&quot;,
  4217. &quot;logo&quot;: {
  4218. &quot;@type&quot;: &quot;ImageObject&quot;,
  4219. &quot;url&quot;: &quot;https://blogger.googleusercontent.com/img/b/U2hvZWJveA/AVvXsEgfMvYAhAbdHksiBA24JKmb2Tav6K0GviwztID3Cq4VpV96HaJfy0viIu8z1SSw_G9n5FQHZWSRao61M3e58ImahqBtr7LiOUS6m_w59IvDYwjmMcbq3fKW4JSbacqkbxTo8B90dWp0Cese92xfLMPe_tg11g/h60/&quot;,
  4220. &quot;width&quot;: 206,
  4221. &quot;height&quot;: 60
  4222. }
  4223. },
  4224. </b:includable>
  4225. <b:includable id='postPagination'>
  4226. <div class='blog-pager container' id='blog-pager'>
  4227. <b:include cond='data:newerPageUrl' name='previousPageLink'/>
  4228. <b:include cond='data:olderPageUrl' name='nextPageLink'/>
  4229. <b:include cond='data:view.url != data:blog.homepageUrl' name='homePageLink'/>
  4230. </div>
  4231. </b:includable>
  4232. <b:includable id='postReactions'>
  4233. <!-- Reaction feature no longer available. The includable is retained for backwards-compatibility. -->
  4234. </b:includable>
  4235. <b:includable id='postShareButtons'>
  4236. <div class='byline post-share-buttons goog-inline-block'>
  4237. <b:with value='data:sharingId ?: ((data:widget.instanceId ?: &quot;sharing&quot;) + &quot;-&quot; + (data:regionName ?: &quot;byline&quot;) + &quot;-&quot; + data:post.id)' var='sharingId'>
  4238. <!-- Note: 'sharingButtons' includable is from the default Sharing widget markup. -->
  4239. <b:include data='{ sharingId: data:sharingId, originalUrl: data:post.url, platforms: data:this.sharing.platforms, shareUrl: data:post.shareUrl, shareTitle: data:post.title, }' name='sharingButtons'/>
  4240. </b:with>
  4241. </div>
  4242. </b:includable>
  4243. <b:includable id='postTimestamp'>
  4244. <span class='byline post-timestamp'>
  4245. <data:byline.label/>
  4246. <b:if cond='data:post.url'>
  4247. <meta expr:content='data:post.url.canonical'/>
  4248. <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
  4249. <time class='published' expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'>
  4250. <data:post.date/>
  4251. </time>
  4252. </a>
  4253. </b:if>
  4254. </span>
  4255. </b:includable>
  4256. <b:includable id='postTitle' var='post'>
  4257. <a expr:name='data:post.id'/>
  4258. <b:if cond='data:post.title != &quot;&quot;'>
  4259. <h3 class='post-title entry-title'>
  4260. <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
  4261. <a expr:href='data:post.link ?: data:post.url'><data:post.title/></a>
  4262. <b:else/>
  4263. <data:post.title/>
  4264. </b:if>
  4265. </h3>
  4266. </b:if>
  4267. </b:includable>
  4268. <b:includable id='previousPageLink'>
  4269. <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:messages.newerPosts'>
  4270. <data:messages.newerPosts/>
  4271. </a>
  4272. </b:includable>
  4273. <b:includable id='sharingButton'>
  4274. <span expr:aria-label='data:platform.shareMessage' expr:class='&quot;sharing-platform-button sharing-element-&quot; + data:platform.key' expr:data-href='data:shareUrl + &quot;&amp;target=&quot; + data:platform.target' expr:data-url='data:originalUrl' expr:title='data:platform.shareMessage' role='menuitem' tabindex='-1'>
  4275. <b:include name='sharingPlatformIcon'/>
  4276. <span class='platform-sharing-text'><data:platform.name/></span>
  4277. </span>
  4278. </b:includable>
  4279. <b:includable id='sharingButtonContent'>
  4280. <div class='flat-icon-button ripple'>
  4281. <b:include name='shareIcon'/>
  4282. </div>
  4283. </b:includable>
  4284. <b:includable id='sharingButtons'>
  4285. <div class='sharing' expr:aria-owns='&quot;sharing-popup-&quot; + data:sharingId' expr:data-title='data:shareTitle'>
  4286. <button class='sharing-button touch-icon-button' expr:aria-controls='&quot;sharing-popup-&quot; + data:sharingId' expr:aria-label='data:messages.share.escaped' expr:id='&quot;sharing-button-&quot; + data:sharingId' role='button'>
  4287. <b:include name='sharingButtonContent'/>
  4288. </button>
  4289. <b:include name='sharingButtonsMenu'/>
  4290. </div>
  4291. </b:includable>
  4292. <b:includable id='sharingButtonsMenu'>
  4293. <div class='share-buttons-container'>
  4294. <ul aria-hidden='true' class='share-buttons hidden' expr:aria-label='data:messages.share.escaped' expr:id='&quot;sharing-popup-&quot; + data:sharingId' role='menu'>
  4295. <b:loop values='(data:platforms ?: data:blog.sharing.platforms) filter (p =&gt; p.key not in {&quot;blogThis&quot;})' var='platform'>
  4296. <li>
  4297. <b:include name='sharingButton'/>
  4298. </li>
  4299. </b:loop>
  4300. <li aria-hidden='true' class='hidden'>
  4301. <b:include name='otherSharingButton'/>
  4302. </li>
  4303. </ul>
  4304. </div>
  4305. </b:includable>
  4306. <b:includable id='sharingPlatformIcon'>
  4307. <b:include data='{ iconClass: (&quot;touch-icon sharing-&quot; + data:platform.key) }' expr:name='data:platform.key + &quot;Icon&quot;'/>
  4308. </b:includable>
  4309. <b:includable id='threadedCommentForm' var='post'>
  4310. <div class='comment-form'>
  4311. <a name='comment-form'/>
  4312. <h4 id='comment-post-message'><data:messages.postAComment/></h4>
  4313. <b:if cond='data:this.messages.blogComment != &quot;&quot;'>
  4314. <p><data:this.messages.blogComment/></p>
  4315. </b:if>
  4316. <b:include data='post' name='commentFormIframeSrc'/>
  4317. <iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight ?: &quot;90px&quot;' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
  4318. <data:post.cmtfpIframe/>
  4319. <script type='text/javascript'>
  4320. BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);
  4321. </script>
  4322. </div>
  4323. </b:includable>
  4324. <b:includable id='threadedCommentJs' var='post'>
  4325. <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
  4326. <b:template-script inline='true' name='threaded_comments'/>
  4327. <script type='text/javascript'>
  4328. blogger.widgets.blog.initThreadedComments(
  4329. <data:post.commentJso/>,
  4330. <data:post.commentMsgs/>,
  4331. <data:post.commentConfig/>);
  4332. </script>
  4333. </b:includable>
  4334. <b:includable id='threadedComments' var='post'>
  4335. <section class='comments threaded' expr:data-embed='data:post.embedCommentForm' expr:data-num-comments='data:post.numberOfComments' id='comments'>
  4336. <a name='comments'/>
  4337.  
  4338. <b:include name='commentsTitle'/>
  4339.  
  4340. <div class='comments-content'>
  4341. <b:if cond='data:post.embedCommentForm'>
  4342. <b:include data='post' name='threadedCommentJs'/>
  4343. </b:if>
  4344. <div id='comment-holder'>
  4345. <data:post.commentHtml/>
  4346. </div>
  4347. </div>
  4348.  
  4349. <p class='comment-footer'>
  4350. <b:if cond='data:post.allowNewComments'>
  4351. <b:include data='post' name='threadedCommentForm'/>
  4352. <b:else/>
  4353. <data:post.noNewCommentsText/>
  4354. </b:if>
  4355. <b:if cond='data:post.showManageComments'>
  4356. <b:include data='post' name='manageComments'/>
  4357. </b:if>
  4358. </p>
  4359.  
  4360. <b:if cond='data:showCmtPopup'>
  4361. <div id='comment-popup'>
  4362. <iframe allowtransparency='allowtransparency' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
  4363. </iframe>
  4364. </div>
  4365. </b:if>
  4366. </section>
  4367. </b:includable>
  4368. <b:includable id='tooltipCss'>
  4369. <!-- LINT.IfChange -->
  4370. <style>
  4371. .post-body a.b-tooltip-container {
  4372. position: relative;
  4373. display: inline-block;
  4374. }
  4375.  
  4376. .post-body a.b-tooltip-container .b-tooltip {
  4377. display: block !important;
  4378. position: absolute;
  4379. top: 100%;
  4380. left: 50%;
  4381. transform: translate(-20%, 1px);
  4382. visibility: hidden;
  4383. opacity: 0;
  4384. z-index: 1;
  4385. transition: opacity 0.2s ease-in-out;
  4386. }
  4387.  
  4388. .post-body a.b-tooltip-container .b-tooltip iframe {
  4389. width: 200px;
  4390. height: 198px;
  4391. max-width: none;
  4392. border: none;
  4393. border-radius: 20px;
  4394. box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
  4395. }
  4396.  
  4397. @media (hover: hover) {
  4398. .post-body a.b-tooltip-container:hover .b-tooltip {
  4399. visibility: visible;
  4400. opacity: 1;
  4401. }
  4402. }
  4403. </style>
  4404. <!-- LINT.ThenChange(//depot/google3/java/com/google/blogger/b2/layouts/widgets/v2-style.css) -->
  4405. </b:includable>
  4406. </b:widget>
  4407. </b:section>
  4408. </section>
  4409.  
  4410. <b:if cond='data:view.isMultipleItems and !data:view.isError'>
  4411. <aside class='sidebar-wrapper'>
  4412. <b:section class='sidebar-section' id='sidebar-section' name='Sidebar'/>
  4413. </aside>
  4414. </b:if>
  4415. </section>
  4416. </main>
  4417.  
  4418. <footer class='footer-wrapper'>
  4419. <b:section class='footer-section' id='footer-section' maxwidgets='1' name='Footers' showaddelement='no'>
  4420. <b:widget id='LinkList100' locked='true' title='Menu' type='LinkList' version='2' visible='true'>
  4421. <b:includable id='main'>
  4422. <div class='footer-menu-widget'>
  4423. <b:loop values='data:links' var='link'><span class='menu-item'><a expr:href='data:link.target'><data:link.name/></a></span></b:loop>
  4424. </div>
  4425. </b:includable>
  4426. <b:includable id='content'>
  4427. <div class='widget-content'>
  4428. <ul>
  4429. <b:loop values='data:links' var='link'>
  4430. <li><a expr:href='data:link.target'><data:link.name/></a></li>
  4431. </b:loop>
  4432. </ul>
  4433. </div>
  4434. </b:includable>
  4435. </b:widget>
  4436. </b:section>
  4437. </footer>
  4438.  
  4439. <b:section class='hidden-section' deleted='true' id='hidden-section'>
  4440. <b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm' version='2' visible='true'>
  4441. <b:includable id='main'>
  4442. <b:include name='widget-title'/>
  4443. <b:include name='content'/>
  4444. </b:includable>
  4445. <b:includable id='content'>
  4446. <div class='contact-form-widget'>
  4447. <form name='contact-form'>
  4448. <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' expr:placeholder='data:contactFormNameMsg' name='name' required='' size='30' type='text' value=''/>
  4449. <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' expr:placeholder='data:contactFormEmailMsg' name='email' required='' size='30' type='text' value=''/>
  4450. <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' expr:placeholder='data:contactFormMessageMsg' name='email-message' required='' rows='5'/>
  4451.  
  4452. <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
  4453.  
  4454. <div style='text-align: center; max-width: 222px; width: 100%'>
  4455. <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
  4456. <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
  4457. </div>
  4458. </form>
  4459. </div>
  4460. </b:includable>
  4461. </b:widget>
  4462. </b:section>
  4463.  
  4464. <div class='backdrop' tabindex='-1'/>
  4465.  
  4466. <b:include name='globalJS'/>
  4467. </body>
  4468. </html>
Add Comment
Please, Sign In to add comment