Bagaimana Nak Buat CSS3 Drop Down Menu Bar

Cara Membuat Drop Down Menu Bar CSS3


Menu Tab/Bar Navigasi CSS3

Jadi, mari mulai menambah menu navigasi di blogger.

Log masuk ke akaun Blogger dan pergi ke Blogger Dashboard.

Pergi ke tab Letak dengan mengklik pada teks Tata Letak di anak tetingkap kiri.

Klik pada pautan add Gadget (Bahagian Header Blog). Dalam kotak pop timbul dengan senarai alat memilih Halaman dengan mengklik tanda tambah biru untuk alat itu. Konfigurasikan alat Halaman dan klik pada butang "Save".

Klik Tambah pautan Gadget (Bahagian Header). Dalam kotak pop timbul dengan senarai alat pilih Label dengan mengklik tanda tambah biru untuk alat itu. Mengkonfigurasi alat Label dan klik pada butang "Save".

Pindahkan alat Halaman dan Label bersebelahan di bawah tajuk blog.

Pergi ke tab Template dengan mengklik teks Templat pada tetingkap kiri.

Klik pada butang Customize untuk pergi ke bahagian Blogger Template Designer.


Klik pada Advanced kemudian klik pada Tambah CSS, tambah kod yang diberikan di bawah ini ke lapangan Tambah CSS khusus dan klik pada Apply to Blog button.


Bagaimana cara nak buat menu bar/tab CSS3 drop down, bentuk navigasinya seperti gambar diatas dan ia adalah hasil gabungan CSS dan Html. Menu bar ini digunakan untuk menyambung antara homepage dan pages yang berkaitan yang anda ingin link mengikut susunan dan cita rasa anda.

1. Login Masuk Akaun blogger dan kemudian klik menu drop down.

2. Kemudian pilih "Template",

3. Sekarang anda boleh lihat bentuk Live on blog, klik "EDIT HTML",

4. Kemudian Klik "Proceed",
   
5. Cari tag ini guna arahan Ctrl+F  ]]></b:skin>

6. Copy & Paste semua kod dibawah sebelum tag ]]></b:skin> 



/* The CSS Code for the menu starts here belajarblogging.com */
.navblogtips,.nav ul {
    list-style:none;
    margin:0;
    padding:0;
    height:50px;
}

.navblogtips {
    position:relative;
}

.navblogtips ul {
    height:0;
    left:0;
    overflow:hidden;
    position:absolute;
    top:46px;
}

.navblogtips li {
    float:left;
    position:relative;
    list-style: none;
}

.navblogtips li a {
    -moz-transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    background-color:#7770B4;
    border:1px solid #6E67A6;
    color:#FFF;
    display:block;
    font-size:16px;
    line-height:35px;
    padding:5px 20px;
    text-decoration:none;
    transition:0.5s;
}

.navblogtips li:hover > a {
    background:#8CCA33;
    border-color:#6E67A6;
    color:#fff;
}

.navblogtips li:hover ul.subs {
    height:auto;
    width:180px;
}

.navblogtips ul li {
    -moz-transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    opacity:0;
    transition:0.5s;
    width:100%;
    list-style: none;
}

.navblogtrips li ul li {
    -moz-transition-delay:0s;
    -o-transition-delay:0s;
    -webkit-transition-delay:0s;
    transition-delay:0s;
    list-style: none;
}

.navblogtips li:hover ul li {
    opacity:1;
    -moz-transition-delay:0.5s;
    -o-transition-delay:0.5s;
    -webkit-transition-delay:0.5s;
    transition-delay:0.5s;
}

.navblogtips ul li a {
    background:#7770B4;
    border-color:#6E67A6;
    color:#fff;
    line-height:1px;
    -moz-transition:1.5s;
    -o-transition:1.5s;
    -webkit-transition:1.5s;
    transition:1.5s;
}

.navblogtips li:hover ul li a {
    line-height:35px;
}

.navblogtips ul li a:hover {
    background:#8CCA33;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
    background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,25,0));

}

Jadi, mari mulai menambah menu navigasi di blogger.

Log masuk ke akaun Blogger dan pergi ke Papan Pemuka Blogger.

Pergi ke tab Tata Letak dengan mengklik pada teks Tata Letak di anak tetingkap kiri.

Klik pada pautan Tambah Gadget (Bahagian Header). Dalam kotak pop timbul dengan senarai alat memilih Halaman dengan mengklik tanda tambah biru untuk alat itu. Konfigurasikan alat Halaman dan klik pada butang "Simpan".

Klik Tambah pautan Gadget. Dalam kotak pop timbul dengan senarai alat pilih Label dengan mengklik tanda tambah biru untuk alat itu. Mengkonfigurasi alat Label dan klik pada butang Simpan.

Pindahkan alat Halaman dan Label bersebelahan di bawah tajuk blog.

Pergi ke tab Template dengan mengklik teks Templat di anak tetingkap kiri.

Klik pada butang Customize untuk pergi ke bahagian Blogger Template Designer.



Klik pada Advanced kemudian klik pada Tambah CSS, tambah kod yang diberikan di bawah ini ke lapangan Tambah CSS khusus dan klik pada Apply to Blog button.


Nota***Sekiranya anda masih menghadapi masalah sila delete kod bertanda */ bahagian atas kod dalam  ]]></b:skin> (Sila lihat contoh dlm Gambar)


Cara Buat Menu Tab/Bar Untuk Blogger


7. Kemudian Masuk Dashboard Blogger Semula dan klik 'Layout'.

8. Klik 'Add Gadget' dan pilih 'HTML/Javascript'.

9. Copy & Paste kod dibawah dan letakkan gadget tersebut di bahagian bawah header sila lihat contoh blog saya.


<ul class="navblogtips">
<li><a href="http://www.belajarblogging.com/">Home</a></li>
<li><a href="http://www.belajarblogging.com/">Tutorials</a>
            <ul class="subs">
<li><a href="#">HTML / CSS</a></li>
<li><a href="#">JS / jQuery</a></li>
<li><a href="#">Belajar SEO</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">XSLT</a></li>
<li><a href="#">Tips Blogging</a></li>
<li><a href="#">HTML / CSS</a></li>
</ul>
</li>
<li><a href="#">Resources</a>
            <ul class="subs">
<li><a href="#">Belajar SEO</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">XSLT</a></li>
<li><a href="#">Tips Blogging</a></li>
<li><a href="#">HTML / CSS</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Support</a>
            <ul class="subs">
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog Tips</a></li>
<li><a href="#">Tips</a></li>
</ul>
</li>
<li><a href="#">Back</a></li>
</ul>

Nota***Kod diatas boleh diubah mengikut citarasa korang, ganti # dengan link blog korang. Kemudian ubah/tukar turutan >Home<,>Tutorials<,>Html< dan lain-lain mengikut tajuk yang anda nak link dalam blog tersebut.

***Sekiranya anda masih menghadapi masalah sila komen di bawah...

10. klik Save "HTML/Javascript".

Selesai.....Itu saja.....selamat mencuba!!!.....

Comments

  1. salam....sy budak bru blaja.....
    da try copy n paste kod yg 2nd-layout-HTML/javascript tu....tp da save n tukar #, juz kluar home....len2 tjuk xde.....helppppppp.....TQ

    ReplyDelete
    Replies
    1. w/salam....sila rujuk semula post tersebut.

      Delete
    2. Copy & paste semula kod tersebut dan ubah kod Link # ,semasa nak ubah berhati-hati bila menukar kod jangan sampai hilang satu titik kod pun...

      Rujuk semula post http://www.belajarblogging.com/2013/02/Bagaimana-Nak-Buat-Css3-Drop-Down-Menu-Bar.html

      Delete

Post a Comment

Jika anda suka artikel ini, sila Subscribe Via Email di Bawah ye... ๐Ÿ‘‡๐Ÿ‘‡๐Ÿ‘‡..!!!

Maklumat yang terkandung dalam laman Blog ini hanya untuk tujuan maklumat umum sahaja.

Kami tidak akan bertanggungjawab ke atas apa-apa kehilangan atau kerosakan termasuk tanpa had, kehilangan atau kerosakan secara langsung atau tidak langsung atau apa-apa kerugian atau kerosakan yang timbul atau sesuatu yang berkaitan dengan penggunaan laman web ini. Dilarang meniru, copy & paste kandungan dalam laman blog ini.

Komen akan ditapis untuk kesejahteraan bersama, spammer tidak dialu-alukan (spammers are not allowed).

Terima Kasih.

The Blogler (Aku Pakar Blogger).




Subscribe to Our Newsletter

Dapatkan Update Terkini Terus Ke Email Anda...


*Kami Benci Spam!

Popular Posts

Apakah Maksud Kelajuan Internet Mbps dan Kbps

Cara Padam Akaun Instagram

Bagaimana Cara Hack "Wifi Password"

Cara Membuat Video Montaj

Bagaimana Ketahui Phone Kena Hacked

Cara Buat Akaun Google Baru (Gmail)