Close Menu
BloggermyidBloggermyid
    Terupdate
    • Tips SEO Terbaik Dari Tim Google, Kualitas Untuk Pencarian
    • Tips Jitu Menjaga Rumah Bebas Dari Serangan Rayap
    • Cuci Gorden Depok Dengan Pengerjaan Di Tempat
    • Pafi Pematang Siantar Dalam Menjaga Kesehatan Masyarakat
    • Pafi Fakfak, Organisasi Ahli Farmasi Berpengaruh Di Indonesia
    Facebook X (Twitter) Instagram YouTube
    Trending :
    • Tips SEO Terbaik Dari Tim Google, Kualitas Untuk Pencarian
    • Tips Jitu Menjaga Rumah Bebas Dari Serangan Rayap
    • Cuci Gorden Depok Dengan Pengerjaan Di Tempat
    • Pafi Pematang Siantar Dalam Menjaga Kesehatan Masyarakat
    • Pafi Fakfak, Organisasi Ahli Farmasi Berpengaruh Di Indonesia
    • Kontribusi Pafi Tali Abu Dalam Dunia Farmasi Indonesia
    • PAFI Pesawaran, Peran Dan Kontribusi Dalam Dunia Farmasi
    • Peran PAFI Humbang Hasundutan Dalam Pengembangan Farmasi
    Facebook X (Twitter) Instagram LinkedIn Tumblr YouTube
    BloggermyidBloggermyid
    • Trik
      • Youtube
      • Google Adsense
    • Blogger
      • Start Up
      • Kesalahan
      • Tutorial
    • Kesehatan
      • Manfaat Tumbuhan
      • Manfaat Buah
      • Manfaat Makanan
      • Manfaat Sayur
      • Manfaat Daging
      • Manfaat Nutrisi
    • Download
      • Aplikasi
      • Download Free
      • Foto Editor
    • Komputer&Laptop
    • MS Office
    • Software
    • SEO
    • Sitemap
    BloggermyidBloggermyid
    Beranda » Tutorial Blog » Cara Membuat Menu Vertikal (Vertical) Di Blog

    Cara Membuat Menu Vertikal (Vertical) Di Blog

    BloggermyidBy Bloggermyid Tutorial Blog 2 Mins Read3 ViewsTidak ada komentar
    Facebook WhatsApp Twitter Pinterest LinkedIn Telegram Tumblr Email
    Bagi Ke:
    Facebook Twitter LinkedIn Pinterest Email WhatsApp Copy Link
    menu blog vertikal blueprev

    Menu horizontal, nha kini mari kita mencoba menciptakan hidangan vertikal. Menu vertikal ini cocok kalau dipasang di sidebar alasannya ialah bentuknya berjajar sevara vertikal (ya iyalah). Contohnya menyerupai gambar disamping itu. Beginilah cara membuatnya :

    1. Login ke blogger trus pilih “Layout–>Edit HTML”
    2. Masukkan arahan berikut sebelum kode ]]></b:skin> atau sebelum arahan </style> . Pokoknya ditaruh di dalam Barisan arahan CSS deh.

    .glossymenu, .glossymenu li ul{list-style-type: none;margin: 0;padding: 0;width: 185px; /*WIDTH OF MAIN MENU ITEMS*/border: 1px solid black;}.glossymenu li{position: relative;}.glossymenu li a{background: white url(‘http://kendhin.890m.com/blog/vertical/blue1.gif‘) repeat-x bottom left;font: bold 12px Verdana, Helvetica, sans-serif;color: white;display: block;width: auto;padding: 5px 0;padding-left: 10px;text-decoration: none;}.glossymenu li ul{position: absolute;width: 190px;left: 0;top: 0;display: none;}.glossymenu li ul li{float: left;}.glossymenu li ul a{width: 180px;}.glossymenu li a:visited, .glossymenu li a:active{color: white;}.glossymenu li a:hover{background-image: url(‘http://kendhin.890m.com/blog/vertical/blue2.gif‘);}
    * html .glossymenu li { float: left; height: 1%; }* html .glossymenu li a { height: 1%; }

    Untuk menentukan warna menu, perhatikan kode2 yang berwarna merah (blue1.gif dan blue2.gif). Ganti arahan tersebut dengan pilihan warna dibawah ini. Misal kalau kau ingin menentukan hidangan warna merah maka kodenya menjadi menyerupai ini :

    .glossymenu li a{background: white url(‘http://kendhin.890m.com/blog/vertical/red1.gif‘) repeat-x bottom left;

    dan

    .glossymenu li a:hover{background-image: url(‘http://kendhin.890m.com/blog/vertical/red1.gif‘);

    Pilihan Warna hidangan vertikal :

    blueprev blue1.gif
    blue2.gif
    greenprev green1.gif
    green2.gif
    redprev red1.gif
    red2.gif
    pinkprev pink1.gif
    pink2.gif
    blackprev black1.gif
    black2.gif

    3. Kemudian di save.
    4. Lalu pergi ke hidangan “Page Elements”
    5. Pilih “Add a Gadget –>HTML/JavaScript” lalu masukkan arahan berikut kedalamnya:

    <ul id=”verticalmenu” class=”glossymenu”>
    <li><a href=”/”>Home</a></li>
    <li><a href=”http://tipsmanfaatku.blogspot.com“>Trik Blog</a></li>
    <li><a href=”http://x-template.blogspot.com” >Free Template</a></li>
    <li><a href=”http://getebook.co.cc“>Free Ebook</a></li></li>
    </ul>

    Kode yang berwarna merah ialah linknya dan yg warna biru ialah teks yang ditampilkan. Kalau mau menambahkan hidangan tingal buat lagi arahan menyerupai yg berkedip2 dibawahnya.

    Rekomendasi :   Cara Menghilangkan Tanda Tang Dan Obeng Di Blog

    Dah gitu aja. Gampang kan???? 😀

    Follow on Google News Follow on Facebook
    Share. Facebook WhatsApp Twitter Pinterest LinkedIn Telegram Tumblr Email Copy Link
    Previous Article7 Manfaat Daun Kelor Untuk Kesehatan Yang Wajib Anda Ketahui
    Next Article Kamus Istilah-Istilah Dalam Blog
    Bloggermyid
    • Website
    • Facebook
    • X (Twitter)
    • Pinterest
    • Instagram
    • Tumblr
    • LinkedIn

    Bloggermyid.com merupakan sebuah platform online yang menyajikan beragam informasi teknologi, tips dan tutorial seputar komputer, internet, jaringan dan android. Serta informasi menarik lainnya mengenai perkembangan teknologi terkini.

    Artikel Menarik Lainnya :

    Cara Menulis Artikel Secara Offline Di Blogspot Maupun WordPress Terbaru

    Tutorial Blog

    Cara Membuat Menu Horizontal Di Blog

    Tutorial Blog

    Cara Menciptakan Atau Membuat Menu Dtree Di Blog

    Tutorial Blog

    Cara Membuat Dropdown Menu

    Tutorial Blog

    Dasar Dasar Html

    Tutorial Blog

    Cara Menciptakan atau Membuat Menu Tab View

    Tutorial Blog
    Add A Comment
    Leave A Reply Cancel Reply

    Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses

    Terupdate

    Tips SEO Terbaik Dari Tim Google, Kualitas Untuk Pencarian

    Agustus 11, 2024

    Tips Jitu Menjaga Rumah Bebas Dari Serangan Rayap

    Juli 29, 2024

    Cuci Gorden Depok Dengan Pengerjaan Di Tempat

    Juli 24, 2024

    Pafi Pematang Siantar Dalam Menjaga Kesehatan Masyarakat

    Juni 25, 2024

    Pafi Fakfak, Organisasi Ahli Farmasi Berpengaruh Di Indonesia

    Juni 25, 2024

    Terpopular

    Inilah 15 Website Terbaik Untuk Penambah Jam Tayang Video YouTube

    Tutorial By Bloggermyid

    Jika Anda seorang konten kreator YouTube, maka pasti sudah tahu bahwa penonton tidak hanya mengukur…

    Cuci Gorden Depok Dengan Pengerjaan Di Tempat

    Juli 24, 2024

    Aplikasi / Software Cetak Foto, Pas Foto Dan Foto Ukuran R (Acef 2.0)

    September 8, 2018

    Menyusuri Jejak Persatuan Ahli Farmasi Indonesia, PAFI

    Desember 5, 2023

    Pafi Fakfak, Organisasi Ahli Farmasi Berpengaruh Di Indonesia

    Juni 25, 2024
    Verified
    Seedbacklink
    Copyright © 2025. Bloggermyi.
    • About Us
    • Privacy
    • Disclaimer
    • TOS
    • DMCA
    • Affiliate
    • Contact Us
    • Sitemap

    Type above and press Enter to search. Press Esc to cancel.

    Ad Blocker Enabled!
    Ad Blocker Enabled!
    Our website is made possible by displaying online advertisements to our visitors. Please support us by disabling your Ad Blocker.