Diff
checker
Texto
Texto
Imagens
Documentos
Excel
Pastas
Legal
Enterprise
Aplicativo para desktop
Preços
Fazer login
Baixar o Diffchecker Desktop
Comparar texto
Encontre a diferença entre dois arquivos de texto
Ferramentas
Histórico
Editor live
Recolher inalteradas
Sem quebra de linha
Layout
Dividido
Unificado
Nível de detalhe
Inteligente
Palavra
Caractere
Realce de sintaxe
Escolher sintaxe
Ignorar
Transformar texto
Ir à primeira mudança
Editar entrada
Diffchecker Desktop
A maneira mais segura de usar o Diffchecker. Obtenha o aplicativo Diffchecker Desktop: seus diffs nunca saem do seu computador!
Obter Desktop
F-light-en (English date format optimized)
Criado
há 2 anos
O diff nunca expira
Limpar
Exportar
Compartilhar
Explicar
10 remoções
Linhas
Total
Removido
Caracteres
Total
Removido
Para continuar usando este recurso, atualize para
Diff
checker
Pro
Ver preços
1013 linhas
Copiar tudo
25 adições
Linhas
Total
Adicionado
Caracteres
Total
Adicionado
Para continuar usando este recurso, atualize para
Diff
checker
Pro
Ver preços
1031 linhas
Copiar tudo
<?xml version="1.0" encoding="UTF-8" ?>
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:js='true' b:layoutsVersion='3' b:responsive='true' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'><b:attr name='xmlns' value=''/><b:attr name='xmlns:b' value=''/><b:attr name='xmlns:expr' value=''/><b:attr name='xmlns:data' value=''/>
<html b:css='false' b:defaultwidgetversion='2' b:js='true' b:layoutsVersion='3' b:responsive='true' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'><b:attr name='xmlns' value=''/><b:attr name='xmlns:b' value=''/><b:attr name='xmlns:expr' value=''/><b:attr name='xmlns:data' value=''/>
<head>
<head>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0' name='viewport'/>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0' name='viewport'/>
<meta expr:content='"text/html; charset=" + data:blog.encoding' http-equiv='Content-Type'/>
<meta expr:content='"text/html; charset=" + data:blog.encoding' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<meta content='blogger' name='generator'/>
<!-- DNS prefetch -->
<!-- DNS prefetch -->
<link href='//blogger.googleusercontent.com' rel='dns-prefetch'/>
<link href='//blogger.googleusercontent.com' rel='dns-prefetch'/>
<link href='//1.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//1.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//www.blogger.com' rel='dns-prefetch'/>
<link href='//www.blogger.com' rel='dns-prefetch'/>
<link href='//cdn.jsdelivr.net' rel='dns-prefetch'/>
<link href='//cdn.jsdelivr.net' rel='dns-prefetch'/>
<!-- SEO -->
<!-- SEO -->
<b:if cond='data:view.isSingleItem'>
<b:if cond='data:view.isSingleItem'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<title><data:blog.pageName/> | <data:blog.title/></title>
<meta expr:content='resizeImage(data:view.featuredImage, 560, "16:9")' name='thumbnail'/>
<meta expr:content='resizeImage(data:view.featuredImage, 560, "16:9")' name='thumbnail'/>
<b:elseif cond='data:view.search.query'/>
<b:elseif cond='data:view.search.query'/>
<title>Search Query of "<data:view.search.query/>" | <data:blog.title/></title>
<title>Search Query of "<data:view.search.query/>" | <data:blog.title/></title>
<b:elseif cond='data:view.isLabelSearch'/>
<b:elseif cond='data:view.isLabelSearch'/>
<title><data:blog.pageName/> | <data:blog.title/></title>
<title><data:blog.pageName/> | <data:blog.title/></title>
Copiar
Copiado
Copiar
Copiado
<b:elseif cond='data:view.archive
.month
'/>
<b:elseif cond='data:view.archive
'/>
<title><data:
view.archive.month/>/<data:view.archive.year/> | <data:
blog.
title/></title>
<title><data:
blog.
pageName
/> | <data:blog.title/></title>
<b:elseif cond='data:view.archive.year'/>
<title><data:view.archive.year
/> | <data:blog.title/></title>
<b:elseif cond='data:view.isError'/>
<b:elseif cond='data:view.isError'/>
<title>404 Not Found | <data:blog.title/></title>
<title>404 Not Found | <data:blog.title/></title>
<b:else/>
<b:else/>
<title><data:blog.pageTitle/></title>
<title><data:blog.pageTitle/></title>
</b:if>
</b:if>
<meta expr:content='data:view.description.escaped' name='description'/>
<meta expr:content='data:view.description.escaped' name='description'/>
<link expr:href='data:view.url.canonical' rel='canonical'/>
<link expr:href='data:view.url.canonical' rel='canonical'/>
<!-- Favicon -->
<!-- Favicon -->
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
<!-- RSS Feed -->
<!-- RSS Feed -->
<data:blog.feedLinks/>
<data:blog.feedLinks/>
<!-- OGP -->
<!-- OGP -->
<meta expr:content='data:blog.url.canonical' property='og:url'/>
<meta expr:content='data:blog.url.canonical' property='og:url'/>
<b:if cond='data:view.isSingleItem'>
<b:if cond='data:view.isSingleItem'>
<meta expr:content='data:blog.pageName.escaped + " | " + data:blog.title' property='og:title'/>
<meta expr:content='data:blog.pageName.escaped + " | " + data:blog.title' property='og:title'/>
<b:elseif cond='data:view.search.query'/>
<b:elseif cond='data:view.search.query'/>
<meta expr:content=' "Search Query of " + data:view.search.query + " | " + data:blog.title' property='og:title'/>
<meta expr:content=' "Search Query of " + data:view.search.query + " | " + data:blog.title' property='og:title'/>
<b:elseif cond='data:view.isLabelSearch'/>
<b:elseif cond='data:view.isLabelSearch'/>
<meta expr:content='"Label: " + data:blog.pageName.escaped + " | " + data:blog.title' property='og:title'/>
<meta expr:content='"Label: " + data:blog.pageName.escaped + " | " + data:blog.title' property='og:title'/>
Copiar
Copiado
Copiar
Copiado
<b:elseif cond='data:view.archive
.month
'/>
<b:elseif cond='data:view.archive
'/>
<meta expr:content='data:
view.archive.month + "/" + data:view.archive.year + " | " + data:blog.title' property='og:title'/>
<meta expr:content='data:
blog.pageName.ascaped
+ " | " + data:blog.title' property='og:title'/>
<b:elseif cond='data:view.archive.year'/>
<meta expr:content='data:view.archive.year
+ " | " + data:blog.title' property='og:title'/>
<b:elseif cond='data:view.isError'/>
<b:elseif cond='data:view.isError'/>
<meta expr:content='"404 Not Found" + " | " + data:blog.title' property='og:title'/>
<meta expr:content='"404 Not Found" + " | " + data:blog.title' property='og:title'/>
<b:else/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.title' property='og:title'/>
</b:if>
</b:if>
<meta expr:content='data:view.description.escaped' property='og:description'/>
<meta expr:content='data:view.description.escaped' property='og:description'/>
<b:if cond='data:view.isSingleItem'>
<b:if cond='data:view.isSingleItem'>
<meta content='article' property='og:type'/>
<meta content='article' property='og:type'/>
<b:else/>
<b:else/>
<meta content='blog' property='og:type'/>
<meta content='blog' property='og:type'/>
</b:if>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:view.featuredImage'>
<b:if cond='data:view.featuredImage'>
<meta expr:content='resizeImage(data:view.featuredImage, 560, "16:9")' property='og:image'/>
<meta expr:content='resizeImage(data:view.featuredImage, 560, "16:9")' property='og:image'/>
<b:else/>
<b:else/>
<meta content='【OGP Image URL here】' property='og:image'/>
<meta content='【OGP Image URL here】' property='og:image'/>
</b:if>
</b:if>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='light' id='twth' name='twitter:widgets:theme'/>
<meta content='light' id='twth' name='twitter:widgets:theme'/>
<b:if cond='!data:view.isLayoutMode'>
<b:if cond='!data:view.isLayoutMode'>
<b:skin><![CDATA[
<b:skin><![CDATA[
/*--------------------------------------------------------------
/*--------------------------------------------------------------
Blogger Template
Blogger Template
Name : F-light
Name : F-light
Version : 1.35-TD-en
Version : 1.35-TD-en
Designer: Fujiyan
Designer: Fujiyan
Url : https://f-light-theme.blogspot.com/
Url : https://f-light-theme.blogspot.com/
License : Customization is available, but redistribution and sale are prohibited.
License : Customization is available, but redistribution and sale are prohibited.
----------------------------------------------------------------*/
----------------------------------------------------------------*/
/*==== Reset CSS ====*/
/*==== Reset CSS ====*/
html{min-height:100vh}.item-control{display:none}*{margin:0;padding:0;font-size:100%;vertical-align:baseline}*,::after,::before{box-sizing:border-box}html{font-size:62.5%}body{word-wrap:break-word;overflow-wrap:break-word}img{height:auto;max-width:100%;vertical-align:bottom}iframe{max-width:100%;border:none}.post-body ol,.post-body ul{padding-left:1em}.widget-content ul,.widget-content ol{padding-left:1.5em}@media(max-width:1024px){body{font-size:1.6rem}}
html{min-height:100vh}.item-control{display:none}*{margin:0;padding:0;font-size:100%;vertical-align:baseline}*,::after,::before{box-sizing:border-box}html{font-size:62.5%}body{word-wrap:break-word;overflow-wrap:break-word}img{height:auto;max-width:100%;vertical-align:bottom}iframe{max-width:100%;border:none}.post-body ol,.post-body ul{padding-left:1em}.widget-content ul,.widget-content ol{padding-left:1.5em}@media(max-width:1024px){body{font-size:1.6rem}}
/*<Group description="Brand Color">
/*<Group description="Brand Color">
<Variable name="brand" description="Deep Brand Color" type="color" default="#4169e1" value="#4169e1"/>
<Variable name="brand" description="Deep Brand Color" type="color" default="#4169e1" value="#4169e1"/>
<Variable name="brand.font" description="Text on Deep Brand Color" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="brand.font" description="Text on Deep Brand Color" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="brand.light" description="Pale Brand Color" type="color" default="#1e90ff" value="#1e90ff"/>
<Variable name="brand.light" description="Pale Brand Color" type="color" default="#1e90ff" value="#1e90ff"/>
<Variable name="brand.light.font" description="Text on Pale Brand Color" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="brand.light.font" description="Text on Pale Brand Color" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="sub.brand" description="Sub Brand Color" type="color" default="#ff6347" value="#ff6347"/>
<Variable name="sub.brand" description="Sub Brand Color" type="color" default="#ff6347" value="#ff6347"/>
<Variable name="sub.brand.font" description="Text on Sub Brand Color" type="color"
<Variable name="sub.brand.font" description="Text on Sub Brand Color" type="color"
default="#ffffff" value="#ffffff"/>
default="#ffffff" value="#ffffff"/>
</Group>
</Group>
<Group description="Background Color">
<Group description="Background Color">
<Variable name="darkmode.dark.bg" description="Deep Background Color in Dark Mode" type="color" default="#171e2d" value="#171e2d"/>
<Variable name="darkmode.dark.bg" description="Deep Background Color in Dark Mode" type="color" default="#171e2d" value="#171e2d"/>
<Variable name="darkmode.light.bg" description="Pale Background Color in Dark Mode" type="color" default="#1d2638" value="#1d2638"/>
<Variable name="darkmode.light.bg" description="Pale Background Color in Dark Mode" type="color" default="#1d2638" value="#1d2638"/>
<Variable name="lightmode.dark.bg" description="Deep Background Color in Light Mode" type="color" default="#eeeeff" value="#eeeeff"/>
<Variable name="lightmode.dark.bg" description="Deep Background Color in Light Mode" type="color" default="#eeeeff" value="#eeeeff"/>
<Variable name="lightmode.light.bg" description="Pale Background Color in Light Mode" type="color" default="#fbfbff" value="#fbfbff"/>
<Variable name="lightmode.light.bg" description="Pale Background Color in Light Mode" type="color" default="#fbfbff" value="#fbfbff"/>
<Variable name="darkmode.shadow" description="Shadow Color in Dark Mode" type="color" default="#000000" value="#000000"/>
<Variable name="darkmode.shadow" description="Shadow Color in Dark Mode" type="color" default="#000000" value="#000000"/>
<Variable name="lightmode.shadow" description="Shadow Color in Light Mode" type="color" default="#aaaaaa" value="#aaaaaa"/>
<Variable name="lightmode.shadow" description="Shadow Color in Light Mode" type="color" default="#aaaaaa" value="#aaaaaa"/>
</Group>
</Group>
<Group description="Text Color">
<Group description="Text Color">
<Variable name="darkmode.dark.font" description="Deep Text Color in Dark Mode" type="color" default="#eeeeee" value="#eeeeee"/>
<Variable name="darkmode.dark.font" description="Deep Text Color in Dark Mode" type="color" default="#eeeeee" value="#eeeeee"/>
<Variable name="darkmode.light.font" description="Pale Text Color in Dark Mode" type="color" default="#c0c0c0" value="#c0c0c0"/>
<Variable name="darkmode.light.font" description="Pale Text Color in Dark Mode" type="color" default="#c0c0c0" value="#c0c0c0"/>
<Variable name="lightmode.dark.font" description="Deep Text Color in Light Mode" type="color" default="#333333" value="#333333"/>
<Variable name="lightmode.dark.font" description="Deep Text Color in Light Mode" type="color" default="#333333" value="#333333"/>
<Variable name="lightmode.light.font" description="Pale Text Color in Light Mode" type="color" default="#666666" value="#666666"/>
<Variable name="lightmode.light.font" description="Pale Text Color in Light Mode" type="color" default="#666666" value="#666666"/>
<Variable name="darkmode.link" description="Link Color in Dark Mode" type="color" default="#00bfff" value="#00bfff"/>
<Variable name="darkmode.link" description="Link Color in Dark Mode" type="color" default="#00bfff" value="#00bfff"/>
<Variable name="lightmode.link" description="Link Color in Light Mode" type="color" default="#4169e1" value="#4169e1"/>
<Variable name="lightmode.link" description="Link Color in Light Mode" type="color" default="#4169e1" value="#4169e1"/>
</Group>*/
</Group>*/
/*==== Dark Mode ====*/
/*==== Dark Mode ====*/
:root {
:root {
--dark-bg: $(darkmode.dark.bg); /*Deep Background Color*/
--dark-bg: $(darkmode.dark.bg); /*Deep Background Color*/
--light-bg: $(darkmode.light.bg); /*Pale Background Color*/
--light-bg: $(darkmode.light.bg); /*Pale Background Color*/
--shadow: #000; /*Shadow*/
--shadow: #000; /*Shadow*/
--color: $(darkmode.dark.font); /*Deep Text Color*/
--color: $(darkmode.dark.font); /*Deep Text Color*/
--dark-color: $(darkmode.light.font); /*Pale Text Color*/
--dark-color: $(darkmode.light.font); /*Pale Text Color*/
--red-color: Tomato; /*Red Text*/
--red-color: Tomato; /*Red Text*/
--blue-color: #8cb4ff; /*Blue Text*/
--blue-color: #8cb4ff; /*Blue Text*/
--green-color: #00d061; /*Green Text*/
--green-color: #00d061; /*Green Text*/
--link: $(darkmode.link); /*Link Color*/
--link: $(darkmode.link); /*Link Color*/
--brand: $(brand); /*Deep Brand Color*/
--brand: $(brand); /*Deep Brand Color*/
--brand-light: $(brand.light); /*Pale Brand Color*/
--brand-light: $(brand.light); /*Pale Brand Color*/
--brand-font: $(brand.font); /*Text Color on Brand Color*/
--brand-font: $(brand.font); /*Text Color on Brand Color*/
--sub-brand: $(sub.brand); /*Sub Brand Color*/
--sub-brand: $(sub.brand); /*Sub Brand Color*/
--sub-brand-font: $(sub.brand.font) /*Text Color on Sub Brand Color*/
--sub-brand-font: $(sub.brand.font) /*Text Color on Sub Brand Color*/
}
}
/*==== Light Mode ====*/
/*==== Light Mode ====*/
:root[data-theme-mode="light"] {
:root[data-theme-mode="light"] {
--dark-bg: $(lightmode.dark.bg); /*Deep Background Color*/
--dark-bg: $(lightmode.dark.bg); /*Deep Background Color*/
--light-bg: $(lightmode.light.bg); /*Pale Background Color*/
--light-bg: $(lightmode.light.bg); /*Pale Background Color*/
--shadow: $(lightmode.shadow); /*Shadow*/
--shadow: $(lightmode.shadow); /*Shadow*/
--color: $(lightmode.dark.font); /*Deep Text Color*/
--color: $(lightmode.dark.font); /*Deep Text Color*/
--dark-color: $(lightmode.light.font); /*Pale Text Color*/
--dark-color: $(lightmode.light.font); /*Pale Text Color*/
--red-color: #d30038; /*Red Text*/
--red-color: #d30038; /*Red Text*/
--blue-color: #592bff; /*Blue Text*/;
--blue-color: #592bff; /*Blue Text*/;
--green-color: #007936; /*Green Text*/;
--green-color: #007936; /*Green Text*/;
--link: $(lightmode.link); /*Link Color*/
--link: $(lightmode.link); /*Link Color*/
}
}
]]></b:skin>
]]></b:skin>
<style>/*<![CDATA[*/
<style>/*<![CDATA[*/
/*==== Common ====*/
/*==== Common ====*/
body {
body {
font-size: 1.7rem;
font-size: 1.7rem;
font-family: sans-serif;
font-family: sans-serif;
color: var(--color);
color: var(--color);
background: var(--light-bg);
background: var(--light-bg);
text-underline-offset: .2em;
text-underline-offset: .2em;
text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
-webkit-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
text-size-adjust: 100%;
}
}
#sub-content a {
#sub-content a {
color: var(--link);
color: var(--link);
}
}
#sub-content .widget {
#sub-content .widget {
padding: .5em;
padding: .5em;
}
}
a {
a {
text-decoration: none;
text-decoration: none;
color: inherit;
color: inherit;
transition: .3s;
transition: .3s;
}
}
.blogger-clickTrap {
.blogger-clickTrap {
display: none;
display: none;
}
}
button:hover {
button:hover {
cursor: pointer;
cursor: pointer;
}
}
select {
select {
outline: none;
outline: none;
}
}
::selection {
::selection {
background: #00e5ff;
background: #00e5ff;
color: #000;
color: #000;
}
}
::-webkit-scrollbar {
::-webkit-scrollbar {
width: 6px;
width: 6px;
height: 6px;
height: 6px;
}
}
::-webkit-scrollbar-track {
::-webkit-scrollbar-track {
background: var(--light-bg);
background: var(--light-bg);
border-radius: 10px;
border-radius: 10px;
}
}
::-webkit-scrollbar-thumb {
::-webkit-scrollbar-thumb {
background: #aaa;
background: #aaa;
border-radius: 10px;
border-radius: 10px;
}
}
::-webkit-scrollbar-thumb:hover {
::-webkit-scrollbar-thumb:hover {
background: #bbb;
background: #bbb;
}
}
* {
* {
scrollbar-width: thin;
scrollbar-width: thin;
scrollbar-color: #aaa transparent;
scrollbar-color: #aaa transparent;
}
}
summary {
summary {
display: block;
display: block;
list-style: none;
list-style: none;
}
}
summary::-webkit-details-marker {
summary::-webkit-details-marker {
display: none;
display: none;
}
}
#MAIN .widget {
#MAIN .widget {
margin-bottom: 3em;
margin-bottom: 3em;
}
}
rt {
rt {
font-size: 50%;
font-size: 50%;
}
}
/*==== Header ====*/
/*==== Header ====*/
header {
header {
background: var(--light-bg);
background: var(--light-bg);
}
}
#header-title {
#header-title {
font-size: 2.5rem;
font-size: 2.5rem;
padding: .5em;
padding: .5em;
text-align: center;
text-align: center;
}
}
#header-title a {
#header-title a {
font-weight: bold;
font-weight: bold;
}
}
#header-title a:hover {
#header-title a:hover {
color: var(--link);
color: var(--link);
}
}
#header-desc {
#header-desc {
font-size: 1.2rem;
font-size: 1.2rem;
line-height: 1.3;
line-height: 1.3;
color: var(--dark-color);
color: var(--dark-color);
text-align: center;
text-align: center;
padding: 0 1em 1em;
padding: 0 1em 1em;
}
}
.header-img {
.header-img {
background-position: center;
background-position: center;
background-repeat: no-repeat;
background-repeat: no-repeat;
text-align: center;
text-align: center;
}
}
/*==== Mode Switch ====*/
/*==== Mode Switch ====*/
#mode-switch {
#mode-switch {
position: absolute;
position: absolute;
top: 5px;
top: 5px;
right: 1em;
right: 1em;
}
}
#mode-switch label {
#mode-switch label {
cursor: pointer;
cursor: pointer;
}
}
#mode-switch svg {
#mode-switch svg {
height: 24px;
height: 24px;
width: 24px;
width: 24px;
color: var(--brand-font);
color: var(--brand-font);
}
}
#switch-mode-dark svg {
#switch-mode-dark svg {
transform: scale(-1, 1);
transform: scale(-1, 1);
}
}
@media (max-width: 1024px) {
@media (max-width: 1024px) {
#mode-switch {
#mode-switch {
right: 45px;
right: 45px;
}
}
}
}
#switch-mode-dark {
#switch-mode-dark {
display: none;
display: none;
}
}
input[type="checkbox"]#js_mode_toggle {
input[type="checkbox"]#js_mode_toggle {
display: none;
display: none;
}
}
#js_mode_toggle:checked ~ label #switch-mode-dark {
#js_mode_toggle:checked ~ label #switch-mode-dark {
display: initial;
display: initial;
}
}
#js_mode_toggle:checked ~ label #switch-mode-light {
#js_mode_toggle:checked ~ label #switch-mode-light {
display: none;
display: none;
}
}
#nav-button:checked ~ #mode-switch {
#nav-button:checked ~ #mode-switch {
display: none;
display: none;
}
}
/*==== Nav Bar ====*/
/*==== Nav Bar ====*/
nav {
nav {
background: linear-gradient(to right, var(--brand-light), var(--brand), var(--brand-light));
background: linear-gradient(to right, var(--brand-light), var(--brand), var(--brand-light));
opacity: .9;
opacity: .9;
box-shadow: 0 3px 6px -4px var(--shadow);
box-shadow: 0 3px 6px -4px var(--shadow);
position: -webkit-sticky;
position: -webkit-sticky;
position: sticky;
position: sticky;
top: 0;
top: 0;
z-index: 10;
z-index: 10;
min-height: 2em;
min-height: 2em;
margin-top: -1px;
margin-top: -1px;
}
}
#nav {
#nav {
position: relative;
position: relative;
margin: auto;
margin: auto;
width: 100%;
width: 100%;
max-width: 1160px;
max-width: 1160px;
min-width: 960px;
min-width: 960px;
}
}
#nav-button,
#nav-button,
#nav-label {
#nav-label {
display: none;
display: none;
}
}
#nav-content ul {
#nav-content ul {
display: flex;
display: flex;
flex-wrap: wrap;
flex-wrap: wrap;
max-width: 640px;
max-width: 640px;
}
}
#nav-content li {
#nav-content li {
line-height: 1.5;
line-height: 1.5;
list-style: none;
list-style: none;
transition: .3s;
transition: .3s;
}
}
#nav-content li a {
#nav-content li a {
display: block;
display: block;
font-size: 1.4rem;
font-size: 1.4rem;
padding: .5em 10px;
padding: .5em 10px;
color: var(--brand-font);
color: var(--brand-font);
}
}
#nav-content li a:hover {
#nav-content li a:hover {
background: #eef;
background: #eef;
color: #333!important;
color: #333!important;
}
}
@media (max-width: 1024px ) {
@media (max-width: 1024px ) {
nav {
nav {
height: 2em;
height: 2em;
}
}
#nav {
#nav {
box-shadow: 0 3px 6px -4px var(--shadow);
box-shadow: 0 3px 6px -4px var(--shadow);
background: var(--light-bg);
background: var(--light-bg);
padding-left: 8px;
padding-left: 8px;
min-width: 0;
min-width: 0;
}
}
#nav-content {
#nav-content {
max-height: 0;
max-height: 0;
overflow: hidden;
overflow: hidden;
transition: .2s;
transition: .2s;
}
}
input[type="checkbox"]#nav-button {
input[type="checkbox"]#nav-button {
display: none;
display: none;
}
}
#nav-button:checked ~ #nav-content {
#nav-button:checked ~ #nav-content {
max-height: 500px;
max-height: 500px;
transition: 1s;
transition: 1s;
}
}
#nav-content ul {
#nav-content ul {
margin-top: 30px;
margin-top: 30px;
max-width: 100%;
max-width: 100%;
}
}
#nav-content li {
#nav-content li {
width: 200px;
width: 200px;
margin-bottom: 5px;
margin-bottom: 5px;
margin-right: 8px;
margin-right: 8px;
}
}
#nav-content li a {
#nav-content li a {
width: 100%;
width: 100%;
display: block;
display: block;
color: var(--brand-font);
color: var(--brand-font);
text-align: center;
text-align: center;
background: var(--brand);
background: var(--brand);
border-radius: 3px;
border-radius: 3px;
}
}
#nav-label {
#nav-label {
float: right;
float: right;
position: relative;
position: relative;
display: flex;
display: flex;
height: 30px;
height: 30px;
width: 30px;
width: 30px;
align-items: center;
align-items: center;
margin-left: 5px;
margin-left: 5px;
cursor: pointer;
cursor: pointer;
z-index: 1;
z-index: 1;
}
}
#nav-label span,
#nav-label span,
#nav-label span::before,
#nav-label span::before,
#nav-label span::after {
#nav-label span::after {
position: absolute;
position: absolute;
content: "";
content: "";
display: block;
display: block;
height: 2px;
height: 2px;
width: 24px;
width: 24px;
border-radius: 2px;
border-radius: 2px;
background: var(--brand-font);
background: var(--brand-font);
transition: .3s;
transition: .3s;
}
}
#nav-label span::before {
#nav-label span::before {
bottom: 8px;
bottom: 8px;
}
}
#nav-label span::after {
#nav-label span::after {
top: 8px;
top: 8px;
}
}
#nav-button:checked ~ #nav-label span {
#nav-button:checked ~ #nav-label span {
background: transparent;
background: transparent;
}
}
#nav-button:checked ~ #nav-label span::before {
#nav-button:checked ~ #nav-label span::before {
bottom: 0;
bottom: 0;
transform: rotate(45deg);
transform: rotate(45deg);
background: var(--color);
background: var(--color);
}
}
#nav-button:checked ~ #nav-label span::after {
#nav-button:checked ~ #nav-label span::after {
top: 0;
top: 0;
transform: rotate(-45deg);
transform: rotate(-45deg);
background: var(--color);
background: var(--color);
}
}
}
}
#mobile-home {
#mobile-home {
display: none;
display: none;
color: var(--brand-font);
color: var(--brand-font);
position: absolute;
position: absolute;
font-size: 2.2rem;
font-size: 2.2rem;
top: 3px;
top: 3px;
}
}
#mobile-jump {
#mobile-jump {
display: none;
display: none;
color: var(--brand-font);
color: var(--brand-font);
position: absolute;
position: absolute;
}
}
#mobile-jump span {
#mobile-jump span {
display: inline-block;
display: inline-block;
margin: 0 5px;
margin: 0 5px;
height: 34px;
height: 34px;
cursor: pointer;
cursor: pointer;
}
}
#mobile-jump svg {
#mobile-jump svg {
margin-top: 5px;
margin-top: 5px;
}
}
#nav-button:checked ~ #mobile-home,
#nav-button:checked ~ #mobile-home,
#nav-button:checked ~ #mobile-jump,#nav-button:checked ~ .item-control a:not(.comment-delete) {
#nav-button:checked ~ #mobile-jump,#nav-button:checked ~ .item-control a:not(.comment-delete) {
display: none;
display: none;
}
}
@media (max-width: 1024px) {
@media (max-width: 1024px) {
#mobile-home,
#mobile-home,
#mobile-jump {
#mobile-jump {
display: initial;
display: initial;
}
}
}
}
/*==== Search Box ====*/
/*==== Search Box ====*/
#search-wrap {
#search-wrap {
position: absolute;
position: absolute;
right: 0;
right: 0;
}
}
.search-box-form {
.search-box-form {
position: relative;
position: relative;
width: 300px;
width: 300px;
margin-right: 90px;
margin-right: 90px;
background: transparent;
background: transparent;
z-index: 2;
z-index: 2;
}
}
.search-box-text {
.search-box-text {
width: 100%;
width: 100%;
height: 1.9em;
height: 1.9em;
margin-top: 2px;
margin-top: 2px;
border: 2px solid transparent;
border: 2px solid transparent;
border-radius: 5px;
border-radius: 5px;
outline: none;
outline: none;
background: transparent;
background: transparent;
color: var(--brand-font);
color: var(--brand-font);
font-size: 1.6rem;
font-size: 1.6rem;
padding: 2px 5px 0 28px;
padding: 2px 5px 0 28px;
transition: .2s;
transition: .2s;
}
}
.search-box-text:hover,
.search-box-text:hover,
.search-box-text:focus {
.search-box-text:focus {
border-color: var(--brand-font);
border-color: var(--brand-font);
}
}
.search-box-text:focus {
.search-box-text:focus {
background: var(--brand);
background: var(--brand);
}
}
.search-box-text::placeholder {
.search-box-text::placeholder {
color: var(--brand-font);
color: var(--brand-font);
}
}
.search-box-submit {
.search-box-submit {
color: var(--brand-font);
color: var(--brand-font);
position: absolute;
position: absolute;
left: 2px;
left: 2px;
top: 6px;
top: 6px;
border: none;
border: none;
background: transparent;
background: transparent;
outline: 0;
outline: 0;
padding: 0;
padding: 0;
transition: .3s;
transition: .3s;
}
}
.search-box-submit svg {
.search-box-submit svg {
height: 1.3em;
height: 1.3em;
width: 1.3em;
width: 1.3em;
}
}
.search-box-submit:hover {
.search-box-submit:hover {
transform: scale(1.2);
transform: scale(1.2);
}
}
::-webkit-search-cancel-button {
::-webkit-search-cancel-button {
height: 1.1em;
height: 1.1em;
width: 1.1em;
width: 1.1em;
-webkit-appearance: none;
-webkit-appearance: none;
cursor: pointer;
cursor: pointer;
background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="%23fff"/></svg>');
background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="%23fff"/></svg>');
}
}
input[type="search"]::-webkit-search-decoration {
input[type="search"]::-webkit-search-decoration {
display: none;
display: none;
}
}
@media (max-width: 600px ) {
@media (max-width: 600px ) {
#search-wrap {
#search-wrap {
right: 30px;
right: 30px;
}
}
.search-box-form {
.search-box-form {
width: 150px;
width: 150px;
margin-left: 5px;
margin-left: 5px;
margin-right: 55px;
margin-right: 55px;
}
}
.search-box-text:focus {
.search-box-text:focus {
width: 230px;
width: 230px;
}
}
}
}
#nav-button:checked ~ #search-wrap {
#nav-button:checked ~ #search-wrap {
display: none;
display: none;
}
}
.search-box-text::-moz-placeholder {
.search-box-text::-moz-placeholder {
opacity: 1;
opacity: 1;
color: var(--brand-font);
color: var(--brand-font);
}
}
/*==== Archive Widget ====*/
/*==== Archive Widget ====*/
.archive-list {
.archive-list {
margin: 0 auto 1em;
margin: 0 auto 1em;
max-width: 500px;
max-width: 500px;
}
}
.archive-list ul {
.archive-list ul {
box-shadow: 2px 2px 6px var(--shadow);
box-shadow: 2px 2px 6px var(--shadow);
border-top: none;
border-top: none;
border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
color: var(--color);
color: var(--color);
max-height: 16em;
max-height: 16em;
overflow: auto;
overflow: auto;
margin: 0 1px 0!important;
margin: 0 1px 0!important;
padding-left: 0!important;
padding-left: 0!important;
}
}
.archive-list ul li {
.archive-list ul li {
font-size: 1.5rem;
font-size: 1.5rem;
line-height: 1.8;
line-height: 1.8;
margin: 0!important;
margin: 0!important;
padding: 0!important;
padding: 0!important;
list-style: none;
list-style: none;
}
}
.archive-list summary {
.archive-list summary {
position: relative;
position: relative;
padding: 5px 0 5px 8px;
padding: 5px 0 5px 8px;
height: 2em;
height: 2em;
line-height: 1.5;
line-height: 1.5;
background: var(--brand);
background: var(--brand);
color: var(--brand-font);
color: var(--brand-font);
font-size: 1.5rem;
font-size: 1.5rem;
border-radius: 5px;
border-radius: 5px;
transition: .3s;
transition: .3s;
}
}
.archive-list summary:hover,
.archive-list summary:hover,
details[open].archive-list summary:hover {
details[open].archive-list summary:hover {
background: var(--brand-light);
background: var(--brand-light);
cursor: pointer;
cursor: pointer;
}
}
.archive-list a {
.archive-list a {
display: block;
display: block;
padding-left: .5em;
padding-left: .5em;
color: var(--color)!important;
color: var(--color)!important;
text-decoration: none!important;
text-decoration: none!important;
}
}
.archive-list a:hover {
.archive-list a:hover {
background: dodgerblue;
background: dodgerblue;
color: #fff!important;
color: #fff!important;
}
}
.archive-list .svg-icon-24 {
.archive-list .svg-icon-24 {
position: absolute;
position: absolute;
right: 3px;
right: 3px;
top: 0;
top: 0;
font-size: 2.5rem;
font-size: 2.5rem;
color: var(--darkfcolor);
color: var(--darkfcolor);
transition: .2s;
transition: .2s;
}
}
details[open].archive-list .svg-icon-24 {
details[open].archive-list .svg-icon-24 {
transform: rotate(180deg);
transform: rotate(180deg);
}
}
details[open].archive-list summary {
details[open].archive-list summary {
color: var(--brand-font);
color: var(--brand-font);
background: var(--brand-light);
background: var(--brand-light);
box-shadow: 0 4px 4px -4px var(--shadow);
box-shadow: 0 4px 4px -4px var(--shadow);
border-bottom-left-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
}
}
.archive-list ul::-webkit-scrollbar-track {
.archive-list ul::-webkit-scrollbar-track {
background: var(--light-bg);
background: var(--light-bg);
}
}
/*==== Page List / Link List ====*/
/*==== Page List / Link List ====*/
.list-widget li {
.list-widget li {
list-style-type: none;
list-style-type: none;
line-height: 1.5;
line-height: 1.5;
padding-bottom: 5px;
padding-bottom: 5px;
}
}
.list-widget a {
.list-widget a {
color: var(--color)!important;
color: var(--color)!important;
font-size: 1.3rem;
font-size: 1.3rem;
font-weight: bold;
font-weight: bold;
padding: 5px 8px 3px;
padding: 5px 8px 3px;
text-indent: -5px;
text-indent: -5px;
border-radius: 2px;
border-radius: 2px;
width: 100%;
width: 100%;
display: block;
display: block;
}
}
.list-widget a::after {
.list-widget a::after {
content: "\00BB";
content: "\00BB";
margin-left: 2px;
margin-left: 2px;
}
}
.list-widget a:hover {
.list-widget a:hover {
background: var(--brand);
background: var(--brand);
color: var(--brand-font)!important;
color: var(--brand-font)!important;
}
}
.list-widget li a::before {
.list-widget li a::before {
content: "\25cf";
content: "\25cf";
padding-right: 2px;
padding-right: 2px;
color: var(--brand);
color: var(--brand);
}
}
.list-widget li a:hover::before {
.list-widget li a:hover::before {
color: var(--brand-font);
color: var(--brand-font);
}
}
.current-page {
.current-page {
font-size: 1.3rem;
font-size: 1.3rem;
padding: 5px 8px 3px;
padding: 5px 8px 3px;
text-indent: -5px;
text-indent: -5px;
display: block;
display: block;
}
}
.current-page::before {
.current-page::before {
content: "\25cf";
content: "\25cf";
padding-right: 2px;
padding-right: 2px;
}
}
/*==== Label Widget ====*/
/*==== Label Widget ====*/
.category-label {
.category-label {
display: inline-block;
display: inline-block;
border-radius: 5px;
border-radius: 5px;
margin-bottom: .5em;
margin-bottom: .5em;
background: var(--brand);
background: var(--brand);
color: var(--brand-font)!important;
color: var(--brand-font)!important;
transition: .3s;
transition: .3s;
line-height: 1;
line-height: 1;
padding: 6px;
padding: 6px;
font-size: 1.2rem;
font-size: 1.2rem;
}
}
.category-label:hover {
.category-label:hover {
background: var(--brand-light);
background: var(--brand-light);
}
}
.hashtag-label {
.hashtag-label {
display: inline-block;
display: inline-block;
margin-bottom: .5em;
margin-bottom: .5em;
color: var(--color)!important;
color: var(--color)!important;
border: solid var(--dark-color) 1px;
border: solid var(--dark-color) 1px;
border-radius: 3px;
border-radius: 3px;
line-height: 1;
line-height: 1;
transition: .2s;
transition: .2s;
font-size: 1.4rem;
font-size: 1.4rem;
padding: 4px 5px 3px;
padding: 4px 5px 3px;
}
}
.list-label-widget-content {
.list-label-widget-content {
text-align: center;
text-align: center;
}
}
.hashtag-label:hover {
.hashtag-label:hover {
border-color: var(--sub-brand);
border-color: var(--sub-brand);
background: var(--sub-brand);
background: var(--sub-brand);
color: var(--sub-brand-font)!important;
color: var(--sub-brand-font)!important;
}
}
.label-count {
.label-count {
font-size: 1.1rem;
font-size: 1.1rem;
margin-left: 3px;
margin-left: 3px;
}
}
.cloud-label-widget-content {
.cloud-label-widget-content {
text-align: center;
text-align: center;
}
}
/*== Profile Widget ==*/
/*== Profile Widget ==*/
.Profile {
.Profile {
min-height: 140px;
min-height: 140px;
text-align: center;
text-align: center;
}
}
.g-profile {
.g-profile {
font-size: 1.9rem;
font-size: 1.9rem;
line-height: 1.5;
line-height: 1.5;
}
}
.location {
.location {
font-size: 1.5rem;
font-size: 1.5rem;
}
}
.profile-info a {
.profile-info a {
font-weight: bold;
font-weight: bold;
color: var(--color)!important;
color: var(--color)!important;
}
}
.profile-info a:hover {
.profile-info a:hover {
color: var(--link)!important;
color: var(--link)!important;
text-decoration: underline;
text-decoration: underline;
}
}
.profile-textblock {
.profile-textblock {
font-size: 1.3rem;
font-size: 1.3rem;
line-height: 1.3;
line-height: 1.3;
margin-top: .5em;
margin-top: .5em;
margin-bottom: .5em;
margin-bottom: .5em;
color: var(--dark-color);
color: var(--dark-color);
}
}
.profile-textblock a {
.profile-textblock a {
color: var(--link)!important;
color: var(--link)!important;
}
}
.profile-textblock a:hover {
.profile-textblock a:hover {
text-decoration: underline;
text-decoration: underline;
color: var(--dark-color)!important;
color: var(--dark-color)!important;
}
}
.profile-img {
.profile-img {
width: 90px;
width: 90px;
height: 90px;
height: 90px;
object-fit: contain;
object-fit: contain;
border-radius: 50%;
border-radius: 50%;
transition: .3s;
transition: .3s;
margin-bottom: .5em;
margin-bottom: .5em;
}
}
.profile-img:hover {
.profile-img:hover {
opacity: .8;
opacity: .8;
}
}
.profile-info>.profile-link {
.profile-info>.profile-link {
font-size: 1.6rem;
font-size: 1.6rem;
}
}
.profile-info>.profile-link::after {
.profile-info>.profile-link::after {
content: "\00BB";
content: "\00BB";
}
}
.default-avatar {
.default-avatar {
display: inline-block;
display: inline-block;
margin-bottom: .5em;
margin-bottom: .5em;
}
}
.avatar-icon {
.avatar-icon {
font-size: 70px;
font-size: 70px;
color: var(--dark-color);
color: var(--dark-color);
border: 1px solid var(--dark-color);
border: 1px solid var(--dark-color);
border-radius: 50%;
border-radius: 50%;
}
}
/* Team Profile */
/* Team Profile */
.Profile li {
.Profile li {
margin: 1em;
margin: 1em;
padding-bottom: 1em;
padding-bottom: 1em;
list-style: none;
list-style: none;
}
}
.Profile li {
.Profile li {
border-bottom: dotted var(--dark-color) 2px;
border-bottom: dotted var(--dark-color) 2px;
}
}
.Profile li:last-child {
.Profile li:last-child {
border: none;
border: none;
}
}
.profile-name {
.profile-name {
font-size: 1.9rem;
font-size: 1.9rem;
line-height: 1.5;
line-height: 1.5;
}
}
a .profile-name {
a .profile-name {
font-weight: bold;
font-weight: bold;
color: var(--color) !important;
color: var(--color) !important;
}
}
a .profile-name:hover {
a .profile-name:hover {
color: var(--link) !important;
color: var(--link) !important;
text-decoration: underline;
text-decoration: underline;
}
}
a.profile-link:nth-of-type(2) {
a.profile-link:nth-of-type(2) {
font-size: 1.6rem;
font-size: 1.6rem;
font-weight: bold;
font-weight: bold;
color: var(--color) !important;
color: var(--color) !important;
}
}
a.profile-link:nth-of-type(2):hover {
a.profile-link:nth-of-type(2):hover {
color: var(--link) !important;
color: var(--link) !important;
text-decoration: underline!important;
text-decoration: underline!important;
}
}
.profile-link:nth-of-type(2)::after {
.profile-link:nth-of-type(2)::after {
content: "\00BB";
content: "\00BB";
}
}
/*==== Search Widget ====*/
/*==== Search Widget ====*/
.widget-content form {
.widget-content form {
position: relative;
position: relative;
max-width: 600px;
max-width: 600px;
margin: 0 auto;
margin: 0 auto;
}
}
.search-input input {
.search-input input {
box-sizing: border-box;
box-sizing: border-box;
background: var(--dark-bg);
background: var(--dark-bg);
color: var(--color);
color: var(--color);
border-top-left-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
border: none;
border: none;
width: calc(100% - 70px);
width: calc(100% - 70px);
height: 40px;
height: 40px;
padding: 0 .5em;
padding: 0 .5em;
}
}
.search-input input:focus {
.search-input input:focus {
outline: none;
outline: none;
border: 1px solid var(--brand);
border: 1px solid var(--brand);
padding: 0 calc(.5em - 1px);
padding: 0 calc(.5em - 1px);
}
}
.search-input input::placeholder {
.search-input input::placeholder {
color: var(--dark-color);
color: var(--dark-color);
}
}
.search-action {
.search-action {
position: absolute;
position: absolute;
background: var(--brand);
background: var(--brand);
color: var(--brand-font);
color: var(--brand-font);
border: none;
border: none;
border-top-right-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
top: 0;
top: 0;
right: 0;
right: 0;
width: 70px;
width: 70px;
height: 40px;
height: 40px;
}
}
.search-action:hover {
.search-action:hover {
cursor: pointer;
cursor: pointer;
opacity: .8;
opacity: .8;
}
}
/*==== Contact Form Widget ====*/
/*==== Contact Form Widget ====*/
.contact-form-email,
.contact-form-email,
.contact-form-email-message,
.contact-form-email-message,
.contact-form-name {
.contact-form-name {
max-width:100%;
max-width:100%;
min-width:100%;
min-width:100%;
color: var(--color);
color: var(--color);
padding: .5em;
padding: .5em;
outline: none;
outline: none;
border-radius: 3px;
border-radius: 3px;
background: var(--dark-bg);
background: var(--dark-bg);
transition: .2s;
transition: .2s;
border: 1px solid transparent;
border: 1px solid transparent;
}
}
.contact-form-email:focus,
.contact-form-email:focus,
.contact-form-email-message:focus,
.contact-form-email-message:focus,
.contact-form-name:focus {
.contact-form-name:focus {
box-shadow: 0 0 6px var(--link);
box-shadow: 0 0 6px var(--link);
border: 1px solid var(--link);
border: 1px solid var(--link);
}
}
.contact-form-email-message {
.contact-form-email-message {
min-height: 200px;
min-height: 200px;
}
}
.contact-form-email,
.contact-form-email,
.contact-form-name {
.contact-form-name {
height:40px;
height:40px;
}
}
.contact-form-button-submit {
.contact-form-button-submit {
border-radius : 3px;
border-radius : 3px;
line-height: .1;
line-height: .1;
margin: 2em 0;
margin: 2em 0;
cursor: pointer;
cursor: pointer;
padding: 1em 2em;
padding: 1em 2em;
background: var(--brand);
background: var(--brand);
color: var(--brand-font);
color: var(--brand-font);
transition: .3s;
transition: .3s;
border: none;
border: none;
outline: none;
outline: none;
}
}
.contact-form-button-submit:hover {
.contact-form-button-submit:hover {
transform: scale(1.1);
transform: scale(1.1);
}
}
.contact-form-button-submit:active {
.contact-form-button-submit:active {
transform: none;
transform: none;
}
}
.contact-form-error-message-with-border,
.contact-form-error-message-with-border,
.contact-form-success-message-with-border {
.contact-form-success-message-with-border {
color: var(--color);
color: var(--color);
font-weight: bold!important;
font-weight: bold!important;
}
}
.contact-form-cross {
.contact-form-cross {
width: .9em;
width: .9em;
height: .9em;
height: .9em;
vertical-align: -5%;
vertical-align: -5%;
margin:0 5px;
margin:0 5px;
}
}
.contact-form-cross:hover {
.contact-form-cross:hover {
cursor:pointer;
cursor:pointer;
}
}
/*==== Footer ====*/
/*==== Footer ====*/
#FOOTER .widget:not(#HTML0) {
#FOOTER .widget:not(#HTML0) {
margin: 0 .5em 2em;
margin: 0 .5em 2em;
}
}
#footer-attribution {
#footer-attribution {
background: var(--dark-bg);
background: var(--dark-bg);
color: var(--color);
color: var(--color);
font-size: 1.5rem;
font-size: 1.5rem;
padding: .5em;
padding: .5em;
display: flex;
display: flex;
justify-content: center;
justify-content: center;
}
}
#footer-attribution a {
#footer-attribution a {
font-weight: normal;
font-weight: normal;
}
}
#footer-attribution a:hover {
#footer-attribution a:hover {
color: var(--link);
color: var(--link);
text-decoration: underline;
text-decoration: underline;
}
}
#footer-attribution span:not(#presentyear)::after {
#footer-attribution span:not(#presentyear)::after {
content: "\FF5C";
content: "\FF5C";
margin-right: 3px;
margin-right: 3px;
}
}
#footer-attribution span:last-child::after {
#footer-attribution span:last-child::after {
display: none;
display: none;
}
}
@media (max-width: 950px ) {
@media (max-width: 950px ) {
#footer-attribution {
#footer-attribution {
align-items: center;
align-items: center;
flex-direction: column;
flex-direction: column;
}
}
#footer-attribution span::after {
#footer-attribution span::after {
display: none;
display: none;
}
}
}
}
/*==== SVG ====*/
/*==== SVG ====*/
.linesvg {
.linesvg {
height: 28px;
height: 28px;
width: 28px;
width: 28px;
padding-bottom: 3px;
padding-bottom: 3px;
margin-left: 2px;
margin-left: 2px;
}
}
.verified {
.verified {
height: 16px;
height: 16px;
width: 16px;
width: 16px;
vertical-align: -5%;
vertical-align: -5%;
margin-left: 3px;
margin-left: 3px;
}
}
.moon.svg {
.moon.svg {
transform: scale(-1, 1);
transform: scale(-1, 1);
}
}
.svg-icon-24 {
.svg-icon-24 {
fill: currentColor;
fill: currentColor;
height: 1.2em;
height: 1.2em;
width: 1.2em;
width: 1.2em;
vertical-align: -15%;
vertical-align: -15%;
}
}
/*==== Font Awesome ====*/
/*==== Font Awesome ====*/
.svg {
.svg {
fill: currentColor;
fill: currentColor;
height: 1em;
height: 1em;
width: 1em;
width: 1em;
margin-left: 2px;
margin-left: 2px;
margin-right: 2px;
margin-right: 2px;
vertical-align: -8%;
vertical-align: -8%;
}
}
/*==== Widget Title ====*/
/*==== Widget Title ====*/
.title {
.title {
background: linear-gradient(to right, var(--brand-light), var(--brand), var(--brand-light));
background: linear-gradient(to right, var(--brand-light), var(--brand), var(--brand-light));
font-size: 1.8rem;
font-size: 1.8rem;
font-weight: bold;
font-weight: bold;
line-height: 1.2;
line-height: 1.2;
margin-bottom: .5em;
margin-bottom: .5em;
padding: 3px;
padding: 3px;
color: var(--brand-font);
color: var(--brand-font);
border-radius: 3px;
border-radius: 3px;
text-align: center;
text-align: center;
}
}
/*==== Popular Posts ====*/
/*==== Popular Posts ====*/
.PopularPosts .article {
.PopularPosts .article {
height: 90px;
height: 90px;
position: relative;
position: relative;
margin-bottom: 20px;
margin-bottom: 20px;
transition: .3s;
transition: .3s;
border-radius: 5px;
border-radius: 5px;
box-shadow: 1px 1px 2px var(--shadow);
box-shadow: 1px 1px 2px var(--shadow);
}
}
.article > a {
.article > a {
position: absolute;
position: absolute;
top: 0;
top: 0;
left: 0;
left: 0;
width: 100%;
width: 100%;
height: 100%;
height: 100%;
}
}
.article:hover {
.article:hover {
box-shadow: 8px 8px 10px var(--shadow);
box-shadow: 8px 8px 10px var(--shadow);
}
}
.article-header {
.article-header {
color: var(--dark-color);
color: var(--dark-color);
font-size: 1.4rem;
font-size: 1.4rem;
line-height: 1.5;
line-height: 1.5;
bottom: 0;
bottom: 0;
right: 5px;
right: 5px;
position: absolute;
position: absolute;
margin-top: 5px;
margin-top: 5px;
}
}
.PopularPosts ul {
.PopularPosts ul {
max-width: 600px;
max-width: 600px;
margin-right: auto;
margin-right: auto;
margin-left: auto;
margin-left: auto;
}
}
.pop-img img {
.pop-img img {
position: absolute;
position: absolute;
object-fit: cover;
object-fit: cover;
width: 40%;
width: 40%;
height: 100%;
height: 100%;
border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
}
.pop-title {
.pop-title {
display: flex;
display: flex;
font-weight: normal;
font-weight: normal;
margin-bottom: 5px;
margin-bottom: 5px;
overflow: hidden;
overflow: hidden;
line-height: 1.4;
line-height: 1.4;
position: relative;
position: relative;
font-size: 1.6rem;
font-size: 1.6rem;
height: 4.4em;
height: 4.4em;
left: 41%;
left: 41%;
width: 54%;
width: 54%;
}
}
Diferenças salvas
Texto original
Abrir arquivo
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html b:css='false' b:defaultwidgetversion='2' b:js='true' b:layoutsVersion='3' b:responsive='true' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'><b:attr name='xmlns' value=''/><b:attr name='xmlns:b' value=''/><b:attr name='xmlns:expr' value=''/><b:attr name='xmlns:data' value=''/> <head> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0' name='viewport'/> <meta expr:content='"text/html; charset=" + data:blog.encoding' http-equiv='Content-Type'/> <meta content='blogger' name='generator'/> <!-- DNS prefetch --> <link href='//blogger.googleusercontent.com' rel='dns-prefetch'/> <link href='//1.bp.blogspot.com' rel='dns-prefetch'/> <link href='//www.blogger.com' rel='dns-prefetch'/> <link href='//cdn.jsdelivr.net' rel='dns-prefetch'/> <!-- SEO --> <b:if cond='data:view.isSingleItem'> <title><data:blog.pageName/> | <data:blog.title/></title> <meta expr:content='resizeImage(data:view.featuredImage, 560, "16:9")' name='thumbnail'/> <b:elseif cond='data:view.search.query'/> <title>Search Query of "<data:view.search.query/>" | <data:blog.title/></title> <b:elseif cond='data:view.isLabelSearch'/> <title><data:blog.pageName/> | <data:blog.title/></title> <b:elseif cond='data:view.archive.month'/> <title><data:view.archive.month/>/<data:view.archive.year/> | <data:blog.title/></title> <b:elseif cond='data:view.archive.year'/> <title><data:view.archive.year/> | <data:blog.title/></title> <b:elseif cond='data:view.isError'/> <title>404 Not Found | <data:blog.title/></title> <b:else/> <title><data:blog.pageTitle/></title> </b:if> <meta expr:content='data:view.description.escaped' name='description'/> <link expr:href='data:view.url.canonical' rel='canonical'/> <!-- Favicon --> <link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/> <!-- RSS Feed --> <data:blog.feedLinks/> <!-- OGP --> <meta expr:content='data:blog.url.canonical' property='og:url'/> <b:if cond='data:view.isSingleItem'> <meta expr:content='data:blog.pageName.escaped + " | " + data:blog.title' property='og:title'/> <b:elseif cond='data:view.search.query'/> <meta expr:content=' "Search Query of " + data:view.search.query + " | " + data:blog.title' property='og:title'/> <b:elseif cond='data:view.isLabelSearch'/> <meta expr:content='"Label: " + data:blog.pageName.escaped + " | " + data:blog.title' property='og:title'/> <b:elseif cond='data:view.archive.month'/> <meta expr:content='data:view.archive.month + "/" + data:view.archive.year + " | " + data:blog.title' property='og:title'/> <b:elseif cond='data:view.archive.year'/> <meta expr:content='data:view.archive.year + " | " + data:blog.title' property='og:title'/> <b:elseif cond='data:view.isError'/> <meta expr:content='"404 Not Found" + " | " + data:blog.title' property='og:title'/> <b:else/> <meta expr:content='data:blog.title' property='og:title'/> </b:if> <meta expr:content='data:view.description.escaped' property='og:description'/> <b:if cond='data:view.isSingleItem'> <meta content='article' property='og:type'/> <b:else/> <meta content='blog' property='og:type'/> </b:if> <meta expr:content='data:blog.title' property='og:site_name'/> <b:if cond='data:view.featuredImage'> <meta expr:content='resizeImage(data:view.featuredImage, 560, "16:9")' property='og:image'/> <b:else/> <meta content='【OGP Image URL here】' property='og:image'/> </b:if> <meta content='summary_large_image' name='twitter:card'/> <meta content='light' id='twth' name='twitter:widgets:theme'/> <b:if cond='!data:view.isLayoutMode'> <b:skin><![CDATA[ /*-------------------------------------------------------------- Blogger Template Name : F-light Version : 1.35-TD-en Designer: Fujiyan Url : https://f-light-theme.blogspot.com/ License : Customization is available, but redistribution and sale are prohibited. ----------------------------------------------------------------*/ /*==== Reset CSS ====*/ html{min-height:100vh}.item-control{display:none}*{margin:0;padding:0;font-size:100%;vertical-align:baseline}*,::after,::before{box-sizing:border-box}html{font-size:62.5%}body{word-wrap:break-word;overflow-wrap:break-word}img{height:auto;max-width:100%;vertical-align:bottom}iframe{max-width:100%;border:none}.post-body ol,.post-body ul{padding-left:1em}.widget-content ul,.widget-content ol{padding-left:1.5em}@media(max-width:1024px){body{font-size:1.6rem}} /*<Group description="Brand Color"> <Variable name="brand" description="Deep Brand Color" type="color" default="#4169e1" value="#4169e1"/> <Variable name="brand.font" description="Text on Deep Brand Color" type="color" default="#ffffff" value="#ffffff"/> <Variable name="brand.light" description="Pale Brand Color" type="color" default="#1e90ff" value="#1e90ff"/> <Variable name="brand.light.font" description="Text on Pale Brand Color" type="color" default="#ffffff" value="#ffffff"/> <Variable name="sub.brand" description="Sub Brand Color" type="color" default="#ff6347" value="#ff6347"/> <Variable name="sub.brand.font" description="Text on Sub Brand Color" type="color" default="#ffffff" value="#ffffff"/> </Group> <Group description="Background Color"> <Variable name="darkmode.dark.bg" description="Deep Background Color in Dark Mode" type="color" default="#171e2d" value="#171e2d"/> <Variable name="darkmode.light.bg" description="Pale Background Color in Dark Mode" type="color" default="#1d2638" value="#1d2638"/> <Variable name="lightmode.dark.bg" description="Deep Background Color in Light Mode" type="color" default="#eeeeff" value="#eeeeff"/> <Variable name="lightmode.light.bg" description="Pale Background Color in Light Mode" type="color" default="#fbfbff" value="#fbfbff"/> <Variable name="darkmode.shadow" description="Shadow Color in Dark Mode" type="color" default="#000000" value="#000000"/> <Variable name="lightmode.shadow" description="Shadow Color in Light Mode" type="color" default="#aaaaaa" value="#aaaaaa"/> </Group> <Group description="Text Color"> <Variable name="darkmode.dark.font" description="Deep Text Color in Dark Mode" type="color" default="#eeeeee" value="#eeeeee"/> <Variable name="darkmode.light.font" description="Pale Text Color in Dark Mode" type="color" default="#c0c0c0" value="#c0c0c0"/> <Variable name="lightmode.dark.font" description="Deep Text Color in Light Mode" type="color" default="#333333" value="#333333"/> <Variable name="lightmode.light.font" description="Pale Text Color in Light Mode" type="color" default="#666666" value="#666666"/> <Variable name="darkmode.link" description="Link Color in Dark Mode" type="color" default="#00bfff" value="#00bfff"/> <Variable name="lightmode.link" description="Link Color in Light Mode" type="color" default="#4169e1" value="#4169e1"/> </Group>*/ /*==== Dark Mode ====*/ :root { --dark-bg: $(darkmode.dark.bg); /*Deep Background Color*/ --light-bg: $(darkmode.light.bg); /*Pale Background Color*/ --shadow: #000; /*Shadow*/ --color: $(darkmode.dark.font); /*Deep Text Color*/ --dark-color: $(darkmode.light.font); /*Pale Text Color*/ --red-color: Tomato; /*Red Text*/ --blue-color: #8cb4ff; /*Blue Text*/ --green-color: #00d061; /*Green Text*/ --link: $(darkmode.link); /*Link Color*/ --brand: $(brand); /*Deep Brand Color*/ --brand-light: $(brand.light); /*Pale Brand Color*/ --brand-font: $(brand.font); /*Text Color on Brand Color*/ --sub-brand: $(sub.brand); /*Sub Brand Color*/ --sub-brand-font: $(sub.brand.font) /*Text Color on Sub Brand Color*/ } /*==== Light Mode ====*/ :root[data-theme-mode="light"] { --dark-bg: $(lightmode.dark.bg); /*Deep Background Color*/ --light-bg: $(lightmode.light.bg); /*Pale Background Color*/ --shadow: $(lightmode.shadow); /*Shadow*/ --color: $(lightmode.dark.font); /*Deep Text Color*/ --dark-color: $(lightmode.light.font); /*Pale Text Color*/ --red-color: #d30038; /*Red Text*/ --blue-color: #592bff; /*Blue Text*/; --green-color: #007936; /*Green Text*/; --link: $(lightmode.link); /*Link Color*/ } ]]></b:skin> <style>/*<![CDATA[*/ /*==== Common ====*/ body { font-size: 1.7rem; font-family: sans-serif; color: var(--color); background: var(--light-bg); text-underline-offset: .2em; text-decoration-skip-ink: none; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; } #sub-content a { color: var(--link); } #sub-content .widget { padding: .5em; } a { text-decoration: none; color: inherit; transition: .3s; } .blogger-clickTrap { display: none; } button:hover { cursor: pointer; } select { outline: none; } ::selection { background: #00e5ff; color: #000; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--light-bg); border-radius: 10px; } ::-webkit-scrollbar-thumb { background: #aaa; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #bbb; } * { scrollbar-width: thin; scrollbar-color: #aaa transparent; } summary { display: block; list-style: none; } summary::-webkit-details-marker { display: none; } #MAIN .widget { margin-bottom: 3em; } rt { font-size: 50%; } /*==== Header ====*/ header { background: var(--light-bg); } #header-title { font-size: 2.5rem; padding: .5em; text-align: center; } #header-title a { font-weight: bold; } #header-title a:hover { color: var(--link); } #header-desc { font-size: 1.2rem; line-height: 1.3; color: var(--dark-color); text-align: center; padding: 0 1em 1em; } .header-img { background-position: center; background-repeat: no-repeat; text-align: center; } /*==== Mode Switch ====*/ #mode-switch { position: absolute; top: 5px; right: 1em; } #mode-switch label { cursor: pointer; } #mode-switch svg { height: 24px; width: 24px; color: var(--brand-font); } #switch-mode-dark svg { transform: scale(-1, 1); } @media (max-width: 1024px) { #mode-switch { right: 45px; } } #switch-mode-dark { display: none; } input[type="checkbox"]#js_mode_toggle { display: none; } #js_mode_toggle:checked ~ label #switch-mode-dark { display: initial; } #js_mode_toggle:checked ~ label #switch-mode-light { display: none; } #nav-button:checked ~ #mode-switch { display: none; } /*==== Nav Bar ====*/ nav { background: linear-gradient(to right, var(--brand-light), var(--brand), var(--brand-light)); opacity: .9; box-shadow: 0 3px 6px -4px var(--shadow); position: -webkit-sticky; position: sticky; top: 0; z-index: 10; min-height: 2em; margin-top: -1px; } #nav { position: relative; margin: auto; width: 100%; max-width: 1160px; min-width: 960px; } #nav-button, #nav-label { display: none; } #nav-content ul { display: flex; flex-wrap: wrap; max-width: 640px; } #nav-content li { line-height: 1.5; list-style: none; transition: .3s; } #nav-content li a { display: block; font-size: 1.4rem; padding: .5em 10px; color: var(--brand-font); } #nav-content li a:hover { background: #eef; color: #333!important; } @media (max-width: 1024px ) { nav { height: 2em; } #nav { box-shadow: 0 3px 6px -4px var(--shadow); background: var(--light-bg); padding-left: 8px; min-width: 0; } #nav-content { max-height: 0; overflow: hidden; transition: .2s; } input[type="checkbox"]#nav-button { display: none; } #nav-button:checked ~ #nav-content { max-height: 500px; transition: 1s; } #nav-content ul { margin-top: 30px; max-width: 100%; } #nav-content li { width: 200px; margin-bottom: 5px; margin-right: 8px; } #nav-content li a { width: 100%; display: block; color: var(--brand-font); text-align: center; background: var(--brand); border-radius: 3px; } #nav-label { float: right; position: relative; display: flex; height: 30px; width: 30px; align-items: center; margin-left: 5px; cursor: pointer; z-index: 1; } #nav-label span, #nav-label span::before, #nav-label span::after { position: absolute; content: ""; display: block; height: 2px; width: 24px; border-radius: 2px; background: var(--brand-font); transition: .3s; } #nav-label span::before { bottom: 8px; } #nav-label span::after { top: 8px; } #nav-button:checked ~ #nav-label span { background: transparent; } #nav-button:checked ~ #nav-label span::before { bottom: 0; transform: rotate(45deg); background: var(--color); } #nav-button:checked ~ #nav-label span::after { top: 0; transform: rotate(-45deg); background: var(--color); } } #mobile-home { display: none; color: var(--brand-font); position: absolute; font-size: 2.2rem; top: 3px; } #mobile-jump { display: none; color: var(--brand-font); position: absolute; } #mobile-jump span { display: inline-block; margin: 0 5px; height: 34px; cursor: pointer; } #mobile-jump svg { margin-top: 5px; } #nav-button:checked ~ #mobile-home, #nav-button:checked ~ #mobile-jump,#nav-button:checked ~ .item-control a:not(.comment-delete) { display: none; } @media (max-width: 1024px) { #mobile-home, #mobile-jump { display: initial; } } /*==== Search Box ====*/ #search-wrap { position: absolute; right: 0; } .search-box-form { position: relative; width: 300px; margin-right: 90px; background: transparent; z-index: 2; } .search-box-text { width: 100%; height: 1.9em; margin-top: 2px; border: 2px solid transparent; border-radius: 5px; outline: none; background: transparent; color: var(--brand-font); font-size: 1.6rem; padding: 2px 5px 0 28px; transition: .2s; } .search-box-text:hover, .search-box-text:focus { border-color: var(--brand-font); } .search-box-text:focus { background: var(--brand); } .search-box-text::placeholder { color: var(--brand-font); } .search-box-submit { color: var(--brand-font); position: absolute; left: 2px; top: 6px; border: none; background: transparent; outline: 0; padding: 0; transition: .3s; } .search-box-submit svg { height: 1.3em; width: 1.3em; } .search-box-submit:hover { transform: scale(1.2); } ::-webkit-search-cancel-button { height: 1.1em; width: 1.1em; -webkit-appearance: none; cursor: pointer; background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="%23fff"/></svg>'); } input[type="search"]::-webkit-search-decoration { display: none; } @media (max-width: 600px ) { #search-wrap { right: 30px; } .search-box-form { width: 150px; margin-left: 5px; margin-right: 55px; } .search-box-text:focus { width: 230px; } } #nav-button:checked ~ #search-wrap { display: none; } .search-box-text::-moz-placeholder { opacity: 1; color: var(--brand-font); } /*==== Archive Widget ====*/ .archive-list { margin: 0 auto 1em; max-width: 500px; } .archive-list ul { box-shadow: 2px 2px 6px var(--shadow); border-top: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; color: var(--color); max-height: 16em; overflow: auto; margin: 0 1px 0!important; padding-left: 0!important; } .archive-list ul li { font-size: 1.5rem; line-height: 1.8; margin: 0!important; padding: 0!important; list-style: none; } .archive-list summary { position: relative; padding: 5px 0 5px 8px; height: 2em; line-height: 1.5; background: var(--brand); color: var(--brand-font); font-size: 1.5rem; border-radius: 5px; transition: .3s; } .archive-list summary:hover, details[open].archive-list summary:hover { background: var(--brand-light); cursor: pointer; } .archive-list a { display: block; padding-left: .5em; color: var(--color)!important; text-decoration: none!important; } .archive-list a:hover { background: dodgerblue; color: #fff!important; } .archive-list .svg-icon-24 { position: absolute; right: 3px; top: 0; font-size: 2.5rem; color: var(--darkfcolor); transition: .2s; } details[open].archive-list .svg-icon-24 { transform: rotate(180deg); } details[open].archive-list summary { color: var(--brand-font); background: var(--brand-light); box-shadow: 0 4px 4px -4px var(--shadow); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .archive-list ul::-webkit-scrollbar-track { background: var(--light-bg); } /*==== Page List / Link List ====*/ .list-widget li { list-style-type: none; line-height: 1.5; padding-bottom: 5px; } .list-widget a { color: var(--color)!important; font-size: 1.3rem; font-weight: bold; padding: 5px 8px 3px; text-indent: -5px; border-radius: 2px; width: 100%; display: block; } .list-widget a::after { content: "\00BB"; margin-left: 2px; } .list-widget a:hover { background: var(--brand); color: var(--brand-font)!important; } .list-widget li a::before { content: "\25cf"; padding-right: 2px; color: var(--brand); } .list-widget li a:hover::before { color: var(--brand-font); } .current-page { font-size: 1.3rem; padding: 5px 8px 3px; text-indent: -5px; display: block; } .current-page::before { content: "\25cf"; padding-right: 2px; } /*==== Label Widget ====*/ .category-label { display: inline-block; border-radius: 5px; margin-bottom: .5em; background: var(--brand); color: var(--brand-font)!important; transition: .3s; line-height: 1; padding: 6px; font-size: 1.2rem; } .category-label:hover { background: var(--brand-light); } .hashtag-label { display: inline-block; margin-bottom: .5em; color: var(--color)!important; border: solid var(--dark-color) 1px; border-radius: 3px; line-height: 1; transition: .2s; font-size: 1.4rem; padding: 4px 5px 3px; } .list-label-widget-content { text-align: center; } .hashtag-label:hover { border-color: var(--sub-brand); background: var(--sub-brand); color: var(--sub-brand-font)!important; } .label-count { font-size: 1.1rem; margin-left: 3px; } .cloud-label-widget-content { text-align: center; } /*== Profile Widget ==*/ .Profile { min-height: 140px; text-align: center; } .g-profile { font-size: 1.9rem; line-height: 1.5; } .location { font-size: 1.5rem; } .profile-info a { font-weight: bold; color: var(--color)!important; } .profile-info a:hover { color: var(--link)!important; text-decoration: underline; } .profile-textblock { font-size: 1.3rem; line-height: 1.3; margin-top: .5em; margin-bottom: .5em; color: var(--dark-color); } .profile-textblock a { color: var(--link)!important; } .profile-textblock a:hover { text-decoration: underline; color: var(--dark-color)!important; } .profile-img { width: 90px; height: 90px; object-fit: contain; border-radius: 50%; transition: .3s; margin-bottom: .5em; } .profile-img:hover { opacity: .8; } .profile-info>.profile-link { font-size: 1.6rem; } .profile-info>.profile-link::after { content: "\00BB"; } .default-avatar { display: inline-block; margin-bottom: .5em; } .avatar-icon { font-size: 70px; color: var(--dark-color); border: 1px solid var(--dark-color); border-radius: 50%; } /* Team Profile */ .Profile li { margin: 1em; padding-bottom: 1em; list-style: none; } .Profile li { border-bottom: dotted var(--dark-color) 2px; } .Profile li:last-child { border: none; } .profile-name { font-size: 1.9rem; line-height: 1.5; } a .profile-name { font-weight: bold; color: var(--color) !important; } a .profile-name:hover { color: var(--link) !important; text-decoration: underline; } a.profile-link:nth-of-type(2) { font-size: 1.6rem; font-weight: bold; color: var(--color) !important; } a.profile-link:nth-of-type(2):hover { color: var(--link) !important; text-decoration: underline!important; } .profile-link:nth-of-type(2)::after { content: "\00BB"; } /*==== Search Widget ====*/ .widget-content form { position: relative; max-width: 600px; margin: 0 auto; } .search-input input { box-sizing: border-box; background: var(--dark-bg); color: var(--color); border-top-left-radius: 5px; border-bottom-left-radius: 5px; border: none; width: calc(100% - 70px); height: 40px; padding: 0 .5em; } .search-input input:focus { outline: none; border: 1px solid var(--brand); padding: 0 calc(.5em - 1px); } .search-input input::placeholder { color: var(--dark-color); } .search-action { position: absolute; background: var(--brand); color: var(--brand-font); border: none; border-top-right-radius: 5px; border-bottom-right-radius: 5px; top: 0; right: 0; width: 70px; height: 40px; } .search-action:hover { cursor: pointer; opacity: .8; } /*==== Contact Form Widget ====*/ .contact-form-email, .contact-form-email-message, .contact-form-name { max-width:100%; min-width:100%; color: var(--color); padding: .5em; outline: none; border-radius: 3px; background: var(--dark-bg); transition: .2s; border: 1px solid transparent; } .contact-form-email:focus, .contact-form-email-message:focus, .contact-form-name:focus { box-shadow: 0 0 6px var(--link); border: 1px solid var(--link); } .contact-form-email-message { min-height: 200px; } .contact-form-email, .contact-form-name { height:40px; } .contact-form-button-submit { border-radius : 3px; line-height: .1; margin: 2em 0; cursor: pointer; padding: 1em 2em; background: var(--brand); color: var(--brand-font); transition: .3s; border: none; outline: none; } .contact-form-button-submit:hover { transform: scale(1.1); } .contact-form-button-submit:active { transform: none; } .contact-form-error-message-with-border, .contact-form-success-message-with-border { color: var(--color); font-weight: bold!important; } .contact-form-cross { width: .9em; height: .9em; vertical-align: -5%; margin:0 5px; } .contact-form-cross:hover { cursor:pointer; } /*==== Footer ====*/ #FOOTER .widget:not(#HTML0) { margin: 0 .5em 2em; } #footer-attribution { background: var(--dark-bg); color: var(--color); font-size: 1.5rem; padding: .5em; display: flex; justify-content: center; } #footer-attribution a { font-weight: normal; } #footer-attribution a:hover { color: var(--link); text-decoration: underline; } #footer-attribution span:not(#presentyear)::after { content: "\FF5C"; margin-right: 3px; } #footer-attribution span:last-child::after { display: none; } @media (max-width: 950px ) { #footer-attribution { align-items: center; flex-direction: column; } #footer-attribution span::after { display: none; } } /*==== SVG ====*/ .linesvg { height: 28px; width: 28px; padding-bottom: 3px; margin-left: 2px; } .verified { height: 16px; width: 16px; vertical-align: -5%; margin-left: 3px; } .moon.svg { transform: scale(-1, 1); } .svg-icon-24 { fill: currentColor; height: 1.2em; width: 1.2em; vertical-align: -15%; } /*==== Font Awesome ====*/ .svg { fill: currentColor; height: 1em; width: 1em; margin-left: 2px; margin-right: 2px; vertical-align: -8%; } /*==== Widget Title ====*/ .title { background: linear-gradient(to right, var(--brand-light), var(--brand), var(--brand-light)); font-size: 1.8rem; font-weight: bold; line-height: 1.2; margin-bottom: .5em; padding: 3px; color: var(--brand-font); border-radius: 3px; text-align: center; } /*==== Popular Posts ====*/ .PopularPosts .article { height: 90px; position: relative; margin-bottom: 20px; transition: .3s; border-radius: 5px; box-shadow: 1px 1px 2px var(--shadow); } .article > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .article:hover { box-shadow: 8px 8px 10px var(--shadow); } .article-header { color: var(--dark-color); font-size: 1.4rem; line-height: 1.5; bottom: 0; right: 5px; position: absolute; margin-top: 5px; } .PopularPosts ul { max-width: 600px; margin-right: auto; margin-left: auto; } .pop-img img { position: absolute; object-fit: cover; width: 40%; height: 100%; border-radius: 5px 0 0 5px; } .pop-title { display: flex; font-weight: normal; margin-bottom: 5px; overflow: hidden; line-height: 1.4; position: relative; font-size: 1.6rem; height: 4.4em; left: 41%; width: 54%; } .pop-title::before { content: "\25CF"; padding-right: 2px; color: var(--brand); transition: .3s; } .article:hover .pop-title::before { color: var(--sub-brand); } .pop-snippet { display: none; } @media (max-width: 1024px ) { #PopularPosts1 article { height: 130px; } .pop-title { padding-top: .5em; left: 46%; } .pop-img img { width: 45%; } } .ranked-li { position: relative; } .PopularPosts li { list-style-type: none; } .post-rank { display: inline-block; position: absolute; z-index: 1; top: 0; left: 0; width: 1.5em; height: 1.2em; line-height: 1.3; text-align: center; font-weight: bold; color: var(--sub-brand-font); border-top-left-radius: 5px; background: var(--sub-brand); } /*==== Featured Post ====*/ .article { height: 174px; position: relative; transition: .3s; border-radius: 5px; box-shadow: 1px 1px 2px var(--shadow); } .article-category { position: absolute; top: 0; left: 0; z-index: 1; max-width: 40%; max-height: 150px; overflow: hidden; opacity: 0; transition: .3s; } .article-category-label { line-height: 1.7; margin-bottom: 5px; display: inline-block; background: #22222288; transition: .3s; } .article-category-label:first-child { border-top-left-radius: 5px; } .article-category-label a { display: block; color: var(--brand-font)!important; font-weight: normal; font-size: 1.4rem; padding: 3px 5px 1px 4px; } .article-category-label:hover { background: var(--brand-light); } .article:hover .article-category { opacity: 1; } #feat-name { position: absolute; top: 0; left: 0; font-weight: bold; line-height: 1; color: #000; border-top-left-radius: 5px; background: gold; padding: 6px; } .feat-img { transition: .3s; } .feat-img img { position: absolute; object-fit: cover; width: 40%; height: 100%; border-radius: 5px 0 0 5px; } .feat-title { display: flex; font-size: 1.82rem; font-weight: normal; margin-bottom: 5px; overflow: hidden; height: 3.45em; line-height: 1.4; padding-top: .5em; left: 41%; width: 58%; position: relative; } .feat-title::before { content: "\2605"; padding-right: 2px; color: var(--brand); transition: .3s; } .article:hover .feat-title::before { color: gold; } .article:hover #feat-name { display: none; } .article:hover .feat-img { opacity: .7; } .feat-snippet { font-size: 1.4rem; line-height: 1.5; height: 6em; overflow: hidden; color: var(--dark-color); left: 42%; width: 57%; position: relative; } @media (max-width: 600px ) { .article { height: 130px; } .feat-title { font-size: 1.6rem; height: 5.8em; left: 47%; width: 52%; } .feat-snippet { display: none; } .feat-img img { width: 45%; } #FeaturedPost1 .article-category { display: none; } .article:hover #feat-name { display: initial; } } /*]]>*/<b:if cond='!data:view.isHomepage'>/*<![CDATA[*/ #mobile-jump { left: 45px; } /*]]>*/</b:if><b:if cond='!data:view.isSingleItem and !data:view.isError'>/*<![CDATA[*/ /*==== 2 Column Layout ====*/ main { width: 97%; max-width: 1155px; display: flex; justify-content: space-between; margin: 0 auto; } #main-content { margin: 3.5em 20px 1em 0; width: calc(68% - 20px); flex-shrink: 0; } #sub-content { margin-top: 3em; width: 32%; flex-shrink: 0; } #sub-content .widget { margin-bottom: 1.2em; } @media(max-width :1024px) { main { display: block; width: 100%; padding: 0 .5em; } #main-content { width: 98%; margin: 3em auto 1em; } #sub-content { width: 100%; display: flex; flex-direction: column; } #sub-content .widget { margin-bottom: 0; } } /*==== Article List ====*/ .article { height: 174px; position: relative; margin-bottom: 20px; transition: .3s; border-radius: 5px; box-shadow: 1px 1px 2px var(--shadow); } .article > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .article:hover { box-shadow: 8px 8px 10px var(--shadow); } .article-header { color: var(--dark-color); font-size: 1.4rem; line-height: 1.5; bottom: 0; right: 5px; position: absolute; margin-top: 5px; } .article-category { position: absolute; top: 0; left: 0; z-index: 1; max-width: 40%; max-height: 160px; overflow: hidden; opacity: 0; transition: .3s; } .article-category-label { line-height: 1.7; margin-bottom: 5px; display: inline-block; background: #22222288; transition: .3s; } .article-category-label:first-child { border-top-left-radius: 5px; } .article-category-label a { display: block; color: #fff!important; font-weight: normal; font-size: 1.4rem; padding: 3px 5px 1px 4px; } .article-category-label:hover { background: var(--brand-light); } .article-category-label a:hover { color: var(--brand-font)!important; } .article-img { transition: .3s; } .article-img img { position: absolute; object-fit: cover; width: 40%; height: 100%; border-radius: 5px 0 0 5px; } .article-title { display: flex; font-size: 1.82rem; font-weight: normal; margin-bottom: 5px; overflow: hidden; height: 3.45em; line-height: 1.4; padding-top: .5em; left: 41%; width: 58%; position: relative; } .article-title::before { content: "\25A0"; padding-right: 2px; color: var(--brand); transition: .3s; } .article-snippet { font-size: 1.4rem; line-height: 1.5; height: 6em; overflow: hidden; color: var(--dark-color); left: 42%; width: 57%; position: relative; } @media (max-width: 600px ) { .article { height: 130px; } .article-title { font-size: 1.6rem; height: 5.8em; left: 47%; width: 52%; } .article-snippet { display: none; } .article-img img { width: 45%; } .article-category { opacity: 1; max-width: 45%; max-height: 120px; } } .article:hover .article-title::before { color: var(--sub-brand); } .article:hover .article-img { opacity: .7; } .article:hover .article-category { opacity: 1; } /*]]>*/<b:else/>/*<![CDATA[*/ /*==== 1 Column Layout ====*/ #main-content { position: relative; margin: 3em auto 0; padding: 1em; max-width: 900px; } #sub-content { display: flex; margin: 5em auto 0; max-width: 1300px; } [id^="sub-item"] { flex-basis: 31%; margin-left: auto; margin-right: auto; } @media(max-width :1024px) { #sub-content { flex-direction: column; margin: 5em .5em 0; } [id^="sub-item"] { flex-basis: 100%; margin: 0; } } /*==== Single Page ====*/ .post-body p { margin: 2em 0; } .post-body a { color: var(--link); text-decoration: underline; } .post-body a:hover { color: var(--color); } .post-body { line-height: 1.9; margin-top: 2em; } /*==== List Style ====*/ .post-body ol, .post-body ul { margin-left: 1em; } .post-body ol p, .post-body ul p { margin-top: 1em; } .post-body ol { color: var(--color); } .post-body > ul > li, .post-body > ol > li, .list-movie li { margin-bottom: 1em; padding: 0; line-height: 1.6; } .post-body > ul { list-style: none; } .post-body > ul > li { text-indent: -19px; } .post-body > ul > li::before { content: "\25CF"; color: var(--brand); padding-right: 2px; vertical-align: 4%; } .post-body > ul > li > ul > li, .post-body > ol > li > ul > li { list-style: disc; margin-left: 1.4em; padding-left: 0; } .post-body > ol > li > ul > li { margin-left: -6px; } .post-body ol { counter-reset: li; list-style: none; } .post-body ol li { position: relative; padding-left: 1.2em; margin-left: -1.2em; } .post-body ol li::before { display: inline-block; position: absolute; top: 0; left: 0; font-size: 1.2rem; font-weight: bold; color: var(--brand-font); line-height: 2; text-align: center; margin-left: -10px; background: var(--brand); min-width: 2em; border-radius: 50%; counter-increment: li; content: counter(li); } .post-body ol li ul li::before, .post-body ol li ol li::before, .post-body ul li ol li::before { display: none; } .post-body ul li ol li, .post-body ol li ol li { list-style-type: decimal; margin-left: -8px; padding-left: 0; } .post-body ul li ol li { padding-left: 1.4em; margin-left: 0; } .post-body > ul > li > ul > li, .post-body > ul > li > ol > li { text-indent: 0; padding-left: 0; margin-left: 0; } /*==== Post Image ====*/ .separator a { display: inline-block!important; padding: 0!important; } .separator img, .tr-caption-container { box-shadow: 5px 5px 8px var(--shadow); } .separator { margin: 2em 0; text-align: center; } .tr-caption-container { border-spacing: 0; margin: 1em auto; } .tr-caption { font-size: 1.4rem!important; color: var(--dark-color); padding: 3px; line-height: 1.5; word-break: break-all; text-align: center; } .tr-caption-container td a { padding: 0!important; } /*==== Post Header ====*/ #p-header { text-align: center; display: block; font-size: 1.4rem; margin: 1.5em 0 1em; color: var(--dark-color); } #p-header a:hover { color: var(--link); text-decoration: underline; } #p-header-title { text-align: center; font-size: 2.2rem; font-weight: normal; color: var(--color); margin-top: .5em; margin-left: -8px; line-height: 1.3; } #p-header-title::before { content: "\25A0"; padding-right: 2px; color: var(--brand); } /*==== Poat Label ====*/ #p-category { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 0 5px 3px; } .p-category-label { font-size: 1.9rem; line-height: 1; border-radius: 5px; background: var(--brand); color: var(--brand-font); padding: 6px; font-weight: normal; transition: .3s; display: inline-block; margin-bottom: 5px; } .p-category-label:hover { color: var(--brand-font)!important; background: var(--brand-light); } #p-hashtag { display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 1.5em; } .p-hashtag-label { font-size: 1.5rem; margin: 0 3px 5px; color: var(--color)!important; border: solid var(--dark-color) 1px; border-radius: 5px; line-height: 1; padding: 3px; transition: .2s; } .p-hashtag-label:hover { border-color: var(--sub-brand); background: var(--sub-brand); color: var(--sub-brand-font)!important; } #p-hashtag svg.tag-icon { font-size: 2.2rem; fill: var(--dark-color); margin: 3px 0 0 -22px; } #p-hashtag svg.tag-icon:not(:first-child) { display: none; } /*==== Headings ====*/ .post-body h2 { color: var(--brand-font); font-size: 2rem; padding: 13px 10px 12px; margin: 4.5em 0 1em; background: linear-gradient(to bottom, var(--brand), var(--brand-light)); border-radius: 3px; line-height: 1.2; } .post-body h3 { font-size: 1.8rem; line-height: 1.2; padding: 10px 5px 9px; margin: 4em 0 1em; border-left: solid 10px var(--brand); border-radius: 3px 0 0 3px; display: flex; flex-direction: column; } .post-body h3::after { content: ""; height: 4px; margin: 8px 0 -9px -6px; background: linear-gradient(to right, var(--brand), rgba(255, 255, 255, 0)); } .post-body h3 span { flex-direction: row; } .post-body h4 { font-size: 1.6rem; line-height: 1.2; padding: 10px 5px 9px; margin: 5em 0 1em; border-left: solid 8px var(--brand); border-radius: 3px 0 0 3px; } /*==== Blockquote ====*/ blockquote { margin: 2em 0; padding: 1em; background: var(--dark-bg); font-style: italic; border-radius: 8px; border-left: 8px solid var(--brand); } blockquote cite { display: block; text-align: right; margin: 1em 0 -.5em; font-style: italic; font-size: 1.4rem; } blockquote a { color: var(--blue-color)!important; } blockquote a:hover { color: inherit!important; } /*==== Embeded Content ====*/ .twitter-timeline { margin: 0 auto; } .instagram-media, .instagram-media-registered { margin: auto!important; width: 540px!important; max-width: 100%!important; } audio { width: 500px; max-width: 100%; outline: none; } iframe, video { display: block; margin: 0 auto; } iframe[src*="youtube.com"] { max-width: 100%; height: 100%; aspect-ratio: 16 / 9; } /*==== Quick Edit ====*/ .item-control a:not(.comment-delete) { color: var(--sub-brand-font); padding: 4px 14px; line-height: 1; position: fixed; right: 5px; top: 3px; z-index: 10; opacity: .9; background: var(--sub-brand); border-radius: 5px; } .item-control a:hover { opacity: 1; } @media (max-width: 1024px ) { .item-control a:not(.comment-delete) { top: 35px; } } /*==== Table ====*/ table:not(#bp_toc table):not([class]) { max-width: 100%; border: solid 1px #888; border-collapse: collapse; margin-top: .5em; line-height: 1.5; } table:not(#bp_toc table):not([class]) tbody tr td { border:solid 1px #888; padding: .3em; } table:not(#bp_toc table):not([class]) tbody tr:hover { background: var(--dark-bg); } table:not(#bp_toc table):not([class]) th { border:solid 1px #ccc; text-align: center; color: var(--brand-font); background: var(--brand); padding: .3em; font-weight: normal; } /*==== Auto TOC ====*/ #toc { background: var(--dark-bg); border-radius: 8px; padding: .5em; margin: 5em auto 0; max-width: 600px; display: table; position: relative; } .toc-title { text-align: center; font-size: 2rem; margin: 0; } .toc-title:focus { outline: none; } .toc-title:hover { cursor: pointer; } .toc-container { padding: 1em !important; margin: 0 !important; } .toc-container, .toc-container ul { counter-reset: ul-counter; list-style: none; } .toc-container li { padding: 0; } .toc-container li a { display: flex; padding: 8px 4px 4px; border-radius: 3px; color: var(--color)!important; text-decoration: none!important; line-height: 1.2; } .toc-container li a:hover { background: var(--brand); color: var(--brand-font)!important; } .toc-container li a:hover::before { color: var(--brand-font)!important; } .toc-container li a:hover svg { fill: #fff; } .toc-container li a::before { counter-increment: ul-counter; content: counters(ul-counter,"-"); color: var(--link); padding-right: .5em; white-space: nowrap; font-weight: bold; } .toc-container > li > ul > li { font-size: 1.5rem; margin-left: -12px; } .toc-title .angle { position: absolute; right: .5em; top: 5px; font-size: 3.5rem; color: var(--dark-color); transition: .2s; } #toc[open] .angle { transform: rotate(180deg); } #backtoc { position: fixed; right: 0; bottom: 9em; padding: 8px; border-radius: 5px; background: rgba(0, 0, 0, .2); z-index: 1; transition: .2s; } #backtoc:hover { background: rgba(0, 0, 0, .1); } #backtoc svg { fill: var(--dark-color); font-size: 3rem; vertical-align: -20%; } @media (max-width:1024px) { #backtoc { bottom: 2em; } } /*==== Comment ====*/ #comments { margin: 4em 0; } .comment-block { margin-top: 1em; padding-top: 35px; } .comment-timestamp a:hover { color: var(--link)!important; text-decoration: underline; } .comment-body a { color: var(--blue-color); text-decoration: underline; } #comments-block { margin-left: 0!important; } .comment-author img { border-radius: 50%; width: 50px; height: 50px; margin-right: .5em; object-fit: cover; } .comment-timestamp { float: right; position: relative; right: .5em; bottom: 42px; font-size: 1.5rem; color: var(--dark-color); } .comment-timestamp a { font-weight: normal; color: inherit!important; } a.comment-delete { border-radius: 3px; padding: 0 3px; } a.comment-delete:hover { color: #fff!important; background: red; } .comment-author { display: flex; align-items: center; line-height: 1; margin: 0 0 1em 3px; font-weight: bold; } .comment-author a:hover { color: var(--link)!important; } .comment-body { padding: 1em 1em 2em!important; margin-right: 0; border-radius: 8px; position: relative; background: var(--dark-bg); margin-bottom: 1em; line-height: 1.7; } .comment-body::after { content: ""; position: absolute; top: -12px; left: 26px; margin-left: -8px; border-right: 10px solid transparent; border-left: 10px solid transparent; border-bottom: 12px solid var(--dark-bg); } .comment-form p { margin-bottom: 3em; } .comment-page-link, .comment-form-jump { text-decoration: none!important; text-align: center; font-size: 1.6rem; color: var(--brand-font)!important; display: block; margin-top: 1em; background: var(--brand); border-radius: 5px; padding: 5px; line-height: 1.4; } .comment-page-link:hover, .comment-form-jump:hover { text-decoration: none!important; background: var(--brand-light); color: var(--brand-font)!important; } p.deleted { font-style: italic; color: var(--dark-color); } #embed-form-button { text-align: center; font-size: 1.6rem; display: block; margin: 3em 0 2em; background: var(--brand); border-radius: 5px; padding: 5px; transition: .3s; position: relative; color: var(--brand-font); } #embed-form-button:hover { cursor: pointer; background: var(--brand-light); } .comment-page-link, .comment-form-jump, #embed-form-button { margin-left: auto; margin-right: auto; max-width: 100%; width: 400px; } iframe.embed-form { width: 100%; height: 290px; border-radius: 8px; margin-top: 2em; } .comment-message { display: block; text-align: center; margin-top: 3em; line-height: 1.7; } .comment-message a { color: var(--link)!important; text-decoration: underline!important; } .comment-message a:hover { color: var(--color)!important; } .embed-form { display: none; } input[type="checkbox"]#embed-form-open { display: none; } #embed-form-open:checked ~ .embed-form { display: inline; } #embed-form-open:checked ~ #embed-form-button { display: none; } /*==== Code Preview ====*/ pre { position: relative; white-space: pre-wrap; word-break: break-all; background: var(--dark-bg); color: var(--color); margin: 3em 0; padding: .5em; text-indent: 0; line-height: 1.3; overflow: auto; max-height: 500px; } /*==== Top/Bottom Scroll Button ====*/ #scroll-button svg { transition: .5s; fill: currentColor; } #pagetop, #pagebottom { display: none; position: fixed; right: 0; z-index: 1; color: var(--dark-color); opacity: .7; } #pagetop:hover, #pagebottom:hover { opacity: 1; } #pagetop { bottom: 70px; margin-bottom: .5em; } #pagetop svg { transform: rotate(180deg); } #pagebottom { bottom: 20px; margin-top: .5em; } #pagetop svg, #pagebottom svg { height: 40px; width: 50px; } #scroll-button svg:hover { cursor: pointer; } @media (max-width: 1024px) { #scroll-button { display: none; } } /*]]>*/</b:if><b:if cond='data:view.isMultipleItems and !data:view.search.query and !data:view.isArchive'>/*<![CDATA[*/ /*==== Numbered Pagenation ====*/ .showpageNum a, .showpagePoint, .showpage a { font-weight: bold; font-family: arial; line-height: 1; padding: .5em 0; min-width: 2em; margin: 0 3px 5px; border-radius: 3px; display: inline-block; } .showpageNum a, .showpage a { color: var(--color); } .showpagePoint { color: var(--brand-font); background: var(--brand); } .showpageNum a:hover, .showpage a:hover { color: var(--brand-font); background: var(--brand); }#main-content { position: relative; } .showpageOf { position: absolute; top: -2.5em; left: calc(50% - 100px); background: var(--dark-bg); padding: 2px 1em; border-radius: 20px; width: 200px; } #page-num { font-weight: bold; } /*]]>*/</b:if><b:if cond='data:view.isHomepage'>/*<![CDATA[*/ .showpageOf { display: none; } /*]]>*/</b:if><b:if cond='data:view.isPost'>/*<![CDATA[*/ /*==== SNS Share Buttons ====*/ .sns-share-buttons { width: 350px; margin: 4em auto; display: flex; justify-content: space-around; max-width: 100%; } .sns-share-buttons span { text-align: center; font-size: 2.4rem; display: block; padding-top: 9px; line-height: 1; border-radius: 5px; height: 40px; width: 40px; transition: .3s; color: #fff; } .sns-share-buttons span:hover { transform: scale(1.1); } .svg-facebook-f { height: 32px; width: 32px; margin-top: -1px; } .sns-share-buttons span:hover { cursor: pointer; } .tweet { background: #000; } .facebook { background: #1877f2; } .line { background: #00b900; } .linkedin { background: #0a66c2; } .pocket { background: #ef4056; } .copy_btn { background: slategray; } .sns-share-buttons .copy_btn { font-family: arial; font-size: .9rem; } .copy_btn::before { content: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71 M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>'); } /*== Post Author Profile ==*/ #author-profile { background: var(--dark-bg); border-top-right-radius: 8px; padding: 8px; margin-bottom: 2em; min-height: 116px; } .author-img img, .default-img svg { position: absolute; width: 100px; height: 100px; object-fit: contain; border-radius: 5px; transition: .3s } .author-img img:hover, .default-img svg:hover { opacity: .8; } .author-name a { font-weight: bold; font-size: 1.7rem; margin-left: 110px; } .author-name a:hover { color: var(--link); text-decoration: underline; } .author-desc { display: block; font-size: 1.4rem; margin-left: 110px; margin-top: .5em; } .author-desc a { color: var(--link); } .author-desc a:hover { color: var(--color); text-decoration: underline; } /*==== Related Poats ====*/ .rp-container { margin-top: 2em; display: flex; flex-wrap: wrap; justify-content: space-between; } #related-posts a { position: relative; flex-basis: 49.33%; height: 100px; overflow: hidden; margin: 0 0 10px; border-radius: 6px; transition: .3s; box-shadow: 1px 1px 2px var(--shadow); } .related-img img { object-fit: cover; margin: 0; float: left; width: 42%; height: 100px; padding-right: 5px; } .related-date { position: absolute; right: 5px; bottom: 0; font-size: 1.4rem; color: var(--dark-color); } .related-title { padding-top: 3px; padding-right: 5px; font-size: 1.4rem; line-height: 1.3; height: 5.2em; overflow: hidden; display: flex; } .related-title::before { content: "\25A0"; color: var(--brand); padding-right: 2px; transition: .3s; } #related-posts a:hover { box-shadow: 8px 8px 10px var(--shadow); } #related-posts a:hover .related-title::before { color: var(--sub-brand); } @media (max-width:600px) { #related-posts a { flex-basis: 100%; } } /*]]>*/</b:if><b:if cond='data:view.isHomepage or data:view.isSearch or data:view.isPost or data:view.isArchive and !data:view.isPage'>/*<![CDATA[*/ /*==== Pagenation ====*/ #blog-pager, .Pager { text-align: center; overflow: hidden; margin: 2em 0; } #blog-pager-older-link a, #no-older-link, .Pager-next { float: right; border-radius: 3px 0 0 3px; clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%); -webkit-clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%); } #blog-pager-newer-link a, #no-newer-link, .Pager-prev { float: left; border-radius: 0 3px 3px 0; clip-path: polygon(0 50%, 13px 0, 100% 0, 100% 100%, 13px 100%); -webkit-clip-path: polygon(0 50%, 13px 0, 100% 0, 100% 100%, 13px 100%); } #blog-pager-newer-link a, #blog-pager-older-link a, #no-newer-link, #no-older-link, .Pager-prev, .Pager-next { display: grid; align-items: center; text-align: center; padding: 5px 1em; height: 3.2em; background: var(--brand); color: var(--brand-font); font-size: 1.5rem; line-height: 1.4; transition: .3s; width: 100%; max-width: 49%; } #no-newer-link, #no-older-link { color: var(--color); background: var(--dark-bg); } #blog-pager-newer-link a:hover, #blog-pager-older-link a:hover, .Pager-prev:hover, .Pager-next:hover { background: var(--brand-light); } /*]]>*/</b:if><b:if cond='data:view.isPost'>/*<![CDATA[*/ @media (max-width: 768px) { #blog-pager-newer-link a, #blog-pager-older-link a, #no-newer-link, #no-older-link { max-width: 100%; margin: 5px 0; } #blog-pager-newer-link a, #no-newer-link { text-align: left; } #blog-pager-older-link a, #no-older-link { text-align: right; } } /*]]>*/</b:if><b:if cond='data:view.search.query'>/*<![CDATA[*/ /*==== Status Message (Search Query) ====*/ .navmsg a { color: var(--link); line-height: 1.9; } .navmsg b { font-size: 1.9rem; } .navmsg a:hover { color: var(--color); text-decoration: underline; } .navmsg a::before { content: "\A"url('data:image/svg+xml;utf-8,<!--! Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" height="17" width="17" style="margin-top:2px"><path d="M137.4 41.4c12.5-12.5 32.8-12.5 45.3 0l128 128c9.2 9.2 11.9 22.9 6.9 34.9s-16.6 19.8-29.6 19.8H32c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9l128-128zm0 429.3l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8 29.6-19.8H288c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-128 128c-12.5 12.5-32.8 12.5-45.3 0z" fill="%23aaa"/></svg>'); white-space: pre; } .navmsg a:last-child { display: none; } .navmsg { border-radius: 6px; display: block; text-align: center; margin-bottom: .5em; line-height: 1.5; } /*]]>*/</b:if><b:if cond='data:view.isArchive'>/*<![CDATA[*/ /*==== Status Message (Archive Page) ====*/ .navmsg a:last-child { display: none; } .navmsg { border-radius: 6px; display: block; text-align: center; margin-bottom: .5em; line-height: 1.5; } .navmsg:nth-of-type(2) { background: none; } /*]]>*/</b:if><b:if cond='data:view.isLabelSearch'>/*<![CDATA[*/ /*==== Status Mesaage (Label Page) ====*/ .navmsg a:last-child { display: none; } .navmsg b { display: inline-block; border: 1px solid var(--dark-color); border-radius: 5px; padding: 0 5px; } .navmsg { border-radius: 6px; display: block; text-align: center; margin-bottom: .5em; line-height: 1.5; } /*]]>*/</b:if><b:if cond='data:view.isError'>/*<![CDATA[*/ /*==== 404 ====*/ #sub-content, #FOOTER .widget:not(#HTML0), #MAIN .widget:not(#Blog1) { display: none; } #notfound { font-size: 2rem; text-align: center; margin: 5em 0; } #notfound a { color: var(--link); font-weight: bold; } #notfound a:hover, .home a:hover { color: var(--color)!important; } .home { text-align: center; margin-bottom: 2em; font-size: 2rem; font-weight: bold; color: var(--link)!important; } /*]]>*/</b:if>/*<![CDATA[*/ /*==== User Custom CSS here ====*/ /*]]>*/</style> <noscript> <style>/*<![CDATA[*/ .Blog, nav, #sub-content, #footer-attribution, #FeaturedPost1, #FOOTER .widget:not(#HTML0) { display: none; } #noscript-msg { font-size: 2.2rem; line-height:1.5; text-align: center; margin-top: 200px; } /*]]>*/</style> </noscript> <b:else/> <b:template-skin><![CDATA[ body#layout { background: #fff; } #layout #sub-item1, #layout #sub-item2, #layout #sub-item3 { width: 33.3%; } #layout #sub-content { display: flex; flex-direction: row; } body#layout .section h4 { background: dodgerblue; color: #fff; text-align: center; padding: .5em; border-radius: 5px; } body#layout::before { background: dodgerblue; border-radius: 5px; color: #fff; font-weight: bold; content: "F-light v1.35-TD-en"; display: block; width: 250px; padding: .5em; margin: -4.5em auto 2em; } body#layout .visibility .layout-widget-state.visible { background-image: url(https://1.bp.blogspot.com/-aPoC3YxQo6g/YOOeDVSsJqI/AAAAAAAAAFM/oyvPLSJVIRQpAu-g0gZL89g5Caq4_4DeQCLcBGAsYHQ/s48/visibility_on.png); background-size: 24px; } body#layout .visibility .layout-widget-state.not-visible { background-image: url(https://1.bp.blogspot.com/-x_kkTMRQfHs/YOOeMUjTE8I/AAAAAAAAAFQ/RRj6YLBNuMEHwTB_81304fCxy8dl7h46gCLcBGAsYHQ/s48/visibility_off.png); background-size: 24px; opacity: 1; } body#layout .visibility .editlink.icon { background-size: 18px; } body#layout .visibility .editlink.icon { backgrond-size: 18px; border-radius: 20px; padding: 3px; } body#layout .visibility .editlink:hover { background-image: url(https://1.bp.blogspot.com/--z1wepFalfQ/YOObl8avCFI/AAAAAAAAAE8/Z-iC0j0LLpo7u2ZpHvW0hGaHhBOvVYYaQCLcBGAsYHQ/s48/edit.png); background-color: dodgerblue; } ]]></b:template-skin> </b:if> </head> <body> <!-- SVG --> <svg style='display:none' xmlns='http://www.w3.org/2000/svg'> <defs> <!--! Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --> <symbol id='house' viewbox='0 0 16 16'><path d='M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z'/></symbol> <symbol id='svg-angles-down' viewBox='0 0 448 512'><path d='M246.6 470.6c-12.5 12.5-32.8 12.5-45.3 0l-160-160c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L224 402.7 361.4 265.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-160 160zm160-352l-160 160c-12.5 12.5-32.8 12.5-45.3 0l-160-160c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L224 210.7 361.4 73.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3z'/></symbol> <symbol id='svg-comment-dots' viewbox='0 0 512 512'><path d='M144 208C126.3 208 112 222.2 112 239.1C112 257.7 126.3 272 144 272s31.1-14.25 31.1-32S161.8 208 144 208zM256 207.1c-17.75 0-31.1 14.25-31.1 32s14.25 31.1 31.1 31.1s31.1-14.25 31.1-31.1S273.8 207.1 256 207.1zM368 208c-17.75 0-31.1 14.25-31.1 32s14.25 32 31.1 32c17.75 0 31.99-14.25 31.99-32C400 222.2 385.8 208 368 208zM256 31.1c-141.4 0-255.1 93.12-255.1 208c0 47.62 19.91 91.25 52.91 126.3c-14.87 39.5-45.87 72.88-46.37 73.25c-6.624 7-8.373 17.25-4.624 26C5.818 474.2 14.38 480 24 480c61.49 0 109.1-25.75 139.1-46.25c28.87 9 60.16 14.25 92.9 14.25c141.4 0 255.1-93.13 255.1-207.1S397.4 31.1 256 31.1zM256 400c-26.75 0-53.12-4.125-78.36-12.12l-22.75-7.125L135.4 394.5c-14.25 10.12-33.87 21.38-57.49 29c7.374-12.12 14.37-25.75 19.87-40.25l10.62-28l-20.62-21.87C69.81 314.1 48.06 282.2 48.06 240c0-88.25 93.24-160 207.1-160s207.1 71.75 207.1 160S370.8 400 256 400z'/></symbol> <symbol id='svg-clock' viewbox='0 0 512 512'><path d='M232 120C232 106.7 242.7 96 256 96C269.3 96 280 106.7 280 120V243.2L365.3 300C376.3 307.4 379.3 322.3 371.1 333.3C364.6 344.3 349.7 347.3 338.7 339.1L242.7 275.1C236 271.5 232 264 232 255.1L232 120zM256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0zM48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48C141.1 48 48 141.1 48 256z'/></symbol> <symbol id='svg-folder' viewbox='0 0 512 512'><path d='M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H298.5c-17 0-33.3-6.7-45.3-18.7L226.7 50.7c-12-12-28.3-18.7-45.3-18.7H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z'/></symbol> <b:if cond='data:view.isSingleItem'> <symbol id='verified' viewBox='0 0 32 32'><circle cx='16' cy='15.9' fill='dodgerblue' r='15.8'/><polygon fill='#fff' points='23,9 13.2,18.8 9,14.5 6.4,17 10.7,21.3 13.2,23.8 15.8,21.3 25.6,11.5 '/></symbol> <symbol fill='var(--brand-font)' id='svg-comment-medical' viewBox='0 0 512 512'><path d='M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3 0 0 0 0 0 0 0 0c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zM224 160c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v48h48c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H288v48c0 8.8-7.2 16-16 16H240c-8.8 0-16-7.2-16-16V272H176c-8.8 0-16-7.2-16-16V224c0-8.8 7.2-16 16-16h48V160z'/></symbol> <symbol id='trash' viewBox='0 0 16 16'><path d='M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5ZM11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0H11Zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5h9.916Zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z'/></symbol> </b:if> <b:if cond='data:view.isPost'> <symbol id='pen' viewBox='0 0 512 512'><path d='M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z'/></symbol> <symbol id='svg-twitter' viewBox='0 0 1200 1227'><path d='M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z'/></symbol> <symbol id="linkedin" viewBox="0 0 448 512"><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"/></symbol> <symbol id='linesvg' viewBox='0 0 315 300'><path d='M295.838,115.347l0.003-0.001l-0.092-0.76c-0.001-0.013-0.002-0.023-0.004-0.036c-0.001-0.011-0.002-0.021-0.004-0.032 l-0.344-2.858c-0.069-0.574-0.148-1.228-0.238-1.974l-0.072-0.594l-0.147,0.018c-3.617-20.571-13.553-40.093-28.942-56.762 c-15.317-16.589-35.217-29.687-57.548-37.878c-19.133-7.018-39.434-10.577-60.337-10.577c-28.22,0-55.627,6.637-79.257,19.193 C23.289,47.297-3.585,91.799,0.387,136.461c2.056,23.111,11.11,45.11,26.184,63.621c14.188,17.423,33.381,31.483,55.503,40.66 c13.602,5.642,27.051,8.301,41.291,11.116l1.667,0.33c3.921,0.776,4.975,1.842,5.247,2.264c0.503,0.784,0.24,2.329,0.038,3.18 c-0.186,0.785-0.378,1.568-0.57,2.352c-1.529,6.235-3.11,12.683-1.868,19.792c1.428,8.172,6.531,12.859,14.001,12.86 c0.001,0,0.001,0,0.002,0c8.035,0,17.18-5.39,23.231-8.956l0.808-0.475c14.436-8.478,28.036-18.041,38.271-25.425 c22.397-16.159,47.783-34.475,66.815-58.17C290.172,175.745,299.2,145.078,295.838,115.347z M92.343,160.561H66.761 c-3.866,0-7-3.134-7-7V99.865c0-3.866,3.134-7,7-7c3.866,0,7,3.134,7,7v46.696h18.581c3.866,0,7,3.134,7,7 C99.343,157.427,96.209,160.561,92.343,160.561z M119.03,153.371c0,3.866-3.134,7-7,7c-3.866,0-7-3.134-7-7V99.675 c0-3.866,3.134-7,7-7c3.866,0,7,3.134,7,7V153.371z M182.304,153.371c0,3.033-1.953,5.721-4.838,6.658 c-0.712,0.231-1.441,0.343-2.161,0.343c-2.199,0-4.323-1.039-5.666-2.888l-25.207-34.717v30.605c0,3.866-3.134,7-7,7 c-3.866,0-7-3.134-7-7v-52.16c0-3.033,1.953-5.721,4.838-6.658c2.886-0.936,6.045,0.09,7.827,2.545l25.207,34.717V99.675 c0-3.866,3.134-7,7-7c3.866,0,7,3.134,7,7V153.371z M233.311,159.269h-34.645c-3.866,0-7-3.134-7-7v-26.847V98.573 c0-3.866,3.134-7,7-7h33.57c3.866,0,7,3.134,7,7s-3.134,7-7,7h-26.57v12.849h21.562c3.866,0,7,3.134,7,7c0,3.866-3.134,7-7,7 h-21.562v12.847h27.645c3.866,0,7,3.134,7,7S237.177,159.269,233.311,159.269z' fill='#fff'/></symbol> <symbol id='tag-icon' viewBox='0 0 16 16'><path d='M2 1a1 1 0 0 0-1 1v4.586a1 1 0 0 0 .293.707l7 7a1 1 0 0 0 1.414 0l4.586-4.586a1 1 0 0 0 0-1.414l-7-7A1 1 0 0 0 6.586 1H2zm4 3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'/></symbol> <symbol id='svg-arrows-rotate' viewbox='0 0 512 512'><path d='M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160H336c-17.7 0-32 14.3-32 32s14.3 32 32 32H463.5c0 0 0 0 0 0h.4c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v51.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1V448c0 17.7 14.3 32 32 32s32-14.3 32-32V396.9l17.6 17.5 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.7c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352H176c17.7 0 32-14.3 32-32s-14.3-32-32-32H48.4c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z'/></symbol> <symbol id='svg-facebook-f' viewBox='0 0 320 512'><path d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/></symbol> <symbol id='svg-get-pocket' viewbox='0 0 448 512'><path d='M407.6 64h-367C18.5 64 0 82.5 0 104.6v135.2C0 364.5 99.7 464 224.2 464c124 0 223.8-99.5 223.8-224.2V104.6c0-22.4-17.7-40.6-40.4-40.6zm-162 268.5c-12.4 11.8-31.4 11.1-42.4 0C89.5 223.6 88.3 227.4 88.3 209.3c0-16.9 13.8-30.7 30.7-30.7 17 0 16.1 3.8 105.2 89.3 90.6-86.9 88.6-89.3 105.5-89.3 16.9 0 30.7 13.8 30.7 30.7 0 17.8-2.9 15.7-114.8 123.2z'/></symbol> </b:if> <b:if cond='data:view.isPost or data:view.isArchive'> <symbol id='svg-calendar-days' viewBox='0 0 448 512'><path d='M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 248H128V192H48V248zM48 296V360H128V296H48zM176 296V360H272V296H176zM320 296V360H400V296H320zM400 192H320V248H400V192zM400 408H320V464H384C392.8 464 400 456.8 400 448V408zM272 408H176V464H272V408zM128 408H48V448C48 456.8 55.16 464 64 464H128V408zM272 192H176V248H272V192z'/></symbol> </b:if> </defs> </svg> <!-- Header --> <header> <b:section id='HEADER' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='F-light (Header)' type='Header' version='2' 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-img'> <b:include cond='data:imagePlacement in {"REPLACE", "BEFORE_DESCRIPTION"}' name='image'/> <b:include cond='data:imagePlacement not in {"REPLACE", "BEFORE_DESCRIPTION"}' name='header-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-img"}' name='responsiveImageStyle'/> </b:if> </b:includable> <b:includable id='description'> <b:if cond='data:description'> <p id='header-desc'><data:description/></p> </b:if> </b:includable> <b:includable id='header-title'> <b:if cond='data:view.isSingleItem'> <p id='header-title'><a expr:href='data:blog.homepageUrl'><data:blog.title/></a></p> <b:elseif cond='data:view.isHomepage'/> <h1 id='header-title'><data:blog.title/></h1> <b:else/> <h1 id='header-title'><a expr:href='data:blog.homepageUrl'><data:blog.title/></a></h1> </b:if> </b:includable> <b:includable id='image'> <a class='header-image-wrapper' expr:href='data:blog.homepageUrl'><b:include data='{image: data:image, altText: data:blog.title.escaped, originalWidth: data:width, originalHeight: data:height, imageSizes: [360,480,640,800,1000,1200,1600]}' name='responsiveImage'/></a> </b:includable> <b:includable id='title'/> </b:widget> </b:section> </header> <!-- Nav Bar --> <nav> <div id='nav'> <!-- Nav Button --> <input id='nav-button' type='checkbox'/> <label for='nav-button' id='nav-label'><span/></label> <!-- Scroll Button for Mobile --> <div id='mobile-jump'> <span id='m-pagebottom'><svg aria-label='scroll to bottom' class='feather feather-arrow-down' fill='none' height='24' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><line x1='12' x2='12' y1='5' y2='19'/><polyline points='19 12 12 19 5 12'/></svg></span> <span id='m-pagetop'><svg aria-label='scroll to top' class='feather feather-arrow-up' fill='none' height='24' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><line x1='12' x2='12' y1='19' y2='5'/><polyline points='5 12 12 5 19 12'/></svg></span> </div> <b:if cond='!data:view.isHomepage'> <!-- Home Button for Mobile --> <a expr:href='data:blog.homepageUrl' id='mobile-home'><svg aria-label='Home' class='svg house'><use href='#house'/></svg></a> </b:if> <!-- Search Box --> <div id='search-wrap'><form action='/search' class='search-box-form' method='get'> <input class='search-box-text' expr:value='data:view.search.query.escaped' name='q' placeholder='Search' required='required' type='search'/><button class='search-box-submit' title='Search This Blog'><svg aria-label='Search' class='svg-icon-24'><use href='/responsive/sprite_v1_6.css.svg#ic_search_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'/></svg></button></form></div> <!-- Mode Switch: https://qiita.com/whike_chan/items/3fff6d0c78fa74253d4d --> <div id='mode-switch'> <input id='js_mode_toggle' type='checkbox'/> <label class='switch-mode' for='js_mode_toggle' id='js_rotate'> <span id='switch-mode-dark' title='Switch to Dark Mode'><svg aria-label='Dark Mode' class='feather feather-moon' fill='none' height='24' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/></svg></span> <span id='switch-mode-light' title='Switch to Light Mode'><svg aria-label='Light Mode' class='feather feather-sun' fill='none' height='24' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='5'/><line x1='12' x2='12' y1='1' y2='3'/><line x1='12' x2='12' y1='21' y2='23'/><line x1='4.22' x2='5.64' y1='4.22' y2='5.64'/><line x1='18.36' x2='19.78' y1='18.36' y2='19.78'/><line x1='1' x2='3' y1='12' y2='12'/><line x1='21' x2='23' y1='12' y2='12'/><line x1='4.22' x2='5.64' y1='19.78' y2='18.36'/><line x1='18.36' x2='19.78' y1='5.64' y2='4.22'/></svg></span> </label> </div> <script>/*<![CDATA[*/ const checkToggle=document.getElementById("js_mode_toggle"),rotateIcon=document.getElementById("js_rotate"),isLight=window.matchMedia("(prefers-color-scheme:light)").matches,keyLocalStorage="modekey",localTheme=localStorage.getItem("modekey"),twTheme=document.getElementById("twth");let nowRotate=0;function changeMode(e){"light"===e?(document.documentElement.setAttribute("data-theme-mode","light"),twTheme.setAttribute("content","light"),checkToggle.checked=!0):"dark"===e&&(document.documentElement.setAttribute("data-theme-mode","dark"),twTheme.setAttribute("content","dark"),checkToggle.checked=!1)}function rotateInfinite(){nowRotate+=180,rotateIcon.style.transform="rotate("+nowRotate+"deg)"}"light"===localTheme?(rotateInfinite(),changeMode("light")):"dark"===localTheme?changeMode("dark"):isLight&&(rotateInfinite(),changeMode("light")),checkToggle.addEventListener("change",function(e){rotateInfinite(),e.target.checked?(changeMode("light"),localStorage.setItem("modekey","light")):(changeMode("dark"),localStorage.setItem("modekey","dark"))}) /*]]>*/</script> <!-- Page List --> <aside id='nav-content'> <b:section id='NAVIGATION' maxwidgets='1' showaddelement='no'> <b:widget id='PageList1' locked='true' title='Nav Menu' type='PageList' version='2' visible='true'> <b:widget-settings> <b:widget-setting name='pageListJson'><![CDATA[{"link0":{"href":"/","position":0,"title":"HOME"}}]]></b:widget-setting> <b:widget-setting name='homeTitle'>Home</b:widget-setting> </b:widget-settings> <b:includable id='main'> <b:include name='content'/> </b:includable> <b:includable id='content'> <b:include name='pageList'/> </b:includable> <b:includable id='overflowButton'/> <b:includable id='overflowablePageList'/> <b:includable id='pageLink'> <li><a expr:href='data:link.href'><data:link.title/></a></li> </b:includable> <b:includable id='pageList'> <ul> <b:loop values='data:links' var='link'> <b:include name='pageLink'/> </b:loop> </ul> </b:includable> </b:widget> </b:section> </aside> </div> </nav> <!-- Main Contents --> <main> <div id='main-content'> <b:section id='MAIN' showaddelement='yes'> <b:widget cond='data:view.isHomepage' id='FeaturedPost1' locked='false' title='FEATURED POST' type='FeaturedPost' version='2' visible='true'> <b:widget-settings> <b:widget-setting name='showSnippet'>true</b:widget-setting> <b:widget-setting name='showPostTitle'>true</b:widget-setting> <b:widget-setting name='postId'>0</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:if cond='data:title != ""'> <div class='title'><data:title/></div> </b:if> <b:include name='snippetedPosts'/> </b:includable> <b:includable id='blogThisShare'/> <b:includable id='bylineByName'/> <b:includable id='bylineRegion'/> <b:includable id='commentsLink'/> <b:includable id='commentsLinkIframe'/> <b:includable id='emailPostIcon'/> <b:includable id='facebookShare'/> <b:includable id='footerBylines'/> <b:includable id='googlePlusShare'/> <b:includable id='headerByline'/> <b:includable id='linkShare'/> <b:includable id='otherSharingButton'/> <b:includable id='platformShare'/> <b:includable id='postAuthor'/> <b:includable id='postCommentsLink'> <b:if cond='data:post.numberOfComments gt 0'> <span class='article-header-comments'><svg aria-label='Comment' class='svg svg-comment-dots' style='margin-right:3px'><use href='#svg-comment-dots'/></svg><data:post.numberOfComments/> |</span> </b:if> </b:includable> <b:includable id='postJumpLink'/> <b:includable id='postLabels'> <b:loop values='data:post.labels where(l => l.name not contains "#")' var='label'> <span class='article-category-label'><a expr:href='data:label.url'><svg aria-label='Category' class='svg' style='margin-right:3px;font-size:1.1rem'><use href='#svg-folder'/></svg><data:label.name/></a></span> </b:loop> </b:includable> <b:includable id='postLocation'/> <b:includable id='postReactions'/> <b:includable id='postShareButtons'/> <b:includable id='postSnippet'> <p class='feat-snippet'> <data:post.snippets.short/> </p> </b:includable> <b:includable id='postTimestamp'> <time class='article-header-date' expr:datetime='data:post.date.iso8601'><svg aria-label='Post Date' class='svg svg-clock' style='vertical-align:-10%;margin-right:3px'><use href='#svg-clock'/></svg><b:eval expr='data:post.date.month lt 10 ? "0" + data:post.date.month : data:post.date.month'/>/<b:eval expr='data:post.date.day lt 10 ? "0" + data:post.date.day : data:post.date.day'/>/<data:post.date.year/></time> </b:includable> <b:includable id='sharingButton'/> <b:includable id='sharingButtonContent'/> <b:includable id='sharingButtons'/> <b:includable id='sharingButtonsMenu'/> <b:includable id='sharingPlatformIcon'/> <b:includable id='snippetedPostByline'/> <b:includable id='snippetedPostContent'> <div class='post-content'> <b:include cond='data:this.postDisplay.showFeaturedImage' name='snippetedPostThumbnail'/> <b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/> <b:include cond='data:this.postDisplay.showSnippet' data='post' name='postSnippet'/> <p class='article-header'> <b:include data='post' name='postCommentsLink'/> <b:include data='post' name='postTimestamp'/> </p> <p class='article-category'> <b:include data='post' name='postLabels'/> </p> </div> </b:includable> <b:includable id='snippetedPostThumbnail'> <b:if cond='data:post.featuredImage'> <div class='feat-img'> <img expr:alt='data:post.title.escaped' expr:src='resizeImage(data:post.featuredImage,320,"16:9")' height='180' width='320'/> </div> <script>/*<![CDATA[*/ const featImg=document.querySelector(".feat-img img");featImg.src=featImg.src.replace("-k-no-nu","-rw-e365").replace("lh3-testonly","lh3"); /*]]>*/</script> <b:else/> <div class='feat-img'> <img expr:alt='data:post.title.escaped' height='180' src='https://1.bp.blogspot.com/-GfyX-OxsrLs/Y61LhoAYYeI/AAAAAAAAZAw/4XCyYnYxDmM_8yRkGnytXaI2MkQ5-TP3gCNcBGAsYHQ/s320-rw-e365/noimage.png' width='320'/> </div> </b:if> </b:includable> <b:includable id='snippetedPostTitle'> <b:if cond='data:post.title != ""'> <h2 class='feat-title'><data:post.title/></h2> </b:if> </b:includable> <b:includable id='snippetedPosts'> <b:loop index='i' values='data:posts' var='post'> <article class='article'> <b:include name='snippetedPostContent'/><a expr:aria-label='data:post.title' expr:href='data:post.url'/> <a expr:href='data:post.url'><p id='feat-name'>RECOMMEND</p></a> </article> </b:loop> </b:includable> </b:widget> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='2' visible='true'> <b:widget-settings> <b:widget-setting name='commentLabel'/> <b:widget-setting name='showShareButtons'>false</b:widget-setting> <b:widget-setting name='authorLabel'/> <b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting> <b:widget-setting name='timestampLabel'/> <b:widget-setting name='reactionsLabel'/> <b:widget-setting name='showAuthorProfile'>true</b:widget-setting> <b:widget-setting name='style.layout'>1x1</b:widget-setting> <b:widget-setting name='showLocation'>false</b:widget-setting> <b:widget-setting name='showTimestamp'>true</b:widget-setting> <b:widget-setting name='postsPerAd'>1</b:widget-setting> <b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting> <b:widget-setting name='showDateHeader'>false</b:widget-setting> <b:widget-setting name='style.textcolor'>#ffffff</b:widget-setting> <b:widget-setting name='showCommentLink'>true</b:widget-setting> <b:widget-setting name='style.urlcolor'>#ffffff</b:widget-setting> <b:widget-setting name='postLocationLabel'>Location:</b:widget-setting> <b:widget-setting name='showAuthor'>false</b:widget-setting> <b:widget-setting name='style.linkcolor'>#ffffff</b:widget-setting> <b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting> <b:widget-setting name='showLabels'>false</b:widget-setting> <b:widget-setting name='postLabelsLabel'/> <b:widget-setting name='showBacklinks'>false</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' var='this'> <b:include name='status-message'/> <b:if cond='data:view.isSingleItem'> <b:loop values='data:posts' var='post'> <b:include data='post' name='postQuickEdit'/> <b:include name='jsonLDBreadcrumb'/> <b:include data='post' name='jsonLD'/> <b:include data='post' name='singleHeader'/> <b:include data='post' name='postBody'/> <div id='p-footer'> <b:if cond='data:view.isPost'> <b:include data='post' name='postShareButtons'/> <b:include data='post' name='aboutPostAuthor'/> <b:include data='post' name='Labels'/> <b:include data='post' name='rp'/> </b:if> <b:include data='post' name='comments'/> </div> <b:include name='nextprev'/> </b:loop> <b:else/> <b:include name='jsonLDBreadcrumb'/> <b:loop index='i' values='data:posts' var='post'> <b:if cond='data:view.isArchive or data:i lt 10'> <b:include data='post' name='post'/> </b:if> </b:loop> <script>/*<![CDATA[*/ document.querySelectorAll(".article-img img").forEach(e=>{e.setAttribute("data-src",e.getAttribute("data-src").replace("-k-no-nu","-rw-e365").replace("lh3-testonly","lh3"))}); /*]]>*/</script> <b:include cond='!data:view.isArchive' name='nextprev'/> </b:if> </b:includable> <b:includable id='404'> <b:if cond='data:view.isError'> <div id='notfound'><data:navMessage/></div> <div class='home'><a expr:href='data:blog.homepageUrl'><data:messages.home/></a></div> </b:if> </b:includable> <b:includable id='Labels'> <b:if cond='data:post.labels'> <p id='p-category'> <b:loop values='data:post.labels where(l => l.name not contains "#")' var='label'> <a class='p-category-label' expr:href='data:label.url' style='margin-right:5px'><svg aria-label='Category' class='svg' style='margin-right:5px;font-size:1.3rem'><use href='#svg-folder'/></svg><data:label.name/></a> </b:loop> </p> <p id='p-hashtag'> <b:loop values='data:post.labels where(l => l.name contains "#")' var='label'> <svg aria-label='Tag' class='svg tag-icon'><use href='#tag-icon'/></svg><a class='p-hashtag-label' expr:href='data:label.url'><data:label.name/></a> </b:loop> </p> </b:if> </b:includable> <b:includable id='aboutPostAuthor'> <b:if cond='data:post.author.aboutMe'> <div id='author-profile'> <b:if cond='data:post.author.authorPhoto.image'> <span class='author-img'><a expr:href='data:post.author.profileUrl' expr:title='data:post.author.name' rel='noopener' target='_blank'><img expr:alt='data:post.author.name' expr:data-src='resizeImage(data:post.author.authorPhoto.image, 200)' height='100' src='https://1.bp.blogspot.com/-Biln9ePTMsU/YntKTin9ayI/AAAAAAAAXqM/9ASlgARvII8tNnzETnW0chMG13X_eDtuQCNcBGAsYHQ/s100-rw/blank.png' width='100'/></a></span> <b:else/> <span class='author-img default-img'><a expr:href='data:post.author.profileUrl' expr:title='data:post.author.name' rel='noopener' target='_blank'><b:include data='{ iconClass: "avatar-icon" }' name='defaultAvatarIcon'/></a></span> </b:if> <span class='author-name'><a expr:href='data:post.author.profileUrl' rel='author noopener' target='_blank' title='author profile'><svg aria-label='pen' class='svg' style='margin-right:3px'><use href='#pen'/></svg><data:post.author.name/></a></span> <span class='author-desc'><data:post.author.aboutMe/></span> </div> </b:if> </b:includable> <b:includable id='addComments'> <div id='add-comment'> <p class='title'><data:messages.postAComment/></p> <b:if cond='data:this.messages.blogComment'> <span class='comment-message'><data:this.messages.blogComment/></span> </b:if> <input id='embed-form-open' type='checkbox'/> <label for='embed-form-open' id='embed-form-button'> <svg aria-label='Add New Comment' class='svg svg-comment-medical' style='font-size:2rem;margin-right:5px;vertical-align:-18%'><use href='#svg-comment-medical'/></svg>Open Embeded Form </label> <b:with value='data:view.isPost ? "?po=" : "?pa="' var='param'> <iframe class='embed-form' expr:data-src='data:blog.bloggerUrl + "/comment/frame/" + data:blog.blogId + data:param + data:post.id'/> </b:with> <b:with value='data:view.isPost ? "&postID=" : "&pageID="' var='param'> <a class='comment-page-link' expr:href='data:blog.bloggerUrl + "/comment.g?blogID=" + data:blog.blogId + data:param + data:post.id' expr:onclick='data:post.commentsUrlOnclick' rel='noopener' target='_blank'><svg aria-label='Add New Comment加' class='svg svg-comment-medical' style='font-size:2rem;margin-right:5px;vertical-align:-18%'><use href='#svg-comment-medical'/></svg>External Comment Page<svg aria-label='External Link' class='svg' fill='currentColor' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z' fill-rule='evenodd'/><path d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z' fill-rule='evenodd'/></svg></a> </b:with> </div> </b:includable> <b:includable id='blogThisShare'/> <b:includable id='bylineByName' var='byline'/> <b:includable id='bylineRegion' var='regionItems'/> <b:includable id='commentAuthorAvatar'> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='noopener' target='_blank'><img expr:alt='data:comment.author + "'s Avatar"' expr:data-src='resizeImage(data:comment.authorAvatarSrc, 100)' height='50' src='https://1.bp.blogspot.com/-Biln9ePTMsU/YntKTin9ayI/AAAAAAAAXqM/9ASlgARvII8tNnzETnW0chMG13X_eDtuQCNcBGAsYHQ/s50-rw/blank.png' width='50'/></a> <b:else/> <img alt='Avatar' data-src='//resources.blogblog.com/img/blank.gif' height='50' src='https://1.bp.blogspot.com/-Biln9ePTMsU/YntKTin9ayI/AAAAAAAAXqM/9ASlgARvII8tNnzETnW0chMG13X_eDtuQCNcBGAsYHQ/s50-rw/blank.png' width='50'/> </b:if> </b:includable> <b:includable id='commentDeleteIcon' var='comment'> <span expr:class='"item-control " + data:comment.adminClass'><a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:messages.deleteComment'><svg aria-label='Bin' class='svg'><use href='#trash'/></svg></a></span> </b:includable> <b:includable id='commentForm' var='post'/> <b:includable id='commentFormIframeSrc' var='post'/> <b:includable id='commentItem' var='comment'> <div class='comment-block' expr:id='"c" + data:comment.id'> <p class='comment-author'> <b:include cond='data:blog.enabledCommentProfileImages' name='commentAuthorAvatar'/> <b:if cond='data:comment.authorUrl == data:post.author.profileUrl'> <a expr:href='data:comment.authorUrl' rel='noopener' target='_blank' title='Author'><data:comment.author/><svg aria-label='Author' class='verified'><use href='#verified'/></svg></a> <b:elseif cond='data:comment.authorUrl'/> <a expr:href='data:comment.authorUrl' rel='noopener' target='_blank'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> </p> <p expr:class='"comment-body" + (data:comment.isDeleted ? " deleted" : "")'> <data:comment.body/> </p> <div class='comment-footer'> <span class='comment-timestamp'> <b:include data='comment' name='commentDeleteIcon'/> <a expr:href='"#c" + data:comment.id' title='Comment Permalink'><svg aria-label='Commented Date' class='svg svg-clock' style='margin-right:5px;vertical-align: -10%'><use href='#svg-clock'/></svg><data:comment.timestamp/></a> </span> </div> </div> </b:includable> <b:includable id='commentList' var='comments'> <b:if cond='data:post.allowComments'> <div id='comments-block'> <b:loop reverse='true' values='data:comments' var='comment'> <b:include data='comment' name='commentItem'/> </b:loop> <script>/*<![CDATA[*/ document.querySelectorAll(".comment-author img").forEach(e=>{e.setAttribute("data-src", e.getAttribute("data-src").replace("/w100/", "/w100-rw-e365/"))}); /*]]>*/</script> </div> </b:if> </b:includable> <b:includable id='commentPicker' var='post'/> <b:includable id='comments' var='post'> <div id='comments'> <b:if cond='data:post.embedCommentForm'> <b:if cond='data:post.allowNewComments'> <b:include data='post' name='addComments'/> <b:else/> <p class='comment-message'><data:post.noNewCommentsText/></p> </b:if> <b:else/> <b:if cond='data:post.allowComments'> <b:include data='post' name='addComments'/> </b:if> </b:if> <b:if cond='data:post.showManageComments'> <b:include data='post' name='manageComments'/> </b:if> <b:include name='commentsTitle'/> <b:include cond='data:post.comments' data='post.comments' name='commentList'/> <b:if cond='data:post.numberOfComments gt 1 and data:post.allowNewComments'> <a class='comment-form-jump' href='#comments' style='margin-top:3em'><svg aria-label='Jump to Top' class='svg' style='margin-left:5px;vertical-align:-10%;transform:rotate(180deg);'><use href='#svg-angles-down'/></svg>Scroll to Comment Form</a> <b:elseif cond='data:post.numberOfComments gt 1 and !data:post.allowNewComments'/> <a class='comment-form-jump' href='#comments-list' style='margin-top:3em'><svg aria-label='Jump to Top' class='svg' style='margin-left:5px;vertical-align:-10%;transform:rotate(180deg);'><use href='#svg-angles-down'/></svg>Scroll to Latest Comment</a> </b:if> </div> </b:includable> <b:includable id='commentsLink'/> <b:includable id='commentsLinkIframe'/> <b:includable id='commentsTitle'> <b:if cond='data:post.numberOfComments != 0'> <p class='title' id='comments-list' style='margin-top:2em'><b:message name='messages.numberOfComments'><b:param expr:value='data:post.numberOfComments' name='numComments'/></b:message><b:if cond='data:post.numberOfComments gt 1'> (New Arrival Order)</b:if></p> </b:if> </b:includable> <b:includable id='defaultAdUnit'/> <b:includable id='emailPostIcon'/> <b:includable id='facebookShare'/> <b:includable id='feedLinks'/> <b:includable id='feedLinksBody' var='links'/> <b:includable id='footerBylines'/> <b:includable id='googlePlusShare'/> <b:includable id='headerByline'/> <b:includable id='homePageLink'/> <b:includable id='iframeComments' var='post'/> <b:includable id='inlineAd' var='post'/> <b:includable id='jsonLD' var='post'> <script type='application/ld+json'>{ "@context": "http://schema.org/", "@type": "BlogPosting", "headline": "<data:post.title.jsonEscaped/>", "description": "<b:eval expr='data:view.isSingleItem ? data:view.description.jsonEscaped : data:post.snippets.short.jsonEscaped'/>", "image": "<b:eval expr='resizeImage(data:post.featuredImage, 560,"16:9")'/>", "datePublished": "<data:post.date.iso8601/>", "dateModified": "<data:post.lastUpdated.iso8601/>", "mainEntityOfPage": { "@type": "WebPage", "@id": "<data:post.url.canonical/>" }, "author": { "@type": "Person", "name": "<data:post.author.name/>", "url": "<data:post.author.profileUrl/>" }, "publisher": { "@type": "Organization", "name": "<data:blog.title.jsonEscaped/>" } }</script> </b:includable> <b:includable id='jsonLDBreadcrumb'> <b:if cond='!data:view.isPost and !data:view.isError'> <script type='application/ld+json'>{ "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "<data:messages.home.jsonEscaped/>", "item": "<data:blog.homepageUrl.canonical/>" <b:if cond='data:view.isMultipleItems and !data:view.archive and !data:view.isHomepage and !data:view.search.query or data:view.isPage'>}, { "@type": "ListItem", "position": 2, "name": "<data:blog.pageName/>", "item": "<data:blog.url/>" }<b:elseif cond='data:view.archive.month'/>}, { "@type": "ListItem", "position": 2, "name": "Archive of <data:view.archive.month/>/<data:view.archive.year/>", "item": "<data:blog.url/>" } <b:elseif cond='data:view.archive.year'/>}, { "@type": "ListItem", "position": 2, "name": "Archive of <data:view.archive.year/>", "item": "<data:blog.url/>" } <b:elseif cond='data:view.search.query'/>}, { "@type": "ListItem", "position": 2, "name": "「Search Query of <data:view.search.query/>」", "item": "<data:blog.url/>" }<b:else/>}</b:if> ] }</script> </b:if> <b:if cond='data:view.isPost'> <script type='application/ld+json'>{ "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "<data:messages.home.jsonEscaped/>", "item": "<data:blog.homepageUrl.canonical/>" }<b:loop index='i' values='data:post.labels where (l => l.name not contains "#")' var='label'>, { "@type": "ListItem", "position": <b:with value='data:i + 2' var='num'><b:eval expr='data:num'/></b:with>, "name": "<data:label.name/>", "item": "<data:label.url.canonical/>" }</b:loop> ] }</script> </b:if> </b:includable> <b:includable id='linkShare'/> <b:includable id='nextPageLink'/> <b:includable id='nextprev'> <b:if cond='data:view.isHomepage or data:view.isSearch or data:view.archive.month or data:view.isPost and !data:view.isPage'> <div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPageUrl'> <span id='blog-pager-newer-link'><a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:messages.newerPosts'><data:messages.newerPosts/></a></span> <b:else/> <span id='no-newer-link'><b:if cond='data:blog.locale.language == "ja"'><data:messages.newerPosts/>はありません<b:elseif cond='data:blog.locale.language == "en"'/>No <data:messages.newerPosts/><b:elseif cond='data:blog.locale.language == "ko"'/><data:messages.newerPosts/> 없습니다<b:else/><data:messages.newerPosts/></b:if></span> </b:if> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'><a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:messages.olderPosts'><data:messages.olderPosts/></a></span> <b:else/> <span id='no-older-link'><b:if cond='data:blog.locale.language == "ja"'><data:messages.olderPosts/>はありません<b:elseif cond='data:blog.locale.language == "en"'/>No <data:messages.olderPosts/><b:elseif cond='data:blog.locale.language == "ko"'/><data:messages.olderPosts/> 없습니다<b:else/><data:messages.olderPosts/></b:if></span> </b:if> </div> </b:if> </b:includable> <b:includable id='otherSharingButton'/> <b:includable id='platformShare'/> <b:includable id='post' var='post'> <article class='article'> <b:include data='post' name='jsonLD'/> <b:if cond='data:post.featuredImage'> <div class='article-img'> <img expr:alt='data:post.title.escaped' expr:data-src='resizeImage(data:post.featuredImage,320,"16:9")' height='180' src='https://1.bp.blogspot.com/-Biln9ePTMsU/YntKTin9ayI/AAAAAAAAXqM/9ASlgARvII8tNnzETnW0chMG13X_eDtuQCNcBGAsYHQ/w320-h180-c-rw/blank.png' width='320'/> </div> <b:else/> <div class='article-img'> <img data-src='https://1.bp.blogspot.com/-GfyX-OxsrLs/Y61LhoAYYeI/AAAAAAAAZAw/4XCyYnYxDmM_8yRkGnytXaI2MkQ5-TP3gCNcBGAsYHQ/s320-rw-e365/noimage.png' expr:alt='data:post.title.escaped' height='180' src='https://1.bp.blogspot.com/-Biln9ePTMsU/YntKTin9ayI/AAAAAAAAXqM/9ASlgARvII8tNnzETnW0chMG13X_eDtuQCNcBGAsYHQ/w320-h180-c-rw/blank.png' width='320'/> </div> </b:if> <h2 class='article-title'><data:post.title/></h2> <p class='article-snippet'> <data:post.snippets.short/> </p> <p class='article-category'> <b:loop values='data:post.labels where(l => l.name not contains "#")' var='label'> <span class='article-category-label'><a expr:href='data:label.url'><svg aria-label='Category' class='svg' style='margin-right:3px;font-size:1.1rem'><use href='#svg-folder'/></svg><data:label.name/></a></span> </b:loop> </p> <p class='article-header'> <b:if cond='data:post.numberOfComments gt 0'> <span class='article-header-comments'><svg aria-label='Comment' class='svg svg-comment-dots' style='margin-right:3px'><use href='#svg-comment-dots'/></svg><data:post.numberOfComments/> |</span> </b:if> <time class='article-header-date' expr:datetime='data:post.date.iso8601'><svg aria-label='Post Date' class='svg svg-clock' style='vertical-align:-10%;margin-right:3px'><use href='#svg-clock'/></svg><b:eval expr='data:post.date.month lt 10 ? "0" + data:post.date.month : data:post.date.month'/>/<b:eval expr='data:post.date.day lt 10 ? "0" + data:post.date.day : data:post.date.day'/>/<data:post.date.year/></time> </p> <a expr:aria-label='data:post.title' expr:href='data:post.url'/> </article> </b:includable> <b:includable id='postAuthor'/> <b:includable id='postBody' var='post'> <div class='post-body'> <data:post.body/> </div> </b:includable> <b:includable id='postBodySnippet' var='post'/> <b:includable id='postCommentsAndAd' var='post'/> <b:includable id='postCommentsLink'/> <b:includable id='postFooter' var='post'/> <b:includable id='postFooterAuthorProfile' var='post'/> <b:includable id='postHeader' var='post'/> <b:includable id='postJumpLink' var='post'/> <b:includable id='postLabels'/> <b:includable id='postLocation'/> <b:includable id='postMeta' var='post'/> <b:includable id='postMetadataJSONImage'/> <b:includable id='postMetadataJSONPublisher'/> <b:includable id='postPagination'/> <b:includable id='postQuickEdit' var='post'> <b:with value='data:view.isPage ? "blog/page/edit/" : "blog/post/edit/"' var='path'> <span expr:class='"item-control " + data:post.adminClass'><a expr:href='data:blog.bloggerUrl path (data:path + data:blog.blogId + "/" + data:post.id)' expr:title='data:messages.edit' rel='noopener' target='_blank'><data:messages.edit/></a></span> </b:with> </b:includable> <b:includable id='postReactions'/> <b:includable id='postShareButtons' var='post'> <div class='sns-share-buttons'> <span class='tweet' onclick='tweet_btn()' role='button' title='Post'><svg aria-label='Tweet' class='svg svg-twitter'><use href='#svg-twitter'/></svg></span> <script>/*<![CDATA[*/ function tweet_btn(){const w=550,h=550;window.open("https://twitter.com/intent/tweet?url="+encodeURIComponent(location.href)+"&text="+encodeURIComponent(document.title),"_blank","width="+w+",height="+h+",left="+(screen.width-w)/2+",top="+(screen.height-h)/2+",scrollbars=yes,resizable=yes,toolbar=no,location=yes")} /*]]>*/</script> <span class='facebook' onclick='fb_btn()' role='button' title='Share'><svg aria-label='Share on Facebook' class='svg svg-facebook-f'><use href='#svg-facebook-f'/></svg></span> <script>/*<![CDATA[*/ function fb_btn(){const w=550,h=420;window.open("https://www.facebook.com/sharer.php?u="+encodeURIComponent(location.href),"_blank","width="+w+",height="+h+",left="+(screen.width-w)/2+",top="+(screen.height-h)/2+",scrollbars=yes,resizable=yes,toolbar=no,location=yes")} /*]]>*/</script> <span class='line' onclick='line_btn()' role='button' title='Send to LINE'><svg aria-label='LINE' class='linesvg'><use href='#linesvg'/></svg></span> <script>/*<![CDATA[*/ function line_btn(){const w=550,h=420;window.open("https://social-plugins.line.me/lineit/share?url="+encodeURIComponent(location.href),"_blank","width="+w+",height="+h+",left="+(screen.width-w)/2+",top="+(screen.height-h)/2+",scrollbars=yes,resizable=yes,toolbar=no,location=yes")} /*]]>*/</script> <span class='linkedin' onclick='linkedin()' role='button' title='Share on LinkedIn'><svg aria-label='LinkedIn' class='svg svg-linkedin'><use href='#linkedin'/></svg></span> <script>/*<![CDATA[*/ function linkedin(){const w=480,h=480;window.open("https://www.linkedin.com/sharing/share-offsite/?url="+encodeURIComponent(location.href),"_blank","width="+w+",height="+h+",left="+(screen.width-w)/2+",top="+(screen.height-h)/2+",scrollbars=yes,resizable=yes,toolbar=no,location=yes")} /*]]>*/</script> <span class='pocket' onclick='pocket_btn()' role='button' title='Save to Pocket'><svg aria-label='Pocket' class='svg svg-get-pocket'><use href='#svg-get-pocket'/></svg></span> <script>/*<![CDATA[*/ function pocket_btn(){const w=550,h=420;window.open("https://getpocket.com/edit?url="+encodeURIComponent(location.href),"_blank","width="+w+",height="+h+",left="+(screen.width-w)/2+",top="+(screen.height-h)/2+",scrollbars=yes,resizable=yes,toolbar=no,location=yes")} /*]]>*/</script> <span class='copy_btn' role='button' style='font-weight:bold;line-height:1' title='Copy Title/URL'/> <script src='//cdn.jsdelivr.net/npm/clipboard@latest/dist/clipboard.min.js'/> <script>/*<![CDATA[*/ const clipboard=new ClipboardJS(".copy_btn");window.addEventListener('DOMContentLoaded', function(){$(".copy_btn").click(function(){$(this).attr("data-clipboard-text",document.title+"\n"+location.href).text("COPIED").attr("title","Copied"),setTimeout(()=>{$(this).text("").attr("title","Copy Title/URL")},2e3)})}); /*]]>*/</script> </div> </b:includable> <b:includable id='postTimestamp'/> <b:includable id='postTitle' var='post'/> <b:includable id='previousPageLink'/> <b:includable id='rp' var='post'> <b:if cond='data:view.isPost'> <div id='related-posts'/> <script> /* Related Post widget powered by IB-Note via: https://itblogger-note.blogspot.com/2021/03/improve-related-posts.html */ const rp_current = "<data:post.url/>"; const rp_max = 6; const rp_head = "RELATED POSTS"; /*<![CDATA[*/ !function(a,b){a.RelatedPosts||(a.RelatedPosts=b())}(this,function(){let a=function(){},b=0,c=0,d=[],e=[],f=[],g=[];return a.counter=function(){c++},a.add=function(l){let j=rp_current.match(/^https?:\/\/(.+$)/),m="",n="";null!=j&&(m="http://"+j[1],n="https://"+j[1]);for(let k=0;k<l.feed.entry.length;k++){let h=l.feed.entry[k];for(let i=0;i<h.link.length;i++)if("alternate"==h.link[i].rel){if(!(m==h.link[i].href||n==h.link[i].href)){d.push(h.link[i].href),e.push(h.title.$t);let q=h.published.$t.substr(0,10).replace(/-/g,"/");f.push(q);let a;if("media$thumbnail"in h){a=h.media$thumbnail.url;let o=/\/s72-.*\//,p=/=s72-.*$/;a.match(o)?a=a.replace(o,"/w240-h135-rw-p-e365/"):a.match(p)?a=a.replace(p,"=w240-h135-rw-p-e365"):a.match(/default.jpg/)&&(a=a.replace("default.jpg","mqdefault.webp").replace("/vi/","/vi_webp/"))}else a="https://1.bp.blogspot.com/-GfyX-OxsrLs/Y61LhoAYYeI/AAAAAAAAZAw/4XCyYnYxDmM_8yRkGnytXaI2MkQ5-TP3gCNcBGAsYHQ/s240-rw-e365/noimage.png";g.push(a)}break}}++b==c&&function(){let l=[],a=[];for(let c=0;c<d.length;c++)-1==l.indexOf(d[c])&&(l.push(d[c]),a.push(c));let k,h=[],i=[...Array(a.length).keys()];for(;i.length>0;)k=Math.floor(Math.random()*i.length),h.push(i[k]),i.splice(k,1);let j,b=0;if(a.length>0){for(j='<div class="title">'+rp_head+'</div><div class="rp-container">';b<a.length&&b<rp_max;)j+='<a href="'+d[a[h[b]]]+'"><figure class="related-img"><img alt="Related Post Thumbnail" height="135" data-src="'+g[a[h[b]]]+'" src="https://1.bp.blogspot.com/-Biln9ePTMsU/YntKTin9ayI/AAAAAAAAXqM/9ASlgARvII8tNnzETnW0chMG13X_eDtuQCNcBGAsYHQ/w240-h135-c-rw/blank.png" width="240"/></figure><div class="related-title">'+e[a[h[b]]]+'</div><div class="related-date"><svg aria-label="Post Date" class="svg svg-clock" style="vertical-align:-10%;margin-right:3px"><use href="#svg-clock"/></svg>'+f[a[h[b]]]+"</div></a>",b++;j+="</div>",document.getElementById("related-posts").innerHTML=j}}()},a}) /*]]>*/ </script> <b:loop values='data:post.labels' var='label'> <script>RelatedPosts.counter();</script> </b:loop> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.name contains "#"'> <script> !function(){const e="/feeds/posts/summary/-/"+"<data:label.name/>".replace(/・/g,"%E3%83%BB").replace(/#/g,"%23").replace(/&amp;/g,"&")+"?alt=json&max-results=30&callback=RelatedPosts.add",a=document.createElement("script");a.type="text/javascript",a.defer=!0,a.src=e,document.head.appendChild(a)}(); </script> <b:else/> <script defer='defer' expr:src='"/feeds/posts/summary/-/" + data:label.name + "?alt=json&max-results=30&callback=RelatedPosts.add"'/> </b:if> </b:loop> </b:if> </b:includable> <b:includable id='sharingButton'/> <b:includable id='sharingButtonContent'/> <b:includable id='sharingButtons'/> <b:includable id='sharingButtonsMenu'/> <b:includable id='sharingPlatformIcon'/> <b:includable id='singleHeader'> <h1 id='p-header-title'><data:post.title/></h1> <b:if cond='data:view.isPost'> <span id='p-header'> <time expr:datetime='data:post.date.iso8601' id='p-header-pdate'><svg aria-label='Calendar' class='svg svg-calendar-days' style='vertical-align:-10%;margin-right:5px'><use href='#svg-calendar-days'/></svg><b:eval expr='data:post.date.month lt 10 ? "0" + data:post.date.month : data:post.date.month'/>/<b:eval expr='data:post.date.day lt 10 ? "0" + data:post.date.day : data:post.date.day'/>/<data:post.date.year/></time> <b:if cond='data:post.date.year != data:post.lastUpdated.year or data:post.date.month != data:post.lastUpdated.month or data:post.date.day != data:post.lastUpdated.day'> <span id='p-header-udate'>|<svg aria-label='Updated' class='svg svg-arrows-rotate' style='margin:0 5px'><use href='#svg-arrows-rotate'/></svg><b:eval expr='data:post.lastUpdated.month lt 10 ? "0" + data:post.lastUpdated.month : data:post.lastUpdated.month'/>/<b:eval expr='data:post.lastUpdated.day lt 10 ? "0" + data:post.lastUpdated.day : data:post.lastUpdated.day'/>/<data:post.lastUpdated.year/></span> </b:if> <b:if cond='data:post.numberOfComments gt 0'> |<a expr:title='data:post.numberOfComments + " comments"' href='#comments-list' id='p-header-comments'><svg aria-label='Comment' class='svg svg-comment-dots' style='margin:0 5px'><use href='#svg-comment-dots'/></svg><data:post.numberOfComments/></a> </b:if> </span> </b:if> </b:includable> <b:includable id='status-message'> <b:if cond='data:view.isHomepage'> <div class='title'>LATEST POSTS</div> </b:if> <b:if cond='data:view.archive.month'> <span class='navmsg'><svg aria-label='Calendar' class='svg svg-calendar-days' style='margin-right:5px'><use href='#svg-calendar-days'/></svg><data:view.archive.month/>/<data:view.archive.year/></span> <b:elseif cond='data:view.archive.year'/> <span class='navmsg'><svg aria-label='Calender' class='svg svg-calendar-days' style='margin-right:5px'><use href='#svg-calendar-days'/></svg><data:view.archive.year/></span> </b:if> <b:if cond='data:navMessage and !data:view.isError'> <span class='navmsg'><data:navMessage/></span> </b:if> <b:include name='404'/> </b:includable> <b:includable id='threaded-comment-form'/> <b:includable id='threadedCommentForm'/> <b:includable id='threadedCommentJs'/> <b:includable id='threadedComments'/> <b:includable id='threaded_comment_js'/> <b:includable id='threaded_comments'/> </b:widget> <b:widget cond='data:view.isArchive' id='BlogArchive0' locked='true' title='Archive Pagenation' type='BlogArchive' version='2' visible='true'> <b:widget-settings> <b:widget-setting name='showStyle'>HIERARCHY</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</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'>false</b:widget-setting> <b:widget-setting name='frequency'>MONTHLY</b:widget-setting> </b:widget-settings> <b:includable id='main'> <!-- Archive Pager Powered by Itotti (@itozyun) via: https://outcloud.blogspot.com/2016/09/elegant-nav-for-archive.html --> <div class='Pager'> <b:include name='navi'/> </div> </b:includable> <b:includable id='content'/> <b:includable id='flat' var='data'/> <b:includable id='hierarchy'/> <b:includable id='interval' var='intervalData'/> <b:includable id='menu' var='data'/> <b:includable id='navi'> <b:with value='data:data count ( _y => _y.url == data:blog.url )' var='is_year'> <b:if cond='data:is_year != 0'> <b:include name='navi_year'/> <b:else/> <b:loop values='data:data' var='y'> <b:loop values='data:y.data' var='m'> <b:if cond='data:m.url == data:blog.url'> <b:include name='navi_month'/> <b:else/> <b:with value='data:m.data count ( _d => _d.url == data:blog.url )' var='is_day'> <b:if cond='data:is_day != 0'> <b:include name='navi_day'/> </b:if> </b:with> </b:if> </b:loop> </b:loop> </b:if> </b:with> </b:includable> <b:includable id='navi_day'> <b:loop index='yi' values='data:data' var='y'> <b:loop index='mi' values='data:y.data' var='m'> <b:loop index='di' values='data:m.data' var='d'> <b:if cond='data:d.url == data:blog.url'> <b:with value='data:m.data count ( _d => _d.url != "" )' var='dlast'> <b:if cond='data:dlast - 1 != data:di'> <b:with value='data:m.data[data:di + 1]' var='_d'> <b:if cond='data:_d.post-count != 1'> <a class='Pager-next' expr:href='data:_d.url'> <data:_d.name/> <data:y.name/> (<data:_d.post-count/>)</a> <b:else/> <a class='Pager-next' expr:href='data:_d.url'><data:_d.name/> <data:y.name/> (1)</a> </b:if> </b:with> <b:else/> <b:with value='data:y.data count ( _m => _m.name != "" )' var='mlast'> <b:if cond='data:mlast - 1 != data:mi'> <b:with value='data:y.data[data:mi + 1]' var='_m'> <b:with value='data:_m.data[0]' var='_d'> <b:if cond='data:_d.post-count != 1'> <a class='Pager-next' expr:href='data:_d.url'><data:_d.name/> <data:y.name/>> (<data:_d.post-count/>)</a> <b:else/> <a class='Pager-next' expr:href='data:_d.url'><data:_d.name/> <data:y.name/> (1)</a> </b:if> </b:with> </b:with> <b:else/> <b:with value='data:data count ( _y => _y.name != "" )' var='ylast'> <b:if cond='data:ylast - 1 != data:yi'> <b:with value='data:data[data:yi + 1]' var='_y'> <b:with value='data:_y.data[0]' var='_m'> <b:with value='data:_m.data[0]' var='_d'> <b:if cond='data:_d.post-count != 1'> <a class='Pager-next' expr:href='data:_d.url'><data:_d.name/> <data:_y.name/> (<data:_d.post-count/>)</a> <b:else/> <a class='Pager-next' expr:href='data:_d.url'><data:_d.name/> <data:_y.name/> (1)</a> </b:if> </b:with> </b:with> </b:with> </b:if> </b:with> </b:if> </b:with> </b:if> </b:with> <b:if cond='data:di != 0'> <b:with value='data:m.data[data:di - 1]' var='_d'> <b:if cond='data:_d.post-count != 1'> <a class='Pager-prev' expr:href='data:_d.url'><data:_d.name/> <data:y.name/> (<data:_d.post-count/>)</a> <b:else/> <a class='Pager-prev' expr:href='data:_d.url'><data:_d.name/> <data:y.name/> (1)</a> </b:if> </b:with> <b:else/> <b:if cond='data:mi != 0'> <b:with value='data:y.data[data:mi - 1]' var='_m'> <b:with value='data:_m.data count ( _d => _d.url != "" )' var='dlast'> <b:with value='data:_m.data[data:dlast - 1]' var='_d'> <b:if cond='data:_d.post-count != 1'> <a class='Pager-prev' expr:href='data:_d.url'><data:_d.name/> <data:y.name/> (<data:_d.post-count/>)</a> <b:else/> <a class='Pager-prev' expr:href='data:_d.url'><data:_d.name/> <data:y.name/> (1)</a> </b:if> </b:with> </b:with> </b:with> <b:else/> <b:if cond='data:yi != 0'> <b:with value='data:data[data:yi - 1]' var='_y'> <b:with value='data:_y.data count ( _m => _m.name != "" )' var='mlast'> <b:with value='data:_y.data[data:mlast - 1]' var='_m'> <b:with value='data:_m.data count ( _d => _d.url != "" )' var='dlast'> <b:with value='data:_m.data[data:dlast - 1]' var='_d'> <b:if cond='data:_d.post-count != 1'> <a class='Pager-prev' expr:href='data:_d.url'><data:_d.name/> <data:_y.name/> (<data:_d.post-count/>)</a> <b:else/> <a class='Pager-prev' expr:href='data:_d.url'><data:_d.name/> <data:_y.name/> (1)</a> </b:if> </b:with> </b:with> </b:with> </b:with> </b:with> </b:if> </b:if> </b:if> </b:if> </b:loop> </b:loop> </b:loop> </b:includable> <b:includable id='navi_month'> <b:loop index='yi' values='data:data' var='y'> <b:loop index='mi' values='data:y.data' var='m'> <b:if cond='data:m.url == data:blog.url'> <b:with value='data:y.data count ( _m => _m.url != "" )' var='mlast'> <b:if cond='data:mlast - 1 != data:mi'> <b:with value='data:y.data[data:mi + 1]' var='_m'> <b:if cond='data:_m.post-count != 1'> <a class='Pager-next' expr:href='data:_m.url'><data:_m.name/> <data:y.name/> (<data:_m.post-count/>)</a> <b:else/> <a class='Pager-next' expr:href='data:_m.url'><data:_m.name/> <data:y.name/> (1)</a> </b:if> </b:with> <b:else/> <b:with value='data:data count ( _y => _y.name != "" )' var='ylast'> <b:if cond='data:ylast - 1 != data:yi'> <b:loop index='_yi' values='data:data' var='_y'> <b:if cond='data:yi + 1 == data:_yi'> <b:with value='data:_y.data[0]' var='_m'> <b:if cond='data:_m.post-count != 1'> <a class='Pager-next' expr:href='data:_m.url'><data:_m.name/> <data:_y.name/> (<data:_m.post-count/>)</a> <b:else/> <a class='Pager-next' expr:href='data:_m.url'><data:_m.name/> <data:_y.name/> (1)</a> </b:if> </b:with> </b:if> </b:loop> </b:if> </b:with> </b:if> </b:with> <b:if cond='data:mi == 0'> <b:if cond='data:yi != 0'> <b:loop index='_yi' values='data:data' var='_y'> <b:if cond='(data:yi - 1) == data:_yi'> <b:with value='data:_y.data count ( _m => _m.url != "" )' var='mlast'> <b:with value='data:_y.data[data:mlast - 1]' var='_m'> <b:if cond='data:_m.post-count != 1'> <a class='Pager-prev' expr:href='data:_m.url'><data:_m.name/> <data:_y.name/> (<data:_m.post-count/>)</a> <b:else/> <a class='Pager-prev' expr:href='data:_m.url'><data:_m.name/> <data:_y.name/> (1)</a> </b:if> </b:with> </b:with> </b:if> </b:loop> </b:if> <b:else/> <b:with value='data:y.data[data:mi - 1]' var='_m'> <b:if cond='data:_m.post-count != 1'> <a class='Pager-prev' expr:href='data:_m.url'><data:_m.name/> <data:y.name/> (<data:_m.post-count/>)</a> <b:else/> <a class='Pager-prev' expr:href='data:_m.url'><data:_m.name/> <data:y.name/> (1)</a> </b:if> </b:with> </b:if> </b:if> </b:loop> </b:loop> </b:includable> <b:includable id='navi_year'> <b:loop index='yi' values='data:data' var='y'> <b:if cond='data:y.url == data:blog.url'> <b:with value='data:data count ( _y => _y.url != "" )' var='ylast'> <b:if cond='data:ylast - 1 != data:yi'> <b:with value='data:data[data:yi + 1]' var='_y'> <a class='Pager-next' expr:href='data:_y.url'><data:_y.name/> (<data:_y.post-count/>)</a> </b:with> </b:if> </b:with> <b:if cond='data:yi != 0'> <b:with value='data:data[data:yi - 1]' var='_y'> <a class='Pager-prev' expr:href='data:_y.url'><data:_y.name/> (<data:_y.post-count/>)</a> </b:with> </b:if> </b:if> </b:loop> </b:includable> <b:includable id='posts' var='posts'/> </b:widget> </b:section> </div> <!-- Sub Contents --> <aside id='sub-content'> <div id='sub-item1'> <b:section id='SUB1'> <b:widget id='PopularPosts1' locked='false' title='POPULAR POSTS' type='PopularPosts' version='2' visible='true'> <b:widget-settings> <b:widget-setting name='numItemsToShow'>5</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'>ALL_TIME</b:widget-setting> </b:widget-settings> <b:includable id='main' var='this'> <b:if cond='data:title != ""'> <div class='title'><data:title/></div> </b:if> <b:include name='snippetedPosts'/> </b:includable> <b:includable id='blogThisShare'/> <b:includable id='bylineByName'/> <b:includable id='bylineRegion'/> <b:includable id='commentsLink'/> <b:includable id='commentsLinkIframe'/> <b:includable id='emailPostIcon'/> <b:includable id='facebookShare'/> <b:includable id='footerBylines'/> <b:includable id='googlePlusShare'/> <b:includable id='headerByline'/> <b:includable id='linkShare'/> <b:includable id='otherSharingButton'/> <b:includable id='platformShare'/> <b:includable id='postAuthor'/> <b:includable id='postCommentsLink'> <b:if cond='data:post.numberOfComments gt 0'> <span class='article-header-comments'><svg aria-label='Comment' class='svg svg-comment-dots' style='margin-right:3px'><use href='#svg-comment-dots'/></svg><data:post.numberOfComments/> |</span> </b:if> </b:includable> <b:includable id='postJumpLink'/> <b:includable id='postLabels'/> <b:includable id='postLocation'/> <b:includable id='postReactions'/> <b:includable id='postShareButtons'/> <b:includable id='postSnippet'/> <b:includable id='postTimestamp'> <time class='article-header-date' expr:datetime='data:post.date.iso8601'><svg aria-label='Post Date' class='svg svg-clock' style='vertical-align:-10%;margin-right:3px'><use href='#svg-clock'/></svg><b:eval expr='data:post.date.month lt 10 ? "0" + data:post.date.month : data:post.date.month'/>/<b:eval expr='data:post.date.day lt 10 ? "0" + data:post.date.day : data:post.date.day'/>/<data:post.date.year/></time> </b:includable> <b:includable id='sharingButton'/> <b:includable id='sharingButtonContent'/> <b:includable id='sharingButtons'/> <b:includable id='sharingButtonsMenu'/> <b:includable id='sharingPlatformIcon'/> <b:includable id='snippetedPostByline'/> <b:includable id='snippetedPostContent'> <div class='post-content'> <b:include name='snippetedPostThumbnail'/> <b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/> <b:include cond='data:this.postDisplay.showSnippet' data='post' name='postSnippet'/> <p class='article-header'> <b:include data='post' name='postCommentsLink'/> <b:include data='post' name='postTimestamp'/> </p> <p class='article-category'> <b:include data='post' name='postLabels'/> </p> </div> </b:includable> <b:includable id='snippetedPostThumbnail'> <b:if cond='data:post.featuredImage'> <div class='pop-img'> <img expr:alt='data:post.title.escaped' expr:data-src='resizeImage(data:post.featuredImage,320,"16:9")' height='180' src='https://1.bp.blogspot.com/-Biln9ePTMsU/YntKTin9ayI/AAAAAAAAXqM/9ASlgARvII8tNnzETnW0chMG13X_eDtuQCNcBGAsYHQ/w320-h180-c-rw/blank.png' width='320'/> </div> <b:else/> <div class='pop-img'> <img data-src='https://1.bp.blogspot.com/-GfyX-OxsrLs/Y61LhoAYYeI/AAAAAAAAZAw/4XCyYnYxDmM_8yRkGnytXaI2MkQ5-TP3gCNcBGAsYHQ/s320-rw-e365/noimage.png' expr:alt='data:post.title.escaped' height='180' src='https://1.bp.blogspot.com/-Biln9ePTMsU/YntKTin9ayI/AAAAAAAAXqM/9ASlgARvII8tNnzETnW0chMG13X_eDtuQCNcBGAsYHQ/w320-h180-c-rw/blank.png' width='320'/> </div> </b:if> </b:includable> <b:includable id='snippetedPostTitle'> <b:if cond='data:post.title != ""'> <h2 class='pop-title'><data:post.title/></h2> </b:if> </b:includable> <b:includable id='snippetedPosts'> <ul> <b:loop index='i' values='data:posts' var='post'> <li class='ranked-li'> <article class='article'> <a expr:href='data:post.url'><span class='post-rank'><b:eval expr='data:i + 1'/></span></a> <b:include name='snippetedPostContent'/><a expr:aria-label='data:post.title' expr:href='data:post.url'/> </article> </li> </b:loop> <script>/*<![CDATA[*/ document.querySelectorAll(".pop-img img").forEach(e=>{e.setAttribute("data-src",e.getAttribute("data-src").replace("-k-no-nu","-rw-e365").replace("lh3-testonly","lh3"))}); /*]]>*/</script> </ul> </b:includable> </b:widget> </b:section> </div> <div id='sub-item2'> <b:section id='SUB2'> <b:widget id='Label1' locked='false' title='CATEGORY' type='Label' version='2' visible='true'> <b:widget-settings> <b:widget-setting name='sorting'>ALPHA</b:widget-setting> <b:widget-setting name='display'>CLOUD</b:widget-setting> <b:widget-setting name='selectedLabelsList'/> <b:widget-setting name='showType'>ALL</b:widget-setting> <b:widget-setting name='showFreqNumbers'>true</b:widget-setting> </b:widget-settings> <b:includable id='main'> <b:if cond='data:title != ""'> <div class='title'><data:title/></div> </b:if> <b:include cond='data:display == "list"' name='list'/> <b:include cond='data:display == "cloud"' name='cloud'/> </b:includable> <b:includable id='cloud'> <div expr:class='"widget-content " + data:display + "-label-widget-content"'> <b:loop values='data:labels where(l => l.name not contains "#")' var='label'> <a class='category-label' expr:href='data:label.url'><svg aria-label='Category' class='svg' style='margin-right:3px;font-size:1.1rem'><use href='#svg-folder'/></svg><data:label.name/><span class='label-count'><b:if cond='data:showFreqNumbers'>(<data:label.count/>)</b:if></span></a> </b:loop> </div> </b:includable> <b:includable id='content'/> <b:includable id='list'> <div expr:class='"widget-content " + data:display + "-label-widget-content"'> <b:loop values='data:labels where(l => l.name contains "#")' var='label'> <a class='hashtag-label' expr:href='data:label.url'><data:label.name/><span class='label-count'><b:if cond='data:showFreqNumbers'>(<data:label.count/>)</b:if></span></a> </b:loop> </div> </b:includable> </b:widget> <b:widget id='Label2' locked='false' title='#HASHTAGS' type='Label' version='2' 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'>true</b:widget-setting> </b:widget-settings> <b:includable id='main'> <b:if cond='data:title != ""'> <div class='title'><data:title/></div> </b:if> <b:include cond='data:display == "list"' name='list'/> <b:include cond='data:display == "cloud"' name='cloud'/> </b:includable> <b:includable id='cloud'> <div expr:class='"widget-content " + data:display + "-label-widget-content"'> <b:loop values='data:labels where(l => l.name not contains "#")' var='label'> <a class='category-label' expr:href='data:label.url'><svg aria-label='Category' class='svg' style='margin-right:3px;font-size:1.1rem'><use href='#svg-folder'/></svg><data:label.name/><span class='label-count'><b:if cond='data:showFreqNumbers'>(<data:label.count/>)</b:if></span></a> </b:loop> </div> </b:includable> <b:includable id='content'/> <b:includable id='list'> <div expr:class='"widget-content " + data:display + "-label-widget-content"'> <b:loop values='data:labels where(l => l.name contains "#")' var='label'> <a class='hashtag-label' expr:href='data:label.url'><data:label.name/><span class='label-count'><b:if cond='data:showFreqNumbers'>(<data:label.count/>)</b:if></span></a> </b:loop> </div> </b:includable> </b:widget> <b:widget id='BlogArchive1' locked='false' title='MONTHRY ARCHIVE' type='BlogArchive' version='2' visible='true'> <b:widget-settings> <b:widget-setting name='showStyle'>HIERARCHY</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</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'> <div expr:id='data:widget.instanceId + "_ArchiveList"'> <b:if cond='data:title != ""'> <div class='title'><data:title/></div> </b:if> <b:include cond='data:style == "HIERARCHY"' data='data' name='menu2'/> </div> </b:includable> <b:includable id='content'/> <b:includable id='flat'/> <b:includable id='hierarchy'/> <b:includable id='interval' var='intervalData'/> <b:includable id='menu' var='data'/> <b:includable id='menu2' var='intervalData'> <details class='archive-list'> <summary>Select Month<svg aria-label='Open/Close' class='svg-icon-24'><use href='/responsive/sprite_v1_6.css.svg#ic_expand_more_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'/></svg></summary> <ul> <b:if cond='data:intervalData.length gt 0'> <b:loop values='0 to data:intervalData.length - 1' var='i'> <b:loop values='0 to data:intervalData[i].data.length - 1' var='j'> <li><a expr:href='data:intervalData[i].data[j].url'><b:eval expr='data:intervalData[i].data[j].name + " " +data:intervalData[i].name'/> (<b:eval expr='data:intervalData[i].data[j].post-count'/>)</a></li> </b:loop> </b:loop> </b:if> </ul> </details> </b:includable> <b:includable id='posts' var='posts'/> <b:includable id='toggle' var='interval'/> </b:widget> </b:section> </div> <div id='sub-item3'> <b:section id='SUB3'> <b:widget id='Profile1' locked='false' title='PROFILE' type='Profile' version='2' visible='true'> <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' var='this'> <b:if cond='data:title != ""'> <div class='title'><data:title/></div> </b:if> <b:include name='content'/> </b:includable> <b:includable id='authorProfileImage'> <img class='profile-img' expr:alt='data:messages.myPhoto' expr:data-src='resizeImage(data:authorPhoto.image, 120)' expr:height='data:authorPhoto.height' expr:width='data:authorPhoto.width' src='https://1.bp.blogspot.com/-Biln9ePTMsU/YntKTin9ayI/AAAAAAAAXqM/9ASlgARvII8tNnzETnW0chMG13X_eDtuQCNcBGAsYHQ/s120-rw/blank.png'/> </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'> <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'> <ul> <b:loop values='data:authors' var='author'> <li> <div class='team-member'> <b:include data='author' name='teamProfileLink'/> </div> </li> </b:loop> </ul> </b:includable> <b:includable id='teamProfileLink'> <a expr:href='data:userUrl' rel='noopener' target='_blank'> <b:include name='profileImage'/> <div class='profile-name'><data:display-name/></div> </a> <b:include name='viewProfileLink'/> </b:includable> <b:includable id='userLocation'> <dd class='profile-data location'><svg class='svg' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'> <path d='M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/> </svg><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'> <a class='profile-link g-profile' expr:href='data:userUrl' rel='author noopener' target='blank'> <data:displayname/> </a> </dt> </b:includable> <b:includable id='userProfileImage'> <a expr:href='data:userUrl' rel='noopener' target='_blank'> <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='userProfileText'> <dd class='profile-textblock'> <data:aboutme/> </dd> </b:includable> <b:includable id='viewProfileLink'> <a class='profile-link' expr:href='data:userUrl' rel='author noopener' target='_blank'> <data:messages.viewMyCompleteProfile/> </a> </b:includable> </b:widget> <b:widget id='PageList2' locked='false' title='PAGE LIST' type='PageList' visible='true'> <b:widget-settings> <b:widget-setting name='pageListJson'><![CDATA[{"link1":{"href":"#","position":1,"title":"Page 2"},"link0":{"href":"#","position":0,"title":"Page 1"}}]]></b:widget-setting> <b:widget-setting name='homeTitle'>Home</b:widget-setting> </b:widget-settings> <b:includable id='main'> <b:if cond='data:title != ""'> <div class='title'><data:title/></div> </b:if> <b:include name='content'/> </b:includable> <b:includable id='content'> <b:include name='pageList'/> </b:includable> <b:includable id='overflowButton'/> <b:includable id='overflowablePageList'/> <b:includable id='pageLink'> <b:if cond='data:link.isCurrentPage'> <li><span class='current-page'><data:link.title/></span></li> <b:else/> <li><a expr:href='data:link.href'><data:link.title/></a></li> </b:if> </b:includable> <b:includable id='pageList'> <div class='list-widget'> <ul> <b:loop values='data:links' var='link'> <b:include name='pageLink'/> </b:loop> </ul> </div> </b:includable> </b:widget> </b:section> </div> </aside> </main> <!-- Footer --> <footer> <b:section id='FOOTER'> <b:widget id='HTML0' locked='false' title='Attribution' type='HTML' version='2' visible='true'> <b:widget-settings> <b:widget-setting name='content'>Please customize on theme HTML edit page.</b:widget-setting> </b:widget-settings> <b:includable id='main'> <div id='footer-attribution'> <span>© <span id='presentyear'/> <script>document.getElementById("presentyear").innerHTML=new Date().getFullYear()</script><a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a></span> <span><a href='https://f-light-theme.blogspot.com/' rel='noopener' target='_blank'><b>F-light</b></a> theme designed by Fujiyan</span> <span><b:include name='flatBloggerIcon'/><a expr:href='data:blog.bloggerUrl' rel='noopener'><b:message name='messages.poweredByBlogger'/></a></span> </div> </b:includable> </b:widget> </b:section> </footer> <b:defaultmarkups> <b:defaultmarkup type='Label'> <b:includable id='main'> <b:if cond='data:title != ""'> <div class='title'><data:title/></div> </b:if> <b:include cond='data:display == "list"' name='list'/> <b:include cond='data:display == "cloud"' name='cloud'/> </b:includable> <b:includable id='cloud'> <div expr:class='"widget-content " + data:display + "-label-widget-content"'> <b:loop values='data:labels where(l => l.name not contains "#")' var='label'> <a class='category-label' expr:href='data:label.url'><svg aria-label='Category' class='svg' style='margin-right:3px;font-size:1.1rem'><use href='#svg-folder'/></svg><data:label.name/><span class='label-count'><b:if cond='data:showFreqNumbers'>(<data:label.count/>)</b:if></span></a> </b:loop> </div> </b:includable> <b:includable id='content'/> <b:includable id='list'> <div expr:class='"widget-content " + data:display + "-label-widget-content"'> <b:loop values='data:labels where(l => l.name contains "#")' var='label'> <a class='hashtag-label' expr:href='data:label.url'><data:label.name/><span class='label-count'><b:if cond='data:showFreqNumbers'>(<data:label.count/>)</b:if></span></a> </b:loop> </div> </b:includable> </b:defaultmarkup> <b:defaultmarkup type='PageList'> <b:includable id='main'> <b:if cond='data:title != ""'> <div class='title'><data:title/></div> </b:if> <b:include name='content'/> </b:includable> <b:includable id='content'> <b:include name='pageList'/> </b:includable> <b:includable id='overflowButton'/> <b:includable id='overflowablePageList'/> <b:includable id='pageLink'> <b:if cond='data:link.isCurrentPage'> <li><span class='current-page'><data:link.title/></span></li> <b:else/> <li><a expr:href='data:link.href'><data:link.title/></a></li> </b:if> </b:includable> <b:includable id='pageList'> <div class='list-widget'> <ul> <b:loop values='data:links' var='link'> <b:include name='pageLink'/> </b:loop> </ul> </div> </b:includable> </b:defaultmarkup> <b:defaultmarkup type='LinkList'> <b:includable id='main'> <b:if cond='data:title != ""'> <div class='title'><data:title/></div> </b:if> <b:include name='content'/> </b:includable> <b:includable id='content'> <div class='list-widget'> <ul> <b:loop values='data:links' var='link'> <b:if cond='data:blog.url == data:link.target'> <li><span class='current-page'><data:link.name/></span></li> <b:else/> <li><a expr:href='data:link.target'><data:link.name/></a></li> </b:if> </b:loop> </ul> </div> </b:includable> </b:defaultmarkup> <b:defaultmarkup type='HTML'> <b:includable id='main'> <b:if cond='data:title != ""'> <div class='title'><data:title/></div> </b:if> <div class='widget-content'> <data:content/> </div> </b:includable> </b:defaultmarkup> </b:defaultmarkups> <b:if cond='data:view.isSingleItem'> <!-- Auto TOC Generator via: https://itblogger-note.blogspot.com/2021/12/fast-and-simple-auto-toc.html --> <script>/*<![CDATA[*/ !function(e,t){const n=t.querySelector(".post-body");if(!n)return;const s=t.createElement("details"),l=t.createElement("summary"),r=t.createElement("ul");s.id="toc",s.open=!1,l.className="toc-title",l.title="Open/Close TOC",l.innerHTML='<svg aria-label="List" class="svg-icon-24 list"><use href="/responsive/sprite_v1_6.css.svg#ic_menu_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"/></svg>CONTENTS<svg aria-label="Open/Close" class="svg-icon-24 angle"><use href="/responsive/sprite_v1_6.css.svg#ic_expand_more_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"/></svg>',r.className="toc-container",s.appendChild(l),s.appendChild(r);const a=n.querySelectorAll("h2, h3, h4");if(a.length<3)return;a[0].parentNode.insertBefore(s,a[0]);const c=[],i=[{level:1,element:r}];a.forEach(e=>{const t=parseInt(e.tagName.substring(1));c.push(t)}),a.forEach((e,n)=>{const s=parseInt(e.tagName.substring(1)),l=c[n+1],r=t.createElement("li"),a=t.createElement("a"),o=n+1,h=t.createElement("ul");let p;a.innerHTML=e.innerHTML,a.href=`#${o}`,r.appendChild(a),s<l&&r.appendChild(h),e.id=o;do{p=i.pop()}while(p.level>=s);p.element.appendChild(r),i.push(p),i.push({level:s,element:h})})}(window,document); //Back to TOC button const toc = document.querySelector("#toc"); if (toc) { let backToc = document.querySelector("body"); backToc.insertAdjacentHTML("beforeend", '<a id="backtoc" title="TOC" href="#toc"><svg aria-label="Back to TOC button" class="svg-icon-24 list"><use href="/responsive/sprite_v1_6.css.svg#ic_menu_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"/></svg></a>') } /*]]>*/</script> <!-- Smooth Scroll --> <script>/*<![CDATA[*/ window.addEventListener("DOMContentLoaded",function(){$('a[href^="#"]').click(function(){const t=$(this).attr("href"),n=$("#"==t||""==t?"html":t).offset().top-50;$("html, body").animate({scrollTop:n},1e3,"swing")})}); /*]]>*/</script> <!-- Scroll Button --> <div id='scroll-button'> <span id='pagetop' title='Scroll to Top'><svg aria-label='Up'><use href='#svg-angles-down'/></svg></span> <span id='pagebottom' title='Scroll to Bottom'><svg aria-label='Down'><use href='#svg-angles-down'/></svg></span> </div> </b:if> <script>/*<![CDATA[*/ window.addEventListener("DOMContentLoaded",function(){let a=$("#pagetop"),b=$("#pagebottom"),c=$("#m-pagetop"),d=$("#m-pagebottom");$(window).scroll(function(){$(this).scrollTop()>800?a.fadeIn():a.fadeOut(),$(this).scrollTop()>0&&$(this).scrollTop()<$(document).height()-1200?b.fadeIn():b.fadeOut()}),a.click(function(){$("body, html").animate({scrollTop:0},1e3)}),b.click(function(){$("body, html").animate({scrollTop:$(document).height()},1e3)}),c.click(function(){$("body, html").animate({scrollTop:0},1e3)}),d.click(function(){$("body, html").animate({scrollTop:$(document).height()},1e3)})}) /*]]>*/</script> <b:if cond='data:view.isPost'> <!-- Post Titled Pagenation: https://googlebloggertrouble.blogspot.com/2022/03/bloggernextlinktitle.html --> <script>/*<![CDATA[*/ function setPagerLinkTitleName(){setPageTitle("Blog1_blog-pager-older-link"),setPageTitle("Blog1_blog-pager-newer-link")}function setPageTitle(b){let a=document.getElementById(b);if(!a)return;let c=a.getAttribute("href"),d=c.split(location.hostname)[1];fetch("/feeds/posts/summary?alt=json&path="+d+"&max-results=1").then(a=>a.json()).then(b=>{b.feed.entry&&b.feed.entry.length>0&&(a.textContent=b.feed.entry[0].title.$t),a.setAttribute("title",b.feed.entry[0].title.$t)}).catch(a=>console.log(a))}document.addEventListener("DOMContentLoaded",setPagerLinkTitleName) /*]]>*/</script> </b:if> <b:if cond='data:view.isMultipleItems and !data:view.search.query and !data:view.isArchive'> <!-- Numbered Pagenation: https://mrbloggertricks.blogspot.com/2015/09/how-to-add-next-previous-numbered.html --> <script>/*<![CDATA[*/ let nopage,jenis,nomerhal,lblname1,postperpage=10,numshowpage=3,upPageWord="<",downPageWord=">",home_page="/",urlactivepage=location.href;function loophalaman(a){let e="";nomerkiri=parseInt(numshowpage/2),nomerkiri==numshowpage-nomerkiri&&(numshowpage=2*nomerkiri+1),mulai=nomerhal-nomerkiri,mulai<1&&(mulai=1),maksimal=parseInt(a/postperpage)+1,maksimal-1==a/postperpage&&(maksimal-=1),akhir=mulai+numshowpage-1,akhir>maksimal&&(akhir=maksimal),e+="<span class='showpageOf'>Page <span id='page-num'>"+nomerhal+"</span> / "+maksimal+"</span>";const s=parseInt(nomerhal)-1;nomerhal>1&&(e+=2==nomerhal?"page"==jenis?'<span class="showpage"><a href="'+home_page+'"aria-label="home">'+upPageWord+"</a></span>":'<span class="showpageNum"><a href="/search/label/'+lblname1+'">'+upPageWord+"</a></span>":"page"==jenis?'<span class="showpageNum"><a href="#" aria-label="next" onclick="redirectpage('+s+');return false">'+upPageWord+"</a></span>":'<span class="showpageNum"><a href="#" aria-label="next" onclick="redirectlabel('+s+');return false">'+upPageWord+"</a></span>"),mulai>1&&(e+="page"==jenis?'<span class="showpageNum"><a href="'+home_page+'"aria-label="home">1</a></span>':'<span class="showpageNum"><a href="/search/label/'+lblname1+'">1</a></span>'),mulai>2&&(e+="…");for(let a=mulai;a<=akhir;a++)e+=nomerhal==a?'<span class="showpagePoint">'+a+"</span>":1==a?"page"==jenis?'<span class="showpageNum"><a href="'+home_page+'">1</a></span>':'<span class="showpageNum"><a href="/search/label/'+lblname1+'">1</a></span>':"page"==jenis?'<span class="showpageNum"><a href="#" onclick="redirectpage('+a+');return false">'+a+"</a></span>":'<span class="showpageNum"><a href="#" onclick="redirectlabel('+a+');return false">'+a+"</a></span>";akhir<maksimal-1&&(e+="…"),akhir<maksimal&&(e+="page"==jenis?'<span class="showpageNum"><a href="#" onclick="redirectpage('+maksimal+');return false">'+maksimal+"</a></span>":'<span class="showpageNum"><a href="#" onclick="redirectlabel('+maksimal+');return false">'+maksimal+"</a></span>");const n=parseInt(nomerhal)+1;nomerhal<maksimal&&(e+="page"==jenis?'<span class="showpageNum"><a href="#" aria-label="prev" onclick="redirectpage('+n+');return false">'+downPageWord+"</a></span>":'<span class="showpageNum"><a href="#" aria-label="prev" onclick="redirectlabel('+n+');return false">'+downPageWord+"</a></span>");for( t=document.getElementsByName("pageArea"),r=document.getElementById("blog-pager"),l=0;l<t.length;l++)t[l].innerHTML=e;t&&t.length>0&&(e=""),r&&(r.innerHTML=e)}function hitungtotaldata(a){const e=a.feed;loophalaman(parseInt(e.openSearch$totalResults.$t,10))}function halamanblogger(){let a,e=urlactivepage;-1!=e.indexOf("/search/label/")&&(lblname1=-1!=e.indexOf("?")?e.substring(e.indexOf("/search/label/")+14,e.indexOf("?")):e.substring(e.indexOf("/search/label/")+14,e.length)),-1==e.indexOf("?q=")&&-1==e.indexOf(".html")&&(-1==e.indexOf("/search/label/")?(jenis="page",nomerhal=-1!=urlactivepage.indexOf("#PageNo=")?urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length):1,(a=document.createElement("script")).setAttribute("src",home_page+"feeds/posts/summary/?max-results=1&alt=json-in-script&callback=hitungtotaldata"),document.body.appendChild(a)):(jenis="label",nomerhal=-1!=urlactivepage.indexOf("#PageNo=")?urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length):1,(a=document.createElement("script")).setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?alt=json-in-script&callback=hitungtotaldata&max-results=1"),document.body.appendChild(a)))}function redirectpage(a){jsonstart=(a-1)*postperpage,nopage=a;const e=document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript",s.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost"),e.appendChild(s)}function redirectlabel(a){jsonstart=(a-1)*postperpage,nopage=a;const e=document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript",s.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost"),e.appendChild(s)}function finddatepost(a){post=a.feed.entry[0];const e=post.published.$t.substring(0,19)+post.published.$t.substring(23,29),s=encodeURI(e).replace("+","%2B");if("page"==jenis)n="/search?updated-max="+s+"#PageNo="+nopage;else n="/search/label/"+lblname1+"?updated-max="+s+"#PageNo="+nopage;location.href=n}halamanblogger(); /*]]>*/</script> </b:if> <!-- defer.js --> <script id='defer-js' src='//cdn.jsdelivr.net/npm/@shinsenter/defer.js@latest/dist/defer.min.js'/> <script>/*<![CDATA[*/ Defer.dom("img"),Defer.dom("iframe"),Defer.dom("audio"),Defer.dom("video");const twitterEmbed=document.querySelectorAll(".twitter-tweet,.twitter-timeline"),instaEmbed=document.getElementsByClassName("instagram-media");try{0!==twitterEmbed.length&&Defer.js("//platform.twitter.com/widgets.js","widgets-js",2500),0!==instaEmbed.length&&Defer.js("//www.instagram.com/embed.js","embed-js",2500)}catch(a){console.log(a)} /*]]>*/</script> <!-- jQuery --> <script defer='defer' src='//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js'/> <!-- Mobile Parameter Remove script taken from JetTheme --> <script>/*<![CDATA[*/ function rmurl(t){const r=new RegExp(/\?m=0|\?m=1|\&m=0|\&m=1/);return t=t.replace(r,''),history.replaceState({},document.title,t),t;}const currentUrl=rmurl(location.toString()); /*]]>*/</script> <b:if cond='data:view.isSingleItem'> <!-- Anonymous Avatar --> <script>/*<![CDATA[*/ window.addEventListener("DOMContentLoaded",function(){$('img[data-src="//resources.blogblog.com/img/blank.gif"]').attr("data-src","//1.bp.blogspot.com/-2vBtU10Te7c/YjSMMILIigI/AAAAAAAAXTU/5po01iBCejgqrm_qfV8YohE4xYzF6rDFwCNcBGAsYHQ/s100-rw-e365/avatar.png").attr("alt","No Image"),$('img[data-src="//www.blogger.com/img/blogger_logo_round_35.png"]').attr("data-src","//1.bp.blogspot.com/-B0GVL8a1IOI/ZDHc5NYRkLI/AAAAAAAAZug/zc2qCXcQbz4505az3UdUPVvKU_qzvWpBQCNcBGAsYHQ/s100-rw-cc-e365/no-image-avatar.png").attr("alt","No Image")}) /*]]>*/</script> </b:if> <!-- details summary Animation: https://css-tricks.com/how-to-animate-the-details-element/ --> <script>/*<![CDATA[*/ class Accordion{constructor(a){this.el=a,this.summary=a.querySelector("summary"),this.content=a.querySelector("details ul"),this.animation=null,this.isClosing=!1,this.isExpanding=!1,this.summary.addEventListener("click",a=>this.onClick(a))}onClick(a){a.preventDefault(),this.el.style.overflow="hidden",this.isClosing||!this.el.open?this.open():(this.isExpanding||this.el.open)&&this.shrink()}shrink(){this.isClosing=!0;let a=`${this.el.offsetHeight}px`,b=`${this.summary.offsetHeight}px`;this.animation&&this.animation.cancel(),this.animation=this.el.animate({height:[a,b]},{duration:300,easing:"ease-out"}),this.animation.onfinish=()=>this.onAnimationFinish(!1),this.animation.oncancel=()=>this.isClosing=!1}open(){this.el.style.height=`${this.el.offsetHeight}px`,this.el.open=!0,window.requestAnimationFrame(()=>this.expand())}expand(){this.isExpanding=!0;let a=`${this.el.offsetHeight}px`,b=`${this.summary.offsetHeight+this.content.offsetHeight}px`;this.animation&&this.animation.cancel(),this.animation=this.el.animate({height:[a,b]},{duration:400,easing:"ease-out"}),this.animation.onfinish=()=>this.onAnimationFinish(!0),this.animation.oncancel=()=>this.isExpanding=!1}onAnimationFinish(a){this.el.open=a,this.animation=null,this.isClosing=!1,this.isExpanding=!1,this.el.style.height=this.el.style.overflow=""}}document.querySelectorAll("details").forEach(a=>{new Accordion(a)}) /*]]>*/</script> <!-- Page List / Link List Open in New Tab --> <script>/*<![CDATA[*/ const externalLink=document.querySelectorAll(".PageList a, .LinkList a");window.addEventListener("DOMContentLoaded",()=>{for(i=0;i<externalLink.length;i++){let e=externalLink[i].href;console.log(e),e.match(location.hostname)||e.match(/^https?:\/\//)&&(externalLink[i].target="_blank",externalLink[i].rel="noopener")}}); /*]]>*/</script> <!-- Center Aligning Embedded Tweet --> <script>/*<![CDATA[*/ const xLayout=document.querySelectorAll(".twitter-tweet");window.addEventListener("DOMContentLoaded",()=>{for(i=0;i<xLayout.length;i++)xLayout[i].setAttribute("data-width","540"),xLayout[i].setAttribute("data-align","center")}); /*]]>*/</script> <noscript> <div id='noscript-msg'> <p>Please enable JavaScript to Enjoy This Blog.</p> </div> </noscript> </body> </html>
Texto alterado
Abrir arquivo
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html b:css='false' b:defaultwidgetversion='2' b:js='true' b:layoutsVersion='3' b:responsive='true' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'><b:attr name='xmlns' value=''/><b:attr name='xmlns:b' value=''/><b:attr name='xmlns:expr' value=''/><b:attr name='xmlns:data' value=''/> <head> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0' name='viewport'/> <meta expr:content='"text/html; charset=" + data:blog.encoding' http-equiv='Content-Type'/> <meta content='blogger' name='generator'/> <!-- DNS prefetch --> <link href='//blogger.googleusercontent.com' rel='dns-prefetch'/> <link href='//1.bp.blogspot.com' rel='dns-prefetch'/> <link href='//www.blogger.com' rel='dns-prefetch'/> <link href='//cdn.jsdelivr.net' rel='dns-prefetch'/> <!-- SEO --> <b:if cond='data:view.isSingleItem'> <title><data:blog.pageName/> | <data:blog.title/></title> <meta expr:content='resizeImage(data:view.featuredImage, 560, "16:9")' name='thumbnail'/> <b:elseif cond='data:view.search.query'/> <title>Search Query of "<data:view.search.query/>" | <data:blog.title/></title> <b:elseif cond='data:view.isLabelSearch'/> <title><data:blog.pageName/> | <data:blog.title/></title> <b:elseif cond='data:view.archive'/> <title><data:blog.pageName/> | <data:blog.title/></title> <b:elseif cond='data:view.isError'/> <title>404 Not Found | <data:blog.title/></title> <b:else/> <title><data:blog.pageTitle/></title> </b:if> <meta expr:content='data:view.description.escaped' name='description'/> <link expr:href='data:view.url.canonical' rel='canonical'/> <!-- Favicon --> <link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/> <!-- RSS Feed --> <data:blog.feedLinks/> <!-- OGP --> <meta expr:content='data:blog.url.canonical' property='og:url'/> <b:if cond='data:view.isSingleItem'> <meta expr:content='data:blog.pageName.escaped + " | " + data:blog.title' property='og:title'/> <b:elseif cond='data:view.search.query'/> <meta expr:content=' "Search Query of " + data:view.search.query + " | " + data:blog.title' property='og:title'/> <b:elseif cond='data:view.isLabelSearch'/> <meta expr:content='"Label: " + data:blog.pageName.escaped + " | " + data:blog.title' property='og:title'/> <b:elseif cond='data:view.archive'/> <meta expr:content='data:blog.pageName.ascaped + " | " + data:blog.title' property='og:title'/> <b:elseif cond='data:view.isError'/> <meta expr:content='"404 Not Found" + " | " + data:blog.title' property='og:title'/> <b:else/> <meta expr:content='data:blog.title' property='og:title'/> </b:if> <meta expr:content='data:view.description.escaped' property='og:description'/> <b:if cond='data:view.isSingleItem'> <meta content='article' property='og:type'/> <b:else/> <meta content='blog' property='og:type'/> </b:if> <meta expr:content='data:blog.title' property='og:site_name'/> <b:if cond='data:view.featuredImage'> <meta expr:content='resizeImage(data:view.featuredImage, 560, "16:9")' property='og:image'/> <b:else/> <meta content='【OGP Image URL here】' property='og:image'/> </b:if> <meta content='summary_large_image' name='twitter:card'/> <meta content='light' id='twth' name='twitter:widgets:theme'/> <b:if cond='!data:view.isLayoutMode'> <b:skin><![CDATA[ /*-------------------------------------------------------------- Blogger Template Name : F-light Version : 1.35-TD-en Designer: Fujiyan Url : https://f-light-theme.blogspot.com/ License : Customization is available, but redistribution and sale are prohibited. ----------------------------------------------------------------*/ /*==== Reset CSS ====*/ html{min-height:100vh}.item-control{display:none}*{margin:0;padding:0;font-size:100%;vertical-align:baseline}*,::after,::before{box-sizing:border-box}html{font-size:62.5%}body{word-wrap:break-word;overflow-wrap:break-word}img{height:auto;max-width:100%;vertical-align:bottom}iframe{max-width:100%;border:none}.post-body ol,.post-body ul{padding-left:1em}.widget-content ul,.widget-content ol{padding-left:1.5em}@media(max-width:1024px){body{font-size:1.6rem}} /*<Group description="Brand Color"> <Variable name="brand" description="Deep Brand Color" type="color" default="#4169e1" value="#4169e1"/> <Variable name="brand.font" description="Text on Deep Brand Color" type="color" default="#ffffff" value="#ffffff"/> <Variable name="brand.light" description="Pale Brand Color" type="color" default="#1e90ff" value="#1e90ff"/> <Variable name="brand.light.font" description="Text on Pale Brand Color" type="color" default="#ffffff" value="#ffffff"/> <Variable name="sub.brand" description="Sub Brand Color" type="color" default="#ff6347" value="#ff6347"/> <Variable name="sub.brand.font" description="Text on Sub Brand Color" type="color" default="#ffffff" value="#ffffff"/> </Group> <Group description="Background Color"> <Variable name="darkmode.dark.bg" description="Deep Background Color in Dark Mode" type="color" default="#171e2d" value="#171e2d"/> <Variable name="darkmode.light.bg" description="Pale Background Color in Dark Mode" type="color" default="#1d2638" value="#1d2638"/> <Variable name="lightmode.dark.bg" description="Deep Background Color in Light Mode" type="color" default="#eeeeff" value="#eeeeff"/> <Variable name="lightmode.light.bg" description="Pale Background Color in Light Mode" type="color" default="#fbfbff" value="#fbfbff"/> <Variable name="darkmode.shadow" description="Shadow Color in Dark Mode" type="color" default="#000000" value="#000000"/> <Variable name="lightmode.shadow" description="Shadow Color in Light Mode" type="color" default="#aaaaaa" value="#aaaaaa"/> </Group> <Group description="Text Color"> <Variable name="darkmode.dark.font" description="Deep Text Color in Dark Mode" type="color" default="#eeeeee" value="#eeeeee"/> <Variable name="darkmode.light.font" description="Pale Text Color in Dark Mode" type="color" default="#c0c0c0" value="#c0c0c0"/> <Variable name="lightmode.dark.font" description="Deep Text Color in Light Mode" type="color" default="#333333" value="#333333"/> <Variable name="lightmode.light.font" description="Pale Text Color in Light Mode" type="color" default="#666666" value="#666666"/> <Variable name="darkmode.link" description="Link Color in Dark Mode" type="color" default="#00bfff" value="#00bfff"/> <Variable name="lightmode.link" description="Link Color in Light Mode" type="color" default="#4169e1" value="#4169e1"/> </Group>*/ /*==== Dark Mode ====*/ :root { --dark-bg: $(darkmode.dark.bg); /*Deep Background Color*/ --light-bg: $(darkmode.light.bg); /*Pale Background Color*/ --shadow: #000; /*Shadow*/ --color: $(darkmode.dark.font); /*Deep Text Color*/ --dark-color: $(darkmode.light.font); /*Pale Text Color*/ --red-color: Tomato; /*Red Text*/ --blue-color: #8cb4ff; /*Blue Text*/ --green-color: #00d061; /*Green Text*/ --link: $(darkmode.link); /*Link Color*/ --brand: $(brand); /*Deep Brand Color*/ --brand-light: $(brand.light); /*Pale Brand Color*/ --brand-font: $(brand.font); /*Text Color on Brand Color*/ --sub-brand: $(sub.brand); /*Sub Brand Color*/ --sub-brand-font: $(sub.brand.font) /*Text Color on Sub Brand Color*/ } /*==== Light Mode ====*/ :root[data-theme-mode="light"] { --dark-bg: $(lightmode.dark.bg); /*Deep Background Color*/ --light-bg: $(lightmode.light.bg); /*Pale Background Color*/ --shadow: $(lightmode.shadow); /*Shadow*/ --color: $(lightmode.dark.font); /*Deep Text Color*/ --dark-color: $(lightmode.light.font); /*Pale Text Color*/ --red-color: #d30038; /*Red Text*/ --blue-color: #592bff; /*Blue Text*/; --green-color: #007936; /*Green Text*/; --link: $(lightmode.link); /*Link Color*/ } ]]></b:skin> <style>/*<![CDATA[*/ /*==== Common ====*/ body { font-size: 1.7rem; font-family: sans-serif; color: var(--color); background: var(--light-bg); text-underline-offset: .2em; text-decoration-skip-ink: none; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; } #sub-content a { color: var(--link); } #sub-content .widget { padding: .5em; } a { text-decoration: none; color: inherit; transition: .3s; } .blogger-clickTrap { display: none; } button:hover { cursor: pointer; } select { outline: none; } ::selection { background: #00e5ff; color: #000; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--light-bg); border-radius: 10px; } ::-webkit-scrollbar-thumb { background: #aaa; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #bbb; } * { scrollbar-width: thin; scrollbar-color: #aaa transparent; } summary { display: block; list-style: none; } summary::-webkit-details-marker { display: none; } #MAIN .widget { margin-bottom: 3em; } rt { font-size: 50%; } /*==== Header ====*/ header { background: var(--light-bg); } #header-title { font-size: 2.5rem; padding: .5em; text-align: center; } #header-title a { font-weight: bold; } #header-title a:hover { color: var(--link); } #header-desc { font-size: 1.2rem; line-height: 1.3; color: var(--dark-color); text-align: center; padding: 0 1em 1em; } .header-img { background-position: center; background-repeat: no-repeat; text-align: center; } /*==== Mode Switch ====*/ #mode-switch { position: absolute; top: 5px; right: 1em; } #mode-switch label { cursor: pointer; } #mode-switch svg { height: 24px; width: 24px; color: var(--brand-font); } #switch-mode-dark svg { transform: scale(-1, 1); } @media (max-width: 1024px) { #mode-switch { right: 45px; } } #switch-mode-dark { display: none; } input[type="checkbox"]#js_mode_toggle { display: none; } #js_mode_toggle:checked ~ label #switch-mode-dark { display: initial; } #js_mode_toggle:checked ~ label #switch-mode-light { display: none; } #nav-button:checked ~ #mode-switch { display: none; } /*==== Nav Bar ====*/ nav { background: linear-gradient(to right, var(--brand-light), var(--brand), var(--brand-light)); opacity: .9; box-shadow: 0 3px 6px -4px var(--shadow); position: -webkit-sticky; position: sticky; top: 0; z-index: 10; min-height: 2em; margin-top: -1px; } #nav { position: relative; margin: auto; width: 100%; max-width: 1160px; min-width: 960px; } #nav-button, #nav-label { display: none; } #nav-content ul { display: flex; flex-wrap: wrap; max-width: 640px; } #nav-content li { line-height: 1.5; list-style: none; transition: .3s; } #nav-content li a { display: block; font-size: 1.4rem; padding: .5em 10px; color: var(--brand-font); } #nav-content li a:hover { background: #eef; color: #333!important; } @media (max-width: 1024px ) { nav { height: 2em; } #nav { box-shadow: 0 3px 6px -4px var(--shadow); background: var(--light-bg); padding-left: 8px; min-width: 0; } #nav-content { max-height: 0; overflow: hidden; transition: .2s; } input[type="checkbox"]#nav-button { display: none; } #nav-button:checked ~ #nav-content { max-height: 500px; transition: 1s; } #nav-content ul { margin-top: 30px; max-width: 100%; } #nav-content li { width: 200px; margin-bottom: 5px; margin-right: 8px; } #nav-content li a { width: 100%; display: block; color: var(--brand-font); text-align: center; background: var(--brand); border-radius: 3px; } #nav-label { float: right; position: relative; display: flex; height: 30px; width: 30px; align-items: center; margin-left: 5px; cursor: pointer; z-index: 1; } #nav-label span, #nav-label span::before, #nav-label span::after { position: absolute; content: ""; display: block; height: 2px; width: 24px; border-radius: 2px; background: var(--brand-font); transition: .3s; } #nav-label span::before { bottom: 8px; } #nav-label span::after { top: 8px; } #nav-button:checked ~ #nav-label span { background: transparent; } #nav-button:checked ~ #nav-label span::before { bottom: 0; transform: rotate(45deg); background: var(--color); } #nav-button:checked ~ #nav-label span::after { top: 0; transform: rotate(-45deg); background: var(--color); } } #mobile-home { display: none; color: var(--brand-font); position: absolute; font-size: 2.2rem; top: 3px; } #mobile-jump { display: none; color: var(--brand-font); position: absolute; } #mobile-jump span { display: inline-block; margin: 0 5px; height: 34px; cursor: pointer; } #mobile-jump svg { margin-top: 5px; } #nav-button:checked ~ #mobile-home, #nav-button:checked ~ #mobile-jump,#nav-button:checked ~ .item-control a:not(.comment-delete) { display: none; } @media (max-width: 1024px) { #mobile-home, #mobile-jump { display: initial; } } /*==== Search Box ====*/ #search-wrap { position: absolute; right: 0; } .search-box-form { position: relative; width: 300px; margin-right: 90px; background: transparent; z-index: 2; } .search-box-text { width: 100%; height: 1.9em; margin-top: 2px; border: 2px solid transparent; border-radius: 5px; outline: none; background: transparent; color: var(--brand-font); font-size: 1.6rem; padding: 2px 5px 0 28px; transition: .2s; } .search-box-text:hover, .search-box-text:focus { border-color: var(--brand-font); } .search-box-text:focus { background: var(--brand); } .search-box-text::placeholder { color: var(--brand-font); } .search-box-submit { color: var(--brand-font); position: absolute; left: 2px; top: 6px; border: none; background: transparent; outline: 0; padding: 0; transition: .3s; } .search-box-submit svg { height: 1.3em; width: 1.3em; } .search-box-submit:hover { transform: scale(1.2); } ::-webkit-search-cancel-button { height: 1.1em; width: 1.1em; -webkit-appearance: none; cursor: pointer; background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="%23fff"/></svg>'); } input[type="search"]::-webkit-search-decoration { display: none; } @media (max-width: 600px ) { #search-wrap { right: 30px; } .search-box-form { width: 150px; margin-left: 5px; margin-right: 55px; } .search-box-text:focus { width: 230px; } } #nav-button:checked ~ #search-wrap { display: none; } .search-box-text::-moz-placeholder { opacity: 1; color: var(--brand-font); } /*==== Archive Widget ====*/ .archive-list { margin: 0 auto 1em; max-width: 500px; } .archive-list ul { box-shadow: 2px 2px 6px var(--shadow); border-top: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; color: var(--color); max-height: 16em; overflow: auto; margin: 0 1px 0!important; padding-left: 0!important; } .archive-list ul li { font-size: 1.5rem; line-height: 1.8; margin: 0!important; padding: 0!important; list-style: none; } .archive-list summary { position: relative; padding: 5px 0 5px 8px; height: 2em; line-height: 1.5; background: var(--brand); color: var(--brand-font); font-size: 1.5rem; border-radius: 5px; transition: .3s; } .archive-list summary:hover, details[open].archive-list summary:hover { background: var(--brand-light); cursor: pointer; } .archive-list a { display: block; padding-left: .5em; color: var(--color)!important; text-decoration: none!important; } .archive-list a:hover { background: dodgerblue; color: #fff!important; } .archive-list .svg-icon-24 { position: absolute; right: 3px; top: 0; font-size: 2.5rem; color: var(--darkfcolor); transition: .2s; } details[open].archive-list .svg-icon-24 { transform: rotate(180deg); } details[open].archive-list summary { color: var(--brand-font); background: var(--brand-light); box-shadow: 0 4px 4px -4px var(--shadow); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .archive-list ul::-webkit-scrollbar-track { background: var(--light-bg); } /*==== Page List / Link List ====*/ .list-widget li { list-style-type: none; line-height: 1.5; padding-bottom: 5px; } .list-widget a { color: var(--color)!important; font-size: 1.3rem; font-weight: bold; padding: 5px 8px 3px; text-indent: -5px; border-radius: 2px; width: 100%; display: block; } .list-widget a::after { content: "\00BB"; margin-left: 2px; } .list-widget a:hover { background: var(--brand); color: var(--brand-font)!important; } .list-widget li a::before { content: "\25cf"; padding-right: 2px; color: var(--brand); } .list-widget li a:hover::before { color: var(--brand-font); } .current-page { font-size: 1.3rem; padding: 5px 8px 3px; text-indent: -5px; display: block; } .current-page::before { content: "\25cf"; padding-right: 2px; } /*==== Label Widget ====*/ .category-label { display: inline-block; border-radius: 5px; margin-bottom: .5em; background: var(--brand); color: var(--brand-font)!important; transition: .3s; line-height: 1; padding: 6px; font-size: 1.2rem; } .category-label:hover { background: var(--brand-light); } .hashtag-label { display: inline-block; margin-bottom: .5em; color: var(--color)!important; border: solid var(--dark-color) 1px; border-radius: 3px; line-height: 1; transition: .2s; font-size: 1.4rem; padding: 4px 5px 3px; } .list-label-widget-content { text-align: center; } .hashtag-label:hover { border-color: var(--sub-brand); background: var(--sub-brand); color: var(--sub-brand-font)!important; } .label-count { font-size: 1.1rem; margin-left: 3px; } .cloud-label-widget-content { text-align: center; } /*== Profile Widget ==*/ .Profile { min-height: 140px; text-align: center; } .g-profile { font-size: 1.9rem; line-height: 1.5; } .location { font-size: 1.5rem; } .profile-info a { font-weight: bold; color: var(--color)!important; } .profile-info a:hover { color: var(--link)!important; text-decoration: underline; } .profile-textblock { font-size: 1.3rem; line-height: 1.3; margin-top: .5em; margin-bottom: .5em; color: var(--dark-color); } .profile-textblock a { color: var(--link)!important; } .profile-textblock a:hover { text-decoration: underline; color: var(--dark-color)!important; } .profile-img { width: 90px; height: 90px; object-fit: contain; border-radius: 50%; transition: .3s; margin-bottom: .5em; } .profile-img:hover { opacity: .8; } .profile-info>.profile-link { font-size: 1.6rem; } .profile-info>.profile-link::after { content: "\00BB"; } .default-avatar { display: inline-block; margin-bottom: .5em; } .avatar-icon { font-size: 70px; color: var(--dark-color); border: 1px solid var(--dark-color); border-radius: 50%; } /* Team Profile */ .Profile li { margin: 1em; padding-bottom: 1em; list-style: none; } .Profile li { border-bottom: dotted var(--dark-color) 2px; } .Profile li:last-child { border: none; } .profile-name { font-size: 1.9rem; line-height: 1.5; } a .profile-name { font-weight: bold; color: var(--color) !important; } a .profile-name:hover { color: var(--link) !important; text-decoration: underline; } a.profile-link:nth-of-type(2) { font-size: 1.6rem; font-weight: bold; color: var(--color) !important; } a.profile-link:nth-of-type(2):hover { color: var(--link) !important; text-decoration: underline!important; } .profile-link:nth-of-type(2)::after { content: "\00BB"; } /*==== Search Widget ====*/ .widget-content form { position: relative; max-width: 600px; margin: 0 auto; } .search-input input { box-sizing: border-box; background: var(--dark-bg); color: var(--color); border-top-left-radius: 5px; border-bottom-left-radius: 5px; border: none; width: calc(100% - 70px); height: 40px; padding: 0 .5em; } .search-input input:focus { outline: none; border: 1px solid var(--brand); padding: 0 calc(.5em - 1px); } .search-input input::placeholder { color: var(--dark-color); } .search-action { position: absolute; background: var(--brand); color: var(--brand-font); border: none; border-top-right-radius: 5px; border-bottom-right-radius: 5px; top: 0; right: 0; width: 70px; height: 40px; } .search-action:hover { cursor: pointer; opacity: .8; } /*==== Contact Form Widget ====*/ .contact-form-email, .contact-form-email-message, .contact-form-name { max-width:100%; min-width:100%; color: var(--color); padding: .5em; outline: none; border-radius: 3px; background: var(--dark-bg); transition: .2s; border: 1px solid transparent; } .contact-form-email:focus, .contact-form-email-message:focus, .contact-form-name:focus { box-shadow: 0 0 6px var(--link); border: 1px solid var(--link); } .contact-form-email-message { min-height: 200px; } .contact-form-email, .contact-form-name { height:40px; } .contact-form-button-submit { border-radius : 3px; line-height: .1; margin: 2em 0; cursor: pointer; padding: 1em 2em; background: var(--brand); color: var(--brand-font); transition: .3s; border: none; outline: none; } .contact-form-button-submit:hover { transform: scale(1.1); } .contact-form-button-submit:active { transform: none; } .contact-form-error-message-with-border, .contact-form-success-message-with-border { color: var(--color); font-weight: bold!important; } .contact-form-cross { width: .9em; height: .9em; vertical-align: -5%; margin:0 5px; } .contact-form-cross:hover { cursor:pointer; } /*==== Footer ====*/ #FOOTER .widget:not(#HTML0) { margin: 0 .5em 2em; } #footer-attribution { background: var(--dark-bg); color: var(--color); font-size: 1.5rem; padding: .5em; display: flex; justify-content: center; } #footer-attribution a { font-weight: normal; } #footer-attribution a:hover { color: var(--link); text-decoration: underline; } #footer-attribution span:not(#presentyear)::after { content: "\FF5C"; margin-right: 3px; } #footer-attribution span:last-child::after { display: none; } @media (max-width: 950px ) { #footer-attribution { align-items: center; flex-direction: column; } #footer-attribution span::after { display: none; } } /*==== SVG ====*/ .linesvg { height: 28px; width: 28px; padding-bottom: 3px; margin-left: 2px; } .verified { height: 16px; width: 16px; vertical-align: -5%; margin-left: 3px; } .moon.svg { transform: scale(-1, 1); } .svg-icon-24 { fill: currentColor; height: 1.2em; width: 1.2em; vertical-align: -15%; } /*==== Font Awesome ====*/ .svg { fill: currentColor; height: 1em; width: 1em; margin-left: 2px; margin-right: 2px; vertical-align: -8%; } /*==== Widget Title ====*/ .title { background: linear-gradient(to right, var(--brand-light), var(--brand), var(--brand-light)); font-size: 1.8rem; font-weight: bold; line-height: 1.2; margin-bottom: .5em; padding: 3px; color: var(--brand-font); border-radius: 3px; text-align: center; } /*==== Popular Posts ====*/ .PopularPosts .article { height: 90px; position: relative; margin-bottom: 20px; transition: .3s; border-radius: 5px; box-shadow: 1px 1px 2px var(--shadow); } .article > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .article:hover { box-shadow: 8px 8px 10px var(--shadow); } .article-header { color: var(--dark-color); font-size: 1.4rem; line-height: 1.5; bottom: 0; right: 5px; position: absolute; margin-top: 5px; } .PopularPosts ul { max-width: 600px; margin-right: auto; margin-left: auto; } .pop-img img { position: absolute; object-fit: cover; width: 40%; height: 100%; border-radius: 5px 0 0 5px; } .pop-title { display: flex; font-weight: normal; margin-bottom: 5px; overflow: hidden; line-height: 1.4; position: relative; font-size: 1.6rem; height: 4.4em; left: 41%; width: 54%; } .pop-title::before { content: "\25CF"; padding-right: 2px; color: var(--brand); transition: .3s; } .article:hover .pop-title::before { color: var(--sub-brand); } .pop-snippet { display: none; } @media (max-width: 1024px ) { #PopularPosts1 article { height: 130px; } .pop-title { padding-top: .5em; left: 46%; } .pop-img img { width: 45%; } } .ranked-li { position: relative; } .PopularPosts li { list-style-type: none; } .post-rank { display: inline-block; position: absolute; z-index: 1; top: 0; left: 0; width: 1.5em; height: 1.2em; line-height: 1.3; text-align: center; font-weight: bold; color: var(--sub-brand-font); border-top-left-radius: 5px; background: var(--sub-brand); } /*==== Featured Post ====*/ .article { height: 174px; position: relative; transition: .3s; border-radius: 5px; box-shadow: 1px 1px 2px var(--shadow); } .article-category { position: absolute; top: 0; left: 0; z-index: 1; max-width: 40%; max-height: 150px; overflow: hidden; opacity: 0; transition: .3s; } .article-category-label { line-height: 1.7; margin-bottom: 5px; display: inline-block; background: #22222288; transition: .3s; } .article-category-label:first-child { border-top-left-radius: 5px; } .article-category-label a { display: block; color: var(--brand-font)!important; font-weight: normal; font-size: 1.4rem; padding: 3px 5px 1px 4px; } .article-category-label:hover { background: var(--brand-light); } .article:hover .article-category { opacity: 1; } #feat-name { position: absolute; top: 0; left: 0; font-weight: bold; line-height: 1; color: #000; border-top-left-radius: 5px; background: gold; padding: 6px; } .feat-img { transition: .3s; } .feat-img img { position: absolute; object-fit: cover; width: 40%; height: 100%; border-radius: 5px 0 0 5px; } .feat-title { display: flex; font-size: 1.82rem; font-weight: normal; margin-bottom: 5px; overflow: hidden; height: 3.45em; line-height: 1.4; padding-top: .5em; left: 41%; width: 58%; position: relative; } .feat-title::before { content: "\2605"; padding-right: 2px; color: var(--brand); transition: .3s; } .article:hover .feat-title::before { color: gold; } .article:hover #feat-name { display: none; } .article:hover .feat-img { opacity: .7; } .feat-snippet { font-size: 1.4rem; line-height: 1.5; height: 6em; overflow: hidden; color: var(--dark-color); left: 42%; width: 57%; position: relative; } @media (max-width: 600px ) { .article { height: 130px; } .feat-title { font-size: 1.6rem; height: 5.8em; left: 47%; width: 52%; } .feat-snippet { display: none; } .feat-img img { width: 45%; } #FeaturedPost1 .article-category { display: none; } .article:hover #feat-name { display: initial; } } /*]]>*/<b:if cond='!data:view.isHomepage'>/*<![CDATA[*/ #mobile-jump { left: 45px; } /*]]>*/</b:if><b:if cond='!data:view.isSingleItem and !data:view.isError'>/*<![CDATA[*/ /*==== 2 Column Layout ====*/ main { width: 97%; max-width: 1155px; display: flex; justify-content: space-between; margin: 0 auto; } #main-content { margin: 3.5em 20px 1em 0; width: calc(68% - 20px); flex-shrink: 0; } #sub-content { margin-top: 3em; width: 32%; flex-shrink: 0; } #sub-content .widget { margin-bottom: 1.2em; } @media(max-width :1024px) { main { display: block; width: 100%; padding: 0 .5em; } #main-content { width: 98%; margin: 3em auto 1em; } #sub-content { width: 100%; display: flex; flex-direction: column; } #sub-content .widget { margin-bottom: 0; } } /*==== Article List ====*/ .article { height: 174px; position: relative; margin-bottom: 20px; transition: .3s; border-radius: 5px; box-shadow: 1px 1px 2px var(--shadow); } .article > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .article:hover { box-shadow: 8px 8px 10px var(--shadow); } .article-header { color: var(--dark-color); font-size: 1.4rem; line-height: 1.5; bottom: 0; right: 5px; position: absolute; margin-top: 5px; } .article-category { position: absolute; top: 0; left: 0; z-index: 1; max-width: 40%; max-height: 160px; overflow: hidden; opacity: 0; transition: .3s; } .article-category-label { line-height: 1.7; margin-bottom: 5px; display: inline-block; background: #22222288; transition: .3s; } .article-category-label:first-child { border-top-left-radius: 5px; } .article-category-label a { display: block; color: #fff!important; font-weight: normal; font-size: 1.4rem; padding: 3px 5px 1px 4px; } .article-category-label:hover { background: var(--brand-light); } .article-category-label a:hover { color: var(--brand-font)!important; } .article-img { transition: .3s; } .article-img img { position: absolute; object-fit: cover; width: 40%; height: 100%; border-radius: 5px 0 0 5px; } .article-title { display: flex; font-size: 1.82rem; font-weight: normal; margin-bottom: 5px; overflow: hidden; height: 3.45em; line-height: 1.4; padding-top: .5em; left: 41%; width: 58%; position: relative; } .article-title::before { content: "\25A0"; padding-right: 2px; color: var(--brand); transition: .3s; } .article-snippet { font-size: 1.4rem; line-height: 1.5; height: 6em; overflow: hidden; color: var(--dark-color); left: 42%; width: 57%; position: relative; } @media (max-width: 600px ) { .article { height: 130px; } .article-title { font-size: 1.6rem; height: 5.8em; left: 47%; width: 52%; } .article-snippet { display: none; } .article-img img { width: 45%; } .article-category { opacity: 1; max-width: 45%; max-height: 120px; } } .article:hover .article-title::before { color: var(--sub-brand); } .article:hover .article-img { opacity: .7; } .article:hover .article-category { opacity: 1; } /*]]>*/<b:else/>/*<![CDATA[*/ /*==== 1 Column Layout ====*/ #main-content { position: relative; margin: 3em auto 0; padding: 1em; max-width: 900px; } #sub-content { display: flex; margin: 5em auto 0; max-width: 1300px; } [id^="sub-item"] { flex-basis: 31%; margin-left: auto; margin-right: auto; } @media(max-width :1024px) { #sub-content { flex-direction: column; margin: 5em .5em 0; } [id^="sub-item"] { flex-basis: 100%; margin: 0; } } /*==== Single Page ====*/ .post-body p { margin: 2em 0; } .post-body a { color: var(--link); text-decoration: underline; } .post-body a:hover { color: var(--color); } .post-body { line-height: 1.9; margin-top: 2em; } /*==== List Style ====*/ .post-body ol, .post-body ul { margin-left: 1em; } .post-body ol p, .post-body ul p { margin-top: 1em; } .post-body ol { color: var(--color); } .post-body > ul > li, .post-body > ol > li, .list-movie li { margin-bottom: 1em; padding: 0; line-height: 1.6; } .post-body > ul { list-style: none; } .post-body > ul > li { text-indent: -19px; } .post-body > ul > li::before { content: "\25CF"; color: var(--brand); padding-right: 2px; vertical-align: 4%; } .post-body > ul > li > ul > li, .post-body > ol > li > ul > li { list-style: disc; margin-left: 1.4em; padding-left: 0; } .post-body > ol > li > ul > li { margin-left: -6px; } .post-body ol { counter-reset: li; list-style: none; } .post-body ol li { position: relative; padding-left: 1.2em; margin-left: -1.2em; } .post-body ol li::before { display: inline-block; position: absolute; top: 0; left: 0; font-size: 1.2rem; font-weight: bold; color: var(--brand-font); line-height: 2; text-align: center; margin-left: -10px; background: var(--brand); min-width: 2em; border-radius: 50%; counter-increment: li; content: counter(li); } .post-body ol li ul li::before, .post-body ol li ol li::before, .post-body ul li ol li::before { display: none; } .post-body ul li ol li, .post-body ol li ol li { list-style-type: decimal; margin-left: -8px; padding-left: 0; } .post-body ul li ol li { padding-left: 1.4em; margin-left: 0; } .post-body > ul > li > ul > li, .post-body > ul > li > ol > li { text-indent: 0; padding-left: 0; margin-left: 0; } /*==== Post Image ====*/ .separator a { display: inline-block!important; padding: 0!important; } .separator img, .tr-caption-container { box-shadow: 5px 5px 8px var(--shadow); } .separator { margin: 2em 0; text-align: center; } .tr-caption-container { border-spacing: 0; margin: 1em auto; } .tr-caption { font-size: 1.4rem!important; color: var(--dark-color); padding: 3px; line-height: 1.5; word-break: break-all; text-align: center; } .tr-caption-container td a { padding: 0!important; } /*==== Post Header ====*/ #p-header { text-align: center; display: block; font-size: 1.4rem; margin: 1.5em 0 1em; color: var(--dark-color); } #p-header a:hover { color: var(--link); text-decoration: underline; } #p-header-title { text-align: center; font-size: 2.2rem; font-weight: normal; color: var(--color); margin-top: .5em; margin-left: -8px; line-height: 1.3; } #p-header-title::before { content: "\25A0"; padding-right: 2px; color: var(--brand); } /*==== Poat Label ====*/ #p-category { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 0 5px 3px; } .p-category-label { font-size: 1.9rem; line-height: 1; border-radius: 5px; background: var(--brand); color: var(--brand-font); padding: 6px; font-weight: normal; transition: .3s; display: inline-block; margin-bottom: 5px; } .p-category-label:hover { color: var(--brand-font)!important; background: var(--brand-light); } #p-hashtag { display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 1.5em; } .p-hashtag-label { font-size: 1.5rem; margin: 0 3px 5px; color: var(--color)!important; border: solid var(--dark-color) 1px; border-radius: 5px; line-height: 1; padding: 3px; transition: .2s; } .p-hashtag-label:hover { border-color: var(--sub-brand); background: var(--sub-brand); color: var(--sub-brand-font)!important; } #p-hashtag svg.tag-icon { font-size: 2.2rem; fill: var(--dark-color); margin: 3px 0 0 -22px; } #p-hashtag svg.tag-icon:not(:first-child) { display: none; } /*==== Headings ====*/ .post-body h2 { color: var(--brand-font); font-size: 2rem; padding: 13px 10px 12px; margin: 4.5em 0 1em; background: linear-gradient(to bottom, var(--brand), var(--brand-light)); border-radius: 3px; line-height: 1.2; } .post-body h3 { font-size: 1.8rem; line-height: 1.2; padding: 10px 5px 9px; margin: 4em 0 1em; border-left: solid 10px var(--brand); border-radius: 3px 0 0 3px; display: flex; flex-direction: column; } .post-body h3::after { content: ""; height: 4px; margin: 8px 0 -9px -6px; background: linear-gradient(to right, var(--brand), rgba(255, 255, 255, 0)); } .post-body h3 span { flex-direction: row; } .post-body h4 { font-size: 1.6rem; line-height: 1.2; padding: 10px 5px 9px; margin: 5em 0 1em; border-left: solid 8px var(--brand); border-radius: 3px 0 0 3px; } /*==== Blockquote ====*/ blockquote { margin: 2em 0; padding: 1em; background: var(--dark-bg); font-style: italic; border-radius: 8px; border-left: 8px solid var(--brand); } blockquote cite { display: block; text-align: right; margin: 1em 0 -.5em; font-style: italic; font-size: 1.4rem; } blockquote a { color: var(--blue-color)!important; } blockquote a:hover { color: inherit!important; } /*==== Embeded Content ====*/ .twitter-timeline { margin: 0 auto; } .instagram-media, .instagram-media-registered { margin: auto!important; width: 540px!important; max-width: 100%!important; } audio { width: 500px; max-width: 100%; outline: none; } iframe, video { display: block; margin: 0 auto; } iframe[src*="youtube.com"] { max-width: 100%; height: 100%; aspect-ratio: 16 / 9; } /*==== Quick Edit ====*/ .item-control a:not(.comment-delete) { color: var(--sub-brand-font); padding: 4px 14px; line-height: 1; position: fixed; right: 5px; top: 3px; z-index: 10; opacity: .9; background: var(--sub-brand); border-radius: 5px; } .item-control a:hover { opacity: 1; } @media (max-width: 1024px ) { .item-control a:not(.comment-delete) { top: 35px; } } /*==== Table ====*/ table:not(#bp_toc table):not([class]) { max-width: 100%; border: solid 1px #888; border-collapse: collapse; margin-top: .5em; line-height: 1.5; } table:not(#bp_toc table):not([class]) tbody tr td { border:solid 1px #888; padding: .3em; } table:not(#bp_toc table):not([class]) tbody tr:hover { background: var(--dark-bg); } table:not(#bp_toc table):not([class]) th { border:solid 1px #ccc; text-align: center; color: var(--brand-font); background: var(--brand); padding: .3em; font-weight: normal; } /*==== Auto TOC ====*/ #toc { background: var(--dark-bg); border-radius: 8px; padding: .5em; margin: 5em auto 0; max-width: 600px; display: table; position: relative; } .toc-title { text-align: center; font-size: 2rem; margin: 0; } .toc-title:focus { outline: none; } .toc-title:hover { cursor: pointer; } .toc-container { padding: 1em !important; margin: 0 !important; } .toc-container, .toc-container ul { counter-reset: ul-counter; list-style: none; } .toc-container li { padding: 0; } .toc-container li a { display: flex; padding: 8px 4px 4px; border-radius: 3px; color: var(--color)!important; text-decoration: none!important; line-height: 1.2; } .toc-container li a:hover { background: var(--brand); color: var(--brand-font)!important; } .toc-container li a:hover::before { color: var(--brand-font)!important; } .toc-container li a:hover svg { fill: #fff; } .toc-container li a::before { counter-increment: ul-counter; content: counters(ul-counter,"-"); color: var(--link); padding-right: .5em; white-space: nowrap; font-weight: bold; } .toc-container > li > ul > li { font-size: 1.5rem; margin-left: -12px; } .toc-title .angle { position: absolute; right: .5em; top: 5px; font-size: 3.5rem; color: var(--dark-color); transition: .2s; } #toc[open] .angle { transform: rotate(180deg); } #backtoc { position: fixed; right: 0; bottom: 9em; padding: 8px; border-radius: 5px; background: rgba(0, 0, 0, .2); z-index: 1; transition: .2s; } #backtoc:hover { background: rgba(0, 0, 0, .1); } #backtoc svg { fill: var(--dark-color); font-size: 3rem; vertical-align: -20%; } @media (max-width:1024px) { #backtoc { bottom: 2em; } } /*==== Comment ====*/ #comments { margin: 4em 0; } .comment-block { margin-top: 1em; padding-top: 35px; } .comment-timestamp a:hover { color: var(--link)!important; text-decoration: underline; } .comment-body a { color: var(--blue-color); text-decoration: underline; } #comments-block { margin-left: 0!important; } .comment-author img { border-radius: 50%; width: 50px; height: 50px; margin-right: .5em; object-fit: cover; } .comment-timestamp { float: right; position: relative; right: .5em; bottom: 42px; font-size: 1.5rem; color: var(--dark-color); } .comment-timestamp a { font-weight: normal; color: inherit!important; } a.comment-delete { border-radius: 3px; padding: 0 3px; } a.comment-delete:hover { color: #fff!important; background: red; } .comment-author { display: flex; align-items: center; line-height: 1; margin: 0 0 1em 3px; font-weight: bold; } .comment-author a:hover { color: var(--link)!important; } .comment-body { padding: 1em 1em 2em!important; margin-right: 0; border-radius: 8px; position: relative; background: var(--dark-bg); margin-bottom: 1em; line-height: 1.7; } .comment-body::after { content: ""; position: absolute; top: -12px; left: 26px; margin-left: -8px; border-right: 10px solid transparent; border-left: 10px solid transparent; border-bottom: 12px solid var(--dark-bg); } .comment-form p { margin-bottom: 3em; } .comment-page-link, .comment-form-jump { text-decoration: none!important; text-align: center; font-size: 1.6rem; color: var(--brand-font)!important; display: block; margin-top: 1em; background: var(--brand); border-radius: 5px; padding: 5px; line-height: 1.4; } .comment-page-link:hover, .comment-form-jump:hover { text-decoration: none!important; background: var(--brand-light); color: var(--brand-font)!important; } p.deleted { font-style: italic; color: var(--dark-color); } #embed-form-button { text-align: center; font-size: 1.6rem; display: block; margin: 3em 0 2em; background: var(--brand); border-radius: 5px; padding: 5px; transition: .3s; position: relative; color: var(--brand-font); } #embed-form-button:hover { cursor: pointer; background: var(--brand-light); } .comment-page-link, .comment-form-jump, #embed-form-button { margin-left: auto; margin-right: auto; max-width: 100%; width: 400px; } iframe.embed-form { width: 100%; height: 290px; border-radius: 8px; margin-top: 2em; } .comment-message { display: block; text-align: center; margin-top: 3em; line-height: 1.7; } .comment-message a { color: var(--link)!important; text-decoration: underline!important; } .comment-message a:hover { color: var(--color)!important; } .embed-form { display: none; } input[type="checkbox"]#embed-form-open { display: none; } #embed-form-open:checked ~ .embed-form { display: inline; } #embed-form-open:checked ~ #embed-form-button { display: none; } /*==== Code Preview ====*/ pre { position: relative; white-space: pre-wrap; word-break: break-all; background: var(--dark-bg); color: var(--color); margin: 3em 0; padding: .5em; text-indent: 0; line-height: 1.3; overflow: auto; max-height: 500px; } /*==== Top/Bottom Scroll Button ====*/ #scroll-button svg { transition: .5s; fill: currentColor; } #pagetop, #pagebottom { display: none; position: fixed; right: 0; z-index: 1; color: var(--dark-color); opacity: .7; } #pagetop:hover, #pagebottom:hover { opacity: 1; } #pagetop { bottom: 70px; margin-bottom: .5em; } #pagetop svg { transform: rotate(180deg); } #pagebottom { bottom: 20px; margin-top: .5em; } #pagetop svg, #pagebottom svg { height: 40px; width: 50px; } #scroll-button svg:hover { cursor: pointer; } @media (max-width: 1024px) { #scroll-button { display: none; } } /*]]>*/</b:if><b:if cond='data:view.isMultipleItems and !data:view.search.query and !data:view.isArchive'>/*<![CDATA[*/ /*==== Numbered Pagenation ====*/ .showpageNum a, .showpagePoint, .showpage a { font-weight: bold; font-family: arial; line-height: 1; padding: .5em 0; min-width: 2em; margin: 0 3px 5px; border-radius: 3px; display: inline-block; } .showpageNum a, .showpage a { color: var(--color); } .showpagePoint { color: var(--brand-font); background: var(--brand); } .showpageNum a:hover, .showpage a:hover { color: var(--brand-font); background: var(--brand); }#main-content { position: relative; } .showpageOf { position: absolute; top: -2.5em; left: calc(50% - 100px); background: var(--dark-bg); padding: 2px 1em; border-radius: 20px; width: 200px; } #page-num { font-weight: bold; } /*]]>*/</b:if><b:if cond='data:view.isHomepage'>/*<![CDATA[*/ .showpageOf { display: none; } /*]]>*/</b:if><b:if cond='data:view.isPost'>/*<![CDATA[*/ /*==== SNS Share Buttons ====*/ .sns-share-buttons { width: 350px; margin: 4em auto; display: flex; justify-content: space-around; max-width: 100%; } .sns-share-buttons span { text-align: center; font-size: 2.4rem; display: block; padding-top: 9px; line-height: 1; border-radius: 5px; height: 40px; width: 40px; transition: .3s; color: #fff; } .sns-share-buttons span:hover { transform: scale(1.1); } .svg-facebook-f { height: 32px; width: 32px; margin-top: -1px; } .sns-share-buttons span:hover { cursor: pointer; } .tweet { background: #000; } .facebook { background: #1877f2; } .line { background: #00b900; } .linkedin { background: #0a66c2; } .pocket { background: #ef4056; } .copy_btn { background: slategray; } .sns-share-buttons .copy_btn { font-family: arial; font-size: .9rem; } .copy_btn::before { content: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71 M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>'); } /*== Post Author Profile ==*/ #author-profile { background: var(--dark-bg); border-top-right-radius: 8px; padding: 8px; margin-bottom: 2em; min-height: 116px; } .author-img img, .default-img svg { position: absolute; width: 100px; height: 100px; object-fit: contain; border-radius: 5px; transition: .3s } .author-img img:hover, .default-img svg:hover { opacity: .8; } .author-name a { font-weight: bold; font-size: 1.7rem; margin-left: 110px; } .author-name a:hover { color: var(--link); text-decoration: underline; } .author-desc { display: block; font-size: 1.4rem; margin-left: 110px; margin-top: .5em; } .author-desc a { color: var(--link); } .author-desc a:hover { color: var(--color); text-decoration: underline; } /*==== Related Poats ====*/ .rp-container { margin-top: 2em; display: flex; flex-wrap: wrap; justify-content: space-between; } #related-posts a { position: relative; flex-basis: 49.33%; height: 100px; overflow: hidden; margin: 0 0 10px; border-radius: 6px; transition: .3s; box-shadow: 1px 1px 2px var(--shadow); } .related-img img { object-fit: cover; margin: 0; float: left; width: 42%; height: 100px; padding-right: 5px; } .related-date { position: absolute; right: 5px; bottom: 0; font-size: 1.4rem; color: var(--dark-color); } .related-title { padding-top: 3px; padding-right: 5px; font-size: 1.4rem; line-height: 1.3; height: 5.2em; overflow: hidden; display: flex; } .related-title::before { content: "\25A0"; color: var(--brand); padding-right: 2px; transition: .3s; } #related-posts a:hover { box-shadow: 8px 8px 10px var(--shadow); } #related-posts a:hover .related-title::before { color: var(--sub-brand); } @media (max-width:600px) { #related-posts a { flex-basis: 100%; } } /*]]>*/</b:if><b:if cond='data:view.isHomepage or data:view.isSearch or data:view.isPost or data:view.isArchive and !data:view.isPage'>/*<![CDATA[*/ /*==== Pagenation ====*/ #blog-pager, .Pager { text-align: center; overflow: hidden; margin: 2em 0; } #blog-pager-older-link a, #no-older-link, .Pager-next { float: right; border-radius: 3px 0 0 3px; clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%); -webkit-clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%); } #blog-pager-newer-link a, #no-newer-link, .Pager-prev { float: left; border-radius: 0 3px 3px 0; clip-path: polygon(0 50%, 13px 0, 100% 0, 100% 100%, 13px 100%); -webkit-clip-path: polygon(0 50%, 13px 0, 100% 0, 100% 100%, 13px 100%); } #blog-pager-newer-link a, #blog-pager-older-link a, #no-newer-link, #no-older-link, .Pager-prev, .Pager-next { display: grid; align-items: center; text-align: center; padding: 5px 1em; height: 3.2em; background: var(--brand); color: var(--brand-font); font-size: 1.5rem; line-height: 1.4; transition: .3s; width: 100%; max-width: 49%; } #no-newer-link, #no-older-link { color: var(--color); background: var(--dark-bg); } #blog-pager-newer-link a:hover, #blog-pager-older-link a:hover, .Pager-prev:hover, .Pager-next:hover { background: var(--brand-light); } /*]]>*/</b:if><b:if cond='data:view.isPost'>/*<![CDATA[*/ @media (max-width: 768px) { #blog-pager-newer-link a, #blog-pager-older-link a, #no-newer-link, #no-older-link { max-width: 100%; margin: 5px 0; } #blog-pager-newer-link a, #no-newer-link { text-align: left; } #blog-pager-older-link a, #no-older-link { text-align: right; } } /*]]>*/</b:if><b:if cond='data:view.search.query'>/*<![CDATA[*/ /*==== Status Message (Search Query) ====*/ .navmsg a { color: var(--link); line-height: 1.9; } .navmsg b { font-size: 1.9rem; } .navmsg a:hover { color: var(--color); text-decoration: underline; } .navmsg a::before { content: "\A"url('data:image/svg+xml;utf-8,<!--! Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" height="17" width="17" style="margin-top:2px"><path d="M137.4 41.4c12.5-12.5 32.8-12.5 45.3 0l128 128c9.2 9.2 11.9 22.9 6.9 34.9s-16.6 19.8-29.6 19.8H32c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9l128-128zm0 429.3l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8 29.6-19.8H288c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-128 128c-12.5 12.5-32.8 12.5-45.3 0z" fill="%23aaa"/></svg>'); white-space: pre; } .navmsg a:last-child { display: none; } .navmsg { border-radius: 6px; display: block; text-align: center; margin-bottom: .5em; line-height: 1.5; } /*]]>*/</b:if><b:if cond='data:view.isArchive'>/*<![CDATA[*/ /*==== Status Message (Archive Page) ====*/ .navmsg a:last-child { display: none; } .navmsg { border-radius: 6px; display: block; text-align: center; margin-bottom: .5em; line-height: 1.5; } .navmsg:nth-of-type(2) { background: none; } /*]]>*/</b:if><b:if cond='data:view.isLabelSearch'>/*<![CDATA[*/ /*==== Status Mesaage (Label Page) ====*/ .navmsg a:last-child { display: none; } .navmsg b { display: inline-block; border: 1px solid var(--dark-color); border-radius: 5px; padding: 0 5px; } .navmsg { border-radius: 6px; display: block; text-align: center; margin-bottom: .5em; line-height: 1.5; } /*]]>*/</b:if><b:if cond='data:view.isError'>/*<![CDATA[*/ /*==== 404 ====*/ #sub-content, #FOOTER .widget:not(#HTML0), #MAIN .widget:not(#Blog1) { display: none; } #notfound { font-size: 2rem; text-align: center; margin: 5em 0; } #notfound a { color: var(--link); font-weight: bold; } #notfound a:hover, .home a:hover { color: var(--color)!important; } .home { text-align: center; margin-bottom: 2em; font-size: 2rem; font-weight: bold; color: var(--link)!important; } /*]]>*/</b:if>/*<![CDATA[*/ /*==== User Custom CSS here ====*/ /*]]>*/</style> <noscript> <style>/*<![CDATA[*/ .Blog, nav, #sub-content, #footer-attribution, #FeaturedPost1, #FOOTER .widget:not(#HTML0) { display: none; } #noscript-msg { font-size: 2.2rem; line-height:1.5; text-align: center; margin-top: 200px; } /*]]>*/</style> </noscript> <b:else/> <b:template-skin><![CDATA[ body#layout { background: #fff; } #layout #sub-item1, #layout #sub-item2, #layout #sub-item3 { width: 33.3%; } #layout #sub-content { display: flex; flex-direction: row; } body#layout .section h4 { background: dodgerblue; color: #fff; text-align: center; padding: .5em; border-radius: 5px; } body#layout::before { background: dodgerblue; border-radius: 5px; color: #fff; font-weight: bold; content: "F-light v1.35-TD-en"; display: block; width: 250px; padding: .5em; margin: -4.5em auto 2em; } body#layout .visibility .layout-widget-state.visible { background-image: url(https://1.bp.blogspot.com/-aPoC3YxQo6g/YOOeDVSsJqI/AAAAAAAAAFM/oyvPLSJVIRQpAu-g0gZL89g5Caq4_4DeQCLcBGAsYHQ/s48/visibility_on.png); background-size: 24px; } body#layout .visibility .layout-widget-state.not-visible { background-image: url(https://1.bp.blogspot.com/-x_kkTMRQfHs/YOOeMUjTE8I/AAAAAAAAAFQ/RRj6YLBNuMEHwTB_81304fCxy8dl7h46gCLcBGAsYHQ/s48/visibility_off.png); background-size: 24px; opacity: 1; } body#layout .visibility .editlink.icon { background-size: 18px; } body#layout .visibility .editlink.icon { backgrond-size: 18px; border-radius: 20px; padding: 3px; } body#layout .visibility .editlink:hover { background-image: url(https://1.bp.blogspot.com/--z1wepFalfQ/YOObl8avCFI/AAAAAAAAAE8/Z-iC0j0LLpo7u2ZpHvW0hGaHhBOvVYYaQCLcBGAsYHQ/s48/edit.png); background-color: dodgerblue; } ]]></b:template-skin> </b:if> </head> <body> <!-- SVG --> <svg style='display:none' xmlns='http://www.w3.org/2000/svg'> <defs> <!--! Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --> <symbol id='house' viewbox='0 0 16 16'><path d='M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z'/></symbol> <symbol id='svg-angles-down' viewBox='0 0 448 512'><path d='M246.6 470.6c-12.5 12.5-32.8 12.5-45.3 0l-160-160c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L224 402.7 361.4 265.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-160 160zm160-352l-160 160c-12.5 12.5-32.8 12.5-45.3 0l-160-160c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L224 210.7 361.4 73.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3z'/></symbol> <symbol id='svg-comment-dots' viewbox='0 0 512 512'><path d='M144 208C126.3 208 112 222.2 112 239.1C112 257.7 126.3 272 144 272s31.1-14.25 31.1-32S161.8 208 144 208zM256 207.1c-17.75 0-31.1 14.25-31.1 32s14.25 31.1 31.1 31.1s31.1-14.25 31.1-31.1S273.8 207.1 256 207.1zM368 208c-17.75 0-31.1 14.25-31.1 32s14.25 32 31.1 32c17.75 0 31.99-14.25 31.99-32C400 222.2 385.8 208 368 208zM256 31.1c-141.4 0-255.1 93.12-255.1 208c0 47.62 19.91 91.25 52.91 126.3c-14.87 39.5-45.87 72.88-46.37 73.25c-6.624 7-8.373 17.25-4.624 26C5.818 474.2 14.38 480 24 480c61.49 0 109.1-25.75 139.1-46.25c28.87 9 60.16 14.25 92.9 14.25c141.4 0 255.1-93.13 255.1-207.1S397.4 31.1 256 31.1zM256 400c-26.75 0-53.12-4.125-78.36-12.12l-22.75-7.125L135.4 394.5c-14.25 10.12-33.87 21.38-57.49 29c7.374-12.12 14.37-25.75 19.87-40.25l10.62-28l-20.62-21.87C69.81 314.1 48.06 282.2 48.06 240c0-88.25 93.24-160 207.1-160s207.1 71.75 207.1 160S370.8 400 256 400z'/></symbol> <symbol id='svg-clock' viewbox='0 0 512 512'><path d='M232 120C232 106.7 242.7 96 256 96C269.3 96 280 106.7 280 120V243.2L365.3 300C376.3 307.4 379.3 322.3 371.1 333.3C364.6 344.3 349.7 347.3 338.7 339.1L242.7 275.1C236 271.5 232 264 232 255.1L232 120zM256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0zM48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48C141.1 48 48 141.1 48 256z'/></symbol> <symbol id='svg-folder' viewbox='0 0 512 512'><path d='M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H298.5c-17 0-33.3-6.7-45.3-18.7L226.7 50.7c-12-12-28.3-18.7-45.3-18.7H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z'/></symbol> <b:if cond='data:view.isSingleItem'> <symbol id='verified' viewBox='0 0 32 32'><circle cx='16' cy='15.9' fill='dodgerblue' r='15.8'/><polygon fill='#fff' points='23,9 13.2,18.8 9,14.5 6.4,17 10.7,21.3 13.2,23.8 15.8,21.3 25.6,11.5 '/></symbol> <symbol fill='var(--brand-font)' id='svg-comment-medical' viewBox='0 0 512 512'><path d='M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3 0 0 0 0 0 0 0 0c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zM224 160c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v48h48c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H288v48c0 8.8-7.2 16-16 16H240c-8.8 0-16-7.2-16-16V272H176c-8.8 0-16-7.2-16-16V224c0-8.8 7.2-16 16-16h48V160z'/></symbol> <symbol id='trash' viewBox='0 0 16 16'><path d='M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5ZM11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0H11Zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5h9.916Zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z'/></symbol> </b:if> <b:if cond='data:view.isPost'> <symbol id='pen' viewBox='0 0 512 512'><path d='M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z'/></symbol> <symbol id='svg-twitter' viewBox='0 0 1200 1227'><path d='M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z'/></symbol> <symbol id="linkedin" viewBox="0 0 448 512"><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"/></symbol> <symbol id='linesvg' viewBox='0 0 315 300'><path d='M295.838,115.347l0.003-0.001l-0.092-0.76c-0.001-0.013-0.002-0.023-0.004-0.036c-0.001-0.011-0.002-0.021-0.004-0.032 l-0.344-2.858c-0.069-0.574-0.148-1.228-0.238-1.974l-0.072-0.594l-0.147,0.018c-3.617-20.571-13.553-40.093-28.942-56.762 c-15.317-16.589-35.217-29.687-57.548-37.878c-19.133-7.018-39.434-10.577-60.337-10.577c-28.22,0-55.627,6.637-79.257,19.193 C23.289,47.297-3.585,91.799,0.387,136.461c2.056,23.111,11.11,45.11,26.184,63.621c14.188,17.423,33.381,31.483,55.503,40.66 c13.602,5.642,27.051,8.301,41.291,11.116l1.667,0.33c3.921,0.776,4.975,1.842,5.247,2.264c0.503,0.784,0.24,2.329,0.038,3.18 c-0.186,0.785-0.378,1.568-0.57,2.352c-1.529,6.235-3.11,12.683-1.868,19.792c1.428,8.172,6.531,12.859,14.001,12.86 c0.001,0,0.001,0,0.002,0c8.035,0,17.18-5.39,23.231-8.956l0.808-0.475c14.436-8.478,28.036-18.041,38.271-25.425 c22.397-16.159,47.783-34.475,66.815-58.17C290.172,175.745,299.2,145.078,295.838,115.347z M92.343,160.561H66.761 c-3.866,0-7-3.134-7-7V99.865c0-3.866,3.134-7,7-7c3.866,0,7,3.134,7,7v46.696h18.581c3.866,0,7,3.134,7,7 C99.343,157.427,96.209,160.561,92.343,160.561z M119.03,153.371c0,3.866-3.134,7-7,7c-3.866,0-7-3.134-7-7V99.675 c0-3.866,3.134-7,7-7c3.866,0,7,3.134,7,7V153.371z M182.304,153.371c0,3.033-1.953,5.721-4.838,6.658 c-0.712,0.231-1.441,0.343-2.161,0.343c-2.199,0-4.323-1.039-5.666-2.888l-25.207-34.717v30.605c0,3.866-3.134,7-7,7 c-3.866,0-7-3.134-7-7v-52.16c0-3.033,1.953-5.721,4.838-6.658c2.886-0.936,6.045,0.09,7.827,2.545l25.207,34.717V99.675 c0-3.866,3.134-7,7-7c3.866,0,7,3.134,7,7V153.371z M233.311,159.269h-34.645c-3.866,0-7-3.134-7-7v-26.847V98.573 c0-3.866,3.134-7,7-7h33.57c3.866,0,7,3.134,7,7s-3.134,7-7,7h-26.57v12.849h21.562c3.866,0,7,3.134,7,7c0,3.866-3.134,7-7,7 h-21.562v12.847h27.645c3.866,0,7,3.134,7,7S237.177,159.269,233.311,159.269z' fill='#fff'/></symbol> <symbol id='tag-icon' viewBox='0 0 16 16'><path d='M2 1a1 1 0 0 0-1 1v4.586a1 1 0 0 0 .293.707l7 7a1 1 0 0 0 1.414 0l4.586-4.586a1 1 0 0 0 0-1.414l-7-7A1 1 0 0 0 6.586 1H2zm4 3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'/></symbol> <symbol id='svg-arrows-rotate' viewbox='0 0 512 512'><path d='M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160H336c-17.7 0-32 14.3-32 32s14.3 32 32 32H463.5c0 0 0 0 0 0h.4c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v51.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1V448c0 17.7 14.3 32 32 32s32-14.3 32-32V396.9l17.6 17.5 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.7c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352H176c17.7 0 32-14.3 32-32s-14.3-32-32-32H48.4c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z'/></symbol> <symbol id='svg-facebook-f' viewBox='0 0 320 512'><path d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/></symbol> <symbol id='svg-get-pocket' viewbox='0 0 448 512'><path d='M407.6 64h-367C18.5 64 0 82.5 0 104.6v135.2C0 364.5 99.7 464 224.2 464c124 0 223.8-99.5 223.8-224.2V104.6c0-22.4-17.7-40.6-40.4-40.6zm-162 268.5c-12.4 11.8-31.4 11.1-42.4 0C89.5 223.6 88.3 227.4 88.3 209.3c0-16.9 13.8-30.7 30.7-30.7 17 0 16.1 3.8 105.2 89.3 90.6-86.9 88.6-89.3 105.5-89.3 16.9 0 30.7 13.8 30.7 30.7 0 17.8-2.9 15.7-114.8 123.2z'/></symbol> </b:if> <b:if cond='data:view.isPost or data:view.isArchive'> <symbol id='svg-calendar-days' viewBox='0 0 448 512'><path d='M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 248H128V192H48V248zM48 296V360H128V296H48zM176 296V360H272V296H176zM320 296V360H400V296H320zM400 192H320V248H400V192zM400 408H320V464H384C392.8 464 400 456.8 400 448V408zM272 408H176V464H272V408zM128 408H48V448C48 456.8 55.16 464 64 464H128V408zM272 192H176V248H272V192z'/></symbol> </b:if> </defs> </svg> <!-- Header --> <header> <b:section id='HEADER' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='F-light (Header)' type='Header' version='2' 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-img'> <b:include cond='data:imagePlacement in {"REPLACE", "BEFORE_DESCRIPTION"}' name='image'/> <b:include cond='data:imagePlacement not in {"REPLACE", "BEFORE_DESCRIPTION"}' name='header-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-img"}' name='responsiveImageStyle'/> </b:if> </b:includable> <b:includable id='description'> <b:if cond='data:description'> <p id='header-desc'><data:description/></p> </b:if> </b:includable> <b:includable id='header-title'> <b:if cond='data:view.isSingleItem'> <p id='header-title'><a expr:href='data:blog.homepageUrl'><data:blog.title/></a></p> <b:elseif cond='data:view.isHomepage'/> <h1 id='header-title'><data:blog.title/></h1> <b:else/> <h1 id='header-title'><a expr:href='data:blog.homepageUrl'><data:blog.title/></a></h1> </b:if> </b:includable> <b:includable id='image'> <a class='header-image-wrapper' expr:href='data:blog.homepageUrl'><b:include data='{image: data:image, altText: data:blog.title.escaped, originalWidth: data:width, originalHeight: data:height, imageSizes: [360,480,640,800,1000,1200,1600]}' name='responsiveImage'/></a> </b:includable> <b:includable id='title'/> </b:widget> </b:section> </header> <!-- Nav Bar --> <nav> <div id='nav'> <!-- Nav Button --> <input id='nav-button' type='checkbox'/> <label for='nav-button' id='nav-label'><span/></label> <!-- Scroll Button for Mobile --> <div id='mobile-jump'> <span id='m-pagebottom'><svg aria-label='scroll to bottom' class='feather feather-arrow-down' fill='none' height='24' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><line x1='12' x2='12' y1='5' y2='19'/><polyline points='19 12 12 19 5 12'/></svg></span> <span id='m-pagetop'><svg aria-label='scroll to top' class='feather feather-arrow-up' fill='none' height='24' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><line x1='12' x2='12' y1='19' y2='5'/><polyline points='5 12 12 5 19 12'/></svg></span> </div> <b:if cond='!data:view.isHomepage'> <!-- Home Button for Mobile --> <a expr:href='data:blog.homepageUrl' id='mobile-home'><svg aria-label='Home' class='svg house'><use href='#house'/></svg></a> </b:if> <!-- Search Box --> <div id='search-wrap'><form action='/search' class='search-box-form' method='get'> <input class='search-box-text' expr:value='data:view.search.query.escaped' name='q' placeholder='Search' required='required' type='search'/><button class='search-box-submit' title='Search This Blog'><svg aria-label='Search' class='svg-icon-24'><use href='/responsive/sprite_v1_6.css.svg#ic_search_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'/></svg></button></form></div> <!-- Mode Switch: https://qiita.com/whike_chan/items/3fff6d0c78fa74253d4d --> <div id='mode-switch'> <input id='js_mode_toggle' type='checkbox'/> <label class='switch-mode' for='js_mode_toggle' id='js_rotate'> <span id='switch-mode-dark' title='Switch to Dark Mode'><svg aria-label='Dark Mode' class='feather feather-moon' fill='none' height='24' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/></svg></span> <span id='switch-mode-light' title='Switch to Light Mode'><svg aria-label='Light Mode' class='feather feather-sun' fill='none' height='24' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='5'/><line x1='12' x2='12' y1='1' y2='3'/><line x1='12' x2='12' y1='21' y2='23'/><line x1='4.22' x2='5.64' y1='4.22' y2='5.64'/><line x1='18.36' x2='19.78' y1='18.36' y2='19.78'/><line x1='1' x2='3' y1='12' y2='12'/><line x1='21' x2='23' y1='12' y2='12'/><line x1='4.22' x2='5.64' y1='19.78' y2='18.36'/><line x1='18.36' x2='19.78' y1='5.64' y2='4.22'/></svg></span> </label> </div> <script>/*<![CDATA[*/ const checkToggle=document.getElementById("js_mode_toggle"),rotateIcon=document.getElementById("js_rotate"),isLight=window.matchMedia("(prefers-color-scheme:light)").matches,keyLocalStorage="modekey",localTheme=localStorage.getItem("modekey"),twTheme=document.getElementById("twth");let nowRotate=0;function changeMode(e){"light"===e?(document.documentElement.setAttribute("data-theme-mode","light"),twTheme.setAttribute("content","light"),checkToggle.checked=!0):"dark"===e&&(document.documentElement.setAttribute("data-theme-mode","dark"),twTheme.setAttribute("content","dark"),checkToggle.checked=!1)}function rotateInfinite(){nowRotate+=180,rotateIcon.style.transform="rotate("+nowRotate+"deg)"}"light"===localTheme?(rotateInfinite(),changeMode("light")):"dark"===localTheme?changeMode("dark"):isLight&&(rotateInfinite(),changeMode("light")),checkToggle.addEventListener("change",function(e){rotateInfinite(),e.target.checked?(changeMode("light"),localStorage.setItem("modekey","light")):(changeMode("dark"),localStorage.setItem("modekey","dark"))}) /*]]>*/</script> <!-- Page List --> <aside id='nav-content'> <b:section id='NAVIGATION' maxwidgets='1' showaddelement='no'> <b:widget id='PageList1' locked='true' title='Nav Menu' type='PageList' version='2' visible='true'> <b:widget-settings> <b:widget-setting name='pageListJson'><![CDATA[{"link0":{"href":"/","position":0,"title":"HOME"}}]]></b:widget-setting> <b:widget-setting name='homeTitle'>Home</b:widget-setting> </b:widget-settings> <b:includable id='main'> <b:include name='content'/> </b:includable> <b:includable id='content'> <b:include name='pageList'/> </b:includable> <b:includable id='overflowButton'/> <b:includable id='overflowablePageList'/> <b:includable id='pageLink'> <li><a expr:href='data:link.href'><data:link.title/></a></li> </b:includable> <b:includable id='pageList'> <ul> <b:loop values='data:links' var='link'> <b:include name='pageLink'/> </b:loop> </ul> </b:includable> </b:widget> </b:section> </aside> </div> </nav> <!-- Main Contents --> <main> <div id='main-content'> <b:section id='MAIN' showaddelement='yes'> <b:widget cond='data:view.isHomepage' id='FeaturedPost1' locked='false' title='FEATURED POST' type='FeaturedPost' version='2' visible='true'> <b:widget-settings> <b:widget-setting name='showSnippet'>true</b:widget-setting> <b:widget-setting name='showPostTitle'>true</b:widget-setting> <b:widget-setting name='postId'>0</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:if cond='data:title != ""'> <div class='title'><data:title/></div> </b:if> <b:include name='snippetedPosts'/> </b:includable> <b:includable id='blogThisShare'/> <b:includable id='bylineByName'/> <b:includable id='bylineRegion'/> <b:includable id='commentsLink'/> <b:includable id='commentsLinkIframe'/> <b:includable id='emailPostIcon'/> <b:includable id='facebookShare'/> <b:includable id='footerBylines'/> <b:includable id='googlePlusShare'/> <b:includable id='headerByline'/> <b:includable id='linkShare'/> <b:includable id='otherSharingButton'/> <b:includable id='platformShare'/> <b:includable id='postAuthor'/> <b:includable id='postCommentsLink'> <b:if cond='data:post.numberOfComments gt 0'> <span class='article-header-comments'><svg aria-label='Comment' class='svg svg-comment-dots' style='margin-right:3px'><use href='#svg-comment-dots'/></svg><data:post.numberOfComments/> |</span> </b:if> </b:includable> <b:includable id='postJumpLink'/> <b:includable id='postLabels'> <b:loop values='data:post.labels where(l => l.name not contains "#")' var='label'> <span class='article-category-label'><a expr:href='data:label.url'><svg aria-label='Category' class='svg' style='margin-right:3px;font-size:1.1rem'><use href='#svg-folder'/></svg><data:label.name/></a></span> </b:loop> </b:includable> <b:includable id='postLocation'/> <b:includable id='postReactions'/> <b:includable id='postShareButtons'/> <b:includable id='postSnippet'> <p class='feat-snippet'> <data:post.snippets.short/> </p> </b:includable> <b:includable id='postTimestamp'> <time class='article-header-date' expr:datetime='data:post.date.iso8601'><svg aria-label='Post Date' class='svg svg-clock' style='vertical-align:-10%;margin-right:3px'><use href='#svg-clock'/></svg><b:with value='data:post.date.month - 1' var='month'><b:with value='["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]' var='nom'><b:eval expr='data:nom[month]'/> <b:eval expr='data:post.date.day lt 10 ? "0" + data:post.date.day : data:post.date.day'/>, <data:post.date.year/></b:with></b:with></time> </b:includable> <b:includable id='sharingButton'/> <b:includable id='sharingButtonContent'/> <b:includable id='sharingButtons'/> <b:includable id='sharingButtonsMenu'/> <b:includable id='sharingPlatformIcon'/> <b:includable id='snippetedPostByline'/> <b:includable id='snippetedPostContent'> <div class='post-content'> <b:include cond='data:this.postDisplay.showFeaturedImage' name='snippetedPostThumbnail'/> <b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/> <b:include cond='data:this.postDisplay.showSnippet' data='post' name='postSnippet'/> <p class='article-header'> <b:include data='post' name='postCommentsLink'/> <b:include data='post' name='postTimestamp'/> </p> <p class='article-category'> <b:include data='post' name='postLabels'/> </p> </div> </b:includable> <b:includable id='snippetedPostThumbnail'> <b:if cond='data:post.featuredImage'> <div class='feat-img'> <img expr:alt='data:post.title.escaped' expr:src='resizeImage(data:post.featuredImage,320,"16:9")' height='180' width='320'/> </div> <script>/*<![CDATA[*/ const featImg=document.querySelector(".feat-img img");featImg.src=featImg.src.replace("-k-no-nu","-rw-e365").replace("lh3-testonly","lh3"); /*]]>*/</script> <b:else/> <div class='feat-img'> <img expr:alt='data:post.title.escaped' height='180' src='https://1.bp.blogspot.com/-GfyX-OxsrLs/Y61LhoAYYeI/AAAAAAAAZAw/4XCyYnYxDmM_8yRkGnytXaI2MkQ5-TP3gCNcBGAsYHQ/s320-rw-e365/noimage.png' width='320'/> </div> </b:if> </b:includable> <b:includable id='snippetedPostTitle'> <b:if cond='data:post.title != ""'> <h2 class='feat-title'><data:post.title/></h2> </b:if> </b:includable> <b:includable id='snippetedPosts'> <b:loop index='i' values='data:posts' var='post'> <article class='article'> <b:include name='snippetedPostContent'/><a expr:aria-label='data:post.title' expr:href='data:post.url'/> <a expr:href='data:post.url'><p id='feat-name'>RECOMMEND</p></a> </article> </b:loop> </b:includable> </b:widget> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='2' visible='true'> <b:widget-settings> <b:widget-setting name='commentLabel'/> <b:widget-setting name='showShareButtons'>false</b:widget-setting> <b:widget-setting name='authorLabel'/> <b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting> <b:widget-setting name='timestampLabel'/> <b:widget-setting name='reactionsLabel'/> <b:widget-setting name='showAuthorProfile'>true</b:widget-setting> <b:widget-setting name='style.layout'>1x1</b:widget-setting> <b:widget-setting name='showLocation'>false</b:widget-setting> <b:widget-setting name='showTimestamp'>true</b:widget-setting> <b:widget-setting name='postsPerAd'>1</b:widget-setting> <b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting> <b:widget-setting name='showDateHeader'>false</b:widget-setting> <b:widget-setting name='style.textcolor'>#ffffff</b:widget-setting> <b:widget-setting name='showCommentLink'>true</b:widget-setting> <b:widget-setting name='style.urlcolor'>#ffffff</b:widget-setting> <b:widget-setting name='postLocationLabel'>Location:</b:widget-setting> <b:widget-setting name='showAuthor'>false</b:widget-setting> <b:widget-setting name='style.linkcolor'>#ffffff</b:widget-setting> <b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting> <b:widget-setting name='showLabels'>false</b:widget-setting> <b:widget-setting name='postLabelsLabel'/> <b:widget-setting name='showBacklinks'>false</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' var='this'> <b:include name='status-message'/> <b:if cond='data:view.isSingleItem'> <b:loop values='data:posts' var='post'> <b:include data='post' name='postQuickEdit'/> <b:include name='jsonLDBreadcrumb'/> <b:include data='post' name='jsonLD'/> <b:include data='post' name='singleHeader'/> <b:include data='post' name='postBody'/> <div id='p-footer'> <b:if cond='data:view.isPost'> <b:include data='post' name='postShareButtons'/> <b:include data='post' name='aboutPostAuthor'/> <b:include data='post' name='Labels'/> <b:include data='post' name='rp'/> </b:if> <b:include data='post' name='comments'/> </div> <b:include name='nextprev'/> </b:loop> <b:else/> <b:include name='jsonLDBreadcrumb'/> <b:loop index='i' values='data:posts' var='post'> <b:if cond='data:view.isArchive or data:i lt 10'> <b:include data='post' name='post'/> </b:if> </b:loop> <script>/*<![CDATA[*/ document.querySelectorAll(".article-img img").forEach(e=>{e.setAttribute("data-src",e.getAttribute("data-src").replace("-k-no-nu","-rw-e365").replace("lh3-testonly","lh3"))}); /*]]>*/</script> <b:include cond='!data:view.isArchive' name='nextprev'/> </b:if> </b:includable> <b:includable id='404'> <b:if cond='data:view.isError'> <div id='notfound'><data:navMessage/></div> <div class='home'><a expr:href='data:blog.homepageUrl'><data:messages.home/></a></div> </b:if> </b:includable> <b:includable id='Labels'> <b:if cond='data:post.labels'> <p id='p-category'> <b:loop values='data:post.labels where(l => l.name not contains "#")' var='label'> <a class='p-category-label' expr:href='data:label.url' style='margin-right:5px'><svg aria-label='Category' class='svg' style='margin-right:5px;font-size:1.3rem'><use href='#svg-folder'/></svg><data:label.name/></a> </b:loop> </p> <p id='p-hashtag'> <b:loop values='data:post.labels where(l => l.name contains "#")' var='label'> <svg aria-label='Tag' class='svg tag-icon'><use href='#tag-icon'/></svg><a class='p-hashtag-label' expr:href='data:label.url'><data:label.name/></a> </b:loop> </p> </b:if> </b:includable> <b:includable id='aboutPostAuthor'> <b:if cond='data:post.author.aboutMe'> <div id='author-profile'> <b:if cond='data:post.author.authorPhoto.image'> <span class='author-img'><a expr:href='data:post.author.profileUrl' expr:title='data:post.author.name' rel='noopener' target='_blank'><img expr:alt='data:post.author.name' expr:data-src='resizeImage(data:post.author.authorPhoto.image, 200)' height='100' src='https://1.bp.blogspot.com/-Biln9ePTMsU/YntKTin9ayI/AAAAAAAAXqM/9ASlgARvII8tNnzETnW0chMG13X_eDtuQCNcBGAsYHQ/s100-rw/blank.png' width='100'/></a></span> <b:else/> <span class='author-img default-img'><a expr:href='data:post.author.profileUrl' expr:title='data:post.author.name' rel='noopener' target='_blank'><b:include data='{ iconClass: "avatar-icon" }' name='defaultAvatarIcon'/></a></span> </b:if> <span class='author-name'><a expr:href='data:post.author.profileUrl' rel='author noopener' target='_blank' title='author profile'><svg aria-label='pen' class='svg' style='margin-right:3px'><use href='#pen'/></svg><data:post.author.name/></a></span> <span class='author-desc'><data:post.author.aboutMe/></span> </div> </b:if> </b:includable> <b:includable id='addComments'> <div id='add-comment'> <p class='title'><data:messages.postAComment/></p> <b:if cond='data:this.messages.blogComment'> <span class='comment-message'><data:this.messages.blogComment/></span> </b:if> <input id='embed-form-open' type='checkbox'/> <label for='embed-form-open' id='embed-form-button'> <svg aria-label='Add New Comment' class='svg svg-comment-medical' style='font-size:2rem;margin-right:5px;vertical-align:-18%'><use href='#svg-comment-medical'/></svg>Open Embeded Form </label> <b:with value='data:view.isPost ? "?po=" : "?pa="' var='param'> <iframe class='embed-form' expr:data-src='data:blog.bloggerUrl + "/comment/frame/" + data:blog.blogId + data:param + data:post.id'/> </b:with> <b:with value='data:view.isPost ? "&postID=" : "&pageID="' var='param'> <a class='comment-page-link' expr:href='data:blog.bloggerUrl + "/comment.g?blogID=" + data:blog.blogId + data:param + data:post.id' expr:onclick='data:post.commentsUrlOnclick' rel='noopener' target='_blank'><svg aria-label='Add New Comment加' class='svg svg-comment-medical' style='font-size:2rem;margin-right:5px;vertical-align:-18%'><use href='#svg-comment-medical'/></svg>External Comment Page<svg aria-label='External Link' class='svg' fill='currentColor' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z' fill-rule='evenodd'/><path d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z' fill-rule='evenodd'/></svg></a> </b:with> </div> </b:includable> <b:includable id='blogThisShare'/> <b:includable id='bylineByName' var='byline'/> <b:includable id='bylineRegion' var='regionItems'/> <b:includable id='commentAuthorAvatar'> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='noopener' target='_blank'><img expr:alt='data:comment.author + "'s Avatar"' expr:data-src='resizeImage(data:comment.authorAvatarSrc, 100)' height='50' src='https://1.bp.blogspot.com/-Biln9ePTMsU/YntKTin9ayI/AAAAAAAAXqM/9ASlgARvII8tNnzETnW0chMG13X_eDtuQCNcBGAsYHQ/s50-rw/blank.png' width='50'/></a> <b:else/> <img alt='Avatar' data-src='//resources.blogblog.com/img/blank.gif' height='50' src='https://1.bp.blogspot.com/-Biln9ePTMsU/YntKTin9ayI/AAAAAAAAXqM/9ASlgARvII8tNnzETnW0chMG13X_eDtuQCNcBGAsYHQ/s50-rw/blank.png' width='50'/> </b:if> </b:includable> <b:includable id='commentDeleteIcon' var='comment'> <span expr:class='"item-control " + data:comment.adminClass'><a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:messages.deleteComment'><svg aria-label='Bin' class='svg'><use href='#trash'/></svg></a></span> </b:includable> <b:includable id='commentForm' var='post'/> <b:includable id='commentFormIframeSrc' var='post'/> <b:includable id='commentItem' var='comment'> <div class='comment-block' expr:id='"c" + data:comment.id'> <p class='comment-author'> <b:include cond='data:blog.enabledCommentProfileImages' name='commentAuthorAvatar'/> <b:if cond='data:comment.authorUrl == data:post.author.profileUrl'> <a expr:href='data:comment.authorUrl' rel='noopener' target='_blank' title='Author'><data:comment.author/><svg aria-label='Author' class='verified'><use href='#verified'/></svg></a> <b:elseif cond='data:comment.authorUrl'/> <a expr:href='data:comment.authorUrl' rel='noopener' target='_blank'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> </p> <p expr:class='"comment-body" + (data:comment.isDeleted ? " deleted" : "")'> <data:comment.body/> </p> <div class='comment-footer'> <span class='comment-timestamp'> <b:include data='comment' name='commentDeleteIcon'/> <a expr:href='"#c" + data:comment.id' title='Comment Permalink'><svg aria-label='Commented Date' class='svg svg-clock' style='margin-right:5px;vertical-align: -10%'><use href='#svg-clock'/></svg><data:comment.timestamp/></a> </span> </div> </div> </b:includable> <b:includable id='commentList' var='comments'> <b:if cond='data:post.allowComments'> <div id='comments-block'> <b:loop reverse='true' values='data:comments' var='comment'> <b:include data='comment' name='commentItem'/> </b:loop> <script>/*<![CDATA[*/ document.querySelectorAll(".comment-author img").forEach(e=>{e.setAttribute("data-src", e.getAttribute("data-src").replace("/w100/", "/w100-rw-e365/"))}); /*]]>*/</script> </div> </b:if> </b:includable> <b:includable id='commentPicker' var='post'/> <b:includable id='comments' var='post'> <div id='comments'> <b:if cond='data:post.embedCommentForm'> <b:if cond='data:post.allowNewComments'> <b:include data='post' name='addComments'/> <b:else/> <p class='comment-message'><data:post.noNewCommentsText/></p> </b:if> <b:else/> <b:if cond='data:post.allowComments'> <b:include data='post' name='addComments'/> </b:if> </b:if> <b:if cond='data:post.showManageComments'> <b:include data='post' name='manageComments'/> </b:if> <b:include name='commentsTitle'/> <b:include cond='data:post.comments' data='post.comments' name='commentList'/> <b:if cond='data:post.numberOfComments gt 1 and data:post.allowNewComments'> <a class='comment-form-jump' href='#comments' style='margin-top:3em'><svg aria-label='Jump to Top' class='svg' style='margin-left:5px;vertical-align:-10%;transform:rotate(180deg);'><use href='#svg-angles-down'/></svg>Scroll to Comment Form</a> <b:elseif cond='data:post.numberOfComments gt 1 and !data:post.allowNewComments'/> <a class='comment-form-jump' href='#comments-list' style='margin-top:3em'><svg aria-label='Jump to Top' class='svg' style='margin-left:5px;vertical-align:-10%;transform:rotate(180deg);'><use href='#svg-angles-down'/></svg>Scroll to Latest Comment</a> </b:if> </div> </b:includable> <b:includable id='commentsLink'/> <b:includable id='commentsLinkIframe'/> <b:includable id='commentsTitle'> <b:if cond='data:post.numberOfComments != 0'> <p class='title' id='comments-list' style='margin-top:2em'><b:message name='messages.numberOfComments'><b:param expr:value='data:post.numberOfComments' name='numComments'/></b:message><b:if cond='data:post.numberOfComments gt 1'> (New Arrival Order)</b:if></p> </b:if> </b:includable> <b:includable id='defaultAdUnit'/> <b:includable id='emailPostIcon'/> <b:includable id='facebookShare'/> <b:includable id='feedLinks'/> <b:includable id='feedLinksBody' var='links'/> <b:includable id='footerBylines'/> <b:includable id='googlePlusShare'/> <b:includable id='headerByline'/> <b:includable id='homePageLink'/> <b:includable id='iframeComments' var='post'/> <b:includable id='inlineAd' var='post'/> <b:includable id='jsonLD' var='post'> <script type='application/ld+json'>{ "@context": "http://schema.org/", "@type": "BlogPosting", "headline": "<data:post.title.jsonEscaped/>", "description": "<b:eval expr='data:view.isSingleItem ? data:view.description.jsonEscaped : data:post.snippets.short.jsonEscaped'/>", "image": "<b:eval expr='resizeImage(data:post.featuredImage, 560,"16:9")'/>", "datePublished": "<data:post.date.iso8601/>", "dateModified": "<data:post.lastUpdated.iso8601/>", "mainEntityOfPage": { "@type": "WebPage", "@id": "<data:post.url.canonical/>" }, "author": { "@type": "Person", "name": "<data:post.author.name/>", "url": "<data:post.author.profileUrl/>" }, "publisher": { "@type": "Organization", "name": "<data:blog.title.jsonEscaped/>" } }</script> </b:includable> <b:includable id='jsonLDBreadcrumb'> <b:if cond='!data:view.isPost and !data:view.isError'> <script type='application/ld+json'>{ "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "<data:messages.home.jsonEscaped/>", "item": "<data:blog.homepageUrl.canonical/>" <b:if cond='data:view.isMultipleItems and !data:view.archive and !data:view.isHomepage and !data:view.search.query or data:view.isPage'>}, { "@type": "ListItem", "position": 2, "name": "<data:blog.pageName/>", "item": "<data:blog.url/>" }<b:elseif cond='data:view.archive.month'/>}, { "@type": "ListItem", "position": 2, "name": "Archive of <data:view.archive.month/>/<data:view.archive.year/>", "item": "<data:blog.url/>" } <b:elseif cond='data:view.archive.year'/>}, { "@type": "ListItem", "position": 2, "name": "Archive of <data:view.archive.year/>", "item": "<data:blog.url/>" } <b:elseif cond='data:view.search.query'/>}, { "@type": "ListItem", "position": 2, "name": "「Search Query of <data:view.search.query/>」", "item": "<data:blog.url/>" }<b:else/>}</b:if> ] }</script> </b:if> <b:if cond='data:view.isPost'> <script type='application/ld+json'>{ "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "<data:messages.home.jsonEscaped/>", "item": "<data:blog.homepageUrl.canonical/>" }<b:loop index='i' values='data:post.labels where (l => l.name not contains "#")' var='label'>, { "@type": "ListItem", "position": <b:with value='data:i + 2' var='num'><b:eval expr='data:num'/></b:with>, "name": "<data:label.name/>", "item": "<data:label.url.canonical/>" }</b:loop> ] }</script> </b:if> </b:includable> <b:includable id='linkShare'/> <b:includable id='nextPageLink'/> <b:includable id='nextprev'> <b:if cond='data:view.isHomepage or data:view.isSearch or data:view.archive.month or data:view.isPost and !data:view.isPage'> <div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPageUrl'> <span id='blog-pager-newer-link'><a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:messages.newerPosts'><data:messages.newerPosts/></a></span> <b:else/> <span id='no-newer-link'><b:if cond='data:blog.locale.language == "ja"'><data:messages.newerPosts/>はありません<b:elseif cond='data:blog.locale.language == "en"'/>No <data:messages.newerPosts/><b:elseif cond='data:blog.locale.language == "ko"'/><data:messages.newerPosts/> 없습니다<b:else/><data:messages.newerPosts/></b:if></span> </b:if> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'><a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:messages.olderPosts'><data:messages.olderPosts/></a></span> <b:else/> <span id='no-older-link'><b:if cond='data:blog.locale.language == "ja"'><data:messages.olderPosts/>はありません<b:elseif cond='data:blog.locale.language == "en"'/>No <data:messages.olderPosts/><b:elseif cond='data:blog.locale.language == "ko"'/><data:messages.olderPosts/> 없습니다<b:else/><data:messages.olderPosts/></b:if></span> </b:if> </div> </b:if> </b:includable> <b:includable id='otherSharingButton'/> <b:includable id='platformShare'/> <b:includable id='post' var='post'> <article class='article'> <b:include data='post' name='jsonLD'/> <b:if cond='data:post.featuredImage'> <div class='article-img'> <img expr:alt='data:post.title.escaped' expr:data-src='resizeImage(data:post.featuredImage,320,"16:9")' height='180' src='https://1.bp.blogspot.com/-Biln9ePTMsU/YntKTin9ayI/AAAAAAAAXqM/9ASlgARvII8tNnzETnW0chMG13X_eDtuQCNcBGAsYHQ/w320-h180-c-rw/blank.png' width='320'/> </div> <b:else/> <div class='article-img'> <img data-src='https://1.bp.blogspot.com/-GfyX-OxsrLs/Y61LhoAYYeI/AAAAAAAAZAw/4XCyYnYxDmM_8yRkGnytXaI2MkQ5-TP3gCNcBGAsYHQ/s320-rw-e365/noimage.png' expr:alt='data:post.title.escaped' height='180' src='https://1.bp.blogspot.com/-Biln9ePTMsU/YntKTin9ayI/AAAAAAAAXqM/9ASlgARvII8tNnzETnW0chMG13X_eDtuQCNcBGAsYHQ/w320-h180-c-rw/blank.png' width='320'/> </div> </b:if> <h2 class='article-title'><data:post.title/></h2> <p class='article-snippet'> <data:post.snippets.short/> </p> <p class='article-category'> <b:loop values='data:post.labels where(l => l.name not contains "#")' var='label'> <span class='article-category-label'><a expr:href='data:label.url'><svg aria-label='Category' class='svg' style='margin-right:3px;font-size:1.1rem'><use href='#svg-folder'/></svg><data:label.name/></a></span> </b:loop> </p> <p class='article-header'> <b:if cond='data:post.numberOfComments gt 0'> <span class='article-header-comments'><svg aria-label='Comment' class='svg svg-comment-dots' style='margin-right:3px'><use href='#svg-comment-dots'/></svg><data:post.numberOfComments/> |</span> </b:if> <time class='article-header-date' expr:datetime='data:post.date.iso8601'><svg aria-label='Post Date' class='svg svg-clock' style='vertical-align:-10%;margin-right:3px'><use href='#svg-clock'/></svg><b:with value='data:post.date.month - 1' var='month'><b:with value='["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]' var='nom'><b:eval expr='data:nom[month]'/> <b:eval expr='data:post.date.day lt 10 ? "0" + data:post.date.day : data:post.date.day'/>, <data:post.date.year/></b:with></b:with></time> </p> <a expr:aria-label='data:post.title' expr:href='data:post.url'/> </article> </b:includable> <b:includable id='postAuthor'/> <b:includable id='postBody' var='post'> <div class='post-body'> <data:post.body/> </div> </b:includable> <b:includable id='postBodySnippet' var='post'/> <b:includable id='postCommentsAndAd' var='post'/> <b:includable id='postCommentsLink'/> <b:includable id='postFooter' var='post'/> <b:includable id='postFooterAuthorProfile' var='post'/> <b:includable id='postHeader' var='post'/> <b:includable id='postJumpLink' var='post'/> <b:includable id='postLabels'/> <b:includable id='postLocation'/> <b:includable id='postMeta' var='post'/> <b:includable id='postMetadataJSONImage'/> <b:includable id='postMetadataJSONPublisher'/> <b:includable id='postPagination'/> <b:includable id='postQuickEdit' var='post'> <b:with value='data:view.isPage ? "blog/page/edit/" : "blog/post/edit/"' var='path'> <span expr:class='"item-control " + data:post.adminClass'><a expr:href='data:blog.bloggerUrl path (data:path + data:blog.blogId + "/" + data:post.id)' expr:title='data:messages.edit' rel='noopener' target='_blank'><data:messages.edit/></a></span> </b:with> </b:includable> <b:includable id='postReactions'/> <b:includable id='postShareButtons' var='post'> <div class='sns-share-buttons'> <span class='tweet' onclick='tweet_btn()' role='button' title='Post'><svg aria-label='Tweet' class='svg svg-twitter'><use href='#svg-twitter'/></svg></span> <script>/*<![CDATA[*/ function tweet_btn(){const w=550,h=550;window.open("https://twitter.com/intent/tweet?url="+encodeURIComponent(location.href)+"&text="+encodeURIComponent(document.title),"_blank","width="+w+",height="+h+",left="+(screen.width-w)/2+",top="+(screen.height-h)/2+",scrollbars=yes,resizable=yes,toolbar=no,location=yes")} /*]]>*/</script> <span class='facebook' onclick='fb_btn()' role='button' title='Share'><svg aria-label='Share on Facebook' class='svg svg-facebook-f'><use href='#svg-facebook-f'/></svg></span> <script>/*<![CDATA[*/ function fb_btn(){const w=550,h=420;window.open("https://www.facebook.com/sharer.php?u="+encodeURIComponent(location.href),"_blank","width="+w+",height="+h+",left="+(screen.width-w)/2+",top="+(screen.height-h)/2+",scrollbars=yes,resizable=yes,toolbar=no,location=yes")} /*]]>*/</script> <span class='line' onclick='line_btn()' role='button' title='Send to LINE'><svg aria-label='LINE' class='linesvg'><use href='#linesvg'/></svg></span> <script>/*<![CDATA[*/ function line_btn(){const w=550,h=420;window.open("https://social-plugins.line.me/lineit/share?url="+encodeURIComponent(location.href),"_blank","width="+w+",height="+h+",left="+(screen.width-w)/2+",top="+(screen.height-h)/2+",scrollbars=yes,resizable=yes,toolbar=no,location=yes")} /*]]>*/</script> <span class='linkedin' onclick='linkedin()' role='button' title='Share on LinkedIn'><svg aria-label='LinkedIn' class='svg svg-linkedin'><use href='#linkedin'/></svg></span> <script>/*<![CDATA[*/ function linkedin(){const w=480,h=480;window.open("https://www.linkedin.com/sharing/share-offsite/?url="+encodeURIComponent(location.href),"_blank","width="+w+",height="+h+",left="+(screen.width-w)/2+",top="+(screen.height-h)/2+",scrollbars=yes,resizable=yes,toolbar=no,location=yes")} /*]]>*/</script> <span class='pocket' onclick='pocket_btn()' role='button' title='Save to Pocket'><svg aria-label='Pocket' class='svg svg-get-pocket'><use href='#svg-get-pocket'/></svg></span> <script>/*<![CDATA[*/ function pocket_btn(){const w=550,h=420;window.open("https://getpocket.com/edit?url="+encodeURIComponent(location.href),"_blank","width="+w+",height="+h+",left="+(screen.width-w)/2+",top="+(screen.height-h)/2+",scrollbars=yes,resizable=yes,toolbar=no,location=yes")} /*]]>*/</script> <span class='copy_btn' role='button' style='font-weight:bold;line-height:1' title='Copy Title/URL'/> <script src='//cdn.jsdelivr.net/npm/clipboard@latest/dist/clipboard.min.js'/> <script>/*<![CDATA[*/ const clipboard=new ClipboardJS(".copy_btn");window.addEventListener('DOMContentLoaded', function(){$(".copy_btn").click(function(){$(this).attr("data-clipboard-text",document.title+"\n"+location.href).text("COPIED").attr("title","Copied"),setTimeout(()=>{$(this).text("").attr("title","Copy Title/URL")},2e3)})}); /*]]>*/</script> </div> </b:includable> <b:includable id='postTimestamp'/> <b:includable id='postTitle' var='post'/> <b:includable id='previousPageLink'/> <b:includable id='rp' var='post'> <b:if cond='data:view.isPost'> <div id='related-posts'/> <script> /* Related Post widget powered by IB-Note via: https://itblogger-note.blogspot.com/2021/03/improve-related-posts.html */ const rp_current = "<data:post.url/>"; const rp_max = 6; const rp_head = "RELATED POSTS"; /*<![CDATA[*/ !function(a,b){a.RelatedPosts||(a.RelatedPosts=b())}(this,function(){let a=function(){},b=0,c=0,d=[],e=[],f=[],g=[];return a.counter=function(){c++},a.add=function(l){let j=rp_current.match(/^https?:\/\/(.+$)/),m="",n="";null!=j&&(m="http://"+j[1],n="https://"+j[1]);for(let k=0;k<l.feed.entry.length;k++){let h=l.feed.entry[k];for(let i=0;i<h.link.length;i++)if("alternate"==h.link[i].rel){if(!(m==h.link[i].href||n==h.link[i].href)){d.push(h.link[i].href),e.push(h.title.$t);let q=h.published.$t.substr(0,10).replace(/-/g,"/");f.push(q);let a;if("media$thumbnail"in h){a=h.media$thumbnail.url;let o=/\/s72-.*\//,p=/=s72-.*$/;a.match(o)?a=a.replace(o,"/w240-h135-rw-p-e365/"):a.match(p)?a=a.replace(p,"=w240-h135-rw-p-e365"):a.match(/default.jpg/)&&(a=a.replace("default.jpg","mqdefault.webp").replace("/vi/","/vi_webp/"))}else a="https://1.bp.blogspot.com/-GfyX-OxsrLs/Y61LhoAYYeI/AAAAAAAAZAw/4XCyYnYxDmM_8yRkGnytXaI2MkQ5-TP3gCNcBGAsYHQ/s240-rw-e365/noimage.png";g.push(a)}break}}++b==c&&function(){let l=[],a=[];for(let c=0;c<d.length;c++)-1==l.indexOf(d[c])&&(l.push(d[c]),a.push(c));let k,h=[],i=[...Array(a.length).keys()];for(;i.length>0;)k=Math.floor(Math.random()*i.length),h.push(i[k]),i.splice(k,1);let j,b=0;if(a.length>0){for(j='<div class="title">'+rp_head+'</div><div class="rp-container">';b<a.length&&b<rp_max;)j+='<a href="'+d[a[h[b]]]+'"><figure class="related-img"><img alt="Related Post Thumbnail" height="135" data-src="'+g[a[h[b]]]+'" src="https://1.bp.blogspot.com/-Biln9ePTMsU/YntKTin9ayI/AAAAAAAAXqM/9ASlgARvII8tNnzETnW0chMG13X_eDtuQCNcBGAsYHQ/w240-h135-c-rw/blank.png" width="240"/></figure><div class="related-title">'+e[a[h[b]]]+'</div><div class="related-date"><svg aria-label="Post Date" class="svg svg-clock" style="vertical-align:-10%;margin-right:3px"><use href="#svg-clock"/></svg>'+f[a[h[b]]]+"</div></a>",b++;j+="</div>",document.getElementById("related-posts").innerHTML=j}}()},a}) /*]]>*/ </script> <b:loop values='data:post.labels' var='label'> <script>RelatedPosts.counter();</script> </b:loop> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.name contains "#"'> <script> !function(){const e="/feeds/posts/summary/-/"+"<data:label.name/>".replace(/・/g,"%E3%83%BB").replace(/#/g,"%23").replace(/&amp;/g,"&")+"?alt=json&max-results=30&callback=RelatedPosts.add",a=document.createElement("script");a.type="text/javascript",a.defer=!0,a.src=e,document.head.appendChild(a)}(); </script> <b:else/> <script defer='defer' expr:src='"/feeds/posts/summary/-/" + data:label.name + "?alt=json&max-results=30&callback=RelatedPosts.add"'/> </b:if> </b:loop> </b:if> </b:includable> <b:includable id='sharingButton'/> <b:includable id='sharingButtonContent'/> <b:includable id='sharingButtons'/> <b:includable id='sharingButtonsMenu'/> <b:includable id='sharingPlatformIcon'/> <b:includable id='singleHeader'> <h1 id='p-header-title'><data:post.title/></h1> <b:if cond='data:view.isPost'> <span id='p-header'> <time expr:datetime='data:post.date.iso8601' id='p-header-pdate'><svg aria-label='Calendar' class='svg svg-calendar-days' style='vertical-align:-10%;margin-right:5px'><use href='#svg-calendar-days'/></svg><b:with value='data:post.date.month - 1' var='month'><b:with value='["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]' var='nom'><b:eval expr='data:nom[month]'/> <b:eval expr='data:post.date.day lt 10 ? "0" + data:post.date.day : data:post.date.day'/>, <data:post.date.year/></b:with></b:with></time> <b:if cond='data:post.date.year != data:post.lastUpdated.year or data:post.date.month != data:post.lastUpdated.month or data:post.date.day != data:post.lastUpdated.day'> <span id='p-header-udate'>|<svg aria-label='Updated' class='svg svg-arrows-rotate' style='margin:0 5px'><use href='#svg-arrows-rotate'/></svg><b:with value='data:post.lastUpdated.month - 1' var='month'><b:with value='["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]' var='nom'><b:eval expr='data:nom[month]'/> <b:eval expr='data:post.lastUpdated.day lt 10 ? "0" + data:post.lastUpdated.day : data:post.lastUpdated.day'/>, <data:post.lastUpdated.year/></b:with></b:with></span> </b:if> <b:if cond='data:post.numberOfComments gt 0'> |<a expr:title='data:post.numberOfComments + " comments"' href='#comments-list' id='p-header-comments'><svg aria-label='Comment' class='svg svg-comment-dots' style='margin:0 5px'><use href='#svg-comment-dots'/></svg><data:post.numberOfComments/></a> </b:if> </span> </b:if> </b:includable> <b:includable id='status-message'> <b:if cond='data:view.isHomepage'> <div class='title'>LATEST POSTS</div> </b:if> <b:if cond='data:view.archive'> <span class='navmsg'><svg aria-label='Calendar' class='svg svg-calendar-days' style='margin-right:5px'><use href='#svg-calendar-days'/></svg><data:blog.pageName/></span> </b:if> <b:if cond='data:navMessage and !data:view.isError'> <span class='navmsg'><data:navMessage/></span> </b:if> <b:include name='404'/> </b:includable> <b:includable id='threaded-comment-form'/> <b:includable id='threadedCommentForm'/> <b:includable id='threadedCommentJs'/> <b:includable id='threadedComments'/> <b:includable id='threaded_comment_js'/> <b:includable id='threaded_comments'/> </b:widget> <b:widget cond='data:view.isArchive' id='BlogArchive0' locked='true' title='Archive Pagenation' type='BlogArchive' version='2' visible='true'> <b:widget-settings> <b:widget-setting name='showStyle'>HIERARCHY</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</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'>false</b:widget-setting> <b:widget-setting name='frequency'>MONTHLY</b:widget-setting> </b:widget-settings> <b:includable id='main'> <!-- Archive Pager Powered by Itotti (@itozyun) via: https://outcloud.blogspot.com/2016/09/elegant-nav-for-archive.html --> <div class='Pager'> <b:include name='navi'/> </div> </b:includable> <b:includable id='content'/> <b:includable id='flat' var='data'/> <b:includable id='hierarchy'/> <b:includable id='interval' var='intervalData'/> <b:includable id='menu' var='data'/> <b:includable id='navi'> <b:with value='data:data count ( _y => _y.url == data:blog.url )' var='is_year'> <b:if cond='data:is_year != 0'> <b:include name='navi_year'/> <b:else/> <b:loop values='data:data' var='y'> <b:loop values='data:y.data' var='m'> <b:if cond='data:m.url == data:blog.url'> <b:include name='navi_month'/> <b:else/> <b:with value='data:m.data count ( _d => _d.url == data:blog.url )' var='is_day'> <b:if cond='data:is_day != 0'> <b:include name='navi_day'/> </b:if> </b:with> </b:if> </b:loop> </b:loop> </b:if> </b:with> </b:includable> <b:includable id='navi_day'> <b:loop index='yi' values='data:data' var='y'> <b:loop index='mi' values='data:y.data' var='m'> <b:loop index='di' values='data:m.data' var='d'> <b:if cond='data:d.url == data:blog.url'> <b:with value='data:m.data count ( _d => _d.url != "" )' var='dlast'> <b:if cond='data:dlast - 1 != data:di'> <b:with value='data:m.data[data:di + 1]' var='_d'> <b:if cond='data:_d.post-count != 1'> <a class='Pager-next' expr:href='data:_d.url'> <data:_d.name/> <data:y.name/> (<data:_d.post-count/>)</a> <b:else/> <a class='Pager-next' expr:href='data:_d.url'><data:_d.name/> <data:y.name/> (1)</a> </b:if> </b:with> <b:else/> <b:with value='data:y.data count ( _m => _m.name != "" )' var='mlast'> <b:if cond='data:mlast - 1 != data:mi'> <b:with value='data:y.data[data:mi + 1]' var='_m'> <b:with value='data:_m.data[0]' var='_d'> <b:if cond='data:_d.post-count != 1'> <a class='Pager-next' expr:href='data:_d.url'><data:_d.name/> <data:y.name/>> (<data:_d.post-count/>)</a> <b:else/> <a class='Pager-next' expr:href='data:_d.url'><data:_d.name/> <data:y.name/> (1)</a> </b:if> </b:with> </b:with> <b:else/> <b:with value='data:data count ( _y => _y.name != "" )' var='ylast'> <b:if cond='data:ylast - 1 != data:yi'> <b:with value='data:data[data:yi + 1]' var='_y'> <b:with value='data:_y.data[0]' var='_m'> <b:with value='data:_m.data[0]' var='_d'> <b:if cond='data:_d.post-count != 1'> <a class='Pager-next' expr:href='data:_d.url'><data:_d.name/> <data:_y.name/> (<data:_d.post-count/>)</a> <b:else/> <a class='Pager-next' expr:href='data:_d.url'><data:_d.name/> <data:_y.name/> (1)</a> </b:if> </b:with> </b:with> </b:with> </b:if> </b:with> </b:if> </b:with> </b:if> </b:with> <b:if cond='data:di != 0'> <b:with value='data:m.data[data:di - 1]' var='_d'> <b:if cond='data:_d.post-count != 1'> <a class='Pager-prev' expr:href='data:_d.url'><data:_d.name/> <data:y.name/> (<data:_d.post-count/>)</a> <b:else/> <a class='Pager-prev' expr:href='data:_d.url'><data:_d.name/> <data:y.name/> (1)</a> </b:if> </b:with> <b:else/> <b:if cond='data:mi != 0'> <b:with value='data:y.data[data:mi - 1]' var='_m'> <b:with value='data:_m.data count ( _d => _d.url != "" )' var='dlast'> <b:with value='data:_m.data[data:dlast - 1]' var='_d'> <b:if cond='data:_d.post-count != 1'> <a class='Pager-prev' expr:href='data:_d.url'><data:_d.name/> <data:y.name/> (<data:_d.post-count/>)</a> <b:else/> <a class='Pager-prev' expr:href='data:_d.url'><data:_d.name/> <data:y.name/> (1)</a> </b:if> </b:with> </b:with> </b:with> <b:else/> <b:if cond='data:yi != 0'> <b:with value='data:data[data:yi - 1]' var='_y'> <b:with value='data:_y.data count ( _m => _m.name != "" )' var='mlast'> <b:with value='data:_y.data[data:mlast - 1]' var='_m'> <b:with value='data:_m.data count ( _d => _d.url != "" )' var='dlast'> <b:with value='data:_m.data[data:dlast - 1]' var='_d'> <b:if cond='data:_d.post-count != 1'> <a class='Pager-prev' expr:href='data:_d.url'><data:_d.name/> <data:_y.name/> (<data:_d.post-count/>)</a> <b:else/> <a class='Pager-prev' expr:href='data:_d.url'><data:_d.name/> <data:_y.name/> (1)</a> </b:if> </b:with> </b:with> </b:with> </b:with> </b:with> </b:if> </b:if> </b:if> </b:if> </b:loop> </b:loop> </b:loop> </b:includable> <b:includable id='navi_month'> <b:loop index='yi' values='data:data' var='y'> <b:loop index='mi' values='data:y.data' var='m'> <b:if cond='data:m.url == data:blog.url'> <b:with value='data:y.data count ( _m => _m.url != "" )' var='mlast'> <b:if cond='data:mlast - 1 != data:mi'> <b:with value='data:y.data[data:mi + 1]' var='_m'> <b:if cond='data:_m.post-count != 1'> <a class='Pager-next' expr:href='data:_m.url'><data:_m.name/> <data:y.name/> (<data:_m.post-count/>)</a> <b:else/> <a class='Pager-next' expr:href='data:_m.url'><data:_m.name/> <data:y.name/> (1)</a> </b:if> </b:with> <b:else/> <b:with value='data:data count ( _y => _y.name != "" )' var='ylast'> <b:if cond='data:ylast - 1 != data:yi'> <b:loop index='_yi' values='data:data' var='_y'> <b:if cond='data:yi + 1 == data:_yi'> <b:with value='data:_y.data[0]' var='_m'> <b:if cond='data:_m.post-count != 1'> <a class='Pager-next' expr:href='data:_m.url'><data:_m.name/> <data:_y.name/> (<data:_m.post-count/>)</a> <b:else/> <a class='Pager-next' expr:href='data:_m.url'><data:_m.name/> <data:_y.name/> (1)</a> </b:if> </b:with> </b:if> </b:loop> </b:if> </b:with> </b:if> </b:with> <b:if cond='data:mi == 0'> <b:if cond='data:yi != 0'> <b:loop index='_yi' values='data:data' var='_y'> <b:if cond='(data:yi - 1) == data:_yi'> <b:with value='data:_y.data count ( _m => _m.url != "" )' var='mlast'> <b:with value='data:_y.data[data:mlast - 1]' var='_m'> <b:if cond='data:_m.post-count != 1'> <a class='Pager-prev' expr:href='data:_m.url'><data:_m.name/> <data:_y.name/> (<data:_m.post-count/>)</a> <b:else/> <a class='Pager-prev' expr:href='data:_m.url'><data:_m.name/> <data:_y.name/> (1)</a> </b:if> </b:with> </b:with> </b:if> </b:loop> </b:if> <b:else/> <b:with value='data:y.data[data:mi - 1]' var='_m'> <b:if cond='data:_m.post-count != 1'> <a class='Pager-prev' expr:href='data:_m.url'><data:_m.name/> <data:y.name/> (<data:_m.post-count/>)</a> <b:else/> <a class='Pager-prev' expr:href='data:_m.url'><data:_m.name/> <data:y.name/> (1)</a> </b:if> </b:with> </b:if> </b:if> </b:loop> </b:loop> </b:includable> <b:includable id='navi_year'> <b:loop index='yi' values='data:data' var='y'> <b:if cond='data:y.url == data:blog.url'> <b:with value='data:data count ( _y => _y.url != "" )' var='ylast'> <b:if cond='data:ylast - 1 != data:yi'> <b:with value='data:data[data:yi + 1]' var='_y'> <a class='Pager-next' expr:href='data:_y.url'><data:_y.name/> (<data:_y.post-count/>)</a> </b:with> </b:if> </b:with> <b:if cond='data:yi != 0'> <b:with value='data:data[data:yi - 1]' var='_y'> <a class='Pager-prev' expr:href='data:_y.url'><data:_y.name/> (<data:_y.post-count/>)</a> </b:with> </b:if> </b:if> </b:loop> </b:includable> <b:includable id='posts' var='posts'/> </b:widget> </b:section> </div> <!-- Sub Contents --> <aside id='sub-content'> <div id='sub-item1'> <b:section id='SUB1'> <b:widget id='PopularPosts1' locked='false' title='POPULAR POSTS' type='PopularPosts' version='2' visible='true'> <b:widget-settings> <b:widget-setting name='numItemsToShow'>5</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'>ALL_TIME</b:widget-setting> </b:widget-settings> <b:includable id='main' var='this'> <b:if cond='data:title != ""'> <div class='title'><data:title/></div> </b:if> <b:include name='snippetedPosts'/> </b:includable> <b:includable id='blogThisShare'/> <b:includable id='bylineByName'/> <b:includable id='bylineRegion'/> <b:includable id='commentsLink'/> <b:includable id='commentsLinkIframe'/> <b:includable id='emailPostIcon'/> <b:includable id='facebookShare'/> <b:includable id='footerBylines'/> <b:includable id='googlePlusShare'/> <b:includable id='headerByline'/> <b:includable id='linkShare'/> <b:includable id='otherSharingButton'/> <b:includable id='platformShare'/> <b:includable id='postAuthor'/> <b:includable id='postCommentsLink'> <b:if cond='data:post.numberOfComments gt 0'> <span class='article-header-comments'><svg aria-label='Comment' class='svg svg-comment-dots' style='margin-right:3px'><use href='#svg-comment-dots'/></svg><data:post.numberOfComments/> |</span> </b:if> </b:includable> <b:includable id='postJumpLink'/> <b:includable id='postLabels'/> <b:includable id='postLocation'/> <b:includable id='postReactions'/> <b:includable id='postShareButtons'/> <b:includable id='postSnippet'/> <b:includable id='postTimestamp'> <time class='article-header-date' expr:datetime='data:post.date.iso8601'><svg aria-label='Post Date' class='svg svg-clock' style='vertical-align:-10%;margin-right:3px'><use href='#svg-clock'/></svg><b:with value='data:post.date.month - 1' var='month'><b:with value='["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]' var='nom'><b:eval expr='data:nom[month]'/> <b:eval expr='data:post.date.day lt 10 ? "0" + data:post.date.day : data:post.date.day'/>, <data:post.date.year/></b:with></b:with></time> </b:includable> <b:includable id='sharingButton'/> <b:includable id='sharingButtonContent'/> <b:includable id='sharingButtons'/> <b:includable id='sharingButtonsMenu'/> <b:includable id='sharingPlatformIcon'/> <b:includable id='snippetedPostByline'/> <b:includable id='snippetedPostContent'> <div class='post-content'> <b:include name='snippetedPostThumbnail'/> <b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/> <b:include cond='data:this.postDisplay.showSnippet' data='post' name='postSnippet'/> <p class='article-header'> <b:include data='post' name='postCommentsLink'/> <b:include data='post' name='postTimestamp'/> </p> <p class='article-category'> <b:include data='post' name='postLabels'/> </p> </div> </b:includable> <b:includable id='snippetedPostThumbnail'> <b:if cond='data:post.featuredImage'> <div class='pop-img'> <img expr:alt='data:post.title.escaped' expr:data-src='resizeImage(data:post.featuredImage,320,"16:9")' height='180' src='https://1.bp.blogspot.com/-Biln9ePTMsU/YntKTin9ayI/AAAAAAAAXqM/9ASlgARvII8tNnzETnW0chMG13X_eDtuQCNcBGAsYHQ/w320-h180-c-rw/blank.png' width='320'/> </div> <b:else/> <div class='pop-img'> <img data-src='https://1.bp.blogspot.com/-GfyX-OxsrLs/Y61LhoAYYeI/AAAAAAAAZAw/4XCyYnYxDmM_8yRkGnytXaI2MkQ5-TP3gCNcBGAsYHQ/s320-rw-e365/noimage.png' expr:alt='data:post.title.escaped' height='180' src='https://1.bp.blogspot.com/-Biln9ePTMsU/YntKTin9ayI/AAAAAAAAXqM/9ASlgARvII8tNnzETnW0chMG13X_eDtuQCNcBGAsYHQ/w320-h180-c-rw/blank.png' width='320'/> </div> </b:if> </b:includable> <b:includable id='snippetedPostTitle'> <b:if cond='data:post.title != ""'> <h2 class='pop-title'><data:post.title/></h2> </b:if> </b:includable> <b:includable id='snippetedPosts'> <ul> <b:loop index='i' values='data:posts' var='post'> <li class='ranked-li'> <article class='article'> <a expr:href='data:post.url'><span class='post-rank'><b:eval expr='data:i + 1'/></span></a> <b:include name='snippetedPostContent'/><a expr:aria-label='data:post.title' expr:href='data:post.url'/> </article> </li> </b:loop> <script>/*<![CDATA[*/ document.querySelectorAll(".pop-img img").forEach(e=>{e.setAttribute("data-src",e.getAttribute("data-src").replace("-k-no-nu","-rw-e365").replace("lh3-testonly","lh3"))}); /*]]>*/</script> </ul> </b:includable> </b:widget> </b:section> </div> <div id='sub-item2'> <b:section id='SUB2'> <b:widget id='Label1' locked='false' title='CATEGORY' type='Label' version='2' visible='true'> <b:widget-settings> <b:widget-setting name='sorting'>ALPHA</b:widget-setting> <b:widget-setting name='display'>CLOUD</b:widget-setting> <b:widget-setting name='selectedLabelsList'/> <b:widget-setting name='showType'>ALL</b:widget-setting> <b:widget-setting name='showFreqNumbers'>true</b:widget-setting> </b:widget-settings> <b:includable id='main'> <b:if cond='data:title != ""'> <div class='title'><data:title/></div> </b:if> <b:include cond='data:display == "list"' name='list'/> <b:include cond='data:display == "cloud"' name='cloud'/> </b:includable> <b:includable id='cloud'> <div expr:class='"widget-content " + data:display + "-label-widget-content"'> <b:loop values='data:labels where(l => l.name not contains "#")' var='label'> <a class='category-label' expr:href='data:label.url'><svg aria-label='Category' class='svg' style='margin-right:3px;font-size:1.1rem'><use href='#svg-folder'/></svg><data:label.name/><span class='label-count'><b:if cond='data:showFreqNumbers'>(<data:label.count/>)</b:if></span></a> </b:loop> </div> </b:includable> <b:includable id='content'/> <b:includable id='list'> <div expr:class='"widget-content " + data:display + "-label-widget-content"'> <b:loop values='data:labels where(l => l.name contains "#")' var='label'> <a class='hashtag-label' expr:href='data:label.url'><data:label.name/><span class='label-count'><b:if cond='data:showFreqNumbers'>(<data:label.count/>)</b:if></span></a> </b:loop> </div> </b:includable> </b:widget> <b:widget id='Label2' locked='false' title='#HASHTAGS' type='Label' version='2' 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'>true</b:widget-setting> </b:widget-settings> <b:includable id='main'> <b:if cond='data:title != ""'> <div class='title'><data:title/></div> </b:if> <b:include cond='data:display == "list"' name='list'/> <b:include cond='data:display == "cloud"' name='cloud'/> </b:includable> <b:includable id='cloud'> <div expr:class='"widget-content " + data:display + "-label-widget-content"'> <b:loop values='data:labels where(l => l.name not contains "#")' var='label'> <a class='category-label' expr:href='data:label.url'><svg aria-label='Category' class='svg' style='margin-right:3px;font-size:1.1rem'><use href='#svg-folder'/></svg><data:label.name/><span class='label-count'><b:if cond='data:showFreqNumbers'>(<data:label.count/>)</b:if></span></a> </b:loop> </div> </b:includable> <b:includable id='content'/> <b:includable id='list'> <div expr:class='"widget-content " + data:display + "-label-widget-content"'> <b:loop values='data:labels where(l => l.name contains "#")' var='label'> <a class='hashtag-label' expr:href='data:label.url'><data:label.name/><span class='label-count'><b:if cond='data:showFreqNumbers'>(<data:label.count/>)</b:if></span></a> </b:loop> </div> </b:includable> </b:widget> <b:widget id='BlogArchive1' locked='false' title='MONTHRY ARCHIVE' type='BlogArchive' version='2' visible='true'> <b:widget-settings> <b:widget-setting name='showStyle'>HIERARCHY</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</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'> <div expr:id='data:widget.instanceId + "_ArchiveList"'> <b:if cond='data:title != ""'> <div class='title'><data:title/></div> </b:if> <b:include cond='data:style == "HIERARCHY"' data='data' name='menu2'/> </div> </b:includable> <b:includable id='content'/> <b:includable id='flat'/> <b:includable id='hierarchy'/> <b:includable id='interval' var='intervalData'/> <b:includable id='menu' var='data'/> <b:includable id='menu2' var='intervalData'> <details class='archive-list'> <summary>Select Month<svg aria-label='Open/Close' class='svg-icon-24'><use href='/responsive/sprite_v1_6.css.svg#ic_expand_more_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'/></svg></summary> <ul> <b:if cond='data:intervalData.length gt 0'> <b:loop values='0 to data:intervalData.length - 1' var='i'> <b:loop values='0 to data:intervalData[i].data.length - 1' var='j'> <li><a expr:href='data:intervalData[i].data[j].url'><b:eval expr='data:intervalData[i].data[j].name + " " +data:intervalData[i].name'/> (<b:eval expr='data:intervalData[i].data[j].post-count'/>)</a></li> </b:loop> </b:loop> </b:if> </ul> </details> </b:includable> <b:includable id='posts' var='posts'/> <b:includable id='toggle' var='interval'/> </b:widget> </b:section> </div> <div id='sub-item3'> <b:section id='SUB3'> <b:widget id='Profile1' locked='false' title='PROFILE' type='Profile' version='2' visible='true'> <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' var='this'> <b:if cond='data:title != ""'> <div class='title'><data:title/></div> </b:if> <b:include name='content'/> </b:includable> <b:includable id='authorProfileImage'> <img class='profile-img' expr:alt='data:messages.myPhoto' expr:data-src='resizeImage(data:authorPhoto.image, 120)' expr:height='data:authorPhoto.height' expr:width='data:authorPhoto.width' src='https://1.bp.blogspot.com/-Biln9ePTMsU/YntKTin9ayI/AAAAAAAAXqM/9ASlgARvII8tNnzETnW0chMG13X_eDtuQCNcBGAsYHQ/s120-rw/blank.png'/> </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'> <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'> <ul> <b:loop values='data:authors' var='author'> <li> <div class='team-member'> <b:include data='author' name='teamProfileLink'/> </div> </li> </b:loop> </ul> </b:includable> <b:includable id='teamProfileLink'> <a expr:href='data:userUrl' rel='noopener' target='_blank'> <b:include name='profileImage'/> <div class='profile-name'><data:display-name/></div> </a> <b:include name='viewProfileLink'/> </b:includable> <b:includable id='userLocation'> <dd class='profile-data location'><svg class='svg' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'> <path d='M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/> </svg><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'> <a class='profile-link g-profile' expr:href='data:userUrl' rel='author noopener' target='blank'> <data:displayname/> </a> </dt> </b:includable> <b:includable id='userProfileImage'> <a expr:href='data:userUrl' rel='noopener' target='_blank'> <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='userProfileText'> <dd class='profile-textblock'> <data:aboutme/> </dd> </b:includable> <b:includable id='viewProfileLink'> <a class='profile-link' expr:href='data:userUrl' rel='author noopener' target='_blank'> <data:messages.viewMyCompleteProfile/> </a> </b:includable> </b:widget> <b:widget id='PageList2' locked='false' title='PAGE LIST' type='PageList' visible='true'> <b:widget-settings> <b:widget-setting name='pageListJson'><![CDATA[{"link1":{"href":"#","position":1,"title":"Page 2"},"link0":{"href":"#","position":0,"title":"Page 1"}}]]></b:widget-setting> <b:widget-setting name='homeTitle'>Home</b:widget-setting> </b:widget-settings> <b:includable id='main'> <b:if cond='data:title != ""'> <div class='title'><data:title/></div> </b:if> <b:include name='content'/> </b:includable> <b:includable id='content'> <b:include name='pageList'/> </b:includable> <b:includable id='overflowButton'/> <b:includable id='overflowablePageList'/> <b:includable id='pageLink'> <b:if cond='data:link.isCurrentPage'> <li><span class='current-page'><data:link.title/></span></li> <b:else/> <li><a expr:href='data:link.href'><data:link.title/></a></li> </b:if> </b:includable> <b:includable id='pageList'> <div class='list-widget'> <ul> <b:loop values='data:links' var='link'> <b:include name='pageLink'/> </b:loop> </ul> </div> </b:includable> </b:widget> </b:section> </div> </aside> </main> <!-- Footer --> <footer> <b:section id='FOOTER'> <b:widget id='HTML0' locked='false' title='Attribution' type='HTML' version='2' visible='true'> <b:widget-settings> <b:widget-setting name='content'>Please customize on theme HTML edit page.</b:widget-setting> </b:widget-settings> <b:includable id='main'> <div id='footer-attribution'> <span>© <span id='presentyear'/> <script>document.getElementById("presentyear").innerHTML=new Date().getFullYear()</script><a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a></span> <span><a href='https://f-light-theme.blogspot.com/' rel='noopener' target='_blank'><b>F-light</b></a> theme designed by Fujiyan</span> <span><b:include name='flatBloggerIcon'/><a expr:href='data:blog.bloggerUrl' rel='noopener'><b:message name='messages.poweredByBlogger'/></a></span> </div> </b:includable> </b:widget> </b:section> </footer> <b:defaultmarkups> <b:defaultmarkup type='Label'> <b:includable id='main'> <b:if cond='data:title != ""'> <div class='title'><data:title/></div> </b:if> <b:include cond='data:display == "list"' name='list'/> <b:include cond='data:display == "cloud"' name='cloud'/> </b:includable> <b:includable id='cloud'> <div expr:class='"widget-content " + data:display + "-label-widget-content"'> <b:loop values='data:labels where(l => l.name not contains "#")' var='label'> <a class='category-label' expr:href='data:label.url'><svg aria-label='Category' class='svg' style='margin-right:3px;font-size:1.1rem'><use href='#svg-folder'/></svg><data:label.name/><span class='label-count'><b:if cond='data:showFreqNumbers'>(<data:label.count/>)</b:if></span></a> </b:loop> </div> </b:includable> <b:includable id='content'/> <b:includable id='list'> <div expr:class='"widget-content " + data:display + "-label-widget-content"'> <b:loop values='data:labels where(l => l.name contains "#")' var='label'> <a class='hashtag-label' expr:href='data:label.url'><data:label.name/><span class='label-count'><b:if cond='data:showFreqNumbers'>(<data:label.count/>)</b:if></span></a> </b:loop> </div> </b:includable> </b:defaultmarkup> <b:defaultmarkup type='PageList'> <b:includable id='main'> <b:if cond='data:title != ""'> <div class='title'><data:title/></div> </b:if> <b:include name='content'/> </b:includable> <b:includable id='content'> <b:include name='pageList'/> </b:includable> <b:includable id='overflowButton'/> <b:includable id='overflowablePageList'/> <b:includable id='pageLink'> <b:if cond='data:link.isCurrentPage'> <li><span class='current-page'><data:link.title/></span></li> <b:else/> <li><a expr:href='data:link.href'><data:link.title/></a></li> </b:if> </b:includable> <b:includable id='pageList'> <div class='list-widget'> <ul> <b:loop values='data:links' var='link'> <b:include name='pageLink'/> </b:loop> </ul> </div> </b:includable> </b:defaultmarkup> <b:defaultmarkup type='LinkList'> <b:includable id='main'> <b:if cond='data:title != ""'> <div class='title'><data:title/></div> </b:if> <b:include name='content'/> </b:includable> <b:includable id='content'> <div class='list-widget'> <ul> <b:loop values='data:links' var='link'> <b:if cond='data:blog.url == data:link.target'> <li><span class='current-page'><data:link.name/></span></li> <b:else/> <li><a expr:href='data:link.target'><data:link.name/></a></li> </b:if> </b:loop> </ul> </div> </b:includable> </b:defaultmarkup> <b:defaultmarkup type='HTML'> <b:includable id='main'> <b:if cond='data:title != ""'> <div class='title'><data:title/></div> </b:if> <div class='widget-content'> <data:content/> </div> </b:includable> </b:defaultmarkup> </b:defaultmarkups> <b:if cond='data:view.isSingleItem'> <!-- Auto TOC Generator via: https://itblogger-note.blogspot.com/2021/12/fast-and-simple-auto-toc.html --> <script>/*<![CDATA[*/ !function(e,t){const n=t.querySelector(".post-body");if(!n)return;const s=t.createElement("details"),l=t.createElement("summary"),r=t.createElement("ul");s.id="toc",s.open=!1,l.className="toc-title",l.title="Open/Close TOC",l.innerHTML='<svg aria-label="List" class="svg-icon-24 list"><use href="/responsive/sprite_v1_6.css.svg#ic_menu_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"/></svg>CONTENTS<svg aria-label="Open/Close" class="svg-icon-24 angle"><use href="/responsive/sprite_v1_6.css.svg#ic_expand_more_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"/></svg>',r.className="toc-container",s.appendChild(l),s.appendChild(r);const a=n.querySelectorAll("h2, h3, h4");if(a.length<3)return;a[0].parentNode.insertBefore(s,a[0]);const c=[],i=[{level:1,element:r}];a.forEach(e=>{const t=parseInt(e.tagName.substring(1));c.push(t)}),a.forEach((e,n)=>{const s=parseInt(e.tagName.substring(1)),l=c[n+1],r=t.createElement("li"),a=t.createElement("a"),o=n+1,h=t.createElement("ul");let p;a.innerHTML=e.innerHTML,a.href=`#${o}`,r.appendChild(a),s<l&&r.appendChild(h),e.id=o;do{p=i.pop()}while(p.level>=s);p.element.appendChild(r),i.push(p),i.push({level:s,element:h})})}(window,document); //Back to TOC button const toc = document.querySelector("#toc"); if (toc) { let backToc = document.querySelector("body"); backToc.insertAdjacentHTML("beforeend", '<a id="backtoc" title="TOC" href="#toc"><svg aria-label="Back to TOC button" class="svg-icon-24 list"><use href="/responsive/sprite_v1_6.css.svg#ic_menu_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"/></svg></a>') } /*]]>*/</script> <!-- Smooth Scroll --> <script>/*<![CDATA[*/ window.addEventListener("DOMContentLoaded",function(){$('a[href^="#"]').click(function(){const t=$(this).attr("href"),n=$("#"==t||""==t?"html":t).offset().top-50;$("html, body").animate({scrollTop:n},1e3,"swing")})}); /*]]>*/</script> <!-- Scroll Button --> <div id='scroll-button'> <span id='pagetop' title='Scroll to Top'><svg aria-label='Up'><use href='#svg-angles-down'/></svg></span> <span id='pagebottom' title='Scroll to Bottom'><svg aria-label='Down'><use href='#svg-angles-down'/></svg></span> </div> </b:if> <script>/*<![CDATA[*/ window.addEventListener("DOMContentLoaded",function(){let a=$("#pagetop"),b=$("#pagebottom"),c=$("#m-pagetop"),d=$("#m-pagebottom");$(window).scroll(function(){$(this).scrollTop()>800?a.fadeIn():a.fadeOut(),$(this).scrollTop()>0&&$(this).scrollTop()<$(document).height()-1200?b.fadeIn():b.fadeOut()}),a.click(function(){$("body, html").animate({scrollTop:0},1e3)}),b.click(function(){$("body, html").animate({scrollTop:$(document).height()},1e3)}),c.click(function(){$("body, html").animate({scrollTop:0},1e3)}),d.click(function(){$("body, html").animate({scrollTop:$(document).height()},1e3)})}) /*]]>*/</script> <b:if cond='data:view.isPost'> <!-- Post Titled Pagenation: https://googlebloggertrouble.blogspot.com/2022/03/bloggernextlinktitle.html --> <script>/*<![CDATA[*/ function setPagerLinkTitleName(){setPageTitle("Blog1_blog-pager-older-link"),setPageTitle("Blog1_blog-pager-newer-link")}function setPageTitle(b){let a=document.getElementById(b);if(!a)return;let c=a.getAttribute("href"),d=c.split(location.hostname)[1];fetch("/feeds/posts/summary?alt=json&path="+d+"&max-results=1").then(a=>a.json()).then(b=>{b.feed.entry&&b.feed.entry.length>0&&(a.textContent=b.feed.entry[0].title.$t),a.setAttribute("title",b.feed.entry[0].title.$t)}).catch(a=>console.log(a))}document.addEventListener("DOMContentLoaded",setPagerLinkTitleName) /*]]>*/</script> </b:if> <b:if cond='data:view.isMultipleItems and !data:view.search.query and !data:view.isArchive'> <!-- Numbered Pagenation: https://mrbloggertricks.blogspot.com/2015/09/how-to-add-next-previous-numbered.html --> <script>/*<![CDATA[*/ let nopage,jenis,nomerhal,lblname1,postperpage=10,numshowpage=3,upPageWord="<",downPageWord=">",home_page="/",urlactivepage=location.href;function loophalaman(a){let e="";nomerkiri=parseInt(numshowpage/2),nomerkiri==numshowpage-nomerkiri&&(numshowpage=2*nomerkiri+1),mulai=nomerhal-nomerkiri,mulai<1&&(mulai=1),maksimal=parseInt(a/postperpage)+1,maksimal-1==a/postperpage&&(maksimal-=1),akhir=mulai+numshowpage-1,akhir>maksimal&&(akhir=maksimal),e+="<span class='showpageOf'>Page <span id='page-num'>"+nomerhal+"</span> / "+maksimal+"</span>";const s=parseInt(nomerhal)-1;nomerhal>1&&(e+=2==nomerhal?"page"==jenis?'<span class="showpage"><a href="'+home_page+'"aria-label="home">'+upPageWord+"</a></span>":'<span class="showpageNum"><a href="/search/label/'+lblname1+'">'+upPageWord+"</a></span>":"page"==jenis?'<span class="showpageNum"><a href="#" aria-label="next" onclick="redirectpage('+s+');return false">'+upPageWord+"</a></span>":'<span class="showpageNum"><a href="#" aria-label="next" onclick="redirectlabel('+s+');return false">'+upPageWord+"</a></span>"),mulai>1&&(e+="page"==jenis?'<span class="showpageNum"><a href="'+home_page+'"aria-label="home">1</a></span>':'<span class="showpageNum"><a href="/search/label/'+lblname1+'">1</a></span>'),mulai>2&&(e+="…");for(let a=mulai;a<=akhir;a++)e+=nomerhal==a?'<span class="showpagePoint">'+a+"</span>":1==a?"page"==jenis?'<span class="showpageNum"><a href="'+home_page+'">1</a></span>':'<span class="showpageNum"><a href="/search/label/'+lblname1+'">1</a></span>':"page"==jenis?'<span class="showpageNum"><a href="#" onclick="redirectpage('+a+');return false">'+a+"</a></span>":'<span class="showpageNum"><a href="#" onclick="redirectlabel('+a+');return false">'+a+"</a></span>";akhir<maksimal-1&&(e+="…"),akhir<maksimal&&(e+="page"==jenis?'<span class="showpageNum"><a href="#" onclick="redirectpage('+maksimal+');return false">'+maksimal+"</a></span>":'<span class="showpageNum"><a href="#" onclick="redirectlabel('+maksimal+');return false">'+maksimal+"</a></span>");const n=parseInt(nomerhal)+1;nomerhal<maksimal&&(e+="page"==jenis?'<span class="showpageNum"><a href="#" aria-label="prev" onclick="redirectpage('+n+');return false">'+downPageWord+"</a></span>":'<span class="showpageNum"><a href="#" aria-label="prev" onclick="redirectlabel('+n+');return false">'+downPageWord+"</a></span>");for( t=document.getElementsByName("pageArea"),r=document.getElementById("blog-pager"),l=0;l<t.length;l++)t[l].innerHTML=e;t&&t.length>0&&(e=""),r&&(r.innerHTML=e)}function hitungtotaldata(a){const e=a.feed;loophalaman(parseInt(e.openSearch$totalResults.$t,10))}function halamanblogger(){let a,e=urlactivepage;-1!=e.indexOf("/search/label/")&&(lblname1=-1!=e.indexOf("?")?e.substring(e.indexOf("/search/label/")+14,e.indexOf("?")):e.substring(e.indexOf("/search/label/")+14,e.length)),-1==e.indexOf("?q=")&&-1==e.indexOf(".html")&&(-1==e.indexOf("/search/label/")?(jenis="page",nomerhal=-1!=urlactivepage.indexOf("#PageNo=")?urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length):1,(a=document.createElement("script")).setAttribute("src",home_page+"feeds/posts/summary/?max-results=1&alt=json-in-script&callback=hitungtotaldata"),document.body.appendChild(a)):(jenis="label",nomerhal=-1!=urlactivepage.indexOf("#PageNo=")?urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length):1,(a=document.createElement("script")).setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?alt=json-in-script&callback=hitungtotaldata&max-results=1"),document.body.appendChild(a)))}function redirectpage(a){jsonstart=(a-1)*postperpage,nopage=a;const e=document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript",s.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost"),e.appendChild(s)}function redirectlabel(a){jsonstart=(a-1)*postperpage,nopage=a;const e=document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript",s.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost"),e.appendChild(s)}function finddatepost(a){post=a.feed.entry[0];const e=post.published.$t.substring(0,19)+post.published.$t.substring(23,29),s=encodeURI(e).replace("+","%2B");if("page"==jenis)n="/search?updated-max="+s+"#PageNo="+nopage;else n="/search/label/"+lblname1+"?updated-max="+s+"#PageNo="+nopage;location.href=n}halamanblogger(); /*]]>*/</script> </b:if> <!-- defer.js --> <script id='defer-js' src='//cdn.jsdelivr.net/npm/@shinsenter/defer.js@latest/dist/defer.min.js'/> <script>/*<![CDATA[*/ Defer.dom("img"),Defer.dom("iframe"),Defer.dom("audio"),Defer.dom("video");const twitterEmbed=document.querySelectorAll(".twitter-tweet,.twitter-timeline"),instaEmbed=document.getElementsByClassName("instagram-media");try{0!==twitterEmbed.length&&Defer.js("//platform.twitter.com/widgets.js","widgets-js",2500),0!==instaEmbed.length&&Defer.js("//www.instagram.com/embed.js","embed-js",2500)}catch(a){console.log(a)} /*]]>*/</script> <!-- jQuery --> <script defer='defer' src='//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js'/> <!-- Mobile Parameter Remove script taken from JetTheme --> <script>/*<![CDATA[*/ function rmurl(t){const r=new RegExp(/\?m=0|\?m=1|\&m=0|\&m=1/);return t=t.replace(r,''),history.replaceState({},document.title,t),t;}const currentUrl=rmurl(location.toString()); /*]]>*/</script> <b:if cond='data:view.isSingleItem'> <!-- Anonymous Avatar --> <script>/*<![CDATA[*/ window.addEventListener("DOMContentLoaded",function(){$('img[data-src="//resources.blogblog.com/img/blank.gif"]').attr("data-src","//1.bp.blogspot.com/-2vBtU10Te7c/YjSMMILIigI/AAAAAAAAXTU/5po01iBCejgqrm_qfV8YohE4xYzF6rDFwCNcBGAsYHQ/s100-rw-e365/avatar.png").attr("alt","No Image"),$('img[data-src="//www.blogger.com/img/blogger_logo_round_35.png"]').attr("data-src","//1.bp.blogspot.com/-B0GVL8a1IOI/ZDHc5NYRkLI/AAAAAAAAZug/zc2qCXcQbz4505az3UdUPVvKU_qzvWpBQCNcBGAsYHQ/s100-rw-cc-e365/no-image-avatar.png").attr("alt","No Image")}) /*]]>*/</script> </b:if> <!-- details summary Animation: https://css-tricks.com/how-to-animate-the-details-element/ --> <script>/*<![CDATA[*/ class Accordion{constructor(a){this.el=a,this.summary=a.querySelector("summary"),this.content=a.querySelector("details ul"),this.animation=null,this.isClosing=!1,this.isExpanding=!1,this.summary.addEventListener("click",a=>this.onClick(a))}onClick(a){a.preventDefault(),this.el.style.overflow="hidden",this.isClosing||!this.el.open?this.open():(this.isExpanding||this.el.open)&&this.shrink()}shrink(){this.isClosing=!0;let a=`${this.el.offsetHeight}px`,b=`${this.summary.offsetHeight}px`;this.animation&&this.animation.cancel(),this.animation=this.el.animate({height:[a,b]},{duration:300,easing:"ease-out"}),this.animation.onfinish=()=>this.onAnimationFinish(!1),this.animation.oncancel=()=>this.isClosing=!1}open(){this.el.style.height=`${this.el.offsetHeight}px`,this.el.open=!0,window.requestAnimationFrame(()=>this.expand())}expand(){this.isExpanding=!0;let a=`${this.el.offsetHeight}px`,b=`${this.summary.offsetHeight+this.content.offsetHeight}px`;this.animation&&this.animation.cancel(),this.animation=this.el.animate({height:[a,b]},{duration:400,easing:"ease-out"}),this.animation.onfinish=()=>this.onAnimationFinish(!0),this.animation.oncancel=()=>this.isExpanding=!1}onAnimationFinish(a){this.el.open=a,this.animation=null,this.isClosing=!1,this.isExpanding=!1,this.el.style.height=this.el.style.overflow=""}}document.querySelectorAll("details").forEach(a=>{new Accordion(a)}) /*]]>*/</script> <!-- Page List / Link List Open in New Tab --> <script>/*<![CDATA[*/ const externalLink=document.querySelectorAll(".PageList a, .LinkList a");window.addEventListener("DOMContentLoaded",()=>{for(i=0;i<externalLink.length;i++){let e=externalLink[i].href;console.log(e),e.match(location.hostname)||e.match(/^https?:\/\//)&&(externalLink[i].target="_blank",externalLink[i].rel="noopener")}}); /*]]>*/</script> <!-- Center Aligning Embedded Tweet --> <script>/*<![CDATA[*/ const xLayout=document.querySelectorAll(".twitter-tweet");window.addEventListener("DOMContentLoaded",()=>{for(i=0;i<xLayout.length;i++)xLayout[i].setAttribute("data-width","540"),xLayout[i].setAttribute("data-align","center")}); /*]]>*/</script> <noscript> <div id='noscript-msg'> <p>Please enable JavaScript to Enjoy This Blog.</p> </div> </noscript> </body> </html>
Encontrar Diferença