Wawasan spiritual dan blogging: menu Belajar tutorial blogging dan wawasan spiritual

Tampilkan postingan dengan label menu. Tampilkan semua postingan

11 Maret 2014

Widget menu navigasi bar 3D adalah salah satu widget yang loadingnya cepat dan dikembangkan pada html dan css tanpa javascript. Widget ini termasuk salah satu widget terbaik untuk para blogger.

View Demo

Menu navigasi ini memiliki efek 3D ketika Anda mengarahkan kursor mouse ke menu, maka submenu akan muncul seperti buku dan terlihat seperti melayang itulah salahsatu alasan kenapa di beri nama widget menu navigasi bar 3D melayang. Menu navigasi ini dibuat dalam html dan murni menggunakan css dan tidak pernah menggunakan javascript untuk memberikan efek 3D.

Kualitas Menu Navigasi ini diantaranya:

Loading yang cepat

Berbasis html dan css.

Tidak menggunakan Javascript.

Sangat mengagumkan dan menarik.

Ini adalah salah satu menu navigasi profesional dengan warna biru dan mungkin Anda belum melihat menu navigasi seperti yang indah dan atraktif yang pernah ada sebelumnya. Penulis telah memberikan link demo dari menu ini di mana Anda dapat melihatnya betapa indah dan terkesan profesional.

Multi submenu

Navigasi menu 3D ini memiliki multi-submenu. Ketika Anda mengarahkan kursor mouse ke menu ini maka akan nampak 3 kotak submenu dan tidak hanya satu saja. Silahkan di edit sesuai dengan kebutuhan blog anda. Dan Anda memiliki kendali penuh atas menu navigasi 3D ini. Jadi silahkan ikuti tutorial untuk menginstal widget menu navigasi bar 3D ini ke blog Anda...:)

Cara menambahkannya di blog

Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
Kemudian pilih-> Template -> Edit HTML

Kemudian cari tag/kode ]]></b:skin> tekan Ctrl + F untuk memudahkan proses pencarian
Setelah ketemu letakan kode berikut tepat diatas kode
]]></b:skin>

.menuHolder {margin:25px 0 100px 0; text-align:center; position:relative; height:40px; z-index:20; background:#069;
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
border-radius:8px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-moz-perspective: 100px;
-webkit-perspective: 100px;
-o-perspective: 100px;
perspective: 100px;
}
.menuHolder ul.nav li {display:inline-block; display:inline;}
.menuHolder ul.nav {padding:0; margin:0; list-style:none; display:inline-block;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.menuHolder ul.nav li {float:left; display:block; padding:0 4px;}
.menuHolder ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;}
.menuHolder ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0;
border-radius:0 0 15px 15px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-moz-transform-origin: 0px 0px;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-o-transform-origin: 0px 0px;
-o-transform: rotateX(-90deg);
transform-origin: 0px 0px;
transform: rotateX(-90deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.menuHolder ul.nav div.left {left:auto; right:4px;}
.menuHolder ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div ul.colLeft {margin-left:10px;}
.menuHolder ul.nav div ul.colRight {margin-right:10px;}
.menuHolder ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
.menuHolder ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menuHolder ul.nav div ul li:last-child {border:0;}
.menuHolder ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(droplistcolumns/arrow.gif) no-repeat left center;}
.menuHolder ul.nav div ul li a:hover {color:#09c; background:transparent url(droplistcolumns/arrow.gif) no-repeat 1px center;}
.menuHolder ul.nav div.col1 {width:160px;}
.menuHolder ul.nav div.col2 {width:310px;}
.menuHolder ul.nav div.col3 {width:460px;}
.menuHolder ul.nav li:hover div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}

Simpan template...

Langkah selanjutnya:

Masuk ke akun Blogger anda -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript

Kemudian kopi dan Pastekan kode di bawah ini didalamnya

<div id="info">
<div class="menuHolder">
<ul class="nav">
<li><a class="top-a" href="#url"><b>Home</b></a></li>
<li><a class="top-a" href="http://www.avdhootblogger.com"><b>Blogging</b></a>
<div class="col3">
<ul class="colLeft">
<li><a href="http://jalu-pangna.blogspot.com/search/label/tips%20dan%20triks%20blog">tips dan triks blog</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/blog%20tutorial">blog tutorial</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/CSS">CSS</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/jquery-javascript">Jquery javascript</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/widget">widget</a></li>
</ul>
<ul class="col">
<li><a href="http://jalu-pangna.blogspot.com/search/label/animasi">animasi</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/Tips%20SEO">tips seo</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/jejaring%20sosial">jejaring sosial</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/ajax">ajax</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">animasi</a></li>
<li><a href="#url">tips seo</a></li>
<li><a href="#url">jejaring sosial</a></li>
<li><a href="#url">ajax</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>spiritual</b></a>
<div class="col2">
<ul class="colLeft">
<li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20spiritual">wawasan spiritual</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/spiritual">spiritual</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/suluk">suluk</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/sejarah">sejarah</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/babad">babad</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">wawasan spiritual</a></li>
<li><a href="#url">spiritual</a></li>
<li><a href="#url">suluk</a></li>
<li><a href="#url">sejarah</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Contact</b></a>
<div class="col1">
<ul class="colSingle">
<li><a href="http://jalu-pangna.blogspot.com/p/blog-page_1213.html">contact us</a></li>
<li><a href="http://jalu-pangna.blogspot.com/p/about-us.html">about us</a></li>
<li><a href="http://jalu-pangna.blogspot.com/2012/11/daftar-link-otomatis-dengan-mister-linky.html">tukar link</a></li>
<li><a href="http://jalu-pangna.blogspot.com/p/blog-page_15.html">site info</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="http://jalu-pangna.blogspot.com/p/privacy-policy-for-sijalupangna.html"><b>Privacy</b></a></li>
<li><a class="top-a" href="#url"><b>lain-lain</b></a>
<div class="col2 left">
<ul class="colLeft">
<li><a href="#url">tips dan triks blog</a></li>
<li><a href="#url">blog tutorial</a></li>
<li><a href="#url">css</a></li>
<li><a href="#url">jquery javasript</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">widget</a></li>
<li><a href="#url">animasi</a></li>
<li><a href="#url">tips seo</a></li>
<li><a href="#url">jejaring sosial</a></li>
</ul>
</div>
</li>
</ul>
</div>
<br /><br /><br /><br /><br /><br /><br /><br />
</div>

Simpan Gadget... Selesai.

KET:

Kode yang di sorot warna biru adalah Link/URL, Silahkan anda ganti dengan Link/URL anda. Kode yang di sorot warna orange adalah menu dan sub menu, silahkan anda ganti sesuai dengan keinginan anda

HAPPY BLOGGING..!

Cara membuat widget menu navigasi bar 3D melayang di blog

Posted at 00.30 | in widget | Read More»

Widget menu navigasi bar 3D adalah salah satu widget yang loadingnya cepat dan dikembangkan pada html dan css tanpa javascript. Widget ini termasuk salah satu widget terbaik untuk para blogger.

View Demo

Kualitas Menu Navigasi ini diantaranya:

Loading yang cepat

Berbasis html dan css.

Tidak menggunakan Javascript.

Sangat mengagumkan dan menarik.

Multi submenu

Cara menambahkannya di blog

Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
Kemudian pilih-> Template -> Edit HTML

Kemudian cari tag/kode ]]></b:skin> tekan Ctrl + F untuk memudahkan proses pencarian
Setelah ketemu letakan kode berikut tepat diatas kode
]]></b:skin>

Simpan template...

Langkah selanjutnya:

Masuk ke akun Blogger anda -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript

Kemudian kopi dan Pastekan kode di bawah ini didalamnya

<div id="info">
<div class="menuHolder">
<ul class="nav">
<li><a class="top-a" href="#url"><b>Home</b></a></li>
<li><a class="top-a" href="http://www.avdhootblogger.com"><b>Blogging</b></a>
<div class="col3">
<ul class="colLeft">
<li><a href="http://jalu-pangna.blogspot.com/search/label/tips%20dan%20triks%20blog">tips dan triks blog</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/blog%20tutorial">blog tutorial</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/CSS">CSS</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/jquery-javascript">Jquery javascript</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/widget">widget</a></li>
</ul>
<ul class="col">
<li><a href="http://jalu-pangna.blogspot.com/search/label/animasi">animasi</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/Tips%20SEO">tips seo</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/jejaring%20sosial">jejaring sosial</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/ajax">ajax</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">animasi</a></li>
<li><a href="#url">tips seo</a></li>
<li><a href="#url">jejaring sosial</a></li>
<li><a href="#url">ajax</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>spiritual</b></a>
<div class="col2">
<ul class="colLeft">
<li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20spiritual">wawasan spiritual</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/spiritual">spiritual</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/suluk">suluk</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/sejarah">sejarah</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/babad">babad</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">wawasan spiritual</a></li>
<li><a href="#url">spiritual</a></li>
<li><a href="#url">suluk</a></li>
<li><a href="#url">sejarah</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Contact</b></a>
<div class="col1">
<ul class="colSingle">
<li><a href="http://jalu-pangna.blogspot.com/p/blog-page_1213.html">contact us</a></li>
<li><a href="http://jalu-pangna.blogspot.com/p/about-us.html">about us</a></li>
<li><a href="http://jalu-pangna.blogspot.com/2012/11/daftar-link-otomatis-dengan-mister-linky.html">tukar link</a></li>
<li><a href="http://jalu-pangna.blogspot.com/p/blog-page_15.html">site info</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="http://jalu-pangna.blogspot.com/p/privacy-policy-for-sijalupangna.html"><b>Privacy</b></a></li>
<li><a class="top-a" href="#url"><b>lain-lain</b></a>
<div class="col2 left">
<ul class="colLeft">
<li><a href="#url">tips dan triks blog</a></li>
<li><a href="#url">blog tutorial</a></li>
<li><a href="#url">css</a></li>
<li><a href="#url">jquery javasript</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">widget</a></li>
<li><a href="#url">animasi</a></li>
<li><a href="#url">tips seo</a></li>
<li><a href="#url">jejaring sosial</a></li>
</ul>
</div>
</li>
</ul>
</div>
<br /><br /><br /><br /><br /><br /><br /><br />
</div>

Simpan Gadget... Selesai.

KET:

Kode yang di sorot warna biru adalah Link/URL, Silahkan anda ganti dengan Link/URL anda. Kode yang di sorot warna orange adalah menu dan sub menu, silahkan anda ganti sesuai dengan keinginan anda

HAPPY BLOGGING..!

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 00.30

14 Mei 2013

Drop down menu terpisah adalah kombinasi keindahan dari tombol menu yang ramping dengan drop down menu secara fleksibel untuk menciptakan permukaan navigasi terbaik. Menu ini menggunakan tombol oval berbasis CSS yang atraktif. Dengan penambahan element opsi beralih disebelahnya secara dinamis. Menu ini saya dapatkan dari dynamic drive..

View Demo

KODE CSS DAN CARA MENAMBAHKAN MENUNYA DI BLOG

Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu

Kemudian pilih -> Template -> Edit HTML

Cari tag/kode ]]></b:skin> tekan CTRL+F untuk memudahkan pencarian

Berikutnya pastekan kode CSS tepat diatas kode ]]></b:skin>

.splitmenubutton, .downtoggler{ /* .downtoggler element is dynamically added by script */
color: white;
font: bold 13px Arial;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-decoration: none;
background: darkred; /* default color of menu button */
display: inline-block;
}

.splitmenubutton span.innerspan, .downtoggler span.innerspan{ /* span.innerspan element dynamically added by script inside menu button */
display: block;
padding: 8px;
line-height: 1em;
/* the following CSS3 gradients add a white to transparent linear gradient to the buttons, to give them a more beveled look */
background: -moz-linear-gradient(top,  rgba(255,252,252,0.54) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,252,252,0.54)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,252,252,0.54) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,252,252,0.54) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,252,252,0.54) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,252,252,0.54) 0%,rgba(255,255,255,0) 100%); /* W3C */
}

.dedicatedtoggler{ /* CSS to apply to toggler when it's a seperate element (instead of being the main menu button itself) */
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
border-left: 1px solid #f5f5f5;
}

a.downtoggler.selected{ /* CSS to add to toggler element when it's selected */
background: #b13f33; /* default hover background color of menu */
}

.downarrow, rightarrow{
cursor: pointer;
}

span.innerspan.downarrow::after{ /* Down arrow (hex value) */
content: '\25be';
}

.splitmenubutton span.innerspan.downarrow:after{ /* Down arrow with space before the arrow */
content: '\00a0\25be';
}


.rightarrow:after{ /* CSS for right arrow inside splitdropdown */
content: '\25b8'; /* Add HTML entity based right arrow */
position: absolute;
right: 5px;
font-size: 16px;
height: 100%;
}

/* ##### CSS for UL Drop Down Menus of script ###### */


ul.splitdropdown, ul.splitdropdown ul{ /*topmost and sub ULs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
display: none;
left: 200px;
top: 0;
list-style: none;
background: white; /* background color of drop down */
border: 1px solid lightgray;
border-bottom-width: 0;
box-shadow: 0 0 8px #818181; /*shadow for CSS3 capable browsers.*/
-webkit-box-shadow: 0 0 8px #818181;
-moz-box-shadow: 0 0 8px #818181;
}


ul.splitdropdown li{
position: relative;
}

ul.splitdropdown li a{
display: block;
width: 160px; /*width of menu (not including side paddings)*/
color: black;
background: white;
text-decoration: none;
padding: 8px 4px;
}

* html ul.splitdropdown li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}

ul.splitdropdown li a:hover, .splitdropdown li.selected>a{
background: #eee;
}

ul.splitdropdown li.separator{
border-bottom: 1px solid #dedddd;
}

KODE CSS

Kemudian Cari kode </head> dan pastekan script berikut tepat diatas kode </head>

<link rel="stylesheet" type="text/css" href="splitmenubuttons.css" />

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

<script src="splitmenubuttons.js"></script>

<script>
jQuery(function(){ // on document load
$('a[data-showmenu]').splitmenubuttonMenu() // Add split button menu to links with "data-showmenu" attr
})
</script>

Apabila kode jquery yang disorot warna merah sudah ada di template anda, harap diabaikan

Langkah berikutnya cari kode </body> pastekan script kode javascript dibawah ini tepat diatas kode </body>

function deselecttoggler($dropmenu){ // func to deselect toggler
		var $activetoggler = $dropmenu.data('$activetoggler')
		if ($activetoggler && $activetoggler.length == 1){
			$activetoggler.removeClass('selected')
			var menucolors = $activetoggler.data('menucolors')
			if (menucolors)
				$activetoggler.css('backgroundColor', menucolors[0])
		}
	}

function positionmenu(s, level, $toggler, $dropmenu){
		if (level == "toplevel"){
			var docrightedge = $(document).scrollLeft() + $(window).width() - 40
			var docbottomedge = $(document).scrollTop()+$(window).height()-40
			this.docrightedge = docrightedge // cache this value
			this.docbottomedge = docbottomedge
			var $offset = $toggler.data('mainanchor').offset()
			var togglerWidth = (s.split)? $toggler.data('mainanchor').width() + $toggler.width() : $toggler.width()
			var togglerHeight = $toggler.height()
			var dropmenuWidth = $dropmenu.outerWidth()
			var dropmenuHeight = $dropmenu.outerHeight()
			var leftpos = (($offset.left + dropmenuWidth) > docrightedge)? $offset.left - (dropmenuWidth - togglerWidth) : $offset.left
			var toppos = (($offset.top + dropmenuHeight) > docbottomedge)? $offset.top - (dropmenuHeight + togglerHeight) : $offset.top
			return {left: leftpos, top: toppos}
		}
		else{
			var $offset = $toggler.offset()
			var submenuWidth = $dropmenu.outerWidth()
			var submenuHeight = $dropmenu.outerHeight()
			var leftpos = ($offset.left + (submenuWidth*2) > this.docrightedge)? -submenuWidth : submenuWidth
			var toppos = ($offset.top + (submenuHeight) > this.docbottomedge)? -submenuHeight + $toggler.height() : 0
			return {left: leftpos, top: toppos}
		}
	}

function hidemenu($dropmenu){
		$dropmenu.find('ul').hide().end()
			.slideUp(s.fxduration, function(){
					deselecttoggler($dropmenu)
			})
	}

return this.each(function(){ //return jQuery obj
		var $this = $(this).wrapInner('<span class="innerspan" />') // reference anchor item and add <span> tag inside it
		if (this.tagName == "A"){ // only apply split menu to element if it's a link
			var menucolors = $this.attr('data-menucolors')
			if (menucolors){
				menucolors = jQuery.trim(menucolors).split(/,\s*/)
				$this.css('backgroundColor', menucolors[0])
			}
			var $dropmenu = $('ul#' + this.getAttribute('data-showmenu'))
			$dropmenu.data('timer', {})
			var splitit = $this.attr('data-splitmenu') || s.split
			splitit = (typeof splitit == "string")? (splitit == "true" ? true : false ) : splitit
			if (splitit && $dropmenu.length == 1){ // split up toggler and menu link itself?
				var $toggler = $('<a class="downtoggler dedicatedtoggler"><span class="innerspan downarrow"> </span></a>').insertAfter($this) // append new "toggler" element after menu button
				if (menucolors){
					$toggler.css('backgroundColor', $this.css('backgroundColor'))
				}
			}
			else{
				var $toggler = $this
				if ($dropmenu.length == 1){
					$toggler.addClass('downtoggler').find('span.innerspan:eq(0)').addClass('downarrow')
				}
			}
			$toggler.data({'mainanchor':$this, 'menucolors':menucolors}) // store ref to menu link (which may be different from toggler if splitit == true)
			$dropmenu.appendTo(document.body) //move drop down menu so it's a child of document.body
			if ($dropmenu.length == 1){
				$toggler.bind(s.triggerevt, function(e){ // action when toggler is activated
					clearTimeout($dropmenu.data('timer').hidetimer)
					var $this = $(this)
					var menucolors = $this.data('menucolors') // get menu colors (if data-menucolors attr defined)
					if (menucolors)
						$toggler.css('backgroundColor', menucolors[1])
					$toggler.addClass('selected') // add CSS class of 'selected' to toggler
					var slidefunc = (e.type =='click')? 'slideToggle' : 'slideDown'
					if ($dropmenu.data('$activetoggler') && $dropmenu.data('$activetoggler').get(0) != $this.get(0)){
						deselecttoggler($dropmenu)
						slidefunc = 'slideDown'
					}
					var menupos = (positionmenu(s, "toplevel", $toggler, $dropmenu))
					$dropmenu.css({zIndex:++startzindex, left:menupos.left, top:menupos.top + $this.outerHeight()})
						[slidefunc](s.fxduration, function(){
							var $this = $(this)
							if ($this.css('display') == 'none')
								deselecttoggler($this)
						})
					$dropmenu.data('$activetoggler', $this)
					return false
				}) // end $toggler.trigger
				if (s.hidetoplevelmouseout){
					$toggler.bind('mouseleave', function(e){ // action when mouse rolls out of toggler
						$dropmenu.data('timer').hidetimer = setTimeout(function(){
							hidemenu($dropmenu)
						}, s.hidedelay)
					})
				}
			} // end if $dropmenu.length == 1
			else{ // else if this button has no drop down menu
				$toggler.hover(
					function(){
						$toggler.addClass('selected')
						if ($toggler.data('menucolors'))
							$toggler.css('backgroundColor', menucolors[1])
					},
					function(){
						$toggler.removeClass('selected')
						if ($toggler.data('menucolors'))
							$toggler.css('backgroundColor', menucolors[0])
					}
				)
			}
			if ($dropmenu.data('isbuilt')) // if this drop down menu has been built already, move on to the next one
				return true
			$dropmenu.on('click mouseenter', function(e){
					clearTimeout($dropmenu.data('timer').hidetimer)
					if (e.type == "mouseenter")
						$(this).css({zIndex: startzindex++})
					else{
						if ($(e.target).parent('li').hasClass('headerli'))
							e.stopPropagation()
					}
				})
			if (s.hidetoplevelmouseout){
				$dropmenu.on('mouseleave', function(e){
					$dropmenu.data('timer').hidetimer = setTimeout(function(){
						hidemenu($dropmenu)
					}, s.hidedelay)
				})
			}
			var $headers = $dropmenu.find('ul').parent()
			$headers.each(function(i){
				var $li=$(this).css({zIndex: 1000+i}).addClass('headerli')
				var $subul = $li.find('ul:eq(0)').css({display:'block'}) //set sub UL to "block" so we can get dimensions
				$subul.data('$parentliref', $li) //cache parent LI of each sub UL
				$subul.data('timers', {})
				$li.data('$subulref', $subul) //cache sub UL of each parent LI
				$li.children("a:eq(0)").addClass('rightarrow')
				$li.bind(s.triggerevt, function(e){ //show sub UL when mouse moves over parent LI
					var $targetul=$(this).addClass("selected").data('$subulref')
					if ($targetul.queue().length<=1){ //if 1 or less queued animations
						clearTimeout($targetul.data('timers').hidetimer)
						var menupos = (positionmenu(s, "sublevel", $(this), $targetul))
						$targetul.css({left: menupos.left, top: menupos.top})
						$targetul.stop(true, true).slideDown(s.fxduration)
					}
				})
				$li.bind('mouseleave', function(e){ //hide sub UL when mouse moves out of parent LI
					var $targetul=$(this).data('$subulref')
					clearTimeout($targetul.data('timers').showtimer)
					$targetul.data('timers').hidetimer=setTimeout(function(){
						$targetul.stop(true, true).slideUp(s.fxduration).data('$parentliref').removeClass('selected')
					}, s.hidedelay)
				})
				$subul.bind('mouseenter', function(e){
					clearTimeout($(this).data('timers').hidetimer)
				})
			}) // end $headers.each()
			$dropmenu.find('ul').andSelf().css({display:'none', visibility:'visible'}) //collapse all ULs again
			$dropmenu.data('isbuilt', true)
			if (!$(document).data('hidemenuevt')){ // hide top level drop down menus when user clicks on document
				$(document).on('click', function(e){
					$('ul.splitdropdown:visible').find('ul').hide().end()
						.slideUp(s.fxduration, function(){
							var $this = $(this)
							if ($this.css('display') == 'none')
								deselecttoggler($this)
						})
				})
				$(document).data('hidemenuevt', true)
			}
		}
	})

}
//]]>
</script>

Simpan template...

Masuk lagi ke Blogger -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript

Pastekan kode berikut di bawah ini didalamnya:

<a href="#" class="splitmenubutton" data-showmenu="dropmenu1" data-splitmenu="false">wawasan spiritual dan blogging</a>
<a href="#" data-showmenu="dropmenu2" data-menucolors="navy,blue" class="splitmenubutton">All about spiritual</a>





<ul id="dropmenu1" class="splitdropdown">
<li><a href="http://jalu-pangna.blogspot.com/search/label/tips%20dan%20triks%20blog">Tips dan triks blog</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/CSS">CSS</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/jquery-javascript">JQuery javascript</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/widget">widget</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/animasi">animasi</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/animasi">jejaring sosial</a></li>
<li><a href="#">Tool</a></li>
</ul>



<ul id="dropmenu2" class="splitdropdown">
<li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20spiritual">wawasan spiritual</a></li>
<li class="separator"><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20umum">wawasan umum</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/spiritual">spiritual</a>
<ul>
<li><a href="http://jalu-pangna.blogspot.com/search/label/suluk">suluk</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/sejarah">sejarah</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/babad">babad</a></li>
<li><a href="#">nama sub menu</a></li>
</ul>
</li>
<li><a href="#">nama sub menu</a></li>
<li><a href="#">nama folder1 submenu</a>
<ul>
<li><a href="#">nama item folder1 submenu</a></li>
<li><a href="#">nama folder2 submenu</a>
<ul>
<li><a href="#">nama item folder2 submenu</a></li>
<li><a href="#">nama item folder2 submenu</a></li>
<li><a href="#">nama item folder2 submenu</a></li>
<li><a href="#">nama item folder2 submenu</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">nama sub menu</a></li>
</ul>

Simpan gadget...selesai

Ganti nama judul yang disorot warna biru dengan judul menu anda, yang disorot warna orange adalah nama warna menu dan bisa diganti dengan green atau black atau blue dll.
Ganti warna yang disorot warna merah dengan URL/Link anda
warna yang disorot warna merah tua adalah nama sub menu.

Happy Blogging....

Cara membuat drop down menu terpisah versi 2

Posted at 22.39 | in tips dan triks blog | Read More»

View Demo

KODE CSS DAN CARA MENAMBAHKAN MENUNYA DI BLOG

Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu

Kemudian pilih -> Template -> Edit HTML

Cari tag/kode ]]></b:skin> tekan CTRL+F untuk memudahkan pencarian

Berikutnya pastekan kode CSS tepat diatas kode ]]></b:skin>

.splitmenubutton, .downtoggler{ /* .downtoggler element is dynamically added by script */
color: white;
font: bold 13px Arial;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-decoration: none;
background: darkred; /* default color of menu button */
display: inline-block;
}

.splitmenubutton span.innerspan, .downtoggler span.innerspan{ /* span.innerspan element dynamically added by script inside menu button */
display: block;
padding: 8px;
line-height: 1em;
/* the following CSS3 gradients add a white to transparent linear gradient to the buttons, to give them a more beveled look */
background: -moz-linear-gradient(top,  rgba(255,252,252,0.54) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,252,252,0.54)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,252,252,0.54) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,252,252,0.54) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,252,252,0.54) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,252,252,0.54) 0%,rgba(255,255,255,0) 100%); /* W3C */
}

.dedicatedtoggler{ /* CSS to apply to toggler when it's a seperate element (instead of being the main menu button itself) */
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
border-left: 1px solid #f5f5f5;
}

a.downtoggler.selected{ /* CSS to add to toggler element when it's selected */
background: #b13f33; /* default hover background color of menu */
}

.downarrow, rightarrow{
cursor: pointer;
}

span.innerspan.downarrow::after{ /* Down arrow (hex value) */
content: '\25be';
}

.splitmenubutton span.innerspan.downarrow:after{ /* Down arrow with space before the arrow */
content: '\00a0\25be';
}


.rightarrow:after{ /* CSS for right arrow inside splitdropdown */
content: '\25b8'; /* Add HTML entity based right arrow */
position: absolute;
right: 5px;
font-size: 16px;
height: 100%;
}

/* ##### CSS for UL Drop Down Menus of script ###### */


ul.splitdropdown, ul.splitdropdown ul{ /*topmost and sub ULs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
display: none;
left: 200px;
top: 0;
list-style: none;
background: white; /* background color of drop down */
border: 1px solid lightgray;
border-bottom-width: 0;
box-shadow: 0 0 8px #818181; /*shadow for CSS3 capable browsers.*/
-webkit-box-shadow: 0 0 8px #818181;
-moz-box-shadow: 0 0 8px #818181;
}


ul.splitdropdown li{
position: relative;
}

ul.splitdropdown li a{
display: block;
width: 160px; /*width of menu (not including side paddings)*/
color: black;
background: white;
text-decoration: none;
padding: 8px 4px;
}

* html ul.splitdropdown li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}

ul.splitdropdown li a:hover, .splitdropdown li.selected>a{
background: #eee;
}

ul.splitdropdown li.separator{
border-bottom: 1px solid #dedddd;
}

KODE CSS

Kemudian Cari kode </head> dan pastekan script berikut tepat diatas kode </head>

<link rel="stylesheet" type="text/css" href="splitmenubuttons.css" />

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

<script src="splitmenubuttons.js"></script>

<script>
jQuery(function(){ // on document load
$('a[data-showmenu]').splitmenubuttonMenu() // Add split button menu to links with "data-showmenu" attr
})
</script>

Apabila kode jquery yang disorot warna merah sudah ada di template anda, harap diabaikan

Langkah berikutnya cari kode </body> pastekan script kode javascript dibawah ini tepat diatas kode </body>

function hidemenu($dropmenu){
		$dropmenu.find('ul').hide().end()
			.slideUp(s.fxduration, function(){
					deselecttoggler($dropmenu)
			})
	}

}
//]]>
</script>

Simpan template...

Masuk lagi ke Blogger -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript

Pastekan kode berikut di bawah ini didalamnya:

<a href="#" class="splitmenubutton" data-showmenu="dropmenu1" data-splitmenu="false">wawasan spiritual dan blogging</a>
<a href="#" data-showmenu="dropmenu2" data-menucolors="navy,blue" class="splitmenubutton">All about spiritual</a>





<ul id="dropmenu1" class="splitdropdown">
<li><a href="http://jalu-pangna.blogspot.com/search/label/tips%20dan%20triks%20blog">Tips dan triks blog</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/CSS">CSS</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/jquery-javascript">JQuery javascript</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/widget">widget</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/animasi">animasi</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/animasi">jejaring sosial</a></li>
<li><a href="#">Tool</a></li>
</ul>



<ul id="dropmenu2" class="splitdropdown">
<li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20spiritual">wawasan spiritual</a></li>
<li class="separator"><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20umum">wawasan umum</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/spiritual">spiritual</a>
<ul>
<li><a href="http://jalu-pangna.blogspot.com/search/label/suluk">suluk</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/sejarah">sejarah</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/babad">babad</a></li>
<li><a href="#">nama sub menu</a></li>
</ul>
</li>
<li><a href="#">nama sub menu</a></li>
<li><a href="#">nama folder1 submenu</a>
<ul>
<li><a href="#">nama item folder1 submenu</a></li>
<li><a href="#">nama folder2 submenu</a>
<ul>
<li><a href="#">nama item folder2 submenu</a></li>
<li><a href="#">nama item folder2 submenu</a></li>
<li><a href="#">nama item folder2 submenu</a></li>
<li><a href="#">nama item folder2 submenu</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">nama sub menu</a></li>
</ul>

Simpan gadget...selesai

Happy Blogging....

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 22.39

7 Mei 2013

Hari ini, saya ingin share dan menunjukkan ke anda tentang menu navigasi yang lain murni menggunakan CSS3, menu navigasi ini menerapkan beberapa efek animasi yang sangat bagus. Penulis pun tidak habis pikir kok bisa ya? submenu nya melayang. Hehehe..:D Tinggal menggulirkan atau menggerakan mouse/krusor anda ke elemen menu tersebut maka animasinya akan bekerja. Jika anda siap, mari kita mulai...

View Demo

KODE HTML

<ul id="nav">
    <li><a href="http://jalu-pangna.blogspot.com/">Home</a></li>
    <li><a class="hsubs" href="#">All about blog</a>
        <ul class="subs">
            <li><a href="http://jalu-pangna.blogspot.com/search/label/tips%20dan%20triks%20blog">Tips dan triks blog</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/blog%20tutorial">Blog tutorial</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/CSS">CSS</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/jquery-javascript">JQuery javascript</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/widget">Gadget</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Religi</a>
        <ul class="subs">
            <li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20spiritual">Wawasan spiritual</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/spiritual">Spiritual</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/suluk">Suluk</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/sejarah">sejarah</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/babad">Babad</a></li>
            <li><a href="#">Submenu anda</a></li>
            <li><a href="#">Submenu anda</a></li>
            <li><a href="#">Submenu anda</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Science</a>
        <ul class="subs">
            <li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan">Wawasan</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20umum">Wawasan umum</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20spiritual">Wawasan spiritual</a></li>
            <li><a href="#">Submenu anda</a></li>
            <li><a href="#">Submenu anda</a></li>
        </ul>
    </li>
<li><a href="http://jalu-pangna.blogspot.com/p/blog-page_14.html">TOC/site map</a></li>
    <li><a href="http://jalu-pangna.blogspot.com/2012/11/daftar-link-otomatis-dengan-mister-linky.html">Tukar link</a></li>
    <li><a href="#">Lain-lain</a></li>
    <li><a href="http://jalu-pangna.blogspot.com">Kembali</a></li>
</ul>

LANGKAH-LANGKAHNYA:

Masuk ke akun Blogger anda -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript atau anda bisa meletakannya di bawah tag <body> pada template

Pastekan kode di atas didalamnya

Simpan Gadget...

Ganti URL/Link, Menu dan Submenu dengan URL/Link, menu dan submenu anda

KODE CSS

#nav,#nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;
    font-size: 13px;
    height: 36px;
    list-style: none outside none;
    margin: 40px auto;
    text-shadow: 0 -1px 3px #202020;
    width: 980px;

/* border radius */
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;

/* box shadow */
    -moz-box-shadow: 0px 3px 3px #cecece;
    -webkit-box-shadow: 0px 3px 3px #cecece;
    box-shadow: 0 3px 4px #8b8b8b;

/* gradient */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f;
}
#nav ul {
    left: -9999px;
    position: absolute;
    top: -9999px;
    z-index: 2;
}
#nav li {
    border-bottom: 1px solid #575757;
    border-left: 1px solid #929292;
    border-right: 1px solid #5d5d5d;
    border-top: 1px solid #797979;
    display: block;
    float: left;
    height: 34px;
    position: relative;
    width: 105px;
}
#nav li:first-child {
    border-left: 0 none;
    margin-left: 5px;
}
#nav li a {
    color: #FFFFFF;
    display: block;
    line-height: 34px;
    outline: medium none;
    text-align: center;
    text-decoration: none;

/* keyframes #animation1 */
@-webkit-keyframes animation1 {
    0% {
        -webkit-transform: scale(1);
    }
    30% {
        -webkit-transform: scale(1.3);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
@-moz-keyframes animation1 {
    0% {
        -moz-transform: scale(1);
    }
    30% {
        -moz-transform: scale(1.3);
    }
    100% {
        -moz-transform: scale(1);
    }
}
#nav li > a:hover {
    /* css3 animation */
    -moz-animation-name: animation1;
    -moz-animation-duration: 0.7s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;

-webkit-animation-name: animation1;
    -webkit-animation-duration: 0.7s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}
#nav li:hover > a {
    z-index: 4;
}
#nav li:hover ul.subs {
    left: 0;
    top: 34px;
    width: 150px;
}
#nav ul li {
    background: none repeat scroll 0 0 #838383;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    opacity: 0;
    width: 100%;

/* keyframes #animation2 */
@-webkit-keyframes animation2 {
    0% {
        margin-left:185px;
    }
    100% {
        margin-left:0px;
        opacity:1;
    }
}
@-moz-keyframes animation2 {
    0% {
        margin-left:185px;
    }
    100% {
        margin-left:0px;
        opacity:1;
    }
}
#nav li:hover ul li {
    /* css3 animation */
    -moz-animation-name: animation2;
    -moz-animation-duration: 0.3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;

-webkit-animation-name: animation2;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

/*-webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;*/
}
/* animation delays */
#nav li:hover ul li:nth-child(1) {
    -moz-animation-delay: 0;
    -webkit-animation-delay: 0;
}
#nav li:hover ul li:nth-child(2) {
    -moz-animation-delay: 0.05s;
    -webkit-animation-delay: 0.05s;
}
#nav li:hover ul li:nth-child(3) {
    -moz-animation-delay: 0.1s;
    -webkit-animation-delay: 0.1s;
}
#nav li:hover ul li:nth-child(4) {
    -moz-animation-delay: 0.15s;
    -webkit-animation-delay: 0.15s;
}
#nav li:hover ul li:nth-child(5) {
    -moz-animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}
#nav li:hover ul li:nth-child(6) {
    -moz-animation-delay: 0.25s;
    -webkit-animation-delay: 0.25s;
}
#nav li:hover ul li:nth-child(7) {
    -moz-animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
}
#nav li:hover ul li:nth-child(8) {
    -moz-animation-delay: 0.35s;
    -webkit-animation-delay: 0.35s;
}

LANGKAH SELANJUTNYA:

Cari tag/kode ]]></b:skin> tekan CTRL+F untuk memudahkan dalam pencarian
Silahkan kopi dan Pastekan kode CSS di atas, tepat diatas tag ]]></b:skin>
Simpan template...Selesai

Bagaimana cara membuat menu navigasi melayang CSS3 di blog

Posted at 07.56 | in tips dan triks blog | Read More»

View Demo

KODE HTML

<ul id="nav">
    <li><a href="http://jalu-pangna.blogspot.com/">Home</a></li>
    <li><a class="hsubs" href="#">All about blog</a>
        <ul class="subs">
            <li><a href="http://jalu-pangna.blogspot.com/search/label/tips%20dan%20triks%20blog">Tips dan triks blog</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/blog%20tutorial">Blog tutorial</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/CSS">CSS</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/jquery-javascript">JQuery javascript</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/widget">Gadget</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Religi</a>
        <ul class="subs">
            <li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20spiritual">Wawasan spiritual</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/spiritual">Spiritual</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/suluk">Suluk</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/sejarah">sejarah</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/babad">Babad</a></li>
            <li><a href="#">Submenu anda</a></li>
            <li><a href="#">Submenu anda</a></li>
            <li><a href="#">Submenu anda</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Science</a>
        <ul class="subs">
            <li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan">Wawasan</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20umum">Wawasan umum</a></li>
            <li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20spiritual">Wawasan spiritual</a></li>
            <li><a href="#">Submenu anda</a></li>
            <li><a href="#">Submenu anda</a></li>
        </ul>
    </li>
<li><a href="http://jalu-pangna.blogspot.com/p/blog-page_14.html">TOC/site map</a></li>
    <li><a href="http://jalu-pangna.blogspot.com/2012/11/daftar-link-otomatis-dengan-mister-linky.html">Tukar link</a></li>
    <li><a href="#">Lain-lain</a></li>
    <li><a href="http://jalu-pangna.blogspot.com">Kembali</a></li>
</ul>

LANGKAH-LANGKAHNYA:

Masuk ke akun Blogger anda -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript atau anda bisa meletakannya di bawah tag <body> pada template

Pastekan kode di atas didalamnya

Simpan Gadget...

Ganti URL/Link, Menu dan Submenu dengan URL/Link, menu dan submenu anda

KODE CSS

/* border radius */
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;

/* box shadow */
    -moz-box-shadow: 0px 3px 3px #cecece;
    -webkit-box-shadow: 0px 3px 3px #cecece;
    box-shadow: 0 3px 4px #8b8b8b;

LANGKAH SELANJUTNYA:

Cari tag/kode ]]></b:skin> tekan CTRL+F untuk memudahkan dalam pencarian
Silahkan kopi dan Pastekan kode CSS di atas, tepat diatas tag ]]></b:skin>
Simpan template...Selesai

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 07.56

Wawasan spiritual dan blogging

11 Maret 2014

Cara menambahkannya di blog

Langkah selanjutnya:

Cara membuat widget menu navigasi bar 3D melayang di blog

Cara menambahkannya di blog

Langkah selanjutnya:

14 Mei 2013

Cara membuat drop down menu terpisah versi 2

7 Mei 2013

Bagaimana cara membuat menu navigasi melayang CSS3 di blog

Blog Archive

Label

Recent Comment

Followers