Membuat Menu Navigasi Indowebster di Blog

Tidak beda dengan tips-tips sebelumnya, dimana pada tips kali ini saya akan memberikan tips bagaimana cara membuat menu navigasi horizontal yang mirip seperti menu navigasi Indowebster. Untuk melihat pratinjaunnya seperti apa, silahkan sobat kunjungi situs tersebut.

Sebelumnya saya berterima kasih atas komentar pengunjung blog saya yang meminta supaya saya memberikan (berbagi) tips untuk membuat menu navigasi seperti menu navigasi Indowebster.com tersebut. Akhirnya saya kepikiran untuk membagikan hal kepada sobat blogger. Selain itu juga saya berterima kasih kepada sobat blogger saya yang telah memberikan tips ini sebelumnya, sehingga tips ini dapat saya berikan kepada sobat blogger dengan cuma-cuma.

Jika sobat tidak keberatan, silahkan tampilkan menu navigasi ini pada blog sobat. Mungkin saya tidak perlu lagi untuk menjelaskan kelebihan dan kekurangan dari menu navigasi ini. Sobat bisa langsung berkunjung ke situs Indowebster.com untuk melihat seperti apa menu navigasi yang akan kita pelajari hari ini.

Oke sobat blogger, saatnya kita beraksi untuk membuat menu navigasi ini.

Langkah Pertama, anda harus berada pada posisi Log-in pada account anda.
Langkah kedua, pada dasbor blog anda silahkan pilih Template => Edit HTML
Langkah ketiga, silahkan cari kode <head> dan letakkan kode berikut di bawahnya.

<script src='http://idesainer-web-id.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src='http://idesainer-web-id.googlecode.com/files/c21445cbf7d8eae9421c6080ce94cba1.js' type='text/javascript'/>

Langkah keempat, silahkan anda cari kode ]]><b:skin> dan letakkan kode berikut di atasnya.

// indowebster
#go_header li{margin:0;padding:0;list-style-type:none}
#go_headerContainerNavigation{background:#000;height:87px}
#go_headerContainerNavigation .go_headerContent{position:relative;padding:5px;background-position:bottom left;background-repeat:no-repeat}
#go_headerContainerNavigation .go_headerContent .go_headerUserProfile{position:absolute;top:5px;right:5px;width:300px;height:26px}
#go_headerContainerNavigation .go_headerContent .go_headerUserProfile .go_headerUserProfileNavigation{margin:0;padding:0;position:relative;display:block;width:inherit;height:inherit}
#go_headerContainerNavigation .go_headerContent .go_headerUserProfile .go_headerUserProfileNavigation > li{position:relative;float:right;padding:5px}
#go_headerContainerNavigation .go_headerContent .go_headerUserProfile .go_headerUserProfileNavigation > li > img,#go_headerContainerNavigation .go_headerContent .go_headerUserProfile .go_headerUserProfileNavigation > li > a{opacity:.70;filter:alpha(opacity=70);filter:“alpha(opacity=70)”}
#go_headerContainerNavigation .go_headerContent .go_headerUserProfile .go_headerUserProfileNavigation > li:hover{background:#333}
#go_headerContainerNavigation .go_headerContent .go_headerUserProfile .go_headerUserProfileNavigation > li:hover > img,#go_headerContainerNavigation .go_headerContent .go_headerUserProfile .go_headerUserProfileNavigation > li:hover > a{opacity:1.00;filter:alpha(opacity=100);filter:“alpha(opacity=100)”}
#go_headerContainerNavigation .go_headerContent .go_headerUserProfile .go_headerUserProfileNavigation > li.go_userProfileSettings{}
#go_headerContainerNavigation .go_headerContent .go_headerUserProfile .go_headerUserProfileNavigation > li.go_userProfileGlobal{}
#go_headerContainerNavigation .go_headerContent .go_headerUserProfile .go_headerUserProfileNavigation > li.go_userProfileMessage}
#go_headerContainerNavigation .go_headerContent .go_headerUserProfile .go_headerUserProfileNavigation > li.go_userProfileUsername{height:16px}
#go_headerContainerNavigation .go_headerContent .go_headerUserProfile .go_headerUserProfileNavigation > li > img{cursor:pointer}
#go_headerContainerNavigation .go_headerContent .go_headerUserProfile .go_headerUserProfileNavigation > li > img.inactive{opacity:.30;filter:alpha(opacity=30);filter:“alpha(opacity=30)”}
#go_headerContainerNavigation .go_headerContent .go_headerUserProfile .go_headerUserProfileNavigation > li > .go_userProfileNotificationCount{background:#ff4800;position:absolute;top:-2px;right:0px;padding:0 3px;opacity:1.00;filter:alpha(opacity=100);filter:“alpha(opacity=100)”}

/** GO NOTIFICATION **/
.go_userProfileGlobal ul,.go_userProfileMessage ul{display:none}
.go_notificationContainer{display:none;position:absolute;top:30px;right:0px;width:300px;background:#fff;z-index:40000;
-webkit-box-shadow:0 0 10px #ccc;
    -moz-box-shadow:0 0 10px #ccc;
         box-shadow:0 0 10px #ccc}
.go_notificationContainer li{padding:5px 10px !important;border-bottom:1px solid #f0f0f0;display:block}
.go_notificationContainer .go_notificationHeader{border-bottom:1px solid #e0e0e0;padding:10px !important;background:#fafafa}
.go_notificationContainer .go_notificationFooter{text-align:center;padding:10px !important;background:#fafafa;font-weight:bold}
.go_notificationContainer .goNotificationMessageSender{display:block;font-weight:bold;color:#000 !important}
.go_notificationContainer .goNotificationMessageMessage{color:#000 !important}
.go_notificationContainer .goNotificationArrow{position:absolute;top:-6px}
.go_notificationContainer .goNotificationArrow.goArrowMessage{right:57px}
.go_notificationContainer .goNotificationArrow.goArrowGlobal{right:31px}
.go_notificationContainer .go_notificationMessage:hover{background:#fafafa}
.go_notificationContainer .go_notificationMessage *{font-size:11px !important;line-height:14px !important;color:#666;font-family:Arial, Helvetica, sans-serif}
.go_notificationContainer .go_notificationMessage:hover *{color:#111}
.go_notificationContainer .go_notificationMessage dt{font-weight:bold !important}
.go_notificationContainer .go_notificationFooter a{font-weight:bold;color:#1d6bdf !important}
.go_notificationContainer .go_notificationFooter a:hover{text-decoration:underline !important}
.go_notificationContainer .go_notificationHeaderLink{float:right}
.go_notificationContainer .go_notificationHeaderLink a{color:#1d6bdf !important;font-size:11px !important}
.go_notificationContainer .go_notificationHeaderLink a:hover{text-decoration:underline !important}
.go_notificationContainer .go_notificationHeader{font-family:Arial, Helvetica, sans-serif !important;font-size:12px !important;font-weight:bold !important}
#go_headerContainerNavigation .go_headerContent .go_headerUserProfile .go_headerUserProfileNavigation > li.go_userProfileSettings.active{background:#fff}
#go_headerContainerNavigation .go_headerContent .go_headerUserProfile .go_headerUserProfileNavigation .go_userProfileSettingsContent{display:none;position:absolute;top:26px;right:0px;background:#fff;z-index:20000;
-webkit-box-shadow:0 0 10px #ccc;
    -moz-box-shadow:0 0 10px #ccc;
         box-shadow:0 0 10px #ccc}
#go_headerContainerNavigation .go_headerContent .go_headerUserProfile .go_headerUserProfileNavigation > li > .go_userProfileSettingsContent li a{display:block;padding:5px 10px;width:180px}
#go_headerContainerNavigation .go_headerContent .go_headerUserProfile .go_headerUserProfileNavigation > li > .go_userProfileSettingsContent li a:hover{background:#ff4800}
#go_headerContainerNavigation .go_headerContent .go_headerNavigation{height:30px;overflow:hidden;position:relative;float:left}
#go_headerContainerNavigation .go_headerContent .go_headerNavigation ul{padding:0;margin:0}
#go_headerContainerNavigation .go_headerContent .go_headerNavigation li{padding:0;margin:0;display:block;float:left;padding:5px 10px 0 0}
#go_headerContainerNavigation .go_headerContent .go_headerSearch{position:relative;float:right;width:300px;height:30px;background:#fff}
#go_headerContainerNavigation .go_headerContent .go_headerSearch input{border:none;margin:0;background:none;height:30px;width:205px;padding:0px 5px;outline:none}
#go_headerContainerNavigation .go_headerContent .go_headerSearch .go_headerSearchButton{position:absolute;top:0px;right:0px;height:30px;width:30px;background:url("http://dev.g.idws-static.com/img/layout/searchSmall.png") 6px 5px no-repeat #FFEA00;cursor:pointer}
#go_headerContainerNavigation .go_headerContent .go_headerSearch .go_headerSearchSectionSelected{position:absolute;top:5px;right:35px;width:40px;height:14px;padding:3px 5px;background:#f0f0f0;cursor:pointer}
#go_headerContainerNavigation .go_headerContent .go_headerSearch .go_headerSearchSectionSelected:hover{background:#e9e9e9}
#go_headerContainerNavigation .go_headerContent .go_headerSearch .go_headerSearchSectionOptions{position:absolute;top:5px;left:215px;width:80px;background:#f00;z-index:100000;display:none;
-webkit-box-shadow:0 0 10px #ccc;
    -moz-box-shadow:0 0 10px #ccc;
         box-shadow:0 0 10px #ccc}
#go_headerContainerNavigation .go_headerContent .go_headerSearch .go_headerSearchSectionOptions dd{height:14px;padding:3px 5px;background:#f0f0f0;cursor:pointer}
#go_headerContainerNavigation .go_headerContent .go_headerSearch .go_headerSearchSectionOptions dd:hover{background:#ff4800}
#go_headerContainerNavigation .go_headerContent .go_headerSearch .go_headerSearchSectionOptions dd.disabled:hover{background:#f0f0f0;cursor:default}
#go_headerContainerNotice{background:#ffffe0;
-webkit-box-shadow:0 0 10px #ccc;
    -moz-box-shadow:0 0 10px #ccc;
         box-shadow:0 0 10px #ccc}
#go_headerContainerNotice .go_headerContent{height:26px;position:relative}
#go_headerContainerNotice .go_headerContent .go_notice{overflow:hidden}
#go_headerContainerNotice .go_headerContent .go_noticeTitle{float:left;background:#ff4800;width:50px;padding:7px 0;height:12px}
#go_headerContainerNotice .go_headerContent .go_noticeFeeds{float:left;height:22px;background:url('../img/layout/header_notice.png') top left no-repeat;padding:4px 10px 0 10px;width:804px}
#go_headerContainerNotice .go_headerContent .go_noticeFeedsAll{display:none;position:absolute;top:0;left:55px;z-index:30000;
-webkit-box-shadow:0 0 10px #ccc;
    -moz-box-shadow:0 0 10px #ccc;
         box-shadow:0 0 10px #ccc}
#go_headerContainerNotice .go_headerContent .go_noticeFeedsAll dd{height:21px;border-bottom:1px solid #f5f5d7;background:#ffffe0;padding:4px 5px 0 5px;width:804px}
#go_headerContainerNotice .go_headerContent .go_noticeFeedsAll dd:hover{background:#fafadc}
#go_headerContainerNotice .go_headerContent .go_noticeButton{float:left;position:relative;width:86px}
#go_headerContainerNotice .go_headerContent .go_noticeButton span{display:block;background:#d9d9bf;padding:4px 0px;position:absolute;top:3px;right:0px;width:86px;cursor:pointer}
#go_headerContainerNotice .go_headerContent .go_noticeButton span:hover{background:#ff4800}
#go_headerFixedNavigation{width:100%;background:#000;position:fixed;display:none;top:0px;z-index:99999;height:31px;overflow:hidden}
#go_headerFixedNavigation ul#go_mainNav {margin:0;list-style:none;padding:0;float:left}
#go_headerFixedNavigation ul#go_mainNav li{margin:0;padding:0;float:left}
#go_headerFixedNavigation ul#go_mainNav li a{display:block;padding:5px 7px;text-decoration:none}
#go_headerFixedNavigation ul#go_mainNav li a:hover{background:#333}
#go_headerFixedNavigation nav#go_leftNav{}
#go_headerFixedNavigation nav#go_rightNav{float:right}
#go_headerFixedNavigation nav#go_rightNav a{display:block;background:#ff4800;height:19px;padding:7px 10px 5px 10px}
/*** TYPOGRAPHY ***/
header#go_header *{font-size:10px;line-height:12px;font-family:Arial, Verdana}
header#go_header a{text-decoration:none}
#go_headerContainerNavigation .go_headerContent .go_headerUserProfile li a{color:#fff;font-size:120%}
#go_headerContainerNavigation .go_headerContent .go_headerUserProfile .go_headerUserProfileNavigation > li.go_userProfileUsername a{font-weight:bold}
#go_headerContainerNavigation .go_headerContent .go_headerUserProfile .go_headerUserProfileNavigation > li > .go_userProfileNotificationCount{color:#fff;font-size:90%}
#go_headerContainerNavigation .go_headerContent .go_headerUserProfile .go_headerUserProfileNavigation > li > .go_userProfileSettingsContent li{text-align:left}
#go_headerContainerNavigation .go_headerContent .go_headerUserProfile .go_headerUserProfileNavigation > li > .go_userProfileSettingsContent li a{color:#000}
#go_headerContainerNavigation .go_headerContent .go_headerUserProfile .go_headerUserProfileNavigation > li > .go_userProfileSettingsContent li a:hover{color:#fff}
#go_headerContainerNavigation .go_headerContent .go_headerNavigation li a{font-family:"GnuolaneRgRegular",Helvetica,Arial;font-size:160%;line-height:160%;text-transform:uppercase;color:#fff;
opacity: .80;
   filter: alpha(opacity=80);
   filter: “alpha(opacity=80)”;
-webkit-transition: opacity 250ms linear;
    -moz-transition: opacity 250ms linear;
     -ms-transition: opacity 250ms linear;
      -o-transition: opacity 250ms linear;
   transition: opacity 250ms linear;}
#go_headerContainerNavigation .go_headerContent .go_headerNavigation li a:hover{text-decoration:none;border-bottom:1px solid #fff;
opacity: 1.00;
filter: alpha(opacity=100);
filter: “alpha(opacity=100)”;}
#go_headerContainerNavigation .go_headerContent .go_headerSearch input{color:#999;font-size:140%}
#go_headerContainerNavigation .go_headerContent .go_headerSearch input:focus,#go_headerContainerNavigation .go_headerContent .go_headerSearch input:hover{color:#000}
#go_headerContainerNavigation .go_headerContent .go_headerSearch .go_headerSearchSectionSelected{color:#888}
#go_headerContainerNavigation .go_headerContent .go_headerSearch .go_headerSearchSectionSelected:hover{color:#666}
#go_headerContainerNavigation .go_headerContent .go_headerSearch .go_headerSearchSectionOptions dd{color:#555}
#go_headerContainerNavigation .go_headerContent .go_headerSearch .go_headerSearchSectionOptions dd:hover{color:#fff}
#go_headerContainerNavigation .go_headerContent .go_headerSearch .go_headerSearchSectionOptions dd.disabled{color:#c0c0c0}
#go_headerContainerNotice .go_headerContent .go_noticeTitle{color:#fff;text-align:center;font-size:80%}
#go_headerContainerNotice .go_headerContent .go_noticeFeeds dd,#go_headerContainerNotice .go_headerContent .go_noticeFeedsAll dd{color:#ff4800;font-size:130%;line-height:130%}
#go_headerContainerNotice .go_headerContent .go_noticeFeeds dd a,#go_headerContainerNotice .go_headerContent .go_noticeFeedsAll dd a{font-size:100%}
#go_headerContainerNotice .go_headerContent .go_noticeButton span{color:#fff;text-align:center;font-size:80%}
#go_headerFixedNavigation ul#go_mainNav li a{font-family:"GnuolaneRgRegular",Helvetica,Arial;font-size:140%;color:#999;text-transform:uppercase}
#go_headerFixedNavigation nav#go_rightNav a{font-size:100%;text-transform:uppercase;color:#fff}
#go_headerFixedNavigation nav#go_rightNav a:hover{text-decoration:underline}
.go_footerNav{text-align:center;margin-bottom:20px;margin-top:10px}
.go_footerNav ul{margin:0;padding:0;list-style:none}
.go_footerNav li{display:inline;margin:0;padding:0;margin-left:20px}
#mainLoading{background:#fff;position:fixed;top:0;width:100%;padding:10px 0;z-index:16777271}

Langkah kelima, silahkan anda cari kode </head> dan letakkan kode berikut di atasnya.

Langkah keenam, letakkan kode berikut di bawah kode <body>.

<div id="mainLoading" style="display:none" class="al_c"></div>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$(function () {
$('.go_backTopButton').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>

<script language="JavaScript" type="text/javascript">
(function($){
$.fn.goNotification = function(){
var o = $(this);
var t = o.hasClass("go_userProfileGlobal") ? "Global" : "Message";
var p = o.parent();
var i = o.children("img");
var c = p.children(".go_notificationContainer");
var l = o.find("ul").find("li");
var n = 0;
var a = $.makeArray(l);
var compare;
var arw = "<img src="http://g.idws-static.com/img/layout/notification_arrow.png" class="goNotificationArrow goArrow"+t+"" />";
var f = {
   create:function(obj){
    c.append(arw);
    for (var j=0;j<a.length;j++)
    {
     c.append(a[j]);
    }
    c.fadeIn();
    c.addClass("open");
    $("#notifHelper").val(obj.closest("li").attr('class').split(' ')[0]);
   },
   remove:function(obj){
    c.html("");
    c.hide();
    c.removeClass("open");
   }
};
i.click(function(){
   if(c.hasClass("open") && $("#notifHelper").val() == $(this).closest("li").attr('class').split(' ')[0]){
    f.remove($(this));
   } else if(c.hasClass("open")){
    f.remove($(this));
    f.create($(this));
   } else {
    f.create($(this));
   }
   return false;
});

$("html").click(function(){
   if (c.hasClass("open")){
    c.html("");
    c.fadeOut();
    c.removeClass("open");
    $("#notifHelper").val("");
   }
});
}
})(jQuery);
</script>
<a name="go_top"></a>
<header id="go_header">
<div id="go_headerContainerNavigation">
<div class="container_12 go_headerContent" style="background-image:url('http://g.idws-static.com/img/layout/portal_logo.png')">
   <nav class="go_headerUserProfile">
    <ul class="go_headerUserProfileNavigation">
                 <input id="notifHelper" type="hidden" value=""/>
     <ul class="go_notificationContainer"></ul>
         <li><a href="http://www.blogger.com">Register</a></li>
     <li><a href="http://www.blogger.com">Login</a></li>
        </ul>
   </nav>
   <div class="go_headerLogo">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQJnP-jp1fVya_Ky07maTq98zFK7giBMOR5dhM9OUOpzfRFl7PZcx7nPAt_jXN5NkOpUvYX_O3xfEI1KAtoi4tsLhDRo9-rsRiW0Yx6_cRzJ1wj72y25x7G9TiiNArKqW_bxsZZNTHV7Lk/s1600/tips-blogspot-logo.png" width="300" height="47" title="Tips Blogspot" alt="Tips Blogspot" />
   </div>
   <nav class="go_headerNavigation">
          <ul>
                         <li><a href="http://tips-untuk-blogger.blogspot.com/">Home</a></li>
                    <li><a href="http://tips-untuk-blogger.blogspot.com/">Contact</a></li>
                    <li><a href="http://tips-untuk-blogger.blogspot.com/">Pesan Blog</a></li>
                    <li><a href="http://tips-untuk-blogger.blogspot.com/">Pasang Iklan</a></li>
                    <li><a href="http://tips-untuk-blogger.blogspot.com/">Tukar Link</a></li>
                    <li><a href="http://tips-untuk-blogger.blogspot.com/">About</a></li>
                    <li><a href="http://tips-untuk-blogger.blogspot.com/">Sitemap</a></li>
                        </ul>
         </nav>
                  <div class="go_headerSearch">
          <input type="text" value="Tips Blogspot Search" />
          <div class="go_headerSearchSectionSelected" value="all">All</div>
          <dl class="go_headerSearchSectionOptions">
           <dd value="all">All</dd>
           <dd value="video">Video</dd>
           <dd value="music">Music</dd>
           <dd value="games">Games</dd>
           <dd value="forum" class="disabled">Forum</dd>
          </dl>
          <div class="go_headerSearchButton"></div>
    <div class="clear"></div>
         </div>
            <div class="clear"></div>
</div>
</div>
<div id="go_headerContainerNotice">
<div class="container_12 go_headerContent">
   <div class="go_notice">
    <div class="go_noticeTitle">NOTICES</div>
    <div class="go_noticeFeeds">
           <dd style="display:block" class="active" status="1"><a href="http://tips-untuk-blogger.blogspot.com/">Terima kasih sudah berkunjung ke blog kami</a></dd>
         </div>
    <div class="go_noticeButton"><span>SHOW ALL NOTICES</span></div>
    <div class="go_noticeFeedsAll">
           <dd><a href="http://tips-untuk-blogger.blogspot.com/">Terima kasih sudah berkunjung ke blog kami</a></dd>
         </div>
    <div class="clear"></div>
   </div>
</div>
</div>
</header>
<div id="go_bottomLine"></div>
<div id="go_headerFixedNavigation">
<nav id="go_leftNav">
<ul id="go_mainNav">
                 <li><a href="http://tips-untuk-blogger.blogspot.com/">Home</a></li>
                    <li><a href="http://tips-untuk-blogger.blogspot.com/">Contact</a></li>
                    <li><a href="http://tips-untuk-blogger.blogspot.com/">Pesan Blog</a></li>
                    <li><a href="http://tips-untuk-blogger.blogspot.com/">Pasang Iklan</a></li>
                    <li><a href="http://tips-untuk-blogger.blogspot.com/">Tukar Link</a></li>
                    <li><a href="http://tips-untuk-blogger.blogspot.com/">About</a></li>
                    <li><a href="http://tips-untuk-blogger.blogspot.com/">Sitemap</a></li>
         </ul>
</nav>
<nav id="go_rightNav">
<a href="#" class="go_backTopButton">Back to Top</a>
</nav>
</div>

<script language='JavaScript' type='text/javascript'>$('.go_notice').idwsAnn();</script>
<script language='JavaScript' type='text/javascript'>$('.go_userProfileSettings').goUserSettings();</script>
<script language='JavaScript' type='text/javascript'>$('.go_userProfileGlobal').goNotification();</script>
<script language='JavaScript' type='text/javascript'>$('.go_userProfileMessage').goNotification();</script>
<script language='JavaScript' type='text/javascript'>$(".go_headerSearch").goSearch();</script>
<script language='JavaScript' type='text/javascript'>
$(document).ready(function () {
var top = $('#go_bottomLine').position().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
if(!$('#go_headerFixedNavigation').hasClass('open')) {
$('#go_headerFixedNavigation').addClass('open');
$('#go_headerFixedNavigation').slideDown('fast');
}
} else {
if($('#go_headerFixedNavigation').hasClass('open') ){
$('#go_headerFixedNavigation').removeClass('open');
$('#go_headerFixedNavigation').slideUp('fast');
}
}
});
});
</script>
<section id='subHeader'>
<div class='container_12' id='subHeaderContainer'>
<div class='clear'/>
</div>
</section>

Note: Untuk link yang berwarna hijau, usahakan atribut menunya sama. Sedangkah tulisan yang berwarna biru terserah anda mau diganti atau tidak.

Langkah terakhir, silahakan Simpan Template dan lihat perubahan yang terjadi pada blog sobat. Jika masih merasa ragu, silahkan lakukan pratinjau.

Semoga bermanfaat dan mohon maaf jika ada kesalahan (Jkt/2012)

Senin, 08 Oktober 2012

Membuat Menu Navigasi Indowebster di Blog

0 komentar em “Membuat Menu Navigasi Indowebster di Blog”

Posting Komentar

Adversite

Popular Posts

Pengikut

Total Pengunjung

This is featured post 1 title

This is featured post 2 title

This is featured post 3 title

This is featured post 4 title

This is featured post 5 title

Translate

free money (click here)

music