Page Nav

HIDE

Left Sidebar

TO-LEFT

Breaking News

latest

MEMBUAT MENU MIRIP BHINEKA.COM dengan PHP dan DREAMWEAVER

Februari 26, 2014 Edit this post

 gambar menu bar bhineka.com Siapa yg gatau bhineka.com ?? pasti semuanya udah tau donk .. nah buat saya bhineka. tuh bukan hanya tempa...

 gambar menu bar bhineka.com
Siapa yg gatau bhineka.com ?? pasti semuanya udah tau donk ..
nah buat saya bhineka. tuh bukan hanya tempat jual barang aja .. tapi juga tempat gua ngambil script2 web nya .. wkwkkwkwkwk

ya ini berawal dari Tugas Akhir ane yang milih pembuatan web ecommerce .. jadi seneng deh ngambil2 script2 .. wah mewah sekali dah kalo udah ngerti :P

Btw ini adalah postingan pertama pas udah sidang Tugas Akhir ..
udah jam 5 pagi tapi mata belum mau merem ...

Pada pengen tau khan gimana cara buat nya?
kaya gimana sih?? yang bener sih??

ya ga 100% mirip sih .. tapi cuman mendekati aja .. biar ga dibilang plagiat hgohohohoh ....

yu dimari :

pertama-tama silahkan sisipkan kode CSS dibawah ini, simpan diatas kode </head> di halaman web kamu.



code untuk CSS

<!--UNTUK MENU TAB ANIMASI DIATAS -->
<script src="js/client.js" async="" type="text/javascript" id="LR1"></script>

<script async="" src="js/cbgapi.loaded_1"></script>

<script async="" src="js/cbgapi.loaded_0"></script>

<script src="js/shares.json" type="text/javascript"></script>

<script src="js/auth016.js" type="text/javascript"></script>

<script src="js/counter017.js" type="text/javascript"></script>

<link media="all" href="js/counter014.css" type="text/css" rel="stylesheet" />

<script gapi_processed="true" src="js/plusone.js" type="text/javascript"></script>

<script src="js/widgets.js" type="text/javascript"></script>

<link media="all" href="js/widget119.css" type="text/css" rel="stylesheet" />

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

<link href="js/main-compressed.css" rel="stylesheet" type="text/css" />
    <!--[if lt IE 7]>
    <style type="text/css">
        body {background: url("/images/trans.gif") fixed;}
        #StickyChatWithUs {position: absolute !important; right: 0 !important; top: expression( ( 0 - StickyChatWithUs.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' ) !important;}
        .divMenuListOuterContainer {background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transparent.png', sizingMethod='scale');}
    </style>
    <![endif]-->
    <style type="text/css">
        #MainTopBar
        {
            background-color: #EA272B;
            border-top: 1px solid #480001;
            border-bottom: 1px solid #454B41;
            color: #fff;
        }
        #MainTopBar a
        {
            color: #fff;
        }
       
        #MainTopBarOuterWrapper
        {
            border-top: none;
            border-bottom: 1px solid #1B1215;
        }
        #MainTopBarInnerWrapper .MainTopBarBorderLeft
        {
            border-left: 1px solid #fff;
        }
        #MainFooter a, #MainFooterInnerWrapper
        {
            color: #fff;
        }
        #MainFooter li a:hover
        {
            background-color: #E3AA01;
        }
        .MainFooterColumnTitle
        {
            color: #fff;
        }
        #MainFooterSocial a
        {
            margin: 0 1px;
        }
        
    </style>
    <script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
    
    <!--UNTUK MENU TAB DIATAS SELESAI -->


kalo udah sisipkan kode HTML dibawah ini pas di bawah <body>  yang berfungsi buat bikin ukuran menu bar

code untuk HTML


   
    

  <!-- MENU KAYA BINEKA -->
<div style="height: 27px; background-color: #97C04A;" class="themeborderleftright">
<!-- MENU KAYA BINEKA SELESAI -->



 


script MENU BAR BHINEKA



<td width="780" bgcolor="#10A587"><div id="ctl00_divMenu" class="navigation">
      <table style="height:100%;width:100%;border-collapse:collapse;" cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td id="ctl00_MNU1008" align="center"><a class="lnkMenuRoll" id="ctl00_LBL1008" href="#"> <span class="style3" data-title="BERANDA">BERANDA</span></a></td>
            <td id="ctl00_MNU1009" align="center"><a class="lnkMenuRoll" id="ctl00_LBL1009" href="#"> <span class="style3" data-title="HARDWARE">HARDWARE</span></a></td>
            <td id="ctl00_MNU1010" align="center"><a class="lnkMenuRoll" id="ctl00_LBL1010" href="#"> <span class="style3" data-title="SOFTWARE">SOFTWARE</span></a></td>
            <td id="ctl00_MNU1011" align="center"><a class="lnkMenuRoll" id="ctl00_LBL1011" href="#"> <span class="style3" data-title="AKSESORIS">AKSESORIS</span></a></td>
            <td id="ctl00_MNU1012" align="center"><a class="lnkMenuRoll" id="ctl00_LBL1012" href="#"> <span class="style3" data-title="TESTIMONI">TESTIMONI</span></a></td>
            <td id="ctl00_MNU1013" align="center"><a class="lnkMenuRoll" id="ctl00_LBL1013" href="#"> <span class="style3" data-title="CARA BELANJA">CARA BELANJA</span></a></td>
            <td id="ctl00_MNU1014" align="center"><a class="lnkMenuRoll" id="ctl00_LBL1014" href="#"> <span class="style3" data-title="PROMO">PROMO</span></a></td>
            <td id="ctl00_MNU1015" align="center"><a class="lnkMenuRoll" id="ctl00_LBL1015" href="#"> <span class="style3" data-title="ULASAN PRODUK">ULASAN PRODUK</span></a></td>
          </tr>
        </tbody>
      </table>
    </div></td>
Ket: ganti tanda # dengan link yg kamu punya.

Setelah itu download Javascript pendukung nya disini:

download js.rar

Ekstrak hasil download lalu simpan hasil nya di dalam folder js ... dan simpan didalam web kamu ..

kalo udah sok deh di tes .. pasti berhasil !!

haha maaf postingan na rada ngebut .. geus teu paruguh tapi hayang posting :P (artinya : udah ga jelas ni tapi pengen tetep posting)

nuhun yg udah mampir :)
 monyaadam

Related Posts