January 2018

template/tema blog adalah desain desain halaman blog ataupun website seluruh komponennya (misal:gambar,stylesket,dsb) baik berupa file statis maupun file dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web seperti yang anda lihat saat ini di blog saya Daiki Tips Blog,bahwa terlihat tontonan gambar serta tulisan di layar monitor anda.itulah yang dinamakan template/tema.

Di blog,anda dapat mengganti template blog anda secara leluasa sesuai dengan selera dan keinginan masing masing jika anda telah mahir membuat template sendiri anda dapat menggunakan template tersebut untuk blog anda namun..jika anda masih awam dengan membuat template,pihak blogger atau blogspot sendiri telah menyediakan beberapa template yang bisa anda pilih sesuai keinginan.

menu navigasi adalah sebuah fasilitas yang diberikan oleh si pemilik situs dimana di dalam nya berisi
sekumpulan link link penting.

Menu navigasi berfungsi sebagai pemandu kep[ada pengunjung agar dapat lebih mudah dalam menentukan
kategori yang diinginkan tanpa harus bersusah payah mencari nya.

Posisi nya bias di pindahkan .tidak harus berada dikepala blog.anda bias menggesernya ke sidebar atau
bahkan di bagian footer atau di bawah blog anda. 12345

Langkah langkah membuat nya

1.pertama masuk ke dahsboard blog anda dan klik tema dan edit hmtl

2.Kemudian Pasang kode css berikut , tepat diatas kode ]]></b:skin> atau </style>

/* NAVIGATION MENU 2 */
.toggleMenu{display:none;background:#E73138;padding:0 15px;height:48px;line-height:48px;color:#fff!important}
#nav{font:normal bold 12px Arial,sans-serif;background:#333333;text-transform:uppercase;height:48px;line-height:48px}
.nav-menu2{background:#333333;list-style:none;margin:0 0 0 0;*zoom:1;float:left}
.nav-menu2:before,.nav-menu2:after{content:" ";display:table}
.nav-menu2:after{clear:both}
.nav-menu2 ul{list-style:none;margin:0 0 0 0;width:12em}
.nav-menu2 a{display:block;padding:0 15px}
.nav-menu2 li{position:relative;margin:0 0}
.nav-menu2 > li{float:left}
.nav-menu2 > li > a{display:block;height:48px;line-height:48px;color:#ffffff;box-shadow:0 4px 0 #333333 inset}
.nav-menu2 > li > a.active{background:#222222;box-shadow:0 4px 0 #E73138 inset}
.nav-menu2 > li:hover > a{background:#222222;box-shadow:0 4px 0 #E73138 inset}
.nav-menu2 li ul{background:#fff;display:block;position:absolute;left:0;z-index:10;visibility:hidden;opacity:0;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-ms-transition:all .25s ease-out;-o-transition:all .25s ease-out;transition:all .25s ease-out;border:1px solid #d9d9d9;border:1px solid rgba(217,217,217,1);box-shadow:0 0 2px rgba(0,0,0,0.2)}
.nav-menu2 li li ul{left:100%;top:-1px}
.nav-menu2 > li.hover > ul{visibility:visible;opacity:10}
.nav-menu2 > li > ul:before{content:"";width:0;height:0;position:absolute;bottom:100%;left:20px;border-width:8px;border-style:solid;border-color:transparent transparent #fff transparent;display:block}
.nav-menu2 li li.hover ul{visibility:visible;opacity:10}
.nav-menu2 li li a{display:block;color:#333;position:relative;z-index:100;line-height:32px}
.nav-menu2 li li a:hover{background:#f0f0f0}
.nav-menu2 li li li a{background:#fff;z-index:20;color:#333}
.nav-menu2 li .parent:after{content:"\f107";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px}
#search-form{background:#333333;float:right;margin:0 0;width:200px}
#search-form table{width:100%;margin:0 0 0 0}
#search-form td.search-box{padding-right:30px}
#search-form input#search-box[type="text"]{background:#ffffff;height:36px;line-height:36px;margin:5px 0 5px 10px;padding:0 10px;width:99%;color:#666666;border:none}
#search-form input#search-button[type="submit"]{font-family:FontAwesome;background:#E73037;color:#ffffff;height:36px;line-height:36px;margin:5px 10px 5px 0;padding:0 12px;border:none;outline:none;transition:all 0.25s;-moz-transition:all 0.25s;-webkit-transition:all 0.25s}
#search-form input#search-button[type="submit"]:hover{background:#222222;cursor:pointer}
#search-form input#search-box[type="text"]:focus{background:#eee;outline:none}

3.Untuk memanggil kode css diatas silahkan pasang htmlnya , caranya pasang kode dibawah ini tepat dibawah kode </header>

<nav id='nav'>
    <a class='toggleMenu' href='#'><i class='fa fa-th-list'></i> Menu</a>
    
    <ul class='nav nav-menu2'>
    <li><a class='active' href='masyadi.com'><i class='fa fa-home'></i> Home</a></li>
    <li><a href='#'>Menu 1</a>
    <ul>
    <li><a href='#'>Sub Menu 1</a></li>
    <li><a href='#'>Sub Menu 2</a></li>
    <li><a href='#'>Sub Menu 3</a></li>
    </ul>
    </li>
    <li><a href='#'>Menu 2</a>
    <ul>
    <li><a href='#'>Sub Menu 1</a>
    </li>
    <li><a href='#'>Sub Menu 2</a></li>
    <li><a href='#'>Sub Menu 3</a></li>
    </ul>
    </li>
    <li><a href='#'>Menu 3</a></li>
    <li><a href='masyadi.com'>Markup</a></li>
    <li><a href='masyadi.com'>Error Page</a></li>
    <li><a href='/p/lorem-ipsum-dolor-sit-amet-consectetur.html'>Static Page</a></li>
    </ul>
    
    <form action='/search' id='search-form' method='get' style='display: inline;'><table><tbody><tr><td class='search-box'><input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' type='text' value='Search...' vinput=''/></td>
    <td class='search-button'><input id='search-button' type='submit' value='?'/></td></tr></tbody></table></form>
    </nav>

4.Jika sudah silahkan save template sobat

Membuat Menu Navigasi Evo Magz jadi responsive di Blog Sebetulnya , cara diatas sudah cukup untuk membuat menu navigasi yang mirip evo magz , tapi jika sobat suka desaign template yang responsive , maka sobat perlu melakukan tutorial dibawah ini :

1.Masih dalam halaman edit html

2.Cari kode </body> , dan pasang kode dibawah ini diatas kode </body> tersebut

<script type='text/javascript'>
    //<![CDATA[
    var ww=document.body.clientWidth;$(document).ready(function(){$(".nav li a").each(function(){if($(this).next().length>0){$(this).addClass("parent")}});$(".toggleMenu").click(function(e){e.preventDefault();$(this).toggleClass("active");$(".nav").toggle()});adjustMenu()});$(window).bind("resize orientationchange",function(){ww=document.body.clientWidth;adjustMenu()});var adjustMenu=function(){if(ww<768){$(".toggleMenu").css("display","inline-block");if(!$(".toggleMenu").hasClass("active")){$(".nav").hide()}else{$(".nav").show()}$(".nav li").unbind("mouseenter mouseleave");$(".nav li a.parent").unbind("click").bind("click",function(e){e.preventDefault();$(this).parent("li").toggleClass("hover")})}else if(ww>=768){$(".toggleMenu").css("display","none");$(".nav").show();$(".nav li").removeClass("hover");$(".nav li a").unbind("click");$(".nav li").unbind("mouseenter mouseleave").bind("mouseenter mouseleave",function(){$(this).toggleClass("hover")})}}
    //]]></script><script src='https://googledrive.com/host/0BxH5pEKXqBWUSUhtOTZFOUw5QkU/menu-navigasi-evo-magz-masyadi-com.js'></script>

3.Serta pasang Juga Media Queris responsivenya . caranya pasang kode css berikut diatas kode
]]></b:skin> atau </style>

@media only screen and (max-width: 768px) {
.nav { float: none; width: 100%; max-width: 100%; }.active { display: block; }#search-form { width: 100%; margin: 0 0 0 0 !important; }.nav li ul:before { display: none; }.nav > li { float: none; overflow: hidden; }.nav ul { display: block; width: 100%; float: none; }.nav-menu2 li ul { background: #eee; border: none; box-shadow: none; }.nav-menu2 li li ul { background: #f5f5f5; }.nav-menu2 li li a:hover { background: #ddd; }.nav > li.hover > ul, .nav li li.hover ul { position: static; }#search-form { width: 100%; background: #444; }#search-form td.search-box { padding: 0 10px !important; }#search-form td.search-button { padding: 0 10px; width: 1%; }#search-form input#search-box[type="text"] { margin: 0 0 0 0; }#search-form input#search-button[type="submit"] { margin: 0 0 0 0; }
}

4.oh ya saya hampir lupa , karena menu navigasi menggunakan font awesome , silahkan pasang javascript font awesome berikut diatas kode </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

5.silahkan save template sobat dan lihat hasilnya

gimana cukup mudah kan .semuanya akan mudah kalau kalian berusaha sungguh sunggu pasti akan ada hasil
yang memuaskan.sekian dari saya selamat mencoba.dan semoga berhasil.

jasa optimasi page speed

cara mengganti tema/template di blog dengan mudah

cara buat navigasi menu dengan mudah seperti Evo Magz