Membuat Navigasi Statis dengan menu anchor Bersosial.com

Discussion in 'Blogger' started by nawi667, Jul 12, 2013.

  1. nawi667

    nawi667 Member

    Joined:
    Jul 5, 2013
    Messages:
    113
    Likes Received:
    6
    Trophy Points:
    18
    Google+:
    Sebelumnya saya mohon maaf kepada semua sesepuh Bersosial.com karena telah lancang membuat tips-trik blogging berupa menu Navigasi Statis yang memasukkan menu achor Bersosial.com di dalamnya.

    Seperti apa bentuk atau model Navigasi Statis ini ? Berikut contoh bentuk menu navigasi tersebut :

    [​IMG]

    Menu Navigasi Statis ini juga dapat dipergunakan untuk mempercantik penampilan blog yang anda miliki. Bagaimana cara membuatnya ? Bila anda berminat, berikut ini cara-caranya :

    Masuk ke blog anda, pilih template dan pilih edit html, jangan lupa mem-backup seluruh template anda terlebih dahulu (untuk jaga-jaga), selanjutnya cari kode-kode yang tercetak tebal di bawah ini.

    Letakkan di atas
    Code:
    ]]></b:skin>



    .bilah-menu-atas {
    width: 100%;
    min-width: 960px;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 35px;
    font-size: 13px;
    z-index: 99;
    white-space: nowrap;
    background-color: #000;
    background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
    box-shadow: 0px 2px 0px rgb(14, 90, 140);
    border-bottom: 3px solid rgba(255, 255, 255, 0.1);
    }
    .kolom-utama {
    -moz-transition: all 0.2s linear 0s;
    width: 960px;
    height: auto;
    margin: 0px auto;
    }
    .kolom-menu {
    width: 521px;
    height: auto;
    margin: 0px 0px 0px -41px;
    float: left;
    display: inline;
    }
    .kolom-menu ul {
    height: auto;
    margin-top: 0px;
    }
    .kolom-menu ul li {
    float: left;
    position: relative;
    list-style: none outside none;
    }
    .kolom-menu ul li:first-child {
    border-left: 0px solid rgba(30, 30, 30, 0.125);
    }
    .kolom-menu ul li a {
    color:
    Code:
    #ffffff
    ;
    font-weight: bold;
    text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    display: inline-block;
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    position: relative;
    border-right: 0px solid rgba(30, 30, 30, 0.125);
    box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.1);
    }
    .kolom-menu ul li a:hover, .kolom-menu ul li a:focus {
    background-color: rgba(255, 255, 255, 0.125);
    }

    Letakkan kode berikut di bawah
    Code:
    <body>

    Code:
    <div class='bilah-menu-atas' id='bilahmenuatas'>
  <div class='kolom-utama'>
    <div class='kolom-menu'>
      <ul>
        <li><a href='alamat url blog/'><img alt='nama blog' height='40px' src='http://img835.imageshack.us/img835/806/star1i.png' title='Home' width='40px'/></a></li>
        <li><a href='alamat url'><img alt='Daftar Isi' height='15px' src='https://lh5.googleusercontent.com/-PzvwMDsW8Ew/UYmvLFADjDI/AAAAAAAABSI/nhJ3y-8lP98/s800/Daftar%2520Isi.png' title='Daftar Isi' width='20px'/> Sitemap</a></li>
        <li><a href='alamat url'  target='_blank'><img alt='Komunikasi' height='15px' src='https://lh5.googleusercontent.com/-yep7cuRpWq4/UYmvLsJJFPI/AAAAAAAABSQ/5hdXDeu0NLI/s800/Tanya%2520Jawab.png' title='Forum Komunikasi' width='20px'/> Forum Komunikasi</a></li>
      </ul>
    </div>
    <div class='kolom-menu'>
      <ul style='float: right'>
        <li><a href='http://bersosial.com' target='_blank'><img alt='Bersosial' height='15px' src='http://img441.imageshack.us/img441/1232/1co1.png' title='Bersosial' width='20px'/> Bersosial</a></li>
        <li><a href='alamat url'><img alt='Kebijakan' height='15px' src='https://lh5.googleusercontent.com/-jbZduEQqB5Q/UYoDSQUNgNI/AAAAAAAABSw/-wbPXoxLfSw/s800/Kebijakan.png' title='Kebijakan' width='20px'/> Kebijakan</a></li>
        <li><a href='alamat url'><img alt='Kontak' height='15px' src='https://lh4.googleusercontent.com/-zmS8wnvLt1g/UYoDSpgXLrI/AAAAAAAABS0/47n3M5mDB7M/s800/Kontak.png' title='Kontak' width='20px'/> Kontak Me</a></li>
      </ul>
    </div>
  </div>
</div>
    <br/>

    Jangan lupa menyimpan template anda dan lihat hasilnya. Semoga tips-trik blogging dari aku ini dapat bermanfaat.

    Tambahan : berhubung logo Bersosial.com sering tidak muncul, maka alamat icon tersebut diganti dengan :

    Code:
    http://3.bp.blogspot.com/-RIWj5N6L_As/UeIvhTAPdTI/AAAAAAAAAlY/S6U6bMxu__A/s1600/IKON-BERSOSIAL.png

    Sumber asli : http://dolananmusik.blogspot.com/2013/07/menu-navigasi-statis-dengan-fitur.html
     
    nawi667, Jul 12, 2013
    #1
  2. Fahmi

    Fahmi Newbie

    Joined:
    Dec 5, 2012
    Messages:
    1,719
    Likes Received:
    159
    Trophy Points:
    63
    Google+:
    Fitur bersosial? Anchor text

    Fitur bersosial? Anchor text kali.. cntohnya pakai kata bersosial.com gitu.. oke nice tips.. responsive gk nih?
     
    Fahmi, Jul 12, 2013
    #2
    kaliwungu likes this.
  3. nawi667

    nawi667 Member

    Joined:
    Jul 5, 2013
    Messages:
    113
    Likes Received:
    6
    Trophy Points:
    18
    Google+:
    Fahmi wrote:

    Untuk responsif atau nggaknya .... silahkan anda coba sendiri ..... *bergaya*
     
    nawi667, Jul 12, 2013
    #3
  4. samuel

    samuel Member

    Joined:
    Feb 5, 2013
    Messages:
    478
    Likes Received:
    15
    Trophy Points:
    18
    Google+:
    kirain kayak apa fiturnya,

    kirain kayak apa fiturnya, ternyata cuma menu Anchor , tapi keren juga nih kayaknya *jail*
     
    samuel, Jul 12, 2013
    #4
  5. ncang

    ncang Super Level

    Joined:
    Feb 7, 2013
    Messages:
    4,653
    Likes Received:
    761
    Trophy Points:
    113
    Google+:
    bagi yang suka oprek template

    bagi yang suka oprek template silakan di coba :D
     
    ncang, Jul 12, 2013
    #5
  6. wphoet

    wphoet You'll Never Walk Alone

    Joined:
    Feb 19, 2013
    Messages:
    1,149
    Likes Received:
    142
    Trophy Points:
    63
    Google+:
    ooq kyk navbarnya blogger

    ooq kyk navbarnya blogger gitu ya *bingung*
     
    wphoet, Jul 12, 2013
    #6
  7. nawi667

    nawi667 Member

    Joined:
    Jul 5, 2013
    Messages:
    113
    Likes Received:
    6
    Trophy Points:
    18
    Google+:
    mirip sih .., tapi beda

    Yah ... mirip sih, namun navigasi statis ini sedikit lebih dinamis, dalam artian bisa diubah-ubah menunya, dimodifikasi menjadi menu navigasi dropdown pun bisa, tinggal bagaimana kreatifitas kita aja .......... *yes3*
    Perbedaannya dengan punya blogger ...., menu navigasi ini bersifat statis ..... jadi tidak ikut bergerak saat kita menyorotkan mouse sampai ke bagian bawah blog ....
     
    nawi667, Jul 12, 2013
    #7
  8. masmun

    masmun Member

    Joined:
    Feb 1, 2013
    Messages:
    192
    Likes Received:
    3
    Trophy Points:
    18
    Google+:
    Lumayan buat

    Lumayan buat nambah koleksi modifikasi theme blogcepot *bergaya*
     
    masmun, Jul 13, 2013
    #8
  9. kaliwungu

    kaliwungu Member

    Joined:
    Jan 7, 2017
    Messages:
    152
    Likes Received:
    12
    Trophy Points:
    18
    Ya betul, apakah sudah responsif ?
     
    kaliwungu, Mar 9, 2017
    #9
Loading...
Similar Threads - Membuat Navigasi Statis
  1. Pasha Lovarian

    [ASK] Cara membuat Shortener Generate Link Domain Sendiri

    Pasha Lovarian, Mar 15, 2017, in forum: Blogger
    Replies:
    5
    Views:
    3,848
    compzone08
    Oct 3, 2017
  2. BangNasti

    [Ask] Bagaimana cara membuat gambar artikel vertikal jadi horizontal?

    BangNasti, Mar 5, 2017, in forum: Blogger
    Replies:
    10
    Views:
    3,233
    #BOOM
    Mar 5, 2017
  3. Musthafa Kamal

    [HELP] Cara membuat subdomain di cloudflare?

    Musthafa Kamal, Apr 2, 2016, in forum: Blogger
    Replies:
    21
    Views:
    5,310
    Musthafa Kamal
    Jul 14, 2016
  4. Leon Sion Turnip

    [ ASK ] Cara Membuat Kotak KomenSeperti Forum

    Leon Sion Turnip, Jan 8, 2016, in forum: Blogger
    Replies:
    6
    Views:
    1,372
    zaarsaja
    Feb 4, 2016
  5. sentanawalian

    Membuat Kontent Untuk Membangun Website

    sentanawalian, Feb 22, 2015, in forum: Blogger
    Replies:
    7
    Views:
    1,371
    DwiKhasbullah
    Apr 15, 2015

Share This Page