Post Game

Cara Membuat Menu Navigasi Keren Pada Blog

Cara Membuat Menu Navigasi Keren Pada Blog adalah postingan mengedit blog Jona Rendra yang lain. Menu Navigasi atau menu horizontal merupakan widget yang sangat penting keberadaannya di dalam blog. Menu navigasi akan mempermudah pengunjung untuk menavigasi blog anda. Yang kali ini saya share adalah Menu Navigasi Tampilan Keren dan elegan. Terdapat kombinasi tombol Inset dan Outset membuat blog yang berisi menu ini kelihatan profesional.

Seperti yang anda lihat pada gambar diatas, begitulah desain dari menu horizontal yang akan saya berikan. Kalau dilihat dari gambarnya saja pasti kurang menarik, oleh karena itu, langsung saja pasang widgetnya di blog anda.

Cara Membuat Menu Navigasi Keren Pada Blog

1. Login ke blogger, pada dashboard pilih blog lalu masuk ke template
2. Klik Edit HTML dan letakkan CSS berikut ini di atas kode ]]></b:skin> atau </style>

.jona-menu-wrap{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrlQn1bA41FrNxr7O-d3eEhd3SIMEAusNPTAGwFRoto5TonW9wxcrkV5X50Ooxw73AZAK-vzJO_op-0yIFTv4AymU-Vli0FCCDhX93U-K9KDd9vpixnaBXC46Bd29g0Cbq8H8yAtqtIg-0/s1600/menuku.png) repeat-x top;height:54px;width:100%;}
.jona-menu{font:normal 12px Arial;line-height:normal;width:960px;text-transform:none;color:#f1f1f1;text-decoration:none;margin:0 auto;padding:0 auto}
.jona-menu ul{margin:0;padding:0}
.jona-menu li{list-style:none;color:#b69786;float:left;display:inline;position:relative;margin:0;padding:0}
.jona-menu li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLsFyKIpE-59AveyEvhIK9FF8lPaElozo9vH4-SAbFv25kiRKngRGNY62i4ENMHOIosj93cAvBstZRy_QOqgXj3Rkz8fncSwmau1Iuk7OqEy04PNZabo8TFP1q1ZUzXH0VH-aHxUxnSp7h/s1600/mnubg.png) repeat-x top;display:block;text-decoration:none;font-weight:700;color:#ccc;text-shadow:1px 1px 2px #111;outline:none;margin:10px 4px 8px;padding:8px 16px;border:1px solid #111}
.jona-menu li a:hover{background:#333;-moz-box-shadow: inset 2px 2px 2px #151515;-webkit-box-shadow: inset 2px 2px 2px #151515;box-shadow: inset 2px 2px 2px #151515;}
.jona-menu li ul{position:absolute;z-index:10;left:0;top:100%;height:30px;width:170px;display:none;margin:0;padding:0;-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
.jona-menu li ul a{margin:0;font:12px Arial;background:#2c2c2c;border-left:none;border:none;display:block;padding:7px 10px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
.jona-menu li ul a:hover{background:#1b1b1b;color:#fff}
.jona-menu li ul li{float:none;display:block;width:auto}
.jona-menu li ul ul{top:0;left:100%}
.jona-menu li a:hover,.menuku ul li a:hover{color:#eee}

3. Setelah itu, jangan di simpan dulu. Masih ada langkah berikutnya. Cari kode <div id=header> atau <header>
4. Kalau sudah ketemu salah satu kode diatas, copy paste kode dibawah ini dan letakkan dibawah kode <div id=header> atau <header>

<div class=jona-menu-wrap>
<div class=jona-menu>
<ul>
<li><a href=#>Home</a></li>
<li><a href=#>Site Map</a></li>
<li><a href=#>About Me</a></li>
<li><a href=#>Contact Us</a></li>
<li><a href=#>Link Exchange</a></li>
</ul>
</div>
</div>

Keterangan:

• Jangan lupa mengganti kode # dengan URL menu yang dituju
• Jika ingin mengganti bagian tulisan pada menu, silahkan diubah
• Mau tahu lebih banyak tentang cara mengedit menu horizontal? baca di Panduan Mengedit Menu Horizontal

5. Setelah di kustomisasikan, baru terakhir klik Simpan Template.

Cara diatas adalah cara memasukkan menu dengan edit html. Sebenarnya ada cara lain. Yaitu dengan Tambah Gadget, HTML/Javascript. Tetapi, anda perlu lagi untuk menambah satu kolom dibawah header. Dan menggabungkan CSS diatas dengan kode HTML link menu nya. Kalau CSS, diapit dengan <style>CSS</style> setelah itu baru HTML. Seperti yang telah dijelaskan pada Pengetian HTML dan CSS serta Tutorial pemakaiannya.

Itulah artikel dari Jona Rendra yang berjudul Cara Membuat Menu Navigasi Keren Pada Blog, semoga dapat bermanfaat untuk anda. Apabila ada pertanyaan mengenai tutorial diatas, silahkan poskan melalui komentar.

Go to link Download

Cara Membuat Menu Navigasi Tetap Walaupun di Scroll

Cara Membuat Menu Navigasi Tetap walaupun di Scroll

<script type=text/javascript>
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $(#nav).offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
            $(#nav).css({ position: fixed, top:0, z-index:9999 });
        } else {
            $(#nav).css({ position: relative });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

Go to link Download

Cara Membuat Menu Slider dengan Sidr

Source Code

.sidr{display:none;position:absolute;position:fixed;top:0;height:100%;z-index:999999;width:260px;overflow-x:none;overflow-y:auto;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-size:15px;background:#333;color:#fff;-webkit-box-shadow:inset 0 0 5px 5px #222;-moz-box-shadow:inset 0 0 5px 5px #222;box-shadow:inset 0 0 5px 5px #222}.sidr .sidr-inner{padding:0 0 15px}.sidr .sidr-inner>p{margin-left:15px;margin-right:15px}.sidr.right{left:auto;right:-260px}.sidr.left{left:-260px;right:auto}.sidr h1,.sidr h2,.sidr h3,.sidr h4,.sidr h5,.sidr h6{font-size:11px;font-weight:normal;padding:0 15px;margin:0 0 5px;color:#fff;line-height:24px;background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #1a1a1a));background-image:-webkit-linear-gradient(#4d4d4d,#1a1a1a);background-image:-moz-linear-gradient(#4d4d4d,#1a1a1a);background-image:-o-linear-gradient(#4d4d4d,#1a1a1a);background-image:linear-gradient(#4d4d4d,#1a1a1a);-webkit-box-shadow:0 5px 5px 3px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 5px 3px rgba(0,0,0,0.2);box-shadow:0 5px 5px 3px rgba(0,0,0,0.2)}.sidr p{font-size:13px;margin:0 0 12px}.sidr p a{color:rgba(255,255,255,0.9)}.sidr>p{margin-left:15px;margin-right:15px}.sidr ul{display:block;margin:0 0 15px;padding:0;border-top:1px solid #1a1a1a;border-bottom:1px solid #4d4d4d}.sidr ul li{display:block;margin:0;line-height:48px;border-top:1px solid #4d4d4d;border-bottom:1px solid #1a1a1a}.sidr ul li:hover,.sidr ul li.active,.sidr ul li.sidr-class-active{border-top:none;line-height:49px}.sidr ul li:hover>a,.sidr ul li:hover>span,.sidr ul li.active>a,.sidr ul li.active>span,.sidr ul li.sidr-class-active>a,.sidr ul li.sidr-class-active>span{-webkit-box-shadow:inset 0 0 15px 3px #222;-moz-box-shadow:inset 0 0 15px 3px #222;box-shadow:inset 0 0 15px 3px #222}.sidr ul li a,.sidr ul li span{padding:0 15px;display:block;text-decoration:none;color:#fff}.sidr ul li ul{border-bottom:none;margin:0}.sidr ul li ul li{line-height:40px;font-size:13px}.sidr ul li ul li:last-child{border-bottom:none}.sidr ul li ul li:hover,.sidr ul li ul li.active,.sidr ul li ul li.sidr-class-active{border-top:none;line-height:41px}.sidr ul li ul li:hover>a,.sidr ul li ul li:hover>span,.sidr ul li ul li.active>a,.sidr ul li ul li.active>span,.sidr ul li ul li.sidr-class-active>a,.sidr ul li ul li.sidr-class-active>span{-webkit-box-shadow:inset 0 0 15px 3px #222;-moz-box-shadow:inset 0 0 15px 3px #222;box-shadow:inset 0 0 15px 3px #222}.sidr ul li ul li a,.sidr ul li ul li span{color:rgba(255,255,255,0.8);padding-left:30px}.sidr form{margin:0 15px}.sidr label{font-size:13px}.sidr input[type="text"],.sidr input[type="password"],.sidr input[type="date"],.sidr input[type="datetime"],.sidr input[type="email"],.sidr input[type="number"],.sidr input[type="search"],.sidr input[type="tel"],.sidr input[type="time"],.sidr input[type="url"],.sidr textarea,.sidr select{width:100%;font-size:13px;padding:5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;border:none;background:rgba(0,0,0,0.1);color:rgba(255,255,255,0.6);display:block;clear:both}.sidr input[type=checkbox]{width:auto;display:inline;clear:none}.sidr input[type=button],.sidr input[type=submit]{color:#333;background:#fff}.sidr input[type=button]:hover,.sidr input[type=submit]:hover{background:rgba(255,255,255,0.9)}

<script src="http://demo.dfc48.hol.es/js/jquery.sidr.min.js"></script>

Penggunaan

Untuk Simple Menu :

<a id="simple-menu" href="#sidr">Menu</a>
 
<div id="sidr-left1">
<!-- Your content -->
<ul>
<li><a href="#">List 1</a></li>
<li class="active"><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>
 
<script>
$(document).ready(function() {
 $(#simple-menu).sidr({
 name: sidr-left1,
 side: left // By default
 });
 });
</script>

1. Menu : adalah tulisan/teks yang akan ditampilkan di halaman muka
2. List 1, List 2, List 3: adalah menu yang ditentukan ( silahkan edit sesuka hati )
3. sidr-left1 : adalah kode untuk memanggil JavaScript

Untuk Left/Right Menu :

<a id="left-menu" href="#left-menu">Left Menu</a> 
<a id="right-menu" href="#right-menu">Right Menu</a>
<div id="sidr-left">
<!-- Your content -->
<ul>
<li><a href="#">List 1</a></li>
<li class="active"><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>
<div id="sidr-right">
<!-- Your content -->
<ul>
<li><a href="#">List 1</a></li>
<li class="active"><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>
 
<script>
$(document).ready(function() {
 $(#left-menu).sidr({
 name: sidr-left,
 side: left // By default
 });
 $(#right-menu).sidr({
 name: sidr-right,
 side: right
 });
 });
</script>

1. Left Menu, Right Menu :  adalah tulisan/teks yang akan ditampilkan di halaman muka
2. List 1, List 2, List 3: adalah menu yang ditentukan ( silahkan edit sesuka hati )
3. sidr-left dan sidr-right : adalah kode untuk memanggil JavaScript

Go to link Download

Cara Membuat Menu Horizontal CSS Simple Black di Blog

• Login ke akun blogger.com sobat.
• Pada Dashboard, sobat klik Template => edit HTML. 
• Kemudian sobat Cari kode ]]></b:skin> lalu sobat letakkan kode di bawah ini tepat diatas kode ]]></b:skin> tadi :

ul#menu {width: 100%;height: 43px;background: #FFF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9pxQotxoPlIgo2K87KodMIfXScgYmYidv_6rMgznqunk1F3r-WOmnVHp4O_lNMeVuIcJyi9UZ7SxEk9wOiomZsBuRafiz5Iv_QoqrXQmUCRUvN47bskHHPJ0HuE_uNHgsMCr0kn7R4cU/s1600/menu-bg.gif") top left repeat-x;font-size: 0.8em;font-family: "Lucida Grande", Verdana, sans-serif;font-weight: bold;list-style-type: none;margin: 0;padding: 0;}ul#menu li {display: block;float: left;margin: 0 0 0 5px;}ul#menu li a {height: 43px;color: #777;text-decoration: none;display: block;float: left;line-height: 200%;padding: 8px 15px 0;}ul#menu li a:hover {color: #333;}ul#menu li a.current {color: #FFF;background: #FFF url("http://2.bp.blogspot.coahm/-t9vkEKC1ATA/TcuW-EFUaoI/AAAAAAAAAdg/zg6gbrI9u9A/s1600/current-bg.gif") top left repeat-x;padding: 5px 15px 0;

• Kalau sudah, sobat klik Simpan template.
• Selanjutnya, sobat pergi ke Menu Tata letak => Tambah gadget / add gadget => Pilih HTML/javascript. 
• Lalu, sobat copy paste kode dibawah ini :

Go to link Download

Cara Membuat Navigasi Menu Responsive di Blog

Cara Membuat Menu Responsive: Tahapan 

• Untuk mengganti warna background menu, ubah kode warna ini: #50B7DC 
• Ganti warna background "hover", ubah: #5FC6EB
• Lihat Daftar Kode Warna HTML

Go to link Download

Cara Membuat Header Bar Top Menu Mirip Facebook

Ini kode warna biru background header bar Facebook: #3a5795

Go to link Download

Cara Membuat Mega Drop Down Menu Dengan CSS

body, ul, li {
 font-size:14px;
 font-family:Arial, Helvetica, sans-serif;
 line-height:21px;
 text-align:left;
}

/* Navigation Bar */

#menu {
 list-style:none;
 width:940px;
 margin:30px auto 0px auto;
 height:43px;
 padding:0px 20px 0px 20px;

 /* Rounded Corners */

 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;

 /* Background color and gradients */

 background: #014464;
 background: -moz-linear-gradient(top, #0272a7, #013953);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

 /* Borders */

 border: 1px solid #002232;

 -moz-box-shadow:inset 0px 0px 1px #edf9ff;
 -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
 box-shadow:inset 0px 0px 1px #edf9ff;
}

#menu li {
 float:left;
 text-align:center;
 position:relative;
 padding: 4px 10px 4px 10px;
 margin-right:30px;
 margin-top:7px;
 border:none;
}

#menu li:hover {
 border: 1px solid #777777;
 padding: 4px 9px 4px 9px;

 /* Background color and gradients */

 background: #F4F4F4;
 background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

 /* Rounded corners */

 -moz-border-radius: 5px 5px 0px 0px;
 -webkit-border-radius: 5px 5px 0px 0px;
 border-radius: 5px 5px 0px 0px;
}

#menu li a {
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color: #EEEEEE;
 display:block;
 outline:0;
 text-decoration:none;
 text-shadow: 1px 1px 1px #000;
}

#menu li:hover a {
 color:#161616;
 text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
 padding-right:21px;
 background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7XS0wWWJR0W-KogXLbpx47e_70uAUZguYxSoCmz-DqYgy8H4-q29NBEvmNaHyUQbOE4mfPfMgazDBKq22Ul8O32YBRUTBwKc1svuxH9KMLOVKc3Uo-c1LGjFYKEMSG0d_WTD6KED5L4vv/s1600/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
 background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7XS0wWWJR0W-KogXLbpx47e_70uAUZguYxSoCmz-DqYgy8H4-q29NBEvmNaHyUQbOE4mfPfMgazDBKq22Ul8O32YBRUTBwKc1svuxH9KMLOVKc3Uo-c1LGjFYKEMSG0d_WTD6KED5L4vv/s1600/drop.png") no-repeat right 7px;
}

/* Drop Down */

.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
 margin:4px auto;
 float:left;
 position:absolute !important;
 left:-999em; /* Hides the drop down */
 text-align:left;
 padding:10px 5px 10px 5px;
 border:1px solid #777777;
 border-top:none;

 /* Gradient background */
 background:#F4F4F4;
 background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

 /* Rounded Corners */
 -moz-border-radius: 0px 5px 5px 5px;
 -webkit-border-radius: 0px 5px 5px 5px;
 border-radius: 0px 5px 5px 5px;
}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
 left:-1px ;
z-index:444 !important;
    top:auto;
}

/* Columns */

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
 display:inline;
 float: left;
 position: relative;
 margin-left: 5px;
 margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

/* Right alignment */

#menu .menu_right {
 float:right !important;
 margin-right:0px;
}
#menu li .align_right {
 /* Rounded Corners */
 -moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
 left:auto;
 right:-1px;
 top:auto;
}

/* Drop Down Content Stylings */

#menu p, #menu h2, #menu h3, #menu div li {
 font-family:Arial, Helvetica, sans-serif;
 line-height:21px;
 font-size:12px;
 text-align:left;
 text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
 font-size:21px;
 font-weight:400;
 letter-spacing:-1px;
 margin:7px 0 14px 0;
 padding-bottom:14px;
 border-bottom:1px solid #666666;
}
#menu h3 {
 font-size:14px;
 margin:7px 0 14px 0;
 padding-bottom:7px;
 border-bottom:1px solid #888888;
}
#menu p {
 line-height:18px;
 margin:0 0 10px 0;
}

#menu li:hover div a {
 font-size:12px;
 color:#015b86;
}
#menu li:hover div a:hover {
 color:#029feb;
}
.strong {
 font-weight:bold;
}
.italic {
 font-style:italic;
}
.imgshadow {
 background:#FFFFFF;
 padding:4px;
 border:1px solid #777777;
 margin-top:5px;
 -moz-box-shadow:0px 0px 5px #666666;
 -webkit-box-shadow:0px 0px 5px #666666;
 box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
 width:auto;
 float:left;
 margin:5px 15px 5px 5px;
}
#menu li .black_box {
 background-color:#333333;
 color: #eeeeee;
 text-shadow: 1px 1px 1px #000;
 padding:4px 6px 4px 6px;

 /* Rounded Corners */
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;

 /* Shadow */
 -webkit-box-shadow:inset 0 0 3px #000000;
 -moz-box-shadow:inset 0 0 3px #000000;
 box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
 list-style:none;
 padding:0;
 margin:0 0 12px 0;
}
#menu li ul li {
 font-size:12px;
 line-height:24px;
 position:relative;
 text-shadow: 1px 1px 1px #ffffff;
 padding:0;
 margin:0;
 float:none;
 text-align:left;
 width:130px;
}
#menu li ul li:hover {
 background:none;
 border:none;
 padding:0;
 margin:0;
}
#menu li .greybox li {
 background:#F4F4F4;
 border:1px solid #bbbbbb;
 margin:0px 0px 4px 0px;
 padding:4px 6px 4px 6px;
 width:116px;

 /* Rounded Corners */
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}
#menu li .greybox li:hover {
 background:#ffffff;
 border:1px solid #aaaaaa;
 padding:4px 6px 4px 6px;
 margin:0px 0px 4px 0px;
}

.tabs-inner .widget li a {
padding: 1px ;
display:block !important;
border: 1px solid  transparent !important ;
}

<div id=menu>
<li><a class=drop href=#>Home</a><!-- Begin Home Item -->
<div class=dropdown_2columns><!-- Begin 2 columns container -->
<div class=col_2>
<h2>Welcome !</h2>
</div>
<div class=col_2>
<p>Ini adalah menu denan Mega Drop Down menu. Cara membuatnya hanya menggunakan CSS tanpa JavaScript</p>            
</div>
<div class=col_2>
<h2>Cross Browser Support</h2>
</div>
<div class=col_1>
<img alt= height=48 src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJzWAXlBtz18pF4lUhPsgsMyow6cUm7fRTgYVk4l0PNqEkg6oLMX3rwdbbLbs258VTrLhpohaT_GnU_imMqBBhsIPOyapsy53sk3yGJtb5Z17-pEV6lGvXR6i3q9QxVC5BbFP5pxoSfDj0/s1600/browsers.png width=125/>
</div>
<div class=col_1>
<p>Mega Drop Down Menu ini telah diuji dan berhasil untuk semua browser.</p>
</div>
</div><!-- End 2 columns container -->
</li><!-- End Home Item -->
<li><a class=drop href=#>5 Columns</a><!-- Begin 5 columns Item -->
<div class=dropdown_5columns><!-- Begin 5 columns container -->
<div class=col_5>
<h2>Ini adalah contoh untuk kolom 5</h2>
</div>
<div class=col_1>
<p class=black_box>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class=col_1>
<p>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class=col_1>
<p class=italic>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class=col_1>
<p>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class=col_1>
<p class=strong>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
<div class=col_5>
<h2>Fitur Post Dengan Images</h2>
</div>
<div class=col_3>
<img alt= class=img_left imgshadow height=70 src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggoyvje-v0hAuit-uDPhudSYEClriGsx6PFxBI9dTGl4DcX4XBMNkuI9mstpsRy1ikymaIJ3svucc8xGpaIxZgO9amJ067AcS7LCwm3pLssOI3t5K9zoDiNe2Z6sSH4_fIwCo4R7pw9-BF/s1600/01.jpg width=70/>
<p>Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera Anda<a href=#>Read more...</a></p><br/>
<img alt= class=img_left imgshadow height=70 src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDXj4e79-wPkNt69ItRaWKHt5_30U00c5y9NLJlEEyuRrHjvxnY_JxU2NbDw5nrh-HBZAbHBI-HjT9VJVIyodfIkql0kHROev_cmcy-UzOA6zhIzimuGIS3yfLMUR0i__ZUggcpsFZRIKd/s1600/02.jpg width=70/>
<p>Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera Anda<a href=#>Read more...</a></p>
</div>
<div class=col_2>
<p class=black_box>Ganti dengan kata-kata Anda sendiri atau sebuah link.</p>
</div>
</div><!-- End 5 columns container -->
</li><!-- End 5 columns Item -->
<li><a class=drop href=#>4 Columns</a><!-- Begin 4 columns Item -->
<div class=dropdown_4columns><!-- Begin 4 columns container -->
<div class=col_4>
<h2>This is a heading title</h2>
</div>
<div class=col_1>
<h3>Some Links</h3>
<ul>
<li><a href=#>ThemeForest</a></li>
<li><a href=#>GraphicRiver</a></li>
<li><a href=#>ActiveDen</a></li>
<li><a href=#>VideoHive</a></li>
<li><a href=#>3DOcean</a></li>
</ul>  
</div>
<div class=col_1>
<h3>Useful Links</h3>
<ul>
<li><a href=#>NetTuts</a></li>
<li><a href=#>VectorTuts</a></li>
<li><a href=#>PsdTuts</a></li>
<li><a href=#>PhotoTuts</a></li>
<li><a href=#>ActiveTuts</a></li>
</ul>  
</div>
<div class=col_1>
<h3>Other Stuff</h3>
<ul>
<li><a href=#>FreelanceSwitch</a></li>
<li><a href=#>Creattica</a></li>
<li><a href=#>WorkAwesome</a></li>
<li><a href=#>Mac Apps</a></li>
<li><a href=#>Web Apps</a></li>
</ul>  
</div>
<div class=col_1>
<h3>Misc</h3>
<ul>
<li><a href=#>Design</a></li>
<li><a href=#>Logo</a></li>
<li><a href=#>Flash</a></li>
<li><a href=#>Illustration</a></li>
<li><a href=#>More...</a></li>
</ul>  
</div>
</div><!-- End 4 columns container -->
</li><!-- End 4 columns Item -->
<li class=menu_right><a class=drop href=#>1 Column</a>
<div class=dropdown_1column align_right>
<div class=col_1>
<ul class=simple>
<li><a href=#>FreelanceSwitch</a></li>
<li><a href=#>Creattica</a></li>
<li><a href=#>WorkAwesome</a></li>
<li><a href=#>Mac Apps</a></li>
<li><a href=#>Web Apps</a></li>
<li><a href=#>NetTuts</a></li>
<li><a href=#>VectorTuts</a></li>
<li><a href=#>PsdTuts</a></li>
<li><a href=#>PhotoTuts</a></li>
<li><a href=#>ActiveTuts</a></li>
<li><a href=#>Design</a></li>
<li><a href=#>Logo</a></li>
<li><a href=#>Flash</a></li>
<li><a href=#>Illustration</a></li>
<li><a href=http://blazerracing.blogspot.com/>Get This Menu</a></li>
</ul>  
</div>
</div>
</li>
<li class=menu_right><a class=drop href=#>3 columns</a><!-- Begin 3 columns Item -->
<div class=dropdown_3columns align_right><!-- Begin 3 columns container -->
<div class=col_3>
<h2>Lists in Boxes</h2>
</div>
<div class=col_1>
<ul class=greybox>
<li><a href=#>FreelanceSwitch</a></li>
<li><a href=#>Creattica</a></li>
<li><a href=#>WorkAwesome</a></li>
<li><a href=#>Mac Apps</a></li>
<li><a href=#>Web Apps</a></li>
</ul>  
</div>
<div class=col_1>
<ul class=greybox>
<li><a href=#>ThemeForest</a></li>
<li><a href=#>GraphicRiver</a></li>
<li><a href=#>ActiveDen</a></li>
<li><a href=#>VideoHive</a></li>
<li><a href=#>3DOcean</a></li>
</ul>  
</div>
<div class=col_1>
<ul class=greybox>
<li><a href=#>Design</a></li>
<li><a href=#>Logo</a></li>
<li><a href=#>Flash</a></li>
<li><a href=#>Illustration</a></li>
<li><a href=#>More...</a></li>
</ul>  
</div>
<div class=col_3>
<h2>Here are some image examples</h2>
</div>
<div class=col_3>
<img alt= class=img_left imgshadow height=70 src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDXj4e79-wPkNt69ItRaWKHt5_30U00c5y9NLJlEEyuRrHjvxnY_JxU2NbDw5nrh-HBZAbHBI-HjT9VJVIyodfIkql0kHROev_cmcy-UzOA6zhIzimuGIS3yfLMUR0i__ZUggcpsFZRIKd/s1600/02.jpg width=70/>
<p>Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera Anda<a href=#>Read more...</a></p><br/>
<img alt= class=img_left imgshadow height=70 src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggoyvje-v0hAuit-uDPhudSYEClriGsx6PFxBI9dTGl4DcX4XBMNkuI9mstpsRy1ikymaIJ3svucc8xGpaIxZgO9amJ067AcS7LCwm3pLssOI3t5K9zoDiNe2Z6sSH4_fIwCo4R7pw9-BF/s1600/01.jpg width=70/>
<p>Ganti dengan kata-kata lainnya atau sebuah link. Terserah Anda dan jangan lupa ganti gambarnya sesuaikan dengan selera Anda<a href=#>Read more...</a></p>
</div>
</div><!-- End 3 columns container -->
</li><!-- End 3 columns Item -->
</div>

Go to link Download

Cara Membuat Navigasi Label Dropdown Menu

Cara Membuat Navigasi Label Dropdown Menu 

 

 by : http://www.frewaremini.com/

 

 tidaklah terlalu sulit, dimana keuntungan kita membuat Navigasi Dropdownmenu ini kita bisa menaruh banyak link Label/tag atau kategori postingan hingga berderet kebawah tergantung seleraanda.

Keuntungan lain dari widget Navigasi Dropdownmenu ini, terutama pada blog yang sudah cukup lama usianya sehingga label/kategori/tag postingan blog sudah demikian banyaknya, sehingga akan mengurangi estetika atau keindahan blog jika Label blog kita tampilkan secara default, karena akan memenuhi sidebar anda.

Dengan menggunakan Navigasi Dropdownmenu ini Label anda bisa mengurutkan Label berdasarkan Kategori jenis postingan berderet kebawah yang hanya muncul jika kita mengarahkan mouse tepat diatas judul Label, jadi akan menghemat halaman blog anda. Sebelum memasang widget ini pastikan anda telah merancang Judul Menu dan menentukan link-link url label anda sebagai submenu secara berurutan sesuai dengan kategori Judul Menu utamanya, hal ini untuk mengantisipasi agar dengan adanya Navigasi Dropdownmenu pengunjung menjadi tidak kebingungan untuk mencari artikel yang diinginkan pada blog anda.

Adapun cara Membuat Navigasi Kategori/Label/Tag Drop Downmenu ikuti langkah-langkah berikut ini :

1. Silahkan masuk ke akun Blogger anda.
2. Masuk ke Design, lanjutkan ke EDIT HTML, kemudian backup template anda dengan cara download full template.
3. Cari kode berikut  ]]></b:skin>
4. setelah ketemu kode di atas silahkan letakkan kode di bawah ini tepat diatas kode  ]]></b:skin>

/* Navigasi Dropdown Menu */

#navdropdownmenu{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0my3s0jwslnTktiA_MPOm60pCYiBE7lPjKQZExkTXXQXjK0O2Qxo4l2AgXKfPxnge89V2F6qkts0_3jXwya1CAoEYnx-8_wCufFAzhGDQM0aOr-0E_QufdsZtiMVVXHHFAhmR3P3J-g/s1600/navbg.png); /*Warna Latar Belakang */

width:100%;

height:auto;

margin:0;

padding:0;

}

#navdropdownmenu ul{

float:left;

list-style:none;

margin:0;

padding:0;

}

#navdropdownmenu li{

list-style:none;

float:left;

}

#navdropdownmenu li a, #navdropdownmenu li a:link, #navdropdownmenu li a:visited{

color:black; /* Warna Teks */

display:block;

padding:9px 10px 9px 10px;

font-size: 12px; /* Ukuran Teks */

font-family: verdana; /* Jenis font */

text-decoration:none;

}

#navdropdownmenu li a:hover{

background:pink; /* Warna latar saat kursor mouse berada di atasnya (hover) */

color:white; /* Warna teks saat kursor mouse berada di atasnya */

padding:9px 10px 9px 10px;

}

#navdropdownmenu li ul{

z-index:10;

position:absolute;

height:auto;

width:200px; /* Lebar submenu */

border-width:1px 0 0 0; /* Tebal garis pinggir submenu */

border-style:solid;

border-color:#ffff66; /* Warna garis pinggir submenu */

}

#navdropdownmenu li ul li a, #navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{

float:none;

background:silver; /* Warna latar belakang submenu */

width:200px; /* Lebar submenu. Isi dengan nilai yang sama */

border-width:0 1px 1px 1px; /* Tebal garis pinggir submenu */

border-style:solid;

border-color:#ffff66; /* Warna garis pinggir submenu */

}

#navdropdownmenu li ul li a:hover{

background:royalblue; /* Latar belakang submenu ketika kursor mouse berada di atasnya */

color:white; /* Warna teks submenu ketika kursor mouse berada di atasnya */

}

#navdropdownmenu li:hover ul, #navdropdownmenu li a:hover ul#submenu, #navdropdownmenu li:hover a:hover

ul#submenu{

z-index:10;

position:absolute;

height:auto;

width:200px; /* Lebar submenu */

left:auto;

}

.ngumpet{

display:none;

}

.muncul{

display:block;

}

5. Jika sudah, lanjutkan cari kode berikut  </head>

6. Kemudian letakkan kode berikut diatas kode  </head>

<script>

var auahgelap = &#39;&#39;;

function petakumpet(id)

{

var menu = document.getElementById(id);

var sangmantan = menu.className;

if (sangmantan == &#39;ngumpet&#39;) {

if (auahgelap != &#39;&#39;) {

var terlalu = document.getElementById(auahgelap);

terlalu.className = &#39;ngumpet&#39;;

}

menu.className = &#39;muncul&#39;;

auahgelap = id;

} else {

menu.className = &#39;ngumpet&#39;;

}

}

function umpetpetak(id)

{

var menu = document.getElementById(id);

var sangmantan = menu.className;

if (sangmantan != &#39;ngumpet&#39;) {

if (auahgelap == &#39;&#39;) {

var terlalu = document.getElementById(auahgelap);

terlalu.className = &#39;muncul&#39;;

}

menu.className = &#39;ngumpet&#39;;

auahgelap = id;

} else {

menu.className = &#39;muncul&#39;;

}

}

</script>

7. Langkah selanjutnya carilah kode sebagai berikut  <div id=header-wrapper>
8. Letakkan kode di bawah ini, tepat di bawah kode  <div id=header-wrapper>

<div id=navdropdownmenu>

<ul id=navdropdownmenu>

<li><a href="http://www.frewaremini.com">Halaman depan</a></li>

<li onmouseout=petakumpet(&quot;submenu1&quot;) onmouseover=umpetpetak(&quot;submenu1&quot;)><a href=#>JUDUL MENU 1</a>

<div class=ngumpet id=submenu1>

<ul>

<li><a href=#>Ganti Dengan Judulmu</a></li>

<li><a href=#>Ganti Dengan Judulmu</a></li>

<li><a href=#>Ganti Dengan Judulmu</a></li>

<li><a href=#>Ganti Dengan Judulmu</a></li>

<li><a href=#>Ganti Dengan Judulmu</a></li>

</ul>

</div>

</li>

<li onmouseout=petakumpet(&quot;submenu2&quot;) onmouseover=umpetpetak(&quot;submenu2&quot;)><a href=#>JUDUL MENU 2</a>

<div class=ngumpet id=submenu2>

<ul>

<li><a href=#>Ganti Dengan Judulmu</a></li>

<li><a href=#>Ganti Dengan Judulmu</a></li>

<li><a href=#>Ganti Dengan Judulmu</a></li>

<li><a href=#>Ganti Dengan Judulmu</a></li>

<li><a href=#>Ganti Dengan Judulmu</a></li>

<li><a href=#>Ganti Dengan Judulmu</a></li>

</ul>

</div>

</li>

<li onmouseout=petakumpet(&quot;submenu3&quot;) onmouseover=umpetpetak(&quot;submenu3&quot;)><a href=#>JUDUL MENU 3</a>

<div class=ngumpet id=submenu3>

<ul>

<li><a href=#>Ganti Dengan Judulmu</a></li>

<li><a href=#>Ganti Dengan Judulmu</a></li>

<li><a href=#>Ganti Dengan Judulmu</a></li>

<li><a href=#>Ganti Dengan Judulmu</a></li>

<li><a href=#>Ganti Dengan Judulmu</a></li>

<li><a href=#>Ganti Dengan Judulmu</a></li>

</ul>

</div>

</li>

<li onmouseout=petakumpet(&quot;submenu4&quot;) onmouseover=umpetpetak(&quot;submenu4&quot;)><a href=#>JUDUL MENU 4</a>

<div class=ngumpet id=submenu4>

<ul>

<li><a href=#>Ganti Dengan Judulmu</a></li>

<li><a href=#>Ganti Dengan Judulmu</a></li>

<li><a href=#>Ganti Dengan Judulmu</a></li>

<li><a href=#>Ganti Dengan Judulmu</a></li>

<li><a href=#>Ganti Dengan Judulmu</a></li>

<li><a href=#>Ganti Dengan Judulmu</a></li>

</ul>

</div>

</li>

<li onmouseout=petakumpet(&quot;submenu5&quot;) onmouseover=umpetpetak(&quot;submenu5&quot;)><a href=#>JUDUL MENU 5</a>

<div class=ngumpet id=submenu5>

<ul>

<li><a href=#>Ganti Dengan Judulmu</a></li>

<li><a href=#>Ganti Dengan Judulmu</a></li>

<li><a href=#>Ganti Dengan Judulmu</a></li>

<li><a href=#>Ganti Dengan Judulmu</a></li>

</ul>

</div>

</li>

<li onmouseout=petakumpet(&quot;submenu6&quot;) onmouseover=umpetpetak(&quot;submenu6&quot;)><a href=#>JUDUL MENU 6</a>

<div class=ngumpet id=submenu6>

<ul>

<li><a href=#>Ganti Dengan Judulmu</a></li>

<li><a href=#>Ganti Dengan Judulmu</a></li>

<li><a href=#>Ganti Dengan Judulmu</a></li>

<li><a href=#>Ganti Dengan Judulmu</a></li>

<li><a href=#>Ganti Dengan Judulmu</a></li>

</ul>

</div>

</li>

</ul>

</div>

9. Ganti semua kode # pada submenu diatas dengan alamat URL label anda. Kemudian isikan Judul label tersebut pada tulisan yang berwarana biru, kecuali tanda # pada  Menu 1 s.d Menu 6 jika tidak ingin diberikan link biarkan saja seperti itu.
10. setelah selesai, silahkan simpan template anda. Jika anda kurang sreg dengan hasilnya karena tidak matching dengan template anda silahkan edit ukuran, tinggi, lebar, border,warna, maupun mengganti backgroundnya pada kode di atas  ]]></b:skin> tersebut.

Go to link Download

Cara Membuat Menu Tabview Accordion Di Blog

Cara Membuat Menu Tabview Accordion Di Blogspot

• Login ke Blogger anda.
• Masuk ke Layout, Add A Gadget pilih HTML/Javascript.
• Kemudian tambah widget dan masukkan kode di bawah ini ke kolom yg tersedia.
  <br /><style type="text/css">#accordion{width:100%;margin:auto;border:0px solid white} #accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjExWyog_Etmme0Wf-5jRGLx5b3CtwC4yG_qJ7nxJE4jYmbYwTQIYWOiQATMIHMGJNyFW0l0zOClb31PltreVfUpfW08vIydEmh6HAgP_6RMr3QWEcy0GfM8GCyYsg3lGSjN5CQ0lXjZso/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;} #accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;} #accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;} #accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;} #accordion .content li a:hover {text-decoration:none;color:#000;} #accordion h2.active{background-color:#bbb;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi03nya7f1OZUZSwXAhwyvIHtT8vzA4qrhCGArW_gCwOUOhm6XvrD3UrAuyUPK0f3Ouj-dgaQ3yn2odlHJb-sOfw27gYIJQ2gfphwbzMP7fDpmSY22ESuqwismvhcGD2mZiGV2gTbjD9C0/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;} </style><br /><script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script><br /><script type=text/javascript>$(function() { $(#accordion .content).hide(); $(#accordion h2:first).addClass(active).next().slideDown(slow); $(#accordion h2).click(function() { if($(this).next().is(:hidden)) { $(#accordion h2).removeClass(active).next().slideUp(slow); $(this).toggleClass(active).next().slideDown(slow); } }); }); </script><br /><div id="accordion"><h2>Title 1</h2><div class="content">Isi konten 1<br /></div><div id="accordion"><h2>Title 2</h2><div class="content">Isi konten 2<br /></div><div id="accordion"><h2>Title 3</h2><div class="content">Isi konten 3<br /></div><div id="accordion"><h2>Title 4</h2><div class="content">Isi konten 4<br /></div><div id="accordion"><h2>Title 5</h2><div class="content">Isi konten 5<br /></div></div></div></div></div></div>
  
• Terakhir simpan dan lihat hasil menu accordion pasti akan lebih menarik dari sebelumnya.

Go to link Download

Cara Membuat Menu Navigasi Di Blog

Catatan : Jika kode di atas tidak di temukan, itu karena setiap pengkodean CSS untuk template berbeda-beda tapi fungsinya sama, jadi carilah kode yang tidak jauh beda dengan nama di atas.

Go to link Download

Cara Membuat Menampilkan Halaman Statis Blog di Navigasi Menu

1. About (Tentang)
2. Sitemap (Daftar Isi)
3. Contact (Kontak)

1. Privacy Policy/Disclaimer
2. Services (Layanan)
3. Products (Produk)

1. Klik "Layout" > "Add a Gadget" 
2. Pilih "Page List"
3. Nah... di sinilah halaman statis Anda bermunculan.

Go to link Download

Cara membuat statusbar dialer dan menu setting transparan CyanogenMod Only

Oke selamat malam, kali ini admin akan memberikan tips bagi yang ingin membuat tampilan androidnya transparan :D

tapi sebelumnya kalian harus memiliki syarat" tertentu :v
- hh kalian sudah di root
- sudah ada cwm
- memakai Rom CM
- dan keberanian :D

oke kalau begitu langsung saja saya jelaskan caranya :
1. download file" yang diperlukan (ada di akhir)
2. taruh file tersebut di sdcard
3. masuk ke cwm
4. install zip
5. choose zip from sdcard
6. pilih file yang dicari, lalu install
7. reboot system now

selesai :D gampang kan ? tapi ingat anda harus menginstallnya 1 per 1 :D

ini dia akan saya beri contoh hh yang sudah transparan :

Go to link Download

Posted by Unknown at 8:14 AM

Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest

Labels: cara, cyanogenmod, dan, dialer, membuat, menu, only, setting, statusbar, transparan