Tips Membuat Navigasi Vertical

Hai sobat yang budiman saya menyediakan bagi para pencari navigasi Vertical, kita langsung saja.Et Contohnya kaya ini:

1-Login ke account blogger anda.
2-Click Layout---->EDIT HTML,Jangan lupa beri tanda centang pada kotak EXPAND WIDGET sebelumnya anda backup dulu template sobat klik Download Template Lengkap lalu simpat pada folder anda.
3-Copy pastekan script di bawah ini tepat diatas kode </head>;
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="ddaccordion.js">
/***********************************************
* Follow www.mutiaramail.blogspot.com)
***********************************************/
</script>

<script type="text/javascript">
ddaccordion.init({
headerclass: "headerbar", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "normal", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})

</script>
4. Kemudian Simpan kode dibawah ini sebelum ]]></b:skin>
.urbangreymenu{
width: 190px; /*width of menu*/
}

.urbangreymenu .headerbar{
font: bold 13px Verdana;
color: white;
background: #606060 url(arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
}

.urbangreymenu .headerbar a{
text-decoration: none;
color: white;
display: block;
}

.urbangreymenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}

.urbangreymenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.urbangreymenu ul li a{
font: normal 12px Arial;
color: black;
background: #E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}

.urbangreymenu ul li a:visited{
color: black;
}

.urbangreymenu ul li a:hover{ /*hover state CSS*/
color: white;
background: black;
}
5. Simpan kode dibawah ini pada HTML Anda
<div class="urbangreymenu">
<h3 class="headerbar"><a href="http://www.mutiaramail.blogspot.com">Blog Kita</a></h3>
<ul class="submenu">
<li><a href="http://www.mutiaramail.blogspot.com">Mutiaramail</a></li>
<li><a href="http://www.sumbloggers.blogspot.com">Blog Invest</a></li>
<li><a href="http://blogger-trade-online.blogspot.com">Harga Saham</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit&lt;/a></li>
<li><a href="#">Edit&lt;/a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
</ul>

<h3 class="headerbar"><a href="#">Edit&lt;/a></h3>
<ul class="submenu">
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
</ul>

</div>
6. Terakhir ganti kode yang berwarna biru dan anda bisa download JS dibawah ini :

Download

Read More

Postingan terlihat di Sidebar

Anda menginginkan postingan anda terlihat atau terkontrol sidebar anda? Pasanglah kode sibawah ini, carannya :
1-Log in ke account blogger anda.
2-Click Layout--->
3-Tambahkan Gadget, sebelumnya ganti kode yang berwarna biru dengan nama blog anda kemudian pastekan script dibawah ini:
<script
src="http://fun4utips.googlepages.com/recentpostSidebar.js"></script> <script>var numposts = 10;
var showpostdate = false; var showpostsummary = false; var numchars =
100; </script>
<script src="http://YOURBLOGNAME.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>
4.Simpan dan selesei

Read More

Drop down menu button untuk Blog Anda

Hallo Saya ada tips setelah jalan-jalan yang sangat melelahkan, kita langsung praktek aja.
1-Log in ke account blogger anda.
2-Click Layout--->
3-Tambahkan Gadget, kemudian pastekan script dibawah ini:
<form name="Menu">
<select name="menu">
<option value="http://mutiaramail.blogspot.com">Mutiara Info</a>
<option value="http://www.yahoo.com">Yahoo!</a>
<option value="http://www.google.com">Google</a>
</select>
<input type="button" onClick="top.location=document.Menu.menu.options[document.Menu.menu.selectedIndex].value;" value="GO!">
</form>
4.Lalu simpan
5.Selesei

Read More

Menghilangkan Navbar (Navigation Bar)

Navbar adalah fasilitas yang dimiliki oleh Blogger/blogspot, bentuknya berupa kotak kecil memanjang kesamping yang letaknya berada di bagian paling atas dari blog yang fungsinya antara lain untuk mulai melakukan Sign In/out atau bisa juga membuat Blog baru. Navigation Bar juga bisa digunakan untuk melaporkan kecurangan atau tindak kejahatan weblog yang dilakukan oleh seorang blogger, misalnya kontent blognya yang melanggar TOS atau hal-hal yang dianggap merugikan orang lain.

Namun ada beberapa blogger yang merasa akan lebih enak jika melihat tampilan blognya dalam keadaan bersih tanpa harus ada bagian mencolok di bagian atas blognya sendiri (NavBar). Karena itu, kadang para blogger menghapus NavBar tersebut. Pertanyaannya adalah: Apa tidak melanggar Term of Service (TOS) dari Blogger.com?
Sejauh ini, banyak blogger yang telah menghilangkan Navbar mereka dan tidak juga mendapat teguran dari blogger. Artinya, bisa dilakukan. Toh di TOS Blogger sendiri juga tidak ada aturan yang cukup detail tentang hal ini.

Nah, bagaimana menghilangkan Navigation Bar?
Ada beberapa penyedia template yang memang sudah tidak ada NavBar-nya. Namun bagi kamu yang memakai template yang masih ada NavBarnya dan ingin menghilangkannya maka inilah caranya.

1. Sobat harus Login dulu di Blogger.com / Blogspot.com
2. Trus Pilih Layout --> Edit HTML
3. Copy script berikut ke dalam tag head
#navbar-iframe {
display: none !important;
}
contohnya sebagai berikut :
-----------------------------------------------
Blogger Template Style
Name: JUST NEWS
Designer: NewWpThemes.com
URL: http://newwpthemes.com/wordpress-theme/just-news/
Date: 15 AGO 2009
Updated by: Dhampire
----------------------------------------------- */
#navbar-iframe {
display: none !important;
}

/* Variable definitions
====================

4. Kemudian simpan.

Selamat Mencoba.....!!

Read More

3subs-Menu

Hallo sobat yang budiman, kalo kita membicarakan masalah trick atau tips tidak akan ada habisnya. Nah ini saya punya salah satu macam Navigasi buat sobat.Contohnya seperti ini :

1-Log in ke account blogger anda.
2-Click Layout---->EDIT HTML,Jangan lupa beri tanda centang pada kotak EXPAND WIDGET sebelumnya anda backup dulu template sobat klik Download Template Lengkap lalu simpan pada folder anda.
3-Copy pastekan script di bawah ini sebelum kode ]]></b:skin> tag:
.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
}
.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}
* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}
.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
2.Tambah kode dibawah ini sebelum </head> tag:
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://yourhost.menu.js"></script>
<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

Download

Upload menu.js file ke hosting seperti (110mb.com,hotlinkfiles.com...)
kemudian pastekan ke kode yang berwarna biru.
3.Simpan kode dibawah ini kemudian letakkan pada HTML/Javscript, anda:
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://mutiaramail.blogspot.com">Mutiaramail</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://mutiaramail.blogspot.com">Make This Menu</a></li>
<li><a href="http://sumbloggers.blogspot.com">Blog Invest</a></li>
</ul>
<br style="clear: left"/>
</div>
Selamat mencoba dan Semoga berhasil.

Read More

Slide-In Menu

Apa kabar saya datang lagi guna membagi tips buat anda para blogger yang budiman tidak usah basa basi ini contohnya:

Langkah Pertama :
1-Log in ke account blogger anda.
2-Click Lay Out---->EDIT HTML,Jangan lupa beri tanda centang pada kotak EXPAND WIDGET sebelumnya anda backup dulu template sobat klik Download Template Lengkap lalu simpat pada folder anda.
3-Cari kode didalam template anda,letaknya di bagian atas.
4-Copy pastekan script di bawah ini tepat diatas kode </head>;
<style type="text/css">
<!--
A.ssmItems:link {color:black;text-decoration:none;}
A.ssmItems:hover {color:black;text-decoration:none;}
A.ssmItems:active {color:black;text-decoration:none;}
A.ssmItems:visited {color:black;text-decoration:none;}
//-->
</style>
<SCRIPT SRC="ssm.js" language="JavaScript1.2">
//Dynamic-FX slide in menu v6.5 (By maXimus, http://maximus.ravecore.com/)
//Updated July 8th, 03' for doctype bug
//For full source, and 100's more DHTML scripts, visit http://www.dynamicdrive.com
</SCRIPT>
<SCRIPT SRC="ssmItems.js" language="JavaScript1.2"></SCRIPT>

Ganti Kode yang berwarna biru sesuai dengan kebutuhan, kemudian Copy paste kode dibawah kedalam notepad lalu save as ke "js"
<!--
/*
Configure menu styles below
NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors
*/
YOffset=150; // no quotes!!
XOffset=0;
staticYOffset=30; // no quotes!!
slideSpeed=20 // no quotes!!
waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
menuBGColor="black";
menuIsStatic="yes"; //this sets whether menu should stay static on the screen
menuWidth=150; // Must be a multiple of 10! no quotes!!
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#170088";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="15";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="white";
linkOverBGColor="#FFFF99";
linkTarget="_top";
linkAlign="Left";
barBGColor="#444444";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="white";
barVAlign="center";
barWidth=20; // no quotes!!
barText="SIDE MENU"; // <IMG> tag supported. Put exact html for an image to show.
///////////////////////////
// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
ssmItems[0]=["Menu"] //create header
ssmItems[1]=["Mutiaramail", "http://mutiaramail.blogspot.com", ""]
ssmItems[2]=["Edit", "Edit",""]
ssmItems[3]=["Edit", "Edit",""]
ssmItems[4]=["Edit", "Edit",""]
ssmItems[5]=["Edit", "Edit",""]
ssmItems[6]=["Edit", "Edit",""]
ssmItems[7]=["Edit", "Edit/faqs.htm", "", 1, "no"] //create two column row
ssmItems[8]=["Edit", "Edit/contact.htm", "",1]
ssmItems[9]=["Edit", "", ""] //create header
ssmItems[10]=["Edit", "Edit",""]
ssmItems[11]=["Edit", "Edit",""]
ssmItems[12]=["Edit", "Edit",""]
buildMenu();
//-->
Kemudian Download ssm.js dibawah ini:

Download

Read More

New Navigation

Hallo kawan saya ada Navigasi buat anda, mudah-mudahan anda menyukainya, oke kita mulai saja.
Letakkan code dibawah ini ditas </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="jkmegamenu.css" />
<script type="text/javascript" src="jkmegamenu.js">
/***********************************************
* jQuery Mega Menu- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* follow http://mutiaramail.blogspot.com
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/
</script>
<script type="text/javascript">
//jkmegamenu.definemenu("anchorid", "menuid", "mouseover|click")
jkmegamenu.definemenu("megaanchor", "megamenu1", "mouseover")
</script>
Kemudian Letakkan kode dibawah ini pada HTML anda
<!--Mega Menu Anchor-->
<a href="http://www.javascriptkit.com" id="megaanchor">Tech Links</a>
<!--Mega Drop Down Menu HTML. Retain given CSS classes-->
<div id="megamenu1" class="megamenu">
<div class="column">
<h3>Web Development</h3>
<ul>
<li><a href="http://www.mutiaramail.blogspot.com">Mutiaramail</a></li>
<li><a href="http://www.sumbloggers.blogspot.com/">Bloginvest</a></li>
<li><a href="Link 1">Link 1</a></li>
<li><a href="Link 2">Link 2</a></li>
<li><a href="Link 3">Link 3</a></li>
</ul>
</div>

<div class="column">
<h3>News Related</h3>
<ul>
<li><a href="http://www.cnn.com/">CNN</a></li>
<li><a href="http://www.msnbc.com">MSNBC</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://news.bbc.co.uk">BBC News</a></li>
</ul>
</div>

<div class="column">
<h3>Technology</h3>
<ul>
<li><a href="http://www.news.com/">News.com</a></li>
<li><a href="http://www.slashdot.com">SlashDot</a></li>
<li><a href="http://www.digg.com">Digg</a></li>
<li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
</ul>
</div>

<br style="clear: left" /> <!--Break after 3rd column. Move this if desired-->

<div class="column">
<h3>Web Development</h3>
<ul>
<li><a href="http://mutiaramail.blogspot.com">JavaScript Kit</a></li>
<li><a href="http://mutiaramail.blogspot.com/">Dynamic Drive</a></li>
<li><a href="http://mutiaramail.blogspot.com">CSS Drive</a></li>
<li><a href="http://mutiaramail.blogspot.com">Coding Forums</a></li>
<li><a href="http://mutiaramail.blogspot.com/">DOM Reference</a></li>
</ul>
</div>

<div class="column">
<h3>News Related</h3>
<ul>
<li><a href="http://www.cnn.com/">CNN</a></li>
<li><a href="http://www.msnbc.com">MSNBC</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://news.bbc.co.uk">BBC News</a></li>
</ul>
</div>

<div class="column">
<h3>Technology</h3>
<ul>
<li><a href="http://www.news.com/">News.com</a></li>
<li><a href="http://www.slashdot.com">SlashDot</a></li>
<li><a href="http://www.digg.com">Digg</a></li>
<li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
</ul>
</div>
</div>

Download

Selamat mencoba dan semoga anda sukses.

Read More