Di postingan sebelumnya kita telah mempelajari bagaimana membuat menu drop down dengan menggunakan CSS. Nah, sekarang kita akan mempraktekkan bagaimana memasang menu drop down dengan CSS pada blog, dan kali ini tentu masih pada blogspot. Kebetulan saya webwalking (istilah apaan tuh?) tadi malam dan menemukan sebuah situs yang meyediakan struktur menu drop down CSS yang sangat bagus menurut saya. Oleh karena itu, saya akan memberikan tips bagaimana memasang menu tersebut pada blog pembaca. Jika pembaca ingin melihat struktur lain, silahkan kunjungi situsnya langsung di www.cssmenumaker.com. Untuk membuat menu drop down tersebut pada blogspot caranya sama dengan yang sebelum-sebelumnya. Berikut langkah-langkahnya:
- Silahkan login terlebih dahulu pada akun Blogspot pembaca.
- Klik link Tata Letak kemudian pilih sub tab menu Edit HTML
- Silahkan backup terlebih dahulu template pembaca agar jika terjadi kesalahan bisa mengembalikannya kembali. Untuk melakukannya silahkan klik link Download Template Lengkap pada bagian Backup/Restore Template
- Beri centang pada kotak kecil disamping tulisan Expand Template Widget
- Cari struktur ]]></b:skin> pada kotak Edit Template tersebut
- Jika sudah ketemu, copy paste struktur CSS berikut ini tepat diatas struktur ]></b:skin>.
@charset "utf-8";
/* CSS Document */
/*^'^ Navigation Structure ^'^*/
.nav-container-outer{
background: #990000;
padding: 0px;
height: 74px;
background: url(http://nestoriko.googlepages.com/nav-bg.jpg);
}
.float-left{ float: left;
}
.float-right{ float: right;
}
.nav-container .divider{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
}
.nav-container .divider-vert{
float:left;
width:0px;
display: none;
}
.nav-container .item-secondary-title{
display:block;
cursor:default;
white-space:nowrap;
}
.clear{
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none;
}
.nav-container{
position:relative;
zoom:1;
margin: 0 auto;
}
.nav-container a, .nav-container li{
float:left;
display:block;
white-space:nowrap;
}
.nav-container div a, .nav-container ul a, .nav-container ul li{
float:none;
}
.nav-container ul{
left:-10000px;
position:absolute;
}
.nav-container, .nav-container ul{
list-style:none;
padding:0px;
margin:0px;
}
.nav-container li a{
float:none
}
.nav-container li{
position:relative;
}
.nav-container ul{
z-index:10;
}
.nav-container ul ul{
z-index:20;
}
.nav-container ul ul ul{
z-index:30;
}
.nav-container ul ul ul ul{
z-index:40;
}
.nav-container ul ul ul ul ul{
z-index:50;
}
li:hover>ul{
left:auto;
}
#nav-container ul {
top:100%;
}
#nav-container ul li:hover>ul{
top:0px;
left:100%;
}
/*^'^ Primary Items ^'^*/
#nav-container a{
padding:7px 17px 7px 18px;
margin: 10px 0px 0px 0px;
color: #FFFFFF;
font-family: Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:14px;
text-decoration:none;
font-weight: bold;
background: url(http://nestoriko.googlepages.com/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: top;
}
#nav-container a:hover{
color: #6C3600;
background: url(http://nestoriko.googlepages.com/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: center;
}
/*^'^ Secondary Items Container ^'^*/
#nav-container div, #nav-container ul{
padding:10px 4px 10px 4px;
margin:0px 0px 0px 0px;
background: url(http://nestoriko.googlepages.com/item-secondary-container-bg.jpg);
background-repeat: repeat-x;
background-color: #FF9900;
border-bottom: 1px solid #CA6500;
}
/*^'^ Secondary Items ^'^*/
#nav-container div a, #nav-container ul a{
padding:3px 10px 3px 6px;
background-color: #FFFFFF;
background: url(http://nestoriko.googlepages.com/item-secondary-bg.jpg);
background-repeat: no-repeat;
background-position: 0px 22px;
font-size:11px;
border-width:0px;
border-style:none;
margin: 0px 0px 0px 0px;
width: 149px;
}
/*^'^ Secondary Items Hover State ^'^*/
#nav-container div a:hover, #nav-container ul a:hover{
background-color: #FFFFFF;
background: url(http://nestoriko.googlepages.com/item-secondary-bg.jpg);
background-repeat: no-repeat;
color:#CC0000;
}
/*^'^ Secondary Item Titles ^'^*/
#nav-container .item-secondary-title{
cursor:default;
padding:4px 0px 3px 7px;
color: #6C3600;
font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:11px;
/* background: url(http://nestoriko.googlepages.com/item-secondary-title-bg.jpg); */
background-repeat: no-repeat;
font-weight:bold;
}
/*^'^ Horizontal Dividers ^'^*/
#nav-container .divider-horiz{
border-top-width:1px;
margin:5px 5px;
border-color: #C16100;
}
/*^'^ Vertical Dividers ^'^*/
#nav-container .divider-vert{
border-left-width:1px;
height:15px;
margin:4px 2px 0px 2px;
border-color:#AAAAAA;
} - Temukan struktur berikut pada template pembaca:<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div> </b:includable> </b:widget> </b:section> </div> - Copy paste struktur menu berikut ini tepat dibawah struktur yang Anda temukan pada langkah 7:<div class="nav-container-outer">
<img src="http://nestoriko.googlepages.com/nav-bg-l.jpg" alt="" class="float-left" />
<img src="http://nestoriko.googlepages.com/nav-bg-r.jpg" alt="" class="float-right" />
<ul id="nav-container" class="nav-container">
<li><a class="item-primary" href="#" target="_self">MENU1</a>
<ul style="width:150px;">
<li><a href="URL" title="sample" target="_self" >Sub Menu1</a></li>
<li><a href="URL" title="sample" target="_self" >Sub Menu2</a></li>
<li><a href="URL" title="sample" target="_self" >Sub Menu3</a></li>
</ul>
</li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#" target="_self">MENU2</a>
<ul style="width:150px;">
<li><a href="URL" title="sample" target="_self" >Sub Menu1</a></li>
<li><a href="URL" title="sample" target="_self" >Sub Menu2</a></li>
<li><a href="URL" title="sample" target="_self" >Sub Menu3</a></li>
</ul>
</li>
<li><span class="divider divider-vert" ></span></li>
<li class="clear"> </li>
</ul>
</div> - Perhatikan bagian yang diberi warna merah. Bagian tersebut merupakan struktur untuk 1 buah menu beserta sub menu-seb menu di dalamnya. Jika pembaca ingin menambah menu baru, silahkan buat lagi struktur seperti yang berwarna merah tersebut dan letakkan setelah struktur menu yang lain, misalnya setelah struktur "MENU2", dan seterusnya. Kemudian ganti "URL" dengan alamat halaman yang akan dituju jika sub menu diklik.
- Setelah itu klik tombol SIMPAN TEMPLATE
Untuk melihat hasilnya, silahkan buka disini.
Seandainya segala sesuatu yang telah saya berikan ini bermanfaat bagi rekan-rekan semua.Sungguh saya ucapkan banyak Doa dan terimakasih kepada Mu Allah.SWT yang telah memberikan nikmat Berbagi sesama manusia dengan niat kebaikan dan kemajuan Negeriku ini..
Untuk mengganti tampilan adsense google yang menampilkan Iklan Layanan Masyarakat tersebut dengan adsense lokal. Anda harus mengupload script adsense lokal dengan extensi html kelayanan webhosting anda.
Bagi anda yang mempunyai keterbatasan ruang untuk meletakan widget Recent Comments, Saya akan mencoba membantu anda untuk membuat "Widget Recent comments" dengan efek overlay.
Efek yang akan saya bahas kali ini adalah membuat tampilan Guestbook dan status twitter melayang dan berada ditengah - tengah halaman blog. Kita akan menyediakan menu guestbook pada sisi kiri halaman. 
Headline akan menggulung ke atas dengan sentuhan fade out ,seakan konten tersebut hilang dengan perlahan dan konten yang berada di bawahnya akan naik ke atas mengganti konten sebelumnya.
Umumnya Navigasi halaman dengan angka ini sering kita jumpai pada blog berplatform Wordpress. Namun bagi anda yang menggunakan platform Blogspot tak perlu berkecil hati, karena blogspot pun bisa mengadopsi tampilan NEXT dan PREV dengan widget Page Navigation Number.
Untuk meletakan Adsense didalam postingan, anda harus meletakan kode Script ads tersebut langsung ke template HTML blogspot. Sebagai langkah awal, silahkan anda login ke 
25 comments:
:23
dicoba ya triknya,aku suka banget sama blognya cuz unik aja...
jahaha...ga da warna mrah...kliatan bgt copas duang...LOL
Bagus sekali artikelnya sobat, memberikan inspirasi bagiku.
Terimakasih
Anonim tgl 25 september jahahaha keliatan kalau gak baca selengkapnya
buat belajar dan diterapkan pada blogspotku
makasih sodara
siap dipelajari bos,buat mempercantik tampilan blog...
@merawat dan memperbaiki komputer
@classick instrumental:
Yups...sukses yaaa. ^_^
good tutor bozzzzz ijin coba ya
nice info mas...
mas mau nanya nih,tuh kan kalau kita letakan kursor di menu 1 dan menu 2 keluar pilihan--> sub menu 1,2 dan3,nah saya mau nanya gimana cara ngisi sub menu 1,2 dan 3 nya.,.tolong di jawab ya mas saya lagi ngerjain tugas dan ini udah deadline..thanx mas :15
@raccoon : boleh liat blog nya ? biar saya bantu :11
Warna teksnya gag bisa diganti tu mas??
:29
maxudnya warna tabnya
:42
lansung coba ah, trims infonya
makasih infonya......
Jos,,,Gandosss...
Terima kasih sob
thx sob, menyebar ilmu adalah amal jariyah, teruskan berkarya,
Tengkyu bro
makasi ya bozzz, berguna banget!!!tp msh belajar, gmn cara rubah warnanya biar matching sm template blog!!!
kalo sempet main2 ke blog q jg ya!!! www.tokonovy.blogspot.com
thx
mkssiiiii
bnr2 mmbantu saiiaaaa :35
mampir www.notcupz.blogspot.com:11
@ notcupz :
Terimakasih kembali :36
mksii dh mampir k blog saya ;)
aterkelnya bagus udah ane coba di blog ane.....
WWw.jupecell.co.cc
@grosir pulsa :
ahamdulillah berguna untuk mas :20
nC :36
Post a Comment
Silahkan tinggalkan komentar anda dan harap tidak melakukan Spam..!!