Catatan : Artikel ini diambil dari berbagai situs yang ada di internet, namun dalam blog ini, sengaja tidak menghapus link sumber yang telah diambil, karena itu merupakan sebuah backlink untuk menuju halaman aslinya, Jika kamu menemukan artikel kamu dalam blog ini dan ingin menghapusnya, mohon hubungi admin di bhacank.joki@gmail.com, dengan mencantumkan link artikelnya, dan admin akan segera menghapusnya dari blog ini,
Cara Membuat Menu Di blog Dengan Sangat Mudah Terbaru
APLIKASI GRATIS
Selamat datang di salah satu halaman blog AGC Androids, Bagi saya berbagi adalah sebuah hal yang sangat menyenangkan, selain mendapatkan banyak teman, saya juga mendapatkan pengalaman tentunya, dan semoga apa yang telah saya bagikan dalam blog ini bisa bermanfaat untuk para pengunjung,
Cara Membuat Menu Di blog Dengan Sangat Mudah Terbaru
dan semoga artikel ini bisa menjadi manfaat buat para pembaca semuanya,loading...
Toturialblogcom : Trik kali ni saya akan membagikan cara membuat menu di blogger dengan cara mudah dan peraktis tentunya bisa di gunakan pada blog atau website ,bagi anda yang belum membuat menu di blog segeralah anda bikin dengan cara yang sangat mudah ,anda bisa melihat pada menu yang ada di blog saya anggap saja itu sebagai demonya , lumannya bagus dan lebih menu Seo friendly ,karan menu ini berasal dari Mas Sugeng ,jadi saya akan shree menu ini ke pada anda semunya ,agar blog anda kelitan lebih bagus dan memudahkan bagi pengunjung untuk memilih judul yang dia cari .yu tunnggu apa yu kita langsung aja Toturialnya di bawah ini Cara Membuat Menu Di blog Dengan Sangat Mudah Terbaru .
1 Anda Login Ke Blogger anda masaing masing
2 Dan anda pilih menu Teamplate dan pilih Edit Html
3 Kemudain anda Tekan CTRL+F dan anda carai kode yang ber nama kode ]]></b:skin> atau kode </style> dan copy kan kode di bawah di atasnya kode ]]></b:skin>
/* 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}
4 Dan cara selanjutnya anda tinggal cara lagi kode </header> dan copy kan kode di bawah di di bawahnya kode </header>
<nav id='nav'>
<a class='toggleMenu' href='#'><i class='fa fa-th-list'></i> Menu</a>
<!-- secondary navigation menu start -->
<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>
<!-- secondary navigation menu end -->
<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>
5 Masih dalam menu Edit Html dan anda cara lagi Kode seperti kode </body> dan copy kan kode di bawah di atas kode </body>
<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>
6 Dan anda cara lagi kode ]]></b:skin> atau kode </style> dan copy kode di bawah di atasnya kode ]]></b:skin> atau kode </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; }
}
7 Kemu dian anda Save dan lihat hasilnya ,juka menu slidernya ga keluwar anda bisa Copy kan kode di bawah di atas kode </head> kemudian anda Seve
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
8 Nah Kemudian anda Save dan lihat hasilnya apakah seprurna atau gagal ,anda bisa mengulanggi lagi kembali ,dan bila anda masih binggung cara nya anda bisa chet di komentar munkin saya bisa ,membantu anda ,cukup sakian dari saya semoga artikel ini bisa bermanpaat bagi anda ,dah salam blogger dan salam sukkes untuk anda .
Itulah sedikit ulasan Cara Membuat Menu Di blog Dengan Sangat Mudah Terbaru , ini saya sajikan dan Semoga Bisa menjadi manfaat buat para pembaca semuanya, dan jangan lupa untuk terus mampir ke blog yang sederhana ini, agar tidak ketinggalan update, silahkan berlangganan dulu dengan cara masukan email aktif kamu pada kolom yang sudah disediakan dibawah,
Artikel ini hanyalah sedikit ulasan tentang apa yang bisa saya bgikan dalam blog ini, dan artikel ini bukan semata-mata untuk kepentingan pribadi, namun artikel ini hanya sedikit membantu para pengembang aplikasi tersebut, sehingga aplikasi yang dipasarkan bisa menjangkau pelanggan atau sasaran yang lebih luas,
Jika kamu ingin mendapatkan aplikasi ini dengan fitur yang premium, silahkan kunjungi langsung website resmi pengembang yang sudah saya sediakan dalam artikel diatas.
Link artikel ini adalah : https://agcandroid.blogspot.com/2016/06/cara-membuat-menu-di-blog-dengan-sangat.html
.gif "Solusi Pembayaran Tagihan dan Transaksi Online - BebasBayar")
0 komentar:
Post a Comment
Silahkan tinggalkan komentar anda, komentar harus sesuai dengan tema artikel diatas, jika tidak akan langsung saya hapus, apalagi komen yang cuma promosi, langsung hapus ajja.!!
Salam Blogger
Admin Agc