Archive for 2016-05-29

Widged Daftar Isi

Widged Daftar Isi hasil karya blog tetangga Arlina.
Widged ini mungkin bisa mempercantikan blog yang kita miliki.
Widged Daftar Isi. Ok kita langsung saja cara memakai widged ini.

Buka Blogger  =>buka blog kita  => laman  =>laman baru => publikasikan.

<div dir="ltr" style="text-align:left;" trbidi="on">
<style scoped="" type="text/css">
.table-of-content{background-color:#fff;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.2)}
.table-of-content .toc-header{color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #ccc;transition:initial}
.table-of-content .toc-header:hover{background-color:#fdfdfd}
.table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}
.table-of-content .toc-header.active{color:#fc4f3f}
.table-of-content .toc-header.active:before{border-color:#666 transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-of-content .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}
.table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#444359!important;transition:initial}
.table-of-content a{color:#d9d9d9;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#a2a2a9;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#ffc937;text-decoration:none;transition:initial}
.post ol li:before{display:none}
</style>
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span></div>
<script>
var toc_config = {
    url: 'http://agussalikur.blogspot.com/',
    containerId: 'table-of-content',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#5c5a78;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">baru</strong>',
    sortAlphabetically: {
        thePanel: true,
        theList: true
    },
    maxResults: 9999,
    activePanel: 1,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
    slideCallback: {
        down: function() {},
        up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: '_toc',
    delayLoading: 0
};
</script>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-tea.js"></script>
</div>


Simpan. gampangkan. Selamat mencoba gays.

Menu Navigasi Atas

Menu Navigasi Atas
Hai jumpa lagi dengan Agussalikur, ada yang baru lagi Sobat. Tips blog ini namanya Menu Navigasi Atas untuk blog sobat. Tutorial ini didapat dari blog tetangga, yang mungkin berguna untuk blog anda. Yuk ikuti tips aku :

Cara membuat Menu Navigasi Atas:
1.Anda harus punya blog dahulu.
2.Masuk ke Blogger.
3.Cari Template lalu Edit.
4.Cari kata ]]></skin> saran agar pencarian cepat menggunakan Ctrl+F.
5.Letakkan CSS dibawah ini sebelum ]]></skin>

CSS
/* CSS Top Navigation */
.top-menunavisal {display:block;margin:0 auto;float:left;padding:0;width:100%;max-width:1000px;background:transparent;

border:none;}

.top-menunavisal ul {width:100%;padding:0;margin:0 auto;text-align:left;}

.top-menunavisal li {list-style-type:none;float:left;padding:0;margin:0;}

.top-menunavisal li a{position:relative;font-family:&#39;Open Sans&#39;;font-size:14px;font-weight:400;background-color:transparent;color:#768187;display:block;margin:0;padding:20px 15px;line-height:100%;transition:color .3s}

.top-menunavisal ul li a:active, .top-menunavisal ul li.highlight a {line-height:100%;text-decoration:none;}

.top-menunavisal ul li a:hover {background:#111211;border-bottom: 1px solid #C6EB04;color: #C6EB04;

    text-shadow: 0px 0px 10px #C6EB04, 0px 0px 20px #C6EB04, 0px 0px 30px #C6EB04;text-decoration:none;}

.top-menunavisal a#pull {display:none;}

.top-menunavisal li.armember,.top-menunavisal li.armember2,.top-menunavisal li.codepen,.top-menunavisal li.soundcloud,

.top-menunavisal li.arjoin,.top-menunavisal li.armember3{text-align:center;color:#768187;float:right;}

.top-menunavisal li a.armember:hover,.top-menunavisal li a.armember2:hover,.top-menunavisal li a.codepen:hover,

.top-menunavisal li a.soundcloud:hover,.top-menunavisal li a.arjoin:hover{color:#888;}

.top-menunavisal li i{font-weight:normal;color:#333;transition:color .3s;}

.top-menunavisal ul li:hover i{color:#888;}

.top-menunavisal li.armember3{position:relative;transition:all .3s;}

li.armember3:after{position:absolute;content:&#39;1&#39;;right:2px;top:7px;background:#51b1eb;color:#fff;padding:0;width:18px;height:18px;line-height:18px;border:2px solid #fff;border-radius:4px;font-size:80%;transform:scale(1.0);transition:all .3s ease;}

.top-menunavisal ul li.armember3:hover:after{transform:scale(0.9)}

.top-menunavisal li.infoazzahra{border:0;}

.top-menunavisal li.infoazzahra a{background:#ff675c;color:#C6EB04;display:block;margin:16px 0;padding:4px 8px;border-radius:3px;font-size:90%;font-weight:700;transition:background-color .3s}

.top-menunavisal li.infoazzahra a:hover{background:#e4554b;color:#fff;}

Untuk HTML nya ini 

HTML

<nav class='top-menunavisal'>

<ul style=''>

<li><a href='/p/tentang-agussalikur.html' title='About Us'><i class='fa fa-user'/> About</a></li>

<li><a href='/p/sitemap.html' title='Our Sitemap'><i class='fa fa-globe'/> Sitemap</a></li>

<li><a href='/p/contact.html' title='Contact us'><i class='fa fa-phone'/> Contact</a></li>

<li><a href='/p/privacy-policy.html' title='Privacy'><i class='fa fa-check-lock'/> Privacy</a></li>

<li><a href='/p/pasang-iklan.html' title='Pasang Iklan'><i class='fa fa-credit-card'/> Pasang Iklan</a></li>

<li class='armember2'><a class='agussalikur-tooltip agussalikur-tooltip-left' data-agussalikur-tooltip='Off Topic' href='http://agussalikur.blogspot.com/2014/08/off-topic.html' target='_blank'><i class='fa fa-coffee'/><span class='inv'/></a></li>

</ul>

<a href='https://agussalikur.blogspot.co.id' id='pull'>MENU</a>

</nav>

Untuk Menunya bekerja sempurna ini Scriptnya 

SCRIPT
// Menu Top
$(document).ready(function(){var str=location.href.toLowerCase();$('.top-menunavisal ul li a').each(function(){if(str.indexOf(this.href.toLowerCase())>-1){$("li.highlight").removeClass("highlight");$(this).parent().addClass("highlight")}})})
$(function(){var pull=$('#pull');menu=$('.top-menunavisal ul');menuHeight=menu.height();$(pull).on('click',function(e){e.preventDefault();menu.slideToggle()});$(window).resize(function(){var w=$(window).width();if(w>320&&menu.is(':hidden')){menu.removeAttr('style')}})});

Footer

<style>
/* CSS Footer Wrapper */
#footer-wrapper{-moz-animation:footer 4s;-webkit-animation:footer 4s;}
@-webkit-keyframes footer{from{-webkit-transform:translate(0px,1000px);opacity:0}to{-webkit-transform:translate(0px,0px);opacity:1}}
@-moz-keyframes footer{from{-moz-transform:translate(0px,1000px);opacity:0}to{-moz-transform:translate(0px,0px);opacity:1}}
#footer-wrapper{text-align:center;background:#111211;color:#555;padding:20px 20px 0 20px;margin:0 auto}
#footer-last2{color:#555;background:#000;position:relative;display:block;margin:0 auto;padding:20px 20px 15px 20px}
#footer-last2 .maxwrap {position:relative;}
.ascredit{display:block;position:relative;padding:0 0 5px 0;font-size:13px}
.ascredit a {color:rgba(255,255,255,.4);}
.ascredit a:hover {color:rgba(255,255,255,1);}
#footer-last ul:after{content:&quot;.&quot;;visibility:hidden;display:block;height:0;clear:both}
.footer-column{position:relative;margin:20px auto;clear:both;font-size:14px;line-height:24px;overflow:hidden;text-align:left;max-width:920px;}
.footer-column h3{position:relative;margin:0 0 10px 0;font-size:16px;padding:0 0 10px 0;border-bottom:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.9);}
.footer-column h3:after{content:&#39;&#39;;position:absolute;bottom:-2px;left:0;right:0;background:rgba(255,255,255,.3);width:14%;height:2px}
.footer-column h2:before,.footer-column h3:before{font-family:FontAwesome;content:&#39;\f036&#39;;color:inherit;margin:0 8px 0 0;font-size:inherit;font-weight:normal}
.footer-column .footer-menu:nth-child(1) h2:before,.footer-column .footer-menu:nth-child(1) h3:before{content:&#39;\f007&#39;}
.footer-column .footer-menu:nth-child(2) h2:before,.footer-column .footer-menu:nth-child(2) h3:before{content:&#39;\f085&#39;}
.footer-column .footer-menu:nth-child(3) h2:before,.footer-column .footer-menu:nth-child(3) h3:before{content:&#39;\f003&#39;}
.footer-menu{float:left;width:31%;margin:0 20px 20px 0}
.footer-menu ul{margin:0}
.footer-menu ul li a{color:rgba(255,255,255,.4)}
.footer-menu ul li a:hover{color:rgba(255,255,255,1)}
/* Subscribe Footer */
#subscribe-footer{overflow:hidden;margin:0 0 20px 0;width:33.4%}
#subscribe-footer p{margin:1em 0}
#subscribe-footer .emailfooter{margin:auto;text-align:center;}
#subscribe-footer .emailfooter form{margin:0;padding:0;float:left}
#subscribe-footer .emailfooter input{background:rgba(0,0,0,.1);padding:12px;color:rgba(255,255,255,.4);font-size:14px;margin-bottom:10px;border:0;transition:all .3s}
#subscribe-footer .emailfooter input:focus{color:rgba(255,255,255,15);outline:none;}
#subscribe-footer .emailfooter .submitfooter{background:rgba(255,255,255,.11);color:#fff;margin:0 0 0 5px;font-size:14px;cursor:pointer;padding:9px;border:0;border-radius:3px;transition:all .3s}
#subscribe-footer .emailfooter .submitfooter:active,#subscribe-footer .emailfooter .submitfooter:hover{background-color:rgba(255,255,255,.18);color:#fff;}
</style>
<footer id='footer-wrapper' itemscope='itemscope' itemtype='https://schema.org/WPFooter'>
<div id='footer-last'>
<div class='footer-column'>
<div class='footer-menu'>
<h3>Info agussalikur</h3>
<ul class='footer2 line'>
<li><a href='/p/about-agussalikur.html' title='About us'>About</a></li>
<li><a href='/p/disclaimer.html' title='Disclaimer'>Disclaimer</a></li>
<li><a href='/p/privacy-policy.html' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='/p/daftar-isi-agussalikur.html' title='Daftar Isi Blog'>Sitemap</a></li>
</ul>
</div>
<div class='footer-menu'>
<h3>Peralatan</h3>
<ul class='footer2 line'>
<li><a href='/p/css-minifier.html' title='CSS Minifier'>CSS Minifier</a></li>
<li><a href='/p/flat-ui-color.html' title='Kode Warna Flat UI'>Flat UI</a></li>
<li><a href='/p/parse-code-agussalikur.html' title='HTML Converter'>HTML Converter</a></li>
<li><a href='/p/terms-of-service.html' title='Terms of Service'>Terms of Service</a></li>
</ul>
</div>
<div class='footer-menu' id='subscribe-footer'>
<h3>Berlangganan</h3>
<p>Subscribe here to receive new updates</p>
<div class='emailfooter'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=agussalikur beb&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email address&quot;;}' onfocus='if (this.value == &quot;Email address&quot;) {this.value = &quot;&quot;;}' type='text' value='Email address'/>
  <input name='uri' type='hidden' value='ayang beb'/>
  <input name='loc' type='hidden' value='en_US'/>
  <input class='submitfooter' type='submit' value='Submit'/>
</form>
</div>
</div>
</div>
  </div>
<div class='footer-last2' id='footer-last2'>
<div class='maxwrap'>
<div class='ascredit'>
Copyright &#169; <span id='current-year'>2016</span>
<a href='https://agussalikur.blogspot.com/' itemprop='creator' itemscope='itemscope' itemtype='http://schema.org/Person'><span itemprop='name'>agussalikur</span></a> All Right Reserved
</div>
<!-- Do not edit or remove credits without our permission : www.arlinadzgn.com -->
<div class='ascredit'>
Template by <a class='agussalikur' href='//www.arlinadzgn.com/' target='_blank' title='Arlina Design'>Arlina Design</a>
</div>
<!-- Do not edit or remove credits without our permission : www.arlinadzgn.com -->
<div class='contact-trigger'><i class='fa fa-envelope-o'/> Contact</div>
</div>
  </div>
  </footer>

Menu Navigasi atas

Tips blog.
Membuat Menu Navigasi atas
 
HTML
<div class="top-wrapper">
<header class="header-wrapper2">
<div class="top-wrapper">
<nav class="top-menunavi">
<ul>
<li><a href="https://agussalikur.blogspot.com/p/about-us.html" title="About Us"><i class="fa fa-user"></i> About</a></li>
<li><a href="https://agussalikur.blogspot.com/p/sitemap.html" title="Our Sitemap"><i class="fa fa-globe"></i> Sitemap</a></li>
<li><a href="https://agussalikur.blogspot.com/p/contact.html" title="Contact us"><i class="fa fa-phone"></i> Contact</a></li>
<li><a href="https://agussalikur.blogspot.com/p/privacy-policy.html" title="Privacy"><i class="fa fa-lock"></i> Privacy</a></li>
<li><a href="/p/pasang-iklan.html" title="Pasang Iklan"><i class="fa fa-credit-card"></i> Pasang Iklan</a></li>
<li class="armember3"><a class="salikur-tooltip salikur-tooltip-left" data-salikur-tooltip="Pesan Salikur" href="https://agussalikur.blogspot.com/2016/04/masjid-nabawi.html#Masjid Nabawi" target="_blank">
<i class="fa fa-bell"></i><span class="inv"></span></a></li>
<li class="soundcloud"><a class="salikur-tooltip salikur-tooltip-left" data-salikur-tooltip="Follow us on Soundcloud" href="https://soundcloud.com/salikur" rel="nofollow" target="_blank"><i class="fa fa-soundcloud"></i><span class="inv"></span></a></li>
<li class="codepen"><a class="salikur-tooltip salikur-tooltip-left" data-salikur-tooltip="Follow us on Codepen" href="https://codepen.io/agussalikur" rel="nofollow" target="_blank"><i class="fa fa-codepen"></i><span class="inv"></span></a></li>
<li class="armember"><a class="salikur-tooltip salikur-tooltip-left" data-salikur-tooltip="Member" href="/p/member.html" target="_blank"><i class="fa fa-user"></i><span class="inv"></span></a></li>
<li class="sorting-06 arjoin"><a class="salikur-tooltip salikur-tooltip-left" data-salikur-tooltip="Join this site" href="https://www.blogger.com/follow-blog.g?blogID=8217514161399660522" rel="nofollow" target="_blank"><i class="fa fa-sign-in"></i><span class="inv"></span></a></li>
<li class="infosalikur"><a class="popup-link" href="#popup">Info</a></li>
<li class="searchbutton" title="Quick Search"></li>
<li class="armember2"><a class="salikur-tooltip salikur-tooltip-left" data-salikur-tooltip="Off Topic" href="https://agussalikur.blogspot.com/2014/08/off-topic.html" target="_blank"><i class="fa fa-coffee"></i><span class="inv"></span></a></li>
</ul>
<a href="#" id="pull">MENU</a>
</nav>
</div>
</header>
</div>

CSS
/* CSS Top Menu Wrapper */
.salikurtop-wrapper {-webkit-animation:top-wrapper 4s;-moz-animation:top-wrapper 4s;}
@-webkit-keyframes top-wrapper{from{-webkit-transform:translate(-1000px,0px);opacity:0}to{-webkit-transform:translate(0px,0px);opacity:1}}
@-moz-keyframes top-wrapper{from{-moz-transform:translate(-1000px,0px);opacity:0}to{-moz-transform:translate(0px,0px);opacity:1}}
.salikurtop-wrapper{width:100%;max-width:1000px;background:#111211;z-index:99;position:fixed;
overflow:hidden;margin:auto;border-bottom:1px solid #202020;-webkit-transform:translateZ(0)}
.astop-wrapper {padding:0;position:static;max-width:1000px;margin:0 auto;}
.header-wrapper2 {margin:0 auto;padding:0}

/* CSS Top Navigation */
.top-menunavi {display:block;margin:0 auto;float:left;padding:0;width:100%;background:transparent;border:none;}
.top-menunavi ul {width:100%;padding:0;margin:0;text-align:left;}
.top-menunavi li {list-style-type:none;float:left;padding:0;margin:0;}
.top-menunavi li a{position:relative;font-family:'Open Sans';font-size:14px;font-weight:400;background-color:transparent;color:#333;display:block;margin:0;padding:20px 15px;line-height:100%;transition:color .3s}
.top-menunavi ul li a:active, .top-menunavi ul li.highlight a {line-height:100%;text-decoration:none;background:#000;color:#C6EB04;text-shadow: 0px 0px 10px #C6EB04, 0px 0px 20px #C6EB04, 0px 0px 30px #C6EB04;}
.top-menunavi ul li a:hover {color:#fff;text-decoration:none;}
.top-menunavi a#pull {display:none;}
.top-menunavi li.facebook,.top-menunavi li.armember,.top-menunavi li.armember2,.top-menunavi li.codepen,.top-menunavi li.googleplus,.top-menunavi li.soundcloud,.top-menunavi li.arjoin,.top-menunavi li.armember3{text-align:center;color:#333;float:right;}
.top-menunavi li a.facebook:hover,.top-menunavi li a.armember:hover,.top-menunavi li a.armember2:hover,.top-menunavi li a.codepen:hover,.top-menunavi li a.googleplus:hover,.top-menunavi li a.soundcloud:hover,.top-menunavi li a.arjoin:hover{color:#333;}
.top-menunavi li i{font-weight:normal;color:#333;transition:color .3s;}
.top-menunavi ul li:hover i{color:#fff;}
.top-menunavi li.armember3{position:relative;transition:all .3s;}
li.armember3:after{position:absolute;content:'1';right:2px;top:7px;background:#51b1eb;color:#fff;padding:0;width:18px;height:18px;line-height:18px;border:1px solid #202020;border-radius:4px;font-size:80%;transform:scale(1.0);transition:all .3s ease;}
.top-menunavi ul li.armember3:hover:after{transform:scale(0.9)}
.top-menunavi li.infosalikur{border:0;}
.top-menunavi li.infosalikur a{background:#111211;color:#333;display:block;margin:16px 0;padding:4px 8px;border-radius:3px;font-size:90%;font-weight:700;transition:background-color .3s}
.top-menunavi li.infosalikur a:hover{background:#000;color:#C6EB04;text-shadow: 0px 0px 10px #C6EB04;}
/* CSS Custom Search */
.top-menunavi li.searchbutton{margin:0;display:inline-block;cursor:pointer;float:right;padding:20px 15px}
.top-menunavi li.searchbutton.active {background:#111211;color:#333;}
.top-menunavi li.searchbutton:after{content:"\f002";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;position:relative}
input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration{display:none}
.salikur-search{position:fixed;overflow:auto;top:10%;left:20%;right:20%;bottom:10%;max-width:720px;margin:auto;background:rgba(255,255,255,1);color:rgba(0,0,0,.6);box-shadow:0 2px 7px rgba(0,0,0,.2);opacity:0;visibility:hidden;transform:scale(1.1);-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;z-index:1003;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s,visibility .3s}
.salikur-search.active{opacity:1;visibility:visible;margin:auto;transform:scale(1.0);}
.salikur-search .fixedinput{background:#f9f9f9;margin:0 auto 15px;padding:10px 0;border-bottom:1px solid #e9e9e9;}
.salikur-search .searchmein{width:90%;margin:auto;padding:10px 0;outline:none;display:block}
#search .input{background:rgba(255,255,255,1);width:80%;height:40px;margin:20px auto;padding:0 0 0 20px;max-width:1000px;border:1px solid #e9e9e9;border-radius:3px;transition:all .3s ease-out}
#search .input:active,#search .input:hover{background:rgba(255,255,255,1);border-color:#d9d9d9}
#search .input .search{float:left;width:calc(100% - 140px);height:40px;padding:0;margin:0;border:0;outline:0;background:none;font-size:16px;color:rgba(0,0,0,.4);line-height:40px;letter-spacing:1px;transition:all .3s ease-out}
#search .input .submit{display:inline-block;float:right;cursor:pointer;width:14%;height:40.5px;padding:0;margin:0;border:0;outline:0;background:#ff675c;font-size:16px;color:rgba(255,255,255,1);text-align:center;line-height:40.5px;border-radius:0 3px 3px 0;transition:all .3s ease-out}
#search .input .search:focus,#search .input .search:active, #search .input .search:hover {color:rgba(0,0,0,.8);}
#search .input .submit:focus,#search .input .submit:hover {background:#e4554b;color:rgba(255,255,255,1);}
#search #close{cursor:pointer;position:absolute;top:10px;right:10px;width:32px;height:32px;padding:0;margin:0;border:0;outline:0;border-radius:5px;font-weight:normal;font-family:fontawesome;background:transparent;color:rgba(0,0,0,.3);text-align:center;line-height:32px;transition:all .3s}
#search #close:hover {color:rgba(0,0,0,.6);}
.search-content{z-index:6;display:none;position:relative}
.salikur-search .search:focus {outline:none;}
.search-result{padding:20px;width:90%;margin:0 auto 15px}
.search-result .search-item{overflow:auto;padding:15px;border-bottom:1px solid #eee;}
.search-result .search-item:last-child{border-bottom:0}
.search-item img{width:60px;height:60px;float:left;border-radius:3px;background:#fdfdfd}
.search-item a{width:calc(100% - 80px);float:right;display:block;color:#333;text-decoration:none}
.search-item a:hover,.search-item:hover a{color:#ff675c;}
.query-result{display:none;cursor:pointer;background:#111211;color:#e4554b;padding:12px;margin:20px auto 40px;text-align:center;text-transform:uppercase;border-radius:5px;line-height:normal;font-size:85%;letter-spacing:1px;max-width:90px;border:1px solid #ff675c;transition:all .3s ease-out}
.query-result:hover{background:#ff675c;color:#fff;border-color:transparent}
.query-result a{text-decoration:none;color:#e4554b;}
.query-result:hover a,.query-result a:hover{color:#fff;}
.queryword{font-weight:700}

/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#222;overflow:hidden;border-top:4px solid #eee;}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#333;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#ff675c;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s}
.subscribe-css-email-button:hover{background:#ea5a50;}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
#subscribe-css p.subscribe-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%;}

/* About Us */
.boxwainner{z-index:99;width:600px;height:575px;position:absolute;left:50%;margin-left:-310px;top:70px}
.contentboxwa{position:absolute;background-color:#0e0e0e;top:30px;right:0;left:0;bottom:0;box-shadow:0 1px 5px rgba(0,0,0,.1)}
headbanger{background:#000;height:70px;width:100%;position:inherit}
#textlogo{background:rgba(0,0,0,0.1);color:#555;line-height:70px;text-align:center;font-size:200%;position:inherit;width:62.5%;box-sizing:initial}
#left{background:#111211;color:#666;top:70px;bottom:0;right:0;padding:20px 0 0 0;width:200px;position:inherit}
#left a{color:#888;transition:initial;}#left a:hover{color:#fff;}
#left i {margin:0 10px 0 0}
.taber1,.taber2,.taber3,.taber4,.taber5,.taber6,.taber7{cursor:pointer;padding:15px;color:#888;}
.taber1:hover{background:#ff6733;color:#fff}.taber2:hover{background:#e74c3c;color:#fff}.taber3:hover{background:#2980b9;color:#fff}.taber4:hover{background:#27C9E9;color:#fff}.taber5:hover{background:#3ca9d0;color:#fff}
.taber6:hover{background:#383838;color:#fff}.taber7:hover{background:#f39c12;color:#fff}
#left .taber1:hover a,#left .taber2:hover a,#left .taber3:hover a,#left .taber4:hover a,#left .taber5:hover a,#left .taber6:hover a,#left .taber7:hover a{color:#fff}
#aboutus{background:#0e0e0e;width:62.2%;padding:20px 20px 40px 20px;color:#555;text-align:left;position:inherit;float:left;line-height:normal}
#aboutus img{margin:10px auto 0 auto;display:table;border-radius:100%;max-width:140px;box-shadow:0 0 0 5px rgba(0,0,0,.03)}
.scrollbarbox{overflow:hidden;text-align:justify;margin:55px 0 0 0}
.scrollbarbox .innerone{height:480px;overflow:auto}
#popup{display:none;opacity:0;visibility:hidden;transform:scale(1.1);-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;z-index:1003;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s,visibility .3s}
#popup:target{display:block;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999;opacity:1;visibility:visible;margin:auto;transform:scale(1.0);}
.popup-container{position:relative;margin:0 auto;padding:20px}
a.popup-close{position:absolute;border-radius:50px;right:20px;line-height:50px;margin:0 auto;font-size:16px;text-decoration:none;color:rgba(242, 242, 242);font-family:fontawesome}
a.popup-close:hover{color:rgba(57, 230, 0);}
.totalposts{margin:auto;display:table;text-align:center}
.totalposts .totalnumber{display:inline;font-weight:700;font-size:300%;color:#aaa}
.totalposts .totallabel{display:block;color:#aaa;font-weight:700}

Script
<script type="text/javascript">
// Menu Top
$(document).ready(function(){var str=location.href.toLowerCase();$('.top-menunavi ul li a').each(function(){if(str.indexOf(this.href.toLowerCase())>-1){$("li.highlight").removeClass("highlight");$(this).parent().addClass("highlight")}})})
$(function(){var pull=$('#pull');menu=$('.top-menunavi ul');menuHeight=menu.height();$(pull).on('click',function(e){e.preventDefault();menu.slideToggle()});$(window).resize(function(){var w=$(window).width();if(w>320&&menu.is(':hidden')){menu.removeAttr('style')}})});
</script>