Premailer: pre-flight for HTML email

HTML Results

<!DOCTYPE html>
<html dir="ltr" lang="id" style="font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>xeqqtwq</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">

<meta content="#eeeeee" name="theme-color">

<meta content="#eeeeee" name="msapplication-navbutton-color">
<meta content="blogger" name="generator">
<link href="https://xeqqtwq.blogspot.com/favicon.ico" rel="icon" type="image/x-icon">
<link href="https://xeqqtwq.blogspot.com/" rel="canonical">
<link rel="alternate" type="application/atom+xml" title="xeqqtwq - Atom" href="https://xeqqtwq.blogspot.com/feeds/posts/default">
<link rel="alternate" type="application/rss+xml" title="xeqqtwq - RSS" href="https://xeqqtwq.blogspot.com/feeds/posts/default?alt=rss">
<link rel="service.post" type="application/atom+xml" title="xeqqtwq - Atom" href="https://www.blogger.com/feeds/7711590567071007913/posts/default">
<link rel="me" href="https://www.blogger.com/profile/06299435481118820619">

<meta content="https://xeqqtwq.blogspot.com/" property="og:url">
<meta content="xeqqtwq" property="og:title">
<meta content="" property="og:description">

}
@keyframes mspin-singlecolor-large-film {

}
@-webkit-keyframes mspin-rotate {

}
@keyframes mspin-rotate {

}
@-webkit-keyframes mspin-revrot {

}
@keyframes mspin-revrot {

}
.skip-navigation:focus {
box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2); height: 50px;
}
body .CSS_LIGHTBOX {
z-index: 900;
}
.link-copied-dialog .goog-buttonset-default:focus {
outline: 0;
}
.paging-control-container .comment-range-text::after {
color: #2196f3;
}
.paging-control-container .comment-range-text::after {
content: "\b7"; cursor: default; padding-left: 8px; pointer-events: none;
}
.paging-control-container .paging-control::after {
content: "\b7"; cursor: default; padding-left: 8px; pointer-events: none;
}
.paging-control-container .comment-range-text:last-child::after {
content: none;
}
.paging-control-container .paging-control:last-child::after {
content: none;
}
.touch-icon:active {
background-color: rgba(153,153,153,.4); border-radius: 50%;
}
.touch-icon:focus {
background-color: rgba(153,153,153,.4); border-radius: 50%;
}
.touch-icon-button .touch-icon:active {
background-color: transparent;
}
.touch-icon-button .touch-icon:focus {
background-color: transparent;
}
.touch-icon-button:active .touch-icon {
background-color: rgba(153,153,153,.4); border-radius: 50%;
}
.touch-icon-button:focus .touch-icon {
background-color: rgba(153,153,153,.4); border-radius: 50%;
}
.snippet-fade:after {
content: "\2026";
}
.snippet-fade:after {
float: right;
}
.collapsible:focus {
outline: 0;
}
.collapsible>summary:focus {
outline: 0;
}
.collapsible:focus>summary {
background-color: transparent;
}
.collapsible>summary:focus {
background-color: transparent;
}
@-webkit-keyframes ripple-effect {

}
@keyframes ripple-effect {

}
.collapsed-header .centered-top-container .search-input input.no-cursor:focus {
outline: 0;
}
.search-input input.no-cursor:focus {
outline: 0;
}
.sharing-open.touch-icon-button:active .touch-icon {
background-color: transparent;
}
.sharing-open.touch-icon-button:focus .touch-icon {
background-color: transparent;
}
.share-buttons li .sharing-platform-button:focus {
background-color: rgba(128,128,128,.1); outline: 0;
}
.share-buttons li .sharing-platform-button:hover {
background-color: rgba(128,128,128,.1); outline: 0;
}
.BlogArchive .post-count::before {

}
.Label .label-count::before {

}
.BlogArchive .post-count::after {
content: ")";
}
.Label .label-count::after {
content: ")";
}
body.sidebar-visible {
overflow-y: hidden;
}
.dialog input[type=email]:focus {
border-bottom: solid 2px #2196f3; padding-bottom: 6px;
}
.dialog input[type=text]:focus {
border-bottom: solid 2px #2196f3; padding-bottom: 6px;
}
.dialog input.no-cursor:focus {
outline: 0;
}
.dialog input.no-cursor:focus {
outline: 0;
}
body#layout .bg-photo {
display: none;
}
body#layout .bg-photo-overlay {
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 {
display: none;
}
body#layout .search {
display: none;
}
body.collapsed-header .centered-top-placeholder .svg-icon-24 {
fill: #ffffff;
}
body.collapsed-header .centered-top-container .svg-icon-24 {
fill: #707070;
}
body {
background-color: #eeeeee; color: #757575; font: 15px Roboto, sans-serif; margin: 0; min-height: 100vh;
}
img {
max-width: 100%;
}
a:visited {
color: #2196f3;
}
a:hover {
color: #2196f3;
}
.Header h1 a:hover {
color: #ffffff;
}
.Header h1 a:visited {
color: #ffffff;
}
.sticky .Header h1 a:hover {
color: #757575;
}
.sticky .Header h1 a:visited {
color: #757575;
}
.blog-pager a:visited {
color: #2196f3;
}
.blog-pager a:hover {
color: #2196f3;
}
.post-title a:hover {
color: #212121;
}
.post-title a:visited {
color: #212121;
}
.flat-button.ripple:hover {
background-color: rgba(33,150,243,.12);
}
a:active.timestamp-link {
color: inherit; font: inherit; text-decoration: inherit;
}
a:visited.timestamp-link {
color: inherit; font: inherit; text-decoration: inherit;
}
.PopularPosts a:hover {
color: #2196f3;
}
.PopularPosts a:visited {
color: #2196f3;
}
.PopularPosts .post-title a:hover {
color: #212121; font-size: 18px; font-weight: 700; line-height: 24px;
}
.PopularPosts .post-title a:visited {
color: #212121; font-size: 18px; font-weight: 700; line-height: 24px;
}
.Attribution a:hover {
color: #2196f3;
}
.Attribution a:visited {
color: #2196f3;
}
body.sidebar-visible .page_body {
overflow-y: scroll;
}
body.sidebar-visible .bg-photo-container {
overflow-y: scroll;
}
body#layout .hidden {
display: inherit;
}
body#layout .invisible {
display: inherit;
}
body#layout .navigation {
display: none;
}
body#layout .page {
display: inline-block; left: inherit; position: relative; vertical-align: top;
}
body#layout .sidebar_top {
display: inline-block; left: inherit; position: relative; vertical-align: top;
}
body#layout .sidebar_bottom {
display: inline-block; left: inherit; position: relative; vertical-align: top;
}
body#layout .page {
float: right; margin-left: 20px; width: 55%;
}
body#layout .sidebar-container {
float: right; width: 40%;
}
body#layout .hamburger-menu {
display: none;
}
@media screen and (max-width:800px) {
  body.item-view .post-body a[imageanchor="1"][style*="float: left;"] {
    float: none !important; clear: none !important;
  }
  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>.separator:first-child>a[imageanchor="1"]:first-child {
    margin-top: 20px;
  }
  .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;
  }
  .blog-name {
    margin-top: 0;
  }
  body.item-view .blog-name {
    margin: 0 48px;
  }
  .centered-bottom {
    padding: 8px;
  }
  body.item-view .centered-bottom {
    padding: 0;
  }
  .page_body .centered {
    padding: 10px 0;
  }
  body.item-view #header {
    margin-right: 0;
  }
  body.item-view .widget.Header {
    margin-right: 0;
  }
  body.collapsed-header .centered-top-container .blog-name {
    display: block;
  }
  body.collapsed-header .centered-top-container .widget.Header h1 {
    text-align: center;
  }
  .widget.Header header {
    padding: 0;
  }
  .widget.Header h1 {
    font-size: 24px; line-height: 24px; margin-bottom: 13px;
  }
  body.item-view .widget.Header h1 {
    text-align: center;
  }
  body.item-view .widget.Header p {
    text-align: center;
  }
  .blog-name .widget.PageList {
    padding: 0;
  }
  body.item-view .centered-top {
    margin-bottom: 5px;
  }
  .search-action {
    margin-bottom: -8px;
  }
  .search-input {
    margin-bottom: -8px;
  }
  .search form {
    margin-bottom: 8px;
  }
  body.item-view .subscribe-section-container {
    margin: 5px 0 0 0; width: 100%;
  }
  #page_body.section div.widget.FeaturedPost {
    padding: 16px;
  }
  div.widget.PopularPosts {
    padding: 16px;
  }
  div.widget.Blog .blog-posts .post-outer-container {
    padding: 16px;
  }
  div.widget.Blog .blog-posts .post-outer-container .post-outer {
    padding: 0;
  }
  .post:first-child {
    margin: 0;
  }
  .post-body .snippet-thumbnail {
    margin: 0 3vw 3vw 0;
  }
  .post-body .snippet-thumbnail img {
    height: 20vw; width: 20vw; max-height: 128px; max-width: 128px;
  }
  div.widget.PopularPosts div.item-thumbnail {
    margin: 0 3vw 3vw 0;
  }
  div.widget.PopularPosts div.item-thumbnail img {
    height: 20vw; width: 20vw; max-height: 88px; max-width: 88px;
  }
  .post-title {
    line-height: 1;
  }
  .post-title {
    font-size: 20px;
  }
  .post-title a {
    font-size: 20px;
  }
  #page_body.section div.widget.FeaturedPost h3 a {
    font-size: 22px;
  }
  .mobile-ad .inline-ad {
    display: block;
  }
  .page_body.has-vertical-ads .vertical-ad-container {
    display: none;
  }
  .page_body.has-vertical-ads .vertical-ad-container ins {
    display: none;
  }
  .page_body.has-vertical-ads .centered .centered-bottom {
    display: block; width: auto;
  }
  .page_body.has-vertical-ads .centered .centered-top {
    display: block; width: auto;
  }
  div.post-filter-message div {
    padding: 8px 16px;
  }
}
@media screen and (max-width:1439px) {
  .sidebar-container {
    bottom: 0; position: fixed; top: 0; left: 0; right: auto;
  }
  .sidebar-container.sidebar-invisible {
    -webkit-transition-timing-function: cubic-bezier(.4,0,.6,1); transition-timing-function: cubic-bezier(.4,0,.6,1); -webkit-transform: translateX(-284px); -ms-transform: translateX(-284px); transform: translateX(-284px);
  }
}
@media screen and (min-width:1440px) {
  .sidebar-container {
    position: absolute; top: 0; left: 0; right: auto;
  }
  .sidebar-container .navigation {
    display: none;
  }
  .sidebar-container {
    margin-top: 480px; min-height: calc(100% - 480px); overflow: visible; z-index: 32;
  }
  .sidebar-container .sidebar_top_wrapper {
    background-color: #f7f7f7; height: 480px; margin-top: -480px;
  }
  .sidebar-container .sidebar_top {
    display: flex; height: 480px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; max-height: 480px;
  }
  .sidebar-container .sidebar_bottom {
    max-width: 284px; width: 284px;
  }
  body.collapsed-header .sidebar-container {
    z-index: 15;
  }
  .sidebar-container .sidebar_top:empty {
    display: none;
  }
  .sidebar-container .sidebar_top>:only-child {
    -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; width: 100%;
  }
  .sidebar_top_wrapper.no-items {
    display: none;
  }
  .profile-snippet .snippet-fade {
    background: linear-gradient(to left,#f7f7f7 0,#f7f7f7 20%,rgba(247, 247, 247, 0) 100%);
  }
  body {
    position: relative;
  }
  body.item-view .blog-name {
    margin-left: 48px;
  }
  .page_body {
    margin-left: 284px;
  }
  .search {
    margin-left: 0;
  }
  .search.focused {
    width: 100%;
  }
  .sticky {
    padding-left: 284px;
  }
  .hamburger-menu {
    display: none;
  }
  body.collapsed-header .page_body .centered-top-container {
    padding-left: 284px; padding-right: 0; width: 100%;
  }
  body.collapsed-header .centered-top-container .search.focused {
    width: 100%;
  }
  body.collapsed-header .centered-top-container .blog-name {
    margin-left: 0;
  }
  body.collapsed-header.item-view .centered-top-container .search.focused {
    width: calc(100% - 50px);
  }
  body.collapsed-header.item-view .centered-top-container .blog-name {
    margin-left: 40px;
  }
}
@media (max-width:800px) {
  .blog-name div.widget.Subscribe {
    margin-bottom: 16px;
  }
  body.item-view .blog-name div.widget.Subscribe {
    margin: 8px auto 16px auto; width: 100%;
  }
}
@media (max-width: 480px) {
  .bg-photo {
    background-image: url('https\:\/\/themes.googleusercontent.com\/image?id=L1lcAxxz0CLgsDzixEprHJ2F38TyEjCyE3RSAjynQDks0lT1BDc1OxXKaTEdLc89HPvdB11X9FDw&options=w480');
  }
}
@media (max-width: 640px) and (min-width: 481px) {
  .bg-photo {
    background-image: url('https\:\/\/themes.googleusercontent.com\/image?id=L1lcAxxz0CLgsDzixEprHJ2F38TyEjCyE3RSAjynQDks0lT1BDc1OxXKaTEdLc89HPvdB11X9FDw&options=w640');
  }
}
@media (max-width: 800px) and (min-width: 641px) {
  .bg-photo {
    background-image: url('https\:\/\/themes.googleusercontent.com\/image?id=L1lcAxxz0CLgsDzixEprHJ2F38TyEjCyE3RSAjynQDks0lT1BDc1OxXKaTEdLc89HPvdB11X9FDw&options=w800');
  }
}
@media (max-width: 1200px) and (min-width: 801px) {
  .bg-photo {
    background-image: url('https\:\/\/themes.googleusercontent.com\/image?id=L1lcAxxz0CLgsDzixEprHJ2F38TyEjCyE3RSAjynQDks0lT1BDc1OxXKaTEdLc89HPvdB11X9FDw&options=w1200');
  }
}
@media (min-width: 1201px) {
  .bg-photo {
    background-image: url('https\:\/\/themes.googleusercontent.com\/image?id=L1lcAxxz0CLgsDzixEprHJ2F38TyEjCyE3RSAjynQDks0lT1BDc1OxXKaTEdLc89HPvdB11X9FDw&options=w1600');
  }
}
</style>
</head>
<body class="version-1-3-3 variant-indie_light" style="overflow-wrap: break-word; word-break: break-word; word-wrap: break-word; color: #757575; min-height: 100vh; margin: 0; font: 15px Roboto, sans-serif;" bgcolor="#eeeeee">
<a class="skip-navigation" href="#main" tabindex="0" style="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; text-decoration: none;">
Langsung ke konten utama
</a>
<div class="page">
<div class="bg-photo-overlay" style="background: 0% 0% / cover; height: 480px; position: absolute; width: 100%; z-index: 2;"></div>
<div class="bg-photo-container" style="height: 480px; overflow: hidden; position: absolute; width: 100%; z-index: 1;">
<div class="bg-photo" style="background-attachment: scroll !important; -webkit-filter: blur(0px); filter: blur(0px); height: calc(100% + 2 * 0px); left: 0px; position: absolute; top: 0px; width: calc(100% + 2 * 0px); background: #eeeeee url('https\:\/\/themes.googleusercontent.com\/image?id=L1lcAxxz0CLgsDzixEprHJ2F38TyEjCyE3RSAjynQDks0lT1BDc1OxXKaTEdLc89HPvdB11X9FDw') no-repeat top center / cover;"></div>
</div>
<div class="page_body" style="position: relative; z-index: 20;">
<div class="centered" style="box-sizing: border-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; max-width: 922px; min-height: 100vh; margin: 0 auto; padding: 24px 0;">
<div class="centered-top-placeholder" style="display: none; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; padding: 0 16px;"></div>
<header class="centered-top-container" role="banner" style="display: block; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; padding: 0 16px;">
<div class="centered-top" style="position: relative;">
<button class="svg-icon-24-button hamburger-menu flat-icon-button ripple" style="color: inherit; font-style: normal; font-variant: normal; font-weight: normal; font-size: normal; line-height: 0; overflow: visible; text-transform: none; -webkit-appearance: button; cursor: pointer; height: 24px; width: 24px; min-width: 24px; background: 0 0; outline: 0; box-sizing: content-box; display: inline-block; border-radius: 50%; position: relative; float: left; margin: 0 -12px -12px; padding: 12px; border-width: 0;">
<svg class="svg-icon-24" style="overflow: hidden; cursor: pointer; height: 24px; width: 24px; min-width: 24px; z-index: 1; fill: #ffffff;">
<use xlink:href="/responsive/sprite_v1_6.css.svg#ic_menu_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>
</button>
<div class="search" style="display: flex; line-height: 24px; width: 24px; border-bottom-width: 1px; border-bottom-color: rgba(255, 255, 255, 0); border-bottom-style: solid; float: right; position: relative; -webkit-transition-property: width; transition-property: width; -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1); transition-timing-function: cubic-bezier(.4,0,.2,1); z-index: 101;">
<button aria-label="Telusuri" class="search-expand touch-icon-button" style="color: inherit; font-style: normal; font-variant: normal; font-weight: normal; font-size: normal; line-height: normal; overflow: visible; text-transform: none; -webkit-appearance: button; cursor: pointer; background: 0 0; outline: 0; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; margin: 0; padding: 0; border-width: 0;">
<div class="flat-icon-button ripple" style="background: 0 0; outline: 0; cursor: pointer; box-sizing: content-box; display: inline-block; line-height: 0; border-radius: 50%; position: relative; margin: -12px; padding: 12px; border-width: 0;">
<svg class="svg-icon-24 search-expand-icon" style="overflow: hidden; cursor: pointer; height: 24px; width: 24px; min-width: 24px; z-index: 1; fill: #ffffff;">
<use xlink:href="/responsive/sprite_v1_6.css.svg#ic_search_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>
</div>
</button>
<div class="section" id="search_top" name="Search (Top)"><div class="widget BlogSearch" data-version="2" id="BlogSearch1" style="margin-bottom: 16px;">
<h3 class="title" style="display: none; color: #757575; font-size: 16px; line-height: 28px;">
Cari Blog Ini
</h3>
<div class="widget-content" role="search">
<form action="https://xeqqtwq.blogspot.com/search" target="_top" style="z-index: 101; display: flex; -webkit-box-flex: 1; -webkit-flex: 1 0 0; -ms-flex: 1 0 0px; flex: 1 0 0; border-bottom-width: 1px; border-bottom-color: transparent; border-bottom-style: solid; padding-bottom: 8px; height: 36px; -webkit-transition-property: border-color; transition-property: border-color; -webkit-transition-delay: .5s; transition-delay: .5s; -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1); transition-timing-function: cubic-bezier(.4,0,.2,1);">
<div class="search-input" style="display: none; -webkit-box-flex: 1; -webkit-flex: 1 0 1px; -ms-flex: 1 0 1px; flex: 1 0 1px; height: 48px;">
<input aria-label="Cari blog ini" autocomplete="off" name="q" placeholder="Cari blog ini" value="" style="color: #ffffff; background: 0 0; box-sizing: border-box; display: block; outline: 0; width: 100%; height: 48px; margin: 0; padding: 0; border-width: 0; font: 16px/48px Roboto, sans-serif;">
</div>
<input class="search-action flat-button" type="submit" value="Telusuri" style="color: #ffffff; font-style: normal; font-variant: normal; font-weight: 700; font-size: normal; line-height: normal; -webkit-appearance: button; cursor: pointer; display: none; text-transform: uppercase; border-radius: 2px; background: 0 0; height: 48px; margin: 0 -8px -8px; padding: 8px; border-width: 0;">
</form>
</div>
</div></div>
</div>
<div class="clearboth" style="clear: both;"></div>
<div class="blog-name container" style="-webkit-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: .5s; transition-duration: .5s; margin: 24px 0 16px;">
<div class="container section" id="header" name="Tajuk"><div class="widget Header" data-version="2" id="Header1" style="margin-bottom: 16px;">
<div class="header-widget">
<div>
<h1 style="color: #ffffff; width: 100%; margin: 0 0 13px; font: bold 45px Roboto, sans-serif;" align="center">
xeqqtwq
</h1>
</div>
<p style="color: #ffffff; opacity: .8; margin: 0 0 13px;" align="center">
</p>
</div>
</div></div>
<nav role="navigation" style="display: block;">
<div class="clearboth no-items section" id="page_list_top" name="Daftar Halaman (Atas)" style="clear: both;">
</div>
</nav>
</div>
</div>
</header>
<div style="-webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;">
<div class="vertical-ad-container no-items section" id="ads" name="Iklan" style="float: right; margin-right: 16px; width: 128px;">
</div>
<main class="centered-bottom" id="main" role="main" tabindex="-1" style="display: block; outline: 0; padding: 0 16px;">
<h2 class="main-heading" style="position: absolute; clip: rect(1px,1px,1px,1px); height: 1px; width: 1px; overflow: hidden; padding: 0; border-width: 0;">Postingan</h2>
<div class="main section" id="page_body" name="Badan Halaman">
<div class="widget Blog" data-version="2" id="Blog1" style="margin-bottom: 16px;">
<div class="blog-posts hfeed container">
<div class="post-outer-container" style="background-color: #ffffff; min-height: 40px; width: auto; margin-bottom: 0; padding: 30px 40px;">
<div class="no-posts-message" style="line-height: 40px;" align="center">
Tak ada apa pun di sini!
</div>
</div>
</div>
<div class="blog-posts hfeed container">
</div>
<div class="blog-pager container" id="blog-pager" style="margin: 2em 0;" align="center">
</div>
</div>
</div>
</main>
</div>
<footer class="footer section" id="footer" name="Footer" style="display: block; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; margin-top: auto;"><div class="widget Attribution" data-version="2" id="Attribution1" style="margin-top: 1em; margin-bottom: 16px; color: #757575;" align="center">
<div class="widget-content" style="line-height: 24px; margin-top: .5em;">
<div class="blogger" style="line-height: 24px; margin-top: .5em;">
<a href="https://www.blogger.com" rel="nofollow" style="background-color: transparent; text-decoration: none; color: #2196f3;">
<svg class="svg-icon-24" style="overflow: hidden; vertical-align: bottom; cursor: pointer; height: 24px; width: 24px; min-width: 24px; fill: #707070;">
<use xlink:href="/responsive/sprite_v1_6.css.svg#ic_post_blogger_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>
Diberdayakan oleh Blogger
</a>
</div>
<div class="image-attribution" style="line-height: 24px; margin-top: 1.5em; font-size: .7em;">
Gambar tema oleh <a href="http://www.offset.com/photos/394244" style="background-color: transparent; text-decoration: none; color: #2196f3;">Michael Elkan</a>
</div>
</div>
</div></footer>
</div>
</div>
</div>
<aside class="sidebar-container container sidebar-invisible" role="complementary" style="display: block; background-color: #ffffff; max-width: 284px; overflow-y: auto; -webkit-transition-property: -webkit-transform; transition-property: transform,-webkit-transform; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-timing-function: cubic-bezier(0,0,.2,1); transition-timing-function: cubic-bezier(0,0,.2,1); width: 284px; z-index: 101; -webkit-overflow-scrolling: touch; box-shadow: 1px 1px 3px rgba(0,0,0,.1);">
<div class="navigation" style="line-height: 0; background-color: #ffffff; padding: 16px;">
<button class="svg-icon-24-button flat-icon-button ripple sidebar-back" style="color: inherit; font-style: normal; font-variant: normal; font-weight: normal; font-size: normal; line-height: 0; overflow: visible; text-transform: none; -webkit-appearance: button; cursor: pointer; height: 24px; width: 24px; min-width: 24px; background: 0 0; outline: 0; box-sizing: content-box; display: inline-block; border-radius: 50%; position: relative; margin: -12px; padding: 12px; border-width: 0;">
<svg class="svg-icon-24" style="overflow: hidden; cursor: pointer; height: 24px; width: 24px; min-width: 24px; z-index: 1; fill: #707070;">
<use xlink:href="/responsive/sprite_v1_6.css.svg#ic_arrow_back_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>
</button>
</div>
<div class="sidebar_top_wrapper" style="background-color: #ffffff;">
<div class="sidebar_top section" id="sidebar_top" name="Bilah Sisi (Atas)" style="overflow: auto;"><div class="widget Profile" data-version="2" id="Profile1" style="background: 0 0; width: 100%; margin: 0; padding: 0 0 16px;">
<div class="wrapper solo">
<div class="widget-content individual" style="" align="center">
<a href="https://www.blogger.com/profile/06299435481118820619" rel="nofollow" style="background-color: transparent; text-decoration: none; color: #2196f3;">
<div class="default-avatar-wrapper">
<svg class="svg-icon-24 avatar-icon" style="overflow: hidden; cursor: pointer; height: 120px; width: 120px; min-width: 24px; border-radius: 50%; box-sizing: border-box; fill: #707070; margin: auto; padding: 25px; border: 1px solid #707070;">
<use xlink:href="/responsive/sprite_v1_6.css.svg#ic_person_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>
</div>
</a>
<div class="profile-info">
<dl class="profile-datablock">
<dt class="profile-data">
<a class="profile-link g-profile" href="https://www.blogger.com/profile/06299435481118820619" rel="author nofollow" style="background-color: transparent; background: 0 0; box-shadow: none; color: #212121; cursor: pointer; font-size: .9em; font-weight: 700; outline: 0; text-decoration: none; text-transform: uppercase; width: auto; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-bottom: 1em; opacity: .87; overflow: hidden; padding: 1em; border-width: 0;">
Resa Yossa
</a>
</dt>
</dl>
<a class="profile-link visit-profile pill-button" href="https://www.blogger.com/profile/06299435481118820619" rel="author" style="background-color: transparent; background: 0 0; box-shadow: none; color: #2196f3; cursor: pointer; font-size: 12px; font-weight: 400; outline: 0; text-decoration: none; text-transform: uppercase; width: auto; border-radius: 12px; display: inline-block; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-bottom: 1em; opacity: .87; overflow: hidden; line-height: normal; padding: 5px 20px; border-style: solid; border-width: 1px;">
Kunjungi profil
</a>
</div>
</div>
</div>
</div></div>
</div>
<div class="sidebar_bottom section" id="sidebar_bottom" name="Bilah Sisi (Bawah)" style="background-color: #ffffff; width: 100%; padding-top: 16px;">
<div class="widget ReportAbuse" data-version="2" id="ReportAbuse1" style="background: 0 0; margin: 0 16px; padding: 0 0 16px;">
<h3 class="title" style="color: #212121; font-size: 16px; line-height: 28px; margin: 0;">
<a class="report_abuse" href="https://www.blogger.com/go/report-abuse" rel="noopener nofollow" target="_blank" style="background-color: transparent; text-decoration: none; color: #2196f3; font-weight: 400;">
Laporkan Penyalahgunaan
</a>
</h3>
</div>
</div>
</aside>

</body>
</html>

Property	Support	Unsupported clients
font-family CSS property	Poor	Eudora, Old GMail, New GMail
color CSS property	Safe	Eudora
margin CSS property	Risky	AOL 9, Notes 6, Eudora, Live Mail, Hotmail
background-color CSS property	Poor	Notes 6, Eudora
display CSS property	Poor	Outlook 07, Eudora
height CSS property	Risky	Outlook 07, Notes 6, Eudora, Old GMail
left CSS property	Risky	Outlook 07, Notes 6, Eudora, New Yahoo, Old GMail, New GMail, Live Mail
line-height CSS property	Poor	Notes 6, Eudora
overflow CSS property	Risky	Outlook 07, Entourage 2004, Notes 6, Eudora
padding-top CSS property	Poor	Notes 6, Eudora
position CSS property	Risky	Outlook 07, Notes 6, Eudora, Old Yahoo, New Yahoo, Old GMail, New GMail, Live Mail, Hotmail, Mobile Me
text-align CSS property	Safe	Eudora
top CSS property	Risky	Outlook 07, Notes 6, Eudora, New Yahoo, Old GMail, New GMail, Live Mail
width CSS property	Risky	Outlook 07, Notes 6, Eudora
z-index CSS property	Risky	Notes 6, Eudora, New Yahoo, Old GMail, New GMail, Live Mail
text-decoration CSS property	Safe	Eudora
padding CSS property	Poor	Notes 6, Eudora
font-style CSS property	Safe	Eudora
font-variant CSS property	Poor	Notes 6, Eudora
font-weight CSS property	Safe	Eudora
font-size CSS property	Safe	Eudora
text-transform CSS property	Poor	Notes 6, Eudora
cursor CSS property	Risky	Outlook 07, Entourage 2004, Notes 6, Eudora, Old GMail, New GMail
float CSS property	Risky	Outlook 07, Eudora, Old GMail
margin-bottom CSS property	Risky	AOL 9, Notes 6, Eudora, Live Mail, Hotmail
padding-bottom CSS property	Poor	Notes 6, Eudora
clear CSS property	Risky	Outlook 07, Notes 6, Eudora
opacity CSS property	Risky	Outlook 03, Outlook 07, Windows Mail, Entourage 2004, Notes 6, Eudora, New Yahoo, Old GMail, New GMail, Live Mail, Hotmail
margin-right CSS property	Risky	AOL 9, Notes 6, Eudora, Live Mail, Hotmail
clip CSS property	Risky	Outlook 07, Notes 6, Eudora, New Yahoo, New GMail, Live Mail, Mobile Me
margin-top CSS property	Risky	AOL 9, Notes 6, Eudora, Live Mail, Hotmail
vertical-align CSS property	Risky	Outlook 07, Notes 6, Eudora
border CSS property	Poor	Notes 6, Eudora
form HTML element	Risky	Mobile Me, Old Yahoo, AOL, Live Mail, Outlook 07, Outlook 03
link HTML element	Poor	GMail, Hotmail, Old Yahoo

Premailer

HTML Results

Plaintext Results

HTML and CSS warnings