Langsung ke konten utama

cara membuat menu sampingan

cara membuat menu samping

cara membuat menu samping seperti di samping sangat mudah lihat tips2 berikut ya gan

Cara memasang

1. Masuk ke Dasbor Blog >> Tata Letak >> Tambahkan Gadget >> Pilih HTML/Javascript

2. Masukkan kode di atas.

Yang perlu sobat perhatikan antara lain;

1. Ukuran lebar menu disini adalah 300px, jangan lupa disesuaikan dengan ukuran sidebar blog sobat dgn mengurangi atau menambahnya.

2. Jumlah URL/Post maksimal 5 (saya gak tahu juga, kok cuma bisa segitu, hehe maklum super gaptek). Jika sobat mengisi dengan 6 Link, gak bakalan tampil semua.

3. Untuk menambah navigasi, silahkan copy saja kode yang sudah saya beri warna merah tebal sebagai contoh, kemudian ganti URL dan Judul Post

4. Kode berwarna hijau, sebagai judul/anchor text, sesuaikan dengan artikel sobat.

5. Untuk pewarnaan menunya silakan utak atik sendiri yee, hehehe. contoh pewarnaan nya ada pada kode color: #0A0A0A; masuk aja ke Color Generator untuk mengetahui kode warna

6. Selamat Mencoba.
Berikut kodenya

<style type="text/css">
* {
  margin: 0px;
  padding: 0px;
}
nav {
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.5;
  margin: 50px auto; /*for display only*/
  width: 300px;
  -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.menu-item {
  background: #fff;
  width: 300px;
}
/*Menu Header Styles 1*/
.menu-item h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 7px 12px;
  background: #9DB6D7;
}
.menu-item h4 a {
  color: white;
  display: block;
  text-decoration: none;
  width: 300px;
}
/*Menu Header Styles 2*/
.menu-item h4 {
  border-bottom: 1px solid rgba(0,0,0,0.3);
  border-top: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 7px 12px;
  background: #a90329; /* Old browsers */
  background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
  background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.menu-item h4:hover {
  background: #cc002c; /* Old browsers */
  background: -moz-linear-gradient(top,  #cc002c 0%, #6d0019 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc002c), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* IE10+ */
  background: linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc002c', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.alpha p {
  font-size: 13px;
  padding: 8px 12px;
  color: #aaa;
}
/*ul Styles*/
.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
}
.menu-item ul a {
  margin-left: 20px;
  text-decoration: none;
  color: #0A0A0A;
  display: block;
  width: 250px;
}
/*li Styles*/
.menu-item li {
  border-bottom: 1px solid #eee;
}
.menu-item li:hover {
  background: #eee;
}
/*ul Styles*/
.menu-item ul {
  background: #B2D8E0;
  font-size: 13px;
  line-height: 30px;
  height: 0px; /*Collapses the menu*/
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
}
/*ul Styles*/
.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  height: 0px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
  /*Animation*/
  -webkit-transition: height 1s ease;
     -moz-transition: height 1s ease;
       -o-transition: height 1s ease;
      -ms-transition: height 1s ease;
          transition: height 1s ease;
}
.menu-item:hover ul {
  height: 115px;
}
</style>
<nav>
    <div class="menu-item">
      <h4><a href="http://namablog.com" target="_blank"">Membuat Blog</a></h4>
      <ul>
        <li><a href="http://namablog.com" target="_blank">Membuat Email </a></li>
        <li><a href="http://namablog.com" target="_blank">Membuat tabel </a></li>
        <li><a href="http://namablog.com" target="_blank">Promosi Blog</a></li>
       <li><a href="http://namablog.com" target="_blank">Setelan Blogger</a></li>
       <li><a href="http://namablog.com" target="_blank"> Membuat Gmail</a></li>
    </ul>
    </div>
 
    <div class="menu-item">
      <h4><a href="masukkan URL/Link postingan">Widget</a></h4>
      <ul>
    <li><a href="masukkan URL " target="_blank">Cara Pasang widget</a></li>
    <li><a href="masukkan URL " target="_blank">Cara Buat Laman Statis</a></li>
    <li><a href="masukkan URL " target="_blank">Cara Ganti Favicon</a></li>
    <li><a href="masukkan URL " target="_blank">Ganti Template Blog</a></li>
    <li><a href="masukkan URL " target="_blank">Cara Ubah Background Blog</a></li>
    </ul>
    </div>

    <div class="menu-item">
      <h4><a href="masukkan URL/Link postingan disini" target="_blank"">Widget</a></h4>
      <ul>
    <li><a href="masukkan URL disini" target="_blank">Cara Pasang Gadget</a></li>
    <li><a href="masukkan URL disini" target="_blank">Menu Vertikal</a></li>
    <li><a href="masukkan URL disini" target="_blank">Cara Ganti Favicon</a></li>
    <li><a href="masukkan URL disini" target="_blank">Ganti Template Blog</a></li>
    <li><a href="masukkan URL disini" target="_blank">Ubah Background Blog</a></li>
      </ul>
    </div>

    </nav>

 

Komentar

Posting Komentar

Postingan populer dari blog ini

kunci guitar hari setelah senja DAY AFTERNOON

(intro : D--G-D-Em-D-A-D 3x ) (D--G-D-Em--D-A > oh tak terasa sudah aku lingkari berulang ulang kali ) ... (D--G-D-Em-D-A-D > sudah aku cari kesana kemari dari selatan kota sampai ke utara ) (intro : D--G-D-Em-D-A-D 2x ) (D--G-D-Em--A > sepertinya bukan karna kimia yang buat kita masih bisa bersama ) (D--G-D-Em-D-A-D > sedikit air dan udara menunggu senja sampai malam tiba ) (Reff : D--G-D-Em--A > sore sore sama sama minum jamu dicampur soda (D--G-D-Em-D-A-D > sore sore sama sama berbagi cerita biar ga gila ) (melodi : D--G-D-Em-D-A-D 2x ) (#) G-A > kamu minta yang aku punya G-> tak ada lagi cuma tinggal A-> Segini ) (Reff : D--G-D-Em--A > sore sore sama sama minum jamu dicampur soda (D--G-D-Em-D-A-D > sore sore sama sama berbagi cerita biar ga gila ) (Em-D-A-D > berbagi cerita biar ga gila ) (Em-D-A-D > berbagi RASTA biar tertawa ) Pindah kuncinye cepet man . . Untuk tanda (--) tahan kuncinye 2x
Posting Komentar
Baca selengkapnya

cara membuat menu navigasi drop down pada blog

Pada tutorial terdahulu sudah saya jelaskan cara membuat   menu navigasi biasa , cara membut   menu pages   dan cara membuat gabungan   menu vagiasi dan pages , pada tutorial kali ini saya akan menjelaskan cara membuat menu navigasi   drop down   atau menu sub navigasi. Sebelumnya akan saya jelaskan apa itu menu vaigasi drop down. Dalam terjemahan bahasa Indonesia drop down dapat di artikan turun kebawah jadi menu navigasi drop down adalah menu yang di fungsikan untuk mengelompokkan suatu artikel ke dalam sub kategori tertentu menjadi lebih terperinci sesuai dengan kategori artikel dan di susun  kebawah berdasarkan menu utama. Sebagai contohnya Anda ingin membuat menu artikel dengan tema Smartphone di mana di dalamnya Anda kelompkkan lagi menjadi lebih terperinci dengan menambah sub menu seperti Android, iOS, Windows Phone atau Blackberry.  Fungsi menu drop down pada dasarnya untuk lebih memudahkan pembaca blog Anda membaca artikel tertentu ...
Posting Komentar
Baca selengkapnya