Fabulous Grid Template ~ Template Blogger Selected

CLICK COPY AND PASTE THIS CODE TO YOUR BLOGGER EDIT HTML PAGE, GOOD LUCK !

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'/>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <meta content='Responsive Blogger Template' name='description'/>
      <meta content='Template, Free, Premium, blogspot template, Blogger template' name='keywords'/>
    </b:if>
    <link expr:href='data:blog.url' rel='canonical'/>
    <link href='/favicon.ico' rel='icon' type='image/x-icon'/>
    <link expr:title='data:blog.title + " - Atom"' href='/feeds/posts/default' rel='alternate' type='application/atom+xml'/>
    <link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
    <link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
    <link href='https://plus.google.com/YOURGOOGLEPLUS' rel='author'/>
    <meta content='YOURFBAPPID' property='fb:app_id'/>
    <meta content='YOURFBID' property='fb:admins'/>
    <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <meta content='blogger' name='generator'/>
    <link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
    <link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
    <link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
    <link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
    <link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
    <link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
    <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet' type='text/css'/>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600' id='google-fonts-css' media='all' rel='stylesheet' type='text/css'/>

<b:if cond='data:blog.homepageUrl == data:blog.url'>
      <b:if cond='data:blog.metaDescription != ""'>
        <meta expr:content='data:blog.metaDescription' name='description'/>
        <meta expr:content='data:blog.title' name='keywords'/>
      </b:if>
      <b:else/>
      <b:if cond='data:blog.pageType == "item"'>
        <b:if cond='data:blog.metaDescription != ""'>
          <meta expr:content='data:blog.metaDescription' name='description'/>
          <meta expr:content='data:blog.pageName' name='keywords'/>
        </b:if>
      </b:if>
    </b:if>
    <b:if cond='data:blog.searchLabel'>
      <meta content='noindex,nofollow' name='robots'/>
    </b:if>
    <b:if cond='data:blog.isMobile'>
      <meta content='noindex,nofollow' name='robots'/>
      <b:else/>
      <meta content='index,follow' name='robots'/>
    </b:if>
    <meta content='text/html;charset=UTF-8' http-equiv='Content-Type'/>
    <meta content='blogger' name='generator'/>
    <meta content='general' name='rating'/>
    
    <b:if cond='data:blog.homepageUrl == data:blog.url'>
      <b:if cond='data:blog.isMobile'>
        <title>
          <data:blog.pageTitle/>
          Mobile Version
        </title>
        <b:else/>
        <title>
          <data:blog.pageTitle/>
        </title>
      </b:if>
      <b:else/>
      <b:if cond='data:blog.pageType == "archive"'>
        <title>
          Archive for 
          <data:blog.pageName/>
        </title>
        <meta content='noindex,nofollow,noarchive' name='robots'/>
        <b:else/>
        <b:if cond='data:blog.pageType == "error_page"'>
          <title>
            Page Not Found
          </title>
          <meta content='5;/' http-equiv='refresh'/>
          <b:else/>
          <b:if cond='data:blog.pageType == "item"'>
            <b:if cond='data:blog.isMobile'>
              <title>
                <data:blog.pageName/>
              </title>
              <b:else/>
              <title>
                <data:blog.pageName/>
                | 
                <data:blog.title/>
              </title>
            </b:if>
            <b:else/>
            <title>
              <data:blog.pageName/>
            </title>
          </b:if>
        </b:if>
      </b:if>
    </b:if>
    
    <style type="text/css"><!-- /* 
    <b:skin><![CDATA[
/*
-----------------------------------------------
Blogger Template Style
Name:     Fabulous Clean & Responsive Blogger Template
Designer: ThemeXpose
URL:      http://www.themexpose.com
Version:  Full Version
----------------------------------------------- */
#wrapper{overflow:hidden;width:100%;}
#iklan-kiri{width:180px;float:left;overflow:hidden;}
#iklan-kanan{width:30%;float:right;overflow:hidden;margin-top:5px;}
#artikel{overflow:hidden;margin-top:75px;box-shadow: 0 5px 30px #000;
-webkit-box-shadow: 0 5px 30px #000;}
#bagian-aside{float:left;width:70%;overflow:hidden;margin-top:5px;}
#iklan-atas{overflow:hidden;width:100%;clear:both;}
#iklan-atas-kiri{float:right;width:748px;overflow:hidden;}
#iklan-atas-kanan{float:left;width:352px;overflow:hidden;}
#bagian-widget{width:100%;overflow:hidden;}
#widget-kiri{float:left;width:50%;overflow:hidden;}
#widget-kanan{float:right;width:50%;overflow:hidden;}
#footer-wrapper{background:#fff;color:#8f8f8f;width:100%;overflow:hidden;margin:0 auto;border-top:2px solid #e9e9e9;padding-bottom:25px;}
.footer-wid{float:left;}
#footer1, #footer2, #footer3{width:33.3%;}
#navbar-iframe{height:0;visibility:hidden;display:none;}
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,font,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{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;}
a:link{color:#459bb6;text-decoration:none;margin-left:0px;margin-right:0px;transition:all 0.8s ease-in-out;}
a:link:hover{color:#d35251;}
a:visited{color:#8f8f8f;text-decoration:none;margin-left:0px;margin-right:0px;transition:all 0.8s ease-in-out;}
a:visited:hover{color:#666;}
a img{border-width:0;}
img{max-width:100%;vertical-align:middle;border:0;}
body{background:#f0f0f0;margin:0;padding:0;font-family:'Open Sans', Helvetica, Arial, sans-serif;color:#666;overflow:auto}
#Attribution1 {height:0;visibility:hidden;display:none}
.quickedit{display:none;}
.clear{clear:both;}
.status-msg-body, .status-msg-border{display:none;}
.footer-wid h2 {font-size:16px;font-family:'Anaheim';margin-bottom:10px;color:#8f8f8f;font-weight:400;padding:10px 15px 10px 15px;background-position:0 50%;background-repeat:repeat-x;border-bottom:1px solid #f0f0f0;}
.footer-wid a:link, .footer-wid a:visited{color:#999;text-decoration:none}
.footer-wid a:hover{color:#90c9db}
.footer-wid .widget{margin:5px;}
.footer-wid .widget-content{padding:0 5px;overflow:hidden;}
.sidebar .widget-content{padding:5px 7.5px;background:#ffffff;box-shadow: 0 1px 1px rgba(0,0,0,0.06);}
.iklan-atas .widget{padding:10px;color:#fff;text-align:center;}
.sidebar .widget {margin-bottom:5px;padding:20px 10px 10px 10px;}
#sidebar-kiri{text-align:center;}
#sidebar-kiri {margin-left:5px;}
#sidebar-kanan{margin-right:5px;margin-top:75px}
.footer-wid{color:#8b9199;}
.sidebar h2{background: #383838;
color: #fff;
font-family: 'Oswald',Calibri,sans-serif;
font-size: 16px;
font-weight: 400;
position: relative;
padding: 10px 15px 10px 15px;
text-transform: uppercase;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrZKYTibLd0f_voSTQ5AtNaffTQxBBPiK4HLJl-XTmvHhomixnYKkj9gsXCiy1A3i3PDz9C8WKMeaVakQqJJ7amY0dWboiaHdL03v2tkKllIl2mAoolLN-6I2czsr8BmDtEt7wsnrRuthG/s1600/main-menu-ornament.png);}
.sidebar li{margin:3px 0;padding:2px 0;list-style:none;}
.sidebar a:link, .sidebar a:visited{color:#8f8f8f;text-decoration:none}
.sidebar li a:hover{color:#459bb6}
#widget-kiri .widget, #widget-kanan .widget {margin:5px;}
h1.title {text-transform:none;}
h1.title a{color:#fff;}
.post-more-link {text-align:right;margin-top:5px;}
.post-more-link a {background:#1abc9c;color:#fff;overflow:hidden;display:inline;padding:5px;}
.post {overflow:hidden;}
.post-outer {overflow:hidden;}
.post h1 {font-size:200%;}
.post h2 {font-size:180%;clear:both;}
.post h3 {font-size:160%;}
.post h4 {font-size:140%;}
.post h5 {font-size:120%;}
.post h6{font-size:100%;}
.post ul, .post ol, .post dl {margin-left:2em;}
.post blockquote {margin-left:1em;margin-right:1em;padding:1em 1em;font-style:italic;
background-color:#f2f2f2;border-left:4px solid #ddd;font-size:14px;color:#666;}
#blog-pager {text-align:center;margin:10px 0;clear:both;overflow:hidden;}
}

body#layout #menucover li {
list-style: none;
}

body#layout #bagian-aside {
float: left;
width: 51%;
}

/* PopularPosts
----------------------------------------------- */
/*.PopularPosts .quickedit > img {
    height: 19px !important;
    width: 22px !important;
}

.PopularPosts img {
    border: 1px solid #D3D3D3;
    padding: 2px;
    width: 111px;
height:111px
}

.popular-posts li {
    background: none repeat scroll 0 0 transparent;
  
    overflow: hidden;
    padding: 10px 0;
}

.PopularPosts .item-thumbnail {
    margin: 0 5px 0 0;
}

.PopularPosts img:hover{
    -khtml-opacity: 0.6;
    -moz-opacity: 0.6;
    opacity: 0.6;
}

.popular-posts .item-snippet, .popular-posts .item-title {
                display: none;
        }

.widget.PopularPosts .widget-content {
                padding:0 0 5px 0!Important;
                margin:0!Important;
        }

.popular-posts ul li, .popular-posts .item-content, .popular-posts .item-thumbnail {
                float: left;
                display: inline;
                list-style: none;
                margin:0 0 -5px 2px;
        }
        .popular-posts .item-snippet, .popular-posts .item-title {
                display: none;
        }

.widget.PopularPosts .widget-content {
                padding:0 0 5px 0!Important;
                margin:0!Important;
        }

.item-thumbnail {
padding: 2px;
border: 1px solid #ddd;
width: 111px;
height: 111px;
}
.item-thumbnail img {
padding: 2px;
border: 1px solid #ddd;
width: 111px;
height: 111px;
}

.popular-posts .item-title,.popular-posts .item-snippet {
display: none;
}

.popular-posts ul {
  list-style: none;
  padding: 0;
}
.popular-posts ul li {
  
 width: 100%;
height: 225px;
padding: 10px !important;
box-sizing: border-box;
position: relative;
overflow: hidden;
}

.popular-posts .item-thumbnail {
  margin: 0;
  background-color: #000;
}
.popular-posts img {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding:0;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}
.popular-posts .item-content:hover img,
.popular-posts .item-thumbnail-only:hover img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
  opacity: 0.5;
}
.popular-posts .item-title a {
  color: #fff;
  position: absolute;
  text-align: center;
  left: 12px;
  right: 12px;
  bottom: 40px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}
.popular-posts .item-content:hover .item-title a,
.popular-posts .item-thumbnail-only:hover .item-title a {
  opacity: 1;
  visibility: visible;
}
.popular-posts .item-snippet {
  display: none;
}

.slicknav_menu {
display:none;
}

]]></b:skin>
    <b:if cond='data:blog.pageType == "item"'>
      <style type='text/css'>
.post-outer {margin:0 20px}
        #artikel{box-shadow: none;
-webkit-box-shadow:none;}
        #wrapper{width:100%;max-width:100%;margin-top:5px;margin:0 auto;padding:0;
          text-align:left;float:none;background:#f0f0f0;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj68b8GablRXPba_Ody40knTEJN0SVA8_fLxpPoC7ifrHPtg5uQNgq_UlowaNm9EQ3ddDZDmwX-CNlCXFzQhyphenhyphenZ1fYbY_S5aTR9IpF_9gmKqR76fm6W_gYdjTHntieZKlAgX2BGhP668mLLW/s1600/1_wide.jpg)fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
        #main {margin-left:10px;background:#fff;box-shadow: 0 1px 1px rgba(0,0,0,0.06);}
        #artikel{padding:20px;}
        #breakingnews{display:none;}
        .comment_name{background:transparent !important;}
        .comment_body p{background:transparent !important;}
        .comment_reply {background:#e74c3c;}
        .comment_body {background:#16a085;}
        .comment_name {background:#2c3e50;}
        .comment_name a{color:#8f8f8f;}
        .comment_body p {background:#7ac9c4;}
        .comment_avatar_wrap {background:#16a085;}
        .post-info {overflow:hidden;margin-top:20px;padding:10px 0;}
        h1.post-title a {font-size:23px;text-align:center;display:block;margin-bottom:20px;}
        .vcard2{float:left;}.post-footer{float:right;}
        .post img{height:auto;max-width:95%;border:0;transition:all 0.5s ease-in-out;}
        .post img:hover{box-shadow:0 1px 2px rgba(0,0,0,0.1);}
        
        .breadcrumbs{font-family: 'Oswald',sans-serif;
background: #459bb6;
padding: 12px 20px 12px 20px;
margin-bottom: 19px;
font-size: 14px;
color: #f9f9f9;
position: relative;
display: block;
background: #383838;
color: #fff;
text-transform: uppercase;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrZKYTibLd0f_voSTQ5AtNaffTQxBBPiK4HLJl-XTmvHhomixnYKkj9gsXCiy1A3i3PDz9C8WKMeaVakQqJJ7amY0dWboiaHdL03v2tkKllIl2mAoolLN-6I2czsr8BmDtEt7wsnrRuthG/s1600/main-menu-ornament.png);}
        .breadcrumbs a{color:#f9f9f9;text-decoration:none}
        .breadcrumbs a:hover{color:#fff;text-decoration:none;}
      </style>
    </b:if>
    <b:if cond='data:blog.pageType != "item"'>
      <b:if cond='data:blog.pageType != "static_page"'>
        <style type='text/css'>
          #wrapper{width:100%;max-width:100%;float:none;margin:0 auto;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj68b8GablRXPba_Ody40knTEJN0SVA8_fLxpPoC7ifrHPtg5uQNgq_UlowaNm9EQ3ddDZDmwX-CNlCXFzQhyphenhyphenZ1fYbY_S5aTR9IpF_9gmKqR76fm6W_gYdjTHntieZKlAgX2BGhP668mLLW/s1600/1_wide.jpg)fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

#menu{right:0px;}
          #bagian-aside{width:100%;float:left;}#iklan-kanan{display:none;}
          .post{background:#333;position:relative;padding:0;box-shadow: 0 1px 1px rgba(0,0,0,0.06);transition:all 1s ease-out;animation:BounceRate 3s;}
          .post-body{display:none;}
          .post-outer{width:20%;overflow:hidden;display:inline-block;float:left;background-image:url(http://3.bp.blogspot.com/-SSHTj65erWo/U1j3eik1dRI/AAAAAAABeRg/iuagdxXNfEY/s1600/icon-hover.png);background-position:50% 50%;background-repeat:no-repeat;transition:all 0.6s ease-out;animation:BounceRate 3s;}
          .post-outer:hover img{cursor:pointer;opacity:0.9;}
          h2.post-title {position:absolute;bottom:0;min-height:100%;background:transparent;
            width:100%;padding-bottom:420px;transition:all 0.6s ease;animation:BounceRate 3s;}
          h2.post-title:hover{padding-bottom:0;box-shadow:inset 0 2px 3px rgba(0,0,0,0.2);text-decoration:none;}
          h2.post-title a {text-align: center;
            font-size: 17px;
            display: block;
            line-height: 25px;
            height:250px;
            font-family: "Oswald",Verdana,Sans-Serif;
            font-weight: 400;
            color: #fff;
            background: #000;
            opacity: 0.6;
            /* height: 250px; */
            padding: 10px 12px;
            transition: all 0.3s ease-in-out;}
          h2.post-title a:hover{color:#fff;}
          body{background:#f0f0f0;}
          .post img{width:100%;height:100%;border:0;transition:all 0.6s ease-out;animation:BounceRate 3s;}
          .info-artikel, .breadcrumbs, #BounceToTop, .vcard2, .post-footer, .hilang {display:none;}
          /* Responsive */
          @media screen and (max-width:1920px){
            .post-outer {width:20%;}}
          @media screen and (max-width:1366px){
            .post-outer {width:20%;}}
          @media screen and (max-width:1280px){
            .post-outer {width:25%;}}
          @media screen and (max-width:1024px){
            .post-outer {width:25%;}}
          @media screen and (max-width:980px){
            .post-outer {width:50%;}}
          @media screen and (max-width:600px){
            .post{margin:0.5px;}
            #search, #search-form {width:80%;}
            #breakingnews,.date-time {display:none}
            #header,#header .description,#header h1,#header p,#header a {text-align:center;}
            #header-wrapper{margin:0 auto;}
            #wrapper,#menu,#menutop,#rapih,.tab{width:100%;margin:0 auto;}}
          @media screen and (max-width:430px){
            .post-outer {width:100%;}
            #search, #search-form {width:60%;}
            #breakingnews,.date-time {display:none}
            #header,#header .description,#header h1,#header p,#header a{text-align:center;}
            #header-wrapper{margin:0 auto;}
            #wrapper,#menu,#menutop,#rapih,.tab{width:100%;margin:0 auto;}}
          @media screen and (max-width:384px){
            .post-outer {width:100%;}
            #search, #search-form {width:30%;}
            #breakingnews,.date-time {display:none}
            #header,#header .description,#header h1,#header p,#header a{text-align:center;}
            #header-wrapper{margin:0 auto;}
            #wrapper,#menu,#menutop,#rapih,.tab{width:100%;margin:0 auto;}
            #social_networks ul{bottom:20px;}}
          @media screen and (max-width:320px){
            .post-outer {width:100%;}
            #search, #search-form {width:30%;}
            #breakingnews,.date-time {display:none}
            #header,#header .description,#header h1,#header p,#header a{text-align:center;}
            #header-wrapper{margin:0 auto;}
            #wrapper,#menu,#menutop,#rapih,.tab{width:100%;margin:0 auto;}
            #social_networks ul{bottom:20px;}}
          @media screen and (max-width:240px){
            .post-outer {width:100%;}
            #search, #search-form {width:30%;}
            #breakingnews,.date-time,#menutop {display:none}
            #header,#header .description,#header h1,#header p,#header a{text-align:center;}
            #header-wrapper{margin:0 auto;}
            #wrapper,#menu,#rapih,.tab{width:100%;margin:0 auto;}
            #social_networks ul{bottom:20px;}}
        </style>
      </b:if>
    </b:if>

/*
    Mobile Menu Core Style
*/

.slicknav_btn { position: relative; display: block; vertical-align: middle; float: left;  line-height: 27px; cursor: pointer;  height:27px;}
.slicknav_menu  .slicknav_menutxt { display: block; line-height: 1.188em; float: left; }
.slicknav_menu .slicknav_icon { float: left; margin: 0.188em 0 0 0.438em; }
.slicknav_menu .slicknav_no-text { margin: 0 }
.slicknav_menu .slicknav_icon-bar { display: block; width: 1.125em; height: 0.125em; }
.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar { margin-top: 0.188em }
.slicknav_nav { clear: both }
.slicknav_nav ul,
.slicknav_nav li { display: block }
.slicknav_nav .slicknav_arrow { font-size: 0.8em; margin: 0 0 0 0.4em; }
.slicknav_nav .slicknav_item { cursor: pointer; }
.slicknav_nav .slicknav_row { display: block; }
.slicknav_nav a { display: block }
.slicknav_nav .slicknav_item a,
.slicknav_nav .slicknav_parent-link a { display: inline }
.slicknav_menu:before,
.slicknav_menu:after { content: " "; display: table; }
.slicknav_menu:after { clear: both }
/* IE6/7 support */
.slicknav_menu { *zoom: 1 }

/* 
    User Default Style
    Change the following styles to modify the appearance of the menu.
*/

.slicknav_menu {
    font-size:16px;
}
/* Button */
.slicknav_btn {
    margin: 4px 5px 0px;
    text-decoration:none;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;  
    
}
/* Button Text */
.slicknav_menu  .slicknav_menutxt {
    color: #FFF;
    font-weight: bold;
    text-shadow: 0 1px 3px #000;
}
/* Button Lines */
.slicknav_menu .slicknav_icon-bar {
  background-color: #f5f5f5;
}
.slicknav_menu {
    background:#363636;
    padding:5px;
}
.slicknav_nav {
    color:#fff;
    margin:0;
    padding:0;
    font-size:0.875em;
}
.slicknav_nav, .slicknav_nav ul {
    list-style: none;
    overflow:hidden;
}
.slicknav_nav ul {
    padding:0;
    margin:0 0 0 20px;
}
.slicknav_nav .slicknav_row {
    padding:5px 10px;
    margin:2px 5px;
}
.slicknav_nav a{
    padding:5px 10px;
    margin:2px 5px;
    text-decoration:none;
    color:#fff;
 font-family:"Open Sans", sans-serif;
 font-size:11px;
 font-weight:400;
 letter-spacing:2px;
 color:#fff;
 text-transform:uppercase;
}
.slicknav_nav .slicknav_item a,
.slicknav_nav .slicknav_parent-link a {
    padding:0;
    margin:0;
}
.slicknav_nav .slicknav_row:hover {
    
}
.slicknav_nav a:hover{
    
    background:#333;
    color:#fff;
}
.slicknav_nav .slicknav_txtnode {
     margin-left:15px;   
}

.slicknav_menu .slicknav_no-text {
 margin-top:7px;
}

</style>
    <style type='text/css'>
      url(http://themes.googleusercontent.com/static/fonts/anaheim/v2/9grF9iDBrnUvUAGLpfiBHQ.woff) format('woff');}
      @font-face {font-family:'Nova Square';font-style:normal;font-weight:400;
        src:local('Nova Square'), local('NovaSquare'), url(http://themes.googleusercontent.com/static/fonts/novasquare/v6/YsNHj2Yx5KzHzIjNe-czdIbN6UDyHWBl620a-IRfuBk.woff) format('woff');}
      @font-face {font-family:'Oswald';font-style:normal;font-weight:400;
        src: local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');}
      /* Header */
      #header-wrapper {width:100%;background:#277fbf;padding:75px 0 45px 0;}
      #header {text-align: center;
color: #fff;
margin: -6px 30px 0 65px;}
      #header h1, #header p {font-family:'Nova Square';font-size:174%;font-weight:400;color:#fff;}
      #header a {color:#fff;text-decoration:none;transition:all 0.3s ease-in-out;}
      #header a:hover {color:#f0f0f0;}
      #header .description {margin:0 auto;padding:10px;letter-spacing:.2em;line-height:1.4em;font:normal normal 100% 'Open Sans', Trebuchet, Arial, Verdana, Sans-serif;color:#fff;}
      #header img {margin-left:auto;margin-right:auto;}
      /* Horizontal Menu */
      #menutop ul,#menutop li,#menutop span,#menutop a {margin:0;padding:0;
        position:relative;}
      #menucover{height: 60px;
        background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrZKYTibLd0f_voSTQ5AtNaffTQxBBPiK4HLJl-XTmvHhomixnYKkj9gsXCiy1A3i3PDz9C8WKMeaVakQqJJ7amY0dWboiaHdL03v2tkKllIl2mAoolLN-6I2czsr8BmDtEt7wsnrRuthG/s1600/main-menu-ornament.png) no-repeat center;}
      #menutop {height:60px;width:auto;margin-right: 30px;}
      #menutop:after,#menutop ul:after {content:'';display:block;clear:both;}
      #menutop a {color:#8f8f8f;display:inline-block;font-family:'Open Sans',Arial,Verdana,sans-serif;font-size:15px;font-weight:400;line-height:60px;padding:0 20px;text-decoration:none;transition:all 0.3s ease;}
      #menutop ul {list-style:none;}
      #menutop > ul,#menutop > ul > li {float:left;}
      #menutop > ul > li > a {color: #FFFFFF;
font-size: 13px;
text-transform: uppercase;}
      .active{background:#F76570;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9XSnVez7g0VVuKTSWxuX0TPJ0xgZ4nKqxs7ZmiBU3af7urc1fJg8NbYVxBWeBhjxSeX8ue5r6WkzhUs8HgrNbwQr_NnDCCmdYb6T1pB4uZbNoeiR2WsXD-n9JvDVwSW9uSqPNIxxnYMh8/s1600/filter.png);}
      #menutop > ul > li.active > a {color:#fff;}
      #menutop > ul > li:hover > a {background:#F76570;color:#fff;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9XSnVez7g0VVuKTSWxuX0TPJ0xgZ4nKqxs7ZmiBU3af7urc1fJg8NbYVxBWeBhjxSeX8ue5r6WkzhUs8HgrNbwQr_NnDCCmdYb6T1pB4uZbNoeiR2WsXD-n9JvDVwSW9uSqPNIxxnYMh8/s1600/filter.png);}
      #menutop .menu-sub {z-index:1;}
      #menutop .menu-sub:hover > ul {display:block;}
      #menutop .menu-sub ul {display:none;position:absolute;width:200px;top:100%;left:0;box-shadow:0 1px 2px 0 rgba(0,0,0,0.3);border-radius:2px;}
      #menutop .menu-sub ul li {margin-bottom:0px;}
      #menutop .menu-sub ul li a {background:#f6f6f6;font-size:13px;display:block;line-height:120%;padding:10px;color:#8f8f8f;text-transform:uppercase;transition:all 0.3s ease;}
      #menutop .menu-sub ul li:hover a {background:#F76570;color:#fff;}
      #menutop .menu-sub .menu-sub:hover > ul {display:block;}
      #menutop .menu-sub .menu-sub ul {display:none;position:absolute;left:100%;top:0;}
      #menutop .menu-sub .menu-sub ul li a {background:#F76570;color:#fff;transition:all 0.8s ease-in-out;}
      #menutop .menu-sub .menu-sub ul li a:hover {background:#F76570;color:#fff;}
      /* CSS Loading Page */
      #page-loader {position:fixed!important;position:absolute;top:0;right:0;bottom:0;
        left:0;z-index:9999;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8yvfX7rmgMOb3dlWqh9gAkZ0_wnJY1FRnLMyTy2XLK1R9YCH0s66IHkpGPUIqxbRAWZ1-DRlHjuyINCAQaqMOKDytXVnXQNcofHOIr3aeU6QRm0-IjvUdW-M5I55a-75Bq6xt-WjxSa9P/s1600/Preloader_8.gif) no-repeat 50% 50%;color:#f6f6f6;padding:1em 1.2em;display:none;}
      /* CSS Default */
      #rapih {overflow:hidden;width:100%;float:right;}
      #iklan-atas-kanan img {max-height:125px;height:125px;}
     
      .info-artikel {position:absolute;bottom:5px;left:5px;margin:0 auto;width:300px;z-index:999;transition:all 0.6s ease;animation:BounceRate 3s;}
      .post-info-icon{font-family:'Oswald',Verdana,Sans-serif;text-transform:uppercase;background-color:rgba(255,255,255,0.9);color:#8f8f8f;font-size:10px;display:block;float:left;padding:5px 8px;border-radius:3px;margin:3px;box-shadow:0 0 3px rgba(0,0,0,0.2);transition:all 0.6s ease;animation:BounceRate 3s;}
      .post-info-icon:hover{background:#F7737D;color:#fff;}
      .post-info-icon a{color:#8f8f8f;}
      .post-info-icon a:hover{color:#fff;}
      
      .separator a{margin-left:0px !important;margin-right:0 !important;}
      .permalink{line-height:1.7em;font-size:13px;margin:6px 0 0;padding:0 5px;
        background:#eec689;color:#fff;overflow:hidden;}
      #inikotak {font-family: 'Oswald',sans-serif;
background: #2c2c2c;
padding: 10px 15px 10px 15px;
margin-bottom: 19px;
font-size: 18px;
color: #fff;
position: relative;
display: block;
text-transform: uppercase;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrZKYTibLd0f_voSTQ5AtNaffTQxBBPiK4HLJl-XTmvHhomixnYKkj9gsXCiy1A3i3PDz9C8WKMeaVakQqJJ7amY0dWboiaHdL03v2tkKllIl2mAoolLN-6I2czsr8BmDtEt7wsnrRuthG/s1600/main-menu-ornament.png);}
      #artikel-terkait a {color:#ddd;}
      
      #artikel-terkait ul {width:100%;margin-bottom:10px;padding:0px;list-style:none;margin-left: 0px;}
      #artikel-terkait ul li {background: #353535;
float: left;
height: 204px;
margin: 0 7px 7px 0;
width: 280px;
font: 14px Open Sans;
text-align: center;
padding-top: 10px;
padding: 0;
border-bottom: 1px solid #e9e9e9;
transition: all 400ms ease-in-out;overflow: hidden;}
     
      #artikel-terkait img {max-width: 100%;
width: 280px;
height: 180px;
opacity: 1;
padding: 0;
object-fit: cover;
background: none;
box-shadow: none;
transition: all 400ms ease-in-out;}
     
      #artikel-terkait ul li:nth-child(3n+3) {margin-right:0px;}
      .hrecipe{line-height:1.7em;font-size:13px;margin:6px 0 0;padding:12px;
        background:#f8f8f8;border:none;color:#303641;overflow:hidden;}
     
      #copyright{width: 100%;
margin: 0 auto;
color: #f6f6f6;

padding: 35px;
padding-left: 0;
padding-right: 0;
position: relative;
height: 55px;}
      #copy{font-family:sans-serif,'Oswald';font-size:10px;font-weight:400;text-transform:uppercase;color:#f6f6f6;text-align:center;transition:all 0.8s ease-out 0s;}
      #copyright a{color:#f6f6f6;transition:all 0.8s ease-out 0s;}
      #copy:hover{color:#fff;}
      #copyright a:hover{color:#fff;}
      #ngerror {color:#fff;text-align:center;margin-bottom:50px;font-weight:normal;
        font-family:'Oswald',sans-serif;position:fixed;width:100%;height:100%;line-height:1.5em;z-index:9999;background:rgba(0,0,0,0.59);}
      #error-text {top:30%;position:relative;}
      #error-gambar {
        background-image:url(//ssl.gstatic.com/docs/common/v-sprite5.svg)!important;
        background-repeat:no-repeat;background-size:100%;height:240px;margin:0 auto;
        width:200px;top:30%;position:relative;}
      /* CSS Breaking News */
      #breakingnews {background:#fff;box-shadow: 0 0 1px rgba(0,0,0,0.08);width:98%;margin:10px;height:29px;line-height:25px;overflow:hidden;margin-top:15px;}
      #recentpostbreaking li a {font-family:'Open Sans';font-weight:400;color:#8f8f8f;margin-top:10px;transition:all 0.5s ease-in-out;}
      #recentpostbreaking li a:hover {color:#277fbf;}
      #breakingnews .tulisbreaking {background:none repeat scroll 0 0 #459bb6;
        color:#fff;display:block;float:left;margin-left:0;font-family:'Oswald';font-weight:400;text-transform:uppercase;padding:2px 7px;position:absolute;}
      #recentpostbreaking {float:left;margin-left:130px;padding-top:3px}
      #recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
      .date-time {color:#8f8f8f;display:block;float:right;font-size:12px;padding:2px 7px;margin-right:10px;font-family:'Open Sans';font-weight:400;text-transform:uppercase;padding:2px 7px;}
      #social_networks{bottom:20px;display:block;float:none;text-align:center;margin:0 auto;}
      #social_networks ul {display:block;text-align:center;height:32px;margin:0 auto;}
      #social_networks li{display:inline-block;float:none;width:32px;height:32px;
        opacity:0.3;background-position:left top;border:3px solid #67a5d2;border-radius:50%;transition:All 0.4s ease;}
      #social_networks li:hover{opacity:1;background-position:left -32px;border:3px solid #92c0e1;box-shadow:0 1px 3px rgba(0,0,0,0.3);}
      #social_networks li a{display:inline-block;width:32px;height:32px;}
      #social_networks li a span{display:none;}
      #social_networks li.facebook{background-image:url(http://3.bp.blogspot.com/-9ou8A7WFiy0/U17P3ExpUWI/AAAAAAAACgQ/yb_QKEjM0JM/s1600/social_network_facebook.png);}
      #social_networks li.twitter{background-image:url(http://4.bp.blogspot.com/-hFVGbhzmOiY/U17P_E_LdqI/AAAAAAAAChE/V5NhA_lyVtA/s1600/social_network_twitter.png);}
      #social_networks li.linkedin{background-image:url(http://1.bp.blogspot.com/-G3bPnh1ejd0/U17P59mbfkI/AAAAAAAACgk/FOq0SQIvSek/s1600/social_network_linkedin.png);}
      #social_networks li.tumblr{background-image:url(http://4.bp.blogspot.com/--Zlo0ilxuDQ/U17P8Y5PujI/AAAAAAAACg4/yKvIPjlF2ZU/s1600/social_network_tumblr.png);}
      #social_networks li.vimeo{background-image:url(http://4.bp.blogspot.com/-yn2yMPvZIJA/U17P_F8YjyI/AAAAAAAAChI/LIoHupBsJUg/s1600/social_network_vimeo.png);}
      #social_networks li.skype{background-image:url(http://4.bp.blogspot.com/-H6kgTdMNhNY/U17P8A0MezI/AAAAAAAACg0/F18xPYtnprM/s1600/social_network_skype.png);}
      #social_networks li.youtube{background-image:url(http://3.bp.blogspot.com/-OCKvKbUveko/U17P_lFFnAI/AAAAAAAAChU/18MDanegwXc/s1600/social_network_youtube.png);}
      #social_networks li.myspace{background-image:url(http://4.bp.blogspot.com/-4VdqQv66nE8/U17P71j6EiI/AAAAAAAACgs/qPzYDRFvEIM/s1600/social_network_myspace.png);}
      #social_networks li.googleplus{background-image:url(http://1.bp.blogspot.com/-eGupsHE7YQY/U17P4NRmoqI/AAAAAAAACgc/ts3pm2_bGko/s1600/social_network_googleplus.png);}
      #social_networks li.deviantart{background-image:url(http://3.bp.blogspot.com/-_lEfD7RhvDw/U17P263jHuI/AAAAAAAACgE/OZjBS9GsyMo/s1600/social_network_deviantart.png);}
      #social_networks li.flickr{background-image:url(http://1.bp.blogspot.com/-SGmoX6EmxLQ/U17P3CQceII/AAAAAAAACgI/reD0MUxoQE0/s1600/social_network_flickr.png);}
      /* CSS Comment */
      #comments{line-height:1em;margin:10px 0;position:relative;background:#fff;padding:10px 0}
      #comments h3{font-family:'Oswald',sans-serif;text-transform:uppercase;background:#2c2c2c;padding:15px 20px 15px 20px;margin-bottom:19px;font-size:18px;font-weight:400;color:#fff;position:relative;display:block;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrZKYTibLd0f_voSTQ5AtNaffTQxBBPiK4HLJl-XTmvHhomixnYKkj9gsXCiy1A3i3PDz9C8WKMeaVakQqJJ7amY0dWboiaHdL03v2tkKllIl2mAoolLN-6I2czsr8BmDtEt7wsnrRuthG/s1600/main-menu-ornament.png);}
      #comments h3 a:hover{color:#f0f0f0;text-decoration:none;}
      .comment_avatar_wrap{width:72px;height:72px;background:none;padding:4px;text-align:center;margin-bottom:20px}
      #comments .avatar-image-container{float:left;margin:0 10px 0 0;width:72px;height:72px;max-width:72px;max-height:72px;padding:0;margin-bottom:10px}
      #comments .avatar-image-container img{width:72px;height:72px;max-width:72px;max-height:72px;background:url(http://1.bp.blogspot.com/-0rYVkin2JVg/U0xgcQnpE5I/AAAAAAAACZ0/LJrHfsEHBqU/s1600/Anonim+Avatar.png) no-repeat}.comment_name a{font-family:'Nova Square',Arial,Sans-serif;padding-bottom:10px;font-size:14px;text-decoration:none;padding:10px;}.comment_admin .comment_name{font-family:'Open Sans',Arial,Sans-serif;padding-bottom:30px;font-size:18px;text-decoration:none}.comment_admin .comment_date{font-weight:normal;font-size:11px}.comment_name{font-family:'Open Sans',Arial,Sans-serif;padding-bottom:30px;font-size:18px;font-weight:400;position:relative}.comment_service{margin-top:5px}.comment_date{color:#8f8f8f;float:right;font-size:11px;font-weight:normal}.comment_date a{color:#8f8f8f;float:right;font-size:11px;font-weight:normal}.comment_date a:hover{color:#f35d5c;text-decoration:none}.comment_body{margin-top:-110px;margin-left:72px;background:#fff;padding:15px;}div.comment_inner.comment_admin{background:#fff;border-bottom:2px solid #eee;margin-top:0;transition:all 2s ease-out}div.comment_inner.comment_admin:hover{border-bottom:2px solid #ddd;}.comment_body p{line-height:1.5em;margin:5px 0 0 0;margin-bottom:20px;color:#666;font-size:14px;word-wrap:break-word;padding:10px;padding-bottom:10px}.comment_inner{padding:15px;margin:5px 0 5px 0;background-color:#f9f9f9;margin-top:5px;border-left: 1px solid #ddd;
border-top: 1px solid #DDD;
border-right: 1px solid #DDD;
border-bottom: 1px solid #DDD;}.comment_child .comment_wrap{padding-left:5%}.comment_reply{display:inline-block;margin-top:0;margin-left:-5px;padding:2px 22.5px;color:#fff!important;text-align:center;text-decoration:none;background:#ccc;font:11px/18px sans-serif;transition:background-color 2s ease-out 0s;box-shadow:inset 0 1px 0 rgba(152,167,178,0.2);}.comment_reply:hover{text-decoration:none!important;background:#f35d5c;color:#fff}.unneeded-paging-control{display:none}
      #comment-editor{width:100%!important;background:#fff url('http://2.bp.blogspot.com/-3za-wu3wRmg/U18A2cnx2gI/AAAAAAAAChk/laewt0NvvFo/s1600/load.GIF') no-repeat 50% 30%;margin-bottom:20px;position:relative;}.comment-form{max-width:100%!important}.comment_form a{text-decoration:none;font-weight:normal;font-family:'Open Sans',Helvetica,Garuda,sans-serif;font-size:15px}.comment_form a:hover{text-decoration:underline}.comment_reply_form{padding:0 0 0 70px}.comment_reply_form .comment-form{width:99%}img.comment_emo{margin:0;padding:0;vertical-align:middle}.comment_emo_list .item{float:left;text-align:center;margin:10px 10px 0 0;height:40px;width:41px}.comment_emo_list span{display:block;font-weight:normal;font-size:11px;letter-spacing:1px}.comment_youtube{max-width:100%!important;width:400px;height:225px;display:block;margin:auto}.comment_img{max-width:100%!important}.comment_header{width:50px}
      #respond{overflow:hidden;padding-left:10px;clear:both}.comment_avatar img{width:72px;height:72px;background:url(http://1.bp.blogspot.com/-0rYVkin2JVg/U0xgcQnpE5I/AAAAAAAACZ0/LJrHfsEHBqU/s1600/Anonim+Avatar.png) no-repeat}.comment-delete img{float:right;margin-left:15px;margin-top:3px}.comment_admin .comment_author_flag{display:inline;background:none;font-size:8px;font-weight:normal;padding:3px 3px;right:-23px;margin-top:-17px;color:#b2c1d6;position:absolute;width:36px;height:30px}iframe{border:none;overflow:hidden}.deleted-comment{background:#db6161 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSg9lKUuRfuEUgjd9ntujig_lKo_kdPxaIoLqWF11hg3ym9HAhJ4fsGmOysGbZIDRrOrvChCeb3CNKqp1ni16eIItjcpTupnWHEUkuTo8VkobnqWs4MpmWrQe4WhOfJcukebsbp_l8mmc/s1600/tempat-sampah.png) no-repeat 2% 50%;color:#eee;line-height:22px;border:1px solid #747f88;padding:12px 15px 12px 45px;margin:5px 0;display:block}.comment-form p{}
      div.comment_avatar img[src='http://img1.blogblog.com/img/openid16-rounded.gif']{content:url(http://1.bp.blogspot.com/-0rYVkin2JVg/U0xgcQnpE5I/AAAAAAAACZ0/LJrHfsEHBqU/s1600/Anonim+Avatar.png)}div:target .comment_inner{background:#f5f5f5;transition:all 15s ease-out}div:target .comment_child .comment_wrap .comment_inner{background:#f5f5f5}iframe{border:none;overflow:hidden}
      /* CSS Konversi Kode dan Smiley */
      a.konversi-button{color:#fff;font-size:15px;font-family:'Open Sans';cursor:pointer;font-weight:400;margin-bottom:15px;text-decoration:none;text-transform:none;text-shadow:none;display:inline-block;background-color:#459bb6;padding:10px 15px;text-align:center;border-radius:2px;transition:all 0.5s ease-in-out;}
      a.konversi-button:hover{color:#fff;background-color:#00495b;text-decoration:none;}
      a.emo-button{color:#fff;font-size:15px;font-family:'Open Sans';cursor:pointer;font-weight:400;margin-bottom:15px;text-decoration:none;text-transform:none;text-shadow:none;display:inline-block;background-color:#00495b;padding:10px 15px;text-align:center;border-radius:2px;transition:all 0.5s ease-in-out;}
      a.emo-button:hover{color:#fff;background-color:#459bb6;text-decoration:none;}
      #konversi-box, #hide-konversi,#emo-box,#hide-emo {display:none}
      #konversi-box {width:97%;color:#8f8f8f;background:#e6e6e6;line-height:1.6em;margin-bottom:20px;padding:10px;text-align:left;border-radius:4px;}
      .checkbox{font:11px Arial,Verdana,Sans-Serif;line-height:1.6em;color:#fff;}
      #codes{border:none;width:97%;height:200px;display:inline-block;background-color:#00495b;color:#fff!important;font-size:12px;font-family:'Courier New',Monospace;margin:0 auto;
        padding:10px;transition:all 0.6s ease-in-out;border-radius:4px;}
      #codes p{color:#fff!important;}
      #codes:focus{border:none;background-color:#333;color:#fff;}
      .button-group{float:right;text-align:left;margin:0 auto}
      button,button[disabled]:active{font-size:15px;font-family:Arial;font-weight:normal;border:none;padding:5px 10px;text-decoration:none;background:#00495b;color:#fff;display:inline-block;cursor:pointer;transition:all 0.6s ease-in-out;}
      button:hover{color:#fff;background:#00495b;}
      button:active{color:#fff;background:#459bb6;}
      button[disabled],button[disabled]:active{color:#fff;background:#459bb6;cursor:default}
      #opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;vertical-align:middle;border:none;outline:none;margin:0 10px 0 0}
      /* CSS Slide Share Button */
      #button-count-share{width:100%;overflow:hidden;background:transparent;margin:0 auto;padding:3px;margin-top:15px;margin-bottom:15px;}
      #button-count-share span{float:left;position:relative;font-size:13px;color:#fff;margin:12px 5px 12px 5px}
      .button-share{background:#f0f0f0;position:relative;display:block;float:left;height:40px;overflow:hidden;width:140px;margin:4px;border-radius:1px;}
      .slide-share{z-index:2;display:block;height:100%;left:0;position:absolute;width:140px;margin:0}
      .slide-share p{font-family:'Open Sans';font-weight:400;color:#fff;font-size:16px;left:0;position:absolute;text-align:center;top:10px;width:100%;margin:0}
      .button-share .slide-share{transition:all 0.4s ease-in-out}
      .facebook .fb_iframe_widget{display:block;position:absolute;right:15px;top:0;z-index:1}
      .twitter iframe{right:10px;top:10px;z-index:1;display:block;position:absolute}
      .google #___plusone_0{width:90px!important;top:10px;right:10px;position:absolute;display:block;z-index:1}
      .facebook .slide-share{background:#4f79bc}
      .twitter .slide-share{background:#63cef2}
      .google .slide-share{background:#f36261}
      .facebook:hover .slide-share,.twitter:hover .slide-share,.google:hover .slide-share{left:140px;opacity:0.6;}
    /* CSS Labels */

.sidebar .label-size {position:relative;text-transform:none;text-decoration:none;font-size:13px;font-family:'Anaheim';color:#fff!important;}
.sidebar .label-size a {color:#fff!important;font-weight:400;padding:6px 8px;
margin:0 3px 3px 0;border:3px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,0.2);float:left;display:block;transition: all 0.4s ease-in-out;}
.sidebar .label-size-1 a {background:#1abc9c;}
.sidebar .label-size-1 a:hover {background:#16a085;}
.sidebar .label-size-2 a {background:#3498db;}
.sidebar .label-size-2 a:hover {background:#2980b9;}
.sidebar .label-size-3 a {background:#2ecc71;}
.sidebar .label-size-3 a:hover {background:#27ae60}
.sidebar .label-size-4 a {background:#9b59b6;}
.sidebar .label-size-4 a:hover {background:#8e44ad}
.sidebar .label-size-5 a {background:#e74c3c;}
.sidebar .label-size-5 a:hover {background:#c0392b}
.sidebar .label-size:hover{background:none;}
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;}
.cloud-label-widget-content{text-align:left}
.label-size{display:block;float:left;margin:0 3px 3px 0;color:#fff;transition:all 0.4s ease-in-out;}
#footer-wrapper .label-size {color:#fff;transition:all 0.6s ease-in-out;}
#footer-wrapper .label-size a {color:#8f8f8f;background:#fff;padding:5px;box-shadow:0 1px 3px rgba(0,0,0,0.2);}
#footer-wrapper .label-size a:hover {color:#fff;background:#459bb6;}
#footer-wrapper .label-size span {color:#1c90ad;}
.label-size a,.label-size span{display:inline-block;color:#fff;padding:3px 6px;}
.label-size:hover, #footer-wrapper .label-size:hover{background:#459bb6;color:#fff;}
.label-count{white-space:nowrap;padding-right:6px;margin-left:-3px;}
.label-size{line-height:1.2}

.post-label{position:absolute;bottom:3px;left:3px;margin:0 auto;width:300px;z-index:99;}
.post-label a{font-family:'Open Sans',Verdana,Sans-serif;background-color: rgba(26, 26, 26, 0.9);color:#fff;font-size:11px;display:block;float:left;padding:4px 7px;box-shadow:0 0 2px rgba(0,0,0,0.1); opacity: 0.9;}
.post-label a:hover{background:#f7747e;color:#fff;}

/* CSS Sidebar */
      .kotak_iklan {text-align:center;margin:0 auto;transition:all 1s ease-out;animation:BounceRate 3s;}
      .kotak_iklan .sidebar .widget-content{padding:0;background:#004050;box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);border:0;}
      .kotak_iklan .sidebar .widget {margin-bottom:0;padding:0;}
      .kotak_iklan  img {margin-bottom:2px;margin-top:2px;border:3px solid #004050;text-align:center;transition:all 1s ease-out;animation:BounceRate 3s;}
      .kotak_iklan  img:hover {border:3px solid #002933;transition:all .5s ease-out;}
      .kotak_iklan2 {text-align:center;margin:0 auto;transition:all 1s ease-out;animation:BounceRate 3s;}
      .kotak_iklan2 .sidebar .widget-content{padding:0;background:#004050;box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);border:0;}
      .kotak_iklan2 .sidebar .widget {margin-bottom:0;padding:0;}
      .kotak_iklan2  img {text-align:center;transition:all 1s ease-out;animation:BounceRate 3s;}
      .kotak_iklan2  img:hover {transition:all .5s ease-out;}
      /* CSS Stats Info */
      #Stats1 .widget-content{text-align:center;background:transparent;border-bottom:none;border:none;box-shadow:none;}
      #Stats1 .widget{background:transparent;border-bottom:none;border:none;box-shadow:none;}
      #Stats1 ul{margin:0px 0;border:0;} 
      #Stats1 li{display:inline;width:48%;border:0;color:#8f8f8f;float:left;text-decoration:none;margin:2px;font-size:12px;list-style-type:none;padding:0;box-shadow: 0 1px 1px rgba(0,0,0,0.06);transition:all 0.4s ease-out;} 
      #Stats1 li:hover{opacity:0.9;} 
      #Stats1 h4{margin:0;font-size:18px;line-height:1.2em;color:#8f8f8f;padding:3px 5px 3px 5px;} 
      #Stats1 span{font-size:12px;color:#8f8f8f;padding:3px 5px 3px 5px;} #totalposts{background:#fff;color:#277fbf;} 
      #totalComments{background:#fff;color:#00495b;} 
      /* Syntax Highlighter */
      pre,i[rel="pre"] {display:block;font:normal normal 12px/normal"Courier New",Courier,Monospace;color:#839496;padding:.5em .5em .5em 1em;background-color:#333;border-left:4px solid #e8ebf0;position:relative;overflow:auto;
        word-wrap:normal;white-space:pre-line;transition:all 0.4s ease-out;animation:BounceRate 3s;max-height:350px}
      pre:hover {background-color:#292929;}
      pre code {display:block;font:inherit;color:inherit;letter-spacing:0;white-space:pre-line;}
      pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .lisp .string,pre .javadoc {color:#586e75;font-style:italic;}
      pre mark {background-color:#459bb6;color:#f6f6f6;padding:3px;border-radius:2px;}
      pre .keyword,pre .css .rule .keyword,pre pre .winutils,pre .javascript .title,pre .method,pre .addition,pre .css .tag,pre .lisp .title {color:#859900;}
      pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor {color:#2aa198;}
      pre .title,pre .localvars,pre .function .title,pre .chunk,pre .decorator,pre .builtin,pre .built_in,pre .lisp .title,pre .identifier,pre .title .keymethods,pre .id {color:#268bd2;}
      pre .tag .title,pre .rules .property,pre .django .tag .keyword {font-weight:bold;}
      pre .attribute,pre .variable,pre .instancevar,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .label {color:#b58900;}
      pre .preprocessor,pre .pi,pre .shebang,pre .symbol,pre .diff .change,pre .special,pre .keymethods,pre .attr_selector,pre .important,pre .subst,pre .cdata {color:#cb4b16;}
      pre .deletion {color:#dc322f;}
      pre .tex .formula {background:#073642;}
      .spammer-detected{color:#ddd;font-style:italic;font-size:90%}
      .status-msg-wrap{display:none}
      /* CSS Info */
      .info, .tips, .warning {line-height:22px;min-height:38px;padding:10px 12px 12px 10px;margin:5px 0;}
      .info {background:#f0f0f0;color:#666;box-shadow:inset 0 1px 5px 0 rgba(0,0,0,0.06);}
      .tips {background:#f0f0f0;color:#666;box-shadow:inset 0 1px 5px 0 rgba(0,0,0,0.06);}
      .warning {background:#f0f0f0;color:#666;box-shadow:inset 0 1px 5px 0 rgba(0,0,0,0.06);}
      /* BUTTON */
      .button{float:left;list-style:none;text-align:center;width:95%;margin:10px;
        padding:2px;font-size:14px;clear:both;}
      .button ul {margin:0;padding:0}
      .button li{display:inline;margin:0;padding:0}
      .demo {padding:7px 14px!important;background:#F3F3F3;color:#bbb;font-weight:400;font-size:14px;font-family:'Helvetica',sans-serif;text-align:center;text-shadow:0 1px 0 white;transition:0.4s all ease-in-out;letter-spacing:0;border-radius:2px;border:solid 1px gainsboro;}
      .download {padding:7px 14px!important;background:#F3F3F3;color:#bbb;font-weight:400;font-size:14px;font-family:'Helvetica',sans-serif;text-align:center;text-shadow:0 1px 0 white;transition:0.4s all ease-in-out;letter-spacing:0;border-radius:2px;border:solid 1px gainsboro;}
      .demo:hover {color:#8f8f8f;border:1px solid #999;box-shadow:0 1px 2px rgba(0,0,0,0.15);text-decoration:none;}
      .download:hover {color:#8f8f8f;border:1px solid #999;box-shadow:0 1px 2px rgba(0,0,0,0.15);text-decoration:none;}
      /* CSS Contact */
      #ContactForm1{display:none;}
      #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
        width:300px;height:auto;margin:5px auto;padding:10px;background:#e9e9e9;border:none;color:#666;}
      #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{background:#f6f6f6;transition:all 0.4s;}
      #ContactForm1_contact-form-email-message{width:450px;height:175px;margin:5px auto;padding:10px;background:#e9e9e9;border:none;color:#666;font-family:'Open Sans',sans-serif;}
      #ContactForm1_contact-form-submit {width:101px;height:35px;float:left;color:#fff;padding:0;margin:10px 0 3px 0;
        cursor:pointer;background:#57ad68;border:none;transition:background 0.4s linear;}
      #ContactForm1_contact-form-submit:hover {background:#468a53;}
      #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
        width:450px;margin-top:35px;}
      /* CSS Sitemap */
      #bp_toc {background:#f6f6f6;width:100%;color:#8f8f8f;margin-top:10px;margin:0 auto;padding:5px;}
      .toc-header-col1 {padding:10px;padding-left:10px;background-color:#277fbf;width:250px;transition:all 0.8s ease-in-out;}
      .toc-header-col2 {padding:10px;padding-left:10px;background-color:#e2614c;width:75px;transition:all 0.8s ease-in-out;}
      .toc-header-col3 {padding:10px;padding-left:10px;background-color:#fdc800;width:125px;transition:all 0.8s ease-in-out;}
      .toc-header-col1:hover, .toc-header-col2:hover, .toc-header-col3:hover {background-color:#84267e;box-shadow:inset 0 0 2px rgba(0,0,0,0.1);}
      .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
        font-size:96%;text-decoration:none;color:white;}
      .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
        font-size:96%;text-decoration:none;}
      .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#f1f1f1;padding:5px;padding-left:5px;font-size:89%}
      
      /* CSS Popular Posts */
    
      /* CSS Image Lightbox Black */
      #jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;}
      #jquery-lightbox{position:absolute;top:0;left:0;width:100%;z-index:100;text-align:center;line-height:0}
      #jquery-lightbox a,#jquery-lightbox a:hover{border:none}
      #jquery-lightbox a img{border:none;}
      #lightbox-container-image-box{position:relative;background-color:#222;width:250px;height:250px;margin:0 auto;}
      #lightbox-container-image{padding:10px;}
      #lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0}
      #lightbox-nav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10}
      #lightbox-container-image-box > #lightbox-nav{left:0;}
      #lightbox-nav a{outline:none}
      #lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;display:block}
      #lightbox-nav-btnPrev{left:10%;float:left}
      #lightbox-nav-btnNext{right:10%;float:right}
      #lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#222;margin:0 auto;line-height:1.4em;overflow:auto;max-width:100%;padding:0 10px 0;}
      #lightbox-container-image-data{padding:0 10px;color:#acacac}
      #lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left}
      #lightbox-image-details-caption{font-weight:bold}
      #lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em}
      #lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em}
      .check1{border:0;text-align:center;letter-spacing:1px;display:inline-block;padding:4px 8px;background:#e7ebf2;color:#8f8f8f;transition:all 0.3s ease-in-out;}
      .check1:hover{background:#459bb6;color:#fff;}
      .BD_spoler{background:#32425c;color:#fff;
        cursor:pointer;font-family:'Oswald';font-weight:700;padding:20px;text-transform:uppercase;width:100%;background-color:#e3ecf1;transition: all 0.4s ease-in-out;}
      .BD_spoler:hover{background-color:#666;color:#fff;}
      .BD_spoler:focus{background-color:#666;color:#fff;}
      /* CSS Quote */
      .quote {background:#e17664;position:relative;width:85%;padding:1em 1.5em;margin:2em auto;color:#fff;overflow:hidden;font-weight:400;font-family:'Oswald';text-shadow:0 1px 3px rgba(0,0,0,0.3);transition:all 0.4s ease-in-out;}
      .quote:before {content: "";position:absolute;top:0;right:0;border-width:0 25px 25px 0;
        border-style:solid;border-color:#f6f6f6 #f6f6f6 #e59f92 #e59f92;background:#e59f92;box-shadow:0 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2);display:block;width:0;}
      .quote:hover {background:#d06e5d;}
      .quote.rounded {border-radius:5px 0 5px 5px;}
      .quote.rounded:before {border-width:8px;border-color:#f6f6f6 #f6f6f6 transparent transparent;border-radius:0 0 0 5px;}
      .quote.red {background:#ee7147;}
      .quote.red:before {border-color:#f6f6f6 #f6f6f6 #ee9678 #ee9678;background:#ee9678;}
      .quote.green {background:#00ce9d;}
      .quote.green:before {border-color:#f6f6f6 #f6f6f6 transparent transparent; background:transparent;}
      .quote.taupe {background:#404040;}
      .quote.taupe:before {border-color:#f6f6f6 #f6f6f6 #98bce3 #98bce3;background:#98bce3;}
      /* CSS Bounce to Top */
      #BounceToTop {background: rgba(0, 0, 0, 0.62);
text-align: center;
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
width: 30px;
height: 30px;
display:none;
padding: 5px;}
      #BounceToTop:before {content:"";position:absolute;bottom:8px;right:8px;width:0; height:0;line-height:0;transition:all 1s ease-out;animation:BounceRate 3s;}
     
      #BounceToTop:after {content:""; position:absolute;bottom:15px;right:14px;width:0;height:0;border-style:solid;border-width:0 6px 9px 6px;border-color:transparent transparent #fff transparent;line-height:0;}
      /* CSS Search */
      #search {position:relative;font-size:13px;font-family:'Open Sans',Arial,Helvetica,sans-serif;float:right;margin-top:7px;right:18px;}
      #search-form {background-color:#f3f3f3;height:32px;line-height:32px;border:0 none;font-family:'Open Sans',Arial,Helvetica,sans-serif;font-size:13px;font-weight:400;color:#bbb;width:150px;border-radius:5px;box-shadow:inset 0 0 1px 0 rgba(0,0,0,0.2);padding:0 10px;transition:all 0.5s ease 0s;}
      #search-form .search-button,#search-form .search-button:hover{transition:all 0.5s ease 0s;height:21px;width:21px;line-height:30px;background-color:#f6f6f6;border:0 none;float:right;cursor:pointer;outline:none;}
      #search-form:hover{background-color:#f0f0f0;}
      #search-form:focus{background-color:#eee;text-shadow:none !important;outline:none;color:#459bb6;}
      #box {display:none}
      .search-text {font-size:13px;font-family:'Anaheim';float:right;cursor:pointer;}
      .search-text:hover {color:#459bb6}
      button,button[disabled]:active{font-size:13px;font-family:'Oswald';font-weight:400;border:none;padding:3px 8px;text-decoration:none;background:#f6f6f6;color:#e2614c;display:inline-block;cursor:pointer;transition:all 0.6s ease-in-out;}
      button:hover{color:#e2614c;background:#f6f6f6;}
      button:active{color:#e2614c;background:#f6f6f6;}
      /* CSS Slide Side Menu */
.pushmenu {background:#2c2c2c;box-shadow: inset -1px 0px 2px 0px rgba(0,0,0,0.15);font-family:'Anaheim',Helvetics,sans-serif;
width:240px;height:100%;top:0;z-index:1000;position:fixed;}
.pushmenu h3 {display:block;color:#ccc;font-size:16px;font-weight:400;text-decoration:none;padding:13px;margin-left:0px;margin-right:10px;background:#2c2c2c;}
.pushmenu a {display:block;color:#ccc;border-bottom:1px solid #222;border-top:1px solid #333;font-size:14px;font-weight:400;text-decoration:none;padding:14px;margin-left:0px;margin-right:0px;transition:all 0.3s ease-in-out;}
.pushmenu a:hover {background:#222;color:#fff;}
.pushmenu a:active {background:#222;color:#fff;}
.pushmenu-left {left:-240px;}
.pushmenu-left.pushmenu-open {left:0;}
.pushmenu-push {overflow-x:hidden;position:relative;left:0;}
.pushmenu-push-toright {left:240px;}
.pushmenu, .pushmenu-push {transition:all 0.3s ease;}
nav-list.active {background-position:-33px top;}
.buttonset {background:#fff;height:16px;padding:10px 20px 20px;}

/* CSS Menu Accordion */
#accordion {background:#2c2c2c;width:240px;color:#ccc;box-shadow: inset -3px 0px 5px 0px rgba(0,0,0,0.25);}
#accordion h3 {display:block;margin-top:0;color:#ccc;font-size:14px;font-weight:400;text-decoration:none;padding:13px;margin-left:0px;margin-right:0px;
background:#3a3a3a;border-bottom:none;cursor:pointer;transition:all 0.3s ease-in-out;}
#accordion li {list-style:none;}
#accordion ul ul li a {display:block;background:#181818;color:#999;border-bottom:1px solid #151515;border-top:1px solid #222;font-size:14px;font-weight:400;text-decoration:none;padding:14px;transition:all 0.3s ease-in-out;}
#accordion ul li li a:hover {color:#fff;background:#313131;box-shadow:0 1px 2px rgba(0,0,0,0.1);}
#accordion ul ul {display:none;}
#accordion h3 span {font-size:16px;}
      
      
/*-----------------------------------------------------------------------------------*/
/* SOCIAL ICONS
/*-----------------------------------------------------------------------------------*/
.social {
    padding: 0;
    margin: 0 0 -5px 0;
    font-size: 0;
    line-height: 1;
}
.social li {
    display: inline-block;
    font-family: 'fontello-social';
    margin-right: 5px;
    margin-bottom: 5px;
}
.text-center .social li {
    margin: 0 2px
}
.social.pull-right li {
    margin: 0 0 0 5px
}
.social li a {
    display: table
}
.social li a i {
   text-align: center;
display: table-cell;
vertical-align: middle;
color: #f5f5f5;
background: none;
line-height: 1;
border: 1px solid #aaa;
width: 32px;
height: 32px !important;
line-height: 1;
font-size: 18px;
-webkit-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
}
.social .fa-pinterest {
    border-color: #d8545d;
    color: #d8545d;
}
.social .fa-rss {
    border-color: #faaa5e;
    color: #faaa5e;
}
.social .fa-facebook {
    border-color: #677fb5;
    color: #677fb5;
}
.social .fa-twitter {
    border-color: #70c2e9;
    color: #70c2e9;
}
.social .fa-flickr {
    border-color: #ff3ba4;
    color: #ff3ba4;
}
.social .fa-dribbble {
    border-color: #e299c2;
    color: #e299c2;
}
.social .fa-behance {
    border-color: #42a9fb;
    color: #42a9fb;
}
.social .fa-linkedin {
    border-color: #3daccf;
    color: #3daccf;
}
.social .fa-vimeo {
    border-color: #42b5d4;
    color: #42b5d4;
}
.social .fa-youtube {
    border-color: #d5615c;
    color: #d5615c;
}
.social .fa-skype {
    border-color: #5ecbf3;
    color: #5ecbf3;
}
.social .fa-tumblr {
    border-color: #829fb9;
    color: #829fb9;
}
.social .fa-delicious {
    border-color: #6194dc;
    color: #6194dc;
}
.social .fa-500px {
    border-color: #3bbbe6;
    color: #3bbbe6;
}
.social .fa-grooveshark {
    border-color: #f88e3b;
    color: #f88e3b;
}
.social .fa-forrst {
    border-color: #5f9864;
    color: #5f9864;
}
.social .fa-digg {
    border-color: #507faa;
    color: #507faa;
}
.social .fa-blogger {
    border-color: #fd893f;
    color: #fd893f;
}
.social .fa-klout {
    border-color: #e16747;
    color: #e16747;
}
.social .fa-dropbox {
    border-color: #6ba3c5;
    color: #6ba3c5;
}
.social .fa-github {
    border-color: #6c93bb;
    color: #6c93bb;
}
.social .fa-songkick {
    border-color: #ff3b60;
    color: #ff3b60;
}
.social .fa-posterous {
    border-color: #efd57c;
    color: #efd57c;
}
.social .fa-appnet {
    border-color: #3daad5;
    color: #3daad5;
}
.social .fa-gplus {
    border-color: #bc7067;
    color: #bc7067;
}
.social .fa-stumbleupon {
    border-color: #f07356;
    color: #f07356;
}
.social .fa-lastfm {
    border-color: #cd443d;
    color: #cd443d;
}
.social .fa-spotify {
    border-color: #9acf48;
    color: #9acf48;
}
.social .fa-instagram {
    border-color: #926d53;
    color: #926d53;
}
.social .fa-evernote {
    border-color: #9fdc82;
    color: #9fdc82;
}
.social .fa-paypal {
    border-color: #5b85a8;
    color: #5b85a8;
}
.social .fa-picasa {
    border-color: #b088c1;
    color: #b088c1;
}
.social .fa-soundcloud {
    border-color: #ff8b45;
    color: #ff8b45;
}
.social a:hover .fa-pinterest {
    background-color: #d8545d
}
.social a:hover .fa-rss {
    background-color: #faaa5e
}
.social a:hover .fa-facebook {
    background-color: #677fb5
}
.social a:hover .fa-twitter {
    background-color: #70c2e9
}
.social a:hover .fa-flickr {
    background-color: #ff3ba4
}
.social a:hover .fa-dribbble {
    background-color: #e299c2
}
.social a:hover .fa-behance {
    background-color: #42a9fb
}
.social a:hover .fa-linkedin {
    background-color: #3daccf
}
.social a:hover .fa-vimeo {
    background-color: #42b5d4
}
.social a:hover .fa-youtube {
    background-color: #d5615c
}
.social a:hover .fa-skype {
    background-color: #5ecbf3
}
.social a:hover .fa-tumblr {
    background-color: #829fb9
}
.social a:hover .fa-delicious {
    background-color: #6194dc
}
.social a:hover .fa-500px {
    background-color: #3bbbe6
}
.social a:hover .fa-grooveshark {
    background-color: #f88e3b
}
.social a:hover .fa-forrst {
    background-color: #5f9864
}
.social a:hover .fa-digg {
    background-color: #507faa
}
.social a:hover .fa-blogger {
    background-color: #fd893f
}
.social a:hover .fa-klout {
    background-color: #e16747
}
.social a:hover .fa-dropbox {
    background-color: #6ba3c5
}
.social a:hover .fa-github {
    background-color: #6c93bb
}
.social a:hover .fa-songkick {
    background-color: #ff3b60
}
.social a:hover .fa-posterous {
    background-color: #efd57c
}
.social a:hover .fa-appnet {
    background-color: #3daad5
}
.social a:hover .fa-gplus {
    background-color: #bc7067
}
.social a:hover .fa-stumbleupon {
    background-color: #f07356
}
.social a:hover .fa-lastfm {
    background-color: #cd443d
}
.social a:hover .fa-spotify {
    background-color: #9acf48
}
.social a:hover .fa-instagram {
    background-color: #926d53
}
.social a:hover .fa-evernote {
    background-color: #9fdc82
}
.social a:hover .fa-paypal {
    background-color: #5b85a8
}
.social a:hover .fa-picasa {
    background-color: #b088c1
}
.social a:hover .fa-soundcloud {
    background-color: #ff8b45
}
.social a:hover a:hover i {
    background-color: #FFF
}
.social a:hover i {
    color: #FFF
}

#share-buttons{
width: 100%;
display: inline-block;
text-align: center;
margin: 0 auto;
}

.share-button{
background:#DCE0E0!important;
position:relative;
display:block;
float:left;
height:40px;
overflow:hidden;
width:150px;
/*border-radius*/
-webkit-border-radius:3px;
   -moz-border-radius:3px;
        border-radius:3px;
margin:0 7px;
}
.icon{
display:block;
float:left;
position:relative;
z-index:3;
height:100%;
vertical-align:top;
width:38px;
-moz-border-radius-topleft:3px;
-moz-border-radius-topright:0;
-moz-border-radius-bottomright:0;
-moz-border-radius-bottomleft:3px;
/*border-radius*/
-webkit-border-radius:3px 0 0 3px;
   -moz-border-radius:3px 0 0 3px;
        border-radius:3px 0 0 3px;
text-align:center;
}
.icon i{
color:#fff;
line-height:42px;
}
.pslide{
z-index:2;
display:block;
height:100%;
left:38px;
position:absolute;
width:112px;
-moz-border-radius-topleft:0;
-moz-border-radius-topright:3px;
-moz-border-radius-bottomright:3px;
-moz-border-radius-bottomleft:0;
/*border-radius*/
-webkit-border-radius:0 3px 3px 0;
   -moz-border-radius:0 3px 3px 0;
        border-radius:0 3px 3px 0;
margin:0;
}
.pslide p{
font-family:Open Sans;
font-weight:400;
border-left:1px solid rgba(255,255,255,0.35);
color:#fff;
font-size:16px;
left:0;
position:absolute;
text-align:center;
top:8px;
width:100%;
margin:0;
}
.share-button .pslide{
/*transition*/
-webkit-transition:all .2s ease-in-out;
   -moz-transition:all .2s ease-in-out;
     -o-transition:all .2s ease-in-out;
        transition:all .2s ease-in-out;
}
.facebook1 iframe{
display:block;
position:absolute;
right:5px;
top:0px;
z-index:1;
}
.facebook2 iframe{
display:block;
position:absolute;
right:5px;
top:0px;
z-index:1;
}
.twitter iframe{
width:90px!important;
right:5px;
top:10px;
z-index:1;
display:block;
position:absolute;
}
.google #___plusone_0{
width:70px!important;
top:10px;
right:15px;
position:absolute;
display:block;
z-index:1;
}

.facebook1:hover .pslide{
left:-90px;
}
.facebook2:hover .pslide{
left:150px;
}
.twitter:hover .pslide{
left: -90px;
}
.google:hover .pslide{
left: 150px;
}
.facebook1 .icon,.facebook1 .pslide{
background:#305c99;
}
.facebook2 .icon,.facebook2 .pslide{
background:#305c99;
}
.twitter .icon,.twitter .pslide{
background:#00cdff;
}
.google .icon,.google .pslide{
background:#d24228;
}

/*---Flicker Image Gallery-----*/
.flickr_plugin {
width: 100%;
}
.flickr_badge_image {
float: left;
height: 75px;
margin: 8px 5px 0px 5px;
width: 75px;
}
.flickr_badge_image a {
display: block;
}
.flickr_badge_image a img {
display: block;
width: 100%;
height: auto;
-webkit-transition: opacity 100ms linear;
-moz-transition: opacity 100ms linear;
-ms-transition: opacity 100ms linear;
-o-transition: opacity 100ms linear;
transition: opacity 100ms linear;
}
.flickr_badge_image a img:hover {
opacity: .5;
}

.Label a {
background:#3F3E3E;
color: #888;
display: block;
float: left;
font-size: 14px!important;
line-height: 12px;
margin: 0 2px 2px 0;
padding: 12px 17px;
}
.Label a:link {
color: #fff;
}
.Label a:hover {
color: #F66570!important;
border-right: 5px solid #F66570;
}

.Label li {
padding: 0px;
margin: 0px;
}
div#menucover li {
list-style: none;
}

/* Responsive */
      @media screen and (max-width:980px){
        #artikel {padding:10px;}
        .sidebar .widget {padding:10px 5px 5px 5px;}
        #sosmed {display:none;}
        #cm-container, #notif {display:none;}}
      @media screen and (max-width:800px){
        #menu, #rapih {width:100%;}
        #bagian-aside, #iklan-kanan {float:none;width:100%;}
        #header .description {width:40%;}
.slicknav_menu {
  display:block;
 }
        .menutop{display:none}

}
      @media screen and (max-width:600px){
        #rapih {width:100%;}
        #wrapper, #menu {position:inherit;float:none;width:100%;margin:0;}
        #bagian-aside {margin-top:0px;}
        #breakingnews,.date-time {display:none}
        #copy{float:none;}#copyright{text-align:center;padding-bottom:0;}
        .comment_body{margin:0px;}
         .menutop,.comment_avatar_wrap {display:none;}
        #search, #search-form {width:80%;}
        #header .description {width:60%;}
.slicknav_menu {
  display:block;
 }
        #header,#header .description,#header h1,#header p,#header a {text-align:center;}
        #header-wrapper{margin:0 auto;padding:75px 0 45px 0;}
        #wrapper,#menu,#menutop,#rapih,.tab{width:100%;margin:0 auto;}}
      @media screen and (max-width:380px){
        #search, #search-form {width:80%;}

.slicknav_menu {
  display:block;
 }
       .menutop,#breakingnews,.date-time {display:none;}
        #search, #search-form {width:80%;}
        #header .description {width:80%;}
        #search, #search-form {width:80%;}
        #header,#header .description,#header h1,#header p,#header a {text-align:center}
        #header-wrapper{margin:0 auto;padding:75px 0 45px 0;}
        #wrapper,#menu,#menutop,#rapih,.tab{width:100%;margin:0 auto;}}
    </style>

<b:if cond='data:blog.pageType == "static_page"'>
      <style type='text/css'>
        #wrapper {width:100%;max-width:100%;margin-top:48px;margin:0 auto;padding:0;text-align:left;float:none;background:#f0f0f0;box-shadow: 0 1px 1px rgba(0,0,0,0.06);background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj68b8GablRXPba_Ody40knTEJN0SVA8_fLxpPoC7ifrHPtg5uQNgq_UlowaNm9EQ3ddDZDmwX-CNlCXFzQhyphenhyphenZ1fYbY_S5aTR9IpF_9gmKqR76fm6W_gYdjTHntieZKlAgX2BGhP668mLLW/s1600/1_wide.jpg)fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
        #bagian-aside {width:100%;max-width:97%;text-align:left;float:none;}
        #main {padding:10px;background:#fff;margin-top:45px;}
        #artikel{padding:20px;}
        .post-info, #copyright, #sidebar-kiri, #iklan-kanan, #footer-wrapper, #BounceToTop, #header-wrapper, #social-bar, #menutop, #breakingnews {display:none;}
        .comment_name{background:transparent !important;}
        .comment_body p{background:transparent !important;}
        .comment_reply {background:#459bb6;}
        .comment_body {background:#fff;}
        .comment_name {background:#364b61;}
        .comment_name a{color:#8f8f8f;}
        .comment_body p {background:#fff;}
        .comment_avatar_wrap {background:#fff;}
        .post-info {overflow:hidden;margin-top:20px;padding:10px 0;}
        h1.post-title a {font-size:23px;text-align:center;display:block;}
        .vcard2{float:left;}.post-footer{float:right;}
        .post img{height:auto;padding:10px;box-shadow:0 0 1px #999;}
        body{background:#f0f0f0;}
       
      </style>
    </b:if>
    <b:if cond='data:blog.pageType == "error_page"'>
      <style type='text/css'>
        #header-wrapper, #social-bar, #wrapper, #footer-wrapper, #menutop,  #copyright{display:none;}
      </style>
    </b:if>
    <style type='text/css'>
      #menu {background:#2a7bba;display:block;float:right;margin:0 auto;max-width:100%;width:100%;}
      #menu ul {list-style:none;margin:0;padding-left:0;}
      #menu ul li {float:right;position:relative;}
      #menu ul li:last-child {border-right:none;border-bottom:none;}
      #menu a {display:block;line-height:3em;padding:0 2em;text-decoration:none;color:#fff;font-size:14px;transition:all 0.3s ease;font-family:'Anaheim';font-weight:400;}
      #menu ul ul {box-shadow: 0 2px 8px 0px rgba(0,0,0,0.2);display:none;float:left;
        position:absolute;left:0;top:42px;z-index:99999;}
      #menu ul ul ul {left:100%;top:0;}
      #menu ul ul a {background:#2f82c3;line-height:2em;padding:.2em .2em .2em 1em;
        width:10em;height:auto;text-align:left;box-shadow: 0 1px 3px 0px rgba(0,0,0,0.1);}
      #menu .current,#menu li:hover > a{background:#2876b2;color:#fff;box-shadow:inset 0 -2px 0 rgba(0,0,0,0.1);}
      #menu:hover .current{border:none;}
      #menu ul ul a:hover,#menu ul ul :hover > a {background:#2876b2;color:#fff;box-shadow:none;} 
      #menu ul li:hover > ul {display:block;}
      .tab [type=radio],.tab label{display:none;}
      @media screen and (max-width:980px){
        .tab {position:relative;}
        .tab label {background:#2a7bba;color:#fff;font-size:3em;font-weight:bold;width:100%;line-height:35px;cursor:pointer;display:block;padding:5px;position:relative;}
        .tab label i {font-style:normal;font-size:13px;color:#fff;}
        .tab [type=radio] {position:absolute;top:0;left:2px;width:100%;height:100%;opacity: 0;margin:0;z-index:1;display:block;cursor:pointer;}
        #menu {display:none;background:#2a7bba;color:#fff;width:100%;}
        #menu ul {margin:0;padding:0;list-style:none;}
        #menu li{width:100%;}
        #menu a {color:#fff!important;display:block;white-space:nowrap;text-decoration: none;padding:5px;border-right:none!important;padding:5px;display:block;width:100%;}  
        #menu ul ul{display:block;position:static;float:none;max-width:none;width:100%;margin:0 0 0 5px;}
        #menu ul ul a {max-width:none;width:100%;color:#fff!important;}
        #menu ul ul a:hover {color:#fff!important;box-shadow:none;}
        #menu ul ul{display:block;float:none;}
        [type=radio]:checked ~ label {z-index:2;}
        [type=radio]:checked ~ label ~ #menu {z-index:
            999;display:block;width:100%;overflow:hidden;}
        .close-tab {position:absolute;z-index:-1;top:0;left:2px;width:100%;height:100%;}
        .close-tab label {font-size:3em;background:#2a7bba;color:#fff;}
        [type=radio]:checked ~ label ~ .close-tab {z-index:3;display:block}}
    </style>
    <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
    <script/>

<b:if cond='data:blog.pageType != "index"'>
      <style type='text/css'>
        /*<![CDATA[*/
       
        #blog-pager {
          margin:0!Important;
        }
        #blog-pager-older-link, #blog-pager-newer-link {
          float:left;
          width:39.4%;
        }
        #blog-pager-older-link, #blog-pager-newer-link, #home-link {
          margin:2px 0 10px 0px!Important;
          box-shadow:0 1px 4px rgba(0, 0, 0, 0.2);
        }
        #home-link {
          float:left;
          width:20.7%;
          margin:0 2px;
        }
        #blog-pager-older-link a, #blog-pager-newer-link a, #home-link a {
          width:100%;
        }
        #blog-pager a:hover {
          box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);
        }
        #blog-pager a {
          border-top: 1px solid #fff;
font-size: 14px;
color: #EDECEC;
padding: 10px!important;
float: left!important;
background-color: #3B3B3B;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(125, 125, 125, 1) 0%, rgba(47, 47, 47, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(84, 84, 84, 1)), color-stop(100%, rgba(47, 47, 47, 1))); 
background: -webkit-linear-gradient(top, rgba(125, 125, 125, 1) 0%, rgba(47, 47, 47, 1) 100%); */
background: -o-linear-gradient(top, rgba(125, 125, 125, 1) 0%, rgba(47, 47, 47, 1) 100%);
background: -ms-linear-gradient(top, rgba(125, 125, 125, 1) 0%, rgba(47, 47, 47, 1) 100%);
background: linear-gradient(to bottom, rgba(125, 125, 125, 1) 0%, rgba(47, 47, 47, 1) 100%);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#f2f2f2, endColorstr=#DDDDDD)";
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
        }
        footer#Copyright {
          margin:180px 0 0 0;
        }
        .bottom-m{
          margin:20px 0 0 0!Important;
        }
        /*]]>*/
      </style>
    </b:if>

<b:if cond='data:blog.pageType == "index"'>
   <style type='text/css'>
/*<![CDATA[*/
              
                #blog-pager {
                        position:fixed;
                        height:30px;
                        bottom:-20px;
                        
                        right:0%;
                        z-index:9999;
                        padding:10px!important;
                        width:100%!important;
                        background-color: #3B3B3B;
                        /* Old browsers */
                        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
                         background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxZjFmMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkZGRkZGQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
                background: -moz-linear-gradient(top, rgba(74, 74, 74, 1) 0%, rgba(53, 53, 53, 1) 100%);
                /* FF3.6+ */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(74, 74, 74, 1)), color-stop(100%, rgba(53, 53, 53, 1)));
                /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(top, rgba(74, 74, 74, 1) 0%, rgba(53, 53, 53, 1) 100%);
                /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top, rgba(74, 74, 74, 1) 0%, rgba(53, 53, 53, 1) 100%);
                /* Opera 11.10+ */
                background: -ms-linear-gradient(top, rgba(74, 74, 74, 1) 0%, rgba(53, 53, 53, 1) 100%);
                /* IE10+ */
               background: linear-gradient(to bottom, rgba(74, 74, 74, 1) 0%, rgba(53, 53, 53, 1) 100%);
               -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#292929, endColorstr=#393939)";
                /* IE6-8 */
               
        }
                #blog-pager-older-link, #blog-pager-newer-link {
                        float:left;
                        width:39.4%;
                }
                #home-link {
                        float:left;
                        width:20.6%;
                }
                #home-link a {
                        line-height:10px!important;
                        padding:12px 0 20px 0!important;
                        ;
                }
                #blog-pager-older-link a, #blog-pager-newer-link a, #home-link a {
                        width:100%;
                       
                        line-height:20px;
color: #cfcfcf;
                         border-right: 1px solid rgba(0, 0, 0, 0.09);
border-left: 1px solid rgba(220, 220, 220, 0.1);
                        padding:10px 0 20px;
                        width:100%;
                        float:left;
                        height:auto;
font-size:13px;

}
                #blog-pager-newer-link a{
                        line-height:20px!Important;
                }
div.pagercover {
height: 37px;
width: 100%;
margin-top: -9px;
/* margin-left: -46px; */
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrZKYTibLd0f_voSTQ5AtNaffTQxBBPiK4HLJl-XTmvHhomixnYKkj9gsXCiy1A3i3PDz9C8WKMeaVakQqJJ7amY0dWboiaHdL03v2tkKllIl2mAoolLN-6I2czsr8BmDtEt7wsnrRuthG/s1600/main-menu-ornament.png) no-repeat center;
}

/*]]>*/

</style>
</b:if>

<script style='text/javascript'>
      //<![CDATA[
      function authorshow(data) {
        for (var i = 0; i < 1; i++) {
          var entry = data.feed.entry[i];
          var avtr = entry.author[0].gd$image.src;
          document.write('<img width="80" height="80" src="' + avtr + '"/>');
        }
      }
      //]]>
    </script>

</head>
  <body class='pushmenu-push'>
    <b:if cond='data:blog.pageType == "error_page"'>
      <div id='ngerror'>
        <div id='error-gambar'/>
        <div id='error-text'>
          <span>
            Error 404!
          </span>
          <p>
Page Not FOUND!
          </p>
</div>
</div>
</b:if>
    <nav class='pushmenu pushmenu-left'>
      <h3>
        Menu
      </h3>
<a href='#'>
        Fashion
      </a>
      <a href='#'>
       Trendy
      </a>
      <div id='accordion'>
        <ul>
<li>
            <h3>
              <span/>
              Drop Down
            </h3>
<ul>
<li>
                <a href='#'>
                  Abstract
                </a>
              </li>
<li>
                <a href='#'>
                  Model
                </a>
              </li>
<li>
                <a href='#'>
                  Techo
                </a>
              </li>
<li>
                <a href='#'>
                  Options
                </a>
              </li>
</ul>
</li>
<li>
            <a href='#'>
             Photography
            </a>
            <a href='#'>
              Pictures
            </a>
            <a href='#'>
              Product
            </a>
            <h3>
              <span/>
              Drop Menu
            </h3>
<ul>
<li>
                <a href='#'>
                  Crystal
                </a>
              </li>
<li>
                <a href='#'>
                  Digital
                </a>
              </li>
<li>
                <a href='#'>
                  Graphs
                </a>
              </li>
<li>
                <a href='#'>
                  Settings
                </a>
              </li>
</ul>
</li>

        </ul>
</div>
</nav>
    <div id='wrapper'>
      <style>
        .leftmenuclose {
          float: left;
          cursor: pointer;
          position: absolute;
          z-index: 1;
          background-color: #F76570;
          background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9XSnVez7g0VVuKTSWxuX0TPJ0xgZ4nKqxs7ZmiBU3af7urc1fJg8NbYVxBWeBhjxSeX8ue5r6WkzhUs8HgrNbwQr_NnDCCmdYb6T1pB4uZbNoeiR2WsXD-n9JvDVwSW9uSqPNIxxnYMh8/s1600/filter.png);
          background-repeat: no-repeat;
          background-size: 100px 100px;
          top: 0;
          padding:19px 24px;
        }
       
      </style>
      <div id='menutop'>
        <div id='menucover'>
          <div class='mymenubar' style='float:left'>
<li>
              <div class='leftmenuclose' id='nav_list' style='background-color:#F76570'>
<i class='fa fa-bars' style='color:#fff'/>
                            </div>
<span>
                Menu
              </span>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
      <b:widget id='Header1' locked='true' title='Fabulous (Header)' type='Header'>
        <b:includable id='main'>

<b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == "BEHIND"'>
      
      <b:if cond='data:mobile'>
          <div id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
</div>
<b:include name='description'/>
          </div>
<b:else/>
          <div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); "                        + "background-position: "                        + data:backgroundPositionStyleStr + "; "                        + data:widthStyleStr                        + "min-height: " + data:height                        + "_height: " + data:height                        + "background-repeat: no-repeat; "' id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
</div>
<b:include name='description'/>
          </div>
</b:if>
    <b:else/>
      
      <div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        
        <b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
          <b:include name='description'/>
        </b:if>
      </div>
</b:if>
  <b:else/>
    
    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
</div>
<b:include name='description'/>
    </div>
</b:if>
</b:includable>
        <b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'>
<span><data:description/></span></p>
</div>
</b:includable>
        <b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
      </b:widget>
    </b:section>

</li>
</div>
<div class='menutop' id='menutop' style='float:right'>
            <ul class='menu'>
<li class='active'>
                <a href='/'>
                  <span>
                    Home
                  </span>
                </a>
              </li>
<li class='menu-sub'>
                <a href='#'>
                  <span>
                    Digital Art
                  </span>
                </a>
                <ul>
<li class='menu-sub'>
                    <a href='#'>
                      <span>
                        Pics
                      </span>
                    </a>
                    <ul>
<li>
                        <a href='#'>
                          <span>
                            SEO 1
                          </span>
                        </a>
                      </li>
<li class='last'>
                        <a href='#'>
                          <span>
                            SEO 2
                          </span>
                        </a>
                      </li>
</ul>
</li>
<li class='menu-sub'>
                    <a href='#'>
                      <span>
                        CSS
                      </span>
                    </a>
                    <ul>
<li>
                        <a href='#'>
                          <span>
                            CSS 1
                          </span>
                        </a>
                      </li>
<li>
                        <a href='#'>
                          <span>
                            CSS 2
                          </span>
                        </a>
                      </li>
<li>
                        <a href='#'>
                          <span>
                            CSS 3
                          </span>
                        </a>
                      </li>
<li>
                        <a href='#'>
                          <span>
                            CSS 4
                          </span>
                        </a>
                      </li>
<li class='last'>
                        <a href='#'>
                          <span>
                            CSS 5
                          </span>
                        </a>
                      </li>
</ul>
</li>
<li class='menu-sub'>
                    <a href='#'>
                      <span>
                        Jquery
                      </span>
                    </a>
                    <ul>
<li>
                        <a href='#'>
                          <span>
                            Jquery 1
                          </span>
                        </a>
                      </li>
<li class='last'>
                        <a href='#'>
                          <span>
                            Jquery 2
                          </span>
                        </a>
                      </li>
</ul>
</li>
</ul>
</li>
<li class='menu-sub'>
                <a href='#'>
                  <span>
                   Fashion
                  </span>
                </a>
                <ul>
<li class='menu-sub'>
                    <a href='#'>
                      <span>
                        Product 1
                      </span>
                    </a>
                    <ul>
<li>
                        <a href='#'>
                          <span>
                            Sub Item
                          </span>
                        </a>
                      </li>
<li class='last'>
                        <a href='#'>
                          <span>
                            Sub Item
                          </span>
                        </a>
                      </li>
</ul>
</li>
<li class='menu-sub'>
                    <a href='#'>
                      <span>
                        Product 2
                      </span>
                    </a>
                    <ul>
<li>
                        <a href='#'>
                          <span>
                            Sub Item
                          </span>
                        </a>
                      </li>
<li class='last'>
                        <a href='#'>
                          <span>
                            Sub Item
                          </span>
                        </a>
                      </li>
</ul>
</li>
</ul>
</li>
<li>
                <a href='#'>
                  <span>
                   Photography
                  </span>
                </a>
              </li>
<li class='last'>
                <a href='#'>
                  <span>
                   Design
                  </span>
                </a>
              </li>
</ul>
</div>
<style>

.search-bar {
   -moz-transition: .3s linear;
-webkit-transition: .3s ease-out;
transition: .3s linear;
float: right;
position: absolute;
right: 0;
cursor: pointer;
background-color: #1bbc9b;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9XSnVez7g0VVuKTSWxuX0TPJ0xgZ4nKqxs7ZmiBU3af7urc1fJg8NbYVxBWeBhjxSeX8ue5r6WkzhUs8HgrNbwQr_NnDCCmdYb6T1pB4uZbNoeiR2WsXD-n9JvDVwSW9uSqPNIxxnYMh8/s1600/filter.png);
background-repeat: no-repeat;
padding: 7px 20px 23px;
background-size: 100px 100px;
top: 0;
z-index: 99999;
}

.search-bar:hover {
    -moz-transition: .01s linear;
    -webkit-transition: .01s ease-out;
    transition: .01s linear;
    opacity: 1; 
background-image:none;
}

.nav-search {
    width: auto;
    height: 30px;
    position: relative;
    left: 0;
    float: left;
    line-height: 10px;
    color: #fff !important;
}

.nav-search label {
    display: none;
}

.nav-search input {
    float: left;
    width: 0;
    background: none;
    height: 30px;
    line-height: 20px;
    margin: 10px 0 0;
    padding: 0 10px 0 0;
    font-size: 15px;
    color: #fff !important;
    outline: 0;
    border-radius: 0;
    border: 0;
    opacity: 0;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
    -webkit-appearance: none;
}

.search-bar:hover .nav-search input {
    width: 160px;
    margin-left: 33px;
    background: none;
    border-bottom: 1px solid #f1f1f1;
    opacity: 1;
}

.nav-search input::-webkit-input-placeholder {
    color: #eee;
}

.nav-search input::-moz-placeholder {
    color: #eee;
}

.nav-search input:-moz-placeholder {
    color: #eee;
}

.nav-search input:-ms-input-placeholder {
    color: #eee;
}

.nav-search input:focus {
    color: #fff;
}

.nav-search .srch_btn {
    height: 50px;
    width: 23px;
    margin-top: 0;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinhIN7m5nX93yIl9wgqnK69tWCOqYC0VnCDo5FFyAQqXvIVLComrc4uid11N4UlnyVAuwjY1UisC1zGBKPXm8UxNAYJkOxmFBRbyVQb2KQqG08uLAR_6hj1Yu8UC6nZ9FEpjVWqi7YJajd/s1600/search-icon.png) 2px center no-repeat;
    text-indent: 9999px;
    position: relative;
}

.author-avatar img{border:1px solid #ccc;padding:4px;background:#fff;float:left;margin:0 10px 5px 0;border:50%;}
#author-box h3 {
padding-bottom: 5px;
font-size: 18px;
color: #F4F4F4;
font-family: 'Open Sans',arial,Georgia,serif;
}
div#author-box {
margin: 10px 0 20px;
border: 1px solid #ddd;
background:#333;
}

.block-head {
font-family: 'Oswald',sans-serif;
background: #2c2c2c;
padding: 10px 15px 10px 15px;
margin-bottom: 19px;
font-size: 18px;
color: #fff;
position: relative;
display: block;
text-transform: uppercase;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrZKYTibLd0f_voSTQ5AtNaffTQxBBPiK4HLJl-XTmvHhomixnYKkj9gsXCiy1A3i3PDz9C8WKMeaVakQqJJ7amY0dWboiaHdL03v2tkKllIl2mAoolLN-6I2czsr8BmDtEt7wsnrRuthG/s1600/main-menu-ornament.png);
}

.author-description {
font-size: 14px;
color: #DCDCDC;
}

.post-listing {
padding: 0px 15px 10px;
}
        </style>

<div class='search-bar'>
<div class='nav-search'>
<form action='/search' id='searchform' method='get' role='search'>
 <input class='field' id='se' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Search and hit'/>
</form>
<div class='srch_btn'>
Go</div>
</div>
</div>
</div>
</div>
<div id='rapih'>
        <div id='bagian-aside'>
          <aside id='artikel'>
            <b:section class='main' id='main' maxwidgets='1'>
              <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
                <b:includable id='main' var='top'>
                  <b:include data='posts' name='breadcrumb'/>
                  <b:if cond='data:mobile == "false"'>
                    <div class='blog-posts hfeed'>
                      <b:include data='top' name='status-message'/>
                      <data:defaultAdStart/>
                      <b:loop values='data:posts' var='post'>
                        <b:if cond='data:post.isDateStart'>
                          <b:if cond='data:post.isFirstPost == "false"'>
                            </div>
</div>
</b:if>
                        </b:if>
                        <b:if cond='data:post.isDateStart'>
                          <div class="date-outer">
                        </b:if>
                        <b:if cond='data:post.isDateStart'>
                          <div class="date-posts">
                        </b:if>
                        <div class='post-outer'>
                          <b:include data='post' name='post'/>
                          <b:if cond='data:blog.pageType == "static_page"'>
                            <b:if cond='data:post.showThreadedComments'>
                              <b:include data='post' name='comments'/>
                              <b:else/>
                              <b:include data='post' name='comments'/>
                            </b:if>
                          </b:if>
                          <b:if cond='data:blog.pageType == "item"'>
                            <b:if cond='data:post.showThreadedComments'>
                              <b:include data='post' name='comments'/>
                              <b:else/>
                              <b:include data='post' name='comments'/>
                            </b:if>
                          </b:if>
                        </div>
<b:if cond='data:post.includeAd'>
                          <b:if cond='data:post.isFirstPost'>
                            <data:defaultAdEnd/>
                            <b:else/>
                            <data:adEnd/>
                          </b:if>
                          <div class='inline-ad'>
                            <data:adCode/>
                          </div>
<data:adStart/>
                        </b:if>
                      </b:loop>
                      <b:if cond='data:numPosts != 0'>
                        </div>
</div>
</b:if>
                      <data:adEnd/>
                    </div>
<b:include name='nextprev'/>
                    <b:if cond='data:top.showStars'>
                      <script src='//www.google.com/jsapi' type='text/javascript'/>
                      <script type='text/javascript'>
                        google.load("annotations","1",{locale:"<data:top.languageCode/>"});function initialize(){google.annotations.setApplicationId(<data:top.blogspotReviews/>);google.annotations.createAll();google.annotations.fetch()}google.setOnLoadCallback(initialize);</script>
                    </b:if>
                    <b:else/>
                    <b:include name='mobile-main'/>
                  </b:if>
                  <b:if cond='data:top.showDummy'>
                    <data:top.dummyBootstrap/>
                  </b:if>
                </b:includable>
                <b:includable id='authorblog'>
                      <div id='author-box'>
                        <div class='block-head'>
                          <h3>
                            About 
                            <data:post.author/>
                          </h3>
<div class='stripe-line'/>
                        </div>
<div class='post-listing'>
                          <div class='author-avatar'>
                            <script src='/feeds/posts/default?alt=json-in-script&callback=authorshow'/>
                          </div>
<div class='author-description'>
                            <data:post.authorAboutMe/>
                          </div>
<div class='clear'/>
                        </div>
</div>

                    </b:includable>
                <b:includable id='backlinkDeleteIcon' var='backlink'>
                  <span expr:class='"item-control " + data:backlink.adminClass'>
                    <a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
                      <img src='http://www.blogger.com/img/icon_delete13.gif'/>
                    </a>
                  </span>
                </b:includable>
                <b:includable id='backlinks' var='post'>
                  <a name='links'/>
                  <h4>
                    <data:post.backlinksLabel/>
                  </h4>
<b:if cond='data:post.numBacklinks != 0'>
<dl class='comments-block' id='comments-block'>
                      <b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' id='comment-author'>
                          <a expr:name='data:comment.anchorName'/>
                          <b:if cond='data:comment.authorUrl'>
                            <a expr:href='data:comment.authorUrl' rel='nofollow'>
                              <data:comment.author/>
                            </a>
                            <b:else/>
                            <data:comment.author/>
                          </b:if>
                          <data:commentPostedByMsg/>
                        </dt>
<dd class='comment-body'>
                          <b:if cond='data:comment.isDeleted'>
                            <span class='deleted-comment'>
                              <data:comment.body/>
                            </span>
                            <b:else/>
                            <p>
<data:comment.body/>
                            </p>
</b:if>
                        </dd>
                        <dd class='comment-footer'>
                          <span class='comment-timestamp'>
                            <i>
                              <data:comment.timestamp/>
                            </i>
                            <b:include data='comment' name='commentDeleteIcon'/>
                          </span>
                        </dd>
                      </b:loop>
                    </dl>
</b:if>
                  <p class='comment-footer'>
<a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + "_backlinks-create-link"' target='_blank'>
                      <data:post.createLinkLabel/>
                    </a>
                  </p>
</b:includable>
                <b:includable id='breadcrumb' var='posts'>
                  <b:if cond='data:blog.homepageUrl != data:blog.url'>
                    <b:if cond='data:blog.pageType == "static_page"'>
                      <div class='breadcrumbs'>
                        <span>
                          <a expr:href='data:blog.homepageUrl' rel='tag'>
                            Home
                          </a>
                        </span>
                        » 
                        <span>
                          <data:blog.pageName/>
                        </span>
                      </div>
<b:else/>
                      <b:if cond='data:blog.pageType == "item"'>
                        
                        <b:loop values='data:posts' var='post'>
                          <b:if cond='data:post.labels'>
                            <div class='breadcrumbs'>
                              <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
                                <a expr:href='data:blog.homepageUrl' itemprop='url'>
                                  <span itemprop='title'>
                                    Home
                                  </span>
                                </a>
                              </span>
                              <b:loop values='data:post.labels' var='label'>
                                » 
                                <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
                                  <a expr:href='data:label.url + "?max-results=12"' itemprop='url'>
                                    <span itemprop='title'>
                                      <data:label.name/>
                                    </span>
                                  </a>
                                </span>
                              </b:loop>
                              » 
                              <span>
                                <data:post.title/>
                              </span>
                            </div>
<b:else/>
                            <div class='breadcrumbs'>
                              <span>
                                <a expr:href='data:blog.homepageUrl' rel='tag'>
                                  Home
                                </a>
                              </span>
                              » 
                              <span>
                                Unlabelled
                              </span>
                              » 
                              <span>
                                <data:post.title/>
                              </span>
                            </div>
</b:if>
                        </b:loop>
                        <b:else/>
                        <b:if cond='data:blog.pageType == "archive"'>
                          
                          <div class='breadcrumbs'>
                            <span>
                              <a expr:href='data:blog.homepageUrl'>
                                Home
                              </a>
                            </span>
                            » 
                            <span>
                              Archives for 
                              <data:blog.pageName/>
                            </span>
                          </div>
<b:else/>
                          <b:if cond='data:blog.pageType == "index"'>
                            <div class='breadcrumbs'>
                              <b:if cond='data:blog.pageName == ""'>
                                <span>
                                  <a expr:href='data:blog.homepageUrl'>
                                    Home
                                  </a>
                                </span>
                                » 
                                <span>
                                  All posts
                                </span>
                                <b:else/>
                                <span>
                                  <a expr:href='data:blog.homepageUrl'>
                                    Home
                                  </a>
                                </span>
                                » 
                                <span>
                                  Posts filed under 
                                  <data:blog.pageName/>
                                </span>
                              </b:if>
                            </div>
</b:if>
                        </b:if>
                      </b:if>
                    </b:if>
                  </b:if>
                </b:includable>
                <b:includable id='comment-form' var='post'>
                  <div class='comment-form'>
                    <h4 id='comment-post-message'>
                      <data:postCommentMsg/>
                    </h4>
<p id='komennyakomen'>
<data:blogCommentMessage/>
                    </p>
<div style='margin-bottom:10px'>
                      <input onclick='if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide Smiley'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show Smiley'; }' style='border:1px solid #343333;color:#fff;font:italic 12px Georgia;cursor:pointer;font-weight:400;margin:0 auto;text-decoration:none;text-transform:none;text-shadow:none;border-radius:2px;display:block;box-shadow:inset 0 1px 1px 0 #B0B0B0;background-color:#686986;padding:3px 10px;text-align:center;width:100%' type='button' value='Show Smiley'/>
                      <div class='alt1'>
                        <div style='display: none;'>
                          <br/>
                          <div style='text-align: center;'>
                            <div class='comment_emo_list'/>
                          </div>
</div>
</div>
</div>
<data:blogTeamBlogMessage/>
                    <b:if cond='data:blog.pageType == "static_page"'>
                      <a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&pageID=" + data:post.id' id='comment-editor-src'/>
                    </b:if>
                    <b:if cond='data:blog.pageType == "item"'>
                      <a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&postID=" + data:post.id' id='comment-editor-src'/>
                    </b:if>
                    <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='auto' id='comment-editor' name='comment-editor'/>
                    <data:post.friendConnectJs/>
                    <data:post.cmtfpIframe/>
                    <script type='text/javascript'>
                      BLOG_CMT_createIframe("<data:post.appRpcRelayPath/>","<data:post.communityId/>");</script>
                  </div>
</b:includable>
                <b:includable id='commentDeleteIcon' var='comment'>
                  <span expr:class='"item-control " + data:comment.adminClass'>
                    <a expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
                      <img src='http://www.blogger.com/img/icon_delete13.gif'/>
                    </a>
                  </span>
                </b:includable>
                <b:includable id='comment_count_picker' var='post'>
                  <b:if cond='data:post.commentSource == 1'>
                    <span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-post-url='data:post.url' expr:data-url='data:post.canonicalUrl'>
                    </span>
                    <b:else/>
                    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                      <data:post.commentLabelFull/>
                      :
                    </a>
                  </b:if>
                </b:includable>
                <b:includable id='comment_picker' var='post'>
                  <b:if cond='data:post.commentSource == 1'>
                    <b:include data='post' name='iframe_comments'/>
                    <b:else/>
                    <b:if cond='data:post.showThreadedComments'>
                      <b:include data='post' name='comments'/>
                      <b:else/>
                      <b:include data='post' name='comments'/>
                    </b:if>
                  </b:if>
                </b:includable>
                <b:includable id='comments' var='post'>
                  <div class='comments' id='comments'>
                    <b:if cond='data:post.allowComments'>
                      <b:if cond='data:post.numComments != 0'>
                        <h3>
                          <b:if cond='data:post.numComments == 1'>
                            1 
                            <data:commentLabel/>
                            :
                            <b:else/>
                            <data:post.numComments/>
                            <data:commentLabelPlural/>
                          </b:if>
                        </h3>
</b:if>
                      <b:if cond='data:post.commentPagingRequired'>
                        <span class='paging-control-container'>
                          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
                            <data:post.oldestLinkText/>
                          </a>
                           
                          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
                            <data:post.olderLinkText/>
                          </a>
                           
                          <data:post.commentRangeText/>
                           
                          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
                            <data:post.newerLinkText/>
                          </a>
                           
                          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
                            <data:post.newestLinkText/>
                          </a>
                        </span>
                      </b:if>
                      <div class='clear'/>
                      <div id='comment_block'>
                        <b:loop values='data:post.comments' var='comment'>
                          <div class='data:comment.adminClass' expr:id='data:comment.anchorName'>
                            <b:if cond='data:post.adminClass == data:comment.adminClass'>
                              <div class='comment_inner comment_admin'>
                              <b:else/>
                              <div class='comment_inner'>
                            </b:if>
                            <div class='comment_header'>
                              <div class='comment_avatar_wrap'>
                                <div class='comment_avatar'>
                                  <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
                                </div>
<a class='comment_reply' expr:href='"#r_"+data:comment.anchorName' expr:id='"r"+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)' title='Balas'>
                                  Reply
                                </a>
                              </div>
<div class='clear'/>
                            </div>
<div class='comment_body'>
                              <span class='comment_arrow'/>
                              <div class='comment_name'>
                                <b:if cond='data:comment.authorUrl'>
                                  <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'>
                                    <data:comment.author/>
                                  </a>
                                  <b:else/>
                                  <data:comment.author/>
                                </b:if>
                                <b:if cond='data:comment.author == data:post.author'>
                                  <span class='comment_author_flag'/>
                                </b:if>
                                <span class='comment_service'>
                                  <a class='comment-delete' expr:href='"http://www.blogger.com/delete-comment.g?blogID=" + data:blog.blogId + "&postID=" + data:comment.id' expr:title='data:top.deleteCommentMsg'>
                                    <img alt='delete' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaSyhBN2sBQ-50A1aNsOJysWCJuOaxeIiiuWJIlF6vHqr-y3t7Wy_PWnOBwSzmABItkdOmIyLw3IHTZCtbtmxCix63MBYga7l2zUhxyL3J3JS_LFFAtPAOKSth2fl-Xp-MGABQOq2P2-M/s1600/delete4.png' title='Hapus Komentar'/>
                                  </a>
                                  <span class='comment_date'>
                                    <a expr:href='data:comment.url' rel='nofollow' title='comment permalink'>
                                      <data:comment.timestamp/>
                                    </a>
                                  </span>
                                </span>
                              </div>
<b:if cond='data:comment.isDeleted'>
                                <span class='deleted-comment'>
                                  <data:comment.body/>
                                </span>
                                <b:else/>
                                <p>
<data:comment.body/>
                                </p>
<div class='clear'/>
                              </b:if>
                            </div>
<div class='clear'/>
                            </div>
<div class='clear'/>
                            <div class='comment_child'/>
                            <div class='comment_reply_form' expr:id='"r_f_"+data:comment.anchorName'/>
                          </div>
</b:loop>
                      </div>
<div class='clear'/>
                      <b:if cond='data:post.commentPagingRequired'>
                        <span class='paging-control-container'>
                          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
                            <data:post.oldestLinkText/>
                          </a>
                           
                          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
                            <data:post.olderLinkText/>
                          </a>
                           
                          <data:post.commentRangeText/>
                           
                          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
                            <data:post.newerLinkText/>
                          </a>
                           
                          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
                            <data:post.newestLinkText/>
                          </a>
                        </span>
                      </b:if>
                      <div class='clear'/>
                      <div class='comment_form'>
                        <b:if cond='data:post.embedCommentForm'>
                          <b:if cond='data:post.allowNewComments'>
                            <b:include data='post' name='threaded-comment-form'/>
                            <b:else/>
                            <data:post.noNewCommentsText/>
                          </b:if>
                          <b:else/>
                          <b:if cond='data:post.allowComments'>
                            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' expr:title='data:postCommentMsg'>
                              <data:postCommentMsg/>
                            </a>
                          </b:if>
                        </b:if>
                      </div>
</b:if>
                  </div>
<script type='text/javascript'>
                    //<![CDATA[
                    if (typeof(jQuery) == 'undefined') {
                      //output the script (load it from google api)
                      document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js\"></scr" + "ipt>");
                    }
                    //]]>
                  </script>
                  <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
                  <script type='text/javascript'>
                    <b:if cond='data:post.numComments != 0'>
                      var Items = <data:post.commentJso/>;
                      var Msgs = <data:post.commentMsgs/>;
                      var Config = <data:post.commentConfig/>;
                      <b:else/>
                        var Items = {};
                    var Msgs = {};
                    var Config = {'maxThreadDepth':'0'};
                  </b:if>
                                  //<![CDATA[
                                  //Global setting
                                  Config.maxThreadDepth = 6;//Kedalaman tingkat threaded comment
                                  Display_Emo = true;//Tampilkan emoticon? ketik "false" untuk menyembunyikan
                                  Replace_Youtube_Link = false;//Embed video YouTube, ketik "false" untuk mendisable
                                  Replace_Image_Link = false;//Auto replace link image,  ketik "false" untuk mendisable.
                                  Replace_Force_Tag = false;//Auto replace virtual tag contoh: [pre] menjadi <pre>, dan [/pre] menjadi </pre>
, apabila salah menulis, tidak akan berfungsi
                                  Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];//(support: jpg, gif, png, bmp),hanya berfungsi apabila Replace_Image_Link=true
                                  //Pengaturan Emoticon
                                  Emo_List = [
                                  ':)'  ,'http://2.bp.blogspot.com/-m6mLm6lI-PM/UtiHzf-zF_I/AAAAAAABG44/KyG_f915ssM/s1600/Smile.png',
                                  ':('  ,'http://1.bp.blogspot.com/-OFTchZg-pc8/UtiHwrzBx_I/AAAAAAABG4g/kfLyGRwrRoY/s1600/Frown.png',
                                  '=('  ,'http://1.bp.blogspot.com/-zR6tMuKKwsU/UtiL_KQo6DI/AAAAAAABG6k/IA3qDWIJw7U/s1600/Cry.png',
                                  '^_^'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRqGu5fq3AYYXV1lOfMY_mlFF80BMuxX0MoBUlsmV3aKKALI_W1_CyRfq9_ZaAveRGNPv1xRERG2jDrgrujJFXgbjyLKPOAj4BfqMfZbgUTX4-3bUvamiNyHG3BWvVFrBLM4sK-Tf957E/s1600/smile.gif',
                                  ':D'  ,'http://1.bp.blogspot.com/-ZVtU5wdMsqw/UtiHyc9G55I/AAAAAAABG4s/R4ZAGdmYQiU/s1600/Laughing.png',
                                  '=D'  ,'http://1.bp.blogspot.com/-7IQ9bt5gmPg/Us1XDTxKJ4I/AAAAAAABGqU/lEX4K_PJqbQ/s1600/laughing-yahoo-emoticon.gif',
                                  '|o|'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic1Uh0g5zWk5AVT_bnX0PA2S82X7zC5UaINwd_nT4rWdUEuZLhs158UOkuFu2xYe1QOtmdmJKjlWW4W5F2kuz8wclH-k6Uu_q65hYoxwaanUJn_8U0hlFRnfwJyhKrRM7cR74wIyWhw9s/s1600/applause.gif',
                                  '@@,'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh10Gdr-ciJoG09tMVjZedbug3WDkyqI7vZeRWizF_b8nOTlYVMf_FUwAgQaNClncJYcJlE89KbNesgZyOqKUCzL3OGOIuVWegp8VktnL82l2ZDNZRwoOZo8-csqeqpDhYh041voVj_Sws/s1600/rolleyes.gif',
                                  ';)'  ,'http://1.bp.blogspot.com/-trruUkE4szI/UtiMAi1hJjI/AAAAAAABG68/OJZyUYzwchI/s1600/Sarcastic.png',
                                  ':-bd'  ,'http://1.bp.blogspot.com/-s-_WBU5Gs5M/Us1XTj1xPXI/AAAAAAABGqk/ZTw9DE8Novc/s1600/thumbs-up-yahoo-emoticon.gif',
                                  ':-d'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0N6Az7enwQoadsp4kHapdT0aStZChyy9zIDdV_OEGAuuJR_41o64eCyEC4rjpPKvQpq4lcbQU5ercDumhNR-cMBs6H7d6U9U8Z9JxogWjaHZnr1iqH7J8hXDqoP6wb4usQqxu79yxFxk/s1600/thumbsup.gif',
                                  ':p'  ,'http://2.bp.blogspot.com/-JCKrBzeWPDU/UtiMBPBrNpI/AAAAAAABG7A/L4wOj6J9zMw/s1600/Yuck.png',
                                  ':ngakak'  ,'http://2.bp.blogspot.com/-VqFJoWFCXWE/Us1XN_XkKkI/AAAAAAABGqc/7wNjMwFOx5c/s1600/rolling-yahoo-emoticon.gif',           ':lovely'  ,'http://2.bp.blogspot.com/-q3wiQOmFTtM/UtiHyJ6CZoI/AAAAAAABG4o/tqXTEwxiPik/s1600/HeartEyes.png',  
                                  ':ok'  ,'http://1.bp.blogspot.com/-DHNmLMVLWyg/UtYDakSraMI/AAAAAAABGy4/wzlF2WWVrrs/s1600/06.gif',  
                                  ];
                                  //Config Force tag list, define all in lower case
                                  Force_Tag = [
                                  '[pre]','<pre>',
                                  '[/pre]','</pre>
',
                                  '<pre class="brush: plain; title: ; notranslate" title="">','<code>',
                                  '</pre>
','</code>'
                                  ];
                                  eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3 q=\'.W\';3 1a=$(\'#N-Y\').B(\'y\');u 1w(H){3 1h=\' \\n\\r\\t\\f\\2p\\1S\\1T\\1U\\24\\25\\26\\27\\2e\\2h\\2k\\2m\\2n\\2u\\2y\\2z\\2A\\2F\\1L\\1N\\1O\\1P\\1Q\';G(3 i=0;i<H.5;i++){b(1h.g(H.1V(i))!=-1){H=H.d(0,i);11}}C H}$(\'#28 .1B p\').k(u(D,7){b(2r){3 m=\'1g://13.Z.X/1t?v=\';3 8=7.g(m);F(8!=-1){1H=7.d(8);K=1w(1H);3 1c=K.g(\'&\');3 T=\'\';b(1c==-1){T=K.d(m.5)}1e{T=K.d(m.5,1c)}3 1j=\'<1k I="1W" y="1g://13.Z.X/1X/\'+T+\'?1Y=1" 20="0" 21></1k>\';7=7.d(0,8)+1j+7.d(8+K.5);8=7.g(m);b(8==-1){m=\'22://13.Z.X/1t?v=\';8=7.g(m)}}}b(23){3 1d=\'\';3 x=7;G(3 i=0;i<1z.5;i++){3 m=\'.\'+1z[i];3 o=x.E();3 8=o.g(m);F(8!=-1){l=x.d(0,8+m.5);o=l.E();3 w=\'2j://\';3 z=o.g(w);3 L=\'\';F(z!=-1){L=w.R();l=l.d(z+w.5);o=l.E();z=o.g(w)}w=\'1K://\';o=l.E();z=o.g(w);F(z!=-1){L=w.R();l=l.d(z+w.5);o=l.E();z=o.g(w)}b(L==\'\'||l.5<6){11}l=L+l;1d+=x.d(0,8+m.5-l.5)+\'<s y="\'+l+\'" I="2s"/>\';x=x.d(8+m.5);o=x.E();8=o.g(m)}}7=1d+x}b(1m){3 5=A.5;b(5%2==1){5--}G(3 i=0;i<5;i+=2){3 V=\'<s y="\'+A[i+1]+\'" I="1x"/>\';8=7.g(A[i]);F(8!=-1){7=7.d(0,8)+V+7.d(8+A[i].5);8=7.g(A[i])}}}b(2G){3 5=U.5;b(5%2==1){5--}G(3 i=0;i<5;i+=2){F(1){3 x=7.R();8=x.g(U[i]);b(8!=-1){7=7.d(0,8)+U[i+1]+7.d(8+U[i].5)}1e{11}}}}C 7});$(\'.1M\').k(u(D,7){b(1m){3 5=A.5;b(5%2==1){5--}3 15=\'\';G(3 i=0;i<5;i+=2){3 1C=\'<1f>\'+A[i]+\'</1F>\';3 V=\'<s y="\'+A[i+1]+\'" I="1x"/>\';15+=\'<m I="1R">\'+V+1C+\'</M>\'}C 15}});$(\'.1f .1B p\').k(u(i,h){10=h.R();D=10.g(\'@<a 12="#c\');b(D!=-1){14=10.g(\'</a>\',D);b(14!=-1){h=h.d(0,D)+h.d(14+4)}}C h});u 1l(j){r=j.g(\'c\');b(r!=-1)j=j.d(r+1);C j}u 1n(j){j=\'&1Z=\'+j+\'#%1o\';1p=1a.1q(/#%1o/,j);C 1p}u 1r(){k=$(q).k();$(q).k(\'\');q=\'.W\';$(q).k(k);$(\'#N-Y\').B(\'y\',1a)}u 1s(e){j=$(e).B(\'16\');j=1l(j);k=$(q).k();b(q==\'.W\'){1u=\'<a 12="#1v" 29="1r()">\'+2a.2b+\'</a><a 2c="1v"/>\';$(q).k(1u)}1e{$(q).k(\'\')}q=\'#2d\'+j;$(q).k(k);$(\'#N-Y\').B(\'y\',1n(j))}17=2f.2g.12;18=\'#N-2i\';19=17.g(18);b(19!=-1){1y=17.d(19+18.5);1s(\'#2l\'+1y)}G(3 i=0;i<O.5;i++){b(\'1A\'2o O[i]){3 j=O[i].1A;3 1b=2q($(\'#c\'+j+\':P\').B(\'1D-1E\'));$(\'#c\'+j+\' .2t:P\').k(u(D,7){3 J=O[i].16;b(1b>=2v.2w){$(\'#c\'+J+\':P .2x\').1G()}3 Q=$(\'#c\'+J+\':P\').k();Q=\'<m I="1f" 16="c\'+J+\'" 1D-1E="\'+(1b+1)+\'">\'+Q+\'</M>\';$(\'#c\'+J).1G();C(7+Q)})}}3 1I=$("#2B");1I.2C(\'.2D S\').2E(u(){3 1J=$(1i).B(\'y\');$(1i).2H().B(\'y\',1J.1q(/\\/s[0-9]+(\\-c)?\\//,"/2I-c/"))});',62,169,'|||var||length||oldhtml|check_index|||if||substring|||indexOf|||par_id|html|img_src|search_key||upper_html||Cur_Cform_Hdr||||function||http_search|temp_html|src|find_http|Emo_List|attr|return|index|toUpperCase|while|for|str|class|child_id|yt_link|save_http|div|comment|Items|first|child_html|toLowerCase|img|yt_code|Force_Tag|img_html|comment_form|com|editor|youtube|temp|break|href|www|index_tail|newhtml|id|cur_url|search_formid|search_index|Cur_Cform_Url|par_level|yt_code_index|save_html|else|comment_wrap|http|whitespace|this|yt_video|iframe|Valid_Par_Id|Display_Emo|Cform_Ins_ParID|7B|n_cform_url|replace|Reset_Comment_Form|Display_Reply_Form|watch|reset_html|origin_cform|trim|comment_emo|ret_id|Replace_Image_Ext|parentId|comment_body|img_code|data|level|span|remove|ht|avatar|ava|HTTPS|u200a|comment_emo_list|u200b|u2028|u2029|u3000|item|x5d|x7c|x7d|charAt|comment_youtube|embed|autohide|parentID|frameborder|allowfullscreen|https|Replace_Image_Link|x3c|x3e|x0b|xa0|comment_block|onclick|Msgs|addComment|name|r_f_c|u2000|window|location|u2001|form_|HTTP|u2002|rc|u2003|u2004|in|x5b|parseInt|Replace_Youtube_Link|comment_img|comment_child|u2005|Config|maxThreadDepth|comment_reply|u2006|u2007|u2008|comments|find|comment_avatar|each|u2009|Replace_Force_Tag|show|s100'.split('|'),0,{}))
                                  //]]>
                  </script>
                </b:includable>
                <b:includable id='feedLinks'>
                  <b:if cond='data:blog.pageType != "item"'>
                    <b:if cond='data:feedLinks'>
                      <div class='blog-feeds'>
                        <b:include data='feedLinks' name='feedLinksBody'/>
                      </div>
</b:if>
                    <b:else/>
                    <div class='post-feeds'>
                      <b:loop values='data:posts' var='post'>
                        <b:if cond='data:post.allowComments'>
                          <b:if cond='data:post.feedLinks'>
                            <b:include data='post.feedLinks' name='feedLinksBody'/>
                          </b:if>
                        </b:if>
                      </b:loop>
                    </div>
</b:if>
                </b:includable>
                <b:includable id='feedLinksBody' var='links'>
                  <div class='feed-links'>
                    <data:feedLinksMsg/>
                    <b:loop values='data:links' var='f'>
                      <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'>
                        <data:f.name/>
                        (
                        <data:f.feedType/>
                        )
                      </a>
                    </b:loop>
                  </div>
</b:includable>
                <b:includable id='iframe_comments' var='post'>
                  <script expr:src='xOf("?updated-m' type='text/javascript'/>
                  <script type='text/javascript'>
                    (function() {
                      var url = '<data:post.canonicalUrl/>';
                      // <![CDATA[
                      gapi.comments.render('cmt_iframe_holder', {
                        'href': url,
                        'view_type': 'UNFILTERED'
                      });
                    })();
                    // ]]>
                  </script>
                  <div id='cmt_iframe_holder'/>
                </b:includable>
                <b:includable id='mobile-index-post' var='post'>
                  
                  <div class='mobile-date-outer date-outer'>
                    <b:if cond='data:post.dateHeader'>
                      <div class='date-header' style='display:none;'>
                        <span>
                          <data:post.timestamp/>
                        </span>
                      </div>
</b:if>
                    <div class='mobile-post-outer'>
                      <a expr:href='data:post.url'>
                        <h3 class='mobile-index-title entry-title' itemprop='name'>
                          <data:post.title/>
                        </h3>
</a>
                      <div class='mobile-index-contents'>
                        <div class='post-body'>
                          <b:if cond='data:post.thumbnailUrl'>
                            <div class='postthumb'>
                              <a expr:href='data:post.url'>
                                <img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' style='width:50px; height:50px;'/>
                              </a>
                            </div>
<b:else/>
                            <div class='postthumb'>
                              <a expr:href='data:post.url'>
                                <img expr:alt='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrG9AEQgP-o9l5h6hO2zjNHR0kYYS6vTQ146hquofJLFBnyRmQx7vcK2GWOTBkitAItCeh60jF6AMdckKLzqafekVtkTPsnyTWRArcex-3b4EkhTsPpLpvQzflIVtqi_v8O1dZFT5F168/s70-c/default.png' style='width:50px; height:50px;'/>
                              </a>
                            </div>
</b:if>
                          <b:if cond='data:post.snippet'>
                            <data:post.snippet/>
                          </b:if>
                        </div>
</div>
<div style='clear: both;'/>
                      <div class='mobile-index-comment'>
                        <b:if cond='data:blog.pageType != "static_page"'>
                          <b:if cond='data:post.allowComments'>
                            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                              <b:if cond='data:post.numComments == 0'>
                                Tulis Komentar 
                              </b:if>
                              <b:if cond='data:post.numComments == 1'>
                                1 Komentar 
                              </b:if>
                              <b:if cond='data:post.numComments > 1'>
                                <data:post.numComments/>
                                Komentar 
                              </b:if>
                            </a>
                          </b:if>
                        </b:if>
                        | 
                        <a expr:href='data:post.url'>
                          Read More »
                        </a>
                      </div>
</div>
</div>
</b:includable>
                <b:includable id='mobile-main' var='top'>
                  <div class='blog-posts hfeed'>
                    <b:include data='top' name='status-message'/>
                    <b:if cond='data:blog.pageType == "index"'>
                      <b:loop values='data:posts' var='post'>
                        <b:include data='post' name='mobile-index-post'/>
                      </b:loop>
                      <b:else/>
                      <b:loop values='data:posts' var='post'>
                        <b:include data='post' name='mobile-post'/>
                      </b:loop>
                    </b:if>
                  </div>
<b:include name='mobile-nextprev'/>
                </b:includable>
                <b:includable id='mobile-nextprev'>
                        <div class='blog-pager' id='blog-pager'>
                          <b:if cond='data:newerPageUrl'>
                            <div class='mobile-link-button' 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:newerPageTitle'>
                                ‹
                              </a>
                            </div>
</b:if>
                          <b:if cond='data:olderPageUrl'>
                            <div class='mobile-link-button' 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:olderPageTitle'>
                               ›
                              </a>
                            </div>
</b:if>
                          <div class='mobile-link-button' id='blog-pager-home-link'>
                            <a class='home-link' expr:href='data:blog.homepageUrl'>
                              <data:homeMsg/>
                            </a>
                          </div>
<div class='mobile-desktop-link'>
                            <a class='home-link' expr:href='data:desktopLinkUrl'>
                              <data:desktopLinkMsg/>
                            </a>
                          </div>
</div>
<div class='clear'/>
                      </b:includable>
                <b:includable id='mobile-post' var='post'>
                  <div class='date-outer'>
                    <b:if cond='data:post.dateHeader'>
                      <div class='date-header'>
                        <span>
                          <data:post.timestamp/>
                        </span>
                      </div>
</b:if>
                    <div class='date-posts'>
                      <div class='post-outer'>
                        <div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
                          <a expr:name='data:post.id'/>
                          <b:if cond='data:post.title'>
                            <h3 class='post-title entry-title' itemprop='name'>
                              <b:if cond='data:post.link'>
                                <a expr:href='data:post.link'>
                                  <data:post.title/>
                                </a>
                                <b:else/>
                                <b:if cond='data:post.url'>
                                  <b:if cond='data:blog.url != data:post.url'>
                                    <a expr:href='data:post.url'>
                                      <data:post.title/>
                                    </a>
                                    <b:else/>
                                    <data:post.title/>
                                  </b:if>
                                  <b:else/>
                                  <data:post.title/>
                                </b:if>
                              </b:if>
                            </h3>
</b:if>
                          <div class='post-header'>
                            <div class='post-header-line-1'/>
                          </div>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
                            <data:post.body/>
                            <div style='clear: both;'/>
                          </div>
<div class='post-footer'>
                            <div class='post-footer-line post-footer-line-1'>
                              <span class='post-author vcard'>
                                <b:if cond='data:top.showAuthor'>
                                  <b:if cond='data:post.authorProfileUrl'>
                                    <span class='fn'>
                                      <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
                                        <data:post.author/>
                                      </a>
                                    </span>
                                    <b:else/>
                                    <span class='fn'>
                                      <data:post.author/>
                                    </span>
                                  </b:if>
                                </b:if>
                              </span>
                              <span class='post-timestamp'>
                                <b:if cond='data:top.showTimestamp'>
                                  <data:top.timestampLabel/>
                                  <b:if cond='data:post.url'>
                                    <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
                                      <abbr class='published' expr:title='data:post.timestampISO8601'>
                                        <data:post.timestamp/>
                                      </abbr>
                                    </a>
                                  </b:if>
                                </b:if>
                              </span>
                              <span class='post-comment-link'>
                                <b:if cond='data:blog.pageType != "item"'>
                                  <b:if cond='data:blog.pageType != "static_page"'>
                                    <b:if cond='data:post.allowComments'>
                                      <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                                        <b:if cond='data:post.numComments == 1'>
                                          1 
                                          <data:top.commentLabel/>
                                          <b:else/>
                                          <data:post.numComments/>
                                          <data:top.commentLabelPlural/>
                                        </b:if>
                                      </a>
                                    </b:if>
                                  </b:if>
                                </b:if>
                              </span>
                            </div>
<div class='post-footer-line post-footer-line-2'>
                              <b:if cond='data:top.showMobileShare'>
                                <div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
                                  <a href='javascript:void(0);'>
                                    <data:shareMsg/>
                                  </a>
                                </div>
</b:if>
                              <b:if cond='data:top.showDummy'>
                                <div class='goog-inline-block dummy-container'>
                                  <data:post.dummyTag/>
                                </div>
</b:if>
                            </div>
</div>
</div>
<b:if cond='data:blog.pageType == "static_page"'>
                          <b:if cond='data:post.showThreadedComments'>
                            <b:include data='post' name='comments'/>
                            <b:else/>
                            <b:include data='post' name='comments'/>
                          </b:if>
                        </b:if>
                        <b:if cond='data:blog.pageType == "item"'>
                          <b:if cond='data:post.showThreadedComments'>
                            <b:include data='post' name='comments'/>
                            <b:else/>
                            <b:include data='post' name='comments'/>
                          </b:if>
                        </b:if>
                      </div>
</div>
</div>
<b:if cond='data:blog.pageType != "index"'>
                            <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:newerPageTitle'>‹</a>
                                </span>
                                <b:else/> 
                                <span id='blog-pager-newer-link'>
                                  <a class='blog-pager-newer-link' href='#' style='color:transparent!Important;'> ☺</a>
                                </span>
                              </b:if>
                              <span id='home-link'>
                                <a class='home-link' expr:href='data:blog.homepageUrl'><img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABEElEQVR42t2UzQmDQBCFU0JKSQleREXRiKIiKot/daQTS0gJW4KlWMJknrAH0SS7OQUXBoR98znOvPFyOcVxHGfyPG+2LOvquq4VhiHleU6+75MxjJOmqqqoaRpKkmS+88HzOI4rVBuEariSGcl939MwDNS2LQkhqOs6MyBgXMiMZICQfBRaQF2YFtAEhkBvbdu+HcJwEcexNgyBnmZZtvDkxQ7GlS1qADowBLQoIE1T2kDZZ0+2h2RbyLquFx0oNNAiJwgCyQx5+OkQKFt8Cmig/TrlKIokeqOqQBuKolgDQ1AvgwZaIyD6w719qDusndqSn4BIZsgGWJbl2YAYP3yFtWKj74Dq1wXNW6v89XkB6E5tY/X2XroAAAAASUVORK5CYII='/></a>
                              </span>
                              <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:olderPageTitle'>›</a>
                                </span>
                              </b:if>
                              <b:if cond='data:mobileLinkUrl'>
                                <div class='blog-mobile-link'>
                                  <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
                                </div>
</b:if>
                            </div>
<div class='clear'/>
                          </b:if>
                </b:includable>
                <b:includable id='nextprev'>
                        <b:if cond='data:blog.pageType == "index"'>
                          <div class='blog-pager' id='blog-pager'>
<div class='pagercover'>
                            <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:newerPageTitle'>‹ <span>Newer Posts</span></a>
                              </span>
                              <b:else/> 
                              <span id='blog-pager-newer-link'>
                                <a class='blog-pager-newer-link' href='#' style='font-size:12px;'> <data:blog.title/></a>
                              </span>
                            </b:if>
                            <span id='home-link'>
                              <a class='home-link' expr:href='data:blog.homepageUrl'><img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABEElEQVR42t2UzQmDQBCFU0JKSQleREXRiKIiKot/daQTS0gJW4KlWMJknrAH0SS7OQUXBoR98znOvPFyOcVxHGfyPG+2LOvquq4VhiHleU6+75MxjJOmqqqoaRpKkmS+88HzOI4rVBuEariSGcl939MwDNS2LQkhqOs6MyBgXMiMZICQfBRaQF2YFtAEhkBvbdu+HcJwEcexNgyBnmZZtvDkxQ7GlS1qADowBLQoIE1T2kDZZ0+2h2RbyLquFx0oNNAiJwgCyQx5+OkQKFt8Cmig/TrlKIokeqOqQBuKolgDQ1AvgwZaIyD6w719qDusndqSn4BIZsgGWJbl2YAYP3yFtWKj74Dq1wXNW6v89XkB6E5tY/X2XroAAAAASUVORK5CYII='/></a>
                            </span>
                            <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:olderPageTitle'><span>Older Posts</span> ›</a>
                              </span>
                            </b:if>
                            <b:if cond='data:mobileLinkUrl'>
                              <div class='blog-mobile-link'>
                                <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
                              </div>
</b:if>
                            </div>
</div>
<div class='clear'/>
                        </b:if>   
                      </b:includable>
                <b:includable id='post' var='post'>
  <article class='post hentry'>
    <b:if cond='data:blog.pageType != "item"'>
      <b:if cond='data:blog.pageType != "static_page"'>
        <b:if cond='data:post.thumbnailUrl'>
          <script type='text/javascript'>
            //<![CDATA[
           var _0xbf45=["\x35\x20\x6E\x28\x30\x2C\x31\x29\x7B\x64\x20\x34\x3D\x43\x3B\x36\x3D\x27\x3C\x42\x20\x41\x3D\x22\x27\x2B\x30\x2E\x7A\x28\x27\x2F\x79\x2D\x63\x2F\x27\x2C\x27\x2F\x73\x27\x2B\x34\x2B\x27\x2D\x63\x2F\x27\x29\x2B\x27\x22\x20\x72\x3D\x22\x70\x22\x20\x6D\x3D\x22\x6C\x22\x20\x6A\x3D\x22\x78\x22\x20\x6B\x3D\x22\x27\x2B\x31\x2B\x27\x22\x20\x68\x3D\x22\x27\x2B\x31\x2B\x27\x22\x2F\x3E\x27\x3B\x67\x28\x30\x21\x3D\x22\x22\x29\x33\x20\x36\x3B\x6F\x20\x33\x22\x22\x7D\x66\x2E\x71\x3D\x35\x28\x29\x7B\x64\x20\x65\x3D\x74\x2E\x75\x28\x22\x76\x22\x29\x3B\x67\x28\x65\x3D\x3D\x77\x29\x7B\x66\x2E\x69\x2E\x62\x3D\x22\x61\x3A\x2F\x2F\x39\x2E\x38\x2E\x37\x2F\x22\x7D\x65\x2E\x32\x28\x22\x62\x22\x2C\x22\x61\x3A\x2F\x2F\x39\x2E\x38\x2E\x37\x2F\x22\x29\x3B\x65\x2E\x32\x28\x22\x44\x22\x2C\x22\x45\x22\x29\x3B\x65\x2E\x32\x28\x22\x68\x22\x2C\x22\x46\x20\x47\x20\x48\x22\x29\x3B\x65\x2E\x49\x3D\x22\x4A\x22\x7D","\x7C","\x73\x70\x6C\x69\x74","\x69\x6D\x61\x67\x65\x5F\x75\x72\x6C\x7C\x70\x6F\x73\x74\x5F\x74\x69\x74\x6C\x65\x7C\x73\x65\x74\x41\x74\x74\x72\x69\x62\x75\x74\x65\x7C\x72\x65\x74\x75\x72\x6E\x7C\x69\x6D\x61\x67\x65\x5F\x73\x69\x7A\x65\x7C\x66\x75\x6E\x63\x74\x69\x6F\x6E\x7C\x69\x6D\x61\x67\x65\x5F\x74\x61\x67\x7C\x63\x6F\x6D\x7C\x74\x68\x65\x6D\x65\x78\x70\x6F\x73\x65\x7C\x77\x77\x77\x7C\x68\x74\x74\x70\x7C\x68\x72\x65\x66\x7C\x7C\x76\x61\x72\x7C\x7C\x77\x69\x6E\x64\x6F\x77\x7C\x69\x66\x7C\x74\x69\x74\x6C\x65\x7C\x6C\x6F\x63\x61\x74\x69\x6F\x6E\x7C\x68\x65\x69\x67\x68\x74\x7C\x61\x6C\x74\x7C\x33\x37\x30\x7C\x77\x69\x64\x74\x68\x7C\x62\x70\x5F\x74\x68\x75\x6D\x62\x6E\x61\x69\x6C\x5F\x72\x65\x73\x69\x7A\x65\x7C\x65\x6C\x73\x65\x7C\x70\x6F\x73\x74\x74\x68\x75\x6D\x62\x7C\x6F\x6E\x6C\x6F\x61\x64\x7C\x63\x6C\x61\x73\x73\x7C\x7C\x64\x6F\x63\x75\x6D\x65\x6E\x74\x7C\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64\x7C\x6D\x79\x63\x6F\x6E\x74\x65\x6E\x74\x7C\x6E\x75\x6C\x6C\x7C\x32\x30\x30\x7C\x73\x37\x32\x7C\x72\x65\x70\x6C\x61\x63\x65\x7C\x73\x72\x63\x7C\x69\x6D\x67\x7C\x33\x34\x30\x7C\x72\x65\x66\x7C\x64\x6F\x66\x6F\x6C\x6C\x6F\x77\x7C\x46\x72\x65\x65\x7C\x42\x6C\x6F\x67\x67\x65\x72\x7C\x54\x65\x6D\x70\x6C\x61\x74\x65\x73\x7C\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C\x7C\x54\x68\x65\x6D\x65\x58\x70\x6F\x73\x65","","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x72\x65\x70\x6C\x61\x63\x65","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function (_0x4af0x1,_0x4af0x2,_0x4af0x3,_0x4af0x4,_0x4af0x5,_0x4af0x6){_0x4af0x5=function (_0x4af0x3){return (_0x4af0x3<_0x4af0x2?_0xbf45[4]:_0x4af0x5(parseInt(_0x4af0x3/_0x4af0x2)))+((_0x4af0x3=_0x4af0x3%_0x4af0x2)>35?String[_0xbf45[5]](_0x4af0x3+29):_0x4af0x3.toString(36));} ;if(!_0xbf45[4][_0xbf45[6]](/^/,String)){while(_0x4af0x3--){_0x4af0x6[_0x4af0x5(_0x4af0x3)]=_0x4af0x4[_0x4af0x3]||_0x4af0x5(_0x4af0x3);} ;_0x4af0x4=[function (_0x4af0x5){return _0x4af0x6[_0x4af0x5];} ];_0x4af0x5=function (){return _0xbf45[7];} ;_0x4af0x3=1;} ;while(_0x4af0x3--){if(_0x4af0x4[_0x4af0x3]){_0x4af0x1=_0x4af0x1[_0xbf45[6]]( new RegExp(_0xbf45[8]+_0x4af0x5(_0x4af0x3)+_0xbf45[8],_0xbf45[9]),_0x4af0x4[_0x4af0x3]);} ;} ;return _0x4af0x1;} (_0xbf45[0],46,46,_0xbf45[3][_0xbf45[2]](_0xbf45[1]),0,{}));

//]]>
          </script>
          <a expr:href='data:post.url'>
            <script type='text/javascript'>
              document.write(bp_thumbnail_resize("<data:post.thumbnailUrl/>","<data:post.title/>","<data:post.timestamp/>","<data:post.numComments/>"));
            </script>
          </a>
          <b:else/>
          <a expr:href='data:post.url'>
            <img class='postthumb' expr:alt='data:post.title' expr:title='data:post.title' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrG9AEQgP-o9l5h6hO2zjNHR0kYYS6vTQ146hquofJLFBnyRmQx7vcK2GWOTBkitAItCeh60jF6AMdckKLzqafekVtkTPsnyTWRArcex-3b4EkhTsPpLpvQzflIVtqi_v8O1dZFT5F168/s70-c/default.png' width='150'/>
          </a>
        </b:if>
        <b:if cond='data:post.labels'>
          <div class='post-label'>
            <style>
              .post-label{float:right}.fa-tags {
                color: #FFF;background-color: rgba(26, 26, 26, 0.9);
                color: #FFF;
                font-size: 11px;
                opacity: 0.9;float:left;
                padding:6px}</style>
            <i class='fa fa-tags'/>

<b:loop index='x' values='data:post.labels' var='label'>

<b:if cond='data:x==0'> <a expr:href='data:label.url + "?max-results=12"' rel='tag nofollow'><data:label.name/></a>, </b:if> 
    <b:if cond='data:x==1'> <a expr:href='data:label.url + "?max-results=12"' rel='tag nofollow'><data:label.name/> </a></b:if>
    <b:if cond='data:x==2'> <a expr:href='data:label.url + "?max-results=12"' rel='tag nofollow'><data:label.name/> </a></b:if>

</b:loop>

<div class='post-comments'>
              <style>
                .post-comments{
                  background-color: rgba(26, 26, 26, 0.9);
                  color: #FFF;padding:3px 5px;
                  bottom:3px;float:left;font-size: 12px;
font-family: Open Sans;}
              </style>
              <i class='fa fa-comments'/>
              <data:post.numComments/>
            </div>
</div>
</b:if>
        <b:if cond='data:post.title'>
          <h2 class='post-title entry-title'>
            <b:if cond='data:post.link'>
              <a expr:href='data:post.link ' expr:title='data:post.title'>
                <data:post.title/>
              </a>
              <b:else/>
              <b:if cond='data:post.url'>
                <a expr:href='data:post.url' expr:title='data:post.title'>
                  <data:post.title/>
                </a>
                <b:else/>
                <data:post.title/>
              </b:if>
            </b:if>
          </h2>
</b:if>
      </b:if>
      <b:else/>
      <div class='clear'/>
      <h1 class='post-title entry-title'>
        <b:if cond='data:post.link'>
          <a expr:href='data:post.link' expr:title='data:post.title'>
            <data:post.title/>
          </a>
          <b:else/>
          <b:if cond='data:post.url'>
            <a expr:href='data:post.url' expr:title='data:post.title'>
              <data:post.title/>
            </a>
            <b:else/>
            <data:post.title/>
          </b:if>
        </b:if>
      </h1>
</b:if>
    <div itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
      <b:if cond='data:blog.pageType == "static_page"'>
        <div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
          <data:post.body/>
        </div>
<b:else/>
        <b:if cond='data:blog.pageType != "item"'>
          <b:if cond='data:blog.pageType != "static_page"'>
            <div class='info-artikel'>
              <span class='post-info-icon'>
                <b:if cond='data:top.showAuthor'>
                  <span class='vcard'>
                    <span class='fn'>
                      <data:post.author/>
                    </span>
                  </span>
                </b:if>
              </span>
              , 
              <span class='post-info-icon'>
                <b:if cond='data:post.allowComments'>
                  <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                    <b:if cond='data:post.numComments == 0'>
                      No Comment 
                    </b:if>
                    <b:if cond='data:post.numComments == 1'>
                      1 Comment 
                    </b:if>
                    <b:if cond='data:post.numComments > 1'>
                      <data:post.numComments/>
                      Comments 
                    </b:if>
                  </a>
                </b:if>
              </span>
              <span class='post-info-icon'>
                <abbr class='updated published' expr:title='data:post.timestampISO8601'>
                  <data:post.timestamp/>
                </abbr>
              </span>
            </div>
</b:if>
          <div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
            <div expr:id='"summary" + data:post.id' itemprop='articleBody'>
              <data:post.snippet/>
            </div>
<script type='text/javascript'>
              createSummary("summary<data:post.id/>");</script>
          </div>
</b:if>
        <b:if cond='data:blog.pageType == "item"'>
          <div itemprop='articleBody'>
            <data:post.body/>
            <b:if cond='data:blog.pageType == "item"'>
              <div itemscope='itemscope' itemtype='http://data-vocabulary.org/Review'>
                <div class='post-info'>
                  <div class='post-info-icon admin'>
                    <b:if cond='data:top.showAuthor'>
                      <span class='vcard'>
                        <span class='fn'>
                          <span itemprop='name'>
                            <data:post.author/>
                          </span>
                        </span>
                      </span>
                    </b:if>
                  </div>
<div class='post-info-icon komentar'>
                    <b:if cond='data:post.allowComments'>
                      <a expr:onclick='data:post.addCommentOnclick' href='#comments'>
                        <b:if cond='data:post.numComments == 0'>
                          Add Comment 
                        </b:if>
                        <b:if cond='data:post.numComments == 1'>
                          1 Comment 
                        </b:if>
                        <b:if cond='data:post.numComments > 1'>
                          <data:post.numComments/>
                          Comments 
                        </b:if>
                      </a>
                    </b:if>
                  </div>
<b:if cond='data:post.labels'>
                    <div class='post-info-icon label'>
                      <b:loop values='data:post.labels' var='label'>
                        <a expr:href='data:label.url + "?max-results=12"' rel='tag nofollow'>
                          <data:label.name/>
                        </a>
                        <b:if cond='data:label.isLast != "true"'/>
                      </b:loop>
                    </div>
</b:if>
                  <b:if cond='data:post.dateHeader'>
                    <div class='post-info-icon tanggal'>
                      <abbr class='updated published' expr:title='data:post.timestampISO8601'>
                        <data:post.dateHeader/>
                      </abbr>
                    </div>
</b:if>
                </div>
</div>
</b:if>
            <div class='clear'/>
            <div class='clear'/>
            <div class='clear'/>
            <div id='button-count-share'>

<div id='social_share'>
<div class='ct-wrapper' style='width: 670px;margin-bottom: 20px;;'>
<div id='share-buttons'>
<div class='facebook2 share-button'>
<i class='icon'>
<i class='fa fa-facebook'/></i><div class='pslide'>
<p>
facebook </p>
</div>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/>
</div>
<div class='twitter share-button'>
<i class='icon'>
<i class='fa fa-twitter'>
</i>
</i>
<div class='pslide'>
<p>
twitter </p>
</div>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>
                 
                </a>
                <script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div class='google share-button'>
<i class='icon'>
<i class='fa fa-google-plus'>
</i>
</i>
<div class='pslide'>
<p>
google+ </p>
</div>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url' rel='nofollow'/>
                <script type='text/javascript'>
                  window.___gcfg = {lang: 'id'};
                                    (function() {
                                    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                                    po.src = 'https://apis.google.com/js/plusone.js';
                                    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
                                   })();
                </script>
</div>
<div class='facebook1 share-button'>
<i class='icon'>
<i class='fa fa-facebook'/></i><div class='pslide'>
<p>
fb share </p>
</div>
<a class='fb-share-button' name='fb_share' rel='nofollow' share_url='"http://www.facebook.com/sharer.php?u=" + data:blog.url' type='button_count'/>
</div>
</div>
</div>
</div>
</div>
<b:include name='authorblog'/>
            <div class='clear'/>
            
            <b:if cond='data:blog.pageType == "item"'>
              <div id='inikotak'>
                Related Posts
              </div>
<div id='artikel-terkait'>
                <script type='text/javascript'>
//<![CDATA[
var ry='';rcomment='comments';rdisable='disable comments';commentYN='yes';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();

//]]>
</script>
                <b:loop values='data:post.labels' var='label'>
                  <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=15"' type='text/javascript'/>
                </b:loop>
                <script type='text/javascript'>
                  var maxresults=6;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
              </div>
<div class='clear'/>
            </b:if>

<b:if cond='data:blog.pageType != "index"'>
                            <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:newerPageTitle'>< Previous Post</a>
                                </span>
                                <b:else/> <span id='blog-pager-newer-link'>
                                <a class='blog-pager-newer-link' href='#' style='color:transparent!Important;'> ☺</a>
                                </span>
                              </b:if> <span id='home-link'>
                              <a class='home-link' expr:href='data:blog.homepageUrl'><img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABEElEQVR42t2UzQmDQBCFU0JKSQleREXRiKIiKot/daQTS0gJW4KlWMJknrAH0SS7OQUXBoR98znOvPFyOcVxHGfyPG+2LOvquq4VhiHleU6+75MxjJOmqqqoaRpKkmS+88HzOI4rVBuEariSGcl939MwDNS2LQkhqOs6MyBgXMiMZICQfBRaQF2YFtAEhkBvbdu+HcJwEcexNgyBnmZZtvDkxQ7GlS1qADowBLQoIE1T2kDZZ0+2h2RbyLquFx0oNNAiJwgCyQx5+OkQKFt8Cmig/TrlKIokeqOqQBuKolgDQ1AvgwZaIyD6w719qDusndqSn4BIZsgGWJbl2YAYP3yFtWKj74Dq1wXNW6v89XkB6E5tY/X2XroAAAAASUVORK5CYII='/></a>
                              </span>
                              <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:olderPageTitle'>Next Post ></a>
                                </span>
                              </b:if>
                              <b:if cond='data:mobileLinkUrl'>
                                <div class='blog-mobile-link'>
                                  <a expr:href='data:mobileLinkUrl'>
                                    <data:mobileLinkMsg/>
                                  </a>
                                </div>
</b:if>
                            </div>
<div class='clear'/>
                          </b:if>
            <div class='clear'/>
          </div>
</b:if>
      </b:if>
    </div>
</article>
                </b:includable>
                <b:includable id='postQuickEdit' var='post'>
                  <b:if cond='data:post.editUrl'>
                    <span expr:class='"item-control " + data:post.adminClass'>
                      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
                        <img alt='Popular Posts' class='icon-action' height='18' src='http://www.blogger.com/img/icon18_edit_allbkg.gif' width='18'/>
                      </a>
                    </span>
                  </b:if>
                </b:includable>
                <b:includable id='shareButtons' var='post'>
                  <b:if cond='data:top.showEmailButton'>
                    <a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'>
                      <span class='share-button-link-text'>
                        <data:top.emailThisMsg/>
                      </span>
                    </a>
                  </b:if>
                  <b:if cond='data:top.showBlogThisButton'>
                    <a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'>
                      <span class='share-button-link-text'>
                        <data:top.blogThisMsg/>
                      </span>
                    </a>
                  </b:if>
                  <b:if cond='data:top.showTwitterButton'>
                    <a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'>
                      <span class='share-button-link-text'>
                        <data:top.shareToTwitterMsg/>
                      </span>
                    </a>
                  </b:if>
                  <b:if cond='data:top.showFacebookButton'>
                    <a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'>
                      <span class='share-button-link-text'>
                        <data:top.shareToFacebookMsg/>
                      </span>
                    </a>
                  </b:if>
                  <b:if cond='data:top.showOrkutButton'>
                    <a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + "&target=orkut"' expr:title='data:top.shareToOrkutMsg' target='_blank'>
                      <span class='share-button-link-text'>
                        <data:top.shareToOrkutMsg/>
                      </span>
                    </a>
                  </b:if>
                  <b:if cond='data:top.showDummy'>
                    <div class='goog-inline-block dummy-container'>
                      <data:post.dummyTag/>
                    </div>
</b:if>
                </b:includable>
                <b:includable id='status-message'>
                  <b:if cond='data:navMessage'>
                    <div class='status-msg-wrap'>
                      <div class='status-msg-body'>
                        <data:navMessage/>
                      </div>
<div class='status-msg-border'>
                        <div class='status-msg-bg'>
                          <div class='status-msg-hidden'>
                            <data:navMessage/>
                          </div>
</div>
</div>
</div>
<div style='clear: both;'/>
                  </b:if>
                </b:includable>
                <b:includable id='threaded-comment-form' var='post'>
                  <div class='comment-form'>
                    <b:if cond='data:mobile'>
                      <p id='komennyakomen'>
<data:blogCommentMessage/>
                      </p>
<data:blogTeamBlogMessage/>
                      <b:if cond='data:blog.pageType == "static_page"'>
                        <a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&pageID=" + data:post.id' id='comment-editor-src'/>
                      </b:if>
                      <b:if cond='data:blog.pageType == "item"'>
                        <a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&postID=" + data:post.id' id='comment-editor-src'/>
                      </b:if>
                      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>
                      <b:else/>
                      <p>
<data:blogCommentMessage/>
                      </p>
<data:blogTeamBlogMessage/>
                      <b:if cond='data:blog.pageType == "static_page"'>
                        <a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&pageID=" + data:post.id' id='comment-editor-src'/>
                      </b:if>
                      <b:if cond='data:blog.pageType == "item"'>
                        <a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&postID=" + data:post.id' id='comment-editor-src'/>
                      </b:if>
                      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>
                    </b:if>
                    <data:post.friendConnectJs/>
                    <data:post.cmtfpIframe/>
                    <script type='text/javascript'>
                      BLOG_CMT_createIframe("<data:post.appRpcRelayPath/>","<data:post.communityId/>");</script>
                  </div>
</b:includable>
                <b:includable id='threaded_comment_js' var='post'>
                  <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
                  <script type='text/javascript'>
                    (function(){var y=<data:post.commentJso/>;var B=<data:post.commentMsgs/>;var A=<data:post.commentConfig/>;var J=null;if(y&&y.length>0){J=parseInt(y[y.length-1].timestamp)+1}var I=function(b){if(b.gd$extendedProperty){for(var c in b.gd$extendedProperty){if(b.gd$extendedProperty[c].name=="blogger.contentRemoved"){return'<span class="deleted-comment">'+b.content.$t+"</span>"}}}return b.content.$t};var w=function(g){J=null;var b=[];if(g&&g.feed&&g.feed.entry){for(var e=0,f;f=g.feed.entry[e];e++){var c={};var j=/blog-(\d+).post-(\d+)/.exec(f.id.$t);c.id=j?j[2]:null;c.body=I(f);c.timestamp=Date.parse(f.published.$t)+"";if(f.author&&f.author.constructor===Array){var i=f.author[0];if(i){c.author={name:(i.name?i.name.$t:undefined),profileUrl:(i.uri?i.uri.$t:undefined),avatarUrl:(i.gd$image?i.gd$image.src:undefined)}}}if(f.link){if(f.link[2]){c.link=c.permalink=f.link[2].href}if(f.link[3]){var d=/.*comments\/default\/(\d+)\?.*/.exec(f.link[3].href);if(d&&d[1]){c.parentId=d[1]}}}c.deleteclass="item-control blog-admin";if(f.gd$extendedProperty){for(var h in f.gd$extendedProperty){if(f.gd$extendedProperty[h].name=="blogger.itemClass"){c.deleteclass+=" "+f.gd$extendedProperty[h].value}}}b.push(c)}}return b};var D=function(b){if(M()){var c=A.feed+"?alt=json&v=2&orderby=published&reverse=false&max-results=50";if(J){c+="&published-min="+new Date(J).toISOString()}window.bloggercomments=function(e){var f=w(e);J=f.length<50?null:parseInt(f[f.length-1].timestamp)+1;b(f);window.bloggercomments=null};c+="&callback=bloggercomments";var d=document.createElement("script");d.type="text/javascript";d.src=c;document.getElementsByTagName("head")[0].appendChild(d)}};var M=function(){return !!J};var O=function(d,b){if("iswriter"==d){var c=!!b.author&&b.author.name==A.authorName&&b.author.profileUrl==A.authorUrl;return c?"true":""}else{if("deletelink"==d){return A.baseUri+"/delete-comment.g?blogID="+A.blogId+"&postID="+b.id}else{if("deleteclass"==d){return b.deleteclass}}}return""};var E=null;var K=null;var z=undefined;var L=function(c,b){if(E==null){E=document.getElementById("comment-editor");if(E!=null){E.height="250px";E.style.display="block";K=E.src.split("#")}}if(E&&(c!==z)){document.getElementById(b).insertBefore(E,null);E.src=K[0]+(c?"&parentID="+c:"")+"#"+K[1];z=c}};var N=(window.location.hash||"#").substring(1);var t,C;if(/^comment-form_/.test(N)){t=N.substring("comment-form_".length)}else{if(/^c[0-9]+$/.test(N)){C=N.substring(1)}}var G={maxDepth:A.maxThreadDepth};var F={id:A.postId,data:y,loadNext:D,hasMore:M,getMeta:O,onReply:L,rendered:true,initComment:C,initReplyThread:t,config:G,messages:B};var n=function(){if(window.goog&&window.goog.comments){var b=document.getElementById("comment-holder");window.goog.comments.render(b,F)}};if(window.goog&&window.goog.comments){n()}else{window.goog=window.goog||{};window.goog.comments=window.goog.comments||{};window.goog.comments.loadQueue=window.goog.comments.loadQueue||[];window.goog.comments.loadQueue.push(n)}})();</script>
                </b:includable>
                <b:includable id='threaded_comments' var='post'>
                  <div class='comments' id='comments'>
                    <a name='comments'/>
                    <h4>
                      <b:if cond='data:post.numComments == 1'>
                        1 
                        <data:commentLabel/>
                        : 
                        <b:else/>
                        <data:post.numComments/>
                        <data:commentLabelPlural/>
                        : 
                      </b:if>
                    </h4>
<div class='comments-content'>
                      <b:if cond='data:post.embedCommentForm'>
                        <b:include data='post' name='threaded_comment_js'/>
                      </b:if>
                      <div id='comment-holder'>
                        <data:post.commentHtml/>
                      </div>
</div>
<p class='comment-footer'>
<b:if cond='data:post.allowNewComments'>
                        <b:include data='post' name='threaded-comment-form'/>
                        <b:else/>
                        <data:post.noNewCommentsText/>
                      </b:if>
                    </p>
<b:if cond='data:showCmtPopup'>
                      <div id='comment-popup'>
                        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'/>
                      </div>
</b:if>
                    <div id='backlinks-container'>
                      <div expr:id='data:widget.instanceId + "_backlinks-container"'>
                        <b:if cond='data:post.showBacklinks'>
                          <b:include data='post' name='backlinks'/>
                        </b:if>
                      </div>
</div>
</div>
</b:includable>
              </b:widget>
            </b:section>
          </aside>
          <div id='bagian-widget'>
            <b:section class='sidebar' id='widget-kiri'/>
            <b:section class='sidebar' id='widget-kanan'/>
          </div>
</div>
<aside id='iklan-kanan'>

<b:section class='sidebar' id='sidebar-kanan'>
            <b:widget id='HTML1' locked='false' title='Social Share' type='HTML'>
              <b:includable id='main'>
  
  <b:if cond='data:title != ""'>
    <h2 class='title'>
<data:title/></h2>
</b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
<b:include name='quickedit'/>
</b:includable>
            </b:widget>
            <b:widget id='PopularPosts1' locked='false' title='Weekly Posts' type='PopularPosts'>
              <b:includable id='main'>
                <b:if cond='data:title'>
                  <h2>
                    <data:title/>
                  </h2>
</b:if>
                <div class='widget-content popular-posts'>
                  <ul>
                    <b:loop values='data:posts' var='post'>
<li>
                        <b:if cond='data:showThumbnails == "false"'>
                          <b:if cond='data:showSnippets == "false"'>
                            
                            <a expr:href='data:post.href'>
                              <data:post.title/>
                            </a>
                            <b:else/>
                            
                            <div class='item-title'>
                              <a expr:href='data:post.href'>
                                <data:post.title/>
                              </a>
                            </div>
<div class='item-snippet'>
                              <data:post.snippet/>
                            </div>
</b:if>
                          <b:else/>
                          <b:if cond='data:showSnippets == "false"'>
                            
                            <div class='item-thumbnail-only'>
                              <b:if cond='data:post.thumbnail'>
                                <div class='item-thumbnail'>
                                  <a expr:href='data:post.href' target='_blank'>
                                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                                  </a>
                                </div>
</b:if>
                              <div class='item-title'>
                                <a expr:href='data:post.href'>
                                  <data:post.title/>
                                </a>
                              </div>
</div>
<div style='clear: both;'/>
                            <b:else/>
                            
                            <div class='item-content'>
                              <b:if cond='data:post.thumbnail'>
                                <div class='item-thumbnail'>
                                  <a expr:href='data:post.href' target='_blank'>
                                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                                  </a>
                                </div>
</b:if>
                              <div class='item-title'>
                                <a expr:href='data:post.href'>
                                  <data:post.title/>
                                </a>
                              </div>
<div class='item-snippet'>
                                <data:post.snippet/>
                              </div>
</div>
<div style='clear: both;'/>
                          </b:if>
                        </b:if>
                      </li>
</b:loop>
                  </ul>
</div>
</b:includable>
            </b:widget>
            <b:widget id='HTML2' locked='false' title='Like us On Facebook' type='HTML'>
              <b:includable id='main'>
  
  <b:if cond='data:title != ""'>
    <h2 class='title'>
<data:title/></h2>
</b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
<b:include name='quickedit'/>
</b:includable>
            </b:widget>
            <b:widget id='Label1' locked='false' title='Labels' type='Label'>
              <b:includable id='main'>
  <b:if cond='data:title'>
    <h2>
<data:title/></h2>
</b:if>
  <div expr:class='"widget-content " + data:display + "-label-widget-content"'>
    <b:if cond='data:display == "list"'>
      <ul>
      <b:loop values='data:labels' var='label'>
<li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
</b:loop>
      </ul>
<b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='"label-size label-size-" + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
            </b:widget>
          </b:section>
        </aside>
      </div>
<div class='clear'/>

<footer id='copyright'>
      <div class='pemotong'>
        <div id='copy'>
          <p>
Copyright 
            <a expr:href='data:blog.homepageUrl'>
              <data:blog.title/>
            </a>
            2014 . Template Created by 
           <a id='mycontent'/>
       
          </p>
</div>
<div class='clear'/>
      </div>
</footer>
 
    </div>
<script type='text/javascript'>
      //<![CDATA[
      function blockLinks(parentID, children) {
        var parent = document.getElementById(parentID),
            content = parent.getElementsByTagName(children);
        for(var i = 0; i < content.length; i++) {
          if(content[i].innerHTML.indexOf('</a>') !== -1) {
            content[i].innerHTML = "Maaf <span style='background-color: red; color: white; padding: 3px;'><b>link hidup</b></span> tidak akan tampil di sini!";
            content[i].className = "spammer-detected";
          }
        }
      }
      blockLinks('comment_block', 'p');
      //]]>
    </script>

//]]></script>
   
    <script type='text/javascript'>
      //<![CDATA[
      function cdClear() {
        var wtarea = document.getElementById('codes');
        wtarea.value = '';
        wtarea.focus();
        document.getElementById('cvrt').disabled = false;
      }
      function cdConvert() {
        var ctarea = document.getElementById('codes'),
            cv = ctarea.value,
            opt1 = document.getElementById('opt1'),
            opt2 = document.getElementById('opt2'),
            opt3 = document.getElementById('opt3'),
            opt4 = document.getElementById('opt4'),
            opt5 = document.getElementById('opt5');
        cv = cv.replace(/\t/g, "    ");
        if (opt1.checked) cv = cv.replace(/&/g, "&");
        if (opt2.checked) cv = cv.replace(/'/g, "'");
        if (opt3.checked) cv = cv.replace(/"/g, """);
        if (opt4.checked) cv = cv.replace(/</g, "<");
        if (opt5.checked) cv = cv.replace(/>/g, ">");
        if (cv.lastIndexOf('\n') != -1 || cv.length > 40) {
          cv = cv.replace(/^/, "<i rel=\"pre\">");
        } else {
          cv = cv.replace(/^/, "<i rel=\"code\">");
        }
        cv = cv.replace(/$/, "</i>");
        ctarea.value = cv;
        ctarea.focus();
        ctarea.select();
      };
      //]]></script>
  
    <script type='text/javascript'>
      //<![CDATA[
      $(document.body).append('<div id="page-loader">
Loading...</div>
');
      $(window).on("beforeunload", function() {
        $('#page-loader').fadeIn(1000).delay(9000).fadeOut(1000);
      });
      //]]>
    </script>
    <script type='text/javascript'>
      //<![CDATA[
var _0xd11c=["\x24\x28\x37\x29\x2E\x69\x28\x34\x28\x29\x7B\x24\x36\x3D\x24\x28\x27\x2E\x30\x2D\x6E\x27\x29\x3B\x24\x32\x3D\x24\x28\x27\x23\x32\x27\x29\x3B\x24\x32\x2E\x73\x28\x34\x28\x29\x7B\x24\x28\x68\x29\x2E\x33\x28\x27\x6F\x27\x29\x3B\x24\x28\x27\x2E\x30\x2D\x35\x27\x29\x2E\x33\x28\x27\x30\x2D\x35\x2D\x71\x27\x29\x3B\x24\x36\x2E\x33\x28\x27\x30\x2D\x72\x27\x29\x7D\x29\x7D\x29\x3B\x64\x2E\x66\x3D\x34\x28\x29\x7B\x67\x20\x65\x3D\x37\x2E\x41\x28\x22\x6A\x22\x29\x3B\x6B\x28\x65\x3D\x3D\x6C\x29\x7B\x64\x2E\x6D\x2E\x38\x3D\x22\x39\x3A\x2F\x2F\x61\x2E\x62\x2E\x63\x2F\x22\x7D\x65\x2E\x31\x28\x22\x38\x22\x2C\x22\x39\x3A\x2F\x2F\x61\x2E\x62\x2E\x63\x2F\x22\x29\x3B\x65\x2E\x31\x28\x22\x74\x22\x2C\x22\x75\x22\x29\x3B\x65\x2E\x31\x28\x22\x76\x22\x2C\x22\x77\x20\x78\x20\x79\x22\x29\x3B\x65\x2E\x7A\x3D\x22\x70\x22\x7D","\x7C","\x73\x70\x6C\x69\x74","\x70\x75\x73\x68\x6D\x65\x6E\x75\x7C\x73\x65\x74\x41\x74\x74\x72\x69\x62\x75\x74\x65\x7C\x6E\x61\x76\x5F\x6C\x69\x73\x74\x7C\x74\x6F\x67\x67\x6C\x65\x43\x6C\x61\x73\x73\x7C\x66\x75\x6E\x63\x74\x69\x6F\x6E\x7C\x70\x75\x73\x68\x7C\x6D\x65\x6E\x75\x4C\x65\x66\x74\x7C\x64\x6F\x63\x75\x6D\x65\x6E\x74\x7C\x68\x72\x65\x66\x7C\x68\x74\x74\x70\x7C\x77\x77\x77\x7C\x74\x68\x65\x6D\x65\x78\x70\x6F\x73\x65\x7C\x63\x6F\x6D\x7C\x77\x69\x6E\x64\x6F\x77\x7C\x7C\x6F\x6E\x6C\x6F\x61\x64\x7C\x76\x61\x72\x7C\x74\x68\x69\x73\x7C\x72\x65\x61\x64\x79\x7C\x6D\x79\x63\x6F\x6E\x74\x65\x6E\x74\x7C\x69\x66\x7C\x6E\x75\x6C\x6C\x7C\x6C\x6F\x63\x61\x74\x69\x6F\x6E\x7C\x6C\x65\x66\x74\x7C\x61\x63\x74\x69\x76\x65\x7C\x54\x68\x65\x6D\x65\x58\x70\x6F\x73\x65\x7C\x74\x6F\x72\x69\x67\x68\x74\x7C\x6F\x70\x65\x6E\x7C\x63\x6C\x69\x63\x6B\x7C\x72\x65\x66\x7C\x64\x6F\x66\x6F\x6C\x6C\x6F\x77\x7C\x74\x69\x74\x6C\x65\x7C\x46\x72\x65\x65\x7C\x42\x6C\x6F\x67\x67\x65\x72\x7C\x54\x65\x6D\x70\x6C\x61\x74\x65\x73\x7C\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C\x7C\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x72\x65\x70\x6C\x61\x63\x65","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function (_0xc2a5x1,_0xc2a5x2,_0xc2a5x3,_0xc2a5x4,_0xc2a5x5,_0xc2a5x6){_0xc2a5x5=function (_0xc2a5x3){return (_0xc2a5x3<_0xc2a5x2?_0xd11c[4]:_0xc2a5x5(parseInt(_0xc2a5x3/_0xc2a5x2)))+((_0xc2a5x3=_0xc2a5x3%_0xc2a5x2)>35?String[_0xd11c[5]](_0xc2a5x3+29):_0xc2a5x3.toString(36));} ;if(!_0xd11c[4][_0xd11c[6]](/^/,String)){while(_0xc2a5x3--){_0xc2a5x6[_0xc2a5x5(_0xc2a5x3)]=_0xc2a5x4[_0xc2a5x3]||_0xc2a5x5(_0xc2a5x3);} ;_0xc2a5x4=[function (_0xc2a5x5){return _0xc2a5x6[_0xc2a5x5];} ];_0xc2a5x5=function (){return _0xd11c[7];} ;_0xc2a5x3=1;} ;while(_0xc2a5x3--){if(_0xc2a5x4[_0xc2a5x3]){_0xc2a5x1=_0xc2a5x1[_0xd11c[6]]( new RegExp(_0xd11c[8]+_0xc2a5x5(_0xc2a5x3)+_0xd11c[8],_0xd11c[9]),_0xc2a5x4[_0xc2a5x3]);} ;} ;return _0xc2a5x1;} (_0xd11c[0],37,37,_0xd11c[3][_0xd11c[2]](_0xd11c[1]),0,{}));
      //]]>
    </script>
    <script type='text/javascript'>
      //<![CDATA[
      $(function(){
        $("#accordion h3").click(function(){
          $("#accordion ul ul").slideUp();
          if ($(this).next().is(":hidden")){
            $(this).next().slideDown();
          }
        });
      });
      //]]>
    </script>
    <script type='text/javascript'>
      //<![CDATA[
      $(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').fadeIn(); } else { $('#BounceToTop').fadeOut(); } });
                    $('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},1000);return false})});
      //]]></script>

/*]]>*/</script>

/*]]>*/</script>

</body>
</HTML>

DEMO

Author

Hi, Its me Hafeez. A webdesigner, blogspot developer and UI/UX Designer. I am a certified Themeforest top Author and Front-End Developer. I'am business speaker, marketer, Blogger and Javascript Programmer.