Membuat Address Bar Berjalan

Banyak cara membuat tampilan blog terlihat berbeda dan  agar menarik perhatian pengunjung, diantara adalah membuat adress bar menjadi berjalan. Teks berjalan bisa berupa sapaan, pemberitahuan ataupun yang lain.

Caranya cukup mudah, berikut langkah-langkahnya :

1. Login ke blogger.
2. Klik menu design/rancangan.
3. Untuk lebih aman sebaiknya sobat backup template terlebih dahulu.
4. Klik edit HTML. (jangan lupa centang "Expand Template Widget")
5. Cari kode </head>  (tidak perlu scroll sampai kebawah, karena posisinya di bagian atas, atau untuk lebih mudah sobat bisa gunakan CTRL+F)
6. Setelah ketemu copy script di bawah ini tepat di bawahnya.

<script type='text/javascript'>

//<![CDATA[

msg = "...Selamat datang...";

msg = "...Selamat datang..." + msg;pos = 0;

function scrollMSG() {

document.title = msg.substring(pos,   msg.length)+msg.substring(0, pos); pos++;

if (pos > msg.length) pos = 0

window.setTimeout("scrollMSG()",100);

}

scrollMSG();

//]]>

</script>

        7.   Klik simpan, dan lihat hasilnya.

Catatan :

• Tulisan berwarna biru bisa sobat rubah sesuai keinginan.
• Angka 100 merupakan kecepatan   teks itu berjalan, semakin besar nilai angka maka semakin lambat kecepatannya.

Read more

Membuat Teks Kedip Atau Bergerak Ke Kiri Dan Kanan

Ketika kita membaca artikel pada suatu blog sering kita menjumpai teks terlihat berkedip-kedip (efek blink), bergerak dari kiri ke kanan, bergerak dari kiri ke kanan secara bolak-balik ataupun bergerak secara vertikal dari bawah.ke atas (efek marquee). Untuk membuat teks yang memiliki efek blink ataupun efek marquee sangatlah sederhana, kita hanya menambahkan beberapa kode yang disisipkan pada kata/kalimat target pada edit HTML. Bagi sobat yang belum tahu bagaimana caranya menerapkan efek ini pada postingan berikut caranya :

A.   Membuat teks berkedip.

Kodenya :  <blink>Masukan teks di sini</blink>

Maka hasilnya seperti ini :

Masukan teks di sini

B.   Membuat teks bergerak dari kiri ke kanan. 

Kodenya :  <marquee>Masukan teks di sini</marquee>

Maka hasilnya seperti ini :

Masukan teks di sini

C.   Membuat teks bergerak dari kiri ke kanan bolak-balik.

Kodenya :  <marquee behavior="alternate">Masukan teks di sini</marquee>

Maka hasilnya seperti ini :

Masukan teks di sini

D.  Membuat teks bergerak dari bawah ke atas.

Kodenya :  <marquee direction="up">Masukan teks di sini</marquee>

Maka hasilnya seperti ini :

                                                                 Masukan teks di sini

E.  Membuat teks bergerak dari bawah ke atas bolak-balik.

Kodenya :  <marquee direction="down" behavior="alternate">Masukan teks di sini</marquee>

Maka hasilnya seperti ini :

                                                                 Masukan teks di sini

Begitu mudah dan sederhana bukan...?

Read more

Cara Membuat Horizontal Acrobatic Menu

Beberapa hari ini saya memang jarang update blog ini dikarenakan saya lagi mendalami untuk belajar WP. Tapi sebisa mungkin saya akan update blog sederhana ini meskipun hanya tutorial sederhana. Pada kesempatan kali ini kita akan membahas Cara Membuat Horizontal Acrobatic Menu. Tutorial ini saya dapatkan beberapa hari lalu dari sahabat saya Azis Lamayuda. Langsung saja lihat demonya.

LIVE DEMO

Untuk cara membuatnya, ikuti langkah-langkah di bawah ini.

1. Pasang kode css berikut di atas ]]></b:skin>

ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 100%;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}
ul#topnav.v2 span{
background: url(http://lh5.ggpht.com/_7ZIYPUkIUEw/TL0HX2yw0sI/AAAAAAAAAB4/5tZqAjpcOnE/menu.png) repeat-x left top;
}
ul#topnav.v2 a{
color: #555;
background: url(http://lh5.ggpht.com/_7ZIYPUkIUEw/TL0HX2yw0sI/AAAAAAAAAB4/5tZqAjpcOnE/menu.png) repeat-x left bottom;
}

2. Pemasangan jquery di atas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>


<script type='text/javascript'>




$(document).ready(function() {




$(&quot;#topnav li&quot;).prepend(&quot;<span/>&quot;); //Throws an empty span tag right before the a tag


$(&quot;#topnav li&quot;).each(function() { //For each list item...
var linkText = $(this).find(&quot;a&quot;).html(); //Find the text inside of the a tag
$(this).find(&quot;span&quot;).show().html(linkText); //Add the text in the span tag
});


$(&quot;#topnav li&quot;).hover(function() { //On hover...
$(this).find(&quot;span&quot;).stop().animate({
marginTop: &quot;-40&quot; //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find(&quot;span&quot;).stop().animate({
marginTop: &quot;0&quot; //Move the span back to its original state (0px)
}, 250);
});




});
</script>

3. Selanjutnya cari kode berikut

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>

4. Pasang kode HTML untuk menu berikut di bawah kode di atas

<ul class='v2' id='topnav'>


<li><a href='/' title='HOME'>HOME</a></li>


<li><a href='#' title='MENU 1'>MENU 1</a></li>


<li><a href='#' title='MENU 2'>MENU 2</a></li>


<li><a href='#' title='MENU 3'>MENU 3</a></li>


<li><a href='#' title='MENU 4'>MENU 4</a></li>


<li><a href='#' title='MENU 5'>MENU 5</a></li>


<li><a href='#' title='MENU 6'>MENU 6</a></li>
</ul>

5. Save template

Note: Untuk pemasangan menu, sobat tidak di haruskan meletakkan di bawah kode di atas tadi. Sobat bisa meletakkannya di add gadget, tinggal sesuaikan dengan template saja.

Semoga bermanfaat.
Alhamdulillah..

Read more

Cara Membuat Navigasi Halaman Blog

Wah sudah lumayan lama tidak posting tentang tutorial blog nih, jadi agak kurang update deh blog ini. Setelah dulu saya pernah membahas tentang Mengganti Tulisan Posting Lama Dan Posting Baru Jadi Lebih Menarik(silahkan baca disini), sekarang kita akan membahas cara membuat navigasi halaman blog. Lihat gambar di bawah ini sebagai contoh.

klik gambar untuk live demonya

Read more

Menambah Elemen Baru Di Atas Header

Setelah pada postingan kemarin saya membahas tentang Cara Memubuat Footer Multi Kolom, pada postingan kali ini saya akan membahas cara menambah elemen baru atau add gadget di bagian atas header.


Menambahkan elemen baru di atas header memang mempunyai banyak fungsi. Selain bisa untuk meletakkan script iklan, juga bisa untuk menambahkan horizontal menu bagi blog yang belum ada horizontal menunya.

Read more