Friday, February 9, 2018

Cara Menciptakan Sajian Vertical Sederhana

Cara menciptakan sajian vertical sederhana di blog Cara Membuat Menu Vertical Sederhanamenu horizontal yang memanjang kesamping.

Menu vertical akan memanjang atau menurun kebawah. Biasanya sajian vertical ditempatkan dibagian kanan atau kiri sidebar blog. Silakan lihat pola gambar disamping, atau pola sajian dibawah ini.


Untuk lebih jelasnya wacana cara menciptakan sajian vertical diblog. Ikuti langkah2 dibawah ini.
  1. Login ke blogger, dan pilih pengaturan template.
  2. Lalu klik tambahkan gadget, dan pilih HTML/Javascript.
  3. Selanjutnya copy aba-aba dibawah ini.
  4. <style>

    #vertical {
      background: transparent;
    }
    #vertical ul {
    }
    #vertical ul li {
      background: #aaaaaa;  list-style: none;border:1px solid #1780dd;
    }
    #vertical ul li span {
      text-transform: uppercase;
      font-family: 'Helvetica Neue', helvetica, 'microsoft sans serif', arial, sans-serif;
      font-size: 12px;
      color: #444444;
    font-weight:bold;
    padding:0px 0px 0px 10px;
    }
    </style>
    <div id='vertical'>
    <ul>
       <li ><a href='http://fandrajuani.blogspot.com/'><span>Beranda</span></a></li>
       <li><a href='#'><span>Facebook</span></a></li>
       <li><a href='#'><span>Twitter</span></a></li>
    </ul>
    </div>
  5. Dan Pastekan di gadget HTML/Javascript tadi.
  6. Terakhir, save gadget. Dan pindahkan gadget ke daerah yang kalian inginkan. Selesai.
Keterangan aba-aba langkah 3:
  • <a href='http://fandrajuani.blogspot.com/'> dan <a href=''> Isi dengan URL yang kau inginkan.
  • Jumlah sajian diatas ada 3. Untuk menambahkan jumlah menu?
    Tambahkan aba-aba <li><a href=''><span>Nama Menu kamu</span></a></li>
    Dibawah aba-aba <li><a href=''><span>Twitter</span></a></li>
  • background: #aaaaaa; warna background
  • border:1px solid #1780dd; warna garis biru yang memisahkan antar menu.
  • text-transform: uppercase; aba-aba ini menciptakan Menu memakai abjad besar semua.
    Jika tidak ingin memakai abjad besar, hapus kodenya.
  • padding:0px 0px 0px 10px; spasi goresan pena sajian sebelah kiri.

Silakan dibaca juga artikel wacana sajian yang lainnya. Seperti menciptakan menu dengan gambar disampingnya, cara menciptakan sajian dropdown di blog atau jikalau masih galau dengan cara menciptakan sajian di blog, silakan baca cara menciptakan dan mengisi sajian blog

Itulah sedikit cara desain blog dan tips trik wacana cara menciptakan sajian vertical sederhana di blog. Semoga Bermanfaat.
    Share:

    0 comments:

    Post a Comment