Fadlypuccino Blogs



Fadlypuccino Blogs


Tips Trik Blog: Membuat Menu Bar Horizontal pada Template Blog

Posted: 15 Feb 2011 06:11 AM PST

Selamat Datang di Tips Trik Blogs, Blog yang isinya Tips Trik Blog | Free Blogger Widgets | Informasi Menarik Di Bidang Teknologi dan IT.
Tips Trik Blog kali ini akan membahas mengenai bagaimana cara Membuat Menu Bar Horizontal pada Template Blog.
Menu bar merupakan sebuah Menu horizontal yang terletak dibawah Header Blog dimana berisi mengenai Link-link yang saling berhubungan.
Jika sobat belum mengerti apa itu Menu Bar, sobat bisa lihat gambar dibawah ini.

Cara membuatnya:
pertama Login ke akun Blogger sobat
pada Menu Rancangan - Pilih Edit HTML
jangan lupa untuk mencentang
Cari Kode Berikut: ]]></b:skin>
Setelah ketemu, masukkan kode berikut di atas kode  ]]></b:skin>


Klik Disini [klik buat liat kodenya] :

#NavbarMenu{background:#005094;border-top: 1px solid #3373a9;border-bottom: 1px solid #3373a9;width:968px;height:32px;color:#FFF;font:bold 8px Arial, Tahoma, Verdana;clear:both;margin:0 auto;padding:0}
#NavbarMenuleft{width:758px;float:left;margin:0;padding:0}#search{width:210px;font-size:11px;float:right;margin:0;padding:0}
#nav li{list-style:none;float:left;background:#005094;border-left:1px solid #3373a9;border-right:1px solid #003867;margin:0;padding:0}
#nav li a,#nav li a:link,#nav li a:visited{color:#fff;display:block;text-transform:capitalize;font:normal 12px Georgia, Times New Roman;margin:0;padding:10px 9px 6px}
#nav li a:hover,#nav li a:active{background:#1a4c76;color:#red;text-decoration:none;margin:0;}
#nav li li a,#nav li li a:link,#nav li li a:visited{background:#005094;width:200px;color:#fff;text-transform:capitalize;float:none;border-bottom:1px solid #3373a9;border-top:1px solid #003867;font:normal 11px Georgia, Times New Roman;margin:0;padding:7px 10px}
#nav li li a:hover,#nav li li a:active{background:#1a4c76;color:#fff;padding:7px 10px}
#nav li a.enclose,#nav li a.enclose:visited{border-bottom: 1px solid #000;}#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:-75px 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}#searchform{overflow:hidden;display:inline;margin:0;padding:0}
#searchbox{background:#ddd;margin:0;padding:0}#search input{background:transparent;color:#fff;float:left;font-size:12px;width:158px;border:1px solid #fff;font:normal 10px arial, verdana, Times New Roman;margin:7px 0 0 10px;padding:3px 7px}#search .btn{width:auto;border:0;margin:7px 0 0;padding:0}
#subnavbar{background:#004313;width:962px;height:24px;color:#FFF;margin:0;padding:0}
#subnav li a,#subnav li a:link,#subnav li a:visited{color:#f9fc01;display:block;font-size:11px;text-transform:capitalize;margin:0 5px 0 0;padding:3px 13px}
#subnav li a:hover,#subnav li a:active{color:#DCD900;display:block;text-decoration:none;margin:0 5px 0 0;padding:3px 13px}
#nav ul,#subnav ul,#subnav li{float:left;list-style:none;margin:0;padding:0}*,#nav,#subnav{margin:0;padding:0}

Nah, lanjut lagi gan clo dah selesai..
sekarang cari kode:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:section class='headerright' id='headerright' preferred='no'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
</div>

clo bingung alias gak ketemu, sobat cari tag HTML bagian <div id='header-wrapper'> atau <div id='header
nah terus cari sampai ketemu tag HTML
</b:section>
</div>

Terus Masukkan kode berikut ini dibawah kode tadi.

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl' title='This Blog Address'>Home</a></li>
<li><a href='#'>News</a>
 <ul>
  <li><a href='#'>edit</a></li>
  <li><a href='#'>edit</a></li>
  <li><a href='#'>edit</a></li>
 </ul></li>
<li><a href='#' title='edit'>Belajar Pemrograman</a>
 <ul>
  <li><a href='#'>edit</a></li>
  <li><a href='#'>edit</a></li>
 </ul></li>
<li><a href='#' title='edit'>Tips N Trik</a></li>
<li><a href='#'>Download Center</a></li>
</ul></div>
</div>

Ganti kata-katanya sesuka hati sobat.
clo udah tinggal sobat Save.
dan lihat hasilnya sekarang..
clo masi bingung bisa koment dibawah ini.
Salam Blogger. .

Tips Trik Blog: Cara Buat Spoiler Ala Kaskus Di BLog

Posted: 15 Feb 2011 06:45 AM PST

Jika agan-agan tau Kaskus, pastinya agan sering dong lihat bentuk kotak berikut?
Click Here [BB++] :
[Hayoo.. Mau Liat Apa?]

Yup, bentuk diatas namanya Spoiler.
Apa sih gunanya Spoiler itu sendiri?
Spoiler biasa dipakai atau digunakan untuk menyembunyikan suatu tulisan yang sangat panjang ataupun gambar.

Terus bagaimana cara membuat spoiler ini di BLOG?
cara membuat Spoiler Ala Kaskus Di BLog adalah sebagai berikut.

masuk ke akun Blogger agan-agan semua.
pilih Menu Postingan untuk membuat Postingan baru.
nah pilih edit Html, trus masukin kode html berikut:

Judul Spoiler [Judul yang miring] :

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler <em>[Judul yang miring]</em></b> : <input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"> </div><br /><div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;"><div style="display:none;">[ISI SPOILER]</div></div></div>

Gampang kan?
selamat bereksperimen..
jangan lupa kasi cendolnya yah gan..


Jangan Lupa Jempolnya :


 

Dibutuhkan Bulan ini :

Paling Dibutuhkan :

Dibutuhkan Minggu Ini

© 2011 tutorial blogger indonesia PublisedSeo Template Blogger Converted Template by Hack Tutors.info