Tutorial Blog : Cara Membuat Menu Horizontal di Blogspot.
Menu horizontal tentu bukan hal yang baru dan asing bagi para blogger kawakan alias master blogger,dan cara membuatnya pun sudah hapal luar kepala fasih sampai ketitik yang paling dalam,tetapi tentu ada rekan rekan blogger yang belum tau dan mengerti cara membuat menu horizontal pada blogspot,atau sudah lupa cara caranya.
 |
| Tutorial Blog : Cara Membuat Menu Horizontal di Blogspot. |
Kali ini ada yang istimewa dengan postingan tentang tutorial kali ini,karena biasanya saya selalu mempostingkan tentang tutorial autoCAD,atau solidwork dsb yang kaitanya erat dengan dunia drawing / gambar desain engineering atau pembuatan moulding,tapi untuk episode kali ini saya akan membagikan sebuah tutorial blog tentang bagaimana cara membuat menu horizontal pada blogspot.
Menu horizontal tentu bukan hal yang baru dan asing bagi para blogger kawakan alias master blogger,dan cara membuatnya pun sudah hapal luar kepala fasih sampai ketitik yang paling dalam,tetapi tentu ada rekan rekan blogger yang belum tau dan mengerti cara membuat menu horizontal pada blogspot,atau sudah lupa cara caranya.
Unutk itulah saya mencoba mengungkap kembali tutorial bagaimana cara membuat menu horizontal pada blogspot seperti yang bisa rekan rekan lihat pada blogautoCAD tangerang kesayangan saya ini,baiklah sebelum memulai cara membuat menu horizontal pada blogspot alangkah lebih baik kita mengetahui terlebih dahulu tentang makna menu horizontal itu sendiri.
Menu horizontal adalah sebuah menu yang berisi rangkuman dari beberapa kategori dari seluruh postingan yang ada di blog tersebut,dengan kata lain menu ini adalah menu rangkuman dari segala jenis postingan yang ada di blog tersebut,Menu horizontal menjadi sangat penting untuk mengoptimalkan isi atau content dari suatu blog atau wap. Dengan menu horizontal di suatu blog atau wap pengunjung / visitor akan dengan mudah menemukan artikel yang sesuai yang di harapkan. Tak ayal dengan menu horizontal seluruh isi atau content suatu blog atau wap akan dengan mudah tersentuh oleh pengunjug.
1. Masuk ke blogger => Rancangan => Edit HTML
2. Contreng expand widget tamplate
3. Cari kode ]]></b:skin> lalu tempatkan kode di bawah ini tepat di atas kode tersebut.
2. Contreng expand widget tamplate
3. Cari kode ]]></b:skin> lalu tempatkan kode di bawah ini tepat di atas kode tersebut.
.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
text-align: left;
}
.basictab li{
display: inline;
margin: 0;
}
.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #222222;
color: #ffffff;
}
.basictab li a:visited{
color: #ffffff;
}
.basictab li a:hover{
background-color: #00ff00;
color: black;
}
.basictab li a:active{
color: black;
}
.basictab li.selected a{
position: relative;
top: 1px;
padding-top: 4px;
background-color: #222222;
color: white;
}
4. Lalu klik simpan tamplatepadding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
text-align: left;
}
.basictab li{
display: inline;
margin: 0;
}
.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #222222;
color: #ffffff;
}
.basictab li a:visited{
color: #ffffff;
}
.basictab li a:hover{
background-color: #00ff00;
color: black;
}
.basictab li a:active{
color: black;
}
.basictab li.selected a{
position: relative;
top: 1px;
padding-top: 4px;
background-color: #222222;
color: white;
}
5. Langkah selanjutnya klik elemen halaman => tambah widget => pilih HTML/ Javascript => Copy Paste kode di bawah ini => Langkah terakhir klik Save.
<ul class="basictab">
<li><a href="http://altiftif.blogspot.com/">Home</a></li>
<li><ahref="http://altiftif.blogspot.com/search/label/Tutorial%20AutoCAD">Tutorial AutoCAD</a></li>
<li><a href="http://altiftif.blogspot.com/search/label/GALLERY">Gallery</a></li>
<li><a href="http://laltiftif.blogspot.com/search/label/Tutorial%20Lain">Tutorial Lain</a></li>
<li><a href="http://altiftif.blogspot.com/search/label/Link">Link Exchange</a></li>
<li><ahref="http://altiftif.blogspot.com/search/label/Tutorial%20AutoCAD">Tutorial AutoCAD</a></li>
<li><a href="http://altiftif.blogspot.com/search/label/GALLERY">Gallery</a></li>
<li><a href="http://laltiftif.blogspot.com/search/label/Tutorial%20Lain">Tutorial Lain</a></li>
<li><a href="http://altiftif.blogspot.com/search/label/Link">Link Exchange</a></li>
<li><a href="http://altiftif.blogspot.com/search/label/Video%20Tutorial">Video Tutorial</a></li>
<li><a href="http://altiftif.blogspot.com/search/label/Daftar%20Isi">Daftar Isi</a></li>
</ul>
</ul>
NB :
- Ganti tulisan yang berwarna hijau dengan Url Homepage blog sobat
- Untuk yang berwarna merah silahkan ganti dengan URL label pada blog sobat
- Ganti tulisan yang berwarna hijau dengan Url Homepage blog sobat
- Untuk yang berwarna merah silahkan ganti dengan URL label pada blog sobat
Demikianlah tutorial blog tentang bagaimana cara membuat menu horizontal pada blogspot,seperti yang ada di blog saya ini autoCAD tangerang semoga dapat menjadi berkenan dan dapat memberi manfaat bagi rekan rekan blogger semua.
No comments:
Post a Comment