Cara Membuat Vertikal Text/Link Navigasi Menu di Blogspot

Navigasi menu di kebanyakan blog biasanya menggunakan menu sidebar, menu vertikal, yang berada pada header menu dll. Agan pasti jarang menemukan sebuah blog dengan menu teks / link vertikal, kan? Jadi dalam post kali ini saya mengembangkan link teks menu dalam bentuk vertikal / style yang menawarkan link menggantung dari sisi atas blog, dan link yang akan ditampilkan secara vertikal. Menu ini dibuat dengan CSS3 mengotak atik beberapa kode yang lumayan mumet untuk membuat link muncul secara vertikal dan menambahkan efek opacity dari warna datar yang oke punya untuk setiap link yang Saya gunakan, menggunakan google font supaya lebih enteng dan joss. Yuk kita lihat bagaimana dan seperti apa cara untuk membuat menu ini.

 Langkah 1: Membuat class navigasi

 .nav {
    position: relative;
        float:right;
        top: -3px;
}

Langkah 2: Di sini kita menggunakan elemen li nav ini; dengan CSS3 transform: rotate (-90deg); lebar; posisi teks dan menu

 .nav ul li {
    -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  transform: rotate(-90deg);
    width: 100px;
    overflow: hidden;
    padding:5px 10px 10px 18px;
    float: left;
    background-color: #7f9db9;
    text-align: left;
    margin-left:-50px
}

Langkah 3: Sekarang merancang elemen 'link' dengan gaya font, ukuran, dekorasi dan juga warna.

  .nav ul li a {
    color: #fff;
    text-decoration: none;
    display: block;
    font-family: 'Josefin Sans', sans-serif;
    font-weight:500;
    font-size:16px;
}

Langkah 4: Setelah memilih warna kemudian untuk membuat menu seperti melayang-layang dan juga warnanya kita sisipkan elemen dengan kode <li> RGBA; Saya memakai 5 Slot Link sehingga membuat warna seperti ini l1, l2, l3, l4 l5 dan <li> lainnya.

   .nav ul li.l1 {
    background-color: rgba(243, 156, 18,0.65);
}
.nav ul li.l1:hover {
    background-color: rgb(243, 156, 18);
}
.nav ul li.l2 {
    background-color: rgba(207, 0, 15,0.65);
}
.nav ul li.l2:hover {
    background-color: rgb(207, 0, 15);
}
.nav ul li.l3{
    background-color: rgba(54, 215, 183,0.65)
}
.nav ul li.l3:hover {
    background-color: rgb(54, 215, 183);
}
.nav ul li.l4{
    background-color: rgba(25, 181, 254,0.65)
}
.nav ul li.l4:hover {
    background-color: rgb(25, 181, 254);
}
.nav ul li.l5{
    background-color: rgba(65,117,160,0.65)
}
.nav ul li.l5:hover {
    background-color: rgb(65,117,160);
}

Langkah 5: Memanggil kelas CSS dan HTML; Jadi saya menggunakan <div> untuk memanggil .nav atau Agan mungkin pakai ini <nav> untuk mengintegrasikan desain HTML5nya. Menambahkan <ul>, <li> dan elemen <a>. Dan akhirnya menyelesaikan desain.

    <div class="nav">

        <ul>

            <li class='l1'><a href="#">Home</a></li>

            <li class='l2'><a href="#">Blogger</a></li>

            <li class='l3'><a href="#">Wordpress</a></li>

            <li class='l4'><a href="#">About</a></li>

            <li class='l5'><a href="#">Contact</a></li>

        </ul>

    </div>   

Langkah 6: Pasang link di anchor teks "#" pada perubahan yang Agan inginkan. Ubah kode warna dengan warna RGBA yang Agan inginkan. Dan di bawah ini full code menu navigasi yang kita bahas di atas tadi:

   
<!--carastutik.blogspot.com HTML starts-->    

<div class="nav">

        <ul>

            <li class='l1'><a href="#">Home</a></li>

            <li class='l2'><a href="#">Blogger</a></li>

            <li class='l3'><a href="#">Wordpress</a></li>

            <li class='l4'><a href="#">About</a></li>

            <li class='l5'><a href="#">Contact</a></li>

        </ul>

    </div>

<!--carastutik.blogspot.com HTML ends-->     

<style>/*carastutik.blogspot.com CSS starts*/

@import url(https://fonts.googleapis.com/css?family=Josefin+Sans);

.nav {

    position: relative;

        float:right;

        top: -3px;

}

.nav ul li {

    -webkit-transform: rotate(-90deg);

  -moz-transform: rotate(-90deg);

  transform: rotate(-90deg);

    width: 100px;

    overflow: hidden;

    padding:5px 10px 10px 18px;

    float: left;

    background-color: #7f9db9;

    text-align: left;

    margin-left:-50px

}

.nav ul li a {

    color: #fff;

    text-decoration: none;

    display: block;

    font-family: 'Josefin Sans', sans-serif;

    font-weight:500;

    font-size:16px;

}

.nav ul li.l1 {

    background-color: rgba(243, 156, 18,0.65);

}

.nav ul li.l1:hover {

    background-color: rgb(243, 156, 18);

}

.nav ul li.l2 {

    background-color: rgba(207, 0, 15,0.65);

}

.nav ul li.l2:hover {

    background-color: rgb(207, 0, 15);

}

.nav ul li.l3{

    background-color: rgba(54, 215, 183,0.65)

}

.nav ul li.l3:hover {

    background-color: rgb(54, 215, 183);

}

.nav ul li.l4{

    background-color: rgba(25, 181, 254,0.65)

}

.nav ul li.l4:hover {

    background-color: rgb(25, 181, 254);

}

.nav ul li.l5{

    background-color: rgba(65,117,160,0.65)

}

.nav ul li.l5:hover {

    background-color: rgb(65,117,160);

}

/*carastutik.blogspot.com CSS ends*/</style>

Menu ini kompatibel dengan semua browser versi terbaru. Jadi apa pendapat Agan tentang menu navigasi ini jangan lupa komen di bawah ya :)

Cara Membuat Vertikal Text/Link Navigasi Menu di Blogspot 2015-12-05T16:40:00-08:00 Rating: 4.5 Diposkan Oleh: Unknown