MEMBUAT MENU PADA BLOGSPOT

Sebenarnya ini a/ Postingan PERDANA w atau paling muda istilahnya hhe,.dikesempatan yg Perdana ini w mau posting bagaimana caranya membuat menu-menu pada blogspot ,menu-menu pada blogspot ini mempunyai beberapa tipe-tipe dasar.

contoh : 1.Menu Vertical (menu dalam bentukan lurus kebawah)

             2.Menu Horizontal (menu dalam bentukan lurus/merata kesamping)

             3.Menu static page (menu dalam bentukan horizontal,membuat'a dgn penggunaan edit laman)

             4.Menu DTree (menu dalam bentukan menyerupai klik start-All Programs yg menjulur keatas,tapi

                                      dlm DTree ini menu menjulur kebawah)

             5.Menu DropDwon (menu dalam bentukan kearah TARGET dimana menu akan diklik

w disini akan mentutor bagaimana caranya membuat menu horizontal pada blogger sobat...

.Pertama Log-in terlebhih dahulu pada blogger sobat-sobat

.Pada bagian Dasbor , klik menu Rancangan-lalu klik Edit HTML

.Untuk menjaga-jaga terjadinya kesalahan pada saat proses pengeditan HTML sobat, silahkan download

  dulu settingan HTML pertama sobat, klik Download template lengkap diatas bacaan UNGGAH

.Ceklist kotak kecil Expand Template Widget

.Cari kode script dibawah ini dengan mengklik Ctrl+F untuk Find semua huruf"yg trdapat dikotak keajaan   

  HTML

     <b:includable id='description'>
     <div class='descriptionwrapper'>
     <p class='description'><span><data:description/></span></p>
     </div>
     </b:includable>
     </b:widget>
     </b:section>

     </div>

.jika telah ketemu langsung saja copy script dibawah ini dan pastekan dibawah code script pada langkah ke5

  .pastekan persis dibawah code </div>

<ul>
<li><a href='URL 1'>Beranda</a></li>
<li><a href='URL 1'>Profil lengkapku</a></li>
<li><a href='URL 3'>Tutorial Website</a></li>
</ul>

.Setelah dikerjakan dengan benar, lalu penyelesaian akhir'a degan mengklik SAVE TEMPLATE kemudian

  liat hasil jadi'a

.Sobat-sobat semua mengira, bahwa Tutorial yg saya berikan barusan adalah salah ia kan,.karna hasilnya

  tidak nyambung dengan apa yg akan saya Tutorialkan, jadi ini bukanlah penyelesaian akhir yg sebenar'a

  jadi dalam membuat menu bentukan horizontal, sbelum itu haruslah buat hasil bentukan vertikal dulu , lalu 

  proses pengubahan'a ke horizontal degan mengunakan CSS (cascading style sheet) sobat juga bisa 

  ubah menjadi lebih menarik lg dgn menggunakan CSS ini

.Buka lagi kotak edit HTML sobat kemudian cari dengan mengklik ctrl+f lalu ketik ]]></b:skin>

.Silahkan copy script dibawah ini lalu pastekan persis diatas kode  ]]></b:skin>

..menuhor ul{

font: bold 20px chewy;

padding-left: 0;

margin-left: 0;

height: 20px;

}

.menuhor ul li{

list-style: none;

display: inline;

}

.menuhor ul li a{

padding: 4px 0.5em;

text-decoration: none;

float: left;

color: black;

background-color: #a64d79F

border: 2px solid #a64d79F;

}

.menuhor ul li a:hover{

background-color: #a64d79F;

border-style: outset;

}

..menuhor ul merupakan atribut class yang berfungsi untuk mengatur tampilan parent dari listmenu horizontal tersebut.

.menuhor ul li berfungsi untuk mengatur tampilan anak menu horizontal yang kita buat..menuhor ul li a berfungsi untuk mengatur tampilan link dari anak menu tersebut..menuhor ul li a:hover berfungsi untuk mengatur tampilan link anak menu ketika pointer digerakkan diatasnya.

.lalu kemudian ubah kode script yg tadi sobat copy yg seperti tadi dibawah ini

<ul>
<li><a href='URL 1'>Beranda</a></li>
<li><a href='URL 1'>Profil lengkapku</a></li>
<li><a href='URL 3'>Tutorial Website</a></li>
</ul>

ubah menjadi...

.<div class="menuhor">

<ul>
<li><a href='URL 1'>Beranda</a></li>
<li><a href='URL 2'>Profil lengkapku/a></li>
<li><a href='URL 3'>Tutorial website</a></li>
</ul>
</div>

.Ubah kalimat URL yang berwarna merah dengan link yang sobat punya, karna saat diklik menunya                

  akan membawa sobat menuju link yg di terapkan.

.Lalu penyelesaian akhirnya dengan mengklik SAVE TEMPLATE

  Sperti saat ini bahwa CSS adalah trik untuk mengubah struktur kode HTML/sekaligus

dapat memperindah hasil kerjaan HTML kita...

                                                

                                                              

                                      _________SELAMAT MENCOBA___________

02.36 | 0 komentar | Read More