Tutorial kali ini saya akan membahas bagaimana cara membuat Tab Menu Horizontal yang lebih mudah dan tidak sulit dan juga membuat ruang Blog atau Website menjadi lebih besar. Kalu masih pada penasaran silahkan kalian coba saja ya??
1. Sign in Blogger
2. Layout
3. Edit HTML
4. Jangan lupa berikan tanda centang pada Expand Widget Templates
5. Cari kode di bawah ini :
]]></b:skin>
6. Tambahkan kode ini diatasnya :
#navigation{
height:2.2em;
line-height:2.2em;
margin:0 1px;
background:#AF7817;
color:#ffffff;
}
#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #ffffff;
white-space:nowrap;
}
#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}
* html #navigation a {width:1%;}
#navigation .selected,#navigation a:hover{
background:#000;
color:#ffffff;
text-decoration:none;
}
7. Kemudian cari kode di bawah ini :
<div id='content-wrapper'>
8. Tambahkan kode ini diatasnya :
<div id='navigation'>
<ul>
<li class='selected'><a href='Alamat Link 1'>Home</a></li>
<li><a href='Alamat Link 2'>Tukaran Link</a></li>
<li><a href='Alamat Link 3'>Sumbangan</a></li>
<li><a href='Alamat Link 4'>Lain-lain</a></li>
<li><a href='http://klinik-tutorial.blogspot.com/'>klinik-tutorial</a></li>
</ul>
</div>
9. Save dan lihat hasilnya.
Note : Silahkan ganti tulisan yang berwarna hijau dengan URL yang kalian inginkan.
/*-- (Search) --*/
Terima kasih kepada temanku yang bertanya bagaimana cara membuat menu horizontal??Nah kali ini saya akan memberikan solusinya.Sebenarnya banyak yang cara yang digunakan untuk membuat menu horizontal salah satunya dengan cara ini.Mungkin cara ini lain dari pada yang lain.Ok ddeh langsung saja kita mulai...
1. Sign in Blogger
2. Layout
3. Edit HTML
4. Jangan lupa berikan tanda centang pada Expand Widget Templates
5. Cari kode ini ]]></b:skin>
6. Kemudian taruh kode ini diatasnya :
/*-- (Menu/Nav) --*/
#nav{background:#222; height:32px; padding:4px 0 0; margin-bottom:0px}
#nav-left{float:left; display:inline; width:600px}
#nav-right{float:right; display:inline; width:100px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0;
font:1.0em Arial,Helvetica,sans-serif}
#nav ul li{float:left; list-style:none}
#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px;
padding:5px 4px; text-decoration:none}
#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px;
padding:5px 4px}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li
a.current:hover{margin:0 8px; background-color:#fff; color:#fff; padding:5px
7px}
#search{background:#f9f9f9 url(http://oom.blog.googlepages.com/search.gif) 6px
2px no-repeat; -moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px; border:1px solid #b3b3b3; float:right;
height:25px; margin:0 0px 0 0; width:180px}
* html #search{margin-right:8px}
#search input{font-family:Verdana,Arial,Helvetica,sans-serif;
background:transparent; border:0; color:#555; float:left; font-size:12px;
margin:5px 0 0; padding:0px 2px 2px 27px; width:140px}
7. Kemudian cari kode ini <div id='outer-wrapper'><div id='wrap2'>
8. Taruh kode di bawah ini dibawah kode diatas :
<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes'
showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML3' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form expr:action='data:blog.homepageUrl + "search"' id='searchform'
method='get' name='searchform'>
<b:if cond='data:title'/>
<div id='search'>
<input class='s' id='s' name='q' onblur='if (this.value == '')
{this.value = 'Cari artikel disini';}' onfocus='if (this.value ==
'Cari artikel disini') {this.value = '';}' type='text'
value='Cari artikel disini'/>
<input id='searchsubmit' type='hidden' value='Search'/>
<data:content/>
</div>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
9. Save dan lihat hasilnya.
Ok tmen2 kali ini saya akan memberikan cara bagaimana cara menghilangkan navbar blogger versi 2 yaitu apabila mouse kita menuju ke atas blog kita maka navbar tersebut akan otomatis muncul sendiri secara otomatis.
1. Sign in Blogger
2. Layout
3. Edit HTML
4. Jangan lupa berikan tanda centang pada Expand Widget Templates
5. cari kode :
body {
6. Kemudian taruh kode di bawah ini diatas kode body { :
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100,
FinishedOpacity=100)}
7. Save dan lihat hasilnya.
Navbar blogger biasanya terletak di atas dari suatu blogspot contohnya seperti ini :
Nah kali ini saya akan memberikan tutorial bagaimana cara menghilangkan navbar blogger. Sebenarnya sudah banyak template yang sudah menghilangkan navbarnya sendiri tapi ada juga template yang tidak menghilangkan navbarnya. Nah kali ini saya akan memberikan cara bagaimana cara menghilangkan navbar blogger.Ok deh langsung saja kita mulai.
1. Sign in Blogger
2. Layout
3. Edit HTML
4. Jangan lupa berikan tanda centang pada Expand Widget Templates
5. cari kode ini ]]></b:skin>
6. Taruh kode ini diatas kode diatas :
/* hilangkan navbar
----------------------------- */
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
7. Save Changes dan lihat hasilnya
Saya kali ini akan memberikan bagaimana cara membagi 2 kolom header di blogspot. Sebenarya sudah banyak template gratis yang sudah membagi headernya menjadi dua tapi banyak juga template yang tidak membagi kolom headernya.Nah kali ini saya akan memberikan caranya.Kira-kira contohnya seperti ini :
1. Sign in Blogger
2. Layout
3. Edit HTML
4. Jangan lupa berikan tanda centang pada Expand Widget Templates
5. Cari kode ini :
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}
#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}
#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}
6. Hapus kode diatas dan ganti dengan kode ini :
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}
#head-inner {
width:600px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}
#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}
#r_head{
width:300px;
float:left;
padding-top:10px;
}
7. Kemudian cari kode ini :
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
8. Hapus kode diatas dan ganti dengan kode di bawah ini :
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>
9. Save Changes dan lihat hasilnya
Apa teman - teman pernah melihat blog yang seperti contoh diatas???Nah kali ini saya akan memberikan tips bagaimana cara membuat gambar atau foto atau gambar bergerak dengan format GIF atau JPG, ini disebut dengan favicon atau bisa dikatakan dengan memasanh foto di depan url address.
1. Sign in Blogger
2. Layout
3. Edit HTML
4. Cari kode ini :
<head>
5. Tambahkan kode ini dibawahnya :
<link href="http://alien.keren.googlepages.com/boss.ico" rel='Shortcut Icon'/>
6. Silahkan ganti tulisan berwarna merah diatas dengan alamat URL tempat kalian menaruh fotonya. Contohnya di : www.googlepages.com
7. Pilih Save Changes dan sekarang lihat hasilnya.
