Cara Membuat SideMenu Navigation Fansub

April 04, 2015

Hai Minna-san ! >.<
Admin Terkece balik lagi membagikan Tutorial yang Paling Dinanti-nantikan :v #ngarep
Mimin Mau nanya nih :3
Apa ini Tutorial yang Ingin kalian Cari ?
Sekarang Tidak Usah khawatir lagi xD
Nyari - nyari di Blog lain
Mimin Terkece ini , bakal Memberikan Tutorial Berikut :v
Langsung Saja Tutorial Kali ini adalah
Cara Membuat SideMenu Navigation Fansub
Silahkan Liat DEMO Dibawah


Langsung saja ya, ikuti Cara Dibawah x3

Seperti Biasa, Silahkan Letakkan CSS ya diatas </style> / </b:skin>
 /* --- RESPONSIVE --- */
@media only screen and (min-width:1024px){
#cssmenu {display: none;}
}
@media only screen and (max-width:1023px){
#nav{display: none;}
.footer-chara {opacity: 0;}
.main-menu{display:none;}
#cssmenu {display: block;}
#outer-wrapper .isiwrap,#outer-wrapper .innernav,#nav.scrollq .innernav{width:90%;}
#main-wrapper,#sidebar-wrapper,#footer-wrapper .col4{width:100%;float:none;}
#top-head{display:none;}
.rcbytag.g1 .recntright .mCSB_container .rcpbtag,#sidebar-wrapper .rcbytag.g1 .recntright .mCSB_container .rcpbtag{width:87px;height:87px;}
.rcbytag.g1 .recntright .mCSB_container.mCS_no_scrollbar .rcpbtag,#sidebar-wrapper .rcbytag.g1 .recntright .mCSB_container.mCS_no_scrollbar .rcpbtag{width:90px;height:90px;}
.rcbytag.g1 .recntright ul,#sidebar-wrapper .rcbytag.g1 .recntright ul{height:324px;}
.rcbytag.g2 .rcpbtag,.rcbytag.g2 .recntright .rcpbtag,#sidebar-wrapper .rcbytag.g2 .rcpbtag,#sidebar-wrapper .rcbytag.g2 .recntright .rcpbtag{width:92px;height:92px;}
}
@media only screen and (max-width:600px){
#outer-wrapper .isiwrap,#outer-wrapper .innernav,#nav.scrollq .innernav{width:95%;}
.featuredpost .featinfo{top:auto;width:auto;right:15px;left:15px;bottom:30px;}
.rcbytag.g1 .recntright .mCSB_container .rcpbtag,#sidebar-wrapper .rcbytag.g1 .recntright .mCSB_container .rcpbtag{width:68px;height:68px;}
.rcbytag.g1 .recntright .mCSB_container.mCS_no_scrollbar .rcpbtag,#sidebar-wrapper .rcbytag.g1 .recntright .mCSB_container.mCS_no_scrollbar .rcpbtag{width:71px;height:71px;}
.rcbytag.g1 .recntright ul,#sidebar-wrapper .rcbytag.g1 .recntright ul{height:258px;}
.rcbytag.g2 .rcpbtag,.rcbytag.g2 .recntright .rcpbtag,#sidebar-wrapper .rcbytag.g2 .rcpbtag,#sidebar-wrapper .rcbytag.g2 .recntright .rcpbtag{width:73px;height:73px;}
.camera_caption p,.camera_caption .info{display:none;}
.camera_caption h4{margin-right:10px;}
.separator a{float:none!important;margin:0 auto 15px!important;}
table.tr-caption-container{float:none!important;margin:0 auto 10px!important;padding:0;}
.largeshow{display:none;}
.largehide{display:block;}
#icon-socialmn{position:absolute;right:5px;top:32px;z-index:2;background-color:#dd00dd;}
.tombolsocial{display:block;cursor:pointer;}
}
@media only screen and (max-width:329px){
#outer-wrapper .isiwrap,#outer-wrapper .innernav,#nav.scrollq .innernav{width:95%;}
.featuredpost p{display:none;}
}
@media print{
#topnav,#top-head,#nav,#newsticker,#sidebar-wrapper,.post-footer .shareAddthis,#blog-pager-item,#related_posts,.comments,#footer-wrapper,.post-header.meta,a#top{display:none;}
#main-wrapper,#header{float:none;width:100%;}
#header{max-width:none;}
.item .post,.static_page .post{border:0;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;}
}
.TengahTabel {
margin-left:auto;
margin-right:auto;
}
table[border="1"] {border-collapse:collapse;font:normal normal 11px Arial,Sans-Serif;color:#ccc;-webkit-box-shadow:0 1px 3px black;-moz-box-shadow:0 1px 3px black;box-shadow:0 1px 3px black;}
table[border="1"] caption {font:normal normal 11px Arial,Sans-Serif;color:#fff;background-color:#333;}
table[border="1"] tr {background-color:#222;}
table[border="1"] th, table[border="1"] td {vertical-align:top;padding:5px 10px;border:1px solid #3c3c3c;}
table[border="1"] td:nth-child(even) {background-color:#1c1c1c;}
table[border="1"] th {background-color:#555;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#666',endColorstr='#555');background-image:-webkit-gradient(linear,left top,left bottom,from(#666),to(#555));background-image:-webkit-linear-gradient(top,#666,#555);background-image:-moz-linear-gradient(top,#666,#555);background-image:-ms-linear-gradient(top,#666,#555);background-image:-o-linear-gradient(top,#666,#555);background-image:linear-gradient(top,#666,#555);color:black;font-size:12px;text-shadow:0 1px 0 rgba(255,255,255,.4);font-weight:bold;}
a.menukedua {
font-size: 14px;
text-align: left;
}
.menu-icons {background: url(http://s5.postimg.org/apmoltm03/Sidebar_Icon.png) top center no-repeat; background-size: 70% 80%; padding: 5px; height: 40px; width: 40px; float: left; position: absolute; top: 0; left: 0; margin-left: 5px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
.main-menu:hover > .menu-icons {opacity: 0; margin-left: -50px;}
#time div
{
font-size:70px;
color:white;
float:left;
margin-left:2px;
-o-transition:.2s;
-ms-transition:.2s;
-moz-transition:.2s;
-webkit-transition:.2s;
transition:.2s;
}
#time{
margin-left:30%;
position: absolute;
right: 30px;
text-align: right;
z-index: 999994;
font-family: 'Fira Mono';
margin-bottom: -100px;
bottom: 0;
}
#kotak {
border: 3px solid RGBA(255,255,255,0.6);
width: 200px;
height: 200px;
border-radius: 15px;
position: absolute;
z-index: 999992;
bottom: 0;
right: 0;
margin-right: -20px;
margin-bottom: -60px;
-webkit-animation: putar1 20s infinite linear;
-moz-animation: putar1 20s infinite linear;
-o-animation: putar1 20s infinite linear;
}
@-webkit-keyframes putar1 {
from { -webkit-transform: rotate(4deg) scale(0.971) skew(1deg) translate(0px); }
to { -webkit-transform: rotate(360deg) scale(0.971) skew(1deg) translate(0px); }
}
@-moz-keyframes putar1 {
from { -moz-transform: rotate(4deg) scale(0.971) skew(1deg) translate(0px); }
to { -moz-transform: rotate(360deg) scale(0.971) skew(1deg) translate(0px); }
}
@-o-keyframes putar1 {
from { -o-transform: rotate(4deg) scale(0.971) skew(1deg) translate(0px); }
to { -o-transform: rotate(360deg) scale(0.971) skew(1deg) translate(0px); }
}
#kotak2 {
border: 3px solid RGBA(255,255,255,0.6);
width: 300px;
height: 300px;
border-radius: 15px;
position: absolute;
bottom: 0;
z-index: 999992;
right: 0;
margin-right: -60px;
margin-bottom: -100px;
-webkit-animation: putar2 30s infinite linear;
-moz-animation: putar2 30s infinite linear;
-o-animation: putar2 30s infinite linear;
}
@-webkit-keyframes putar2 {
from { -webkit-transform: rotate(0deg) scale(0.971) skew(1deg) translate(0px); }
to { -webkit-transform: rotate(-360deg) scale(0.971) skew(1deg) translate(0px); }
}
@-moz-keyframes putar2 {
from { -moz-transform: rotate(0deg) scale(0.971) skew(1deg) translate(0px); }
to { -moz-transform: rotate(-360deg) scale(0.971) skew(1deg) translate(0px); }
}
@-o-keyframes putar2 {
from { -o-transform: rotate(0deg) scale(0.971) skew(1deg) translate(0px); }
to { -o-transform: rotate(-360deg) scale(0.971) skew(1deg) translate(0px); }
}
#kotak3 {
border: 3px solid RGBA(255,255,255,0.6);
width: 170px;
height: 170px;
border-radius: 15px;
position: absolute;
z-index: 999992;
bottom: 0;
right: 0;
margin-right: -90px;
margin-bottom: -100px;
-webkit-animation: putar3 30s infinite linear;
-moz-animation: putar3 30s infinite linear;
-o-animation: putar3 30s infinite linear;
}
@-webkit-keyframes putar3 {
from { -webkit-transform: rotate(0deg) scale(0.971) skew(1deg) translate(0px); }
to { -webkit-transform: rotate(-360deg) scale(0.971) skew(1deg) translate(0px); }
}
@-moz-keyframes putar3 {
from { -moz-transform: rotate(0deg) scale(0.971) skew(1deg) translate(0px); }
to { -moz-transform: rotate(-360deg) scale(0.971) skew(1deg) translate(0px); }
}
@-o-keyframes putar3 {
from { -o-transform: rotate(0deg) scale(0.971) skew(1deg) translate(0px); }
to { -o-transform: rotate(-360deg) scale(0.971) skew(1deg) translate(0px); }
}
.sidebarmaskot {
position: absolute;
bottom: 0;
right: 0;
width: 433px;
height: 600px;
margin-right: -70px;
margin-bottom: -25px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhER10LDPfpdwOOQUcdQTxF17qslN4_ShamhApM-2gj7dC4jjF4L35JwCmEhWVApHqiB_Nj4oYGAD69HfBBNS3LCqbTgt4HwL-jZIMHd0xIs1iqV7s44UvBfOTyRuf0Ix2DD21ZONwZD7D-/s1600/maskotmoe.png') top center no-repeat;
z-index: 999991;
}
.settings {
height:100px;
float:left;
background:url(http://s5.postimg.org/rxjkg5eav/logo10.jpg);
background-repeat:no-repeat;
width:250px;
margin:0px;
text-align: center;
font-size:20px;
font-family: 'Strait', sans-serif;
}
.title-menuside {pointer-events: none; float: left; width: 100%; height: 100%; background: #f7f7f7; position: absolute; left: 0; margin-top: 100px; z-index: 1;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
.main-menu:hover > .title-menuside {opacity: 0}
#close-sidebar {pointer-events: none; background: RGBA(0,0,0,0.7); opacity: 0; width: 100%; height: 100vh; position: fixed; top:0; left: 0; float: left; z-index: 999990;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
.main-menu:hover + #close-sidebar {opacity: 1}
/* ScrolBar  */
.scrollbar {
height: 90%;
width: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
.scrollbar:hover {
height: 90%;
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
/* Scrollbar Style */
#style-1::-webkit-scrollbar-track {
border-radius: 2px;
}
#style-1::-webkit-scrollbar {
width: 5px;
background-color: #F7F7F7;
}
#style-1::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #BFBFBF;
}
/* Scrollbar End */
.fa-lg {
font-size: 1em;
}
.fa {
position: relative;
display: table-cell;
width: 55px;
height: 36px;
text-align: center;
top:12px;
font-size:20px;
}
.main-menu:hover, nav.main-menu.expanded {
width:250px;
overflow:hidden;
opacity:1;
}
.main-menu {
background:#F7F7F7;
position:fixed;
top:0;
bottom:0;
height:100%;
left:0;
width:50px;
overflow:hidden;
-webkit-transition:width .2s cubic-bezier(0,.73,.34,.97);
transition:width .2s cubic-bezier(0,.73,.34,.97);
-webkit-transform:translateZ(0) scale(1,1);
box-shadow: 1px 0 15px rgba(0, 0, 0, 0.07);
opacity:1;
z-index:999999;
}
.main-menu>ul {
margin:7px 0;
}
.main-menu li {
position:relative;
display:block;
width:250px;
text-align: left;
}
.main-menu li>a {
position:relative;
width:255px;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#8a8a8a;
font-size: 13px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .14s linear;
transition:all .14s linear;
font-family: 'Strait', sans-serif;
border-top:none;
text-shadow: 1px 1px 1px  #fff;
}
  .main-menu li>a:hover {background:#FFAAD4;color:#fff;transition:all .0s ease-in-out;}
.main-menu .nav-icon {
position:relative;
display:table-cell;
width:55px;
height:36px;
text-align:center;
vertical-align:middle;
font-size:18px;
}
.main-menu .nav-text  {
position:relative;
display:table-cell;
vertical-align:middle;
width:190px;
font-family: 'Titillium Web', sans-serif;
}
.main-menu .fb-like {
left: 180px;
position:absolute;
top: 15px;
}
.main-menu>ul.logout {
position:absolute;
left:0;
bottom:0;
}
.no-touch .scrollable.hover {
overflow-y:hidden;
}
.no-touch .scrollable.hover:hover {
overflow-y:auto;
overflow:visible;
}
/* Logo Hover Property */
a:hover,a:focus {
text-decoration:none;
border-left:0px solid #F7F7F7;
}
nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
nav ul,nav li {
outline:0;
margin:0;
padding:0;
}
/* Darker element side menu Start*/
.darkerli {
background-color:#ededed;
text-transform:capitalize;

.darkerlishadow {
text-transform:capitalize;
-webkit-box-shadow: inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
-moz-box-shadow:    inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
box-shadow:         inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
}
.darkerlishadowdown {
background-color:#ededed;
text-transform:capitalize;
-webkit-box-shadow: inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
-moz-box-shadow:    inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
box-shadow:         inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
}
/* Darker element side menu End*/
.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
color:#fff;
background-color:#00bbbb;
text-shadow: 0px 0px 0px;
}
.area {
float: left;
background: #e2e2e2;
width: 100%;
height: 100%;
}

Panjang Banget Min? :v
Emang iya Kamprett , Makanya Gua agak Males  Ngeditnya sebenarnya :v
Setelah itu, Letakkan HTMLnya dibawah <div id='outer-wrapper'> / <div id='outer-wrap'> / <div class='outer-wrapper'> / <div class='outer-wrap'> :v [ Karna Setiap Template Berbeda - beda ]

 <!-- Konten Sidebar -->
<nav class='main-menu'>
<div>
<a class='logo' href='http://imoechansz.blogspot.com/'>
</a>
</div>
<div class='settings'>
</div>
<div class='menu-icons'></div>
<div class='title-menuside'></div>
<div class='scrollbar' id='style-1'>
<ul>
<li>
<a href='http://imoechansz.blogspot.com/'>
<i class='fa fa-home fa-lg'>
</i>
<span class='nav-text'>
                HOME
              </span>
</a>
</li>
<li>
<a href='http://tiramisubsindonesia.blogspot.com/2012/01/staff.html'>
<i class='fa fa-user fa-lg'>
</i>
<span class='nav-text'>
                Staff
              </span>
</a>
</li>
<li>
<a href='http://tiramisubsindonesia.blogspot.com/2014/12/DC-All.html'>
<i class='fa fa-align-left fa-lg'>
</i>
<span class='nav-text'>
                Download Center
              </span>
</a>
</li>
<li class='darkerli darkerlishadow'>
<a href='http://tiramisubsindonesia.blogspot.com/2014/12/Zona-Anime-OST.html'>
<i class='fa fa-music'>
</i>
<span class='nav-text'>
        Anime OST
      </span>
</a>
</li>
<li class='darkerli'>
<a href='http://tiramisubsindonesia.blogspot.com/2014/12/DC-Special.html'>
<i class='fa fa-external-link-square'>
</i>
<span class='nav-text'>
        Special Item
      </span>
</a>
</li>
<li class='darkerli'>
<a href='http://tiramisubsindonesia.blogspot.com/2014/12/DC-MV.html'>
<i class='fa fa-caret-square-o-right'>
</i>
<span class='nav-text'>
        Music Video
      </span>
</a>
</li>
<li class='darkerli'>
<a href='http://tiramisubsindonesia.blogspot.com/2014/12/DC-MOV.html'>
<i class='fa fa-video-camera'>
</i>
<span class='nav-text'>
        Movie
      </span>
</a>
</li>
<li class='darkerli'>
<a href='http://tiramisubsindonesia.blogspot.com/2014/12/History.html'>
<i class='fa fa-clock-o'>
</i>
<span class='nav-text'>
        History
      </span>
</a>
</li>
<li class='darkerli'>
<a href='http://tiramisubsindonesia.blogspot.com/2013/01/partner.html'>
<i class='fa fa-users'>
</i>
<span class='nav-text'>
        Partner
      </span>
</a>
</li>
<li class='darkerli'>
<a href='http://tiramisubsindonesia.blogspot.com/2013/01/Donasi.html'>
<i class='fa fa-heart'>
</i>
<span class='nav-text'>
        Donasi
      </span>
</a>
</li>
<li class='darkerli'>
<a href='#'>
<i class='fa fa-pencil-square-o'>
</i>
<span class='nav-text'>
        Buku Tamu
      </span>
</a>
</li>
</ul>
<ul>
<li class='darkerlishadow'>
<a href='http://kumpulbagi.com/chiiradesu' target='_blank'>
<i class='fa fa-cloud'>
</i>
<span class='nav-text'>
        Backup Link Chiira
      </span>
</a>
</li>
<li>
<a href='http://kumpulbagi.com/ifanz' target='_blank'>
<i class='fa fa-cloud'>
</i>
<span class='nav-text'>
        Backup Link iFanz
      </span>
</a>
</li>
<li>
<a href='#'>
<i class='fa fa-lightbulb-o fa-lg'>
</i>
<span class='nav-text'>
        FAQ
      </span>
</a>
</li>
</ul>
<ul class='logout'>
<li>
<a href='http://tiramisubsindonesia.blogspot.com/2013/01/Help.html'>
<i class='fa fa-question-circle fa-lg'>
</i>
<span class='nav-text'>
          Help
        </span>
</a>
</li>
</ul>
</div>
</nav>
<div id='close-sidebar'><div id='time'>
<div></div>
<div></div>
<div></div>
</div>
<div id='kotak'></div>
<div id='kotak2'></div>
<div id='kotak3'></div>
<div class='sidebarmaskot'></div>
</div>

Setelah itu, Yang terakhir Letakkan Javascriptnya tepat dibawah HTML ya 
 <script>
function getTheTime()
{var currentTime=new Date();var currentHours=currentTime.getHours();var currentMinutes=currentTime.getMinutes();var currentSeconds=currentTime.getSeconds();$(&#039;#time div:eq(0)&#039;).html(&#039;&lt;p&gt;&#039;+ currentHours+&#039;:&lt;/p&gt;&#039;);if(currentMinutes&lt;10)
{$('#time div:eq(1)').html('<p>0'+ currentMinutes+':</p>');}
else{$('#time div:eq(1)').html('<p>'+ currentMinutes+':</p>');}
if(currentSeconds&lt;10)
{$('#time div:eq(2)').html('<p>0'+ currentSeconds+'</p>');}
else{$('#time div:eq(2)').html('<p>'+ currentSeconds+'</p>');}}
var theTimeIs=setInterval(getTheTime,1000);</script>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
</script>
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/849756096-widgets.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>


CARA SETTING :
- Mengganti Gambar Logo Anime di Bagian Sidemenu ya
Silahkan Cari .settings {
Lalu Ganti Background : url(http://s5.postimg.org/rxjkg5eav/logo10.jpg);
*Link Berwarna Merah Ganti dengan Link Gambar anda*

- Mengganti Gambar Rias Gremory di Pojok bawah kanan
Silahkan Cari .sidebarmaskot {
Lalu Ganti Background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhER10LDPfpdwOOQUcdQTxF17qslN4_ShamhApM-2gj7dC4jjF4L35JwCmEhWVApHqiB_Nj4oYGAD69HfBBNS3LCqbTgt4HwL-jZIMHd0xIs1iqV7s44UvBfOTyRuf0Ix2DD21ZONwZD7D-/s1600/maskotmoe.png)
*Link Berwarna Merah Ganti dengan Link Gambar Anda*
Ukuran 433x600

- Mengganti Icon
Silahkan Pergi Kesini
Cari Font yang Sesuai selera anda, Lalu Jika ingin Menambahkannya Seperti ini "Contoh : <i class='fa fa-video-camera'/>

Nah Tutor ini Belum ada Time / Waktu Indonesia ya :3
Gomen, Soalnya Agak ribet Javascript ya :v Tapi ntar saya update kok Biar ada Time ya
Nah, Jika ada masalah ,
Silahkan Komentar Dibawahnya :)

Pengunjung yang baik , pasti akan meninggalkan Komentarnya,
Biarpun itu Hanya Pertamax! / Sankyuu !
Jangan Lupa Di Like & Share yah ! (y)

No comments

Subscribe to: Post Comments ( Atom )