Navigasi Menu Dengan Efek Transition

Thursday, August 22, 2013

Navigasi menu pada blog dengan evek transition akan membuat blog anda semakin menarik karena menu navigasi kali ini dapat anda rubah warnanya sesuka hati dengan mudah. Menu ini cocok di gunakan pada blog yang bertema tutorial tentang desain tampilan, karena akan memberi kesan tersendiri dan agar pengunjung betah berlama-lama di blog anda. Berikut ini adalah screenshot dari menu navigasi yang Admin maksud.

Menu navigasi efek transition.

Pemakaian dalam blog

Copy code di bawah ini dan letakkan tepat di atas code ]]></b:skin>

1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-78code-line:1-89code-line:1-910code-line:1-1011code-line:1-1112code-line:1-1213code-line:1-1314code-line:1-1415code-line:1-1516code-line:1-1617code-line:1-1718code-line:1-1819code-line:1-1920code-line:1-2021code-line:1-2122code-line:1-2223code-line:1-2324code-line:1-2425code-line:1-2526code-line:1-2627code-line:1-2728code-line:1-2829code-line:1-2930code-line:1-3031code-line:1-3132code-line:1-3233code-line:1-3334code-line:1-3435code-line:1-3536code-line:1-3637code-line:1-3738code-line:1-3839code-line:1-3940code-line:1-4041code-line:1-4142code-line:1-4243code-line:1-4344code-line:1-4445code-line:1-4546code-line:1-4647code-line:1-4748code-line:1-4849code-line:1-4950code-line:1-5051code-line:1-5152code-line:1-5253code-line:1-5354code-line:1-5455code-line:1-5556code-line:1-5657code-line:1-5758code-line:1-5859code-line:1-5960code-line:1-6061code-line:1-6162code-line:1-6263code-line:1-6364code-line:1-6465code-line:1-6566code-line:1-6667code-line:1-6768code-line:1-6869code-line:1-6970code-line:1-7071code-line:1-7172code-line:1-7273code-line:1-7374code-line:1-7475code-line:1-7576code-line:1-7677code-line:1-7778code-line:1-7879code-line:1-7980code-line:1-8081code-line:1-8182code-line:1-8283code-line:1-8384code-line:1-8485code-line:1-8586code-line:1-8687code-line:1-8788code-line:1-8889code-line:1-8990code-line:1-9091code-line:1-9192code-line:1-9293code-line:1-9394code-line:1-9495code-line:1-9596code-line:1-9697code-line:1-9798code-line:1-9899code-line:1-99100code-line:1-100101code-line:1-101102code-line:1-102103code-line:1-103104code-line:1-104105code-line:1-105106code-line:1-106107code-line:1-107108code-line:1-108109code-line:1-109110code-line:1-110111code-line:1-111112code-line:1-112113code-line:1-113114code-line:1-114115code-line:1-115116code-line:1-116117code-line:1-117118code-line:1-118119code-line:1-119120code-line:1-120121code-line:1-121122code-line:1-122123code-line:1-123124code-line:1-124125code-line:1-125126code-line:1-126127code-line:1-127128code-line:1-128129code-line:1-129130code-line:1-130131code-line:1-131132code-line:1-132133code-line:1-133134code-line:1-134135code-line:1-135136code-line:1-136137code-line:1-137138code-line:1-138139code-line:1-139140code-line:1-140141code-line:1-141142code-line:1-142143code-line:1-143144code-line:1-144145code-line:1-145146code-line:1-146147code-line:1-147148code-line:1-148149code-line:1-149150code-line:1-150151code-line:1-151152code-line:1-152153code-line:1-153154code-line:1-154155code-line:1-155156code-line:1-156157code-line:1-157158code-line:1-158159code-line:1-159160code-line:1-160161code-line:1-161162code-line:1-162163code-line:1-163164code-line:1-164165code-line:1-165166code-line:1-166167code-line:1-167168code-line:1-168169code-line:1-169170code-line:1-170171code-line:1-171172code-line:1-172173code-line:1-173174code-line:1-174175code-line:1-175176code-line:1-176177code-line:1-177178code-line:1-178179code-line:1-179180code-line:1-180181code-line:1-181182code-line:1-182183code-line:1-183184code-line:1-184185code-line:1-185186code-line:1-186187code-line:1-187188code-line:1-188189code-line:1-189190code-line:1-190191code-line:1-191192code-line:1-192193code-line:1-193194code-line:1-194195code-line:1-195196code-line:1-196197code-line:1-197198code-line:1-198199code-line:1-199200code-line:1-200201code-line:1-201202code-line:1-202203code-line:1-203204code-line:1-204205code-line:1-205206code-line:1-206207code-line:1-207208code-line:1-208209code-line:1-209210code-line:1-210211code-line:1-211212code-line:1-212213code-line:1-213214code-line:1-214215code-line:1-215216code-line:1-216217code-line:1-217218code-line:1-218219code-line:1-219220code-line:1-220221code-line:1-221222code-line:1-222223code-line:1-223224code-line:1-224225code-line:1-225226code-line:1-226227code-line:1-227228code-line:1-228229code-line:1-229230code-line:1-230231code-line:1-231232code-line:1-232233code-line:1-233234code-line:1-234235code-line:1-235236code-line:1-236237code-line:1-237238code-line:1-238239code-line:1-239240code-line:1-240241code-line:1-241242code-line:1-242243code-line:1-243244code-line:1-244245code-line:1-245246code-line:1-246247code-line:1-247248code-line:1-248249code-line:1-249250code-line:1-250251code-line:1-251252code-line:1-252253code-line:1-253254code-line:1-254255code-line:1-255256code-line:1-256257code-line:1-257258code-line:1-258259code-line:1-259260code-line:1-260261code-line:1-261262code-line:1-262263code-line:1-263264code-line:1-264265code-line:1-265266code-line:1-266267code-line:1-267268code-line:1-268269code-line:1-269270code-line:1-270271code-line:1-271272code-line:1-272273code-line:1-273274code-line:1-274275code-line:1-275276code-line:1-276277code-line:1-277278code-line:1-278279code-line:1-279280code-line:1-280281code-line:1-281282code-line:1-282283code-line:1-283284code-line:1-284285code-line:1-285286code-line:1-286287code-line:1-287288code-line:1-288289code-line:1-289290code-line:1-290291code-line:1-291292code-line:1-292293code-line:1-293294code-line:1-294295code-line:1-295296code-line:1-296297code-line:1-297298code-line:1-298299code-line:1-299300code-line:1-300301code-line:1-301302code-line:1-302303code-line:1-303304code-line:1-304305code-line:1-305306code-line:1-306307code-line:1-307308code-line:1-308309code-line:1-309310code-line:1-310311code-line:1-311312code-line:1-312313code-line:1-313314code-line:1-314315code-line:1-315316code-line:1-316317code-line:1-317318code-line:1-318319code-line:1-319320code-line:1-320321code-line:1-321322code-line:1-322323code-line:1-323324code-line:1-324325code-line:1-325326code-line:1-326327code-line:1-327328code-line:1-328329code-line:1-329330code-line:1-330331code-line:1-331332code-line:1-332333code-line:1-333334code-line:1-334335code-line:1-335336code-line:1-336337code-line:1-337338code-line:1-338@import url(https://fonts.googleapis.com/css?family=Dosis:400,700);
  .navbar {
  font-family:'Dosis',sans-serif;
  position:relative;
  display:table;
  float:none;
  list-style-type:none;
  padding:0;
  margin:20px auto 250px auto;
}

.navbar:before {
  position:absolute;
  display:block;
  content:"";
  z-index:-1;
  width:100%;
  height:18px;
  bottom:-9px;
  left:2px;
  background:-moz-radial-gradient(center,ellipse cover,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);
  background:-webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,rgba(0,0,0,0.7)),color-stop(75%,rgba(0,0,0,0)));
  background:-webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);
  background:-o-radial-gradient(center,ellipse cover,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);
  background:-ms-radial-gradient(center,ellipse cover,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);
  background:radial-gradient(center,ellipse cover,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000',endColorstr='#00000000',GradientType=1 );
  opacity:.4;
}

.navbar:after {
  position:absolute;
  display:block;
  content:"";
  z-index:-1;
  width:100%;
  height:100%;
  top:0;
  left:0;
  -webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,0.25);
  box-shadow:0 2px 4px 0 rgba(0,0,0,0.25);
}

.navbar > li {
  position:relative;
  float:left;
  display:inline-block;
  list-style-type:none;
  text-align:center;
  margin:0;
  border-left:0;
  border:1px solid rgba(0,0,0,0.5);
  line-height:35px;
  -webkit-box-shadow:inset 1px 1px 0 0 rgba(255,255,255,0.25);
  box-shadow:inset 1px 1px 0 0 rgba(255,255,255,0.25);
  -webkit-transition:all 300ms ease-in-out;
  -moz-transition:all 300ms ease-in-out;
  -ms-transition:all 300ms ease-in-out;
  -o-transition:all 300ms ease-in-out;
  transition:all 300ms ease-in-out;
}

.navbar.color1 > li {
  background:#ea7900;
}

.navbar.color2 > li {
  background:#336277;
}

.navbar.color3 > li {
  background:#3e781b;
}

.navbar.color4 > li {
  background:#ad2259;
}

.navbar.color5 > li {
  background:#b20a22;
}

.navbar > li:before {
  position:absolute;
  display:block;
  content:"";
  z-index:1;
  width:100%;
  height:100%;
  left:0;
  top:0;
  background:-moz-linear-gradient(top,rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.16) 100%);
  background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,0.15)),color-stop(100%,rgba(0,0,0,0.16)));
  background:-webkit-linear-gradient(top,rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.16) 100%);
  background:-o-linear-gradient(top,rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.16) 100%);
  background:-ms-linear-gradient(top,rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.16) 100%);
  background:linear-gradient(top,rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.16) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#26ffffff',endColorstr='#29000000',GradientType=0 );
}

.navbar > li:after {
  position:absolute;
  display:block;
  content:"";
  width:100%;
  height:100%;
  top:0;
  left:0;
  background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OERFQkEzRUJDNUM5MTFFMUE3NzBCMTZBMEExNEQ5NUQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OERFQkEzRUNDNUM5MTFFMUE3NzBCMTZBMEExNEQ5NUQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4REVCQTNFOUM1QzkxMUUxQTc3MEIxNkEwQTE0RDk1RCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4REVCQTNFQUM1QzkxMUUxQTc3MEIxNkEwQTE0RDk1RCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiSp0pIAAAAySURBVHjaYmBgYOAHYmYGCADR/CDiDxDzQAW5gPgLlM3ACsQKUBqhBYjZkY3CMBMgwACvHQKnyUp+6gAAAABJRU5ErkJggg==");
}

.navbar > li.drpdown a > span {
  margin-right:30px;
}

.navbar > li.drpdown > a:after {
  position:absolute;
  content:"\0025bc";
  z-index:1;
  font-size:8px;
  top:0;
  right:10px;
  color:#fff;
  text-shadow:0 -1px 0 rgba(0,0,0,0.8);
  filter:dropshadow(color=#000,offx=0,offy=-1);
  -webkit-transition:all 300ms ease-in-out;
  -moz-transition:all 300ms ease-in-out;
  -ms-transition:all 300ms ease-in-out;
  -o-transition:all 300ms ease-in-out;
  transition:all 300ms ease-in-out;
}

.navbar > li.drpdown a:hover:after,
.navbar > li a:hover {
  color:#ccc;
}

.navbar > li.drpdown:hover .drpcontent {
  display:block;
}

.navbar > li:first-child {
  border-left:1px solid #1a1a1a;
}

.navbar > li:last-child {
  -webkit-box-shadow:inset 1px 1px 0 0 rgba(255,255,255,0.25),inset -1px 0 0 0 rgba(255,255,255,0.25);
  box-shadow:inset 1px 1px 0 0 rgba(255,255,255,0.25),inset -1px 0 0 0 rgba(255,255,255,0.25);
}

.navbar > li > a {
  position:relative;
  display:block;
  width:100%;
  text-decoration:none;
  font-size:12px;
  color:#fff;
  text-shadow:0 -1px 0 rgba(0,0,0,0.4);
  filter:dropshadow(color=#000,offx=0,offy=-1);
  z-index:4;
  -webkit-transition:all 300ms ease-in-out;
  -moz-transition:all 300ms ease-in-out;
  -ms-transition:all 300ms ease-in-out;
  -o-transition:all 300ms ease-in-out;
  transition:all 300ms ease-in-out;
}

.navbar > li:hover {
  -webkit-box-shadow:inset 0 -2px 8px 0 rgba(0,0,0,0.35);
  box-shadow:inset 0 -2px 8px 0 rgba(0,0,0,0.35);
}

.navbar > li > a > span {
  position:relative;
  font-weight:bold;
  margin:0 15px 0 0;
}

.navbar > li  .drpcontent {
  position:absolute;
  display:none;
  margin:0;
  padding:20px 0 0 0;
  z-index:5;
  top:36px;
  min-width:200%;
  float:none;
  list-style-type:none;
  border:1px solid #737373;
  border-top:0;
  -webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,0.25),inset 0 6px 4px -4px rgba(0,0,0,0.5);
  box-shadow:0 2px 4px 0 rgba(0,0,0,0.25),inset 0 6px 4px -4px rgba(0,0,0,0.5);
  -webkit-border-radius:0 0 4px 4px;
  border-radius:0 0 4px 4px;
  background:rgb(249,249,249);
  background:-moz-linear-gradient(-45deg,rgba(249,249,249,1) 0%,rgba(229,229,229,1) 100%);
  background:-webkit-gradient(linear,left top,right bottom,color-stop(0%,rgba(249,249,249,1)),color-stop(100%,rgba(229,229,229,1)));
  background:-webkit-linear-gradient(-45deg,rgba(249,249,249,1) 0%,rgba(229,229,229,1) 100%);
  background:-o-linear-gradient(-45deg,rgba(249,249,249,1) 0%,rgba(229,229,229,1) 100%);
  background:-ms-linear-gradient(-45deg,rgba(249,249,249,1) 0%,rgba(229,229,229,1) 100%);
  background:linear-gradient(135deg,rgba(249,249,249,1) 0%,rgba(229,229,229,1) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9',endColorstr='#e5e5e5',GradientType=1 );
  -webkit-transition:opacity 300ms ease-in-out;
  -moz-transition:opacity 300ms ease-in-out;
  -ms-transition:opacity 300ms ease-in-out;
  -o-transition:opacity 300ms ease-in-out;
  transition:opacity 300ms ease-in-out;
}

.navbar > li:not(:last-of-type) .drpcontent {
  left:-1px;
}

.navbar > li:last-child .drpcontent {
  right:-1px;
}

.drpcontent li {
  position:relative;
  text-align:left;
  border-bottom:1px solid rgba(0,0,0,0.2);
  font-size:12px;
  line-height:35px;
  height:35px;
  font-weight:bold;
  -webkit-box-shadow:inset 0 -1px 0 0 rgba(255,255,255,0.2);
  box-shadow:inset 0 -1px 0 0 rgba(255,255,255,0.2);
  overflow:hidden;
}

.drpcontent li:before {
  position:absolute;
  display:block;
  content:"";
  width:100%;
  height:100%;
  top:-100%;
  left:0;
  background:#cecece;
  -webkit-transition:all 500ms ease-in-out;
  -moz-transition:all 500ms ease-in-out;
  -ms-transition:all 500ms ease-in-out;
  -o-transition:all 500ms ease-in-out;
  transition:all 500ms ease-in-out;
  opacity:0;
}

.drpcontent li:after {
  position:absolute;
  display:block;
  content:"\0025b6";
  height:20px;
  width:20px;
  top:0;
  left:6px;
  font-size:8px;
  -webkit-transition:all 500ms ease-in-out;
  -moz-transition:all 500ms ease-in-out;
  -ms-transition:all 500ms ease-in-out;
  -o-transition:all 500ms ease-in-out;
  transition:all 500ms ease-in-out;
}

.drpcontent li:hover:before {
  top:0;
  opacity:0.8;
}

.drpcontent li:hover:after {
  color:#fff;
  left:12px;
}

.drpcontent li:last-child:hover:before {
  -webkit-border-radius:0 0 4px 4px;
  border-radius:0 0 4px 4px;
}

.drpcontent li a {
  display:block;
  height:100%;
  width:100%;
  position:relative;
  color:#000;
  text-decoration:none;
  width:100%;
  padding-left:20px;
  -webkit-transition:all 500ms ease-in-out;
  -moz-transition:all 500ms ease-in-out;
  -ms-transition:all 500ms ease-in-out;
  -o-transition:all 500ms ease-in-out;
  transition:all 500ms ease-in-out;
}

.drpcontent li:hover a {
  color:#fff;
  padding-left:26px;
}

.drpcontent li:first-child {
  border-top:1px solid #a6a6a6;
}

.drpcontent li:last-child {
  border:0;
  -webkit-box-shadow:none;
  box-shadow:none;
  -webkit-border-radius:0 0 4px 4px;
  border-radius:0 0 4px 4px;
}

.icon20 {
  position:relative;
  float:left;
  display:block;
  width:20px;
  height:20px;
  margin:6px 8px 0 8px;
  background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAoCAYAAAA16j4lAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjJERkRDNTBDNUQ0MTFFMUI3QjJDOTZFNDMzQ0IwMjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjJERkRDNTFDNUQ0MTFFMUI3QjJDOTZFNDMzQ0IwMjciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MkRGREM0RUM1RDQxMUUxQjdCMkM5NkU0MzNDQjAyNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2MkRGREM0RkM1RDQxMUUxQjdCMkM5NkU0MzNDQjAyNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Psj8MzMAAA91SURBVHja7FxbbBTV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") no-repeat;
  -webkit-transition:all 300ms ease-in-out;
  -moz-transition:all 300ms ease-in-out;
  -ms-transition:all 300ms ease-in-out;
  -o-transition:all 300ms ease-in-out;
  transition:all 300ms ease-in-out;
}

.icon20.home {background-position:0 0;}
.icon20.upload {background-position:-20px 0;}
.icon20.download {background-position:-40px 0;}
.icon20.comments {background-position:-60px 0;}
.icon20.theme {background-position:-80px 0;}
.icon20.login {background-position:-100px 0;}
.navbar > li:hover .icon20.home {background-position:0 -20px;}
.navbar > li:hover .icon20.upload {background-position:-20px -20px;}
.navbar > li:hover .icon20.download {background-position:-40px -20px;}
.navbar > li:hover .icon20.comments {background-position:-60px -20px;}
.navbar > li:hover .icon20.theme {background-position:-80px -20px;}
.navbar > li:hover .icon20.login {background-position:-100px -20px;}

Kemudian tambahkan code di bawah ini pada widget HTML/Javascript

1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-56code-line:2-67code-line:2-78code-line:2-89code-line:2-910code-line:2-1011code-line:2-1112code-line:2-1213code-line:2-1314code-line:2-1415code-line:2-1516code-line:2-1617code-line:2-1718code-line:2-1819code-line:2-1920code-line:2-2021code-line:2-2122code-line:2-2223code-line:2-2324code-line:2-24<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<ul class="navbar color1">
 <li><a href="#"><i class="icon20 home"></i><span>Home</span></a></li>
 <li><a href="#"><i class="icon20 upload"></i><span>Upload</span></a></li>
 <li><a href="#"><i class="icon20 download"></i><span>Download</span></a></li>
 <li class="drpdown"><a href="#"><i class="icon20 comments"></i><span>Posts</span></a>
  <ul class="drpcontent">
   <li><a href="#">Latest Posts</a></li>
   <li><a href="#">Popular Posts</a></li>
   <li><a href="#">Private Posts</a></li>
  </ul>
 </li>
 <li><a href="#"><i class="icon20 login"></i><span>Login</span></a></li>
 <li class="drpdown"><a href="https://idtutorplus.blogspot.com/"><i class="icon20 theme"></i><span>Themeselector</span></a>
  <ul class="drpcontent" id="themeselect">
   <li><a href="#" data-color="color1">Orange</a></li>
   <li><a href="#" data-color="color2">Marine</a></li>
   <li><a href="#" data-color="color3">Green</a></li>
   <li><a href="#" data-color="color4">Purple</a></li>
   <li><a href="#" data-color="color5">Red</a></li>
  </ul>
 </li>
</ul>

Catatan :
Ganti code # dengan Url anda, dan ganti juga code yang bercetak tebal dan ditandai di atas dengan nama/judul yang anda inginkan.

Untuk mengganti warna navigasi tersebut anda bisah mengganti kode yang Admin beri tanda navbar color1 di atas dengan code di bawah ini.

navbar color2
navbar color3
navbar color4
navbar color5

Catatan tambahan..!!!
Jika terjadi kesalahan pada blog sobat pada bagian navbar. silahkan ganti text yang bertuliskan navbar pada kode Css3 diatas.

Live Demo

Pasang Iklan Anda di Sini

Pasang Iklan Anda di Sini