Membuat Tulisan dan Gambar bergerak (berjalan)

Rizkie's BLOG__Membuat Tulisan dan Gambar bergerak (berjalan) merupakan widget untuk membuat blog lebih indah atau penghias blog . Membuat pengunjung lebih betah berlama - lama diblog anda . Widget ini bisa ditaruh dimana pun anda inginkan . Berikut adalah cara untuk membuat tulisan & gambar bergerak / berjalan :

1. Loggin ke blogger
2. Tata letak >> Tambah gadget pilih HTML/javascript
3. Paste kode dibawah .
4. Simpan .
5. Nimati hasilnya..

Berikut kode rahasianya :

TULISAN BERGERAK ATAU BERJALAN

Tulisan berjalan ke kanan (Ganti dengan Teks Anda)

Untuk Tulisan Bergerak Ke Kanan Berikut Scricpt Kodenya:

<marquee direction="right"><span style="color: rgb(255, 0, 0); font-weight: bold;">Tulisan berjalan ke kanan  (Ganti dengan Teks Anda)</span></marquee>

Tulisan Berjalan Ke kanan & ke kiri (Ganti dengan Teks anda)

Untuk Tulisan Bergerak Ke Kanan Dan Kekiri Berikut Scricpt Kodenya:

<marquee direction="left" behavior="alternate"><span style="color:red; font-weight: bold;">Tulisan Berjalan Ke kanan & ke kiri (Ganti dengan Teks anda)</span></marquee>



Tulisan Berjalan kekanan Perlahan (Ganti Dengan Teks Anda)

Untuk Tulisan Bergerak Ke Kanan Perlahan Berikut Scricpt Kodenya:

<marquee direction="right" scrolldelay="500"><span style="color:red; font-weight: bold;">Tulisan Berjalan kekanan Perlahan (Ganti Dengan Teks Anda)</span></marquee>

Tulisan Berjalan Ke Kanan dan Kekiri Dan Bisa Berhenti sejenak (Ganti dengan Teks Anda)

Untuk Tulisan Bergerak Ke Kanan dan Kekiri Bisa Berhenti sejenak Berikut Scricpt Kodenya:

<marquee direction="left" behavior="alternate" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" width="95%"><span style="color:red; font-weight: bold;">Tulisan Berjalan Ke Kanan dan Kekiri Dan Bisa  Berhenti sejenak (Ganti dengan Teks Anda)</span></marquee>

Tulisan Berjalan Ke Atas(Ganti dengan Teks anda)





Untuk Tulisan Bergerak Ke Atas Berikut Scricpt Kodenya:

<marquee align="center" direction="up" height="100" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="95%"><span style="color: red; font-weight: bold;">Tulisan Berjalan Ke Atas(Ganti dengan Teks anda)</span></marquee>






Tulisan Berjalan Ke Atas dan Ke bawah(Ganti dengan Teks Anda)

Untuk Tulisan Bergerak Ke Atas Kebawah Berikut Scricpt Kodenya:

<marquee align="center" direction="up" behavior="alternate" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" height="100" width="95%"><span style="color:red; font-weight: bold;">Tulisan Berjalan Ke Atas dan Ke bawah(Ganti dengan Teks Anda)</span></marquee>

Untuk Gambar yang bisa berjalan Ke Kiri berikut Scriptnya:

<marquee direction="right"> <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRG_W2-gmMPrGe3y9ncGOtOsmNI10Ckme0aAXCHWOaqjLcx3hdo " /></marquee>

Keterangan:

Anda bisa mengganti arah pergerakan tulisan atau gambar tanpa harus meng-copy

 kode script yang baru . Contohnya :

<marquee direction="right"     --bisa diganti dengan--      <marquee direction="left"
<marquee direction="up"        --bisa diganti dengan--      <marquee direction="down"
dan seterusnya.....


Ganti Kode berwarna Merah dengan Teks atau URL yang anda mau, Ganti kode berwarna hijau dengan warna yang anda Mau seperti biasa,contohnya red,blue,black d.l.l.

Bisa Diganti dengan kode warna

<span style="color:red; font-weight: bold;"> menjadi <span style="color:#f00; font-weight: bold;">

Ini Kode warnanya:

Hijau= #0f0;
Merah= #f00;

Biru= #00f;

Ungu= #f0f;

Dan masih banyak lagi.

Silahkan di coba-coba kode warna yang lain.

"SELAMAT MENCOBA"

Read More

Membuat Menu Dropdown tanpa Edit HTML

Rizkie's BLOG >> Membuat Menu Dropdown tanpa Edit HTML

     Berikut adalah tutorial blog membuat menu dropdown tanpa edit html . Bagi sebagian kalangan mungkin sudah mengetahui apa itu menu dropdown . Namun bagi para pemula blogger , menu dropdown merupakan hal yang cukup asing didengar . Oleh karena itu , kali ini admin akan mempostkannya . Sebelumnya admin akan menjelaskan apa itu menu dropdown .

      Menu dropdown adalah menu yang apabila kita mengarahkan kursor muose kita ke menu tersebut maka akan muncul menu yang lainnya kebawah .

      Menu dropdown memudahkan pengunjung untuk mencari informasi yang dibutuhkan yang terdapat pada blog anda .

Berikut adalah kode untuk membuat menu dropdown tanpa edit html :

<style>
#menu
{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #000000;
background: -moz-linear-gradient(#444, #000000);
background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 0px #9c9c9c;
-webkit-box-shadow: 0 2px 0px #9c9c9c;
box-shadow: 0 2px 0px #9c9c9c;
}
#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
#menu a
{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a
{
color: #fafafa;
}
*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}
#menu li:hover > ul
{
display: block;
}
/* Sub-menu */
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 2px;
}
#menu ul ul
{
top: 0;
left: 150px;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 10px;
height: 10px;
width: 130px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
}
#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}

#menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
<ul id="menu">
<li><a href='/'>Home</a></li>
 <li><a href='http://rizkiadynugraha.blogspot.com/' rel='nofollow' target='_blank'>Drop menu</a>
<ul>
 <li><a href='http://rizkiadynugraha.blogspot.com/' rel='dofollow' target='_blank'>Menu 1</a></li>
 <li><a href='http://rizkiadynugraha.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
 <li><a href='http://rizkiadynugraha.blogspot.com/' rel='dofollow' target='_blank'>Menu 3</a></li>
 <li><a href='http://rizkiadynugraha.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
 <li><a href='http://rizkiadynugraha.blogspot.com/' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
 <li><a href='http://rizkiadynugraha.blogspot.com/' rel='nofollow' target='_blank'>Drop menu 2</a>
<ul>
 <li><a href='http://rizkiadynugraha.blogspot.com/' rel='dofollow' target='_blank'>Menu 1</a></li>
 <li><a href='http://rizkiadynugraha.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
 <li><a href='http://rizkiadynugraha.blogspot.com/' rel='dofollow' target='_blank'>Menu 3</a>
<ul>
 <li><a href='http://rizkiadynugraha.blogspot.com/' rel='dofollow' target='_blank'>Menu 3.1</a></li>
 <li><a href='http://rizkiadynugraha.blogspot.com/' rel='dofollow' target='_blank'>Menu 3.2</a></li>
 <li><a href='http://rizkiadynugraha.blogspot.com/' rel='dofollow' target='_blank'>Menu 3.3</a></li>
 <li><a href='http://rizkiadynugraha.blogspot.com/' rel='dofollow' target='_blank'>Menu 3.4</a></li>
</ul>
</li>
 <li><a href='http://rizkiadynugraha.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
 <li><a href='http://rizkiadynugraha.blogspot.com/' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
 <li><a href='http://rizkiadynugraha.blogspot.com/' rel='nofollow' target='_blank'>Drop menu 3</a>
<ul>
 <li><a href='http://rizkiadynugraha.blogspot.com/' rel='dofollow' target='_blank'>Menu 1</a></li>
 <li><a href='http://rizkiadynugraha.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
 <li><a href='http://rizkiadynugraha.blogspot.com/' rel='dofollow' target='_blank'>Menu 3</a></li>
 <li><a href='http://rizkiadynugraha.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
 <li><a href='http://rizkiadynugraha.blogspot.com/' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul></li></ul>

Cara meletakkannya :
1. Login dulu ke blog anda
2. Setelah masuk di dasbor pilih tata letak
3. Klik tambah gadget pilih HTML/javascript
4. Copy kan kode diatas
5. selesai,lihat pratinjau ......

Silahkan untuk pilihan menu boleh diganti sesuai dengan menu yang ingin anda terapkan .
Untuk link = http://rizkiadynugraha.blogspot.com/ , silahkan diganti dengan link blog anda .

Sekian tutorial membuat menu dropdown tanpa edit html . Semoga bermanfaat .

Read More