Cara Membuat Sublaman di Blogspot

Banyak sekali teman blogger yang bertanya bagaimana Cara Membuat Sublaman  seperti BJGP-Rizal, Hias Blog kali ini saya akan mengupas Cara Membuat Sublaman di Blogspot. Sebenarnya sublaman ini identik juga dengan menu navigasi, tapi istilah menu navigasi ini kurang akrab bagi newbe. Kalau kita surfing di mbah google dengan kata kunci : Cara Membuat Sublaman di Blogspot, maka kita sulit menemukan maksud yang kita inginkan. Mudah-mudahan postingan kali ini, para blogger yang ingin membuat sublaman di Blogspot dapat berkreasi.

Langsung aja tanpa basa basi deh :
1. login ke blogger kamu masing-masin, masuk ke bagian design, lalu edit html dan berikan tanda centang pada expand widget template
2. Cari kode ]]></b:skin> dan tambahkan kode berikut ini diatasnya. (biar gampang pencarian kode tekan Ctrl +F3)

Copy this CODE:

#NavbarMenu { background: #000; width: 900px; height: 35px; font-size: 13px; font-family: Arial, Tahoma, Verdana; color: #fff; font-weight: bold; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 900px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #808080; height: 24px; color: #fff; display: block; font-size: 14px; font-family: trebuchet ms, Times New Roman; font-weight: bold; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #c0c0c0; color: #000; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #c0c0c0; width: 150px; color: #000; font-size: 14px; font-family: trebuchet ms, Times New Roman; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #000; color: #fff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

3. Copy kode berikut ini, pastekan di word biar kamu bisa edit untuk mengubah link saya dengan link blog kamu. Link yang saya kasih tanda merah kamu ubah dengan link kamu, sedangkan yang berwarna biru nama laman dari link mu. Maaf klo link saya tidak ditandain merah semua, banyak buanget heheh.. tapi kamu harus ubah semua link yang ada sesuai dengan link yang ada di blogmu nantinya.

Copy this CODE:

<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#A9D0F8;margin:0 15px;padding:0;height:35px;}
#cat-nav a { color:#fff; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #A9D0F8;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#A9D0F8; }
#cat-nav a span { font-family: Berlin Sans FB, Geneva, sans-serif; font-size:14px; font-style:normal; font-weight:400; color:#fff; text-shadow:A9D0F8;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:191970; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
#secnav a { font-family: Arial Narrow, &quot;Times New Roman&quot;, Times, serif; font-style:bold; font-weight:700; font-size:16px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:30px;}
#secnav li ul { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li { height:30px; border-top:1px solid #fff; }
#secnav li ul li a { font-family: Berlin Sans FB, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:14px; font-style:normal; font-weight:400; color:#fff; }
#secnav li ul ul { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id=cat-nav>
<ul class=fl id=secnav>
<li><a href=http://www.blogger.com/home>Login</a></li>
<li><a href=http://belajarjadiguruprofessional.blogspot.com/>Home</a></li>
<li><a href=http://yusrizalpanjaitan.blogspot.com/>About Me</a><ul>
<li><a href=http://www.facebook.com/yusrizal.panjaitan>My Facebook</a></li>
<li><a href=https://twitter.com/yusrizal01>My Twitter</a></li>
<li><a href=http://sri-zal.blogspot.com/p/introduction-my-self.html>About Me</a>
</li><li><a href=http://www.myspace.com/559220116>My Space</a></li>
<li><a href=http://www.kompasiana.com/cekgurizal>Aku diKompasiana</a></li>
<li><a href=http://guraru.org/news/2012/05/21/541/belajar_makin_asik_dengan_mobile_edukasi.html>Aku diGuraru</a></li>
</ul></li>
<li><a href=#>Blog Siswa</a>
<ul id=sub-custom-nav>
<li><a href=http://belajarjadiguruprofessional.blogspot.com/2011/10/blog-av1.html>Siswa Teknik Audio Video-1</a></li>
<li><a href=http://belajarjadiguruprofessional.blogspot.com/2011/09/blog-av2.html>Siswa Teknik Audio Video-2</a></li>
<li><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/The%20Best%20Student%20SMK%20Negeri%202%20Tanjungbalai>Forum Siswa SMKN2 TB</a></li>
</ul>
</li>
<li><a href=#>Blog Partner</a>
<ul id=sub-custom-nav>
<li><a href= http://sri-zal.blogspot.com/>Yusrizal Panjaitan, S.Pd</a></li>
<li><a href=http://ummuzikrihamdi.blogspot.com/>My &#39;SRI-ZAL&#39; Honey</a></li>
<li><a href=http://pcbrizal.blogspot.com/>Cekgu RIZAL PCB</a></li>
<li><a href=http://widgetanimasi.blogspot.com/>Cekgu RIZAL Animasi </a></li>
<li><a href=http://smkn2tanjungbalai.blogspot.com/>Tempat Tugas Cekgu</a></li>
<li><a href=http://smkn2tbokey.blogspot.com/>Beginner Blogger</a></li>
<li><a href=http://ptckoeoke.blogspot.com/>Earning Online PTC</a></li>
</ul>
</li>
<li><a href=http://belajarjadiguruprofessional.blogspot.com/2012/04/tukeran-link-link-exchange.html>Link Exchange</a>
<ul>
</ul></li>
<li><a href=#>Tips Bloggers</a>
<ul id=sub-custom-nav>
<li><a href= http://belajarjadiguruprofessional.blogspot.com/search/label/Blog%20Dasar >Blog Dasar</a></li>
<li><a href= http://belajarjadiguruprofessional.blogspot.com/search/label/Hias%20Blog >Hias Blog</a></li>
<li><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Musik>Music en Lyrics</a></li>
</ul>
</li>
<li><a href=http://belajarjadiguruprofessional.blogspot.com/p/modul-smk.html>Bank Soal</a>
<ul><li><ul><li><a href=http://www.ziddu.com/download/12799127/soalpersiapanDokumentasiVideo2010.doc.html>Kelas X</a></li><li><a href=http://www.ziddu.com/download/12799127/soalpersiapanDokumentasiVideo2010.doc.html>Kelas XI</a></li><li><a href=http://www.ziddu.com/download/12799127/soalpersiapanDokumentasiVideo2010.doc.html>Kelas XII
</a></li></ul><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Soal%20Ku>Semester Ganjil
</a></li><li><ul><li><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Soal%20Kelas%20X%20Genap>Kelas X</a></li><li><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Soal%20Kelas%20XI%20Genap>Kelas XI</a></li><li><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Soal%20Kelas%20XII%20Genap>Kelas XII</a></li></ul><a href=http://www.ziddu.com/download/12799196/soalklsX.Tdigit.doc.html>Semester Genap</a></li><li><ul><li><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Teori%20AV>Teori Audio Video </a></li><li><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Pembahasan%20Teori>Pembahasan Teori</a></li><li><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Praktik%20Audio%20Video>Praktik Audio Video</a></li></ul><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Ujian%20Nasional>Ujian Nasional</a>
</li><li><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Online>Soal Online</a></li></ul></li>
<li><a href=http://belajarjadiguruprofessional.blogspot.com/p/soalku.html>My Circuit</a>
<ul><li><ul><li><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Aneka%20Audio>Aneka Audio</a>
</li><li><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Power%20Supply>Power Supply</a></li><li><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Aneka%20Lampu%20%2F%20Led>Aneka Lampu/ Led</a></li><li><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Digital>Digital</a></li></ul><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Rangkaian>Rangkaian</a></li><li><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Robot>Robotic</a></li><li><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Kriya%20Elektonik>Kriya elektronika</a></li></ul></li>
<li><a href= http://belajarjadiguruprofessional.blogspot.com/2011/11/daftar-isi-blog-bjgp.html ><blink>Daftar Isi</blink></a></li>
<li><a href=http://belajarjadiguruprofessional.blogspot.com/p/download-edukasi_18.html>Perangkat Pembelajaran</a>
<ul><li><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Kalender%20Pendidikan>Kalender Pendidikan</a></li><li><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Alokasi%20Waktu>Prhtngn Alokasi Waktu</a></li><li><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Program%20Semester%20Ganjil>Perhitungan KKM</a></li><li><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Program%20Semester%20Ganjil>Program Smstr Ganjil</a></li><li><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Program%20Semester%20Genap>Program Smstr Genap</a></li><li><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Silabusku>Silabus ku</a>
</li><li><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/RPP%20SMK>RPP ku</a></li></ul></li>
<li><a href=#>Sertifikatku</a>
<ul id=sub-custom-nav>
<li><a href= http://belajarjadiguruprofessional.blogspot.com/2012/04/sertifikat.html>Tingkat Internasional</a></li>
<li><a href=http://belajarjadiguruprofessional.blogspot.com/2012/04/sertifikat.html>Tingkat Nasional</a></li>
<li><a href=http://belajarjadiguruprofessional.blogspot.com/2012/04/sertifikat.html>Tingkat Provinsi</a></li>
<li><a href=http://belajarjadiguruprofessional.blogspot.com/2012/04/sertifikat.html>Tingkat Kabupaten/Kota</a></li>
<li><a href=http://belajarjadiguruprofessional.blogspot.com/2012/04/sertifikat.html>Tingkat Kecamatan</a></li>
<li><a href=http://belajarjadiguruprofessional.blogspot.com/2012/04/sertifikat.html>Forum Ilmiah</a></li>
<li><a href=#>Lain - Lain</a></li>
</ul>
</li>
<li><a href=#>My Galeri</a>
<ul id=sub-custom-nav>
<li><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Karya%20Siswa>Dokumentasi Praktik</a></li>
<li><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Galeri%20Anak>Coretan Anak</a></li>
<li><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Video%20Editan>Video Editan</a></li>
<li><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Wallpapers>Wallpapers Cantik</a></li>
</ul>
</li><li><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Modulku>Modulku</a>
<ul>
<li><a href=http://belajarjadiguruprofessional.blogspot.com/2012/02/gambar-teknik-elektronika-manual-dan.html>Gbr Tek Elektronika</a></li><li><a href=http://belajarjadiguruprofessional.blogspot.com/2012/04/modul-pembuatan-audio.html>Rekaman Audio</a></li><li><a href=http://belajarjadiguruprofessional.blogspot.com/2012/02/modul-teknik-digital-dasar-untuk-smk.html>Tek Digital Dasar</a>
</li><li><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Bioskop%20Rumah>Bioskop Rumah</a></li><li><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Ulead%20Video%20Studio%20Editor>PmbuatanDokumentasi</a></li><li><a href=http://belajarjadiguruprofessional.blogspot.com/search/label/Kupas%20Tuntas%20Osiloskop>Kupas Osiloskop</a></li><li><a href=http://www.ziddu.com/download/16740710/Copy_of_ctk_bilangan.doc.html>Konversi Bilangan</a></li></ul></li>
<li><a href= http://belajarjadiguruprofessional.blogspot.com/search/label/Nulis%20Dapat%20Duit>Make Money U Blog</a></li><li><a href= http://www.blogger.com/?m=1>Mobile</a></li>
</ul>
</div>

4. Kode yang sudah kamu edit tadi letakkan diatas kode <div class=main-outer>

5. Pratinjau dahulu hasilnya sebelum di terbitkan.
6. Jika sudah okey, langsung aja kamu save. Kamu sudah berhasil Cara Membuat Sublaman di Blogspot

Update tanggal 16 - 05 - 2013 ini sublaman versi lama, sublaman bjgp-rizal sudah berubah... Walaupun demikian sublaman ini masih bisa digunakan oleh template yang lain...