Serba ada

Sabtu, 11 Maret 2017

BLOGSPOT TEMPLATES SEO RESPONSIVE MOBILE FRIENDLY

How to install Blogger Template Blogspot

Steps

Visit the Blogger website.
Sign in using your Google account.
Click the "Template" tab for the blog you want to edit from your list of blogs.
Click on “backup/Restore” button at the top right corner as shown.
Click “Choose File” to upload a template from your hard drive.
Browse for your compatible .XML template and click open.
Click “Upload”

free blogger templates 2017

Live Preview

Responsive: True CEK

Google Testing Tool Validator: True CEK

Mobile Friendly: True CEK

Fast loading, Ads ready, etc

COPY AND PASTE THE CODE BELOW ON YOUR BLOG ..

Select All

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html><html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='vegeclub.xml' b:templateVersion='1.0.0' expr:dir='data:blog.languageDirection' 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'>  <head>    <meta content='width=device-width, initial-scale=1' name='viewport'/>    <title><data:view.title.escaped/></title>    <b:include data='blog' name='all-head-content'/>     <b:skin version='1.0.0'><![CDATA[/*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}/*    <variable name="keycolor" description="Main color" type="color" default="#8abc0d" value="#f4ff81"/><variable name="startSide" description="Start side in blog language" type="automatic" default="left" hideEditor="true"  value="left"/><variable name="endSide" description="End side in blog language" type="automatic" default="right" hideEditor="true"  value="right"/> <variable name="generalFont" description="General fallback font" type="font" default="400 16px Ubuntu, sans-serif" hideEditor="true" value="400 16px Ubuntu, sans-serif"/><variable name="generalFontLato" description="General fallback font, Lato" type="font" default="400 16px Lato, sans-serif" hideEditor="true" value="400 16px Lato, sans-serif"/><variable name="blogTitleFont" description="Main blog title font" type="font" default="500 62px Ubuntu, sans-serif" hideEditor="true" value="500 62px Ubuntu, sans-serif"/><variable name="blogTitleFontLato" description="Main blog title font, Lato" type="font" default="700 62px Lato, sans-serif" hideEditor="true" value="700 62px Lato, sans-serif"/><variable name="blogTitleFontMerriweather" description="Main blog title font, Merriweather" type="font" default="700 62px Merriweather, Georgia, serif" hideEditor="true" value="700 62px Merriweather, Georgia, serif"/><variable name="blogCollapsedTitleFont" description="Collapsed blog title font" type="font" default="500 36px Ubuntu, sans-serif" hideEditor="true" value="500 36px Ubuntu, sans-serif"/><variable name="blogCollapsedTitleFontLato" description="Collapsed blog title font, Lato" type="font" default="700 36px Lato, sans-serif" hideEditor="true" value="700 36px Lato, sans-serif"/><variable name="blogCollapsedTitleFontMerriweather" description="Collapsed blog title font, Merriweather" type="font" default="700 36px Merriweather, Georgia, serif" hideEditor="true" value="700 36px Merriweather, Georgia, serif"/><variable name="blogDescriptionFont" description="Main blog description font" type="font" default="italic 300 14px Merriweather, Georgia, serif" hideEditor="true" value="italic 300 14px Merriweather, Georgia, serif"/><variable name="headerItemFont" description="Header item font" type="font" default="700 12px Ubuntu, sans-serif" hideEditor="true" value="700 12px Ubuntu, sans-serif"/><variable name="headerItemFontLato" description="Header item font, Lato" type="font" default="700 12px Lato, sans-serif" hideEditor="true" value="700 12px Lato, sans-serif"/><variable name="textButtonFont" description="Text button font" type="font" default="500 12px Ubuntu, sans-serif" hideEditor="true" value="500 12px Ubuntu, sans-serif"/><variable name="textButtonFontLato" description="Text button font, Lato" type="font" default="500 12px Lato, sans-serif" hideEditor="true" value="500 12px Lato, sans-serif"/><variable name="searchFont" description="Search font" type="font" default="400 16px Merriweather, Georgia, serif" hideEditor="true" value="400 16px Merriweather, Georgia, serif"/><variable name="searchPlaceholderFont" description="Search placeholder" type="font" default="italic 400 15px Merriweather, Georgia, serif" hideEditor="true" value="italic 400 15px Merriweather, Georgia, serif"/><variable name="sidebarTitleFont" description="Sidebar title font" type="font" default="500 16px Ubuntu, sans-serif" hideEditor="true" value="500 16px Ubuntu, sans-serif"/><variable name="sidebarTitleFontLato" description="Sidebar title font, Lato" type="font" default="500 16px Lato, sans-serif" hideEditor="true" value="500 16px Lato, sans-serif"/><variable name="sidebarTitleFontMerriweather" description="Sidebar title font, Merriweather" type="font" default="700 16px Merriweather, Georgia, sans-serif" hideEditor="true" value="700 16px Merriweather, Georgia, sans-serif"/><variable name="sidebarLinkFont" description="Sidebar link font" type="font" default="400 14px Merriweather, Georgia, serif" hideEditor="true" value="400 14px Merriweather, Georgia, serif"/><variable name="sidebarPostTitleFont" description="Sidebar post title font" type="font" default="500 14px Ubuntu, sans-serif" hideEditor="true" value="500 14px Ubuntu, sans-serif"/><variable name="sidebarPostTitleFontLato" description="Sidebar post title font, Lato" type="font" default="500 14px Lato, sans-serif" hideEditor="true" value="500 14px Lato, sans-serif"/><variable name="sidebarPostFont" description="Sidebar post font" type="font" default="italic 400 14px Merriweather, Georgia, serif" hideEditor="true" value="italic 400 14px Merriweather, Georgia, serif"/><variable name="titleFont" description="Title font" type="font" default="500 24px Ubuntu, sans-serif" hideEditor="true" value="500 24px Ubuntu, sans-serif"/><variable name="titleFontLato" description="Title font, Lato" type="font" default="900 24px Lato, sans-serif" hideEditor="true" value="900 24px Lato, sans-serif"/><variable name="titleFontMerriweather" description="Title font, Merriweather" type="font" default="900 24px Merriweather, Georgia, serif" hideEditor="true" value="900 24px Merriweather, Georgia, serif"/><variable name="bylineFont" description="Byline font" type="font" default="italic 400 12px Merriweather, Georgia, serif" hideEditor="true" value="italic 400 12px Merriweather, Georgia, serif"/><variable name="postFilterFont" description="Filter font" type="font" default="italic 400 18px Merriweather, Georgia, serif" hideEditor="true" value="italic 400 18px Merriweather, Georgia, serif"/><variable name="labelsFont" description="Labels font" type="font" default="500 10.5px Ubuntu, sans-serif" hideEditor="true" value="500 10.5px Ubuntu, sans-serif"/><variable name="labelsFontLato" description="Labels font, Lato" type="font" default="500 10px Lato, sans-serif" hideEditor="true" value="500 10px Lato, sans-serif"/><variable name="sharingFont" description="Sharing font" type="font" default="400 14px Ubuntu, sans-serif" hideEditor="true" value="400 14px Ubuntu, sans-serif"/><variable name="sharingFontLato" description="Sharing font, Lato" type="font" default="400 14px Lato, sans-serif" hideEditor="true" value="400 14px Lato, sans-serif"/><variable name="bodyFont" description="Post body font" type="font" default="400 16px Merriweather, Georgia, serif" hideEditor="true" value="400 16px Merriweather, Georgia, serif"/><variable name="bodyLineHeight" description="Line height of body text" type="length" default="32px" hideEditor="true" value="32px"/><variable name="bodyFontSmall" description="Post body font (small)" type="font" default="400 14px Merriweather, Georgia, serif" hideEditor="true" value="400 14px Merriweather, Georgia, serif"/><variable name="bodyLineHeightSmall" description="Line height of body text (small)" type="length" default="24px" hideEditor="true" value="24px"/> <variable name="white" description="White" type="color" default="#fff" hideEditor="true" value="#ffffff"/><variable name="black50" description="Black 50" type="color" default="#fafafa" hideEditor="true" value="#fafafa"/><variable name="lightGray" description="Light gray" type="color" default="#f7f7f7" hideEditor="true" value="#f7f7f7"/><variable name="lightishGray" description="Lightish gray" type="color" default="#efefef" hideEditor="true" value="#efefef"/><variable name="black600" description="Black 600" type="color" default="#757575" hideEditor="true" value="#757575"/><variable name="darkishGray" description="Darkish gray" type="color" default="#535353" hideEditor="true" value="#535353"/><variable name="black800" description="Black 800 " type="color" default="#424242" hideEditor="true" value="#424242"/><variable name="black900" description="Black 900" type="color" default="#212121" hideEditor="true" value="#212121"/><variable name="offBlack" description="Off black" type="color" default="#1f1f1f" hideEditor="true" value="#1f1f1f"/><variable name="black" description="Black" type="color" default="#000" hideEditor="true" value="#000000"/> <variable name="vegeGreen" description="Vege green keycolor" type="color" default="#729c0b" hideEditor="true" value="#729c0b"/><variable name="lime" description="Lime keycolor" type="color" default="#f4ff81" hideEditor="true" value="#f4ff81"/><variable name="blueGray" description="Blue-gray color" type="color" default="#607d8b" hideEditor="true" value="#607d8b"/><variable name="blueGrayDark" description="Blue-gray color (darkened)" type="color" default="#263238" hideEditor="true" value="#263238"/><variable name="beige" description="Beige-blue background color" type="color" default="#eed7c2" hideEditor="true" value="#eed7c2"/><variable name="beigeDark" description="Beige-blue accent color" type="color" default="#da7d5e" hideEditor="true" value="#da7d5e"/><variable name="beigeBlue" description="Beige-blue keycolor" type="color" default="#374561" hideEditor="true" value="#374561"/><variable name="aqua" description="Aqua keycolor" type="color" default="#18ffff" hideEditor="true" value="#18ffff"/><variable name="peach" description="Peach background" type="color" default="#f59b82" hideEditor="true" value="#f59b82"/><variable name="peachBright" description="Peach keycolor" type="color" default="#ee582e" hideEditor="true" value="#ee582e"/><variable name="peachDark" description="Peach background (darkened)" type="color" default="#e8937b" hideEditor="true" value="#e8937b"/> <variable name="transpDark03" description="Transparent background (3%)" type="color" default="rgba(0, 0, 0, 0.03)" hideEditor="true" value="rgba(0, 0, 0, 0.03)"/><variable name="transpDark10" description="Transparent background (10%)" type="color" default="rgba(0, 0, 0, 0.1)" hideEditor="true" value="rgba(0, 0, 0, 0.1)"/><variable name="transpDark30" description="Transparent background (30%)" type="color" default="rgba(0, 0, 0, 0.3)" hideEditor="true" value="rgba(0, 0, 0, 0.3)"/><variable name="transpLight" description="Transparent background (light)" type="color" default="rgba(255, 255, 255, 0.3)" hideEditor="true" value="rgba(255, 255, 255, 0.3)"/><variable name="transpBlack" description="Transparent background (black)" type="color" default="rgba(0, 0, 0, 0.87)" hideEditor="true" value="rgba(0, 0, 0, 0.87)"/> <group description="Body">  <variable name="body.background.color" description="Body background color" type="color" default="#f7f7f7"  value="#607d8b"/>  <variable name="body.background" description="Background" type="background" color="#f7f7f7" default="$(color) none repeat scroll top left"  value="$(color) none repeat scroll top left"/>  <variable name="body.text.font" description="Font" type="font" default="$(generalFont)"  value="400 16px Ubuntu, sans-serif"/>  <variable name="body.text.color" description="Color" type="color" default="#000000"  value="#ffffff"/>  <variable name="body.link.color" description="Link color" type="color" default="$(keycolor)"  value="#f4ff81"/>  <variable name="body.link.visited.color" description="Visited Link color" type="color" default="$(body.link.color)"  value="#f4ff81"/>  <variable name="body.link.hover.color" description="Link hover color" type="color" default="$(body.link.color)"  value="#f4ff81"/>  <variable name="body.button.font" description="Button font" type="font" default="$(textButtonFont)"  value="500 12px Ubuntu, sans-serif"/>  <variable name="body.button.color" description="Button color" type="color" default="$(keycolor)"  value="#f4ff81"/></Group> <group description="Blog title" selector="div.widget.Header">  <variable name="blog.title.font" description="Title font" type="font" default="$(blogTitleFont)"  value="700 62px Merriweather, Georgia, serif"/>  <variable name="blog.collapsed.title.font" description="Collapsed title font" type="font" default="$(blogCollapsedTitleFont)"  value="700 36px Merriweather, Georgia, serif"/>  <variable name="blog.collapsed.title.color" description="Collapsed title color" type="color" default="$(blog.title.color)"  value="#ffffff"/>  <variable name="blog.title.color" description="Title color" type="color" default="#1f1f1f"  value="#ffffff"/>  <variable name="header.background.color" description="Header bar color" type="color" default="#efefef"  value="#263238"/>  <variable name="header.icons.color" description="Header icons color" type="color" default="$(keycolor)"  value="#f4ff81"/>  <variable name="header.separator.color" description="Header separator color" type="color" default="rgba(0, 0, 0, 0.3)"  value="rgba(255, 255, 255, 0.3)"/>  <variable name="blog.description.font" description="Description font" type="font" default="$(blogDescriptionFont)"  value="italic 300 14px Merriweather, Georgia, serif"/>  <variable name="blog.description.color" description="Description color" type="color" default="#1f1f1f"  value="#ffffff"/></Group> <group description="Tabs" selector="div.widget.PageList">  <variable name="tabs.text.font" description="Font" type="font" default="$(headerItemFont)"  value="700 12px Ubuntu, sans-serif"/>  <variable name="tabs.text.color" description="Text color" type="color" default="$(keycolor)"  value="#f4ff81"/>  <variable name="tabs.selected.color" description="Selected color" type="color" default="$(tabs.text.color)"  value="#f4ff81"/>  <variable name="tabs.background.color" description="Tabs background color" type="color" default="#fff"  value="#263238"/></Group> <group description="Posts" selector="div.widget.Blog">  <variable name="posts.background.color" description="Post background color" type="color" default="#fff"  value="#263238"/>  <variable name="posts.title.color" description="Post title color" type="color" default="#212121"  value="#ffffff"/>  <variable name="posts.title.font" description="Post title font" type="font" default="$(titleFont)"  value="900 24px Merriweather, Georgia, serif"/>  <variable name="posts.byline.color" description="Post byline color" type="color" default="#757575"  value="#ffffff"/>  <variable name="posts.byline.font" description="Post byline font" type="font" default="$(bylineFont)"  value="italic 400 12px Merriweather, Georgia, serif"/>  <variable name="posts.text.font" description="Post text font" type="font" default="$(bodyFont)"  value="400 16px Merriweather, Georgia, serif"/>  <variable name="posts.text.color" description="Post text color" type="color" default="$(body.text.color)"  value="#ffffff"/>  <variable name="posts.text.lineHeight" description="Post text line height" min="10px" max="60px" type="length" default="$(bodyLineHeight)"  value="32px"/>  <variable name="posts.snippet.text.font" description="Post snippet text font" type="font" default="$(bodyFontSmall)"  value="400 14px Merriweather, Georgia, serif"/>  <variable name="posts.snippet.text.lineHeight" description="Post snippet text line height" min="10px" max="60px" type="length" default="$(bodyLineHeightSmall)"  value="24px"/>  <variable name="posts.link.color" description="Post link color" type="color" default="$(body.link.color)"  value="#f4ff81"/>  <variable name="posts.icons.color" description="Post icons color" type="color" default="$(posts.link.color)"  value="#f4ff81"/>  <variable name="posts.border.radius" description="Post border radius" type="length" default="0px" min="0px" max="32px"  value="0px"/>  <variable name="postFilter.background.color" description="Filter background color" type="color" default="$(keycolor)"  value="#f4ff81"/>  <variable name="postFilter.message.font" description="Filter text font" type="font" default="$(postFilterFont)"  value="italic 400 18px Merriweather, Georgia, serif"/>  <variable name="postFilter.message.color" description="Filter text color" type="color" default="$(posts.background.color)"  value="#263238"/>  <variable name="postFilter.message.link.color" description="Filter keyword color" type="color" default="$(postFilter.message.color)"  value="#263238"/>  <variable name="labels.font" description="Label font size" type="font" default="$(labelsFont)"  value="500 10.5px Ubuntu, sans-serif"/></Group> <group description="Sharing" selector=".sharing">  <variable name="sharing.background.color" description="Sharing background color" type="color" default="$(posts.background.color)"  value="#263238"/>  <variable name="sharing.text.font" description="Sharing text font" type="font" default="$(sharingFont)"  value="400 14px Ubuntu, sans-serif"/>  <variable name="sharing.text.color" description="Sharing text color" type="color" default="$(posts.text.color)"  value="#ffffff"/>  <variable name="sharing.icons.color" description="Sharing icons color" type="color" default="$(posts.icons.color)"  value="#f4ff81"/></Group> <group description="Blockquotes">  <variable name="blockquote.color" description="Blockquote color" type="color" default="#424242"  value="#424242"/>  <variable name="blockquote.font" description="Blockquote font" type="font" default="$(body.text.font)"  value="400 16px Ubuntu, sans-serif"/></Group> <group description="Pictures">  <variable name="picture.caption.text.color" description="Caption text color" type="color" default="#424242"  value="#eeeeee"/>  <variable name="picture.caption.font" description="Caption font" type="font" default="$(body.text.font)"  value="400 16px Ubuntu, sans-serif"/></Group> <group description="Sidebar" selector="div.sidebar_feed">  <variable name="sidebar.background.color" description="Background color" type="color" default="$(body.background.color)"  value="#607d8b"/>  <variable name="sidebar.separator.color" description="Separator color" type="color" default="rgba(0, 0, 0, 0.12)"  value="rgba(0, 0, 0, 0.12)"/>  <variable name="widget.title.font" description="Gadget title font" type="font" default="$(sidebarTitleFont)"  value="700 16px Merriweather, Georgia, sans-serif"/>  <variable name="widget.title.color" description="Gadget title color" type="color" default="$(body.text.color)"  value="#ffffff"/>  <variable name="sidebar.icons.color" description="Sidebar icons color" type="color" default="$(keycolor)"  value="#f4ff81"/>  <variable name="sidebar.link.font" description="Link font" type="font" default="$(sidebarLinkFont)"  value="400 14px Merriweather, Georgia, serif"/>  <variable name="sidebar.link.color" description="Link color" type="color" default="$(keycolor)"  value="#f4ff81"/>  <variable name="sidebar.posts.title.font" description="Post title font" type="font" default="$(sidebarPostTitleFont)"  value="500 14px Ubuntu, sans-serif"/>  <variable name="sidebar.posts.text.font" description="Post text font" type="font" default="$(sidebarPostFont)"  value="italic 400 14px Merriweather, Georgia, serif"/>  <variable name="sidebar.posts.text.color" description="Post text color" type="color" default="#535353"  value="#eeeeee"/></Group> <group description="Search bar" selector="div.search">  <variable name="search.text.color" description="Text color" type="color" default="$(offBlack)"  value="#ffffff"/>  <variable name="search.icon.color" description="Icon color" type="color" default="rgba(0, 0, 0, 0.38)"  value="#ffffff"/>  <variable name="search.font" description="Text font" type="font" default="$(searchFont)"  value="400 16px Merriweather, Georgia, serif"/>  <variable name="search.placeholder.font" description="Placeholder text font" type="font" default="$(searchPlaceholderFont)"  value="italic 400 15px Merriweather, Georgia, serif"/>  <variable name="search.placeholder.color" description="Placeholder text color" type="font" default="rgba(0, 0, 0, 0.38)"  value="rgba(255, 255, 255, 0.66)"/>  <variable name="search.background.color" description="Background color" type="color" default="rgba(0, 0, 0, 0.03)"  value="rgba(255, 255, 255, 0.3)"/></Group> <group description="Attribution" selector=".widget.Attribution">  <variable name="attribution.text.color" description="Attribution text color" type="color" default="$(body.text.color)"  value="#ffffff"/>  <variable name="attribution.link.color" description="Attribution link color" type="color" default="$(body.link.color)"  value="#f4ff81"/>  <variable name="attribution.icon.color" description="Attribution icon color" type="color" default="#757575" hideEditor="true"  value="#ffffff"/></Group> */ .skip-navigation {   background-color: #fff;   box-sizing: border-box;   color: #000;   display: block;   height: 0;   left: 0;   line-height: 50px;   overflow: hidden;   padding-top: 0;   position: fixed;   text-align: center;   top: 0;   -webkit-transition: box-shadow .3s , height .3s , padding-top .3s;   transition: box-shadow .3s , height .3s , padding-top .3s;   width: 100%;   z-index: 900; } .skip-navigation:focus {   box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14) , 0 1px 10px 0 rgba(0,0,0,0.12) , 0 2px 4px -1px rgba(0,0,0,0.2);   height: 50px; } #main {   outline: none; } body {   overflow-wrap: break-word;   word-break: break-word;   word-wrap: break-word; } .hidden {   display: none; } .invisible {   visibility: hidden; } .container:after, .float-container:after {   clear: both;   content: "";   display: table; } .clearboth {   clear: both; } .dim-overlay {   background-color: rgba(0,0,0,0.54);   height: 100vh;   left: 0;   position: fixed;   top: 0;   width: 100%; } #sharing-dim-overlay {   background-color: transparent; } .main-heading {   position: absolute;   clip: rect(1px,1px,1px,1px);   padding: 0;   border: 0;   height: 1px;   width: 1px;   overflow: hidden; } .loading-spinner-large {   -webkit-animation: mspin-rotate 1568.63ms infinite linear;           animation: mspin-rotate 1568.63ms infinite linear;   height: 48px;   overflow: hidden;   position: absolute;   width: 48px;   z-index: 200; } .loading-spinner-large>div {   -webkit-animation: mspin-revrot 5332ms infinite steps(4);           animation: mspin-revrot 5332ms infinite steps(4); } .loading-spinner-large>div>div {   -webkit-animation: mspin-singlecolor-large-film 1333ms infinite steps(81);           animation: mspin-singlecolor-large-film 1333ms infinite steps(81);   background-size: 100%;   height: 48px;   width: 3888px; } .mspin-black-large>div>div, .mspin-grey_54-large>div>div {   background-image: url(https://www.blogblog.com/indie/mspin_black_large.svg); } .mspin-white-large>div>div {   background-image: url(https://www.blogblog.com/indie/mspin_white_large.svg); } .mspin-grey_54-large {   opacity: .54; } @-webkit-keyframes mspin-singlecolor-large-film {   0% {     -webkit-transform: translateX(0);             transform: translateX(0);   }   to {     -webkit-transform: translateX(-3888px);             transform: translateX(-3888px);   } } @keyframes mspin-singlecolor-large-film {   0% {     -webkit-transform: translateX(0);             transform: translateX(0);   }   to {     -webkit-transform: translateX(-3888px);             transform: translateX(-3888px);   } } @-webkit-keyframes mspin-rotate {   0% {     -webkit-transform: rotate(0deg);             transform: rotate(0deg);   }   to {     -webkit-transform: rotate(360deg);             transform: rotate(360deg);   } } @keyframes mspin-rotate {   0% {     -webkit-transform: rotate(0deg);             transform: rotate(0deg);   }   to {     -webkit-transform: rotate(360deg);             transform: rotate(360deg);   } } @-webkit-keyframes mspin-revrot {   0% {     -webkit-transform: rotate(0deg);             transform: rotate(0deg);   }   to {     -webkit-transform: rotate(-360deg);             transform: rotate(-360deg);   } } @keyframes mspin-revrot {   0% {     -webkit-transform: rotate(0deg);             transform: rotate(0deg);   }   to {     -webkit-transform: rotate(-360deg);             transform: rotate(-360deg);   } } input::-ms-clear {   display: none; } .blogger-logo, .svg-icon-24.blogger-logo {   fill: #ff9800;   opacity: 1; } .widget.Attribution {   margin-top: 1em;   text-align: center; } .widget.Attribution .blogger img, .widget.Attribution .blogger svg {   vertical-align: bottom; } .widget.Attribution .blogger img {   margin-$endSide: .5em; } .widget.Attribution div {   line-height: 24px;   margin-top: .5em; } .widget.Attribution .image-attribution, .widget.Attribution .copyright {   font-size: .7em;   margin-top: 1.5em; } .item-control {   display: none; } .BLOG_mobile_video_class {   display: none; } .bg-photo {   background-attachment: scroll !important; } body .CSS_LIGHTBOX {   z-index: 900; } .extendable .show-more, .extendable .show-less {   border-color: $(body.link.color);   color: $(body.link.color);   margin-top: 8px; } .extendable .show-more.hidden, .extendable .show-less.hidden {   display: none; } .inline-ad {   display: none;   max-width: 100%;   overflow: hidden; } .adsbygoogle {   display: block; } #cookieChoiceInfo {   bottom: 0;   top: auto; } iframe.b-hbp-video {   border: none; } .post-body img {   max-width: 100%; } .post-body iframe {   max-width: 100%; } .post-body a[imageanchor="1"] {   display: inline-block; } .byline {   margin-$endSide: 1em; } .byline:last-child {   margin-$endSide: 0; } .paging-control-container {   margin-bottom: 16px; } .paging-control-container .paging-control {   display: inline-block; } .paging-control-container .paging-control, .paging-control-container .comment-range-text:after {   color: $(body.link.color); } .paging-control-container .paging-control, .paging-control-container .comment-range-text {   margin-$endSide: 8px; } .paging-control-container .comment-range-text:after, .paging-control-container .paging-control:after {   content: "\b7";   cursor: default;   pointer-events: none; } .paging-control-container .comment-range-text:last-child:after, .paging-control-container .paging-control:last-child:after {   content: none; } .paging-control-container .comment-range-text:after, .paging-control-container .paging-control:after {   padding-$startSide: 8px; } .byline.reactions iframe {   height: 20px; } .b-notification {   color: #000;   background-color: white;   border-bottom: solid 1px #000;   box-sizing: border-box;   padding: 16px 32px;   text-align: center; } .b-notification.visible {   -webkit-transition: margin-top .3s cubic-bezier(0.4,0.0,0.2,1);   transition: margin-top .3s cubic-bezier(0.4,0.0,0.2,1); } .b-notification.invisible {   position: absolute; } .b-notification-close {   position: absolute;   right: 8px;   top: 8px; } .no-posts-message {   line-height: 40px;   text-align: center; } .z {   left: 0; } @media screen and (max-width: 745px) {.z { left: 0; } body.item-view .post-body a[imageanchor="1"][style*="float: left;"], body.item-view .post-body a[imageanchor="1"][style*="float: right;"] {   float: none !important;   clear: none !important; } body.item-view .post-body a[imageanchor="1"] img {   display: block;   height: auto;   margin: 0 auto; } body.item-view .post-body a[imageanchor="1"][style*="float: left;"] img, body.item-view .post-body .separator[style*="text-align: left"] a[imageanchor="1"] img {   margin: 0 auto 0 0; } body.item-view .post-body a[imageanchor="1"][style*="float: right;"] img, body.item-view .post-body .separator[style*="text-align: right"] a[imageanchor="1"] img {   margin: 0 0 0 auto; } .post-body a[imageanchor] {   display: block; } body.item-view .post-body a[imageanchor="1"] {   margin-left: 0 !important;   margin-right: 0 !important; } body.item-view .post-body a[imageanchor="1"]+a[imageanchor="1"] {   margin-top: 16px; } .z {   left: 0; } } .z { left: 0; } #comments {   border-top: 1px dashed rgba(0,0,0,0.54);   margin-top: 20px;   padding: 20px; } #comments .comment-thread ol {   margin: 0;   padding-left: 0; } #comments .comment-thread ol {   padding-$startSide: 0; } #comments .comment-thread .comment-replies, #comments .comment .comment-replybox-single {   margin-left: 60px; } #comments .comment-thread .thread-count {   display: none; } #comments .comment {   list-style-type: none;   padding: 0 0 30px;   position: relative; } #comments .comment .comment {   padding-bottom: 8px; } .comment .avatar-image-container {   position: absolute; } .comment .avatar-image-container img {   border-radius: 50%; } .avatar-image-container svg, .comment .avatar-image-container .avatar-icon {   border-radius: 50%;   border: solid 1px $(posts.icons.color);   box-sizing: border-box;   fill: $(posts.icons.color);   height: 35px;   margin: 0;   padding: 7px;   width: 35px; } .comment .comment-block {   margin-top: 10px;   padding-bottom: 0; } .comment .comment-block {   margin-$startSide: 60px; } #comments .comment-author-header-wrapper {   margin-left: 40px; } #comments .comment .thread-expanded .comment-block {   padding-bottom: 20px; } #comments .comment .comment-header .user, #comments .comment .comment-header .user a {   color: $(posts.title.color);   font-style: normal;   font-weight: bold; } #comments .comment .comment-actions {   background: transparent;   border: none;   box-shadow: none;   color: $(body.link.color);   cursor: pointer;   font-size: 14px;   font-weight: bold;   outline: none;   text-decoration: none;   text-transform: uppercase;   width: auto;   bottom: 0;   margin-bottom: 15px;   position: absolute; } #comments .comment .comment-actions>* {   margin-right: 8px; } #comments .comment .comment-header .datetime {   bottom: 0;   color: rgba(0,0,0,0.54);   display: inline-block;   font-size: 13px;   font-style: italic; } #comments .comment .comment-header .datetime {   margin-$startSide: 8px; } #comments .comment .comment-header .datetime a, #comments .comment .comment-footer .comment-timestamp a {   color: rgba(0,0,0,0.54); } .comment .comment-body, #comments .comment .comment-content {   margin-top: 12px;   word-break: break-word; } .comment-body {   margin-bottom: 12px; } #comments.embed[data-num-comments="0"] {   border: none;   margin-top: 0;   padding-top: 0; } #comments.embed[data-num-comments="0"] #comment-post-message, #comments.embed[data-num-comments="0"] div.comment-form>p, #comments.embed[data-num-comments="0"] p.comment-footer {   display: none; } #comment-editor-src {   display: none; } .comments .comments-content .loadmore.loaded {   max-height: 0;   opacity: 0;   overflow: hidden; } .extendable .remaining-items {   height: 0;   overflow: hidden;   -webkit-transition: height .3s cubic-bezier(0.4,0.0,0.2,1);   transition: height .3s cubic-bezier(0.4,0.0,0.2,1); } .extendable .remaining-items.expanded {   height: auto; } .svg-icon-24, .svg-icon-24-button {   cursor: pointer;   height: 24px;   width: 24px;   min-width: 24px; } .touch-icon {   margin: -12px;   padding: 12px; } html[dir=rtl] .rtl-reversible-icon {   -webkit-transform: scaleX(-1);       -ms-transform: scaleX(-1);           transform: scaleX(-1); } svg:not(:root).touch-icon {   overflow: visible; } .touch-icon:focus, .touch-icon:active {   background-color: rgba(153,153,153,.4);   border-radius: 50%; } .touch-icon-button, .svg-icon-24-button {   background: transparent;   border: none;   margin: 0;   outline: none;   padding: 0; } .touch-icon-button .touch-icon:focus, .touch-icon-button .touch-icon:active {   background-color: transparent; } .touch-icon-button:focus .touch-icon, .touch-icon-button:active .touch-icon {   background-color: rgba(153,153,153,.4);   border-radius: 50%; } .widget.Profile .default-avatar-wrapper .avatar-icon {   border-radius: 50%;   border: solid 1px $(sidebar.icons.color);   box-sizing: border-box;   fill: $(sidebar.icons.color);   margin: 0; } .widget.Profile .individual .profile-img, .widget.Profile .individual .avatar-icon {   height: 90px;   width: 90px; } .widget.Profile .team .profile-img, .widget.Profile .team .avatar-icon, .widget.Profile .team .default-avatar-wrapper {   height: 40px;   width: 40px; } .widget.Profile .individual .default-avatar-wrapper .avatar-icon {   padding: 25px; } .widget.Profile .team .default-avatar-wrapper .avatar-icon {   padding: 8px; } .snippet-container {   margin: 0;   position: relative;   overflow: hidden; } .snippet-fade {   bottom: 0;   box-sizing: border-box;   position: absolute;   width: 96px; } .snippet-fade {   $endSide: 0; } .snippet-fade:after {   content: '\2026'; } .snippet-fade:after {   float: $endSide; } .centered-top-container.sticky {   left: 0;   position: fixed;   right: 0;   top: 0;   width: auto;   z-index: 8;   -webkit-transition-property: opacity , -webkit-transform;   transition-property: opacity , -webkit-transform;   transition-property: transform , opacity;   transition-property: transform , opacity , -webkit-transform;   -webkit-transition-duration: .2s;           transition-duration: .2s;   -webkit-transition-timing-function: cubic-bezier(0.4,0.0,0.2,1);           transition-timing-function: cubic-bezier(0.4,0.0,0.2,1); } .centered-top-placeholder {   display: none; } .collapsed-header .centered-top-placeholder {   display: block; } .centered-top-container .Header .replaced h1, .centered-top-placeholder .Header .replaced h1 {   display: none; } .centered-top-container.sticky .Header .replaced h1 {   display: block; } .centered-top-container.sticky .Header .header-widget {   background: none; } .centered-top-container.sticky .Header .header-image-wrapper {   display: none; } .centered-top-container img, .centered-top-placeholder img {   max-width: 100%; } .collapsible {   -webkit-transition: height .3s cubic-bezier(0.4,0.0,0.2,1);   transition: height .3s cubic-bezier(0.4,0.0,0.2,1); } .collapsible, .collapsible>summary {   display: block;   overflow: hidden; } .collapsible>:not(summary) {   display: none; } .collapsible[open]>:not(summary) {   display: block; } .collapsible:focus, .collapsible>summary:focus {   outline: none; } .collapsible>summary {   cursor: pointer;   display: block;   padding: 0; } .collapsible:focus>summary, .collapsible>summary:focus {   background-color: transparent; } .collapsible>summary::-webkit-details-marker {   display: none; } .collapsible-title {   -webkit-box-align: center;   -webkit-align-items: center;       -ms-flex-align: center;           align-items: center;   display: -webkit-box;   display: -webkit-flex;   display: -ms-flexbox;   display: flex; } .collapsible-title .title {   -webkit-box-flex: 1;   -webkit-flex: 1 1 auto;       -ms-flex: 1 1 auto;           flex: 1 1 auto;   -webkit-box-ordinal-group: 1;   -webkit-order: 0;       -ms-flex-order: 0;           order: 0;   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap; } .collapsible-title .chevron-down, .collapsible[open] .collapsible-title .chevron-up {   display: block; } .collapsible-title .chevron-up, .collapsible[open] .collapsible-title .chevron-down {   display: none; } .flat-button {   cursor: pointer;   display: inline-block;   font-weight: bold;   text-transform: uppercase;   border-radius: 2px;   padding: 8px;   margin: -8px; } .flat-icon-button {   background: transparent;   border: none;   margin: 0;   outline: none;   padding: 0;   margin: -12px;   padding: 12px;   cursor: pointer;   box-sizing: content-box;   display: inline-block;   line-height: 0; } .flat-icon-button, .flat-icon-button .splash-wrapper {   border-radius: 50%; } .flat-icon-button .splash.animate {   -webkit-animation-duration: .3s;           animation-duration: .3s; } body#layout .bg-photo-overlay, body#layout .bg-photo {   display: none; } body#layout .page_body {   padding: 0;   position: relative;   top: 0; } body#layout .page {   display: inline-block;   left: inherit;   position: relative;   vertical-align: top;   width: 540px; } body#layout .centered {   max-width: 954px; } body#layout .navigation {   display: none; } body#layout .sidebar-container {   display: inline-block;   width: 40%; } body#layout .hamburger-menu, body#layout .search {   display: none; } .overflowable-container {   max-height: $(tabs.text.font.size + 2 * 16px);   overflow: hidden;   position: relative; } .overflow-button {   cursor: pointer; } #overflowable-dim-overlay {   background: transparent; } .overflow-popup {   box-shadow: 0 2px 2px 0 rgba(0,0,0,.14) , 0 3px 1px -2px rgba(0,0,0,.2) , 0 1px 5px 0 rgba(0,0,0,.12);   background-color: $(tabs.background.color);   left: 0;   max-width: calc(100% - 32px);   position: absolute;   top: 0;   visibility: hidden;   z-index: 101; } .overflow-popup ul {   list-style: none; } .overflow-popup li, .overflow-popup .tabs li {   display: block;   height: auto; } .overflow-popup .tabs li {   padding-left: 0;   padding-right: 0; } .overflow-button.hidden, .overflow-popup li.hidden, .overflow-popup .tabs li.hidden {   display: none; } .widget.Sharing .sharing-button {   display: none; } .widget.Sharing .sharing-buttons li {   padding: 0; } .widget.Sharing .sharing-buttons li span {   display: none; } .post-share-buttons {   position: relative; } .share-buttons .svg-icon-24, .centered-bottom .share-buttons .svg-icon-24 {   fill: $(sharing.icons.color); } .sharing-open.touch-icon-button:focus .touch-icon, .sharing-open.touch-icon-button:active .touch-icon {   background-color: transparent; } .share-buttons {   background-color: $(sharing.background.color);   border-radius: 2px;   box-shadow: 0 2px 2px 0 rgba(0,0,0,.14) , 0 3px 1px -2px rgba(0,0,0,.2) , 0 1px 5px 0 rgba(0,0,0,.12);   color: $(sharing.text.color);   list-style: none;   margin: 0;   padding: 8px 0;   position: absolute;   top: -11px;   min-width: 200px;   z-index: 101; } .share-buttons.hidden {   display: none; } .sharing-button {   background: transparent;   border: none;   margin: 0;   outline: none;   padding: 0;   cursor: pointer; } .share-buttons li {   margin: 0;   height: 48px; } .share-buttons li:last-child {   margin-bottom: 0; } .share-buttons li .sharing-platform-button {   box-sizing: border-box;   cursor: pointer;   display: block;   height: 100%;   margin-bottom: 0;   padding: 0 16px;   position: relative;   width: 100%; } .share-buttons li .sharing-platform-button:focus, .share-buttons li .sharing-platform-button:hover {   background-color: rgba(128,128,128,0.1);   outline: none; } .share-buttons li svg[class^="sharing-"], .share-buttons li svg[class*=" sharing-"] {   position: absolute;   top: 10px; } .share-buttons li span.sharing-platform-button, .share-buttons li span.sharing-platform-button {   position: relative;   top: 0; } .share-buttons li .platform-sharing-text {   display: block;   font-size: 16px;   line-height: 48px;   white-space: nowrap; } .share-buttons li .platform-sharing-text {   margin-$startSide: 56px; } .sidebar-container {   background-color: #f7f7f7;   max-width: 280px;   overflow-y: auto;   -webkit-transition-property: -webkit-transform;   transition-property: -webkit-transform;   transition-property: transform;   transition-property: transform, -webkit-transform;   -webkit-transition-duration: .3s;           transition-duration: .3s;   -webkit-transition-timing-function: cubic-bezier(0.0,0.0,0.2,1);           transition-timing-function: cubic-bezier(0.0,0.0,0.2,1);   width: 280px;   z-index: 101;   -webkit-overflow-scrolling: touch; } .sidebar-container .navigation {   line-height: 0;   padding: 20px; } .sidebar-container .widget {   background: none;   margin: 0 16px;   padding: 1em 0; } .sidebar-container .widget .title {   color: $(widget.title.color);   margin: 0; } .sidebar-container .widget ul {   list-style: none;   margin: 0;   padding: 0; } .sidebar-container .widget ul ul {   margin-$startSide: 1em; } .sidebar-container .widget ul li {   font-size: 16px;   line-height: normal; } .BlogArchive li {   margin: 16px 0; } .BlogArchive li:last-child {   margin-bottom: 0; } .Label .label-count:before, .BlogArchive .post-count:before {   content: '('; } .Label .label-count:after, .BlogArchive .post-count:after {   content: ')'; } .Label .label-count, .BlogArchive .post-count {   float: $endSide;   margin-$startSide: .25em; } .Label li a {   display: inline-block; } .widget.Translate .skiptranslate>div {   display: block !important; } .widget.Profile .profile-link {   background-image: none !important;   display: -webkit-box;   display: -webkit-flex;   display: -ms-flexbox;   display: flex; } .widget.Profile .team-member .profile-img, .widget.Profile .team-member .default-avatar-wrapper {   -webkit-box-flex: 0;   -webkit-flex: 0 0 auto;       -ms-flex: 0 0 auto;           flex: 0 0 auto; } .widget.Profile .team-member .profile-img, .widget.Profile .team-member .default-avatar-wrapper {   margin-$endSide: 1em; } .widget.Profile .individual .profile-link {   -webkit-box-orient: vertical;   -webkit-box-direction: normal;   -webkit-flex-direction: column;       -ms-flex-direction: column;           flex-direction: column; } .widget.Profile .team .profile-link .profile-name {   -webkit-align-self: center;       -ms-flex-item-align: center;               -ms-grid-row-align: center;           align-self: center;   display: block;   -webkit-box-flex: 1;   -webkit-flex: 1 1 auto;       -ms-flex: 1 1 auto;           flex: 1 1 auto; } .sidebar-container .sidebar-back {   cursor: pointer; } .sidebar-container .widget+.widget {   border-top: 1px solid $(sidebar.separator.color); } .dim-overlay {   background-color: rgba(0,0,0,0.54);   z-index: 100; } body.sidebar-visible {   overflow-y: hidden; } .z {   left: 0; } @media screen and (max-width: 745px) { .z { left: 0; } .sidebar-container {   bottom: 0;   position: fixed;   top: 0; } .sidebar-container {   left: auto;   right: 0; } .sidebar-container.sidebar-invisible {   -webkit-transition-timing-function: cubic-bezier(0.4,0.0,0.6,1);           transition-timing-function: cubic-bezier(0.4,0.0,0.6,1); } .sidebar-container.sidebar-invisible {   -webkit-transform: translateX(100%);       -ms-transform: translateX(100%);           transform: translateX(100%); } .z {   left: 0; } } .z { left: 0; } .dialog {   box-shadow: 0 2px 2px 0 rgba(0,0,0,.14) , 0 3px 1px -2px rgba(0,0,0,.2) , 0 1px 5px 0 rgba(0,0,0,.12);   background: $(posts.background.color);   box-sizing: border-box;   padding: 30px;   position: fixed;   text-align: center;   width: calc(100% - 24px);   z-index: 101; } .dialog input[type=text], .dialog input[type=email] {   background-color: transparent;   border-bottom: solid 1px rgba($(body.text.color.red),$(body.text.color.green),$(body.text.color.blue),0.12);   border-left: none;   border-right: none;   border-top: none;   color: $(posts.text.color);   display: block;   font-family: $(body.text.font.family);   font-size: 16px;   line-height: 24px;   margin: auto;   padding-bottom: 7px;   outline: none;   text-align: center;   width: 100%; } .dialog input[type=text]::-webkit-input-placeholder, .dialog input[type=email]::-webkit-input-placeholder {   color: rgba($(posts.text.color.red),$(posts.text.color.green),$(posts.text.color.blue),0.5); } .dialog input[type=text]::-moz-placeholder, .dialog input[type=email]::-moz-placeholder {   color: rgba($(posts.text.color.red),$(posts.text.color.green),$(posts.text.color.blue),0.5); } .dialog input[type=text]:-ms-input-placeholder, .dialog input[type=email]:-ms-input-placeholder {   color: rgba($(posts.text.color.red),$(posts.text.color.green),$(posts.text.color.blue),0.5); } .dialog input[type=text]::placeholder, .dialog input[type=email]::placeholder {   color: rgba($(posts.text.color.red),$(posts.text.color.green),$(posts.text.color.blue),0.5); } .dialog input[type=text]:focus, .dialog input[type=email]:focus {   border-bottom: solid 2px $(posts.link.color);   padding-bottom: 6px; } .dialog input[type=submit] {   font-family: $(body.text.font.family); } .dialog input.no-cursor {   color: transparent;   text-shadow: 0 0 0 $(body.text.color); } .dialog input.no-cursor:focus {   outline: none; } .subscribe-popup {   max-width: 364px; } .subscribe-popup h3 {   color: $(posts.title.color);   font-size: 1.8em;   margin-top: 0; } .subscribe-popup div.widget.FollowByEmail h3 {   display: none; } .subscribe-popup div.widget.FollowByEmail .follow-by-email-submit {   background: transparent;   border: none;   box-shadow: none;   color: $(body.link.color);   cursor: pointer;   font-size: 14px;   font-weight: bold;   outline: none;   text-decoration: none;   text-transform: uppercase;   width: auto;   color: $(posts.link.color);   display: inline-block;   margin: 0 auto;   margin-top: 24px;   width: auto;   white-space: normal; } .subscribe-popup div.widget.FollowByEmail .follow-by-email-submit:disabled {   cursor: default;   opacity: .3; } @media (max-width:800px) {   .blog-name div.widget.Subscribe {     margin-bottom: 16px;   }   body.item-view .blog-name div.widget.Subscribe {     margin: 8px auto 16px;     width: 100%;   } } .sidebar-container .svg-icon-24 {   fill: $(sidebar.icons.color); } .centered-top .svg-icon-24 {   fill: $(header.icons.color); } .centered-bottom a .svg-icon-24, .centered-bottom button .svg-icon-24, .centered-bottom .touch-icon.svg-icon-24 {   fill: $(body.link.color); } .post-wrapper a .svg-icon-24, .post-wrapper button .svg-icon-24, .post-wrapper .touch-icon.svg-icon-24 {   fill: $(posts.icons.color); } .share-buttons .svg-icon-24, .centered-bottom .share-buttons .svg-icon-24 {   fill: $(sharing.icons.color); } .hamburger-menu.svg-icon-24 {   fill: $(body.link.color); } body#layout .page_body {   padding: 0;   position: relative;   top: 0; } body#layout .page {   display: inline-block;   left: inherit;   position: relative;   vertical-align: top;   width: 540px; } body {   background-color: $(body.background.color);   color: $(body.text.color);   font: $(body.text.font);   margin: 0;   min-height: 100vh; } h3 {   color: $(body.text.color); } h3.title {   color: $(body.text.color); } .post-wrapper .post-title, .post-wrapper .post-title a, .post-wrapper .post-title a:visited, .post-wrapper .post-title a:hover {   color: $(posts.title.color); } a {   color: $(body.link.color);   font-style: normal;   text-decoration: none; } a:visited {   color: $(body.link.visited.color); } a:hover {   color: $(body.link.hover.color); } blockquote {   color: $(blockquote.color);   font: $(blockquote.font);   font-size: x-large;   font-style: italic;   font-weight: 300;   text-align: center; } .dim-overlay {   z-index: 100; } .bg-photo-container, .bg-photo {   height: 464px;   width: 100%; } .bg-photo-container {   overflow: hidden; } .bg-photo {   background: $(body.background);   background-position: center;   background-size: cover;   z-index: -1; } .centered {   margin: 0 auto;   position: relative; } .centered .main {   padding-bottom: 1em;   width: 100%; } .page {   box-sizing: border-box;   display: -webkit-box;   display: -webkit-flex;   display: -ms-flexbox;   display: flex;   -webkit-box-orient: vertical;   -webkit-box-direction: normal;   -webkit-flex-direction: column;       -ms-flex-direction: column;           flex-direction: column;   min-height: 100vh;   padding-bottom: 1em; } .page>* {   -webkit-box-flex: 0;   -webkit-flex: 0 0 auto;       -ms-flex: 0 0 auto;           flex: 0 0 auto; } .page>#footer {   margin-top: auto; } .centered-bottom:after {   clear: both;   content: "";   display: table; } html[dir=ltr] .centered .main-container, html[dir=ltr] .centered .main {   float: left; } html[dir=rtl] .centered .main-container, html[dir=rtl] .centered .main {   float: right; } body.item-view .centered .main-container {   max-width: 890px;   margin-$endSide: 15px;   width: 100%; } body.item-view .centered {   width: 100%; } body.item-view .centered-bottom {   max-width: 1185px;   width: 100%; } body.item-view .page_body.vertical-ads .centered-bottom {   max-width: 1328px;   width: 100%; } .widget .title {   font-size: $(body.text.font.size * 1.125);   line-height: $(body.text.font.size * 1.75);   margin: $(body.text.font.size * 1.125) 0; } .extendable .show-more, .extendable .show-less {   color: $(body.button.color);   font: $(body.button.font);   cursor: pointer;   text-transform: uppercase;   margin: 0 -16px;   padding: 16px; } .sidebar-container .widget.Profile {   padding: 16px; } .widget.Profile {   font: $(body.text.font); } .widget.Profile h2 {   display: none; } .widget.Profile .title {   margin: 16px 32px; } .widget.Profile .profile-img {   border-radius: 50%; } .widget.Profile .individual {   display: -webkit-box;   display: -webkit-flex;   display: -ms-flexbox;   display: flex; } .widget.Profile .individual .profile-info {   -webkit-align-self: center;       -ms-flex-item-align: center;               -ms-grid-row-align: center;           align-self: center;   margin-$startSide: 16px; } .widget.Profile .profile-datablock {   margin-top: 0;   margin-bottom: .75em; } .widget.Profile .profile-link {   background-image: none !important;   font-family: inherit;   overflow: hidden;   max-width: 100%; } .widget.Profile .individual .profile-link {   margin: 0 -10px;   padding: 0 10px;   display: block; } .widget.Profile .individual .profile-data a.profile-link.g-profile, .widget.Profile .team a.profile-link.g-profile .profile-name {   font: $(widget.title.font);   color: $(widget.title.color);   margin-bottom: .75em; } .widget.Profile .individual .profile-data a.profile-link.g-profile {   line-height: 1.25; } .widget.Profile .individual>a:first-child {   -webkit-flex-shrink: 0;       -ms-flex-negative: 0;           flex-shrink: 0; } .widget.Profile .profile-textblock {   display: none; } .widget.Profile dd {   margin: 0; } .widget.Profile ul {   list-style: none;   padding: 0; } .widget.Profile ul li {   margin: 10px 0 30px; } .widget.Profile .team .extendable, .widget.Profile .team .extendable .first-items, .widget.Profile .team .extendable .remaining-items {   margin: 0;   padding: 0;   max-width: 100%; } .widget.Profile .team-member .profile-name-container {   -webkit-box-flex: 0;   -webkit-flex: 0 1 auto;       -ms-flex: 0 1 auto;           flex: 0 1 auto; } .widget.Profile .team .extendable .show-more, .widget.Profile .team .extendable .show-less {   position: relative; } html[dir=ltr] .widget.Profile .team .extendable .show-more, html[dir=ltr] .widget.Profile .team .extendable .show-less {   left: 56px; } html[dir=rtl] .widget.Profile .team .extendable .show-more, html[dir=rtl] .widget.Profile .team .extendable .show-less {   right: 56px; } .post-wrapper a, #comments a {   color: $(posts.link.color); } div.widget.Blog .blog-posts .post-outer {   border: none; } div.widget.Blog .post-outer {   padding-bottom: 0; } .post .thumb {   float: left;   height: 20%;   width: 20%; } .no-posts-message {   margin: 10px 0; } .blog-pager {   text-align: center; } .post-title {   margin: 0; } .post-title, .post-title a {   font: $(posts.title.font); } .post-body {   color: $(posts.text.color);   display: block;   font: $(posts.text.font);   line-height: $(posts.text.lineHeight);   margin: 0; } .post-snippet {   color: $(posts.text.color);   font: $(posts.snippet.text.font);   line-height: $(posts.snippet.text.lineHeight);   margin: 8px 0;   max-height: $(posts.snippet.text.lineHeight * 3); } .post-snippet .snippet-fade {   background: -webkit-linear-gradient($startSide,$(posts.background.color) 0%,$(posts.background.color) 20%,$(posts.background.color.transparent) 100%);   background: linear-gradient(to $startSide,$(posts.background.color) 0%,$(posts.background.color) 20%,$(posts.background.color.transparent) 100%);   color: $(posts.text.color);   bottom: 0;   position: absolute; } .post-body img {   height: inherit;   max-width: 100%; } .byline, .byline.post-timestamp a, .byline.post-author a {   color: $(posts.byline.color);   font: $(posts.byline.font); } .byline.post-author {   text-transform: lowercase; } .byline.post-author a {   text-transform: none; } .post-header .byline, .item-byline .byline {   margin-$endSide: 0; } .post-share-buttons .share-buttons {   background: $(sharing.background.color);   color: $(sharing.text.color);   font: $(sharing.text.font); } .tr-caption {   color: $(picture.caption.text.color);   font: $(picture.caption.font);   font-size: 1.1em;   font-style: italic; } .post-filter-message {   background-color: $(postFilter.background.color);   box-sizing: border-box;   color: $(postFilter.message.color);   display: -webkit-box;   display: -webkit-flex;   display: -ms-flexbox;   display: flex;   font: $(postFilter.message.font);   margin-bottom: 16px;   margin-top: 32px;   padding: 12px 16px; } .post-filter-message a {   color: $(body.button.color);   font: $(body.button.font);   cursor: pointer;   text-transform: uppercase;   color: $(postFilter.message.link.color);   padding-$startSide: 30px;   white-space: nowrap; } .post-filter-message>div:first-child {   -webkit-box-flex: 1;   -webkit-flex: 1 0 auto;       -ms-flex: 1 0 auto;           flex: 1 0 auto; } .post-filter-message .search-label, .post-filter-message .search-query {   font-style: italic;   quotes: "\201c" "\201d" "\2018" "\2019"; } .post-filter-message .search-label:before, .post-filter-message .search-query:before {   content: open-quote; } .post-filter-message .search-label:after, .post-filter-message .search-query:after {   content: close-quote; } #blog-pager {   margin-top: 2em;   margin-bottom: 1em; } #blog-pager a {   color: $(body.button.color);   font: $(body.button.font);   cursor: pointer;   text-transform: uppercase; } .Label {   overflow-x: hidden; } .Label ul {   list-style: none;   padding: 0; } .Label .first-ten {   margin-top: 16px; } .Label li, .Label li a, .Label span.label-size, .byline.post-labels a {   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap; } .Label li, .Label span.label-size, .byline.post-labels a {   color: $(body.button.color);   font: $(body.button.font);   cursor: pointer;   text-transform: uppercase;   border-radius: 2px;   display: inline-block;   margin: 4px 4px 4px 0;   padding: 4px 8px;   position: relative; } .Label li a:before, .Label span.label-size a:before, body.item-view .byline.post-labels a:before {   bottom: 0;   content: ' ';   left: 0;   right: 0;   opacity: .1;   position: absolute;   top: 0; } .Label li a:before, .Label span.label-size a:before {   background-color: $(sidebar.link.color); } body.item-view .byline.post-labels a:before {   background-color: $(posts.link.color); } .Label li a, .Label span.label-size a, .byline.post-labels a, .post-footer .byline.post-labels a {   font: $(labels.font);   line-height: 1.5;   vertical-align: middle; } .Label span.label-size a, .Label li a {   color: $(sidebar.link.color); } .byline.post-labels a {   color: $(posts.link.color); } .Label .show-all {   border-color: $(body.link.color);   color: $(body.link.color);   cursor: pointer;   display: inline-block;   font-style: normal;   margin-top: 8px;   text-transform: uppercase; } .Label .show-all.hidden {   display: inline-block; } .FeaturedPost .item-thumbnail img {   max-width: 100%; } .sidebar-container .FeaturedPost .post-title a {   color: $(sidebar.link.color);   font: $(sidebar.posts.title.font); } body.item-view .PopularPosts {   display: inline-block;   overflow-y: auto;   vertical-align: top;   width: 280px; } .PopularPosts h3.title {   font: $(widget.title.font); } .PopularPosts .post-title {   margin: 0 0 16px; } .PopularPosts .post-title a {   color: $(sidebar.link.color);   font: $(sidebar.posts.title.font);   line-height: $(sidebar.posts.text.font.size * 12 / 7); } .PopularPosts .item-thumbnail {   clear: both;   height: 152px;   overflow-y: hidden;   width: 100%; } .PopularPosts .item-thumbnail img {   padding: 0;   width: 100%; } .PopularPosts .popular-posts-snippet {   color: $(sidebar.posts.text.color);   font: $(sidebar.posts.text.font);   line-height: $(sidebar.posts.text.font.size * 12 / 7);   max-height: calc($(sidebar.posts.text.font.size * 12 / 7) * 4);   overflow: hidden; } .PopularPosts .popular-posts-snippet .snippet-fade {   color: $(sidebar.posts.text.color); } .PopularPosts .post {   margin: 30px 0;   position: relative; } .PopularPosts .post+.post {   padding-top: 1em; } .popular-posts-snippet .snippet-fade {   background: -webkit-linear-gradient($startSide,$(body.background.color) 0%,$(body.background.color) 20%,$(body.background.color.transparent) 100%);   background: linear-gradient(to $startSide,$(body.background.color) 0%,$(body.background.color) 20%,$(body.background.color.transparent) 100%);   height: $(sidebar.posts.text.font.size * 12 / 7);   line-height: $(sidebar.posts.text.font.size * 12 / 7);   position: absolute;   top: calc($(sidebar.posts.text.font.size * 12 / 7) * 3);   width: 96px; } html[dir=ltr] .popular-posts-snippet .snippet-fade {   right: 0; } html[dir=rtl] .popular-posts-snippet .snippet-fade {   left: 0; } .Attribution {   color: $(attribution.text.color); } .Attribution a, .Attribution a:hover, .Attribution a:visited {   color: $(attribution.link.color); } .Attribution svg {   fill: $(attribution.icon.color); } .inline-ad {   margin-bottom: 16px; } body.item-view .inline-ad {   display: block; } .vertical-ad-container {   float: $startSide;   margin-$endSide: 15px;   min-height: 1px;   width: 128px; } body.item-view .vertical-ad-container {   margin-top: 30px; } .vertical-ad-placeholder, .inline-ad-placeholder {   background: $(posts.background.color);   border: 1px solid #000;   opacity: .9;   vertical-align: middle;   text-align: center; } .vertical-ad-placeholder {   height: 600px; } .inline-ad-placeholder {   height: 90px; } .vertical-ad-placeholder span, .inline-ad-placeholder span {   margin-top: 290px;   display: block;   text-transform: uppercase;   font-weight: bold;   color: $(posts.title.color); } .vertical-ad-placeholder span {   margin-top: 290px;   padding: 0 40px; } .inline-ad-placeholder span {   margin-top: 35px; } .z {   left: 0; } @media (max-width: 745px) {.z { left: 0; } .bg-photo-container, .bg-photo {   width: auto;   height: 296px; } .z {   left: 0; } } .z { left: 0; } .centered-top {   -webkit-box-align: start;   -webkit-align-items: flex-start;       -ms-flex-align: start;           align-items: flex-start;   display: -webkit-box;   display: -webkit-flex;   display: -ms-flexbox;   display: flex;   -webkit-flex-wrap: wrap;       -ms-flex-wrap: wrap;           flex-wrap: wrap;   margin: 0 auto;   max-width: 1483px; } .page_body.vertical-ads .centered-top {   max-width: 1626px; } .centered-top .blog-name, .centered-top .search, .centered-top .hamburger-section {   margin-$startSide: 16px; } .centered-top .return_link {   -webkit-box-flex: 0;   -webkit-flex: 0 0 auto;       -ms-flex: 0 0 auto;           flex: 0 0 auto;   -webkit-box-ordinal-group: 1;   -webkit-order: 0;       -ms-flex-order: 0;           order: 0; } .centered-top .blog-name {   -webkit-box-flex: 1;   -webkit-flex: 1 1 0;       -ms-flex: 1 1 0px;           flex: 1 1 0;   -webkit-box-ordinal-group: 2;   -webkit-order: 1;       -ms-flex-order: 1;           order: 1; } .centered-top .search {   -webkit-box-flex: 0;   -webkit-flex: 0 0 auto;       -ms-flex: 0 0 auto;           flex: 0 0 auto;   -webkit-box-ordinal-group: 3;   -webkit-order: 2;       -ms-flex-order: 2;           order: 2; } .centered-top .hamburger-section {   -webkit-box-flex: 0;   -webkit-flex: 0 0 auto;       -ms-flex: 0 0 auto;           flex: 0 0 auto;   -webkit-box-ordinal-group: 4;   -webkit-order: 3;       -ms-flex-order: 3;           order: 3; } .centered-top .subscribe-section-container {   -webkit-box-flex: 1;   -webkit-flex: 1 0 100%;       -ms-flex: 1 0 100%;           flex: 1 0 100%;   -webkit-box-ordinal-group: 5;   -webkit-order: 4;       -ms-flex-order: 4;           order: 4; } .centered-top .top-nav {   -webkit-box-flex: 1;   -webkit-flex: 1 0 100%;       -ms-flex: 1 0 100%;           flex: 1 0 100%;   margin-top: 32px;   -webkit-box-ordinal-group: 6;   -webkit-order: 5;       -ms-flex-order: 5;           order: 5; } .centered-top-container.sticky .centered-top {   -webkit-box-align: center;   -webkit-align-items: center;       -ms-flex-align: center;           align-items: center;   box-sizing: border-box;   -webkit-flex-wrap: nowrap;       -ms-flex-wrap: nowrap;           flex-wrap: nowrap; } .centered-top-container.sticky .blog-name {   -webkit-box-flex: 0;   -webkit-flex: 0 1 auto;       -ms-flex: 0 1 auto;           flex: 0 1 auto;   max-width: none;   min-width: 0; } .centered-top-container.sticky .subscribe-section-container {   -webkit-box-flex: 1;   -webkit-flex: 1 0 auto;       -ms-flex: 1 0 auto;           flex: 1 0 auto;   -webkit-box-ordinal-group: 3;   -webkit-order: 2;       -ms-flex-order: 2;           order: 2; } .centered-top-container.sticky .search {   -webkit-box-flex: 1;   -webkit-flex: 1 0 auto;       -ms-flex: 1 0 auto;           flex: 1 0 auto;   -webkit-box-ordinal-group: 4;   -webkit-order: 3;       -ms-flex-order: 3;           order: 3; } .centered-top-container.sticky .hamburger-section {   -webkit-box-ordinal-group: 5;   -webkit-order: 4;       -ms-flex-order: 4;           order: 4; } .centered-top-container.sticky .top-nav {   display: none; } .centered-top-container.sticky, .centered-top-container.sticky .centered-top {   background-color: $(header.background.color); } .centered-top-container.sticky .centered-top {   padding: 0 16px; } .centered-top-container.sticky .subscribe-section-container {   border-$startSide: 1px solid $(header.separator.color);   margin: 0 16px; } .centered-top {   padding-top: 40px; } .hamburger-section {   display: none; } .search {   position: relative;   width: 250px; } .search h3 {   display: none; } .search, .search .search-expand, .search .section {   height: 48px; } .search .section {   box-sizing: border-box;   $endSide: 0;   overflow-x: hidden;   position: absolute;   top: 0;   width: 250px;   z-index: 8; } .search form {   display: -webkit-box;   display: -webkit-flex;   display: -ms-flexbox;   display: flex; } .search form .search-submit-container {   -webkit-box-align: center;   -webkit-align-items: center;       -ms-flex-align: center;           align-items: center;   display: -webkit-box;   display: -webkit-flex;   display: -ms-flexbox;   display: flex;   -webkit-box-flex: 0;   -webkit-flex: 0 0 auto;       -ms-flex: 0 0 auto;           flex: 0 0 auto;   height: 48px;   -webkit-box-ordinal-group: 1;   -webkit-order: 0;       -ms-flex-order: 0;           order: 0; } .search form .search-input {   -webkit-box-flex: 1;   -webkit-flex: 1 1 auto;       -ms-flex: 1 1 auto;           flex: 1 1 auto;   -webkit-box-ordinal-group: 2;   -webkit-order: 1;       -ms-flex-order: 1;           order: 1; } .search form .search-input input {   box-sizing: border-box;   height: 48px;   width: 100%; } .search .search-expand {   background: transparent;   border: none;   margin: 0;   outline: none;   padding: 0;   display: none;   margin-$startSide: auto; } .search .search-expand .svg-icon-24, .search .search-submit-container .svg-icon-24 {   fill: $(search.icon.color);   -webkit-transition: .3s fill cubic-bezier(0.4,0.0,0.2,1);   transition: .3s fill cubic-bezier(0.4,0.0,0.2,1); } .search .search-expand-text {   display: none; } .search .section {   background-color: $(search.background.color);   line-height: 24px;   -webkit-transition-duration: .3s;           transition-duration: .3s;   -webkit-transition-property: background-color , width;   transition-property: background-color , width;   -webkit-transition-timing-function: cubic-bezier(0.4,0.0,0.2,1);           transition-timing-function: cubic-bezier(0.4,0.0,0.2,1); } .search.focused .section {   background-color: $(search.background.color); } .search .search-submit-container input[type="submit"] {   display: none; } .search .search-submit-container .search-icon {   margin: 0;   padding: 12px 8px; } .search .search-input input {   background: none;   border: none;   color: $(search.text.color);   font: $(search.font);   outline: none;   padding: 0 8px; } .search .search-input input::-webkit-input-placeholder {   color: $(search.placeholder.color);   font: $(search.placeholder.font); } .search .search-input input::-moz-placeholder {   color: $(search.placeholder.color);   font: $(search.placeholder.font); } .search .search-input input:-ms-input-placeholder {   color: $(search.placeholder.color);   font: $(search.placeholder.font); } .search .search-input input::placeholder {   color: $(search.placeholder.color);   font: $(search.placeholder.font); } .search .dim-overlay {   background-color: transparent; } .centered-top .Header h1 {   box-sizing: border-box;   color: $(blog.title.color);   font: $(blog.title.font);   margin: 0;   padding: 0; } .centered-top .Header h1 a, .centered-top .Header h1 a:visited, .centered-top .Header h1 a:hover {   color: inherit;   font-size: inherit; } .sticky .widget.Header h1 {   color: $(blog.collapsed.title.color);   font-size: 32px;   margin: 16px 0;   padding: 0;   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap; } .widget.Header p {   color: $(blog.description.color);   font: $(blog.description.font);   line-height: 1.7;   margin: 16px 0;   padding: 0; } .sticky .widget.Header p {   display: none; } .centered-top .subscribe-section-container {   border-left: none;   margin: 0; } .centered-top .subscribe-button {   background: transparent;   border: none;   margin: 0;   outline: none;   padding: 0;   color: $(body.button.color);   cursor: pointer;   display: inline-block;   font: $(tabs.text.font);   margin: 0 auto;   padding: 16px;   text-transform: uppercase;   white-space: nowrap; } .top-nav .PageList h3 {   margin-$startSide: 16px; } .top-nav .PageList ul {   list-style: none;   margin: 0;   padding: 0; } .top-nav .overflowable-contents li {   float: $startSide;   max-width: 100%; } .top-nav .PageList ul li a {   display: block;   height: $(tabs.text.font.size + 2 * 16px);   line-height: $(tabs.text.font.size + 2 * 16px);   overflow: hidden;   padding: 0 22px;   text-overflow: ellipsis;   vertical-align: middle; } .top-nav .PageList ul li:first-child a {   padding-left: 16px; } .top-nav .PageList ul li:last-child a {   padding-right: 16px; } .top-nav .PageList .dim-overlay {   opacity: 0; } .top-nav .overflow-button {   -webkit-box-align: center;   -webkit-align-items: center;       -ms-flex-align: center;           align-items: center;   display: -webkit-box;   display: -webkit-flex;   display: -ms-flexbox;   display: flex;   height: $(tabs.text.font.size + 2 * 16px);   -webkit-box-flex: 0;   -webkit-flex: 0 0 auto;       -ms-flex: 0 0 auto;           flex: 0 0 auto;   padding: 0 16px;   position: relative;   -webkit-transition: opacity .3s cubic-bezier(0.4,0.0,0.2,1);   transition: opacity .3s cubic-bezier(0.4,0.0,0.2,1);   width: 24px; } .top-nav .overflow-button.hidden {   display: none; } .top-nav .overflow-button svg {   margin-top: 0; } .top-nav .PageList ul li {   color: $(body.button.color);   font: $(body.button.font);   cursor: pointer;   text-transform: uppercase;   font: $(tabs.text.font); } .top-nav .PageList ul li a {   background-color: $(tabs.background.color);   color: $(tabs.text.color); } .top-nav .PageList ul li.selected a {   color: $(tabs.selected.color); } .z {   left: 0; } @media (max-width: 1225px) {.z { left: 0; } .search {   width: 24px; } .search .search-expand {   display: block;   position: relative;   z-index: 8; } .search .section {   width: 32px;   z-index: 7; } .search.focused .section {   width: 250px;   z-index: 8; } .search .search-expand .search-expand-icon {   fill: transparent; } .search .search-submit-container .svg-icon-24 {   fill: $(header.icons.color); } .search.focused .search-submit-container .svg-icon-24 {   fill: $(search.icon.color); } .search .section {   background-color: $(search.background.color.transparent); } .blog-name, .subscribe-section-container, .return_link {   opacity: 1;   -webkit-transition: opacity .3s cubic-bezier(0.4,0.0,0.2,1);   transition: opacity .3s cubic-bezier(0.4,0.0,0.2,1); } .centered-top.search-focused .blog-name, .centered-top.search-focused .subscribe-section-container, .centered-top.search-focused .return_link {   opacity: 0; } body.search-view .centered-top.search-focused .blog-name .section, body.search-view .centered-top.search-focused .subscribe-section-container {   display: none; } .z {   left: 0; } } .z { left: 0; } .z {   left: 0; } @media (max-width: 745px) {.z { left: 0; } .top-nav .section.no-items#page_list_top {   display: none; } .centered-top {   padding-top: 16px; } .centered-top .hamburger-section {   -webkit-box-align: center;   -webkit-align-items: center;       -ms-flex-align: center;           align-items: center;   display: -webkit-box;   display: -webkit-flex;   display: -ms-flexbox;   display: flex;   height: 48px;   margin-$endSide: 24px; } .centered-top .header_container {   margin: 0 auto;   max-width: 600px; } .centered-top-container.sticky .centered-top {   -webkit-flex-wrap: wrap;       -ms-flex-wrap: wrap;           flex-wrap: wrap; } .centered-top-container.sticky .blog-name {   -webkit-box-flex: 1;   -webkit-flex: 1 1 0;       -ms-flex: 1 1 0px;           flex: 1 1 0; } .centered-top-container.sticky .search {   -webkit-box-flex: 0;   -webkit-flex: 0 0 auto;       -ms-flex: 0 0 auto;           flex: 0 0 auto; } .centered-top-container.sticky .hamburger-section, .centered-top-container.sticky .search {   margin-bottom: 8px;   margin-top: 8px; } .centered-top-container.sticky .subscribe-section-container {   -webkit-box-flex: 1;   -webkit-flex: 1 0 100%;       -ms-flex: 1 0 100%;           flex: 1 0 100%;   margin: 0;   -webkit-box-ordinal-group: 6;   -webkit-order: 5;       -ms-flex-order: 5;           order: 5; } body.item-view .centered-top-container.sticky .subscribe-section-container {   margin-$startSide: 24px; } .centered-top-container.sticky .subscribe-section-container {   margin-top: -16px;   border: none; } .centered-top-container.sticky .subscribe-button {   padding: 8px 16px 16px;   margin-bottom: 0; } .widget.Header h1 {   font: $(blog.collapsed.title.font);   padding: 0; } .sticky .widget.Header h1 {   font-size: 16px;   margin: 0; } .top-nav .PageList {   max-width: 100%;   overflow-x: auto; } .z {   left: 0; } } .z { left: 0; } body.sidebar-visible .page {   overflow-y: scroll; } .sidebar-container {   background-color: $(sidebar.background.color);   box-sizing: border-box;   min-height: 100%;   padding: 0;   -webkit-transition-property: all;   transition-property: all; } .sidebar-container a {   font: $(sidebar.link.font);   color: $(sidebar.link.color); } .sidebar-container .navigation {   display: none; } .sidebar-container .widget {   margin: auto 0;   padding: 24px; } .sidebar-container .widget .title {   font: $(widget.title.font); } .sidebar-container .ReportAbuse {   border-top: 1px solid $(sidebar.separator.color); } body.item-view .sidebar-container {   box-sizing: border-box;   float: $startSide;   margin-top: 15px;   padding: 0; } body.item-view .sidebar-container .widget {   background: none;   padding: 15px 0; } body.item-view .sidebar-container .widget+.widget {   border-top: 1px dashed $(sidebar.separator.color); } .z {   left: 0; } @media (max-width: 745px) {.z { left: 0; } .sidebar-container {   max-width: none;   width: 100%; } .sidebar-container .navigation {   display: block;   padding: 24px; } .sidebar-container .sidebar-back {   float: $endSide; } .sidebar-container .navigation+.sidebar.section {   clear: both; } .sidebar-container .widget {   padding-$startSide: 32px; } .sidebar-container .widget.Profile {   padding-$startSide: 24px; } .z {   left: 0; } } .z { left: 0; } body.feed-view .centered {   max-width: 1483px; } body.feed-view .centered .main-container {   width: 1203px; } body.feed-view .page_body.vertical-ads .centered {   max-width: 1626px;   width: 1626px; } body.feed-view .top-nav .section, body.feed-view .post-filter-message {   max-width: 1188px; } body.feed-view .hero.post-wrapper {   background-position: center;   background-size: cover;   position: relative;   width: 1188px; } body.feed-view .post-wrapper .post, body.feed-view .post-wrapper .post .snippet-thumbnail {   background-color: $(posts.background.color);   padding: 24px 16px; } .post-wrapper {   background-color: $(posts.background.color);   position: relative; } body.feed-view .post-wrapper {   border-radius: $(posts.border.radius);   overflow: hidden;   -webkit-transition: .3s box-shadow cubic-bezier(0.4,0.0,0.2,1);   transition: .3s box-shadow cubic-bezier(0.4,0.0,0.2,1);   width: 385px; } body.feed-view .post-wrapper:hover {   box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14) , 0 1px 10px 0 rgba(0,0,0,0.12) , 0 2px 4px -1px rgba(0,0,0,0.2); } body.feed-view .post-wrapper .snippet-thumbnail {   -webkit-transition: .3s opacity cubic-bezier(0.4,0.0,0.2,1);   transition: .3s opacity cubic-bezier(0.4,0.0,0.2,1); } body.feed-view .post-wrapper.has-labels.image .snippet-thumbnail-container {   background-color: $(posts.background.color.inverse); } body.feed-view .post-wrapper.has-labels:hover .snippet-thumbnail {   opacity: .7; } html[dir=ltr] body.feed-view .post-wrapper {   float: left; } html[dir=ltr] body.feed-view .post-wrapper, html[dir=ltr] body.feed-view .inline-ad {   margin: 0 15px 15px 0; } html[dir=rtl] body.feed-view .post-wrapper {   float: right; } html[dir=rtl] body.feed-view .post-wrapper, html[dir=rtl] body.feed-view .inline-ad {   margin: 0 0 15px 15px; } .post-wrapper.hero .post-title a {   font-size: $(posts.title.font.size * 5 / 6);   line-height: $(posts.title.font.size); } .post-wrapper.not-hero .post-title a {   font-size: $(posts.title.font.size * 2 / 3);   line-height: $(posts.title.font.size); } body.feed-view .post-wrapper .post-title a {   display: block;   margin: -296px -16px;   padding: 296px 16px;   position: relative;   text-overflow: ellipsis;   z-index: 2; } body.feed-view .post-wrapper .byline, body.feed-view .post-wrapper .comment-link {   position: relative;   z-index: 3; } body.feed-view .not-hero.post-wrapper.no-image .post-title-container {   position: relative;   top: -90px; } .byline {   line-height: $(posts.byline.font.size); } .hero .byline {   line-height: $(posts.byline.font.size * 1.3); } .hero .byline, .hero .byline.post-timestamp a, .hero .byline.post-author a {   font-size: $(posts.byline.font.size + 2px); } body.feed-view .post-wrapper .post-header {   padding: 5px 0; } html[dir=ltr] body.feed-view .post-share-buttons, html[dir=rtl] body.feed-view .post-comment-link {   float: right; } html[dir=rtl] body.feed-view .post-share-buttons, html[dir=ltr] body.feed-view .post-comment-link {   float: left; } .header-buttons-byline {   margin-top: 16px;   height: 24px; } .header-buttons-byline .byline {   height: 24px; } .post-header-right-buttons .post-comment-link, .post-header-right-buttons .post-jump-link {   display: block;   float: left;   margin-left: 16px; } .post .num_comments {   display: inline-block;   font: $(posts.title.font);   font-size: $(posts.title.font.size / 2);   margin: -14px 6px 0;   vertical-align: middle; } body.feed-view .post-wrapper .post-jump-link {   float: right; } body.feed-view .post-wrapper .post-footer {   margin-top: 15px; } body.feed-view .post-wrapper .snippet-thumbnail-container, body.feed-view .post-wrapper .snippet-thumbnail {   height: 184px;   overflow-y: hidden; } body.feed-view .post-wrapper .snippet-thumbnail {   display: block;   background-position: center;   background-size: cover;   width: 100%; } body.feed-view .post-wrapper.hero .snippet-thumbnail-container, body.feed-view .post-wrapper.hero .snippet-thumbnail {   height: 272px;   overflow-y: hidden; } .z {   left: 0; } @media (min-width: 746px) {.z { left: 0; } body.feed-view .post-title a .snippet-container {   height: $(posts.title.font.size * 2);   max-height: $(posts.title.font.size * 2); } body.feed-view .post-title a .snippet-fade {   background: -webkit-linear-gradient($startSide,$(posts.background.color) 0%,$(posts.background.color) 20%,$(posts.background.color.transparent) 100%);   background: linear-gradient(to $startSide,$(posts.background.color) 0%,$(posts.background.color) 20%,$(posts.background.color.transparent) 100%);   color: transparent;   height: $(posts.title.font.size);   width: 96px; } body.feed-view .hero .post-title-container .post-title a .snippet-container {   height: $(posts.title.font.size);   max-height: $(posts.title.font.size); } body.feed-view .hero .post-title a .snippet-fade {   height: $(posts.title.font.size); } body.feed-view .post-header-left-buttons {   position: relative; } body.feed-view .post-header-left-buttons:hover .touch-icon {   opacity: 1; } body.feed-view .hero.post-wrapper.no-image .post-title-container, body.feed-view .hero.post-wrapper.no-image .post-authordate {   position: relative;   top: -150px; } body.feed-view .hero.post-wrapper.no-image .post-title-container {   text-align: center; } body.feed-view .hero.post-wrapper.no-image .post-authordate {   -webkit-box-pack: center;   -webkit-justify-content: center;       -ms-flex-pack: center;           justify-content: center; } body.feed-view .labels-outer-container {   margin: 0 -4px;   opacity: 0;   position: absolute;   top: 20px;   -webkit-transition: .2s opacity;   transition: .2s opacity;   width: calc(100% - 2 * 16px); } body.feed-view .post-wrapper.has-labels:hover .labels-outer-container {   opacity: 1; } body.feed-view .labels-container {   max-height: calc($(labels.font.size * 1.5 + 8px) + 2 * 4px);   overflow: hidden; } body.feed-view .labels-container .overflow-button-container, body.feed-view .labels-container .labels-more {   display: inline-block;   float: $endSide; } body.feed-view .labels-items {   padding: 0 4px; } body.feed-view .labels-container a {   display: inline-block;   max-width: calc(100% - 16px);   overflow-x: hidden;   text-overflow: ellipsis;   white-space: nowrap;   vertical-align: top; } body.feed-view .labels-more {   min-width: $(labels.font.size * 1.5 + 8px);   padding: 0;   width: $(labels.font.size * 1.5 + 8px); } html[dir=ltr] body.feed-view .labels-more {   margin-left: 8px; } html[dir=rtl] body.feed-view .labels-more {   margin-right: 8px; } body.feed-view .byline.post-labels {   margin: 0; } body.feed-view .byline.post-labels a, body.feed-view .labels-more a {   background-color: $(posts.background.color);   color: $(posts.link.color);   box-shadow: 0 0 2px 0 rgba(0,0,0,0.18);   opacity: .9; } body.feed-view .labels-more a {   border-radius: 50%;   display: inline-block;   font: $(labels.font);   line-height: $(labels.font.size * 1.5 + 8px);   height: $(labels.font.size * 1.5 + 8px);   padding: 0;   text-align: center;   width: $(labels.font.size * 1.5 + 8px);   max-width: $(labels.font.size * 1.5 + 8px); } .z {   left: 0; } } .z { left: 0; } .z {   left: 0; } @media (max-width: 1483px) {.z { left: 0; } body.feed-view .hero.post-wrapper {   width: 787px; } body.feed-view .centered {   width: 1082px; } body.feed-view .centered .main-container {   width: 802px; } body.feed-view .top-nav .section, body.feed-view .post-filter-message {   max-width: 787px; } .blog-pager {   width: 802px; } .z {   left: 0; } } .z { left: 0; } .z {   left: 0; } @media (max-width: 1626px) {.z { left: 0; } body.feed-view .page_body.vertical-ads .hero.post-wrapper {   width: 787px; } body.feed-view .page_body.vertical-ads .centered {   width: 1225px; } body.feed-view .page_body.vertical-ads .centered .main {   width: auto; } body.feed-view .page_body.vertical-ads .blog-pager {   width: 802px; } .z {   left: 0; } } .z { left: 0; } .z {   left: 0; } @media (max-width: 1225px) {.z { left: 0; } html[dir=ltr] body.feed-view .centered .main-container, html[dir=rtl] body.feed-view .centered .main-container {   float: none; } body.feed-view .hero.post-wrapper, body.feed-view .page_body.vertical-ads .hero.post-wrapper {   width: 681px; } html[dir=ltr] body.feed-view .post-wrapper, html[dir=rtl] body.feed-view .post-wrapper, html[dir=ltr] body.feed-view .page_body.vertical-ads .post-wrapper, html[dir=rtl] body.feed-view .page_body.vertical-ads .post-wrapper {   float: none; } body.feed-view .page_body .centered, body.feed-view .page_body.vertical-ads .centered {   padding-right: 0;   width: 681px; } body.feed-view .centered .main-container, body.feed-view .centered .main {   width: auto; } body.feed-view div.widget.Blog, body.feed-view .page_body .centered div.widget.FeaturedPost {   width: 401px; } body.feed-view .post-filter-message {   max-width: 100%; } .top-nav, .post-filter-message {   margin-top: 32px; } .widget.Header h1 {   font: $(blog.collapsed.title.font); } .blog-pager, .page_body.vertical-ads .blog-pager {   width: 385px; } .post-filter-message {   display: block; } .post-filter-message a {   display: block;   margin-top: 8px;   padding-left: 0; } body.feed-view .not-hero .post-title-container .post-title a .snippet-container {   height: auto; } body.feed-view .vertical-ad-container {   display: none; } body.feed-view .blog-posts .inline-ad {   display: block; } .z {   left: 0; } } .z { left: 0; } .z {   left: 0; } @media (max-width: 745px) {.z { left: 0; } body.feed-view .page_body .centered .centered-bottom, body.feed-view .page_body.vertical-ads .centered .centered-bottom {   max-width: 600px;   width: auto; } body.feed-view .centered-bottom .post-wrapper, body.feed-view .centered-bottom .hero.post-wrapper, body.feed-view .page_body.vertical-ads .centered-bottom .post-wrapper {   max-width: 600px;   width: auto; } body.feed-view .page_body .centered, body.feed-view .page_body.vertical-ads .centered {   max-width: 600px;   width: 100%; } body.feed-view .page_body .centered .main {   float: none; } body.feed-view .page_body #header, body.feed-view .page_body.vertical-ads #header {   width: auto; } body.feed-view .centered .main, body.feed-view .page_body.vertical-ads .centered .main {   width: 100%; } body.feed-view div.widget.Blog, body.feed-view .page_body .centered div.widget.FeaturedPost {   top: 50px;   width: 100%;   z-index: 6; } body.feed-view .main>.widget .title {   margin-left: 8px;   margin-right: 8px; } body.feed-view .blog-pager, body.feed-view .page_body.vertical-ads .blog-pager {   width: 100%; } body.feed-view .hero.post-wrapper {   background-color: $(posts.link.color);   border-radius: 0;   height: 416px; } body.feed-view .hero.post-wrapper .post {   bottom: 0;   box-sizing: border-box;   margin: 16px;   position: absolute;   width: calc(100% - 32px); } body.feed-view .hero.no-image.post-wrapper .post {   box-shadow: 0 0 16px rgba(0,0,0,.2);   padding-top: 120px;   top: 0; } body.feed-view .hero.no-image.post-wrapper .post-footer {   position: absolute;   bottom: 16px;   width: calc(100% - 32px); } .hero.post-wrapper h3 {   white-space: normal; } body.feed-view .post-wrapper h3, body.feed-view .post-wrapper:hover h3 {   width: auto; } html[dir=ltr] body.feed-view .hero.post-wrapper, html[dir=rtl] body.feed-view .hero.post-wrapper {   margin: 0 0 15px; } html[dir=ltr] body.feed-view .post-wrapper, html[dir=rtl] body.feed-view .post-wrapper, html[dir=ltr] body.feed-view .inline-ad, html[dir=rtl] body.feed-view .inline-ad {   margin: 0 8px 16px; } body.feed-view .post-labels {   display: none; } body.feed-view .post-wrapper .snippet-thumbnail {   background-size: cover;   display: block;   height: 184px;   margin: 0;   max-height: 184px;   width: 100%; } body.feed-view .post-wrapper.hero .snippet-thumbnail-container, body.feed-view .post-wrapper.hero .snippet-thumbnail {   height: 416px;   max-height: 416px; } body.feed-view .header-author-byline {   display: none; } body.feed-view .hero .header-author-byline {   display: block; } .z {   left: 0; } } .z { left: 0; } body.item-view .page_body {   padding-top: 70px; } body.item-view .bg-photo {   -webkit-filter: blur(12px);           filter: blur(12px);   -webkit-transform: scale(1.05);       -ms-transform: scale(1.05);           transform: scale(1.05); } body.item-view .bg-photo-container+.centered .centered-bottom {   margin-top: 0; } body.item-view .bg-photo-container+.centered .centered-bottom .post-wrapper {   margin-top: -368px; } body.item-view .bg-photo-container+.centered-bottom {   margin-top: 0; } body.item-view .centered .centered-bottom {   margin-left: auto;   margin-right: auto;   padding-right: 0;   padding-top: 0; } body.item-view .inline-ad {   margin-bottom: 0;   margin-top: 30px;   padding-bottom: 16px; } body.item-view .post-wrapper {   border-radius: $(posts.border.radius) $(posts.border.radius) 0 0;   float: none;   height: auto;   margin: 0;   padding: 32px;   width: auto; } body.item-view .post-outer {   padding: 8px; } body.item-view .comments {   border-radius: 0 0 $(posts.border.radius) $(posts.border.radius);   color: $(posts.text.color);   margin: 0 8px 8px; } body.item-view .post-title {   font: $(posts.title.font); } body.item-view .post-header {   display: block;   width: auto; } body.item-view .post-share-buttons {   display: block;   margin-bottom: 40px;   margin-top: 20px; } body.item-view .post-footer a {   color: $(body.button.color);   font: $(body.button.font);   cursor: pointer;   text-transform: uppercase;   color: $(posts.link.color); } body.item-view .post-footer {   display: block; } body.item-view .post-footer-line {   border: none; } #comments {   background: $(posts.background.color);   border-top: 1px solid $(sidebar.separator.color);   margin-top: 0;   padding: 32px; } #comments h3.title, #comments .comment-form .title {   position: absolute;   clip: rect(1px,1px,1px,1px);   padding: 0;   border: 0;   height: 1px;   width: 1px;   overflow: hidden; } #comments .comment-form {   border-bottom: 1px solid $(sidebar.separator.color);   border-top: 1px solid $(sidebar.separator.color); } body.item-view #comments .comment-form h4 {   position: absolute;   clip: rect(1px,1px,1px,1px);   padding: 0;   border: 0;   height: 1px;   width: 1px;   overflow: hidden; } #comment-holder .continue {   display: none; } .z {   left: 0; } @media (max-width: 1328px) {.z { left: 0; } body.item-view .centered {   width: 100%; } html[dir=ltr] body.item-view .centered .main-container, html[dir=rtl] body.item-view .centered .main-container {   float: none; } body.item-view .centered .main-container {   margin: 0 auto; } body.item-view div.section.main div.widget.PopularPosts {   margin: 0 2.5%;   position: relative;   top: 0;   width: 95%; } body.item-view .bg-photo-container+.centered .main {   margin-top: 0; } body.item-view div.widget.Blog {   margin: auto;   width: 100%; } body.item-view .page_body .centered .centered-bottom {   margin-left: auto;   margin-right: auto;   padding-right: 0;   padding-top: 0;   width: 100%; } body.item-view .post-share-buttons {   margin-bottom: 32px; } body.item-view .sidebar-container {   float: none;   margin: 0;   max-height: none;   max-width: none;   padding: 0 15px;   position: static;   width: 100%; } body.item-view .sidebar-container .section {   margin: 15px auto;   max-width: 480px; } body.item-view .sidebar-container .section .widget {   position: static;   width: 100%; } body.item-view .vertical-ad-container {   display: none; } body.item-view .blog-posts .inline-ad {   display: block; } .z {   left: 0; } } .z { left: 0; } .z {   left: 0; } @media (max-width: 745px) {.z { left: 0; } body.item-view.has-subscribe .bg-photo-container, body.item-view.has-subscribe .centered-bottom {   padding-top: 88px; } body.item-view .bg-photo-container+.centered .centered-bottom .post-wrapper {   margin-top: -240px; } body.item-view .bg-photo-container+.centered .centered-bottom, body.item-view .page_body.has-subscribe .bg-photo-container+.centered .centered-bottom {   margin-top: 0; } body.item-view .post-outer {   background: $(posts.background.color); } body.item-view .post-outer .post-wrapper {   padding: 16px; } body.item-view .comments {   margin: 0; } .z {   left: 0; } } .z { left: 0; }  ]]></b:skin>     <b:template-skin>      <![CDATA[       body#layout .hidden,       body#layout .invisible {         display: inherit;       }       body#layout .centered-bottom {         position: relative;       }       body#layout .section.featured-post,       body#layout .section.main,       body#layout .section.vertical-ad-container {         float: left;         width: 55%;       }       body#layout .sidebar-container {         display: inline-block;         width: 39%;       }       body#layout .centered-bottom:after {         clear: both;         content: "";         display: table;       }       body#layout .hamburger-menu,       body#layout .search {         display: none;       }       ]]>    </b:template-skin>     <b:defaultmarkups>      <b:defaultmarkup type='Common'>        <b:includable id='standardPostImageStyle'>          <b:with value='"post-thumb-" + data:post.id' var='thumbClassName'>            <style>              .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 385, "385:184").cssEscaped'/>);}             </style>          </b:with>        </b:includable>        <b:includable id='feedPostImage'>          <div class='snippet-thumbnail-container'>            <div expr:class='"snippet-thumbnail " + data:thumbClassName'/>          </div></b:includable>        <b:includable id='widgetNotAvailableInPreview'>          <b:if cond='data:widget.type == "AdSense"'>            <div class='vertical-ad-placeholder'>              <span><b:message name='messages.adsGoHere'/></span>            </div><b:else/>            <b:include name='super.widgetNotAvailableInPreview'/>          </b:if>        </b:includable>      </b:defaultmarkup>      <b:defaultmarkup type='BlogSearch'>        <b:includable id='searchSubmit'>          <b:if cond='data:widget.sectionId == "search_top"'>            <label class='search-submit-container'>              <input type='submit'/>              <b:include data='{ iconClass: "touch-icon search-icon" }' name='searchIcon'/>            </label>          <b:else/>            <b:include name='super.searchSubmit'/>          </b:if>        </b:includable>      </b:defaultmarkup>      <b:defaultmarkup type='AdSense,Blog'>        <b:includable id='defaultAdUnit'>                    <b:with value='"/* Done in css. */"' var='style'>            <b:include name='super.defaultAdUnit'/>          </b:with>        </b:includable>      </b:defaultmarkup>      <b:defaultmarkup type='Blog,FeaturedPost,PopularPosts'>        <b:includable id='commentsLink'>          <a class='comment-link' expr:href='data:post.commentsUrl ?: data:post.url' expr:onclick='data:post.commentsUrlOnclick'>            <b:include name='commentIcon'/>            <span class='num_comments'>              <data:post.numberOfComments/>            </span>          </a>        </b:includable>        <b:includable id='snippetedPostThumbnail'>          <div class='item-thumbnail'>            <a expr:href='data:post.url'>              <b:include data='{                                  image: data:post.featuredImage,                                  imageSizes: [280,560,840,1120,1400]                                }' name='responsiveImage'/>            </a>          </div></b:includable>      </b:defaultmarkup>      <b:defaultmarkup type='Blog,FeaturedPost'>        <b:includable id='postShareButtons' var='post'>                  </b:includable>        <b:includable id='headerByline'>          <b:if cond='data:view.isSingleItem and data:widget.type == "Blog"'>            <b:include name='super.headerByline'/>          <b:else/>            <b:include data='{ items: ["author", "timestamp", "labels"] }' name='headerBylineOverride'/>          </b:if>          <b:include cond='data:view.isSingleItem and data:widget.type == "Blog"' data='{ shareButtonClass: "post-share-buttons-top", overridden: true }' name='maybeAddShareButtons'/>        </b:includable>        <b:includable id='footerBylines'>                    <b:class name='container'/>           <b:if cond='data:view.isSingleItem and data:widget.type == "Blog"'>            <b:include name='super.footerBylines'/>          <b:else/>            <b:include data='{ items: [["comments"]] }' name='footerBylinesOverride'/>          </b:if>          <b:include data='{ shareButtonClass: "post-share-buttons-bottom", overridden: true }' name='maybeAddShareButtons'/>        </b:includable>        <b:includable id='postTitle' var='post'>                    <div class='post-title-container'>            <a expr:name='data:post.id'/>            <h3 class='post-title entry-title'>              <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>                <a expr:href='data:post.link ?: data:post.url'>                  <div class='snippet-container r-snippet-container'>                    <div class='r-snippetized'>                      <data:post.title/>                    </div><b:if cond='data:post.title != ""'>                      <div class='snippet-fade r-snippet-fade hidden'/>                    </b:if>                  </div></a>              <b:else/>                <data:post.title/>              </b:if>            </h3></div></b:includable>        <b:includable id='postLabels'>          <b:if cond='data:view.isMultipleItems'>           <div class='labels-outer-container'>              <div class='labels-container overflowable-container'>                <div class='labels-items overflowable-contents byline post-labels'>                  <b:loop index='i' values='data:post.labels' var='label'>                    <span class='overflowable-item'>                      <a expr:href='data:label.url' rel='tag'><data:label.name/></a>                    </span>                  </b:loop>                </div><span class='labels-more overflow-button hidden'>                  <a expr:href='data:originalUrl'>+<span class='overflow-count'/></a>                </span>                                                                 </div></div><b:else/>            <b:include name='super.postLabels'/>          </b:if>        </b:includable>        <b:includable id='postWrapperClasses'>          <b:class cond='data:post.featuredImage' name='image'/>          <b:class cond='not data:post.featuredImage' name='no-image'/>          <b:class cond='data:post.labels and not data:post.labels.empty' name='has-labels'/>        </b:includable>      </b:defaultmarkup>      <b:defaultmarkup type='Blog'>        <b:includable id='commentFormIframeSrc' var='post'>          <b:with value='data:template.isAlternateRendering ? ("&skinvariant=" + data:template.variant) : ""' var='variantParam'>            <a expr:href='data:post.commentFormIframeSrc + "&skin=emporio" + data:variantParam' id='comment-editor-src'/>          </b:with>        </b:includable>        <b:includable id='commentForm' var='post'>          <b:with value='"90px"' var='cmtIframeInitialHeight'>            <b:include data='post' name='super.commentForm'/>          </b:with>        </b:includable>        <b:includable id='threadedCommentForm' var='post'>          <b:with value='"90px"' var='cmtIframeInitialHeight'>            <b:include data='post' name='super.threadedCommentForm'/>          </b:with>        </b:includable>        <b:includable id='feedLinks'>                  </b:includable>        <b:includable id='main'>          <b:include name='noContentPlaceholder'/>          <b:include name='super.main'/>        </b:includable>        <b:includable id='inlineAd' var='post'>                    <b:include cond='data:post.adNumber lt 3' data='post' name='super.inlineAd'/>        </b:includable>        <b:includable id='postCommentsAndAd'>          <b:include cond='data:view.isSingleItem or                            data:widgets.FeaturedPost none (w => w.sectionId == "featured_post" and w.postId == data:post.id)' name='super.postCommentsAndAd'/>        </b:includable>        <b:includable id='post' var='post'>          <b:with value='"post-thumb-" + data:post.id' var='thumbClassName'>            <div expr:class='"post-wrapper not-hero post-" + data:post.id'>              <b:include name='postWrapperClasses'/>                             <b:include cond='data:post.featuredImage and data:view.isMultipleItems' name='standardPostImageStyle'/>              <b:include name='feedPostImage'/>               <div class='slide'>                <b:include data='post' name='super.post'/>              </div></div></b:with>        </b:includable>        <b:includable id='postBodySnippet' var='post'>          <div class='post-body entry-content' expr:id='"post-snippet-" + data:post.id'>            <b:if cond='data:post.featuredImage and not data:view.isMultipleItems'>              <b:with value='"post-" + data:post.id' var='className'>                <style>                  .<data:className/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 385, "385:185").cssEscaped'/>);}                   @media (max-width: 285px) { .<data:className/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 285, "285:185").cssEscaped'/>);} }                   @media (max-width: 385px) and (min-width: 286px) { .<data:className/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 385, "385:185").cssEscaped'/>);} }                   @media (max-width: 485px) and (min-width: 386px) { .<data:className/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 485, "485:185").cssEscaped'/>);} }                   @media (max-width: 745px) and (min-width: 486px) { .<data:className/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 585, "585:185").cssEscaped'/>);} }                 </style>                <div class='snippet-thumbnail-container'>                  <div expr:class='"snippet-thumbnail " + data:className'/>                </div></b:with>            </b:if>            <div style='clear: both;'/>          </div></b:includable>        <b:includable id='postJumpLink' var='post'>          <b:comment>We don't show 'read more' links in Emporio.</b:comment>        </b:includable>        <b:includable id='previousPageLink'>          <b:comment>We don't show previeus page links in Emporio.</b:comment>        </b:includable>        <b:includable id='homePageLink'>          <b:comment>We don't show home page links in Emporio.</b:comment>        </b:includable>        <b:includable id='nextPageLink'>          <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:title='data:messages.morePosts'>            <data:messages.morePosts/>          </a>        </b:includable>      </b:defaultmarkup>      <b:defaultmarkup type='BlogArchive'>        <b:includable id='main' var='this'>          <details class='collapsible extendable'>            <b:attr cond='data:view.isArchive' name='open' value='open'/>            <b:with value='true' var='renderAsDetails'>            <b:with value='data:messages.archive' var='defaultTitle'>              <b:include name='super.main'/>            </b:with>            </b:with>          </details>        </b:includable>        <b:includable id='flat'>          <b:include data='{                               buttonClass: "flat-button",                               items: data:this.data,                               itemSet: "data",                               itemsMarkup: "super.flat"                             }' name='extendableItems'/>        </b:includable>        <b:includable id='hierarchy'>          <b:include data='{                               buttonClass: "flat-button",                               limit: 1,                               items: data:this.data,                               itemSet: "data",                               itemsMarkup: "super.hierarchy"                             }' name='extendableItems'/>        </b:includable>      </b:defaultmarkup>      <b:defaultmarkup type='Label'>        <b:includable id='main' var='this'>          <details class='collapsible extendable'>            <b:attr cond='data:view.isLabelSearch' name='open' value='open'/>            <b:with value='true' var='renderAsDetails'>            <b:with value='data:messages.labels' var='defaultTitle'>              <b:include name='super.main'/>            </b:with>            </b:with>          </details>        </b:includable>        <b:includable id='list'>          <b:include data='{                               buttonClass: "flat-button",                               items: data:this.labels,                               itemSet: "labels",                               itemsMarkup: "super.list"                             }' name='extendableItems'/>        </b:includable>        <b:includable id='cloud'>          <b:include data='{                               buttonClass: "flat-button",                               items: data:this.labels,                               itemSet: "labels",                               itemsMarkup: "super.cloud"                             }' name='extendableItems'/>        </b:includable>      </b:defaultmarkup>      <b:defaultmarkup type='FeaturedPost'>        <b:includable id='snippetedPostContent'>          <b:if cond='data:widget.sectionId != "featured_post"'>            <b:include name='super.snippetedPostContent'/>          <b:else/>            <b:with value='"post-thumb-" + data:post.id' var='thumbClassName'>              <b:if cond='data:post.featuredImage'>                <style>                  @media (min-width: 746px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 800, "800:272").cssEscaped'/>);} }                   @media (min-width: 1545px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 1185, "1185:272").cssEscaped'/>);} }                   @media (max-width: 400px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 400, "1:1").cssEscaped'/>); } }                   @media (min-width: 401px) and (max-width: 745px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 745, "745:400").cssEscaped'/>); } }                 </style>              </b:if>               <div expr:class='"post-wrapper hero post-" + data:post.id'>                <b:include name='postWrapperClasses'/>                <b:include name='feedPostImage'/>                 <div class='slide'>                  <div class='post hentry'>                    <b:include cond='data:postDisplay.showTitle' data='post' name='postTitle'/>                    <b:include name='headerByline'/>                    <b:include cond='data:postDisplay.showSnippet' data='post' name='postSnippet'/>                    <div class='post-footer'>                      <b:include name='footerBylines'/>                    </div></div></div></div></b:with>          </b:if>        </b:includable>      </b:defaultmarkup>      <b:defaultmarkup type='Header'>        <b:includable id='description'>                    <b:include cond='not data:view.isSingleItem' name='super.description'/>        </b:includable>        <b:includable id='image'>          <b:include name='super.image'/>                    <b:include cond='data:this.imagePlacement == "REPLACE"' name='title'/>        </b:includable>        <b:includable id='title'>          <div>            <b:class cond='data:this.imagePlacement == "REPLACE"' name='replaced'/>            <b:include name='super.title'/>          </div></b:includable>      </b:defaultmarkup>      <b:defaultmarkup type='PageList'>        <b:includable id='content'>          <div class='widget-content'>            <b:include cond='data:widget.sectionId == "page_list_top"' name='overflowablePageList'/>            <b:include cond='data:widget.sectionId != "page_list_top"' name='pageList'/>          </div></b:includable>      </b:defaultmarkup>      <b:defaultmarkup type='PopularPosts'>        <b:includable id='snippetedPostContent'>          <b:comment>Move the thumbnail outside of the body and above the title</b:comment>          <b:include cond='data:postDisplay.showFeaturedImage and data:post.featuredImage.isResizable' data='post' name='snippetedPostThumbnail'/>          <b:include data='post' name='snippetedPostTitle'/>          <b:include data='post' name='itemBody'/>        </b:includable>        <b:includable id='itemBody' var='post'>          <div class='item-content'>            <b:with value='"popular-posts"' var='snippetPrefix'>              <b:include cond='data:postDisplay.showSnippet' data='post' name='postSnippet'/>            </b:with>          </div></b:includable>        <b:includable id='main'>          <b:comment>Default the title to 'Popular posts from this blog'.</b:comment>          <b:with value='data:messages.popularPosts' var='defaultTitle'>            <b:include name='super.main'/>          </b:with>        </b:includable>      </b:defaultmarkup>      <b:defaultmarkup type='Profile'>        <b:includable id='main'>          <b:include name='content'/>        </b:includable>        <b:includable id='defaultProfileImage'>          <div class='default-avatar-wrapper'>            <b:include data='{ iconClass: "avatar-icon" }' name='defaultAvatarIcon'/>          </div></b:includable>        <b:includable id='viewProfileLink'>                    <a class='profile-link' expr:href='data:userUrl' rel='author'><data:messages.visitProfile/></a>        </b:includable>        <b:includable id='teamProfile'>          <div class='extendable'>            <b:include data='{                                 items: data:authors,                                 itemSet: "authors",                                 itemsMarkup: "super.teamProfile",                                 limit: 4                               }' name='extendableItems'/>          </div></b:includable>        <b:includable id='teamProfileLink'>                    <a class='profile-link g-profile' expr:href='data:author.userUrl'>            <b:include name='profileImage'/>            <div class='profile-name-container'>              <span class='profile-name'><data:author.display-name/></span>              <data:messages.visitProfile/>            </div></a>        </b:includable>      </b:defaultmarkup>    </b:defaultmarkups>     <b:if cond='data:blog.adsenseClientId and !data:widgets.AdSense.empty'>      <script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>    </b:if>     <script async='async' src='//www.gstatic.com/external_hosted/clipboardjs/clipboard.min.js'/>  </head>   <body>    <b:class cond='data:view.isPreview' name='preview'/>    <b:class cond='data:view.isMultipleItems' name='feed-view'/>    <b:class cond='data:view.isSingleItem' name='item-view'/>    <b:class cond='data:view.isArchive' name='archive-view'/>    <b:class cond='data:view.isLabelSearch' name='label-view'/>    <b:class cond='data:view.isSearch and !data:view.isLabelSearch' name='search-view'/>    <b:class name='version-1-0-0'/>     <b:include name='skipNavigation'/>    <div class='page'>      <b:with value='data:widgets.AdSense any (w => w.sectionId == "ads")' var='hasVerticalAds'>        <div class='page_body'>          <b:class cond='data:hasVerticalAds' name='vertical-ads'/>           <b:if cond='data:view.isSingleItem'>            <b:if cond='data:widgets.Blog.first.posts.first.featuredImage'>              <b:include data='{                                  image: data:widgets.Blog.first.posts.first.featuredImage,                                  selector: ".bg-photo"                                }' name='responsiveImageStyle'/>              <div class='bg-photo-container'>                <div class='bg-photo'/>              </div></b:if>          </b:if>          <div class='centered'>            <b:if cond='not data:view.isSingleItem'>              <div class='centered-top-placeholder'/>            </b:if>            <header class='centered-top-container' role='banner'>              <b:class cond='data:view.isSingleItem' name='sticky'/>              <div class='centered-top'>                <b:class cond='data:view.isSearch and data:view.search.query' name='search-focused'/>                 <b:if cond='data:view.isSingleItem'>                  <a class='return_link' expr:href='data:blog.homepageUrl'>                    <b:include data='{ iconClass: "touch-icon back-button rtl-reversible-icon" }' name='backArrowIcon'/>                  </a>                <b:else/>                  <div class='hamburger-section'>                    <b:include data='{ iconClass: "touch-icon hamburger-menu" }' name='menuIcon'/>                  </div></b:if>                 <div class='blog-name'>                  <b:section id='header' name='Header' showaddelement='false'>                    <b:widget id='Header1' locked='true' title='one heart (Header)' type='Header' visible='true'>                      <b:widget-settings>                        <b:widget-setting name='displayUrl'/>                        <b:widget-setting name='displayHeight'>0</b:widget-setting>                        <b:widget-setting name='sectionWidth'>-1</b:widget-setting>                        <b:widget-setting name='useImage'>false</b:widget-setting>                        <b:widget-setting name='shrinkToFit'>false</b:widget-setting>                        <b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>                        <b:widget-setting name='displayWidth'>0</b:widget-setting>                      </b:widget-settings>                      <b:includable id='main' var='this'>    <div class='header-widget'>      <b:include cond='data:imagePlacement in {"REPLACE", "BEFORE_DESCRIPTION"}' name='image'/>      <b:include cond='data:imagePlacement not in {"REPLACE", "BEFORE_DESCRIPTION"}' name='title'/>      <b:include cond='data:imagePlacement != "REPLACE"' name='description'/>    </div><b:include cond='data:imagePlacement == "BEHIND"' name='behindImageStyle'/>  </b:includable>                      <b:includable id='behindImageStyle'>    <b:if cond='data:sourceUrl'>      <b:include cond='data:this.image' data='{                    image: data:this.image,                    selector: ".header-widget"                  }' name='responsiveImageStyle'/>      <style type='text/css'>        .header-widget {           background-position: <data:backgroundPositionStyleStr/>;           background-repeat: no-repeat;         }       </style>    </b:if>  </b:includable>                      <b:includable id='description'>                    <b:include cond='not data:view.isSingleItem' name='super.description'/>        </b:includable>                      <b:includable id='image'>          <b:include name='super.image'/>                    <b:include cond='data:this.imagePlacement == "REPLACE"' name='title'/>        </b:includable>                      <b:includable id='title'>          <div>            <b:class cond='data:this.imagePlacement == "REPLACE"' name='replaced'/>            <b:include name='super.title'/>          </div></b:includable>                    </b:widget>                  </b:section>                </div><b:if cond='data:view.isLayoutMode or data:widgets any (w => w.sectionId == "search_top")'>                  <div class='search'>                    <b:class cond='data:view.isSearch and data:view.search.query' name='focused'/>                    <button class='search-expand touch-icon-button' expr:aria-label='data:messages.search.escaped'>                      <div class='search-expand-text'><data:messages.search/></div><b:include data='{ iconClass: "touch-icon search-expand-icon" }' name='searchIcon'/>                    </button>                    <b:section id='search_top' name='Search (Top)' showaddelement='false'>                      <b:widget id='BlogSearch1' locked='true' title='Search This Blog' type='BlogSearch' visible='true'>                        <b:includable id='main'>  <b:include name='widget-title'/>  <b:include name='content'/></b:includable>                        <b:includable id='content'>  <div class='widget-content' role='search'>    <b:include name='searchForm'/>  </div></b:includable>                        <b:includable id='searchForm'>  <form expr:action='data:blog.searchUrl' target='_self'>    <b:include name='urlParamsAsFormInput'/>    <div class='search-input'>      <input autocomplete='off' expr:aria-label='data:messages.searchThisBlog' expr:placeholder='data:messages.searchThisBlog' expr:value='data:view.isSearch ? data:view.search.query.escaped : ""' name='q'/>    </div><b:include name='searchSubmit'/>  </form></b:includable>                        <b:includable id='searchSubmit'>          <b:if cond='data:widget.sectionId == "search_top"'>            <label class='search-submit-container'>              <input type='submit'/>              <b:include data='{ iconClass: "touch-icon search-icon" }' name='searchIcon'/>            </label>          <b:else/>            <b:include name='super.searchSubmit'/>          </b:if>        </b:includable>                      </b:widget>                    </b:section>                  </div></b:if>                 <b:if cond='data:view.isLayoutMode                             or data:widgets any (w => w.sectionId == "subscription")'>                  <section class='subscribe-section-container'>                    <button class='subscribe-button'><b:eval expr='data:messages.subscribe'/></button>                    <div class='subscribe-popup-container'>                      <div aria-labelledby='subscribe-title' class='subscribe-popup dialog hidden' role='dialog' tabindex='-1'>                        <div role='document'>                          <h3 class='subscribe-title' id='subscribe-title'><b:eval expr='data:messages.subscribeToThisBlog'/></h3><b:section id='subscription' name='Subscription' showaddelement='false'>                            <b:widget id='FollowByEmail1' locked='true' title='Follow by Email' type='FollowByEmail' visible='false'>                              <b:includable id='main'>  <b:include name='widget-title'/>  <b:include name='content'/></b:includable>                              <b:includable id='content'>  <div class='widget-content'>    <div class='follow-by-email-inner'>      <form action='https://feedburner.google.com/fb/a/mailverify' expr:onsubmit='"window.open(\"https://feedburner.google.com/fb/a/mailverify?uri=" + data:feedPath + "\", \"popupwindow\", \"scrollbars=yes,width=550,height=520\"); return true"' method='post' target='popupwindow'>        <input autocomplete='off' class='follow-by-email-address' expr:placeholder='data:messages.emailAddress' name='email' type='email'/>        <input class='follow-by-email-submit' disabled='true' expr:value='data:messages.getEmailNotifications' type='submit'/>        <input expr:value='data:feedPath' name='uri' type='hidden'/>        <input name='loc' type='hidden' value='en_US'/>      </form></div></div></b:includable>                            </b:widget>                          </b:section>                        </div></div></div></section>                </b:if>                 <b:if cond='data:view.isLayoutMode or data:view.isMultipleItems'>                  <nav class='top-nav' role='navigation'>                    <b:section id='page_list_top' name='Page List (Top)' showaddelement='false'>                      <b:widget id='PageList1' locked='true' title='' type='PageList' visible='false'>                        <b:widget-settings>                          <b:widget-setting name='pageListJson'><![CDATA[{'home': {'href': 'https://onepost11.blogspot.com/', 'title': 'Home', 'position': 0}}]]></b:widget-setting>                          <b:widget-setting name='homeTitle'>Home</b:widget-setting>                        </b:widget-settings>                        <b:includable id='main'>  <b:include name='widget-title'/>  <b:include name='content'/></b:includable>                        <b:includable id='content'>          <div class='widget-content'>            <b:include cond='data:widget.sectionId == "page_list_top"' name='overflowablePageList'/>            <b:include cond='data:widget.sectionId != "page_list_top"' name='pageList'/>          </div></b:includable>                        <b:includable id='overflowButton'>  <b:include name='verticalMoreIcon'/></b:includable>                        <b:includable id='overflowablePageList'>  <div class='overflowable-container'>    <div class='overflowable-contents'>      <div class='container'>        <b:with value='true' var='overflow'>        <b:with value='"tabs"' var='pageListClass'>          <b:include name='pageList'/>        </b:with>        </b:with>      </div></div><div class='overflow-button hidden'>      <b:include name='overflowButton'/>    </div></div></b:includable>                        <b:includable id='pageLink'><li>    <b:class cond='data:overflow' name='overflowable-item'/>    <b:class cond='data:link.isCurrentPage' name='selected'/>     <a expr:href='data:link.href'><data:link.title/></a>  </li></b:includable>                        <b:includable id='pageList'>  <ul>    <b:class cond='data:pageListClass' expr:name='data:pageListClass'/>    <b:loop values='data:links' var='link'>      <b:include name='pageLink'/>    </b:loop>  </ul></b:includable>                      </b:widget>                    </b:section>                  </nav>                </b:if>              </div></header>            <div class='centered-bottom'>              <b:if cond='data:view.isArchive or (data:view.isSearch and data:view.search.resultsMessage)'>                <div class='post-filter-message'>                  <div>                    <b:if cond='data:view.isArchive'>                      <data:view.archive.rangeMessage/>                    <b:elseif cond='data:view.isSearch and data:view.search.resultsMessage'/>                      <data:view.search.resultsMessageHtml/>                    </b:if>                  </div><div>                    <a expr:href='data:blog.homepageUrl'><data:messages.viewAll/></a>                  </div></div></b:if>               <main class='main-container' id='main' role='main' tabindex='-1'>                <b:if cond='data:view.isMultipleItems'>                  <h2 class='main-heading'><data:messages.posts/></h2></b:if>                 <b:section class='featured-post' id='featured_post' name='Featured Post' showaddelement='false'>                  <b:widget cond='data:view.isHomepage' id='FeaturedPost1' locked='true' title='' type='FeaturedPost' visible='true'>                    <b:widget-settings>                      <b:widget-setting name='showSnippet'>false</b:widget-setting>                      <b:widget-setting name='showPostTitle'>true</b:widget-setting>                      <b:widget-setting name='showFirstImage'>true</b:widget-setting>                      <b:widget-setting name='useMostRecentPost'>true</b:widget-setting>                    </b:widget-settings>                    <b:includable id='main' var='this'>  <b:include name='widget-title'/>  <div class='widget-content'>    <b:include name='snippetedPosts'/>  </div></b:includable>                    <b:includable id='commentsLink'>          <a class='comment-link' expr:href='data:post.commentsUrl ?: data:post.url' expr:onclick='data:post.commentsUrlOnclick'>            <b:include name='commentIcon'/>            <span class='num_comments'>              <data:post.numberOfComments/>            </span>          </a>        </b:includable>                    <b:includable id='footerBylines'>                    <b:class name='container'/>           <b:if cond='data:view.isSingleItem and data:widget.type == "Blog"'>            <b:include name='super.footerBylines'/>          <b:else/>            <b:include data='{ items: [["comments"]] }' name='footerBylinesOverride'/>          </b:if>          <b:include data='{ shareButtonClass: "post-share-buttons-bottom", overridden: true }' name='maybeAddShareButtons'/>        </b:includable>                    <b:includable id='headerByline'>          <b:if cond='data:view.isSingleItem and data:widget.type == "Blog"'>            <b:include name='super.headerByline'/>          <b:else/>            <b:include data='{ items: ["author", "timestamp", "labels"] }' name='headerBylineOverride'/>          </b:if>          <b:include cond='data:view.isSingleItem and data:widget.type == "Blog"' data='{ shareButtonClass: "post-share-buttons-top", overridden: true }' name='maybeAddShareButtons'/>        </b:includable>                    <b:includable id='postLabels'>          <b:if cond='data:view.isMultipleItems'>           <div class='labels-outer-container'>              <div class='labels-container overflowable-container'>                <div class='labels-items overflowable-contents byline post-labels'>                  <b:loop index='i' values='data:post.labels' var='label'>                    <span class='overflowable-item'>                      <a expr:href='data:label.url' rel='tag'><data:label.name/></a>                    </span>                  </b:loop>                </div><span class='labels-more overflow-button hidden'>                  <a expr:href='data:originalUrl'>+<span class='overflow-count'/></a>                </span>                                                                 </div></div><b:else/>            <b:include name='super.postLabels'/>          </b:if>        </b:includable>                    <b:includable id='postShareButtons' var='post'>                  </b:includable>                    <b:includable id='postTitle' var='post'>                    <div class='post-title-container'>            <a expr:name='data:post.id'/>            <h3 class='post-title entry-title'>              <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>                <a expr:href='data:post.link ?: data:post.url'>                  <div class='snippet-container r-snippet-container'>                    <div class='r-snippetized'>                      <data:post.title/>                    </div><b:if cond='data:post.title != ""'>                      <div class='snippet-fade r-snippet-fade hidden'/>                    </b:if>                  </div></a>              <b:else/>                <data:post.title/>              </b:if>            </h3></div></b:includable>                    <b:includable id='postWrapperClasses'>          <b:class cond='data:post.featuredImage' name='image'/>          <b:class cond='not data:post.featuredImage' name='no-image'/>          <b:class cond='data:post.labels and not data:post.labels.empty' name='has-labels'/>        </b:includable>                    <b:includable id='snippetedPostContent'>          <b:if cond='data:widget.sectionId != "featured_post"'>            <b:include name='super.snippetedPostContent'/>          <b:else/>            <b:with value='"post-thumb-" + data:post.id' var='thumbClassName'>              <b:if cond='data:post.featuredImage'>                <style>                  @media (min-width: 746px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 800, "800:272").cssEscaped'/>);} }                   @media (min-width: 1545px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 1185, "1185:272").cssEscaped'/>);} }                   @media (max-width: 400px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 400, "1:1").cssEscaped'/>); } }                   @media (min-width: 401px) and (max-width: 745px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 745, "745:400").cssEscaped'/>); } }                 </style>              </b:if>               <div expr:class='"post-wrapper hero post-" + data:post.id'>                <b:include name='postWrapperClasses'/>                <b:include name='feedPostImage'/>                 <div class='slide'>                  <div class='post hentry'>                    <b:include cond='data:postDisplay.showTitle' data='post' name='postTitle'/>                    <b:include name='headerByline'/>                    <b:include cond='data:postDisplay.showSnippet' data='post' name='postSnippet'/>                    <div class='post-footer'>                      <b:include name='footerBylines'/>                    </div></div></div></div></b:with>          </b:if>        </b:includable>                    <b:includable id='snippetedPostThumbnail'>          <div class='item-thumbnail'>            <a expr:href='data:post.url'>              <b:include data='{                                  image: data:post.featuredImage,                                  imageSizes: [280,560,840,1120,1400]                                }' name='responsiveImage'/>            </a>          </div></b:includable>                  </b:widget>                </b:section>                 <b:section class='main' id='page_body' name='Page Body' showaddelement='false'>                  <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' visible='true'>                    <b:widget-settings>                      <b:widget-setting name='showDateHeader'>false</b:widget-setting>                      <b:widget-setting name='style.textcolor'>#263238</b:widget-setting>                      <b:widget-setting name='showShareButtons'>true</b:widget-setting>                      <b:widget-setting name='showCommentLink'>true</b:widget-setting>                      <b:widget-setting name='style.urlcolor'>#424242</b:widget-setting>                      <b:widget-setting name='showAuthor'>false</b:widget-setting>                      <b:widget-setting name='style.linkcolor'>#607d8b</b:widget-setting>                      <b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>                      <b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>                      <b:widget-setting name='timestampLabel'/>                      <b:widget-setting name='showAuthorProfile'>false</b:widget-setting>                      <b:widget-setting name='style.layout'>1x1</b:widget-setting>                      <b:widget-setting name='showLabels'>true</b:widget-setting>                      <b:widget-setting name='showLocation'>true</b:widget-setting>                      <b:widget-setting name='postLabelsLabel'/>                      <b:widget-setting name='showTimestamp'>true</b:widget-setting>                      <b:widget-setting name='postsPerAd'>1</b:widget-setting>                      <b:widget-setting name='showBacklinks'>false</b:widget-setting>                      <b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>                      <b:widget-setting name='showInlineAds'>false</b:widget-setting>                      <b:widget-setting name='showReactions'>false</b:widget-setting>                    </b:widget-settings>                    <b:includable id='main'>          <b:include name='noContentPlaceholder'/>          <b:include name='super.main'/>        </b:includable>                    <b:includable id='aboutPostAuthor'>  <div class='author-name'>    <a class='g-profile' expr:href='data:post.author.profileUrl' rel='author' title='author profile'>      <span>        <data:post.author.name/>      </span>    </a>  </div><div>    <span class='author-desc'>      <data:post.author.aboutMe/>    </span>  </div></b:includable>                    <b:includable id='addComments'>  <a expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>    <b:message name='messages.postAComment'/>  </a></b:includable>                    <b:includable id='commentAuthorAvatar'>  <div class='avatar-image-container'>    <img class='author-avatar' expr:src='data:comment.authorAvatarSrc' height='35' width='35'/>  </div></b:includable>                    <b:includable id='commentDeleteIcon' var='comment'>  <span expr:class='"item-control " + data:comment.adminClass'>    <b:if cond='data:showCmtPopup'>      <div class='goog-toggle-button'>        <div class='goog-inline-block comment-action-icon'/>      </div><b:else/>      <a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:messages.deleteComment'>        <img src='https://resources.blogblog.com/img/icon_delete13.gif'/>      </a>    </b:if>  </span></b:includable>                    <b:includable id='commentForm' var='post'>          <b:with value='"90px"' var='cmtIframeInitialHeight'>            <b:include data='post' name='super.commentForm'/>          </b:with>        </b:includable>                    <b:includable id='commentFormIframeSrc' var='post'>          <b:with value='data:template.isAlternateRendering ? ("&skinvariant=" + data:template.variant) : ""' var='variantParam'>            <a expr:href='data:post.commentFormIframeSrc + "&skin=emporio" + data:variantParam' id='comment-editor-src'/>          </b:with>        </b:includable>                    <b:includable id='commentItem' var='comment'>  <div class='comment' expr:id='"c" + data:comment.id'>    <b:include cond='data:blog.enabledCommentProfileImages' name='commentAuthorAvatar'/>     <div class='comment-block'>      <div class='comment-author'>        <b:if cond='data:comment.authorUrl'>          <b:message name='messages.authorSaidWithLink'>            <b:param expr:value='data:comment.author' name='authorName'/>            <b:param expr:value='data:comment.authorUrl' name='authorUrl'/>          </b:message>        <b:else/>          <b:message name='messages.authorSaid'>            <b:param expr:value='data:comment.author' name='authorName'/>          </b:message>        </b:if>      </div><div expr:class='"comment-body" + (data:comment.isDeleted ? " deleted" : "")'>        <data:comment.body/>      </div><div class='comment-footer'>        <span class='comment-timestamp'>          <a expr:href='data:comment.url' title='comment permalink'>            <data:comment.timestamp/>          </a>          <b:include data='comment' name='commentDeleteIcon'/>        </span>      </div></div></div></b:includable>                    <b:includable id='commentList' var='comments'>  <div id='comments-block'>    <b:loop values='data:comments' var='comment'>      <b:include data='comment' name='commentItem'/>    </b:loop>  </div></b:includable>                    <b:includable id='commentPicker' var='post'>  <b:if cond='data:post.commentSource == 1'>    <b:include data='post' name='iframeComments'/>  <b:elseif cond='data:post.showThreadedComments'/>    <b:include data='post' name='threadedComments'/>  <b:else/>    <b:include data='post' name='comments'/>  </b:if></b:includable>                    <b:includable id='comments' var='post'>  <section expr:class='"comments" + (data:post.embedCommentForm ? " embed" : "")' expr:data-num-comments='data:post.numberOfComments' id='comments'>    <a name='comments'/>    <b:if cond='data:post.allowComments'>       <b:include name='commentsTitle'/>       <div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>        <b:include cond='data:post.comments' data='post.comments' name='commentList'/>      </div><b:if cond='data:post.commentPagingRequired'>        <div class='paging-control-container'>          <b:if cond='data:post.hasOlderLinks'>            <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>              <data:messages.oldest/>            </a>            <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>              <data:messages.older/>            </a>          </b:if>           <span class='comment-range-text'>            <data:post.commentRangeText/>          </span>           <b:if cond='data:post.hasNewerLinks'>            <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>              <data:messages.newer/>            </a>            <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>              <data:messages.newest/>            </a>          </b:if>        </div></b:if>       <div class='footer'>        <b:if cond='data:post.embedCommentForm'>          <b:if cond='data:post.allowNewComments'>            <b:include data='post' name='commentForm'/>          <b:else/>            <data:post.noNewCommentsText/>          </b:if>        <b:else/>          <b:if cond='data:post.allowComments'>            <b:include data='post' name='addComments'/>          </b:if>        </b:if>      </div></b:if>    <b:if cond='data:showCmtPopup'>      <div id='comment-popup'>        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>        </iframe>      </div></b:if>  </section></b:includable>                    <b:includable id='commentsLink'>          <a class='comment-link' expr:href='data:post.commentsUrl ?: data:post.url' expr:onclick='data:post.commentsUrlOnclick'>            <b:include name='commentIcon'/>            <span class='num_comments'>              <data:post.numberOfComments/>            </span>          </a>        </b:includable>                    <b:includable id='commentsTitle'>  <h3 class='title'><data:messages.comments/></h3></b:includable>                    <b:includable id='defaultAdUnit'>                    <b:with value='"/* Done in css. */"' var='style'>            <b:include name='super.defaultAdUnit'/>          </b:with>        </b:includable>                    <b:includable id='feedLinks'>                  </b:includable>                    <b:includable id='feedLinksBody' var='links'>  <div class='feed-links'>  <data:messages.subscribeTo/>  <b:loop values='data:links' var='f'>     <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>  </b:loop>  </div></b:includable>                    <b:includable id='footerBylines'>                    <b:class name='container'/>           <b:if cond='data:view.isSingleItem and data:widget.type == "Blog"'>            <b:include name='super.footerBylines'/>          <b:else/>            <b:include data='{ items: [["comments"]] }' name='footerBylinesOverride'/>          </b:if>          <b:include data='{ shareButtonClass: "post-share-buttons-bottom", overridden: true }' name='maybeAddShareButtons'/>        </b:includable>                    <b:includable id='headerByline'>          <b:if cond='data:view.isSingleItem and data:widget.type == "Blog"'>            <b:include name='super.headerByline'/>          <b:else/>            <b:include data='{ items: ["author", "timestamp", "labels"] }' name='headerBylineOverride'/>          </b:if>          <b:include cond='data:view.isSingleItem and data:widget.type == "Blog"' data='{ shareButtonClass: "post-share-buttons-top", overridden: true }' name='maybeAddShareButtons'/>        </b:includable>                    <b:includable id='homePageLink'>          <b:comment>We don't show home page links in Emporio.</b:comment>        </b:includable>                    <b:includable id='iframeComments' var='post'>  <b:if cond='data:post.allowIframeComments'>    <script expr:src='data:post.iframeCommentSrc' type='text/javascript'/>    <div class='cmt_iframe_holder' expr:data-href='data:post.url.canonical' expr:data-viewtype='data:post.viewType'/>     <b:if cond='!data:post.embedCommentForm'>      <b:include data='post' name='commentsLink'/>    </b:if>  </b:if></b:includable>                    <b:includable id='inlineAd' var='post'>                    <b:include cond='data:post.adNumber lt 3' data='post' name='super.inlineAd'/>        </b:includable>                    <b:includable id='nextPageLink'>          <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:title='data:messages.morePosts'>            <data:messages.morePosts/>          </a>        </b:includable>                    <b:includable id='post' var='post'>          <b:with value='"post-thumb-" + data:post.id' var='thumbClassName'>            <div expr:class='"post-wrapper not-hero post-" + data:post.id'>              <b:include name='postWrapperClasses'/>                             <b:include cond='data:post.featuredImage and data:view.isMultipleItems' name='standardPostImageStyle'/>              <b:include name='feedPostImage'/>               <div class='slide'>                <b:include data='post' name='super.post'/>              </div></div></b:with>        </b:includable>                    <b:includable id='postBody' var='post'>    <div class='post-body entry-content float-container' expr:id='"post-body-" + data:post.id'>    <data:post.body/>  </div></b:includable>                    <b:includable id='postBodySnippet' var='post'>          <div class='post-body entry-content' expr:id='"post-snippet-" + data:post.id'>            <b:if cond='data:post.featuredImage and not data:view.isMultipleItems'>              <b:with value='"post-" + data:post.id' var='className'>                <style>                  .<data:className/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 385, "385:185").cssEscaped'/>);}                   @media (max-width: 285px) { .<data:className/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 285, "285:185").cssEscaped'/>);} }                   @media (max-width: 385px) and (min-width: 286px) { .<data:className/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 385, "385:185").cssEscaped'/>);} }                   @media (max-width: 485px) and (min-width: 386px) { .<data:className/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 485, "485:185").cssEscaped'/>);} }                   @media (max-width: 745px) and (min-width: 486px) { .<data:className/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 585, "585:185").cssEscaped'/>);} }                 </style>                <div class='snippet-thumbnail-container'>                  <div expr:class='"snippet-thumbnail " + data:className'/>                </div></b:with>            </b:if>            <div style='clear: both;'/>          </div></b:includable>                    <b:includable id='postCommentsAndAd'>          <b:include cond='data:view.isSingleItem or                            data:widgets.FeaturedPost none (w => w.sectionId == "featured_post" and w.postId == data:post.id)' name='super.postCommentsAndAd'/>        </b:includable>                    <b:includable id='postCommentsLink'>  <b:if cond='data:view.isMultipleItems'>    <span class='byline post-comment-link container'>      <b:include cond='data:post.commentSource != 1' name='commentsLink'/>      <b:include cond='data:post.commentSource == 1' name='commentsLinkIframe'/>    </span>  </b:if></b:includable>                    <b:includable id='postFooter' var='post'>  <div class='post-footer'>    <b:include name='footerBylines'/>    <b:include data='post' name='postFooterAuthorProfile'/>  </div></b:includable>                    <b:includable id='postFooterAuthorProfile' var='post'>  <b:if cond='data:post.author.aboutMe and data:view.isPost'>    <div class='author-profile'>      <b:if cond='data:post.author.authorPhoto.url'>        <img class='author-image' expr:src='data:post.author.authorPhoto.url' width='50px'/>        <div class='author-about'>          <b:include data='post' name='aboutPostAuthor'/>        </div><b:else/>        <b:include data='post' name='aboutPostAuthor'/>      </b:if>    </div></b:if></b:includable>                    <b:includable id='postHeader' var='post'>  <b:include name='headerByline'/></b:includable>                    <b:includable id='postJumpLink' var='post'>          <b:comment>We don't show 'read more' links in Emporio.</b:comment>        </b:includable>                    <b:includable id='postLabels'>          <b:if cond='data:view.isMultipleItems'>           <div class='labels-outer-container'>              <div class='labels-container overflowable-container'>                <div class='labels-items overflowable-contents byline post-labels'>                  <b:loop index='i' values='data:post.labels' var='label'>                    <span class='overflowable-item'>                      <a expr:href='data:label.url' rel='tag'><data:label.name/></a>                    </span>                  </b:loop>                </div><span class='labels-more overflow-button hidden'>                  <a expr:href='data:originalUrl'>+<span class='overflow-count'/></a>                </span>                                                                 </div></div><b:else/>            <b:include name='super.postLabels'/>          </b:if>        </b:includable>                    <b:includable id='postMeta' var='post'>  <b:include data='post' name='postMetadataJSON'/></b:includable>                    <b:includable id='postPagination'>  <div class='blog-pager container' id='blog-pager'>    <b:include cond='data:newerPageUrl' name='previousPageLink'/>    <b:include cond='data:olderPageUrl' name='nextPageLink'/>    <b:include cond='data:view.url != data:blog.homepageUrl' name='homePageLink'/>  </div></b:includable>                    <b:includable id='postShareButtons' var='post'>                  </b:includable>                    <b:includable id='postTitle' var='post'>                    <div class='post-title-container'>            <a expr:name='data:post.id'/>            <h3 class='post-title entry-title'>              <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>                <a expr:href='data:post.link ?: data:post.url'>                  <div class='snippet-container r-snippet-container'>                    <div class='r-snippetized'>                      <data:post.title/>                    </div><b:if cond='data:post.title != ""'>                      <div class='snippet-fade r-snippet-fade hidden'/>                    </b:if>                  </div></a>              <b:else/>                <data:post.title/>              </b:if>            </h3></div></b:includable>                    <b:includable id='postWrapperClasses'>          <b:class cond='data:post.featuredImage' name='image'/>          <b:class cond='not data:post.featuredImage' name='no-image'/>          <b:class cond='data:post.labels and not data:post.labels.empty' name='has-labels'/>        </b:includable>                    <b:includable id='previousPageLink'>          <b:comment>We don't show previeus page links in Emporio.</b:comment>        </b:includable>                    <b:includable id='snippetedPostThumbnail'>          <div class='item-thumbnail'>            <a expr:href='data:post.url'>              <b:include data='{                                  image: data:post.featuredImage,                                  imageSizes: [280,560,840,1120,1400]                                }' name='responsiveImage'/>            </a>          </div></b:includable>                    <b:includable id='status-message'>  <b:if cond='data:navMessage'>  <div class='status-msg-wrap'>    <div class='status-msg-body'>      <data:navMessage/>    </div><div class='status-msg-border'>      <div class='status-msg-bg'>        <div class='status-msg-hidden'><data:navMessage/></div></div></div></div><div style='clear: both;'/>  </b:if></b:includable>                    <b:includable id='threadedCommentForm' var='post'>          <b:with value='"90px"' var='cmtIframeInitialHeight'>            <b:include data='post' name='super.threadedCommentForm'/>          </b:with>        </b:includable>                    <b:includable id='threadedCommentJs' var='post'>  <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>  <b:template-script inline='true' name='threaded_comments'/>  <script type='text/javascript'>    blogger.widgets.blog.initThreadedComments(         <data:post.commentJso/>,         <data:post.commentMsgs/>,         <data:post.commentConfig/>);   </script></b:includable>                    <b:includable id='threadedComments' var='post'>  <section class='comments threaded' expr:data-embed='data:post.embedCommentForm' expr:data-num-comments='data:post.numberOfComments' id='comments'>    <a name='comments'/>     <b:include name='commentsTitle'/>     <div class='comments-content'>      <b:if cond='data:post.embedCommentForm'>        <b:include data='post' name='threadedCommentJs'/>      </b:if>      <div id='comment-holder'>         <data:post.commentHtml/>      </div></div><p class='comment-footer'><b:if cond='data:post.allowNewComments'>        <b:include data='post' name='threadedCommentForm'/>      <b:else/>        <data:post.noNewCommentsText/>      </b:if>    </p><b:if cond='data:showCmtPopup'>      <div id='comment-popup'>        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>        </iframe>      </div></b:if>  </section></b:includable>                  </b:widget>                </b:section>              </main>               <b:section ads='true' class='vertical-ad-container' id='ads' name='Ads' showaddelement='false'>                <b:widget id='AdSense1' locked='true' title='' type='AdSense' visible='false'>                  <b:includable id='main'>  <div class='widget-content'>    <b:if cond='data:adCode'>      <data:adCode/>    <b:else/>      <b:include name='defaultAdUnit'/>    </b:if>  </div></b:includable>                  <b:includable id='defaultAdUnit'>                    <b:with value='"/* Done in css. */"' var='style'>            <b:include name='super.defaultAdUnit'/>          </b:with>        </b:includable>                </b:widget>                <b:widget id='AdSense2' locked='true' title='' type='AdSense' visible='false'>                  <b:includable id='main'>  <div class='widget-content'>    <b:if cond='data:adCode'>      <data:adCode/>    <b:else/>      <b:include name='defaultAdUnit'/>    </b:if>  </div></b:includable>                  <b:includable id='defaultAdUnit'>                    <b:with value='"/* Done in css. */"' var='style'>            <b:include name='super.defaultAdUnit'/>          </b:with>        </b:includable>                </b:widget>              </b:section>               <aside class='sidebar-container container' role='complementary'>                <b:class cond='data:view.isMultipleItems' name='sidebar-invisible'/>                <b:if cond='data:view.isMultipleItems or data:view.isLayoutMode'>                                    <div class='navigation'>                    <b:include data='{ iconClass: "touch-icon sidebar-back" }' name='closeIcon'/>                  </div><b:section class='sidebar' id='sidebar_feed' name='Sidebar' preferred='yes'>                    <b:widget id='Profile1' locked='false' title='About Me' type='Profile' visible='false'>                      <b:widget-settings>                        <b:widget-setting name='showaboutme'>true</b:widget-setting>                        <b:widget-setting name='showlocation'>false</b:widget-setting>                      </b:widget-settings>                      <b:includable id='main'>          <b:include name='content'/>        </b:includable>                      <b:includable id='authorProfileImage'>  <img class='profile-img' expr:alt='data:messages.myPhoto' expr:height='data:authorPhoto.height' expr:src='data:authorPhoto.image' expr:width='data:authorPhoto.width'/></b:includable>                      <b:includable id='content'>  <b:if cond='data:team'>    <div class='widget-content team'>      <b:include name='teamProfile'/>    </div><b:else/>    <div class='widget-content individual'>      <b:include name='userProfile'/>    </div></b:if></b:includable>                      <b:includable id='defaultProfileImage'>          <div class='default-avatar-wrapper'>            <b:include data='{ iconClass: "avatar-icon" }' name='defaultAvatarIcon'/>          </div></b:includable>                      <b:includable id='profileImage'>  <b:if cond='data:authorPhoto.image'>    <b:include name='authorProfileImage'/>  <b:else/>    <b:include name='defaultProfileImage'/>  </b:if></b:includable>                      <b:includable id='teamProfile'>          <div class='extendable'>            <b:include data='{                                 items: data:authors,                                 itemSet: "authors",                                 itemsMarkup: "super.teamProfile",                                 limit: 4                               }' name='extendableItems'/>          </div></b:includable>                      <b:includable id='teamProfileLink'>                    <a class='profile-link g-profile' expr:href='data:author.userUrl'>            <b:include name='profileImage'/>            <div class='profile-name-container'>              <span class='profile-name'><data:author.display-name/></span>              <data:messages.visitProfile/>            </div></a>        </b:includable>                      <b:includable id='userGoogleProfile'>  <div class='g-follow' data-annotation='bubble' data-height='20' expr:data-href='data:userUrl'/></b:includable>                      <b:includable id='userLocation'>  <dd class='profile-data location'><data:location/></dd></b:includable>                      <b:includable id='userProfile'>  <b:include name='userProfileImage'/>  <b:include name='userProfileInfo'/></b:includable>                      <b:includable id='userProfileData'><dt class='profile-data'>    <b:include name='userProfileLink'/>    <b:include cond='data:hasgoogleprofile' name='userGoogleProfile'/>  </dt></b:includable>                      <b:includable id='userProfileImage'>  <a expr:href='data:userUrl'>    <b:include name='profileImage'/>  </a></b:includable>                      <b:includable id='userProfileInfo'>  <div class='profile-info'><dl class='profile-datablock'>      <b:class cond='data:showlocation and data:location != ""' name='has-location'/>       <b:include name='userProfileData'/>      <b:include cond='data:showlocation and data:location != ""' name='userLocation'/>      <b:include cond='data:aboutme != ""' name='userProfileText'/>    </dl><b:include name='viewProfileLink'/>  </div></b:includable>                      <b:includable id='userProfileLink'>  <a class='profile-link g-profile' expr:href='data:userUrl' expr:style='"background-image: url(" + data:profileLogo + ");"' rel='author'>    <data:displayname/>  </a></b:includable>                      <b:includable id='userProfileText'>  <dd class='profile-textblock'>    <data:aboutme/>  </dd></b:includable>                      <b:includable id='viewProfileLink'>                    <a class='profile-link' expr:href='data:userUrl' rel='author'><data:messages.visitProfile/></a>        </b:includable>                    </b:widget>                    <b:widget id='BlogArchive1' locked='false' title='' type='BlogArchive' visible='true'>                      <b:widget-settings>                        <b:widget-setting name='showStyle'>FLAT</b:widget-setting>                        <b:widget-setting name='yearPattern'>yyyy</b:widget-setting>                        <b:widget-setting name='showWeekEnd'>true</b:widget-setting>                        <b:widget-setting name='monthPattern'>MMMM yyyy</b:widget-setting>                        <b:widget-setting name='dayPattern'>MMM dd</b:widget-setting>                        <b:widget-setting name='weekPattern'>MM/dd</b:widget-setting>                        <b:widget-setting name='chronological'>false</b:widget-setting>                        <b:widget-setting name='showPosts'>true</b:widget-setting>                        <b:widget-setting name='frequency'>MONTHLY</b:widget-setting>                      </b:widget-settings>                      <b:includable id='main' var='this'>          <details class='collapsible extendable'>            <b:attr cond='data:view.isArchive' name='open' value='open'/>            <b:with value='true' var='renderAsDetails'>            <b:with value='data:messages.archive' var='defaultTitle'>              <b:include name='super.main'/>            </b:with>            </b:with>          </details>        </b:includable>                      <b:includable id='content'>  <div class='widget-content'>    <div id='ArchiveList'>      <div expr:id='data:widget.instanceId + "_ArchiveList"'>        <b:include cond='data:this.style == "HIERARCHY"' name='hierarchy'/>        <b:include cond='data:this.style in {"FLAT", "MENU"}' name='flat'/>      </div></div></div></b:includable>                      <b:includable id='flat'>          <b:include data='{                               buttonClass: "flat-button",                               items: data:this.data,                               itemSet: "data",                               itemsMarkup: "super.flat"                             }' name='extendableItems'/>        </b:includable>                      <b:includable id='hierarchy'>          <b:include data='{                               buttonClass: "flat-button",                               limit: 1,                               items: data:this.data,                               itemSet: "data",                               itemsMarkup: "super.hierarchy"                             }' name='extendableItems'/>        </b:includable>                      <b:includable id='interval' var='intervals'>  <ul class='hierarchy'>    <b:loop values='data:intervals' var='interval'><li class='archivedate'>        <div class='hierarchy-title'>          <a class='post-count-link' expr:href='data:interval.url'>            <data:interval.name/>            <span class='post-count'><data:interval.post-count/></span>          </a>        </div><div class='hierarchy-content'>          <b:include cond='data:interval.data' data='interval.data' name='interval'/>          <b:include cond='data:interval.posts' data='interval.posts' name='posts'/>        </div></li></b:loop>  </ul></b:includable>                      <b:includable id='posts' var='posts'>  <ul class='posts hierarchy'>    <b:loop values='data:posts' var='post'><li>        <a expr:href='data:post.url'><data:post.title/></a>      </li></b:loop>  </ul></b:includable>                    </b:widget>                    <b:widget id='Label1' locked='false' title='Labels' type='Label' visible='true'>                      <b:widget-settings>                        <b:widget-setting name='sorting'>ALPHA</b:widget-setting>                        <b:widget-setting name='display'>LIST</b:widget-setting>                        <b:widget-setting name='selectedLabelsList'/>                        <b:widget-setting name='showType'>ALL</b:widget-setting>                        <b:widget-setting name='showFreqNumbers'>false</b:widget-setting>                      </b:widget-settings>                      <b:includable id='main' var='this'>          <details class='collapsible extendable'>            <b:attr cond='data:view.isLabelSearch' name='open' value='open'/>            <b:with value='true' var='renderAsDetails'>            <b:with value='data:messages.labels' var='defaultTitle'>              <b:include name='super.main'/>            </b:with>            </b:with>          </details>        </b:includable>                      <b:includable id='cloud'>          <b:include data='{                               buttonClass: "flat-button",                               items: data:this.labels,                               itemSet: "labels",                               itemsMarkup: "super.cloud"                             }' name='extendableItems'/>        </b:includable>                      <b:includable id='content'>  <div class='widget-content'>    <b:class expr:name='data:this.display + "-label-widget-content"'/>    <b:include cond='data:this.display == "list"' name='list'/>    <b:include cond='data:this.display == "cloud"' name='cloud'/>  </div></b:includable>                      <b:includable id='list'>          <b:include data='{                               buttonClass: "flat-button",                               items: data:this.labels,                               itemSet: "labels",                               itemsMarkup: "super.list"                             }' name='extendableItems'/>        </b:includable>                    </b:widget>                    <b:widget id='ReportAbuse1' locked='true' title='' type='ReportAbuse' visible='true'>                      <b:includable id='main'>  <b:include name='reportAbuse'/></b:includable>                    </b:widget>                    <b:widget id='HTML1' locked='false' title='Blog Kata Mutiara Cinta and website design' type='HTML' visible='false'>                      <b:widget-settings>                        <b:widget-setting name='content'><![CDATA[<a href="https://web.facebook.com/groups/jual.beli.mobil.tasikmalaya/" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjytgRwrzNBZqgup-YkweIGJ6aKUITq7gwj_gQJmuhSzHS7BVckTkRKiDRSncqGLNfpYSpeAgQTtQ_srfu_LUHnOYY_BeAXxGUyxs7wyOBcRgoQehDnUxE8WMp-mh_iu_DY-Ro3g_AR-9FH/s1600/Capture.PNG" /></a>]]></b:widget-setting>                      </b:widget-settings>                      <b:includable id='main'>  <b:include name='widget-title'/>  <div class='widget-content'>    <data:content/>  </div></b:includable>                    </b:widget>                    <b:widget id='HTML2' locked='false' title='' type='HTML' visible='false'>                      <b:includable id='main'>  <b:include name='widget-title'/>  <div class='widget-content'>    <data:content/>  </div></b:includable>                    </b:widget>                    <b:widget id='HTML3' locked='false' mobile='no' title='Widget 1' type='HTML' visible='false'>                      <b:widget-settings>                        <b:widget-setting name='content'/>                      </b:widget-settings>                      <b:includable id='main'>  <b:include name='widget-title'/>  <div class='widget-content'>    <data:content/>  </div></b:includable>                    </b:widget>                    <b:widget id='HTML4' locked='false' mobile='yes' title='Widget 2' type='HTML' visible='false'>                      <b:widget-settings>                        <b:widget-setting name='content'/>                      </b:widget-settings>                      <b:includable id='main'>  <b:include name='widget-title'/>  <div class='widget-content'>    <data:content/>  </div></b:includable>                    </b:widget>                  </b:section>                </b:if>                <b:if cond='data:view.isSingleItem or data:view.isLayoutMode'>                  <b:section id='sidebar_item' name='Sidebar (Item Page)'>                    <b:widget cond='data:posts any (p => p.id != data:view.postId)' id='PopularPosts1' locked='true' title='' type='PopularPosts' visible='true'>                      <b:widget-settings>                        <b:widget-setting name='numItemsToShow'>3</b:widget-setting>                        <b:widget-setting name='showThumbnails'>true</b:widget-setting>                        <b:widget-setting name='showSnippets'>true</b:widget-setting>                        <b:widget-setting name='timeRange'>LAST_YEAR</b:widget-setting>                      </b:widget-settings>                      <b:includable id='main'>          <b:comment>Default the title to 'Popular posts from this blog'.</b:comment>          <b:with value='data:messages.popularPosts' var='defaultTitle'>            <b:include name='super.main'/>          </b:with>        </b:includable>                      <b:includable id='commentsLink'>          <a class='comment-link' expr:href='data:post.commentsUrl ?: data:post.url' expr:onclick='data:post.commentsUrlOnclick'>            <b:include name='commentIcon'/>            <span class='num_comments'>              <data:post.numberOfComments/>            </span>          </a>        </b:includable>                      <b:includable id='itemBody' var='post'>          <div class='item-content'>            <b:with value='"popular-posts"' var='snippetPrefix'>              <b:include cond='data:postDisplay.showSnippet' data='post' name='postSnippet'/>            </b:with>          </div></b:includable>                      <b:includable id='snippetedPostContent'>          <b:comment>Move the thumbnail outside of the body and above the title</b:comment>          <b:include cond='data:postDisplay.showFeaturedImage and data:post.featuredImage.isResizable' data='post' name='snippetedPostThumbnail'/>          <b:include data='post' name='snippetedPostTitle'/>          <b:include data='post' name='itemBody'/>        </b:includable>                      <b:includable id='snippetedPostThumbnail'>          <div class='item-thumbnail'>            <a expr:href='data:post.url'>              <b:include data='{                                  image: data:post.featuredImage,                                  imageSizes: [280,560,840,1120,1400]                                }' name='responsiveImage'/>            </a>          </div></b:includable>                    </b:widget>                  </b:section>                </b:if>              </aside>               </div>          </div>        </div>      </b:with>       <b:section class='footer' id='footer' name='Footer' showaddelement='false' tag='footer'>        <b:widget cond='not data:features.hideAttribution' id='Attribution1' locked='true' title='' type='Attribution' visible='true'>          <b:widget-settings>            <b:widget-setting name='copyright'/>          </b:widget-settings>          <b:includable id='main' var='this'>  <div class='widget-content'>    <div class='blogger'>      <a expr:href='data:bloggerUrl'>        <b:include name='flatBloggerIcon'/>        <b:message name='messages.poweredByBlogger'/>      </a>    </div><b:if cond='data:imageAuthor'>      <div class='image-attribution'>        <b:if cond='data:imageAuthor.url'>          <b:message name='messages.templateImagesByLink'>            <b:param expr:value='data:imageAuthor.url'/>            <b:param expr:value='data:imageAuthor.name'/>          </b:message>        <b:else/>          <b:message name='messages.templateImagesBy'>            <b:param expr:value='data:imageAuthor.name'/>          </b:message>        </b:if>      </div></b:if>     <b:if cond='data:copyright != ""'>      <div class='copyright'><data:copyright/></div></b:if>  </div></b:includable>        </b:widget>      </b:section>    </div><b:template-script async='true' name='vegeclub' version='1.0.0'/>    <b:include data='blog' name='google-analytics'/>  </body></html>

TEMPLATE BLOG YANG MOBILE FRIENDLY DARI GOOGLE

Baru baru ini di tahun 2017 google memberikan 4 desain tema yang keren untuk blogger , kelebihan dari tema baru ini adalah benar benar mobile friendly . Tampilan blog anda sekarang akan menjadi semakin cantik saja☺ .

Menurut joerobert empat tema ini sudah benar benar sangat bagus , jadi untuk anda yang blognya belum mobile friendly , sekarang harus gembira karena anda tidak perlu mencari desain template lagi, cukup masuk ke akun blog anda dan ganti tempale degan yang baru.

Desainnya cukup keren , sudah ada menu: Search Box, Social Share Button , sticky , dan lain lain. Berikut gambar dari keempat desain baru ini

Contempo (Baru)

Emporio (Baru)

Soho (Baru)

Terkemuka (Baru)

Selamat.. blog anda sekarang sudah mobile friendly ☺ , anda bisa memilih dari kempat tema diatas atau pake 4 template diatas untuk empat blog anda.

Jumat, 10 Maret 2017

BLOGSPOT WIDGET SCRIPT HTML COPY PASTE

This widget is to display a list of recent posts based on each label. you can add on a sidebar to display recent post by a particular label.

HOW TO MAKE A WIDGET RECENT POST BY TAG LABEL

recent post widget for blogger with thumbnails

Cara membuat recent post dengan thumbnail seperti di joerobert

widget recent post keren

Hanya copy paste saja script dibawah ini pada sidebar blog anda "HTML/javascript"

Select All

Kemudian anda bisa mensetting ininya:

var rcp_numposts=5; untuk jumlah judul yang ditampilkan
var rcp_snippet_length=140; untuk jumlah keterangan yang ditampilkan
var rcp_info='no'; untuk menampilkan keterangan
var rcp_comment='Comments';
var rcp_disable='T?t Nh?n xét';

***Selesai***

Baca juga!! selamat.. google sekarang memberi template blog yang seo

Cara Membuat Tahun Copyright berganti otomatis pada footer

contoh : Tahun Copyright pada joerobert berganti otomatis setiap tahun

Copy paste saja script dibawah ini pada bagian footer blog anda
Select All