- CARA MEMBUAT MENUBAR PADA BLOG
Cara membuat Menubar di blog - Hmm, loe sudah pada taukan menubar itu apa? hah belum? okedeh tidak apa-apa gue bakal jelasin lagi buat yang belum tau. Menubar adalah sebuah kotak tab/bar yang isinya berupa navigasi link. Fungsi menubar yaitu untuk menyimpan link-link penting di suatu blog, agar pengunjung dapat lebih mudah mengunjungi halman-halaman utama yang ada pada suatu blog itu. Pada postingan sebelumnya saya juga telah menjelaskan bagaimana cara membuat menubar pada template klasik. Namun, bedanya kali ini membuat menubar pada custom template. Untuk melihat bagaimana screenshot menubarnya lihat di bawah ini:
Menubar ini juga bisa dibuatkan lagi submenu kebawahnya, lihat di gambar. Nah jadi misalkan sobat ingin memasang submenu dari sebuah link itu tinggal menambah sedikit kode yang akan dijelaskan dibawah. Oh iya, menubar di postingan ini tidak ada search box seperti digambar. cara membuat menubar di blog tidak sulit kok.
langsung aja gini caranya soooobbb...
1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML
4. Cari kode ]]></b:skin> (gunakan ctrl+f)
5. Pasang kode di bawah ini di atas kode ]]></b:skin>
2. masuk ke halaman Template
3. Edit HTML
4. Cari kode ]]></b:skin> (gunakan ctrl+f)
5. Pasang kode di bawah ini di atas kode ]]></b:skin>
#menubar{
width:880px;
height:35px;
background:#1B1B1B;
margin: 0 auto;
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
border-right:1px solid #FFFFFF;
float:left;
padding:8px 12px;
color:#fff;
text-decoration:none;
font-size:15px;
font-weight:bold;
}
#menubar li a:hover, #menubar li a:active, #menubar
.current_page_item a {
background: #FFFFFF;
color:#FD3503;
text-decoration;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 14px;
background: #FFFFFF;
color: #FD3503;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #FD3503;
color: #FFFFFF;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
border:1px solid ##F0512D;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li
li:hover ul, #menubar li.sfhover
ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}
6. Lalu masuk pada Tata Letak>>Tambahkan Gadget>>tambahkan HTML/JavaScript7. Copas skrip dibawah ini dan masukkan pada edit HTML/JavaScript tersebut
<div id='menubar'>
<ul>
<li><a href='index.html'>Home</a></li>
<li><a href='tugas.html'>Tugas</a></li>
<li><a href='contact.html'>Contact</a></li>
<li><a href='sosmed.html'>Social Media</a>
<ul>
<li><a href='https://www.facebook.com/Bryan.Anthony.Kurniawan'>Facebook</a></li>
<li><a href='https://twitter.com/to_anthony'>Twitter</a></li>
<li><a href='http://instagram.com/yan_bryan'>Instagram</a></li>
<li><a href='http://www.pinterest.com/bryananthony08/'>Pinterest</a></li>
</ul></li>
</ul></div>
8. setelah selesai simpan template dan lihat hasilnya.
- CARA MEMBUAT TABEL ZEBRA
Nha, sekarang gue mau jelasin gimana caranya bikin tabel zebra dengan html, ya walaupun gue juga baru newbie sih tapi gue bakal kasih sedikit cara gimana bikin tabel zebra ...
caranya gini sob,
1. Login pada blogger
2. masuk ke halaman Tata Letak
3. Tambahkan Gadget
4. Copas skrip dibawah ini
2. masuk ke halaman Tata Letak
3. Tambahkan Gadget
4. Copas skrip dibawah ini
Tabel Zebra
<style>
.zebra tr:nth-child(even) {
background-color: #FF4000;
}
.zebra tr:nth-child(odd) {
background-color: #000000;
}
.zebra tr:hover {
background-color: #F9F5F4;
}
</style>
<h1>Daftar Mata Kuliah saya Semester 3</h1>
<table class="zebra" border="2px">
<tr>
<th>No.</th>
<th>Mata Kuliah</th>
<th>Kode</th>
<th>Jumlah SKS</th>
</tr>
<tr>
<td>1</td>
<td>Sistem Operasi</td>
<td>TIF30334</td>
<td>4</td>
</tr>
<tr>
<td>2</td>
<td>Teknik Komputasi</td>
<td>TIF30733</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>Jaringan Komputer</td>
<td>TIF30433</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>Pengantar Sistem Informasi</td>
<td>TIF30533</td>
<td>3</td>
</tr>
<tr>
<td>5</td>
<td>Praktikum Jaringan Komputer</td>
<td>TIF30361</td>
<td>2</td>
</tr>
<tr>
<td>6</td>
<td>Praktikum Sistem Operasi</td>
<td>TIF30831</td>
<td>2</td>
</tr>
<tr>
<td>7</td>
<td>Ilmu Kealaman Dasar</td>
<td>UMS30112</td>
<td>2</td>
</tr>
<tr>
<td>8</td>
<td>Kemuhammadiyahan</td>
<td>UMS30212</td>
<td>2</td>
</tr>
<tr>
<td>9</td>
<td>Pemrograman Web Dasar</td>
<td>TIF10833</td>
<td>3</td>
</tr>
<tr>
<td>10</td>
<td>Organisasi dan Arsitektur Komputer</td>
<td>TIF50332</td>
<td>3</td>
</tr>
</table>
5. Nha, klo udah selesai simpan lalu lihat hasilnya.
NB: mungkin loe, bisa edit2 dikitlah seperti apa yang loe inginkan, saling berbagi itu indah sob :D
Mungkin itu dulu sob, yang bisa gue share malem ini, next time gue bakal share tentang berbagai hal tentang dunia web dan apa yang gue dapet selama kuliah di fakultas Informatika.
Terima Kasih Telah berkunjung, semoga bermanfaat :D
