.breadcrumbs a,.breadcrumbs li{display:inline-block}
.breadcrumbs{line-height:1.5em;width:auto;padding:0 0 10px;font-size:14px;color:#444;margin:0 30px 0 0;font-weight:500}
.breadcrumbs li{list-style-type:none;float:left}
.breadcrumbs a{text-decoration:none;outline:0;transition:all .3s ease-in-out;color:#444;font-weight:400}
.breadcrumbs a:hover{color:#0379C4}
.breadcrumbs-icon {vertical-align: -15%;font-size: inherit;text-rendering: optimizeLegibility}
/* Posts */
.post-meta {
width:100%
margin-top:10px;
margin-bottom:15px;
display:block;
text-align: left;
font-size: 11px;
color: #aaa;
padding: 0;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
height:50px;
}
.post-meta a {
color: #0e72b5;
text-decoration: none;
text-transform:uppercase;
font-size:11px;
color: #444;
}
.post-meta a:hover {
color:#aaa;
}
.post-meta-span {
margin-right: 15px;
}
.post-meta-left {border-right: 1px solid #ddd;float:left;height:50px;margin-right:20px;padding-right:15px}
.post-meta-right {float:left;vertical-align:middle;margin-top: 8px;}
.meta-author {margin-top:13px;margin-bottom:2px}
amp-social-share[type="twitter"], amp-social-share[type="gplus"], amp-social-share[type="facebook"], amp-social-share[type="linkedin"], amp-social-share[type="pinterest"] {
background-color:#999;
border-radius:100px;
background-size:25px 25px;
transition:all .4s ease-out;
}
amp-social-share[type="twitter"]:hover {background-color:#55ACEE}
amp-social-share[type="gplus"]:hover {background-color:#DC4E41}
amp-social-share[type="facebook"]:hover {background-color:#3B5998}
amp-social-share[type="linkedin"]:hover {background-color:#0077B5}
amp-social-share[type="pinterest"]:hover {background-color:#BD081C}
a.color-label {font-size:15px;font-weight:700;background:#fff;padding:5px 10px;border-radius:3px;color:#555;text-decoration:none;margin-bottom:15px;transition:all .4s ease-out;}
a:hover.color-label {background:#0379c4;color:#fff}
.post-labels{margin-bottom:20px;position:absolute; width:92%;margin:-265px auto 0;text-align:center}
.post {
margin:0;
padding:0;
background-color:#fff;
box-shadow: 0 0 3px rgba(0,0,0,0.12),0 0 2px rgba(0,0,0,0.18);
overflow: hidden;
border:1px solid #dbdbdb;
}
.post-inner{padding:30px 30px 0;position:relative;margin:0 auto}
.post h2 {
width:93%;
margin:0 auto;
padding:30px;
background-color:rgba(0,0,0,0.6);
font-size:220%;
font-weight:700;
line-height:1.3em;
text-align:center;
position:absolute;
top:-180px;
left:0;
color:#fff;
z-index:99;
}
.post h2 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#333;
transition: all .5s ease-in-out;
}
.post h2 strong, .post h2 a:hover {
color:#0e72b5;
}
.post h3 {
margin:.25em 0 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:700;
line-height:1.3em;
color:#333;
}
.post .post-title {
margin-bottom:15px;
}
.post-body {
margin:25px 0 .75em;
line-height:1.6em;
}
.post-body img{
width:100%
}
.post-body blockquote {
line-height:1.3em;
}
.post-footer {
margin:40px 0;
line-height:1.7em;
}
.post-snippet {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.comment-link {
margin-left:.6em;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
.related-box {max-height:360px;margin-top:-35px;}
section[expanded] .show-more,section:not([expanded]) .show-less{display:none}
.disqus-comments h4{background:none;border:none;width:50%;margin:0 auto;text-align:center;}
.disqus-hide{font-weight:400;line-height:60px;font-size:14px;margin:0 auto;padding:12px 90px;text-align:center;color:#333;background:#f8f8f8;border:none;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);border:1px solid #ddd;transition:all .4s ease-in-out;clear:both}
.disqus-hide:hover {background:#eee}
.disqus-comments amp-iframe{margin-left:-8px;margin-right:-8px}
/* Costumize */
.post-thumbnail {
width:100%;
height:auto;
float:left;
margin:2px 15px 15px 0;
}
pre {
padding:.5em 1em;
margin: 0;
white-space:pre;
overflow:auto;
background-color:#f1f1f1;
font-size:14px;
clear:both;
border-left:3px solid #ccc;
color:#111;
}
code {
font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;
line-height:20px;
color:#db4437;
font-size:14px;
}
pre code {
display: block; padding: 0.5em;
line-height:1.5em;
color: black;
}
::selection { background: #1066b9;color:white }
::-moz-selection { background: #1066b9; color:white}
.thumbnail-cadangan {display:none}
.centered {text-align:center}
.copy-code {
-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
user-select: all;
}
#blog-pager-newer-link a{
float:left;margin-left:0;background:#aaa;color:#fff;border-radius:100px;width:30px;height:30px;transition:all .4s ease-out}
#blog-pager-older-link a{float:right;margin-right:0;background:#aaa;color:#fff;border-radius:100px;width:30px;height:30px;transition:all .4s ease-out;}
.home-link {display:none}
#blog-pager-newer-link a:hover, #blog-pager-older-link a:hover{background:#0379c4;color:#fff}
#blog-pager {text-align:center;margin-top:20px}
.font-arrow {font-size:28;vertical-align:-11px}
.feed-links {
display:none;
}
.clear {clear:both}
/* Profile
----------------------------------------------- */
.profile-img {
float:left;
margin-top:0;
margin-right:5px;
margin-bottom:5px;
margin-left:0;
padding:4px;
border:1px solid #ccc;
}
.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font-weight:bold;
line-height:1.6em;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-textblock {
margin:0.5em 0;
line-height:1.6em;
}
.profile-link {
text-transform:uppercase;
letter-spacing:.1em;
}
/* Footer
----------------------------------------------- */
#footer-wrapper {
height:80px;
width:100%;
clear:both;
color:#666;
text-align:left;
display:block;
font-size:14px;
background-color:#ebebeb;
}
#footer {
max-width:768px;
margin:0 auto;
padding:0;
color:#888;
}
#footer a {
color:#666;
text-decoration:none;
}
#footer a:hover {
color:#0e72b5;
}
img {
max-width:100%;
height:auto;
width:auto;
}
.creditpic{margin-top:20px;padding:30px 0 30px;position:relative}
.credit-wrapper {max-width:768px;margin:0 auto}
.credit{line-height:1.6em;font-size:12px;font-weight:400;color:#888;clear:both;margin:0 auto;padding:0;text-align:left}
.credit-right{float:right}
.credit a,.credit a:visited{color:#666;text-decoration:none}
.credit a:hover{color:#0379C4;text-decoration:none}
/* RESPONSIVE */
@media screen and (max-width:768px) {
.search-wrapper{top:0}
}
@media screen and (max-width:736px) {
#header, #content-wrapper, #footer {max-width:690px}
#header h1 {text-align:center; margin:0 auto;float:none}
.description {display:none}
.post h2{top:-150px;}
.post-labels {margin: -225px auto 0;}
.disqus-comments h4{width:75%}
.related-box {max-height:350px}
}
@media screen and (max-width:667px) {
#header, #content-wrapper, #footer {max-width:627px}
.post h2 {font-size:28px}
}
@media screen and (max-width:640px) {
#header, #content-wrapper, #footer {max-width:600px}
.breadcrumbs{padding:5px 0 10px;margin:0;}
}
@media screen and (max-width:600px) {
#header, #content-wrapper, #footer {max-width:560px}
}
@media screen and (max-width:568px) {
#header, #content-wrapper, #footer {max-width:545px}
}
@media screen and (max-width:414px) {
#main-wrapper {width:100%}
.post {width:100%;box-shadow:none;border:none}
.post-inner {padding:20px 20px 0}
.post h2 {position:relative;color:#222;background:none;font-size:24px;text-align: center;width:100%;padding:0;text-align:left;top:0}
.post-meta {position:relative;margin-top:20px}
.post-meta-left {margin-right:20px;padding-right:10px}
.post-meta-right {float:right}
a.color-label {font-size:12px;background:#999;padding:5px 10px;border-radius:3px;color:#fff;text-decoration:none;margin-bottom:15px;transition:all .4s ease-out;}
a:hover.color-label {background:#666;}
.post-labels{margin-bottom:40px;position:relative;margin:0;width:100%;text-align:left}
#main-wrapper {margin: -240px auto 15px;}
#blog-pager-older-link a {margin-right:15px}
#blog-pager-newer-link a {margin-left:15px}
#header, #footer {max-width:390px}
.credit-right{float:left}
.creditpic{padding:25px 0 20px;}
.breadcrumbs{margin:20px 0;}
.disqus-comments h4{width:90%}
.related-box {max-height:600px}
#search-box{width:270px}
}
@media screen and (max-width:375px) {
#header, #footer {max-width:350px}
.disqus-comments h4{width:100%}
.disqus-hide {padding:12px 60px}
}
@media screen and (max-width:360px) {
#header, #footer {max-width:340px}
}
@media screen and (max-width:321px) {
#header, #footer {max-width:300px}
amp-social-share[type="linkedin"]{display:none}
}
Cara Embed Status dan Video Facebook di Blog dengan AMP HTML
Untuk menampilkan status atau Video Facebook ke Blog, syarat utama simpan JS ini di tag head
<script async='async' custom-element='amp-facebook' src='https://cdn.ampproject.org/v0/amp-facebook-0.1.js'/>
Contoh kode untuk menampilkan postingan / Status Facebook
<amp-facebook width="552"
height="303"
layout="responsive"
data-href="https://www.facebook.com/zuck/posts/10102593740125791">
</amp-facebook>
Layout yang support:
fill,
fixed,
fixed-height,
flex-item,
nodisplay,
responsive
Untuk menampilkan Video Facebook
<amp-facebook width="552"
height="310"
layout="responsive"
data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
</amp-facebook>
Tambahkan
data-embed-as="video" maka hanya tampil video saja dan responsive.
<amp-facebook width="552"
height="310"
layout="responsive"
data-embed-as="video"
data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
</amp-facebook>
Tambahkan Komentar