<data:blog.pageTitle/> <data:blog.pageName/> - <data:blog.title/> All Posts - <data:blog.title/> Page Not Found - <data:blog.title/> <data:blog.pageName/> Variable definitions end ========================*/ /** * Eric Meyer's Reset CSS v2.0 http://meyerweb.com/eric/tools/css/reset/ * http://cssreset.com */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;/*font-size:100%;*/font:inherit;vertical-align:baseline;} /* HTML5 display-role reset for older browsers */ article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;display:block;}*{margin:0;padding:0;}html{display:block;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;} /* Blogger CSS Reset */ .section,.widget{margin:0 0 0 0;padding:0 0 0 0;} .navbar,.blog-feeds,.feed-links,#backlinks-container,a.home-link,.blog-mobile-link{display:none;} .post-body .separator > a, .post-body .separator > span {margin-left: 0 !important;} .quickedit,.thread-toggle,.edit-post,.item-control{display:none;} /* disable font boosting on mobile browsers */ body * { max-height: 9999999em; /* Chrome for Android */ -moz-text-size-adjust: none; /* Firefox Mobile */ } /* FRAMEWORK */ strong,b{font-weight:bold;} cite,em,i{font-style:italic;} a:link{color:$(link.color);text-decoration:none;outline:none;} a:visited{color:$(link.color);text-decoration:none;} a:hover{color:$(link.hover.color);text-decoration:none;} a img{border:none;border-width:0;outline:none;} abbr,acronym{border-bottom:1px dotted;cursor:help;} sup,sub{vertical-align:baseline;position:relative;top:-.4em;font-size:86%;} sub{top:.4em;}small{font-size:86%;} kbd{font-size:80%;border:1px solid #777;padding:2px 5px;border-bottom-width:2px;border-radius:3px;} mark{background-color:#ffce00;color:black;} p,blockquote,pre,table,figure,hr,form,ol,ul,dl{margin:1.5em 0;} hr{height:1px;border:none;background-color:#666;} h1{font-size:1.8rem} h2{font-size:1.6rem} h3{font-size:1.4rem} h4{font-size:1.2rem} h5{font-size:1rem} h6{font-size:0.9rem} /* heading */ h1,h2,h3,h4,h5,h6 { margin: 0 0 0.6em; } /* list */ ol,ul,dl{margin: .5em 0em .5em 3em} li{margin: .5em 0} dt{font-weight: 500} dd{margin: 0 0 .5em 2em} /* form */ input,button,select,textarea{font:inherit;font-size:100%;line-height:normal;vertical-align:baseline;} textarea{display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} /* code & blockquote */ pre,code{font-family: "Courier New",Courier,Monospace;font-size: 95%;padding: 12px 0 20px 20px;border-radius: 8px;background: #e6f4ea;color: #060;} pre{white-space:pre;word-wrap:normal;overflow:auto;} blockquote{background:#f6f6f6;border-left:3px solid #0066cc;margin-left:1em;margin-right:1em;padding:1em 1em;font-style:italic;font-size:105%;} blockquote:before { content: "\f10d"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; padding-right:4px; color:#666; } /* table */ table[border="1"] td, table[border="1"] th { vertical-align: top; text-align: left; font-size: 13px; padding: 3px 5px; border: 1px solid #f6f6f6; } table[border="1"] th { background: #eee; } table, img { max-width: 100%; height: auto; } iframe { max-width: 100%; } td.tr-caption { color: #777; } .clear { clear: both; } .clear:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } /* TRANSISI */ a:link, .label-count, #cssmenu ul ul li, #cssmenu > ul > li.has-sub > a:before, #cssmenu ul ul li.has-sub > a:before, .button:before, .button.menu-opened:after, .berlangganan-box input.submit-email[type="submit"], .berlangganan-box input.email-address[type="text"] { transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; } .related-post-style-3 .related-post-item { transition: opacity 0.2s linear; } .img-thumbnail, .img-thumbnail img, .label-info-th a, .info-1, .info-2, h2.post-title, .post-snippet, .sidebar-sticky { transition: all .2s linear; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; } #searchfs input[type="search"], h1,h2,h3,h4,h5,h6 { transition: font-size .2s linear; -o-transition: font-size .2s linear; -moz-transition: font-size .2s linear; -webkit-transition: font-size .2s linear; } body { background: $(body.background); margin: 0 0 0 0; padding: 0 0 0 0; color: $(body.text.color); font: $(body.font); text-align: left; } /* WRAPPER */ #wrapper { background: #fff; max-width: 1068px; margin: 0 auto; padding: 80px 30px 30px; overflow: hidden; } /* HEADER */ #header-container { background: $(header.background.kiri); webkit-box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28); box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2); position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 999; height: 65px; } #header-wrapper { max-width: 1068px; margin: 0 auto; position: relative; } .header { max-width: 400px; float: left; margin-right: 28px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .header h1.title, .header p.title { font: $(header.font); color: $(header.title.color); margin: 0; text-transform: uppercase; padding: 13px 0; } .header .description { color: $(header.title.color); margin: -10px 0 4px 0; padding: 0; font-size: 0.7em; display: none; } .header a, .header a:hover { color: $(header.title.color); } .header img { display: block; width: auto; margin:0; max-height: 65px; } /* CSS Breaking News */ #breakingnews {margin:0 0 20px;height:25px;line-height:25px;overflow:hidden;border:0;} #breakingnews .breakhead { background: #222; position:absolute; font-size: 12px; text-transform: uppercase; color: #fff; padding: 2px 10px; display: inline-block; line-height: 22px; -webkit-transition: background-color .3s; -moz-transition: background-color .3s; -o-transition: background-color .3s; transition: background-color .3s; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;} #adbreakingnews li a {font-weight:400;color:#111;margin-top:10px;transition:all 0.5s ease-in-out;} #adbreakingnews li a:hover {color:#4db2ec;} #adbreakingnews {float:left;margin-left:130px;margin-top:0;font-size: 15px} #adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0} /* FEATURED POST */ #featured-posts-section{max-height:450px;overflow:hidden;margin:0 auto 20px} .featured-post a{font-size:1.2em;color:#fff;} .featured-post a:hover{color:#fff;text-decoration:none;} .main-post.featured-post a{margin:0;font-size:17px} .featured-post .col-post{float:left;position:relative;overflow:hidden;margin:0} .featured-post .secondary-post{width:24.8%;margin:0 0 -2px 3px;transition:all .4s} .featured-post .main-post{width:532px;padding:0;transition:all .4s} .featured-post .main-post:before,.featured-post .secondary-post:before{bottom:4px;content:"";display:block;height:70%;width:100%;position:absolute;z-index: 1; background: -moz-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.7) 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(40%,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,.7))); background: -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.7) 100%); background: -o-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.7) 100%); background: -ms-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.7) 100%); background: linear-gradient(to bottom,rgba(0,0,0,0) 40%,rgba(0,0,0,.7) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#b3000000',GradientType=0);} .featured-post .main-post:after,.featured-post .secondary-post:after{content:'';background-color:rgba(0,0,0,0.2);position:absolute;text-align:center;top:0;left:0;right:0;bottom:4px;z-index:1;opacity:0;visibility:hidden;transform:scale(0.8);transition:all 0.20s linear} .featured-post .main-post:hover:after,.featured-post .secondary-post:hover:after{opacity:1;visibility:visible;transform:scale(1.0)} .featured-post span{background:rgba(0,0,0,.7);display:inline-block;color:#fff;font-style:normal;position:absolute;transition:all .4s;font-size:10px;line-height:13px;margin:0 0 5px;padding:3px 7px;text-transform: uppercase;top:10px;left:10px;z-index:2} .featured-post .main-post:hover span,.featured-post .secondary-post:hover span{background:#4db2ec;} .featured-post img{height:100%;transition-timing-function: ease!important;transition: transform .3s ease,opacity .3s;-webkit-transition: -webkit-transform .3s ease,opacity .3s;} .featured-post .main-post img{height:450px;width:100%;object-fit:cover;} .featured-post .secondary-post img{height:225px;object-fit:cover;width:100%;} .featured-post .main-post:hover img,.featured-post .secondary-post:hover img {-webkit-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1);} .featured-post header{position:absolute;bottom:5px;left:0;right:0;padding:20px;z-index:2;} .featured-post .secondary-post header{padding:10px} .featured-post header h3{text-shadow: 1px 1px 3px rgba(0,0,0,.2);font-size:27px;} .featured-post h4{font-size:14px;} span.label-info a.label-block:nth-child(n+2),.showpageOf {display:none;} /* POST WRAPPER */ .post-container { padding-right: 25px; } #post-wrapper { background:transparent; float:left; width:75%; max-width:750px; margin:0 0 10px; } .breadcrumbs { font-size: 12px; font-family: open sans,arial,sans-serif; margin: 0; color: #c3c3c3; padding: 0px 0px 10px; display: inline-block; border-bottom: 0;} .breadcrumbs a { color: #c3c3c3; } .breadcrumbs a:hover { color: #777777; } .post { margin-bottom: 20px; } .post-body { font:$(post.body.font); color:$(post.body.color); line-height: 1.6em; text-align: left; word-wrap: break-word; } h2.post-title, h1.post-title { font: $(post.title.font); } h1.post-title { font-size: 35px; margin-bottom: 12px; } h2.post-title, h2.post-title a { margin-bottom: 12px; padding:0; color: $(post.title.color); } h1.post-title a, h1.post-title { padding:10px 0 10px; color: $(post.title.color); line-height: 1.6em; } h2.post-title a:hover, h1.post-title a:hover { color: $(post.title.hover.color); } .img-thumbnail { position: relative; float: left; width: 255px; height: 170px; } .img-thumbnail img { width: 255px; height: 170px; display: block; } /* GAMBAR DALAM POSTINGAN */ .thumb-post { max-width:100%; height:auto; margin:0 auto; padding:10px 0; position:relative; } .thumb-post img { width:100%; max-width:100%; height:auto; max-height:450px; margin:0 0 -4px; } .label-info-th { display: block; z-index: 2; position: relative; margin-bottom: 10px; } .label-line, .label-line-c { position:relative; } .label-line-c { text-align: center; margin-bottom: 6px; } .label-line:before, .label-line-c:before { z-index: 1; content: ""; width: 100%; height: 2px; background: $(label.border.color); position: absolute; top: 50%; left: 0; margin-top: -2px; } .label-info-th a { color: $(label.color); background: $(label.bg.color); display: inline-block; padding: 6px 12px; margin: 1px 0; font-size: 11px; font-weight: 500; text-transform: uppercase; border: 2px solid $(label.border.color); } .label-info-th a:hover { color: $(link.color); } /* LABEL DALAM POST */ .label-wrap { display:block; color:#666; padding:5px 0; border:0; overflow:hidden; } .label-info{ position:relative; margin:auto; } .label-info a { float: left; background: #29c5f6; display: inline-block; position: relative; font-size: 10px;margin: 0 8px 0 0; color: #fff; text-decoration: none; padding: 3px 6px 4px; white-space: nowrap; border: 0; } .label-info a:hover { background:#0389ff; color:#fff; border-color:inherit; text-decoration:none; } .breadlabel:last-child { margin:0 0 0 4px; color:#c3c3c3; } .post-info { color: $(post.footer.color); font: $(post.footer.font); } .info-1, .info-2, h2.post-title, .post-snippet { margin-left: 275px; } .info-1 { margin-bottom: 10px; } .info-2 { margin-top: 12px; } .info-3 { margin-bottom: 1.6em; } .post-info a { display: inline-block; font-weight: 600; color: #111111; } .post-info a:hover { color: $(link.color); } .author-info:after, .time-info:after { content: "-"; padding: 0 2px; } .comment-info { position: relative; float: right; font-family: open sans,arial,sans-serif; font-size: 10px; font-weight: 600; text-align: center; line-height: 1; } .comment-info a { color: #fff; background-color: #000; display: inline-block; min-width: 8px; padding: 3px 4px 4px 5px; position: relative; } .comment-info a:after { position: absolute; bottom: -3px; left: 0; content: ''; width: 0; height: 0; border-style: solid; border-width: 3px 3px 0 0; border-color: #000 transparent transparent transparent; } .edit-post:before { content: "-"; padding: 0 2px; } /* AUTHOR POST PROFILE */ .author-profile { overflow: hidden; margin: 30px 0; line-height: 1.5; } .author-profile img { border: none; float: left; margin-right: 15px; border-radius: 46px; } .author-profile > span { font-size: 14px; color: #888; } .author-profile a.g-profile { font-weight: 500; color: $(link.hover.color); font-size: 18px; margin-bottom: 5px; display: inline-block; } .author-profile a.g-profile:hover { color: $(link.color); } .author-profile a.g-profile:after { content: "\f058"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; padding-right: 4px; color: $(link.color); } /* SIDEBAR WIDGET */ #sidebar-wrapper { background:transparent; float:right; width:30%; max-width:300px; margin:0 auto; } .latest-post-title { position: relative; margin:0 0 15px; border-bottom: 2px solid #222; } .latest-post-title h2 { font: $(widget.title.font); display: inline-block; line-height: 17px; padding: 7px 12px 4px; margin: 0; background: #222; font-size: 14px; font-weight: 400; color: #fff; text-transform: uppercase; } .sidebar h2, .sidebar-sticky h2, .above-post-widget h2, .comments h3 { font: $(widget.title.font); margin-bottom: 15px; padding: 0px 0px 5px; color: $(widget.title.color); text-transform: uppercase; display: inline-block; border-bottom: 2px solid $(widget.border.color); } .section:last-child .widget:last-child, .sidebar .widget, .sidebar-sticky .widget, .above-post-widget .widget, .bellow-header-widget .widget, #blog-pager { margin:0 0 30px; clear:both; } .sidebar ul, .sidebar ol, .sidebar-sticky ul, .sidebar-sticky ol { list-style-type:none; margin: 0; padding: 0; } .sidebar li, .sidebar-sticky li { margin:5px 0; padding: 0; } .sidebar-sticky { z-index: 997; } .bellow-header-widget { text-align: center; } .bellow-header-widget h2 { display: none; } .bellow-header-widget .widget { overflow: hidden; } .bellow-header-widget img, .bellow-header-widget iframe{ max-width: 100%; border: none; overflow: hidden; } /* CUSTOM WIDGET */ .widget ul { line-height:1.4em; } /* Label */ .label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 { font-size:100%; opacity:10 } .cloud-label-widget-content{ text-align:left } .label-size { transition: all 0.25s; -moz-transition: all 0.25s; -webkit-transition: all 0.25s; line-height:1.2; display: block; float: left; margin: 0 3px 3px 0; color: $(link.color); font-size: 12px; text-transform: uppercase; border: 1px solid $(link.color); } .label-size a,.label-size span{ display: inline-block; color: $(link.color); padding: 6px 8px; } .label-size:hover { border: 1px solid $(link.hover.color); } .label-size:hover a, .label-size:hover .label-count { color: $(link.hover.color); } .label-count { margin-left: -12px; margin-right: 0px; } .list-label-widget-content ul li { display: block; margin: 0 0 5px; } .list-label-widget-content ul li:last-child { margin-bottom: 10px } /* Feed */ .Feed ul li { display: block; margin: 0 0 10px; } .Feed ul li:last-child { margin-bottom: 10px; } .Feed .item-date, .Feed .item-author { color: #999; } .Feed .item-title { font-weight: 500; } /* Popular Posts */ .PopularPosts .widget-content ul, .PopularPosts .widget-content ul li, .PopularPosts .widget-content ul li img, .PopularPosts .widget-content ul li a, .PopularPosts .widget-content ul li a img { margin:0 0; padding:0 0; list-style:none; border:none; outline:none; } .PopularPosts .widget-content ul { margin: 0; list-style:none; counter-reset:num; } .PopularPosts .widget-content ul li img { display: block; width: 70px; height: 60px; float: right; } .PopularPosts .widget-content ul li { margin: 0 0 10px; counter-increment: num; position: relative; } .PopularPosts ul li:last-child { margin-bottom: 0px; } .PopularPosts ul li .item-title a, .PopularPosts ul li a { font-weight: 500; text-decoration: none; color: $(link.hover.color); font-size:14px; } .PopularPosts ul li .item-title a:hover, .PopularPosts ul li a:hover { color: $(link.color); } .PopularPosts .item-title, .PopularPosts .item-thumbnail, .PopularPosts .item-snippet { margin-left: 0; } .PopularPosts .item-title { line-height: 1.6; margin-right: 8px; } .PopularPosts .item-thumbnail { float: right; margin: 0; } .PopularPosts .item-snippet { line-height: 1.6em; font-size: 14px; margin-top: 8px; } /* Featured Post */ .FeaturedPost .post-summary { background: #ffffff; position: relative; padding: 0; min-height: 200px; max-height: 450px; overflow: hidden; } .FeaturedPost .post-summary h3 { font: $(post.title.font); position: absolute; background:rgba(0, 0, 0, 0.37); padding:20px; bottom:0; z-index: 1; font-size: 25px; margin: 0; width:100%; } .FeaturedPost .post-summary h3:after { content:""; position:absolute; top:-0.25em; right:100%; bottom:-0.25em; width:0.25em; } .FeaturedPost .post-summary h3 a { color: #ffffff; padding: 20px; -webkit-box-decoration-break: clone; -o-box-decoration-break: clone; box-decoration-break: clone; } .FeaturedPost .post-summary h3 a:hover { color: #ffffff; text-decoration: none; } .FeaturedPost .post-summary p { position: absolute; background: #ffffff; color: #5a5a5a; padding: 3px 8px; bottom: 15px; margin: 0 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 90%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .FeaturedPost .image { display: block; } /* Recent Post */ .recent-post-title { background:#fff; margin:0 0 15px; padding:0; position:relative; border-bottom: 2px solid $(recentpost.title.background.color); } .recent-post-title h2 { font:$(recentpost.title.font); height:17px; line-height:17px; margin:0 0; padding:7px 12px 4px; background:$(recentpost.title.background.color); color:$(recentpost.title.text.color); display:inline-block; border:none; text-transform:uppercase; } .recent-post-title h2 a { color:$(recentpost.title.text.color); } .recent-post-one-thumb { float:left; width:50%; margin:0 0; } .recent-post-one-thumb .widget { padding:0 20px 20px 0; } .recent-post-one-thumb .widget-content { background:$(recentpost.background.color); border:0; padding:0; } .recent-post-one-thumb ul { list-style-type:none; margin:0 0 0 0; padding:0 0 0 0; } /* Recent Post */ ul.rp_thumbs { margin:0 0 0 0; } ul.rp_thumbs li { font-size:12px; min-height:68px; margin:0 0 8px; padding:0 0 8px; border: 0; } ul.rp_thumbs .rp_thumb { position:relative; background:#fbfbfb; margin:3px 0 10px 0; width:100%; height:0; padding-bottom:46%; overflow:hidden; } ul.rp_thumbs .rp_thumb img { height:auto; width:100%; } ul.rp_thumbs2 { font-size:13px; } ul.rp_thumbs2 li { padding:0 0; min-height:76px; font-size:11px; margin: 0 0 8px; padding: 0 0 8px; border: 0; } ul.rp_thumbs2 .rp_thumb2 { background:#fbfbfb; float:left; margin:3px 8px 0 0; height:70px; width:100px; } ul.rp_thumbs2 .rp_thumb2 img { height:70px; width:100px; } span.rp_title { font:500 21px Roboto, Helvetica, Arial, sans-serif; display:block; margin:0 0 6px; line-height:25px; } span.rp_title a { color : #111111; } span.rp_title2 { font-size:14px; } span.rp_summary { font-size: 13px; color: #777; display:block; margin-top: 9px; font-family: open sans,arial,sans-serif; } span.rp_meta { background:transparent; display:block; font-size:11px; font-weight:bold; color:#aaa; text-transform:uppercase; } span.rp_meta a { color:#aaa !important; display:inline-block; } span.rp_meta_date, span.rp_meta_comment, span.rp_meta_more { font-weight:400; display:inline-block; margin-right:8px; } span.rp_meta_date:before { content: "\f073"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; padding-right:4px; } span.rp_meta_comment:before { content: "\f086"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; padding-right:4px; } span.rp_meta_more:before { content: "\f0a9"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; padding-right:4px; } ul.rp_thumbs2 li a:hover, ul.rp_thumbs li a:hover { color:#4db2ec; } /* Profile */ .Profile .widget-content { text-align: center; padding: 30px; border: 2px solid $(label.border.color); } .Profile .profile-img { border-radius: 50%; float: none; } .Profile .profile-name-link { color: $(body.text.color); font-size: .9em; opacity: 1; overflow: hidden; } .Profile .profile-name-link:hover { color: $(link.color); } .Profile .profile-link { border-style: solid; border-width: 1px; cursor: pointer; font-size: 13px; font-weight: 400; padding: 6px 22px; display: inline-block; line-height: normal; } .profile-textblock { margin: .8em 0; font-size: 14px; } .profile-img { float: left; display:inline; opacity:10; margin:0 6px 3px 0; } .profile-data { margin: 0; } .profile-datablock { margin: .5em 0; } .profile-name-link { background: no-repeat left top; box-sizing: border-box; display: inline-block; max-width: 100%; min-height: 20px; padding-left: 20px; } /* Archive */ #ArchiveList .toggle { cursor: pointer; font-family: Arial, sans-serif; } #ArchiveList .toggle-open { font-size: 1.7em; line-height: .6em; } #ArchiveList { text-align: left; } #ArchiveList a.post-count-link, #ArchiveList a.post-count-link:link, #ArchiveList a.post-count-link:visited { text-decoration: none; } #ArchiveList a.toggle, #ArchiveList a.toggle:link, #ArchiveList a.toggle:visited, #ArchiveList a.toggle:hover { color: inherit; text-decoration: none; } .BlogArchive #ArchiveList ul li { background: none; list-style: none; list-style-image: none; list-style-position: outside; border-width: 0; padding-left: 15px; text-indent: -15px; margin: .25em 0; background-image: none; } .BlogArchive #ArchiveList ul ul li { padding-left: 1.2em; } .BlogArchive #ArchiveList ul { margin: 0; padding: 0; list-style: none; list-style-image: none; border-width: 0; } .BlogArchive #ArchiveList ul.posts li { padding-left: 1.3em; } #ArchiveList .collapsed ul { display: none; } /* Artikel Terbaru */ .artikel-terbaru ul li { border-bottom: 2px dotted $(label.border.color); padding-bottom: 8px; margin-bottom: 8px; font-weight: 500; font-size: 14px; } .list-label-widget-content ul li, .LinkList ul li, .PageList ul li { border-bottom: 2px dotted $(label.border.color); padding-bottom: 5px; } .list-label-widget-content ul li:before, .LinkList ul li:before, .PageList ul li:before { content: "\f14b"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; font-size: 10px; margin-right: 6px; } .list-label-widget-content ul li:before { content: "\f105"; } .LinkList ul li:before { content: "\f14c"; } .PageList ul li:before { content: "\f249"; } /* SUBSCRIBER BOX */ .berlangganan-box { background: $(header.background.kiri); background: linear-gradient(to right, $(header.background.kiri), $(header.background.kanan)); color: $(header.title.color); padding: 15px; margin: 20px 0; text-align: center; } .berlangganan-box p { margin:15px 0; } .berlangganan-box input.email-address[type="text"] { width: 60%; padding: 10px; text-align: center; border-radius: 2px; border: none; outline: none; } .berlangganan-box input.submit-email[type="submit"] { background: #F57224; padding: 10px 15px; border-radius: 2px; color: #fff; border: none; outline: none; } .berlangganan-box input.submit-email[type="submit"]:hover { background: $(body.text.color); color: #fff; cursor: pointer; } .berlangganan-box input.email-address[type="text"]:focus { background: #fffcd2; } /* Back to top */ #back-to-top { background:$(backtp.background.color); color:$(backtp.color); padding:8px 10px; font-size:20px; box-shadow: 0 1px 2px 0 rgba(0,0,0,.15), 0 1px 1px 0 rgba(0,0,0,.30); } .back-to-top { position: fixed !important; position: absolute; bottom: 25px; right: 20px; z-index: 998; } /* Share button */ .share-this-pleaseeeee { display: inline-block; margin: 0; color: #afafaf; text-transform: uppercase; font-size: 16px; background: #fff; z-index: 1; position: relative; padding: 0 10px; font-weight: 500; } #share-container { margin-left: -3px; margin-right: -3px; padding: 5px 0; overflow: hidden; } #share { width: 100%; text-align: center; } #share a { width: 40px; height: 40px; display: inline-block; font-size: 15px; color: #fff; margin:0 3px 7px; transition: opacity 0.15s linear; float: left; border-radius: 3px; } #share a:hover { opacity: 0.8; } #share i { position: relative; top: 50%; transform: translateY(-50%); } .facebook { background: #3b5998; } .twitter { background: #55acee; } .googleplus { background: #dd4b39; } .linkedin { background: #0077b5; } .pinterest { background: #cb2027; } .whatsapp { background: #25d366; } /* Status Msg */ .status-msg-wrap { font-size: 110%; width: 90%; margin: 0 auto 15px; position: relative; } .status-msg-border { border: none; filter: alpha(opacity=40); -moz-opacity: .4; opacity: .4; width: 100%; position: relative; } .status-msg-bg { background-color: transparent; opacity: .8; filter: alpha(opacity=30); -moz-opacity: .8; width: 100%; position: relative; z-index: 1; } .status-msg-body { text-align: center; padding: .3em 0; width: 100%; position: absolute; z-index: 4; } .status-msg-hidden { visibility: hidden; padding: .3em 0; } .status-msg-wrap a { padding-left: .4em; } .list-label-widget-content ul, .label-info-th a, .displaypageNum a, .showpage a, .pagecurrent, #blog-pager-newer-link a, #blog-pager-older-link a, .label-size, #baca-juga, #baca-juga h2, #baca-juga ul { border-radius:3px;} /* SLOT IKLAN */ .iklan_responsive { width: 336px; height: 280px; } @media (max-width:450px) { .iklan_responsive { width: 300px; height: 250px; } } @media (min-width:500px) { .iklan_responsive { width: 336px; height: 280px; } } @media (min-width:800px) { .iklan_responsive { width: 600px; height: 280px; } } .iklan-tengah1 .widget, .iklan-tengah2 .widget, .iklan-bawah .widget, .iklan-atas .widget, .iklan-tengah1 .widget-content, .iklan-tengah2 .widget-content, .iklan-bawah .widget-content, .iklan-atas .widget-content { margin:0 !important; padding 0; } .iklan-tengah1 h2, .iklan-tengah2 h2, .iklan-bawah h2, .iklan-atas h2 { display: none; } #kode-iklan-atas ins, #kode-iklan-bawah ins, #kode-iklan-tengah1 ins, #kode-iklan-tengah2 ins { margin: 20px 0; } .post-body #kode-iklan-tengah1, .post-body #kode-iklan-tengah2, .post-body #kode-iklan-bawah, .post-body #kode-iklan-atas { text-align: center; display: block; } @media screen and (max-width:800px){ .post-body #kode-iklan-tengah1, .post-body #kode-iklan-tengah2, .post-body #kode-iklan-bawah, .post-body #kode-iklan-atas { margin: 0 -20px; } #kode-iklan-atas, #kode-iklan-bawah, #kode-iklan-tengah1, #kode-iklan-tengah2 { width: 100vw; } .breadlabel:last-child { display:none } } @media screen and (max-width:640px){ .post-body #kode-iklan-tengah1, .post-body #kode-iklan-tengah2, .post-body #kode-iklan-bawah, .post-body #kode-iklan-atas { margin: 0 -15px; } } @media screen and (max-width:480px){ .post-body #kode-iklan-tengah1, .post-body #kode-iklan-tengah2, .post-body #kode-iklan-bawah, .post-body #kode-iklan-atas { margin: 0 -12px; } } @media screen and (max-width:320px){ .post-body #kode-iklan-tengah1, .post-body #kode-iklan-tengah2, .post-body #kode-iklan-bawah, .post-body #kode-iklan-atas { margin: 0 -10px; } } .post-body #baca-juga { display: block; } /* PAGE NAVIGATION */ #blog-pager { clear:both !important; padding:2px 0; text-align: center; } #blog-pager-newer-link a { float:left; display:block; } #blog-pager-older-link a { float:right; display:block; } .displaypageNum a,.showpage a,.pagecurrent, #blog-pager-newer-link a, #blog-pager-older-link a { font-size: 12px; padding: 8px 12px; margin: 2px 3px 2px 0px; display: inline-block; color: $(link.color); border: 1px solid $(link.color); } #blog-pager-older-link a:hover, #blog-pager-newer-link a:hover, a.home-link:hover, .displaypageNum a:hover,.showpage a:hover, .pagecurrent { color: $(link.hover.color); border: 1px solid $(link.hover.color); } .showpageOf { display: none !important; } #blog-pager .pages { border: none; } /* FOOTER WIDGET */ #widget-footer-container { background: #111; padding: 0 30px; overflow: hidden; line-height: 1.6em; } #widget-footer-wrapper { margin: 0 auto; max-width: 1068px; color: #fff; } #widget-footer-wrapper .widget { margin: 40px 0; } #widget-footer-wrapper .widget a { color: #ddd; } #widget-footer-wrapper .widget a:hover { color: #2ec4f2; } #widget-footer-wrapper .widget ul, #widget-footer-wrapper .widget ol { list-style: none; margin: 0 0; } #widget-footer-wrapper .widget ul li:before, #widget-footer-wrapper .widget ol li:before { display:none; } #widget-footer-wrapper .widget ul li, #widget-footer-wrapper .widget ol li { font-size: 14px; font-weight: 300; border: 0; margin: 0.3em 0; } #widget-footer-wrapper h2 { font-size: 15px; font-weight: 500; text-transform: uppercase; margin-bottom: 20px; } #widget-footer1 { width: 26%; float: left; padding-right: 20px; box-sizing: border-box; } #widget-footer2 { width: 26%; float: left; } #widget-footer3 { width: 26%; float: left; box-sizing: border-box; } #widget-footer4 { width: 22%; float: right; padding-left: 35px; box-sizing: border-box; } /* FOOTER */ #footer-container { background: #0d0d0d; padding: 10px 20px; overflow: hidden; color: #ccc; font-size: 12px; text-align: center; } #footer-wrapper { max-width: 1068px; margin: 0 auto; overflow: hidden; } #footer-wrapper .footer-right { float: right; } #footer-wrapper .footer-left { float: left; } #footer-wrapper a { color: #ccc; margin-right: 16px; line-height: 18px; display: inline-block; } #footer-wrapper a:hover { color: #4db2ec; } #widget-footer-wrapper .list-label-widget-content ul li { font-family:'Open Sans'; font-weight:500; line-height: 30px; margin: 0; } /* SEARCH FORM */ .search-icon { position: absolute; top: 20px; right: 0px; font-size: 19px; } .search-icon a { color: $(search.icon.color); } #searchfs { position: fixed; z-index:9999; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; -webkit-transform: translate(0px, -100%) scale(0, 0); -moz-transform: translate(0px, -100%) scale(0, 0); -o-transform: translate(0px, -100%) scale(0, 0); -ms-transform: translate(0px, -100%) scale(0, 0); transform: translate(0px, -100%) scale(0, 0); opacity: 0; } #searchfs.open { -webkit-transform: translate(0px, 0px) scale(1, 1); -moz-transform: translate(0px, 0px) scale(1, 1); -o-transform: translate(0px, 0px) scale(1, 1); -ms-transform: translate(0px, 0px) scale(1, 1); transform: translate(0px, 0px) scale(1, 1); opacity: 1; z-index: 9999; } #searchfs input[type="search"] { position: absolute; top: 50%; left: 0; margin-top: -51px; width: 70%; margin-left: 15%; color: rgb(255, 255, 255); background: transparent; border-top: 1px solid rgba(255, 255, 255, .8); border-bottom: 2px solid rgba(255, 255, 255, .5); border-left: 0px solid transparent; border-right: 0px solid transparent; font-size: 40px; text-align: center; outline: none; padding: 10px; } #searchfs .close { position: fixed; top: 20px; right: 30px; color: #fff; background-color: transparent; opacity: 0.8; font-size: 40px; border: none; outline: none; } #searchfs .close:hover { cursor: pointer; } /* NAV MENU */ #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #head-mobile { border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #cssmenu { float: left; } #cssmenu ul { margin: 0; display: block; } #cssmenu:after,#cssmenu > ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0 } #cssmenu #head-mobile { display: none } #cssmenu > ul > li { float: left; margin: 0; } #cssmenu > ul > li > a { padding: 0 14px; font: $(navmenu.font); line-height: 65px; text-decoration: none; text-transform: uppercase; color: $(navmenu.font.color); } #cssmenu > ul > li:hover > a, #cssmenu ul li.active a { color: $(navmenu.font.hover.color); } #cssmenu > ul > li:hover, #cssmenu ul li.active:hover, #cssmenu ul li.active, #cssmenu ul li.has-sub.active:hover { background: transparent; -webkit-transition: background .2s ease; -ms-transition: background .2s ease; transition: background .2s ease; } #cssmenu > ul > li.has-sub > a { padding-right: 10px; } #cssmenu > ul > li.has-sub > a:after, #cssmenu ul ul li.has-sub > a:after { content: "\f107"; font-family: FontAwesome; font-style: normal; font-weight: 800; text-decoration: inherit; margin-left: 5px; } #cssmenu ul ul li.has-sub > a:after { content: "\f0da"; } #cssmenu > ul > li.has-sub:hover > a:after { content: "\f106"; } #cssmenu > ul > li.has-sub:hover > a:before { top: 23px; height: 0 } #cssmenu ul ul { position: absolute; left: -9999px; z-index: 1; -webkit-box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15); box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15); } #cssmenu ul ul li { height: 0; background :#ffffff; margin: 0; } #cssmenu ul ul li:hover { background: #f0f0f0; } #cssmenu li:hover > ul { left: auto } #cssmenu li:hover > ul > li { height: 33px } #cssmenu ul ul ul{ margin-left: 100%; top: 0 } #cssmenu ul ul li a { border-bottom: 0; padding: 10px 25px 15px 15px; max-width: 100%; min-width: 150px; font-size: 13px; text-decoration: none; color: #444; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } #cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a { border-bottom: 0 } #cssmenu ul ul li.has-sub > a:after { position: absolute; top: 16px; right: 11px; width: 8px; height: 2px; display: block; background: #888; content:'' } #cssmenu ul ul li.has-sub > a:before { position: absolute; top: 13px; right: 14px; display: block; width: 2px; height: 8px; background: #888; content:''; } #cssmenu ul ul > li.has-sub:hover > a:before { top: 17px; height: 0 } #cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover { background: #f0f0f0; } #cssmenu ul ul ul li.active a { border-left:1px solid #333 } #cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a{ border-top: 1px solid #333 } @media screen and (min-width:801px){ #cssmenu ul { display: block !important; } } @media screen and (max-width:800px){ #cssmenu { float: none; } #cssmenu ul { background: #ffffff; width: 100%; display: none } #cssmenu ul ul { -webkit-box-shadow: none; box-shadow: none; display:none; } #cssmenu ul li { width: 100%; border-top: 1px solid #efefef; background: #ffffff; } #cssmenu ul ul li, #cssmenu li:hover > ul > li { height: auto } #cssmenu ul li a, #cssmenu ul ul li a { width: 100%; border-bottom: 0; color: #888 !important; } #cssmenu > ul > li { float: none } #cssmenu ul ul li a { padding-left: 25px } #cssmenu ul ul ul li a { padding-left: 35px } #cssmenu ul ul, #cssmenu ul ul ul{ position: relative; left: 0; width: 100%; margin: 0; text-align: left } #cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before, #cssmenu ul ul > li.has-sub > a:after, #cssmenu ul ul > li.has-sub > a:before{ display: none } #cssmenu #head-mobile { display: block; padding: 32px; color: #fff; font-size: 12px; font-weight: 500 } .button { width: 25px; height: 65px; position: absolute; left: 0; top: 0; cursor: pointer; z-index: 2; } .button:after { position: absolute; top: 30px; right: 0px; display: block; height: 3px; width: 18px; border-top: 2px solid $(search.icon.color); border-bottom: 2px solid $(search.icon.color); content:'' } .button:before { position: absolute; top: 26px; right: 0px; display: block; height: 2px; width: 18px; background: $(search.icon.color); content:'' } .button.menu-opened:after { top: 26px; border: 0; height: 2px; width: 18px; background: $(navmenu.font.color); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg) } .button.menu-opened:before { top: 26px; background: $(navmenu.font.color); width: 18px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg) } #cssmenu .submenu-button { position: absolute; z-index: 99; right: 0; top: 0; display: block; border-left: 1px solid #efefef; height: 44px; width: 44px; cursor: pointer } #cssmenu .submenu-button.submenu-opened { background: rgba(64,64,64,0.1); } #cssmenu ul ul .submenu-button { height: 32px; width: 32px } #cssmenu .submenu-button:after { position: absolute; top: 19px; right: 16px; width: 8px; height: 2px; display: block; background: #888; content:'' } #cssmenu ul ul .submenu-button:after { top: 15px; right: 13px } #cssmenu .submenu-button.submenu-opened:after { background: #888 } #cssmenu .submenu-button:before { position: absolute; top: 16px; right: 19px; display: block; width: 2px; height: 8px; background: #888; content:'' } #cssmenu ul ul .submenu-button:before{ top: 12px; right: 16px } #cssmenu .submenu-button.submenu-opened:before{ display: none } #cssmenu ul ul ul li.active a{ border-left: none } #cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{ border-top: none } } /* FOOTER */ #footer-wrapper a { color: $(footer.link.color); } #footer-wrapper a:hover { color: $(footer.hover.color); } /* BACA JUGA */ #baca-juga { display: none; position: relative; } #baca-juga h2 { color: $(label.color); position: absolute; top: -15px; left: 20px; border: 2px solid $(label.border.color); padding: 2px 12px; font-size: 14px; background: $(label.bg.color); font-weight: 500; z-index: 1; } #baca-juga a { font-weight: 500; font-size: 14px; display: block; padding: 0; } #baca-juga ul { max-width: 75%; margin: 30px 0 20px; padding: 20px 20px 10px 40px; position: relative; border: 2px solid $(label.border.color); } #baca-juga li { padding: 0px; margin: .6em 0; } /* RELATED POSTS */ .related-post { margin: 30px auto 0; overflow: hidden; } .related-post h4 { position:relative; margin: 0; display: inline-block; font-weight: 500; color: #afafaf; text-transform: uppercase; font-size: 16px; z-index: 1; background: #fff; padding: 0 10px; } .related-post ul { padding: 0 !important; font-size: 14px; } /* Style 3 */ .related-post-style-3, .related-post-style-3 li { margin: 0; padding: 0; list-style: none; word-wrap: break-word; overflow: hidden; } .related-post-style-3 .related-post-item { float: left; width: 23.5%; height: auto; margin-right: 2%; margin-bottom: 10px; } .related-post-style-3 .related-post-item:nth-of-type(4n+0) { margin-right: 0; } .related-post-style-3 .related-post-item:hover { opacity: 0.7; } .related-post-style-3 .related-post-item-thumbnail { display: block; max-height: none; background-color: transparent; border: none; padding: 0; max-width: 100%; height:120px; } .related-post-style-3 .related-post-item-title { color: #444; } .related-post-style-3 .related-post-item-tooltip { padding: 0; } .related-post-item-tooltip .related-post-item-title { font-weight: 500; display: block; } @media only screen and (max-width:480px){ .related-post-style-3 .related-post-item { width: 100%; margin-right: 4%; } .related-post-style-3 .related-post-item:nth-of-type(2n+0) { margin-right: 0; } .related-post-style-3 .related-post-item:nth-of-type(2n+1) { clear: both; } } .related-post-style-3 .related-post-item-thumbnail { float: left; border: none; margin: 2px 8px 0 0; padding: 0; max-width: 100%; height:120px; } .contact-form-widget { } .contact-form-success-message, .contact-form-error-message { background: #f9edbe; border: 0 solid #f0c36d; font-size: 14px; text-align: center; max-width: 500px; border-radius: 3px; } .contact-form-success-message-with-border, .contact-form-error-message-with-border { background: #f9edbe; border: 1px solid #f0c36d; font-size: 14px; text-align: center; max-width: 600px; border-radius: 3px; box-sizing: border-box; padding: 5px 10px; } .contact-form-cross { height: 11px; margin: 0 5px; vertical-align: -8.5%; width: 11px; } .contact-form-email, .contact-form-name { color: inherit; height: 40px; margin-top: 5px; max-width: 300px; width: 100%; padding: 0 15px; border-radius: 3px; border: 1px solid #cacaca; box-sizing: border-box; } .contact-form-email-message { color: inherit; margin-top: 5px; vertical-align: top; max-width: 600px; width: 100%; border-radius: 3px; border: 1px solid #cacaca; padding: 15px; } .contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover { outline: none; border: 1px solid $(link.color); } .contact-form-email:focus, .contact-form-name:focus, .contact-form-email-message:focus { outline: none; border: 1px solid $(link.color); } .contact-form-name, .contact-form-email, .contact-form-email-message { background: #f8f8f8; } .contact-form-button { display: block; font-size: 14px; line-height: 24px; padding: 5px 20px; margin: 30px 0; text-align: center; border: none; background: $(link.color); color: #fff; border-radius: 3px; font-weight: 500; } .contact-form-button:hover, .contact-form-button.hover { cursor: pointer; outline: none; opacity: .85; } .contact-form-button.focus, .contact-form-button.right.focus, .contact-form-button.mid.focus, .contact-form-button.left.focus { outline: none; } .contact-form-button-submit:focus, .contact-form-button-submit.focus { outline: none; opacity: .85; } .swajib { font-weight: bold; color: #e85e5e; } .ctitles { font-weight: 500; display: block; margin: 30px 0 0; } /* COMMENT FORM */ #comments-block { margin: 15px 0; } .comment-body { padding: 15px 0; margin: 0 0; } .comment-body p { margin: 0; } .comment-form { overflow: hidden; margin-top: 20px; } .comment-footer { margin: 0 0 30px; } #comments-block .avatar-image-container { display: none; } h4#comment-post-message { display: none; margin: 0 0 0 0; } .comments{ clear: both; margin-top: 10px; margin-bottom: 0 } .comments .comments-content{ font-size: 14px; margin-bottom: 30px } .comments .comments-content .comment-thread ol{ text-align: left; margin: 13px 0; padding: 0; list-style: none; } .comment .avatar-image-container { float: left; max-height: 36px; overflow: hidden; width: 36px; } .comments .avatar-image-container img { max-width: 34px; border-radius: 17px; } .comments .comment-block{ position: relative; padding: 20px; margin-left: 45px; border: 2px solid $(label.border.color); border-radius: 10px; word-break: break-word; } .comments .comments-content .comment-replies{ margin:10px 0; margin-left:45px } .comments .comments-content .comment-thread:empty{ display:none } .comments .comment-replybox-single { margin-left:45px } .comments .comment-replybox-thread { } iframe#comment-editor { min-height: 220px; } .comments .comments-content .comment{ margin-bottom:6px; padding:0 } .comments .comments-content .comment:first-child { padding:0; margin:0 } .comments .comments-content .comment:last-child { padding:0; margin:0 } .comments .comment-thread.inline-thread .comment, .comments .comment-thread.inline-thread .comment:last-child { margin:0px 0px 5px 14% } .comment .comment-thread.inline-thread .comment:nth-child(6) { margin:0px 0px 5px 12%; } .comment .comment-thread.inline-thread .comment:nth-child(5) { margin:0px 0px 5px 10%; } .comment .comment-thread.inline-thread .comment:nth-child(4) { margin:0px 0px 5px 8%; } .comment .comment-thread.inline-thread .comment:nth-child(3) { margin:0px 0px 5px 4%; } .comment .comment-thread.inline-thread .comment:nth-child(2) { margin:0px 0px 5px 2%; } .comment .comment-thread.inline-thread .comment:nth-child(1) { margin:0px 0px 5px 0; } .comments .comments-content .comment-thread{ margin:0; padding:0 } .comments .comments-content .inline-thread{ background:#fff; margin:0 } .comments .comments-content .icon.blog-author { display:inline; height: 18px; margin: 0 0 -4px 6px; width: 18px; } .comments .comments-content .icon.blog-author:after { content:"\f058"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; padding-right:4px; color:$(link.color); } .comments .comments-content .comment-header { font-size:14px; margin: 0 0 15px; } .comments .comments-content .comment-content { margin: 0 0 15px; text-align: left; line-height: 1.6; } .comments .comments-content .datetime { margin-left: 6px; } .comments .comments-content .datetime a { color:#bbbbbb; } .comments .comments-content .user { font-weight: 500; font-style: normal; } .comments .comment .comment-actions a { display:inline-block; font-weight:500; font-size:13px; line-height:15px; margin:4px 8px 0 0; } .comments .continue a { display:inline-block; font-size:13px; padding: .5em; } .comments .comment .comment-actions a:hover, .comments .continue a:hover{ text-decoration:underline; } .pesan-komentar { padding: 0 8px; } .pesan-komentar p { margin: 5px 0; } .comments .comments-content .loadmore { max-height: 24px; opacity: 1; overflow: hidden; line-height: 24px; } .comments .comments-content .loadmore a { display: block; padding: 0 0; text-align: center; font-weight: 500; } .deleted-comment { font-style: italic; opacity: .5; } /* MEDIA QUERY */ .iklan_responsive { width: 336px; height: 280px; } @media (max-width:450px) { .iklan_responsive { width: 300px; height: 250px; } } @media (min-width:500px) { .iklan_responsive { width: 336px; height: 280px; } } @media (min-width:800px) { .iklan_responsive { width: 600px; height: 280px; } } @media only screen and (max-width:1080px){ #wrapper { margin: 0 auto; } .footer-widget, #footer-navmenu-container { max-width: 100%; } #header-wrapper, .footer-widget .widget, #footer-navmenu-container { padding-left: 30px; padding-right: 30px; } .sticky-mobile { margin-right: 30px; } .img-thumbnail, .img-thumbnail img { width: 240px; height: 160px; } .info-1, .info-2, h2.post-title, .post-snippet { margin-left: 260px; } .search-icon { right: 30px; } } @media only screen and (max-width:800px){ #header-wrapper { padding-left: 0px; padding-right: 0px; position: relative; } #wrapper { padding: 80px 20px 20px; } #cssmenu > ul > li > a { padding: 12px 10px; } .footer-widget .widget, #footer-navmenu-container { padding-left: 20px; padding-right: 20px; } .button { margin-left: 20px; } .header { position: absolute; top: 0; left: 45px; right: 45px; z-index: 1; text-align: center; float: none; display: inline-block; max-width: 100%; margin-right: 0; } .header img { display: inline-block !important; } .img-thumbnail, .img-thumbnail img { width: 180px; height: 120px; } .label-line { display:none; } .info-1, .info-2, h2.post-title, .post-snippet { margin-left: 195px; } .search-icon { right: 20px; } #searchfs.open { transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); visibility: visible; } #searchfs:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: .98; background: #313b45; background: -moz-linear-gradient(top,#313b45 0%,#3393b8 100%); background: -webkit-gradient(left top,left bottom,color-stop(0%,#313b45),color-stop(100%,#3393b8)); background: -webkit-linear-gradient(top,#313b45 0%,#3393b8 100%); background: -o-linear-gradient(top,#313b45 0%,#3393b8 100%); background: -ms-linear-gradient(top,#313b45 0%,#3393b8 100%); background: linear-gradient(to bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,.6) 100%); filter: progid:DXImageTransform.Microsoft.gradient(starCol) } #searchfs { background-image: url(https://cdn.pixabay.com/photo/2016/11/16/10/27/girl-1828538_960_720.jpg); background-repeat: no-repeat; background-size: cover; background-position: center top; position: fixed; display: block; width: 100%; height: 113%; z-index: 9999; -webkit-transition: all .5s cubic-bezier(.79,.14,.15,.86); -moz-transition: all .5s cubic-bezier(.79,.14,.15,.86); -o-transition: all .5s cubic-bezier(.79,.14,.15,.86); transition: all .5s cubic-bezier(.79,.14,.15,.86); transform: translate3d(100%,0,0); -webkit-transform: translate3d(100%,0,0); -moz-transform: translate3d(100%,0,0); -ms-transform: translate3d(100%,0,0); -o-transform: translate3d(100%,0,0); visibility: hidden; } #searchfs input[type="search"] { top: 20%; width: 90%; margin-left: 5%; color: rgb(255, 255, 255); background: transparent; border-top: 0px solid rgba(255, 255, 255, .8); border-bottom: 1px solid rgba(255, 255, 255, .5); border-left: 0px solid transparent; border-right: 0px solid transparent; } #widget-footer-container { padding: 0 20px; } #widget-footer1 { width: 100%; float: none; padding-right: 0; } #widget-footer2, #widget-footer3 { width: 100%; float: none; } #widget-footer4 { width: 100%; float: none; padding-left: 0px; } #footer-container { padding: 20px 20px; } } @media only screen and (max-width:768px){ #featured-posts-section { display:none; } #post-wrapper, #sidebar-wrapper { float:none; width:100%; max-width:100% } .post-container { padding: 0 0 20px 0; } } @media only screen and (max-width:640px){ #wrapper { padding: 80px 20px 20px; } #cssmenu > ul > li > a { padding: 12px 15px; } .footer-widget .widget, #footer-navmenu-container { padding-left: 15px; padding-right: 15px; } .button { margin-left: 15px; } #post-wrapper, .recent-post-one-thumb, #sidebar-wrapper { float:none; width:100%; max-width:100% } .info-2, h2.post-title, { margin-left: 190px; } .info-1 { font-size:12px; } .search-icon { right: 15px; } .related-post-style-3 .related-post-item-thumbnail { width:100px; height:67px; } #breakingnews {margin: 0 0 15px;padding: 0;text-align: center;height: 20px;line-height: 20px;} #breakingnews .breakhead {display:none;} #adbreakingnews {margin:0;font-size: 14px; } @media only screen and (max-width:480px){ #wrapper { padding: 80px 18px 18px; } #cssmenu > ul > li > a { padding: 15px 15px; } .footer-widget .widget, #footer-navmenu-container { padding-left: 12px; padding-right: 12px; } #footer-navmenu ul li a { margin: 0px 8px; } #footer-wrapper .footer-right, #footer-wrapper .footer-left { float: none; margin: 5px 0; } ul.nav-social li { padding: 0px 8px; } .button { margin-left: 12px; } .img-thumbnail { float: left; width: 100px; height: auto; margin: 3px 8px 3px 0; } .img-thumbnail img { width: 100px; height: 67px; } .info-1 {display:none} .info-2, h2.post-title, .post-snippet { margin-left: 0px; } .post-snippet { display:none; } h1{font-size:170%} h2{font-size:150%} h3{font-size:130%} h4{font-size:120%} h5{font-size:110%} h6{font-size:100%} h2.post-title { font-size: 14px; display: inline; } h1.post-title { font-size: 24px; } .section:last-child .widget:last-child, .sidebar .widget, .sidebar-sticky .widget, .above-post-widget .widget, .bellow-header-widget .widget, #blog-pager { margin:0 0 20px; } .comments .comments-content .comment-replies{ margin-left:20px !important; } .comments .comment-block { padding: 15px !important; } .comment .comment-thread.inline-thread .comment { margin: 0 0 0 0 !important; } iframe#comment-editor { min-height: 270px; } #searchfs input[type="search"] { font-size: 26px; } .FeaturedPost .post-summary h3 { font-size: 20px; margin: 0; padding: 15px 0; } .FeaturedPost .post-summary h3 a { padding: 10px; } .FeaturedPost .post-summary p { margin: 0 10px; } .search-icon { right: 12px; } #baca-juga { max-width: 100%; } #widget-footer-container { padding: 0 15px; } } @media screen and (max-width:320px){ #wrapper { padding: 70px 10px 10px; } #cssmenu > ul > li > a { padding: 12px 10px; } .footer-widget .widget, #footer-navmenu-container { padding-left: 10px; padding-right: 10px; } .button { margin-left: 10px; } .info-1, .info-2, h2.post-title, .post-snippet { margin-left: 0px; } .search-icon { right: 10px; } } /* Post Table */ .post-body table {width:100%;} .post-body table td,.post-body table caption{background:#fff;border:1px solid #f5f5f5;padding:10px;text-align:left;vertical-align:top} .post-body table th{background:#4D99D0;color:#fff;border:1px solid #f5f5f5;border-bottom:0;padding:10px;text-align:left;vertical-align:top} .post-body table.tr-caption-container {border:1px solid #f5f5f5;margin:0;} .post-body th{font-weight:500;} .post-body table caption{border:none;font-style:italic;} .post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #97b28e;} .post-body th{} .post-body th:hover{color:#fff;} .post-body td a{color:#444;} .post-body td a:hover{color:#cf4d35;} .post-body table.tr-caption-container td{border:0;padding:8px;background:#fff;line-height:17px;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:#000;} .post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;} .post-body li {list-style-type:square;} .post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px!important;} /* Tombol Download */ .Download { border-radius: 3px; display: inline-block; position: relative; padding: 10px 24px; background: #2e9fff; color: white !important; font-weight: 500; font-size: 0.9em; text-align: center; text-indent: 15px; transition:all 0.4s; -moz-transition:all 0.4s; -webkit-transition:all 0.4s; } .Download:hover { opacity: .85; } .Download:before, .Download:after { content: ' '; display: block; position: absolute; left: 15px; top: 52%; } .Download:before { width: 10px; height: 2px; border-style: solid; border-width: 0 2px 2px; } .Download:after { width: 0; height: 0; margin-left: 3px; margin-top: -7px; border-style: solid; border-width: 4px 4px 0 4px; border-color: transparent; border-top-color: inherit; animation: downloadArrow 2s linear infinite; animation-play-state: paused; } .Download:hover:after { animation-play-state: running; } @keyframes downloadArrow { 0% { margin-top: -7px; opacity: 1; } 0.001% { margin-top: -15px; opacity: 0; } 50% { opacity: 1; } 100% { margin-top: 0; opacity: 0; } } /* CSS Table of Contents */ #light-toc{background:#f5f5f5;border: 1px solid #e5e5e5;padding:10px 15px} #toc_list{font-weight:600;cursor:pointer;margin:10px 0} #toc_list:focus,#toc li:focus,.back_tocontent:focus{outline:none} #toc_list svg{vertical-align:middle} #toc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em} #toc ol li:before{left:-2em} #toc li a{color:#0066cc} #toc li a:hover{color:#444} #toc{display:grid} .back_tocontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#00cec9;color:#fff;font-size:11px;padding:2px 12px;border-radius:0;transition:all .3s} .back_tocontent:hover{background:#2d3436;color:#fff} :target::before{content:'';display:block;height:40px;margin-top:-40px;visibility:hidden} /* Skin for Blogger Tabbed Layout TOC */ .tabbed-toc { margin: 0 auto; background: $(header.background.kiri); background: linear-gradient(to bottom right, $(header.background.kiri), $(header.background.kanan)); position: relative; } .tabbed-toc .loading { display: block; padding: 2px 12px; color: $(navmenu.font.color); } .tabbed-toc ul, .tabbed-toc ol, .tabbed-toc li { margin: 0; padding: 0; list-style: none; } .tabbed-toc .toc-tabs { width: 20%; float: left; } .tabbed-toc .toc-tabs li a { display: block; font: $(navmenu.font); overflow: hidden; color: $(navmenu.font.color); text-transform: uppercase; text-decoration: none; padding: 12px; } .tabbed-toc .toc-tabs li a:hover { background-color: rgba(64,64,64,0.1); } .tabbed-toc .toc-tabs li a.active-tab { background: rgba(64,64,64,0.1); position:relative; z-index:5; margin:0 -1px 0 0; /* cursor:text; */ } .tabbed-toc .toc-content, .tabbed-toc .toc-line { width: 80%; float: right; background-color: white; border-left: 5px solid rgba(64,64,64,0.1); box-sizing: border-box; } .tabbed-toc .toc-line { float: none; display: block; position: absolute; top: 0; right: 0; bottom: 0; } .tabbed-toc .panel { position: relative; z-index: 5; } .tabbed-toc .panel li a { display: block; position: relative; font-weight: 500; font-size: 14px; padding: 6px 12px; overflow: hidden; } .tabbed-toc .panel li time { display: block; font-weight: normal; font-size: 11px; color: #666; float: right; } .tabbed-toc .panel li .summary { display: block; padding: 10px 12px 10px; font-size: 13px; } .tabbed-toc .panel li .summary img.thumbnail { float: left; display: block; margin: 5px 8px 0 0; width: 72px; height: 72px; background-color: #fafafa; } .tabbed-toc .panel li {background-color:#f3f3f3} .tabbed-toc .panel li:nth-child(even) {background-color:#fff} .tabbed-toc .panel li a:hover, .tabbed-toc .panel li a:focus, .tabbed-toc .panel li.bold a { background-color: rgba(64,64,64,0.1); outline: none; } @media (max-width:700px) { .tabbed-toc .toc-tabs, .tabbed-toc .toc-content { overflow :hidden; width: auto; float: none; display: block; } .tabbed-toc .toc-tabs li { display: inline; float: left; } .tabbed-toc .toc-tabs li a.active-tab { background-color: rgba(64,64,64,0.1); } .tabbed-toc .toc-content { border: none } .tabbed-toc .toc-line, .tabbed-toc .panel li time { display: none } } ]]> >"; position: absolute; bottom: 18px; z-index: 999; right: 80px; color: #999; font-size: 12px; } body#layout #wrapper, body#layout #header-wrapper, body#layout #footer-container, body#layout #footer-widget-container { margin: 0 0; padding: 0 20px; } body#layout #footer-container { padding-bottom: 20px; } body#layout #cssmenu { position: relative; height: 33px; display: block; padding: 20px; margin: 8px 0; width: 500px; font-size: 14px; color: #fff; background: #bbbbbb; font-weight: bold; float: right; border: 1px solid #8e8e8e; } body#layout #cssmenu ul, body#layout #footer-navmenu ul { display: none; } body#layout #cssmenu:after { content: "Menu navigasi harus diedit melalui Edit HTML"; color: #fff; position: absolute; top: 30px; left: 20px; visibility: visible; } body#layout .post-container { padding: 0 15px 0 0; } body#layout .sidebar-container { padding: 0 0 0 0; } body#layout #searchfs, body#layout .latest-post-title, body#layout .section h4 { display: none; } body#layout div.section { background: transparent; margin: 0px 0px 15px 0px; padding: 0px; border: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body#layout .sidebar-sticky:before { content: "Widget Sidebar (Sticky)"; } body#layout .sidebar:before { content: "Widget Sidebar"; } body#layout .above-post-widget:before { content: "Widget di Atas Post (Hanya Homepage)"; } body#layout .Blog:before { content: "Posting Blog"; margin-bottom: 8px; } body#layout .bellow-header-widget:before { content: "Widget di Bawah Header/Menu Navigasi"; } body#layout #footer-widget-container:before { content: "Widget di Atas Footer"; } body#layout .sidebar-sticky:before, body#layout .sidebar:before, body#layout .above-post-widget:before, body#layout .Blog:before, body#layout .bellow-header-widget:before, body#layout #footer-widget-container:before { padding: 5px 10px; display: block; font-size: 14px; color: #fff; background: #bbbbbb; border: 1px solid #8e8e8e; font-weight: bold; } body#layout .add_widget, body#layout .widget-content { padding: 12px; } body#layout .add_widget a { margin-left: 0px; font-size: 14px; } body#layout div.layout-title { font-size: 14px; } body#layout div.layout-widget-description { font-size: 12px; } body#layout .editlink { color: #FFFFFF !important; background: #bbbbbb; border-radius: 15px; padding: 4px 6px; } body#layout #footer-wrapper { position: relative; background: #fff; height: 40px; border: 1px solid #ddd; } body#layout #footer-wrapper:after { content:"Footer"; color:#999; position:absolute; top:12px; } body#layout #footer-navmenu { position: relative; display: block; padding:0; font-size: 14px; color: #fff; background: #bbbbbb; border: 1px solid #8e8e8e; font-weight: bold; margin: 0 20px 8px; height: 50px; } body#layout #footer-navmenu:after { content: "Menu navigasi harus diedit melalui Edit HTML"; color: #fff; position: absolute; top: 17px; left: 20px; visibility: visible; } ]]> <!-- --></head> <div itemscope='itemscope' itemtype='https://schema.org/Blog'> <script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d4431987910385501474\x26blogName\x3dBlogging+Demo\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dLIGHT\x26layoutType\x3dLAYOUTS\x26searchRoot\x3dhttps://blogging-demo-video.blogspot.com/search\x26blogLocale\x3den\x26v\x3d2\x26homepageUrl\x3dhttps://blogging-demo-video.blogspot.com/\x26vt\x3d-7480819011097065314', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script><script type="text/javascript"> (function() { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js'; var head = document.getElementsByTagName('head')[0]; if (head) { head.appendChild(script); }})(); </script>
Trending News
Loading...
Hot
https://4.bp.blogspot.com/-wEe3CIpXNqk/WreNtAFiZWI/AAAAAAAAAa0/S3KendHsp0AYYRUS2SyCnvY8FZyZoPclwCK4BGAYYCw/s1600/logo-light%2B%25282%2529.png 47 292 false 156

Bloggingkaise.com Provided Most Premium Magazine Responsive Blogger Template, it is clean and compatible with many devices, It’s perfect for creating your magazine or blog using Blogspot, no need to coding as it is very customizable. for more information visit Bloggingkaise.com

]]>

12 <script type='text/javascript'> var noPage, currentPage, currentPageNo, postLabel, numPages = 3, perPage = , prevText = '←', nextText = '→', firstText = 'First', lastText = 'Last', urlactivepage = location.href, home_page = "/"; </script>

<script type='text/javascript'> ; </script>