Showing posts with label tutorial Blog. Show all posts
Showing posts with label tutorial Blog. Show all posts

Cara membuat Menubar dan Search Box di blog

Ok langsung aja,sesuai dengan judul posting kali ini saya akan share cara membuat menu bar dengan kotak pencarian,dengan kotak pencarian di blog teman maka akan mempermudah pengunjung mencari posting-posting teman yang lain....
1.Seperti biasa teman harus login ke bloger
2.Masuk ke menu template
3.Edit HTML
4.Cari kode ]]></b:skin> (gunakan ctrl+f untuk memudahkan pencarian)
5.Copy semua kode yang ada di dalam scroll box
6. Pastekan tepat di atas kode ]]></b:skin>
 

#menubar{
width:920px;
height:38px;
background:#de360f;
border-radius:2px;
float:center;
margin:0px auto;
}
#menubar-left{
float:left;
width:720px;
padding:0 0 2px 2px;
}
#menubar-right{
float:right;
width:170px;
padding-top:8px;
padding-right:18px
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
float:left;
padding:12px 10px;
color:#fff;
position:relative;
font-weight:bold !important;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
text-decoration:none;
background:#F0512D;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #de360f;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:35px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #F0512D;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:37px;
border:1px solid #de360f;
border-radius:0px 0px 8px 8px;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}
#search{
border:1px solid #F0512D;
height:20px;
width:180px;
background:#f6f4f4;
}
#search input{
color:#777;
border:none;
}
#s-m{
font-size:11px;
width:180px;
padding-left:4px;
padding-top:5px;
margin:0;
}
#search-t #search{
background-color:#FFFFFF;
border:1px solid #F0512D;
border-radius:4px 4px 4px 4px;
-moz-border-radius:4px 4px 4px 4px;
-khtml-border-radius:4px 4px 4px 4px;
-webkit-border-radius:4px 4px 4px 4px;
}
#search-t #s-m{
width:155px;
padding-top:3px;
}

Jika langkah di atas sudah selesai lanjutkan ke langkah berikutnya
7.Kita menuju ke Tata letak
8.Tambahkan Gadeget yang ada tepat di bawah header
9.HTML/Java Script
10.Copy semua kode yang ada di dalam scroll box dan paste ke dalam kotak konten



<div id='menubar'>
<div id='menubar-left'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://s4tri0.blogspot.com/'>Edit me 1</a></li>
<li><a href='http://s4tri0.blogspot.com/'>Edit me 2</a></li>
<li><a href='http://s4tri0.blogspot.com/'>Edit me 3</a>
<ul>
<li><a href='http://s4tri0.blogspot.com/'>Sub menu 1</a></li>
<li><a href='http://s4tri0.blogspot.com/'>Sub menu 2</a></li>
</ul>
</li>
<li><a href='http://s4tri0.blogspot.com/'>Edit me 4</a></li> <li><a href='http://s4tri0.blogspot.com/'>Edit me 5</a></li>
</ul>
</div>
<div id='menubar-right'>
<div id='search-t'>
<div id='search'>
<form action='/search' method='search' target='_blank'>
<input class='keyword' id='s-m' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Cari artikel disini..&quot;;}' onfocus='if (this.value == &quot;Cari artikel disini..&quot;) {this.value = &quot;&quot;}' type='text' value='Cari artikel disini..'/>
<input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWc3kUZWTfuFthtXhPAlBgAMoKS33h1_oalgnFXHZBdvXZ_ND9ZVUKKzn9la2Hlq5IX04GT1yY4xIPypxNxB42ipc-yHK3ii3rlCTOzPytfM5VOPQjsVFdJODMMbqEKcpKuJNgktYtr9M/s200/search-c.png' style='border: 0pt none ;vertical-align: top; padding-top:4px; padding-right:3px;' type='image'/>
</form>
</div>
</div>
</div>
</div>

11.Save dan lihat hasilnya.
"Untuk link dan text menu saya yakin teman tau cara menggantinya"
Untuk melihat demo nya silahkan Click DI SINI






==================================================Link Sumber : 1000arsip
READMORE
Posted by dede nugraha at 11:53 0 comments

 

Membuat tulisan berjalan di blog atau Marquee

Tulisan berjalan atau istilah untuk para bloger itu di sebut MARQUEE ini mungkin sudah biasa untuk bloger senior,tapi untuk pemula seperti saya merupakan hal baru yang menarik.
Cara meletakan marqueenya sebagai berikut :
Login ke blog teman => tata letak =>tambahkan wedget =>HTML java scrpipt =>letakan kode marquee di coloum HTML =>simpan
macam-macam marquee
=>mengatur arah marquee "direction" dan posisi tulisan "align"

-tulisan berjalan dari bawah ke atas
<marquee align="center" direction="up">tulisan teman</marquee>

-tulisan berjalan dari kiri ke kanan
<marquee align="right" direction="right">tulisan teman</marquee>

-tulisan berjalan dari kanan ke kiri
<marquee align="left" direction="left">tulisan teman</marquee>

-tulisan berjalan dari atas ke bawah
<marquee align="center" direction="down">tulisan teman</marquee>

"ganti text bergaris bawah dengan text yang teman inginkan "


=>Membuat link diam saat mouse diarahkan ke marquee "onmouseout="this.start()" onmouseover="this.stop()"
<marquee onmouseout="this.start()" onmouseover="this.stop()">
<a href="http://s4tri0.blogspot.com/" target="_blank">tulisan teman</a>
</marquee>

"ganti text dan link bergaris bawah dengan text dan link yang teman inginkan "

=>Mengatur kecepatan marquee "scrollamount"
untuk mengatur kecepatan marquee teman tinggal ganti angka yang ada di depan  scrollamount sesuai dengan kebutuhan teman.
<marquee scrollamount="1">tulisan teman</marquee>
<marquee scrollamount="2">tulisan teman</marquee>
<marquee scrollamount="3">tulisan teman</marquee>
<marquee scrollamount="4">tulisan teman</marquee>
<marquee scrollamount="5">tulisan teman</marquee>

"ganti text bergaris bawah dengan text yang teman inginkan "

=>Marquee berjalan dengan gambar animasi
<marquee align="center" direction="right" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="6" scrolldelay="7" width="100%">
<a href="http://s4tri0.blogspot.com/">Cara Pasang animasi lucu Di blog</a>
<img border="0" height="100"src="http://i446.photobucket.com/albums/qq182/kisot06/Akatsuki%20gif/DeidaraBird.gif" title="cara pasang tulisan berjalan" width="100" />
</marquee>

"ganti texs link bergaris bawah dengan link teman,ganti text berwarna merah dengan link animasi pilihan teman dan untuk mengatur besar dari animasi ganti angka sesuai dengan keinginan teman"

==>Contoh dari semua marquee di atas bisa di lihat DI SINI
READMORE
Posted by dede nugraha at 06:37 0 comments

 

Membuat scrollBox pada blog

Okeh kali ini saya akan share tenteng gimana cara membuar scrollbox pada blog,karna dengan scroll ini selain meminimalis pencarian,scrollbox jga bisa menambah minat si pengunjung untuk membaca postingan kita yang lain.
1.login ke blog kita
2.pada pengaturan pilih tata letak
3.tambah gadget
4.pilih HTML/JavaScript
5.copy kode di bawah ini kemudian paste
==>copy link di bawah tanpa garis/copy code yang ada di dalam garis
____________________________________________________
<div align="center">
<table border="1" style="width: 250px;"><tbody>
<tr> <th bgcolor="#000000" colspan="100%" scope="col">All Komputer & HandPhone Label</th> </tr>
<tr><td><br />
<div style="background: #000000; border-color: #000000; font-family: arial; font-size: 16px; height: 130px; overflow: scroll; width: 480px;">
<ul>
<li><a href="http://sample-band.blogspot.com/2011/04/cara-pasang-tombol-share.html">blog sedang dalam proses penyelesaian</a></li>
<li><a href="http://sample-band.blogspot.com/2011/04/cara-mencari-kode-html.html">blog sedang dalam proses penyelesaian</a></li>
<li><a href="http://sample-band.blogspot.com/2011/04/cara-membuat-blog-menjadi-dofollow.html">blog sedang dalam proses penyelesaian</a></li>
</ul>
<br /></div>
</td></tr></tbody></table></div>
<div style="text-align: center;">
<a href="http://s4tri0.blogspot.com/" target="_blank">Scroll Box by Satrio</a></div>
____________________________________________________

Ganti tulisan yang berwarna merah dan bercetak miring dengan link dan kata kata teman,untuk penempatan dan warna tulisan serta scrollbox silahkan atur sendiri sesuai keinginan masing masing.
caution : kalo bisa jangan di hapus sumber dan pembuat scrollbox"hargailah si pembuat dan sesama bloger"

contoh scrollboxnya



READMORE
Posted by dede nugraha at 23:01 0 comments

 
Subscribe to: Posts (Atom)