Langsung ke konten utama

Cara Membuat Navbar Kreatif 2013




Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.
Kedua, cari ]]></b:skin> dan kemudian sisipkan kode di bawah ini tepat di atasnya.
#navbar-iframe {
  height:0px; visibility: hidden; display: none;
}
Keterangan:
Kode tersebut berfungsi untuk menyembunyikan navbar standar Blogger, sehingga apabila sebelumnya Anda telah menyembunyikan navbar standar maka lewati langkah ini dan lanjutkan pada langkah yang ketiga.

Ketiga, sisipkan rangkaian kode CSS berikut ini tepat di atas ]]></b:skin> .
/*--------------------------------------------------------------
Kustomisasi Bilah Menu Navigasi Di Atas Header Halaman Blog
Oleh: Semar Bingung
Blog: ELTELU -:[SEMAR BINGUNG'S WEBLOG]:-
URL : http://eltelu.blogspot.com/
--------------------------------------------------------------*/
.bilah-menu-atas {
  width: 100%;
  min-width: 960px;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 27px;
  font-size: 13px;
  z-index: 99;
  white-space: nowrap;
  background-color: #336699;
  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: 1px 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: 1px solid rgba(30, 30, 30, 0.125);
}

.kolom-menu ul li a {
  color: #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: 1px solid rgba(30, 30, 30, 0.125);
  box-shadow: 1px 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);
}
Keterangan:
Warna yang dihasilkan oleh rangkaian kode CSS di atas adalah warna biru untuk background dan putih pada teks. Sehingga apabila belum sesuai dengan desain tampilan halaman blog Anda, maka sesuaikan warna yang digunakan dengan mengganti kode warna yang dipakai pada bagian color:, background-color:, dan background-image:.
Keempat, cari kode <body dan kemudian sisipkan rangkaian kode dengan format seperti contoh berikut ini tepat di bawahnya.
<div class='bilah-menu-atas' id='bilahmenuatas'>
  <div class='kolom-utama'>
    <div class='kolom-menu'>
      <ul>
        <li><a href='http://eltelu.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjluUzln-qz5vGtyY1SUJ4lOchI-VmUHdRT69B85-RCfSD_ZDlGUNtVS1Xny260i64SrWcbWhcrcDGRcP9kV96ShfzzFZNPpIWjra0rQ2dxBPXaOmduWaVsyr3HR5Pn_PtMOmq_UCMUDFg/s800/Beranda.png' width='20px'/></a></li>
        <li><a href='URL'>Menu Kiri 1</a></li>
        <li><a href='URL'>Menu Kiri 2</a></li>
      </ul>
    </div>
    <div class='kolom-menu'>
      <ul style='float: right'>
        <li><a href='URL'>Menu Kanan 1</a></li>
        <li><a href='URL'>Menu Kanan 2</a></li>
      </ul>
    </div>
  </div>
</div>
Keterangan:
Ganti http://eltelu.blogspot.com/ dengan URL blog Anda dan ganti pula kata URL dengan link artikel yang akan ditautkan. Dan kemudian ubah kata Menu Kiri 1, Menu Kiri 2, Menu Kanan 1 dan Menu Kanan 2 sesuai dengan menu tampilan yang dikehendaki.
Kelima, simpan template.

Setelah template disimpan maka navbar standar Blogger tidak lagi ditampilkan di halaman blog dan akan tergantikan dengan navbar baru seperti yang tampak pada gambar di atas. Kemudian perlu diketahui bahwa rangkaian contoh kode pada langkah yang keempat akan menghasilkan 2 (dua) buah kolom menu. Kolom sebelah kiri berisikan 3 (tiga) buah menu yaitu Beranda (Home), Menu Kiri 1, dan Menu Kiri 2, sedangkan kolom sebelah kanan berisikan 2 (dua) buah menu yaitu Menu Kanan 1 dan Menu Kanan 2. Sehingga apabila belum sesuai dengan keinginan, maka silakan dilakukan kustomisasi seperlunya dengan menambahkan atau mengurangi kode <li><a href='URL'>Menu</a></li>.
Semoga berguna dan bermanfaat.
Salam.
Sumber: http://eltelu.blogspot.com/2012/09/cara-membuat-tab-menu-horizontal.html#ixzz2NiKRk3Nt

Label

Label:

Komentar

Posting Komentar

Tiada gading yang tak retak, saran dan masukan Anda akan sangat membantu kami. Budayakan Membaca Sampai Akhir, Jika ada yang masih kurang jelas, Anda dapat menuliskannya pada kolom komentar di bawah ini atau melalui Contact Us di bagian blog ini.
1. Centang kotak Notify me untuk berlangganan.
2. Setiap Komentar yang masuk akan kami moderasi, sebelum tampil dipublish.
3. Patuhi pedoman berkomentar dengan sopan santun dan menghargai pendapat orang lain.
Semoga kedepannya kita dapat bekerja sama dengan baik!
Salam Sukses dan Bahagia.

Postingan populer dari blog ini

Pengertian dan Peran dari Forkopimda Forkopimcam, Muspida, hingga Muspika

Masih banyak yang bertanya-tanya, apa itu arti dari Forkopimda, Forkopimcam, Muspida, dan Muspika? Serta apa peran mereka dalam pemerintahan? Kali ini kita akan bahas pengertian dan peran apa itu Forkopimda Forkopimcam, Muspida, dan Muspika. Serta perangkat yang terlibat dalam setiap kelompok forum atau musyawarah tersebut. Selain untuk menambah wawasan pengetahuan, ini juga penting untuk pemahaman kita mengetahui peranan mereka yang terlibat dalam urusan pemerintahan. Semua perangkat tersebut memiliki funsi yang saling berhubungan satu sama lainnya. Pada fungsi koordinasi antar unsur forkopimda dalam pelaksanaan pembangunan dan penyelesaian masalah-masalah aktual di daerah. Agar terbangun konektivitas antar pusdalsis kabupaten/kota dan provinsi. Hal itu bisa terjalankan dengan adanya kerjasama dan relasi bersama Forkopimcam. Merujuk pada Undang-undang Nomor 23 tahun 2014 pasal 26 tentang Pemerintah Daerah. Demikian juga Komunitas Intelejen Daerah (kominda) melaksanakan perannya sebaga...
Posting Komentar
Read more »

Cara Memindah Tata Letak Yang Tidak Bisa Dipindah

Hai ini sering dipartanyakan oleh mereka blogger pemula, "Kok nggak bisa digeser,?" Pertanyaan itulah yang memberi saya ide untuk kembali mengutak-atik template. Toh, cukup membantu kan.? ^_^
26 komentar
Read more »

Cek Koneksi dengan ping 8.8.8.8 -t dan Cara Membacanya

  Bagi seorang operator dapodik disekolah kebutuhan untuk mengecek koneksi internet adalah hal yang lumrah, c ara termudah tentu saja anda membuka browser lalu mencoba mengunjungi situs tertentu seperti google.com , gmail.com , youtube.com atau juga facebook.com . namun menurut saya cara ini kurang dapat memberikan informasi yang lengkap. karena terkadang saat kita mengunjungi sebuah situs/web, dan tidak bisa terbuka , bukan berarti koneksi kita yang bermasalah. bisa jadi juga karena browser yang terkena virus atau juga situs tersebut sedang down (tidak bisa di akses). Oleh karena itu berikut ini tips  Cek Koneksi dengan ping 8.8.8.8 -t dan Cara Membacanya  tanpa perlu membuka browser dan juga memberikan informasi yang lebih lengkap. Koneksi yang di atas menunjukkan bahwa koneksi tidak stabil dan kurang cepat, hal ini dapat dilihat melalui time yang muncul, semakin kecil time maka menunjukkan semakin cepat koneksi Anda, dari time juga dapat dilihat apabila munculnya tida...
Posting Komentar
Read more »