Membuat Menu Tab View Tanpa Merubah Template Blog

Menu Tab View adalah wignet yang pas sekali dan praktis di gunakan sebagai menu navigasi yang bisa meringkas dan menyimpan link , data , maupun widget yang lain , sehingga blog kita kelihatan lebih praktis dan profesional. Sering kita jumpai dalam pembuatan menu tab view memerlukan editing template yang cukup rumit dan berbelit-belit, sehingga kitapun merasa kesulitan dan pusing di buatnya.. Kali ini penulis akan berbagi info dengan sobat bloggger semuanya cara Membuat Menu Tab View Tanpa Merubah Template Blog yang lebih praktis dan mudah sobat. Baiklah mari kita ikuti cara-cara pembuatannya ya sobat.

Caranya sebagai berikut sobat :

1.   Login ke akun blogger anda dan pilih blog mana yang akan anda buat recent comments

2.   Pilih Layout (Rancangan/ Tata letak) >> Add Page Gadget (tambah elemen halaman) pada sidebar atau dimana saja sesuai keinginan anda dan pilih HTML/JavaScript

3.   Kemudian masukkan scrip dibawah ini :

<style type="text/css">
div.TabView div.Tabs
{height: 25px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 77px; /* Main Menu Top Width */
text-align:center ; height: 25px; /* Top High Main Menu
*/
padding-top:5px; vertical-align:middle; border:1px solid #303030; /* Top Menu border color */
border-bottom-width:0; text-decoration: bold; font-family: "Verdana", Serif; /* Top Fonts Main Menu */
font-weight:none; font: normal 12px arial; letter-spacing:-0.07em; background:#CF2023; color:#000000; /* Main Menu Font Color Top */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background: #E17612; color: #000000; font-weight:bold; /* Background colors on Main Menu */ }
div.TabView div.Pages {clear:both; border:1px solid #303030; /* Main Box border color */ overflow:hidden; background-color:#ffffff; /* Main Box background color */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Nama Menu 1</a>


<a>Nama Menu 2</a>


<a>Nama Menu 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi dengan apa saja yang sobat mau 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi dengan apa saja yang sobat mau 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi dengan apa saja yang sobat mau 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Catatan :

*   Untuk text yang berwarna orange adalah sebagai penjelasan dan keterangaan untuk mengedit kata sebelum text itu.
*   Untuk text yang berwarna hijau ganti dengan nama menu yang sobat inginkan.
*   Untuk text yang berwarna pink atur dan sesuaikan dengan lebar dan tinggi template sobat.
*   Untuk text yang berwarna kuning isi dengan apa saja yang sobat mau.

4.   Simpan dan lihat hasilnya sobat.
5.   Contoh hasinya adalah sebagai berikut seperti punya saya sobat :

Semoga berhasil dan bermanmaat sobat ya

readmore »»  

Membuat Menu Horisontal Dropdown Dengan jQuery

Hallo sobat ketemu lagi nich di bulan yang penuh berkah ini. Masih ingatkah sobat dengan Menu Horisontal Dropdown. Udah pad punya belom nich menu seperti ini. Kalo belom Heeem kali ini saya akan berbagi  lagi tentang cara Membuat Menu Horisontal Dropdown Dengan jQuery. Menu horisontal yang ini cukup menawan sobat, sehingga kalu sobat memasang pada blog sobat maka tampilan blog sobat akan lebih keren lagi sobat. Yang pastinya akan menarik lebih banyak pengunjung ke blog sobat. Langsung saja lihat penampakanya ya sobat, Mau tau seperti apa tampilannya. Ini dia contoh gambarnya sobat :

Langsung saja kita kasih tau cara membuatnya yach. Ikuti saja langkah berikut ini sobat :

1.   Sebelum memulai mengedit saya sarankan buat menyimpan template punya sobat dulu yach.

2.   Login ke Blogger , pergi ke Tata Letak -> Edit HTML

dan tandai kotak centang " Expand Template Widget ".

3.   Sekarang cari (CTRL + F) kode ini di template </head> dan masukkan kode berikut ini sebelum kode tadi atau di atas kode tadi

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){


$(&quot;ul.subnav&quot;).parent().append(&quot;<span/>&quot;); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav


$(&quot;ul.topnav li span&quot;).click(function() { //When trigger is clicked...


//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find(&quot;ul.subnav&quot;).slideDown(&#39;fast&#39;).show(); //Drop down the subnav on click


$(this).parent().hover(function() {
}, function(){
$(this).parent().find(&quot;ul.subnav&quot;).slideUp(&#39;slow&#39;); //When the mouse hovers out of the subnav, move it back up
});


//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass(&quot;subhover&quot;); //On hover over, add class &quot;subhover&quot;
}, function(){ //On Hover Out
$(this).removeClass(&quot;subhover&quot;); //On hover out, remove class &quot;subhover&quot;
});


});
</script>
<style type='text/css'>
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 100%;
background: #222;
font-size: 1.2em;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoWA7ybag0Js8_0Ex2JRg_2P954_DNtXRpJ1RkZXfy5rnRBllTgA0qctExsmhDGyRCY33Bs28VKRhjn_h4zFQJMhrvxsS6cVE0rm7rE3NHmislFVwKjZpCiHykpmeuxe79opBr9ykPmXsB/) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base--*/
}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyeSUmXbkWzUFLD2gtlzQCL7XQXVC6T3j3XgpXjYztUFftc6DYQZTz-juOvKXX0emqh9SjeUZOc9Rw_h3gg15STh6MSulNiwOtFIVWs4pDS2v2ShbeOWbYvnk0JIJ8KIRL6UqOh_wX0m-C/) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje5M70lQWXz6fHXEeALPSIafdHcx1v4701-6uRiBJwA8DZ_1gLXqLosJIxE-G95e0_rZgL8Gq4maDriX6v2kCNtn1h2W8P79O_2m4Nzog_ky543dx5APi06AEOl3EZOKAt3-MOJwuOe72R/) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Create bevel effect--*/
border-bottom: 1px solid #444; /*--Create bevel effect--*/
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDNhw-tcbPpDyV_MSoeKsm3hvsVOHkHFWhdKcBXZUbHs5goTNpO97qaFB6UcKot92cqQWSI7UIzYBbQf2uUnMd4j5iJp4JN4hrYmBfPYi5uj4NB97Gj8uHRbEOsy1i5cLbfvFG3PKNnUpF/) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDNhw-tcbPpDyV_MSoeKsm3hvsVOHkHFWhdKcBXZUbHs5goTNpO97qaFB6UcKot92cqQWSI7UIzYBbQf2uUnMd4j5iJp4JN4hrYmBfPYi5uj4NB97Gj8uHRbEOsy1i5cLbfvFG3PKNnUpF/) no-repeat 10px center;
}
#header img {
margin: 20px 0 10px;
}
</style>

4.   Kemudian simpan template punya sobat terlebih dahulu.
5.   Masuk menu Layout kemudian masuk menu Page Elements
6.   Pilih box layout yang diinginkan kemudian klik Add a gadgets
7.   Pilih salah satu Gadget HTML/JavaScript dan taruh code dibawah ini di posisi header :

<ul class="topnav">


<li><a href="#">Home</a></li>
<li>
<a href="#">Tutorials</a>
<ul class="subnav">
<li><a href="#">HTML Tutorials</a></li>
<li><a href="#">CSS Tutorials</a></li>
<li><a href="#">PHP Tutorials</a></li>
<li><a href="#">SQL Tutorials</a></li>
<li><a href="#">jQuery Tutorials</a></li>
</ul>
</li>
<li>
<a href="#">Templates</a>
<ul class="subnav">
<li><a href="#">1 Column</a></li>
<li><a href="#">2 Column</a></li>
<li><a href="#">3 Column</a></li>
<li><a href="#">4 Column</a></li>
<li><a href="#">Premium</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Subscribe</a></li>
<li><a href="#">Contact Us</a></li>


</ul>

Catatan :

*   Untuk tanda # dapat sobat ganti dengan url atau link yang sobat mau
*   Untuk Teks yang berwarna orange dapat sobat ganti dengan sesuai keinginan sobat

8.   Simpan dan lihat hasilnya ya sobat

Semoga berhasil dan sukses ya

readmore »»  

Cara Membuat Horizontal Drop Down Menu Pada Blogspot

Horizontal Drop Down Menu, apa ya itu. Buat teman-teman yg belum tau apa itu menu dropdown, menu drop down ini adalah menu navigasi yang akan menampilkan sub menu di bawahnya secara otomatis apabila disorot oleh mouse. Sebenarnya banyak cara yang bisa dipakai untuk membuat menu drop down, dan salah-satu cara yang saya pakai adalah ya di bawah ini. Mungkin untuk melihat hasilnya seperti apa langsung saja kita praktekin saja caranya ya sobat.

Ikuti saja langkah berikut ini sobat :

1.   Sebelum memulai mengedit sebaiknya template punya sobat diedit terlebih dahulu ya.

2.   Login ke blogger dulu sobat ya.

3.   Klik tata letak.

4.   Klik sunting HTML.

5.   Contreng Expand Template Widget.

6.   Cari kode ]]></b:skin>, kemudian letakkan kode berikut sebelum kode ]]></b:skin>

Jqueryslidemenu {.
font: 12px tebal Trebuchet MS; background: # 414141; width: 100%;} ul {jqueryslidemenu. margin: 0; padding: 0; daftar-style-type: none;} / * daftar item tingkat Atas * / . jqueryslidemenu ul li { position: relative; display: inline; float: left;} / * Tingkat Top menu item link yang gaya * / ul li jqueryslidemenu a {. display: block; background: # 414141; / * background tab (default negara) * / warna: putih; padding: 8px 10px; perbatasan-kanan: 1px solid # 778; color: # 2d2b2b; text-decoration: none;} . * html ul li a jqueryslidemenu {/ * IE6 hack untuk mendapatkan sub menu link untuk berperilaku secara benar * / display: inline-block;} . jqueryslidemenu ul li a: link, ul li jqueryslidemenu a: visited {. warna: putih;} ul li jqueryslidemenu a: hover {. latar belakang: hitam; / * link tab latar belakang selama negara hover * / warna: putih;} / * 1 tingkat sub menu * / ul li ul jqueryslidemenu {. position: absolute; left: 0; display: block; visibility: hidden;} / * item menu tingkat Sub daftar ( membatalkan gaya dari Daftar Barang tingkat Atas) * / ul li ul jqueryslidemenu li. { display: list-item; float: none;} / * Semua tingkat sub menu berikutnya offset vertikal setelah 1 tingkat sub menu * / . jqueryslidemenu ul li ul li ul {top: 0;} / * Sub level menu link style * / ul li ul jqueryslidemenu li a {. font: 13px Verdana normal; width: 160px; / * lebar sub menu * / padding: 5px; margin: 0; border-top-width: 0; perbatasan-bottom: 1px kelabu;} . jqueryslidemenuz ul li ul li a: hover {/ * hover * sub menu gaya / background: # eff9ff; warna: hitam;} / * CSS kelas diterapkan gambar panah bawah dan kanan * / . downarrowclass { position: absolute; top: 12px; kanan: 7px;} . rightarrowclass { position: absolute; top: 6px; kanan: 5px;}

7.   Kemudian letakkan kode berikut sebelum kode </ head>

<!--[ If IE 7 LTE]>
<style type="text/css">
html jqueryslidemenu {height: 1%;} / * Holly Hack untuk IE7 dan di bawah * /.
</ style>
<[endif]! -> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/> <script src = 'http: / 'type =' / h1.ripway.com/anshul555/slidemenu_horiz.js text / javascript '/>

8.   Cari kode seperti ini yang mirip

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b: widget id = 'Header1' dikunci = 'true' title '= Judul Blog Sobat(Header) 'type =' Header '/>
</ b: section>
</ div>

Catatan : Untuk tulisan yang berwarna orange ganti dengan judul blog sobat

9.   Kemudian letakkan kode berikut tepat antara kode </ b: section> dan </ div>

<div class='jqueryslidemenu' id='myslidemenu'>
<ul>
<li> <a href='http://namablogsobat.blogspot.com'> Depan </ a> </ li>
<li> <a href='#'> Daftar Isi </ a> </ li>
<li> <a href='#'>Menu </ a>
<ul>
<li> <a href='#'> Menu 1.1 < / a> </ li>
<li> <a href='#'> Menu 1.2 </ a> </ li>
<li> <a href='#'> Menu 1.3 </ a> </ li >
</ ul>
</ li>
<li> <a href='#'> Menu </ a> </ li>
<li> <a href='#'> Menu </ a>
<ul>
< li> <a href='#'>Menu 2.1 </ a> </ li>
<li> <a href='#'> Menu 2.1 </ a>
<ul>
<li> <a href='# '>Menu 2.1.1 </ a> </ li>
<li> <a href='#'> Menu 2.1.2 </ a> </ li>
<li> <a href='#'> Menu 3.1.1 </ a>
<ul>
<li> <a href='#'> Menu 3.1.1.1 </ a> </ li>
<li> <a href='#'> Menu 3.1.1.2 </ a> </ li>
<li> <a href='#'> Menu 3.1.1.3 </ a> </ li>
<li> <a href='#'> Menu 3.1.1.4 < / a> </ li>
</ ul>
</ li>
<li> <a href='#'> Menu 2.1.4 </ a> </ li>
</ ul>
</ li>
</ ul >
</ li>
<li> <a href='#'> Menu </ a> </ li>
</ ul>
<br style='clear: left'/>
< / div>

Catatan :

*   Untuk text yang berwarna hijau silahkan sobat ganti dengan URL atau alamat link yang sobat mau
*   Untuk taxt yang berwarna orange silahkan sobat ganti dengan nama atau judul sesuai dengan keinginan sobat juga.

10.   Jangan langsung disimpan tapi dipreview dulu ya sobat, dan lihat hasilnya.

Semoga berhasil dan sukses ya sobat

readmore »»  

Cara Membuat Menu Vertikal Pada Blogspot

Baiklah sobat kita berbagi ilmu lagi sobat. Kali ini mari kita membahas soal Cara Membuat Menu Vertikal Pada Blogspot. Dah tau belum apa itu menu vertikal. Yach hampir sama sich seperti perbahasan kita kemarin tentang Cara Membuat Menu Horisontal Pada Blogspot. Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar secara vertikal. Gak usah berlama lama ya. Ayo langsung saja sobat.

Ikuti cara berikut ini :

1.   Sebelum memulai mengedit jangan lupa disimpan dulu ya template punya sobat.

2.   Login ke blogger trus pilih "Layout-->Edit HTML"

3.   Masukkan kode berikut sebelum kode ]]></b:skin> atau </style> sebelum kode. Pokoknya ditaruh di dalam Barisan kode CSS aja yach.

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/blue2.gif');
}


* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

Catatan :

Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1 dan blue2). Ganti kode tersebut dengan pilihan warna green1 dan green2 atau red1 dan red2 sobat.

4.   Kemudian di save.
5.   Lalu pergi ke menu "Page Elements"
6.   Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya.

<ul id="verticalmenu" class="glossymenu">
<li><a href="http://menu1.com">Menu1</a></li>
<li><a href="http://menu2.com">Menu2</a></li>
<li><a href="http://menu3.com">Menu3</a></li>
<li><a href="http://menu4.com">Menu4</a></li>
</li>
</ul>

Catatan :

Kode yang berwarna orange adalah linknya dan yg warna hijau adalah teks yang ditampilkan. Silahkan Ubah sesuai dengan keinginan sobat.

7.   Save dan lihat hasilnya ya sobat.

Moga berhasil dan bermanfaat ya.

readmore »»  

Cara Membuat Menu Horisontal Pada Blogspot

Hallo sobat, apa kabar nich hari ini semua. Oke kali ini kita akan membahas tentang Cara Membuat Menu Horisontal Pada Blogspot. Menu horizontal merupakan kumpulan beberapa link yang diletakkan secara horizontal dan biasanya ditempatkan di bawah header. Fungsi dari trik blogger ini adalah sebagai salah satu navigasi dalam blog agar memberikan layanan kemudahan shortcut link bagi pengunjung blog kamu. Langsung saja ya sobat percantik blog kamu dengan menu horisontal ini.

Begini caranya sobat :

1.    Sebelum memulai mengedit lebih baik sobat simpan dulu template punya sobat, biar aman saja.

2.    Login ke account blogger kamu.

3.    Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

4.    Cari kode ]]></b:skin>  dan Copy-Paste kode berikut di atasnya.

/* navbar
================== */


#bg_nav {
background: #ffffff;
width: 850px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #000000;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #000000;
border-bottom: 1px solid #ffffff;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #000000;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}


#bg_nav a:hover {
color: #000000;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}


#navleft {
width: 500px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 3px 5px 0px 0px;
}


#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}


#nav a, #nav a:visited {
background: #ffffff;
color: #000000;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #ffffff;
}
#nav a:hover {
background: #c06000;
color: #000000;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}


#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
background: #c06000;
padding: 7px 30px 7px 10px;
}


#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}


#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

Catatan :

*    Agar menu horizontal sesuai dengan template blog, kamu perlu mengganti kode-kode yang berwarna hijau dan orange.
*    Khusus untuk kode yang berwarna hijau, sangat penting disesuaikan dengan lebar blog kamu.
*    Untuk kode pewarnaan, kamu bisa melihatnya di kode warna di sini.

5.   Kemudian cari kembali kode seperti di bawah ini.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>
<b:widget id='Header1' locked='true' title='test
(Header)' type='Header'/>


... dan seterusnya ...


</b:section>
</div>

6.    Copy dan paste kode berikut tepat di bawah kode yang berwarna hijau atau berwarna merah (sesuaikan dengan template blog kamu).

<div id='bg_nav'>


<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
</ul>
</div>
</div>


<div id='navright'>


<form action='http://Alamat_Blog_Kamu.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/>
</form>


</div>


</div><!-- akhir bg_nav -->

Catatan :

*    Untuk yang berwarna orange dan hijau ganti dengan apa yang sobat mau.

7.   Jangan lupa di priview dulu sebelum di simpen ya sobat dan lihat hasilnya

Semoga bermanfaat dan sukses ya sobat.

readmore »»  

Cara Membuat Navigasi Next and Back Pada Halaman Blog

Hallo sobat negeri semua, kali ini saya akan berbagi ilmu tentang Cara Membuat Navigasi Next and Back Pada Halaman Blog. Tau kan pada saat blog muncul pada halaman pertama, nah di ditu biasanya muncul tulisan di bawah postingan. Nah kali ini akan kita ganti dengan tulisan Back, 1, 2, 3,....Next. Bagaimana cara membuat Tombol Next pada halaman, seperti yang pernah kita lihat ada beberapa Web /Blog yang memakai cara ini tapi tidak semua dapat memakainya ada yang tidak bisa muncul tombol nextnya.

baik kita mulai pembahasan kita. langsung saja ya ikuti cara berikut ya :

1.    Login dulu ke blog anda

2.    Pilih Tata Letak, klik HTML/Java Script

3.    Kemudian copy code dibawah ini

<style>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#000000;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#000000;
}


</style>








<script type="text/javascript">


function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=5;
var displayPageNum=6;
var firstPageWord = 'First';
var endPageWord = 'last';
var upPageWord ='Back';
var downPageWord ='Next';




var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';


for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}


postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){


itemCount++;
}


}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}


if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}


for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}


fFlag++;
}


if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}


if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){


if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"></span>'+upPageHtml+' '+html +' ';
}
}


html = '<div class="showpageArea"><span class="showpage"> Total '+(postNum-1)+': </span>'+html;


if(thisNum<(postNum-1)){
html += downPageHtml;


}


if(postNum==1) postNum++;
html += '</div>';


if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");


if(postNum <= 2){
html ='';
}


for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}


if(pageArea&&pageArea.length>0){
html ='';
}


if(blogPager){
blogPager.innerHTML = html;
}
}


}
</script>


<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

Contoh hasilnya kayak gini sobat :

4.   Save dan lihat hasilnya sobat

Semoga bermanfaat ya

readmore »»