Swardana Linggih Blog: Accessories

Tampilkan postingan dengan label Accessories. Tampilkan semua postingan

Home » Posts filed under Accessories

19 Juni 2012

Membuat Gambar Animasi GIF

Membuat Gambar Animasi Interaktif GIF Menggunakan Software Adobe Photoshop

Saat ini banyak webmaster baik pemilik situs/blog pribadi maupun situs bisnis sering kali memakai banner maupun logo gambar animasi gerak berformat gif. Alasan utamanya adalah menghemat space layout (ruang tampilan) web, karena beberapa informasi yang ingin ditampilkan dapat ditayangkan pada satu file gambar saja.

Contoh gambar animasi GIF seperti ini:

Contoh Gambar Animasi GIF

Ingin tahu cara membuatnya. Gampang!!! Berikut panduan tutorial singkat membuat gambar animasi GIF menggunakan Adobe Photoshop. Pada artikel tutorial yang saya tulis, implementasinya menggunakan software Adobe Photoshop CS 5. Screenshot gambar pada artikel ini mungkin sedikit berbeda dengan versi photoshop yang anda pakai. Namun tentu saja, selama software yang dipakai adobe photoshop, anda tidak akan kesulitan mengikuti setiap step panduan tutorial.

Siapkan dulu beberapa gambar yang ingin dibuat animasi, atau untuk latihan silahkan pakai gambar sama dengan yang saya pakai. Contoh pada tutorial artikel ini; karena sejak masa kecil sampai sekarang demen ama kartun Dragon Ball, saya ambil salah satu tokoh karakter dari Dragon Ball Z Episode 265 "Vegeta's Respect" → Majin Buu lagi joget.
Haha...
:D

Jumlah file total 8 dengan dimensi gambar semua sama → lebar 200px, tinggi 226px. Berikut beberapa file gambar yang akan saya pakai:

Majin Buu 1

Majin Buu 2

Majin Buu 3

Majin Buu 4

Majin Buu 5

Majin Buu 6

Majin Buu 7

Majin Buu 8

Buka aplikasi adobe photoshop. Klik File → New..., atau tekan tombol Ctrl + N (Screenshot ke-1)

Nama dokumen isi dengan nama terserah (pada tutorial ini mamakai nama Majin Buu). Dimensi ukuran dokumen baru akan saya tentukan sesuai (sama) dengan dimensi ukuran gambar (200px X 226px). Klik OK (Screenshot ke-2)

Restore Down (perkecil) jendela photoshop dengan klik pada ikon kotak kecil sebelah kiri tombol Close (tanda silang). Pastikan jendela Photoshop & direktori folder tempat gambar disimpan terlihat (Lihat screenshot gambar ke-3 di bawah).

New Document

Konfigurasi Dokumen

Restore Down Photoshop

Untuk berjaga-jaga kalau saja mati lampu, haha... :D, simpan dulu dokumen. Sudah disimpan... bagus. Sekarang pilih (select) semua file gambar, kemudian drag & drop file gambar (klik mouse kiri, tekan & tahan kemudian geser) ke layer kosong pada jendela adobe photoshop (lihat screenshot ke-1 di bawah).

Maximize (tampilkan layar penuh) kembali jendela photoshop. Kemudian klik enter delapan kali (karena jumlah file gambar yang diimport sebanyak 8), cek ulang apakah semua file gambar sudah berhasil diimport. Kurang lebih akan tampak seperti gambar ke-2 pada screenshot di bawah.

Untuk memudahkan membuat gambar animasi, tata ulang layer sesuai urutan yang sudah ditentukan (pada tutorial ini urutan layer 1 - 8), bisa urut atas ke bawah atau sebaliknya. Lihat screenshot ke-3 gambar di bawah:

Drag & Drop File

Import File

Urutkan Layer

Klik pada menu Window → Animation (screenshot ke-1), sehingga akan muncul tab Group animation pada halaman paling bawah adobe photoshop seperti terlihat pada screenshot ke-2. Switch (ganti) Time Line Mode ke Frame Mode dengan klik pada icon Convert to frame animation → halaman pojok kanan bawah (screenshot ke-3).

Window - Animation

Animation Tab Group

Frame Animation Mode

Karena jumlah layer pada Group Layers ada 8 layer, pada tutorial ini jumlah frame yang dipakai mengukuti jumlah layer sebanyak 8 Frame (bebas/tambahkan sesuai keinginan). Klik ikon Duplicates selected frames dan tambahkan frame sesuai dengan keinginan (screenshot ke-1 & 2). Tentukan layer yang ditampilkan dan tidak ditampilkan untuk masing-masing frame dengan klik pada frame kemudian seleksi layer (screenshot ke-3). Pada tutorial ini frame 1 → layer 1, frame 2 → layer 2, frame 3 → layer 3... dst. Pilih frame dan tentukan layer sesuka anda.

Tambah Frame

Animation Frames

Frames & Layers

Contoh setting frame (hanya frame 1 - 3).

Setting Frame 1

Setting Frame 2

Setting Frame 3

Tentukan waktu masing-masing transisi (perpindahan) setiap frame dengan klik pada ikon drop-down panah sebelah bawah frame, kemudian tentukan waktunya → pilih No delay, 0.1 seconds, 0.2, 0.5, 1.0, 2.0, 5.0, 10.0 atau other...(screenshot ke-1). Pada tutorial ini semua frame transisinya akan ditentukan dengan nilai 0,05 detik (seconds) dengan klik pada other... kemudian Set delay: dengan nilai 0,05 → klik OK (Screenshot ke-2).

Pilih looping options (jumlah berapa kali animasi diulang) → Once (satu kali), 3 Times (3 kali), Forever (terus berputar) atau other... jika ingin memasukkan nilai yang lainnya (5, 6, 7, 8... dst kali). Pada tutorial ini looping options yang dipilih Forever. Jika selesai, klik tombol play untuk preview gambar animasi (Screenshot ke-3).

Set Delay

Custom Frame Delay

Looping Options & Play Preview

Jika sudah cocok/sesuai keinginan klik File → Save for Web & Devices..., atau tekan tombol Ctrl+Alt+Shift+S (screenshot ke-1). Sesuaikan output setting, kemudian klik tombol Save (Screenshot ke-2 & 3).

Save For Web and Devices

Output Gambar Animasi GIF 1

Output Gambar Animasi GIF 2

Selesai. Lihat hasilnya dengan cara klik kanan pada output file kemudian Open with → Aplikasi Browser (Firefox, Google Chrome, IE, dlsb)

Test Output Gambar Animasi GIF

Berikut hasil output gambar animasi GIF dari tutorial di atas:

Nah... berhasil kan.

Semoga bermanfaat...
:)

Selengkapnya

12 Desember 2010

Membuat Form Kontak Menggunakan Simple PHP Script

Jika pada posting sebelumnya tentang cara membuat form kontak dengan menggunakan google docs & online form generator, sekarang sedikit mengulas tentang Cara Membuat Kontak Form Dengan Menggunakan Simple PHP Script.

Langsung saja & tanpa banyak basa-basi. Begini tahapannya:

Buat dahulu file phpnya.

[php]
<?php

if(!$_POST) exit;

$email = $_POST['email'];

//$error[] = preg_match('/\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/i', $_POST['email']) ? '' : 'INVALID EMAIL ADDRESS';
if(!eregi("^[a-z0-9]+([_\\.-][a-z0-9]+)*" ."@"."([a-z0-9]+([\.-][a-z0-9]+)*)+"."\\.[a-z]{2,}"."$",$email )){
$error.="Alamat email yang anda masukkan tidak valid";
$errors=1;
}
if($errors==1) echo $error;
else{
$values = array ('nama','email','pesan');
$required = array('nama','email','pesan');

$your_email = "emailanda@email.com";
$email_subject = "Pesan baru: ".$_POST['subject'];
$email_content = "Isi pesan:\n";

foreach($values as $key => $value){
if(in_array($value,$required)){
if ($key != 'subject' && $key != 'subject') {
if( empty($_POST[$value]) ) { echo 'Jangan kosongkan field yang wajib diisi'; exit; }
}
$email_content .= $value.': '.$_POST[$value]."\n";
}
}

if(@mail($your_email,$email_subject,$email_content)) {
echo 'Pesan terkirim! Terima Kasih. Secepatnya kami akan menanggapi pesan anda.';
} else {
echo 'ERROR!';
}
}
?>
[/php]

Copy dan pastekan kode di atas pada text editor (notepad misalnya) dan berilah nama terserah & diakhiri dengan file extention php (.php), atau;

Download filenya di sini.

Yang harus anda edit:

"Alamat email yang anda masukkan tidak valid" → Notifikasi ke visitor jika input alamat email yang di isi tidak valid.

"emailanda@email.com" → alamat email dimana seluruh konten isi pesan akan dikirimkan (isikan dengan alamat email anda).

"Pesan baru: ".$_POST['subject']" → Subjek pesan yang akan ditampilkan di alamat email anda (Pesan baru: diikuti dengan subjek pesan yang diisikan pada form kontak). Ganti tulisan "Subjek pesan:" dengan text terserah anda.

"Pesan terkirim! Terima Kasih. Secepatnya kami akan menanggapi pesan anda." → Ganti dengan kata-kata anda.

Upload file php di atas ke web server, atau jika anda akan menggunakan form kontak ini di blogspot, upload ke google site.

Selanjutnya, copy dan pastekan kode di bawah ini antara tag "<head> Kode di sini </head>" (blogspot → sisipkan kode ini pada tab "Edit HTML").

[jscript]
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function(){
$('#contactform').submit(function(){
var action = $(this).attr('action');
$.post(action, {
Nama: $('#nama').val(),
eMail: $('#email').val(),
Subject: $('#subject').val(),
Pesan: $('#pesan').val()
},
function(data){
$('#contactform #submit').attr('disabled','');
$('.response').remove();
$('#contactform').before('<p class="response">'+data+'');
$('.response').slideDown();
if(data=='Pesan terkirim! Terima Kasih. Secepatnya kami akan menanggapi pesan anda.') $('#contactform').slideUp();
}
);
return false;
});
});
// ]]>
</script>
[/jscript]

Buat property css untuk kontak form. CSS ini terserah mau anda buat seperti apa, namun ID form harus sama dengan tag ID & Class yang ada pada kode script di atas ("#contactform" dan ".response").

Untuk blogspot, copy dan pastekan kode di bawah ini di atas kode "]]>" pada tab "Edit HTML".

[css]
#contactform {margin:0; padding:5px 10px;}
#contactform * {color:#222222;}
#contactform ol {margin:0; padding:0; list-style:none;}
#contactform li {margin:0; padding:0; background:none; border:none; display:block;}
#contactform li.buttons {margin:5px 0 5px 0;}
#contactform label {margin:0; width:110px; display:block; padding:5px 0; font:normal 12px Arial, Helvetica, sans-serif; color:#2c2c2c; text-transform:capitalize;}
#contactform label span {display:block; font:normal 10px Arial, Helvetica, sans-serif;}
#contactform input.text {width:440px; border:1px solid #dcdcdc; margin:5px 0; padding:5px 2px; height:16px; background:#f5f5f5;}
#contactform input.text:hover {border: 1px solid #048bfe;background:#fff; cursor: default}
#contactform input.text:focus {color:#222; border: 1px solid #048bfe; background:#fff; cursor:text;}
#contactform textarea {width:440px; border:1px solid #dcdcdc; margin:10px 0; padding:2px; background:#f5f5f5;}
#contactform textarea:hover {border: 1px solid #048bfe;background:#fff; cursor: default}
#contactform textareat:focus {color:#222; border: 1px solid #048bfe; background:#fff; cursor:text;}
#contactform li.buttons input {padding:3px 0; margin:0; border:0; color:#FFF;}
p.response {text-align:center; color:#2c2c2c; font:bold 11px Arial, Helvetica, sans-serif; line-height:1.8em; width:auto; }
#contactform li.buttons {margin:5px 0 5px 0;}
.kirimpesan {margin: 1em 0 1em 0; width: 116px; height: 30px; position: relative; overflow: hidden; padding: 0; border: none; }
.kirimpesan input{background: url(kirim_pesan.jpg) 0 0 no-repeat; width: 116px; height:30px; float:left; padding: 0; overflow: hidden; border: 0; text-indent: -9000px; cursor: pointer;}
.kirimpesan input:hover{background-position: 0 -30px;}
[/css]

Sekarang tinggal buat halaman presentasi (visual) kontak form. Kode html nya seperti contoh di bawah ini:

[html]
<form action="contact.php" method="post" id="contactform">
<ol>
<li>
<label for="name">Nama <span>Isikan nama anda</span></label>
<input id="name" name="name" class="text" />
</li>
<li>
<label for="email">Email <span style="text-align:left">Isikan alamat email valid</span></label>
<input id="email" name="email" class="text" />
</li>
<li>
<label for="subject">Subjek <span>Subjek pesan anda</span></label>
<input id="subject" name="subject" class="text" />
</li>
<li>
<label for="message">Pesan <span style="text-align:left">Yang ingin anda sampaikan</span></label>
<textarea id="message" name="message" rows="6" cols="50"></textarea>
</li>
<li class="buttons">
<span class="kirimpesan"><input name="imageField" type="submit" /></span>
</li>
</ol>
</form>
[/html]

Ganti "contact.php" dengan alamat url dimana script php contact anda letakkan.

Tampilannya akan seperti ini:

Selesai. Semua pesan yang diisikan melalui form kontak di atas akan dikirimkan ke alamat email sesuai dengan alamat email pilihan anda.

Monggo dicoba.

Selengkapnya

15 Februari 2010

Image Slider Web/Blog

Trik Membuat Slider Image (Gambar) Pada Web/blog

Tentu saja web/blog lebih terlihat menarik dengan menambahkan animasi, seperti contoh yang akan dibahas di sini adalah membuat dan menambahkan slide image (gambar) pada website / blog. Seperti apa contoh slider image, langsung lihat saja contohnya pada halaman ini.

Slider Image yang akan dibuat akan mempunyai beberapa fitur antara lain:

Slideshow dengan gambar disertai deskripsi singkatnya
Tombol "Play, Pause, Next, dan Previous".
Kecepatan / delay waktu slideshow yang dapat disesuaikan
Script yang dapat disesuaikan dengan ukuran gambar yang dipakai

OK langsung saja, begini tahapan pembuatannya. Sebelumnya download dahulu bahannya di halaman ini.

Pertama buat dulu css nya seperti di bawah ini:

[css]
<style type="text/css">
#slider {
width: 300px;
height: 186px;
position: relative;
overflow: hidden;
}

#slider a:link, #slider a:active {
color: #FF0;
text-decoration: none;
}

#slider a:hover {
color: #F00;
}

#mask-gallery {
overflow: hidden;
}

#gallery {
list-style: none;
margin: 0;
padding: 0;
z-index: 0;
width: 900px;
overflow: hidden;
}

#gallery li {
float: left;
}

#mask-excerpt {
position: absolute;
top: 0;
left: 0;
z-index: 500px;
width: 100px;
overflow: hidden;
}

#excerpt {
filter: alpha(opacity=60);
-moz-opacity: 0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
list-style: none;
margin: 0;
padding: 0;
z-index: 10;
position: absolute;
top: 0;
left: 0;
width: 100px;
background-color: #000;
overflow: hidden;
font-family: arial;
font-size: 10px;
color: #fff;
}

#excerpt li {
padding: 5px;
}

</style>
[/css]

Ganti ukuran gambar sesuai dengan gambar anda. Selanjutnya Copy dan pastekan kode script di bawah di atas atau di bawah kode css yang baru anda buat.

[jscript]
<script>
$(document).ready(function() {

var speed = 5000;

$('#mask-gallery, #gallery li').width($('#slider').width());
$('#gallery').width($('#slider').width() * $('#gallery li').length);
$('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());

var run = setInterval('newsscoller(0)', speed);

$('#gallery li:first, #excerpt li:first').addClass('selected');

$('#btn-pause').click(function () {
clearInterval(run);
return false;
});

$('#btn-play').click(function () {
run = setInterval('newsscoller(0)', speed);

return false;
});

$('#btn-next').click(function () {
newsscoller(0);
return false;
});

$('#btn-prev').click(function () {
newsscoller(1);
return false;
});

$('#slider').hover(
function() {
clearInterval(run);
},
function() {
run = setInterval('newsscoller(0)', speed);
}
);
});

function newsscoller(prev) {
var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');

if (prev) {

var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');

var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');

} else {
var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
}

$('#excerpt li, #gallery li').removeClass('selected');
next_image.addClass('selected');
next_excerpt.addClass('selected');

$('#mask-gallery').scrollTo(next_image, 800);
$('#mask-excerpt').scrollTo(next_excerpt, 800);

}

</script>
[/jscript]

Var Speed= 5000, yang berarti mengatur delay untuk setiap pergantian gambar (semakin kecil nilainya maka semakin cepat delay pergantian gambarnya). "$('#mask-gallery').scrollTo(next_image, 800)" dan "$('#mask-excerpt').scrollTo(next_excerpt, 800)", nilai 800 mengatur kecepatan perpindahan slide (semakin kecil nilainya maka akan semakin cepat).

Selanjutnya buat konten yang mana harus diisikan antara kode <body> sampai dengan </body>. Contohnya seperti di bawah:

[html]
<div id="slider">

<div id="mask-gallery">
<ul id="gallery">
<li><img src="images/gambar1.jpg" width="300" height="186" alt=""/></li>
<li><img src="images/gambar2.jpg" width="300" height="186" alt=""/></li>
<li><img src="images/gambar3.jpg" width="300" height="186" alt=""/></li>
</ul>
</div>

<div id="mask-excerpt">
<ul id="excerpt">
<li>Isikan diskripsi singkat untuk gambar <a href="#">slideshow yang pertama</a></li>
<li>Selanjutnya bagian ini untuk deskripsi singkat <a href="#">gambar yang kedua</a></li>
<li>Dan ini merupakan deskripsi singkat untuk <a href="#">gambar yang ketiga</a></li>
</ul>
</div>
</div>

<div id="buttons">
<a href="#" id="btn-prev">prev</a>
<a href="#" id="btn-pause">pause</a>
<a href="#" id="btn-play">play</a>
<a href="#" id="btn-next">next</a>
</div>
[/html]

Nah sekarang link kan script file "jquery.scrollTo" dan "jquery-1.3.1.min" dalam folder "js" yang baru saja anda download diantara kode <head> sampai </head>. Cara link nya contohnya seperti di bawah ini:

[jscript collapse="false"]
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
[/jscript]

Untuk pengguna blogger "src=..." gantikan dengan alamat url dimana script file tersebut anda upload. Jika anda mempunyai account gmail, upload file anda di google sites. Lihat hasilnya di sini.

Selengkapnya

14 Februari 2010

Auto Scrolling "Back To Top"

Jika pada artikel sebelumnya saya menulis cara 'Membuat Link Back to Top', nah sekarang saya akan sharing cara membuat link back to top pada blogspot, kurang lebih hampir sama dengan postingan saya sebelumnya. Yang membedakan hanyalah pada artikel ini hanya sedikit menambahkan 'auto scroller effect' dan 'Rollover Image' pada linknya. Seperti apa nanti jadinya, langsung saja ke tkp.

Bagaimana tahap pembuatannya, ikuti langkah-langkahnya berikut ini;

Pertama, Sign in ke akun blogger anda. Klik pada tab 'Layout' (tata letak) kemudian navigasikan pada link 'Edit HTML'. Cari kode "]]></b:skin>", kemudian tambahkan tag id ini di atas kode tersebut:

#atas {
bottom:5px; 
right:5px;
position:fixed;
width: 50px;
height: 50px;
}

'bottom' dan 'right' adalah jarak dari batas tepi bawah dan kanan sebesar 5 pixel, silahkan sesuaikan dengan kreatifitas anda. 'width' dan 'height' masing-masing menentukan lebar dan tinggi dari object link, kebetulan gambar yang saya pakai mempunyai ukuran lebar dan tinggi 50 pixel. Sesuaikan dengan gambar anda. 'Position:fixed' maksudnya objek dari link tidak akan berubah posisinya jika halaman di geser ke bawah maupun ke atas, ataupun jika halaman browser dirubah-rubah ukurannya.

Kemudian buatlah gambar untuk effect rollover image. Harap dicatat untuk membuat rollover image harus ada dua gambar, gambar yang pertama adalah default sedangkan yang kedua untuk efek rollover ketika mouse diarahkan pada link sehingga seolah-olah gambarnya berubah. Pakai software olah gambar yang biasa anda pakai, jika contoh tag id di atas ukuran gambar ditentukan '50px x 50px' maka untuk menggabungkan dua gambar menjadi satu buatlah ukuran dengan lebar 50px dan tinggi 100 px. '50px x 50px' bagian atas untuk gambar default sisanya untuk efek gambar rollover. Contoh gambarnya seperti di bawah ini:

Back to Top

Untuk mengaktifkan efek rollover maka anda perlu menambahkan tag id tambahan untuk efek link gambarnya (tuliskan kode ini di bawah kode tag id paling akhir dari '#atas' dibawah kode " } " ). Gambar yang saya pakai mempunyai alamat url 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq1qU-jvn13h3gqEj33r5J1RQQEk7rDGr6Nf0pcmaEIkFRUTaA_Ht89AzC7Fe_NmYhq8GxzjL3lzzxfu60rvJfTSTZEwHI12WsLJvVe6CxD7xQoALQdaG4zGrebAeqdqaKkB6L6lP64ls/s320/top.gif'. Tuliskan kode CSSnya seperti di bawah ini:

#atas a:link, #atas a:visited {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq1qU-jvn13h3gqEj33r5J1RQQEk7rDGr6Nf0pcmaEIkFRUTaA_Ht89AzC7Fe_NmYhq8GxzjL3lzzxfu60rvJfTSTZEwHI12WsLJvVe6CxD7xQoALQdaG4zGrebAeqdqaKkB6L6lP64ls/s320/top.gif) no-repeat left top;
display: block;
width: 50px;
height: 50px;
}

#atas a:hover, #atas a:active {
background-position: left bottom;
border: none;
}

Sudah hampir jadi, sekarang tinggal link ke file javascriptnya untuk efek auto scrolling. Tuliskan kode di bawah ini di bawah kode <head>:

<script src='http://www.domain.com/scroller.js' type='text/javascript'/>

Terakhir tinggal buat anchor linknya, ada dua cara yang dapat anda lakukan. Cara pertama klik pada tab 'Layout' (Tata Letak) klik pada 'Page element' (Elemen halaman). Klik pada 'Tambah gadget' (Harus pada gadget paling atas), kemudian klik pada pilihan 'HTML/Javascript', tuliskan kode di bawah ini pada kotak konten edit HTML/Javascript:

<a id="top" name="top"></a>

Cara yang kedua, pada tab menu 'Layout' (Tata Letak) klik pada 'Edit HTML', cari kode '<body>'. Kemudian tuliskan kodenya sama seperti kode di atas di bawah tag '<body>'.

Selanjutnya buat linknya, masih pada bagian 'Edit HTML', tambahkan kode ini di atas tag '</body>':

<div id='atas'>
<a href='#top' title='Back to top'></a>
</div>

Selesai, semoga bermanfaat...
:D

Selengkapnya

Membuat "Link Back To Top"

Bayangkan jika anda mengunjungi website atau blog dengan halaman yang panjang sampai capek untuk scroll ke akhir halaman, kemudian setelah selesai anda ingin kembali lagi ke halaman paling atas. Umumnya visitor akan scroll halaman secara manual kembali ke halaman paling atas, cara ini kurang efektif. Tips berikut ini akan memudahkan visitor untuk dapat lompat ke halaman paling atas tanpa harus scrolling (menggulung) mouse secara manual.

Syarat yang diperlukan adalah menambahkan tombol atau link yang mengarah pada halaman paling atas. Tambahkan sedikit modifikasi pada kode css & html, untuk pengguna blogspot ikuti langkah mudahnya seperi di bawah ini;

Login ke account blog anda.
navigasikan ke 'Layout' (Tata Letak) => Pilih tab 'Edit HTML'.
Cari kode "]]></b:skin>" dan kopi pastekan kode di bawah ini diatas kode "]]></b:skin>" ;

#atas {
bottom: 5px;
right: 5px;
position: fixed;
}

Atur penempatannya sesuai keinginan anda, "bottom:5px; right:5px" maksudnya jarak dari batas paling bawah 5 pixel, paling kanan 5 pixel. Jika ingin menempatkan pada tempat lain tinggal atur posisinya dengan perintah "bottom, right, left, top" kemudian sesuaikan jaraknya. Misal jika ingin menempatkannya pada bagian halaman pojok kanan atas tuliskan kode ini;

#atas {
top: 5px; /* 5px optional sesuaikan dengan angka anda. */
right: 5px; /* 5px optional sesuaikan dengan angka anda. */
position: fixed;
}

Pojok kiri atas ;

#atas {
top: 5px;
left: 5px;
position: fixed;
}

Pojok kiri bawah

#atas {
bottom: 5px;
left:5px;
position:fixed;
}

Kemudan tinggal menambahkan linknya, dapat berupa gambar ataupun hanya sekedar anchor link. Jika ingin menambahkan gambar caranya seperti di bawah ini;

<div id='atas'>
<a href='#'><img alt='Kembali Ke Halaman Paling Atas' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht7v8OxyrrYBpYY3cfW4yrQJdPfa289QBsjQKAfXqzzOzGH73DNw7bdV4ceta3DLUIL7ClQ5D3w5gLpn5To1byDAFzkV25tjuC-9vmigzpPrpE-5aSs4g4t3lbIkkcJOhvR7J8LbI3UpU/s320/terbang.gif'/></a>
</div>

Ganti alt image 'Kembali Ke Halaman Paling Atas' dengan kata-kata anda sendiri. Jika anda lebih memilih memakai gambar (image), upload gambar anda ke blogger kemudian gantikan alamat url image di atas dengan alamat url image anda. Jika hanya ingin menggunakan anchor link, pakai kode ini:

<div id='atas'>
<a href='#' title='Kembali Ke Halaman Paling Atas'>Paling Atas</a>
</div>

Jika ingin pakai keduanya, tulisan dan gambar pakai kode di bawah ini;

<div id='atas'>
<a href='#'><img alt='Kembali Ke Halaman Paling Atas' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht7v8OxyrrYBpYY3cfW4yrQJdPfa289QBsjQKAfXqzzOzGH73DNw7bdV4ceta3DLUIL7ClQ5D3w5gLpn5To1byDAFzkV25tjuC-9vmigzpPrpE-5aSs4g4t3lbIkkcJOhvR7J8LbI3UpU/s320/terbang.gif'/><br/>Paling Atas</a>
</div>

Selanjutnya copy dan pastekan kode di atas tepat di atas tag "</body>" ==> Terletak di bagian 'Edit HTML' hampir paling bawah. Selesai, Klik 'Save Template' (Simpan Template), lihat hasilnya.

Selengkapnya

Membuat Navigasi Menu Blogspot

Website atau blog rasanya kurang lengkap jika tidak ada navigasi menu, karena navigasi menu inilah yang menjadi penunjuk jalan bagi visitor untuk mengakses halaman pada sebuah webste / blog. Untuk membuat navigasi menu pada blogspot tidaklah begitu susah, ikuti cara pembuatannya berikut ini;

Login ke account blogger.
Navigasikan ke 'Layout' (tata letak) » Klik pada tab 'Edit HTML'.
Cari kode ini => "]]></b:skin>".
Copy dan pastekan kode di bawah ini di atas kode "]]></b:skin>" ;

#menuanda-wrapper {
width: 100%;
height: 27px;
background: #5bb3fd url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUG_foc8pVBbxuzV4214QkkWqIWKV8sbJc_uThP_VFxPYNHM7roGvl7qz32HyUx1CgQE3ro8ewF3QF2z1VbqJPMrlDwIDIBF0zvrcEJlHLixXU9GarBjKkbKKbqm0-m1Nb83SP4dx4zPA/s320/normal.gif') repeat-x top left;
border-top: 0px solid #669999;
padding-left: 0px;
margin-bottom: 9px;
overflow: hidden
}

#menuanda-wrapper h2 {
display: none
}

#menuanda, #menuanda ul {
padding: 0px;
margin: 0;
list-style: none;
font: normal 0.95em arial;
color:#ffffff;
}

#menuanda a {
display: block;
text-decoration: none;
border-right: 0px solid 669999;
border-left: 0px solid #d3e2e2;
color: #003366;
background: #000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUG_foc8pVBbxuzV4214QkkWqIWKV8sbJc_uThP_VFxPYNHM7roGvl7qz32HyUx1CgQE3ro8ewF3QF2z1VbqJPMrlDwIDIBF0zvrcEJlHLixXU9GarBjKkbKKbqm0-m1Nb83SP4dx4zPA/s320/normal.gif') repeat-x top left; 
padding-left: 9px;
padding-right:9px;
padding-top:6px;
padding-bottom: 7px
}

#menuanda a.depan {
padding: 0px;
border-left: 0px none;
width: 90px;
height: 27px;
background: #ffffff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUG_foc8pVBbxuzV4214QkkWqIWKV8sbJc_uThP_VFxPYNHM7roGvl7qz32HyUx1CgQE3ro8ewF3QF2z1VbqJPMrlDwIDIBF0zvrcEJlHLixXU9GarBjKkbKKbqm0-m1Nb83SP4dx4zPA/s320/normal.gif') repeat-x top left;
padding-left: 9px;
padding-right: 9px;
padding-top: 6px;
padding-bottom: 7px
}

#menuanda a.depan:hover {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqeOmJYJGciiLmDo42V9HJWKmV4k6aAdj-kVm9Y8spZu8f7KI643dUJVQhdSoolUoDAofDGQpPtE_q3R16mYgBrhq4hpdhYStl3oXtnbd7JKqPPA0Cjvyc36psT3f7G8gKWNxXXWVF2hY/s320/hover.gif') repeat-x top left;
padding-left: 9px;
padding-right: 9px;
padding-top: 6px;
padding-bottom: 7px
}

#menuanda a.depan em {
display: none;
}

#menuanda a.master {
font-weight: bold;
text-transform: capitalize;
}

#menuanda a.buntut {
padding: 0px;
border-left: 0px none;
border-right: 0px none;
width: 27px;
height:27px;
background: #000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH9l13HwbfZVw7OJsxM8bli2HipD1EiyF2r4bPVtHRSfmGJpiLMeJh4r6qhBDUPuEW4t4Wkl7FnNPwxMQ1ZpZYD12vSbQT8B3YZkYQMa-XMt3A-Mu8i6IQylb1-2VnO8LN6tR92lpj0z4/s320/back.gif') no-repeat;
}

#menuanda li {
float: left;
width: 9em;
}

#menuanda li.kanan {
float: right;
border-left: 0px none;
}

#menuanda li ul, #menuanda ul li {
width: 14em;
}

#menuanda ul li a {
color: #ffffff;
border-left: 0px none;
border-right: 0px none;
padding-left: 5px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px
}

#menuanda li ul {
position: absolute;
display: none;
background-color: #5bb3fd;
z-index: 200;
border-right: 1px solid #5bb3fd;
border-left: 1px solid #A8C4C4;
border-bottom: 1px solid #A8C4C4;
margin-left: -1px;
text-align: left;
}

#menuanda li:hover a, #menuanda a:focus, #menuanda a:active{
color: #5BB3FD;
background-color: #dde1e4;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJDZY2zVPT07oXB3nbDsnZvlH-WDiwCiJxbA9wk6qKTdkJkHOnIPkrAciAZBh2X8DnuG1y5VIO1uLj4Ow9xVa7RnNQo5XCdT-Ga99GsyMC6LphsZ1FXhYGRRJGdkikBGJHIvYKvomaPJM/s320/hover.gif');
background-repeat: repeat-x
}

#menuanda li:hover ul {
display: block;
}

#menuanda li:hover ul a {
color: #000000;
border-top: 1px solid #8A8484;
background-image: url('none');
}

#menuanda ul a:hover {
background-color: #ffffff!important;
color: #ff0000!important;
}

#menuanda li {
width: auto;
}

Beberapa point yang perlu anda modifikasi. Pertama tiga gambar backround navigasi menu untuk menggantikan background image di atas, masing-masing 'normal.gif', 'hover.gif', dan 'back.gif'. 'normal.gif' → background default sebelum ada kontak dengan mouse, 'hover.gif' → muncul ketika mouse di arahkan ke navigasi menu, 'back.gif' buatlah sama dengan 'normal.gif'. Gunakan software olah gambar seperti adobe photoshop atau sowtware semacamnya. Untuk gambar 'normal' dan 'hover' berukuran 1px x 27px, sedangkan 'back' 27px x 27px. Membuat gambar pada dimensi 1 x 27 px mungkin sedikit susah membuatnya, buat dahulu dimensi 27px x 27px waktu membuat gambar jika sudah selesai baru tentukan resize ukurannya menjadi 1px x 27px. Upload gambar ke blogger kemudian gantikan alamat url gambar di atas dengan url gambar yang baru saja anda upload.

#5BB3FD → Warna text hover pada menu
#dde1e4 → Warna background submenu
#000000 → Warna text normal submenu
#8A8484 → Warna garis pemisah antar submenu
#ffffff → Warna background hover submenu
#ff0000 → Warna text hover submenu

Membuat navigasi menu. Misal anda mempunyai navigasi menu antara lain terdiri atas;

Menu home
Menu posting dengan sembilan submenu posting
Menu lainnya ; menu-1 sampai dengan menu ke-6, maka kode html yang anda tuliskan akan terlihat seperti di bawah ;

<div id="menuanda-wrapper">
<ul id="menuanda">
<li><a class="master" href="http://bloganda.com/" title="Halaman Utama">Home</a></li>
<li><a class="master" href="#" title="Artikel">Posting</a>
<ul>
<li><a href="http://bloganda.com/" title="title Posting 1">Posting 1</a></li>
<li><a href="http://bloganda.com/" title="title Posting 2">Posting 2</a></li>
<li><a href="http://bloganda.com/" title="title Posting 3">Posting 3</a></li>
<li><a href="http://bloganda.com/" title="title Posting 4">Posting 4</a></li>
<li><a href="http://bloganda.com/" title="title Posting 5">Posting 5</a></li>
<li><a href="http://bloganda.com/" title="title Posting 6">Posting 6</a></li>
<li><a href="http://bloganda.com/" title="title Posting 7">Posting 7</a></li>
<li><a href="http://bloganda.com/" title="title Posting 8">Posting 8</a></li>
<li><a href="http://bloganda.com/" title="title Posting 9">Posting 9</a></li>
</ul>
</li>
<li><a class="master" href="http://bloganda.com/" title="title anda 1">tab 1</a></li>
<li><a class="master" href="http://bloganda.com/" title="title anda 2">tab 2</a></li>
<li><a class="master" href="http://bloganda.com/" title="title anda 3">tab 3</a></li>
<li><a class="master" href="http://bloganda.com/" title="title anda 4">tab 4</a></li>
<li><a class="master" href="http://bloganda.com/" title="title anda 5">tab 5</a></li>
<li><a class="master" href="http://bloganda.com/" title="title anda 6">tab 6</a></li>
</ul>
</div>

Modifikasi nama menu, alamat url, dan title sesuai minat anda. Untuk mengaktifkan menu ini, pada 'Dashboard' blogger pilih "Layout" (Tata Letak) » "Page Elemen" (Elemen halaman) » "Add Gadget" (Tambah Gadget) » pilih "HTML/JavaScript". Copy dan pastekan kode di atas, simpan dan sesuaikan penempatannya.

Contoh di atas sub menunya hanya sampai dengan level 1, kalau mau lebih sampai 3 level misalnya, pakai cara ini (Style menunya horizontal):

ul#menuku-horizontal {
margin: 0;
padding: 0;
list-style: none;
position: relative;
}

ul#menuku-horizontal ul {
width: 160px; /* Lebar Sub Menu */
margin: 0;
list-style: none;
display: none;
position: absolute;
top: 100%;
left: 0;
}

ul#menuku-horizontal ul ul,ul#menuku-horizontal ul ul ul {
top: 0;
left: 100%;
}

ul#menuku-horizontal li {
float: left;
display: inline;
position: relative;
}

ul#menuku-horizontal ul li {
width: 100%;
display: block;
}

/* Menu Utama */
ul#menuku-horizontal a {
border-top: 1px solid #353535;
border-right: 1px solid #353535;
border-left: 1px solid #353535;
border-bottom: 1px solid #353535;
padding: 6px;
float: left;
display: block;
background: #4c4c4c;
color: #ffffff;
font: bold 11px Arial, sans-serif;
text-decoration: none;
height: 1%;
}

/* Hover menu utama */
ul#menuku-horizontal a:hover,ul#menuku-horizontal li:hover a,ul#menuku-horizontal li.iehover a {
background: #C8C3C3;
color: #000000;
}

/* Sub Menu Level 1 */
ul#menuku-horizontal li:hover li a,ul#menuku-horizontal li.iehover li a {
float: none;
background: #c8c3c3;
}

/* Sub Menu Level 1 Hover */
ul#menuku-horizontal li:hover li a:hover,ul#menuku-horizontal li:hover li:hover a,ul#menuku-horizontal li.iehover li a:hover,ul#menuku-horizontal li.iehover li.iehover a {
background: #c8c3c3;
}

/* Sub Menu Level 2 */
ul#menuku-horizontal li:hover li:hover li a,ul#menuku-horizontal li.iehover li.iehover li a {
background: #999;
}

/* Sub Menu Level 2 Hover */
ul#menuku-horizontal li:hover li:hover li a:hover,ul#menuku-horizontal li:hover li:hover li:hover a,ul#menuku-horizontal li.iehover li.iehover li a:hover,ul#menuku-horizontal li.iehover li.iehover li.iehover a {
background: #999;
}

/* Sub Menu Level 3 */
ul#menuku-horizontal li:hover li:hover li:hover li a,ul#menuku-horizontal li.iehover li.iehover li.iehover li a {
background: #666;
}

/* Sub Menu Level 3 Hover */
ul#menuku-horizontal li:hover li:hover li:hover li a:hover,ul#menuku-horizontal li.iehover li.iehover li.iehover li a:hover {
background: #333;
}

/* Hover Attribut - Jangan Di Hapus */
ul#menuku-horizontal li:hover ul ul,ul#menuku-horizontal li:hover ul ul ul,ul#menuku-horizontal li.iehover ul ul,ul#menuku-horizontal li.iehover ul ul ul {
display: none;
}

ul#menuku-horizontal li:hover ul,ul#menuku-horizontal ul li:hover ul,ul#menuku-horizontal ul ul li:hover ul,ul#menuku-horizontal li.iehover ul,ul#menuku-horizontal ul li.iehover ul,ul#menuku-horizontal ul ul li.iehover ul {
display: block;
}

'border-top sampai dengan border bottom' → '1px solid' berarti ukuran ketebalan garis 1 pixel dengan tipe solid, '#353535' kode untuk warna garis.
Di bawahnya 'background:#4c4c4c' dan 'color:#ffffff' masing-masing merupakan penentuan warna untuk background menu utama dan warna teks menu utama (saya pakai warna putih/#ffffff).

Di bawahnya lagi '/* Hover menu utama */' pada bagian 'background dan color' masing-masing menentukan warna hover baik background maupun teks pada menu utama.

Dan yang terakhir '/* Sub Menu Level 1 */' menentukan background warna pada submenu level 1 dan '/* Sub Menu Level 1 Hover */' menentukan hover warna background pada sub menu level 1. Level 2 sampai dan level 3 pengertiannya sama dengan level 1.

HTML Code:

<ul id="menuku-horizontal">
<li><a href="http://tutorial7.blogspot.com/" title="Halaman Utama">Home</a></li>
<li><a href="#" title="Semua Posting">Posts</a>
<ul>
<li><a href="http://tutorial7.blogspot.com/search/label/Bisnis%20Online%20Dunia%20Maya" title="Cari Penghasilan Tambahan Dari Internet">Duit Online</a></li>
<li><a href="http://tutorial7.blogspot.com/search/label/Blogger%20Dummies" title="Blogger Untuk pemula">Blogger For Dummies</a></li>
<li><a href="#" title="Pemrograman Web">Web Programming >></a>
<ul>
<li><a href="http://tutorial7.blogspot.com/search/label/Cascading%20Style%20Sheets%20%28CSS%29" title="Cascading Style Sheets">CSS</a></li>
<li><a href="http://tutorial7.blogspot.com/search/label/HTML" title="Hyper Text Markup Language (HTML)">HTML</a></li>
<li><a href="http://tutorial7.blogspot.com/search/label/PHP%20Hypertext%20Preprocessor%20%28PHP%29" title="PHP Hypertext Preprocessor">PHP</a></li>
</ul>
</li>
<li><a href="http://tutorial7.blogspot.com/search/label/Internet" title="Internet Tips">Internet</a></li>
<li><a href="http://tutorial7.blogspot.com/search/label/Kabar%20dan%20Tips%20Lainnya" title="Kabar dan tips lainnya">Miscellaneous</a></li>
<li><a href="#" title="Microsoft Office">Microsoft Office >></a>
<ul>
<li><a href="http://tutorial7.blogspot.com/search/label/MS%20Excel%202007" title="Microsoft Excel 2007 Tips">Excel 2007</a></li>
<li><a href="http://tutorial7.blogspot.com/search/label/PowerPoint%202007" title="PowerPoint 2007 Tips">PowerPoint 2007</a></li>
<li><a href="http://tutorial7.blogspot.com/search/label/MS%20Word%202007" title="Word 2007 Tips">MS Word 2007</a></li>
</ul>
</li>
<li><a href="http://tutorial7.blogspot.com/search/label/Search%20Engine%20Optimization%20%28SEO%29" title="Search Engine Optimization">SEO</a></li>
<li><a href="http://tutorial7.blogspot.com/search/label/Windows" title="Windows Tips dan Trik">Windows</a></li>
</ul>
</li>
<li><a href="http://tutorial7.blogspot.com/feeds/posts/default" title="Posts RSS">Posts RSS</a></li>
<li><a href="http://tutorial7.blogspot.com/feeds/comments/default" title="Comments RSS">Comments RSS</a></li>
<li><a href="http://www.blogger.com/profile/05899674811945754032" title="Tentang Saya">About Me</a></li>
<li><a href="http://tutorial7.blogspot.com/2009/04/kontak.html" title="Kirim Email Ke Saya">Email Me</a></li>
<li><a href="#" title="Link Partners">Link Partners</a>
<ul>
<li><a href="http://tutorial7.blogspot.com/2009/04/partner-link-indonesia.html" title="Partner Links Indonesia">Partner Links Indonesia</a></li>
<li><a href="http://tutorial7.blogspot.com/2009/04/partner-link.html">Partner Links</a></li>
</ul>
</li>
<li><a href="http://tutorial7.blogspot.com/2009/04/sitemap.html" title="Peta Blog">Sitemap</a></li>
<li><a href="#">Owner Edit</a>
<ul>
<li><a href="http://www.blogger.com/post-create.g?blogID=780351826145379977">Brand New Post</a></li>
<li><a href="http://www.blogger.com/post-edit.g?blogID=780351826145379977&postID=5759422519225049811">Link Edit</a></li>
<li><a href="http://www.blogger.com/posts.g?blogID=780351826145379977">Posts View</a></li>
<li><a href="http://www.blogger.com/rearrange?blogID=780351826145379977">Widget</a></li>
<li><a href="http://www.blogger.com/html?blogID=780351826145379977">HTML</a></li>
<li><a href="http://www.blogger.com/post-edit.g?blogID=780351826145379977&postID=8945225034979464711">Map</a></li>
<li><a href="http://www.blogger.com/post-edit.g?blogID=780351826145379977&postID=3728186818005253981">Upload</a></li>
<li><a href="http://www.blogger.com/blog-options-basic.g?blogID=780351826145379977">Option</a></li>
</ul>
</li>
</ul>

navigasi menu dengan style vertikal. Pakai kode di bawah ini:

ul#menuku-vertikal,ul#menuku-vertikal li,ul#menuku-vertikal ul {
width: 160px; /* Menu Width */
margin: 0;
list-style: none;
}

ul#menuku-vertikal li {
float: left;
position: relative;
width: 100%;
}

ul#menuku-vertikal li.iehover {
z-index: 1000; /* IE z-index bugfix */
}

ul#menuku-vertikal ul {
display: none;
position: absolute;
top: 0;
left: 100%;
z-index: 9999;
}

/* Menu Utama */
ul#menuku-vertikal a {
border-top: 1px solid #FFF;
border-right: 1px solid #FFF;
padding: 6px;
display: block;
background: #DDD;
color: #666;
font: bold 11px Arial, sans-serif;
text-decoration: none;
height: 1%;
}

/* Hover menu utama */
ul#menuku-vertikal a:hover,ul#menuku-vertikal li:hover a,ul#menuku-vertikal li.iehover a {
background: #BBB;
color: #FFF;
}

/* Sub Menu Level 1 */
ul#menuku-vertikal li:hover li a,ul#menuku-vertikal li.iehover li a {
float: none;
background: #BBB;
}

/* Sub Menu Level 1 Hover */
ul#menuku-vertikal li:hover li a:hover,ul#menuku-vertikal li:hover li:hover a,ul#menuku-vertikal li.iehover li a:hover,ul#menuku-vertikal li.iehover li.iehover a {
background: #999;
}

/* Sub Menu Level 2 */
ul#menuku-vertikal li:hover li:hover li a,ul#menuku-vertikal li.iehover li.iehover li a {
background: #999;
}

/* Sub Menu Level 2 Hover */
ul#menuku-vertikal li:hover li:hover li a:hover,ul#menuku-vertikal li:hover li:hover li:hover a,ul#menuku-vertikal li.iehover li.iehover li a:hover,ul#menuku-vertikal li.iehover li.iehover li.iehover a {
background: #666;
}

/* Sub Menu Level 3 */
ul#menuku-vertikal li:hover li:hover li:hover li a,ul#menuku-vertikal li.iehover li.iehover li.iehover li a {
background: #666;
}

/* Sub Menu Level 3 Hover */
ul#menuku-vertikal li:hover li:hover li:hover li a:hover,ul#menuku-vertikal li.iehover li.iehover li.iehover li a:hover {
background: #333;
}

/* Hover Attribut - Jangan Di Hapus */
ul#menuku-vertikal li:hover ul ul,ul#menuku-vertikal li:hover ul ul ul,ul#menuku-vertikal li.iehover ul ul,ul#menuku-vertikal li.iehover ul ul ul {
display: none;
}

ul#menuku-vertikal li:hover ul,ul#menuku-vertikal ul li:hover ul,ul#menuku-vertikal ul ul li:hover ul,ul#menuku-vertikal li.iehover ul,ul#menuku-vertikal ul li.iehover ul,ul#menuku-vertikal ul ul li.iehover ul {
display: block;
}

Jika ingin menggunakan menu vertikal ganti kode widget <ul id="menuku-horizontal"> menjadi <ul id="menuku-vertikal">

Selesai, semoga bermanfaat...
:D

Selengkapnya

Membuat Marquee Text

Jika pada artikel sebelumnya saya menulis tentang bagaimana "Membuat Blinking Text (Text Berkedip) di Blog," kali ini tentang cara lain yang dapat digunakan untuk membuat text lebih kelihatan menarik dengan membuat 'Text Berjalan" (Marquee Text). Ada beberapa macam model marque text, berikut beberapa contoh diantaranya;

Marquee text biasa. Contoh;

<marquee>http://www.linggihnote.blogspot.com</marquee>

Ganti 'http://www.linggihnote.blogspot.com' dengan text anda, maka hasilnya akan seperti ini;

http://www.linggihnote.blogspot.com

Jika ingin membuat text tebal, cetak miring, dan dengan garis bawah text tuliskan kodenya seperti ini;

<marquee>
<B><U><I>http://www.linggihnote.blogspot.com</I></U></B>
</marquee>

Hasilnya akan seperti ini;

http://www.linggihnote.blogspot.com

Jika masih kurang puas, ingin merubah arah text ataupun ingin menambahkan warna bachground text ikuti cara berikut ini;

Untuk merubah arah text, tambahkan kode berikut ini => direction="tentukan arah text pilihan anda". Ganti text "tentukan arah text pilihan anda" dengan 'left, right, up, down, atau alternate'. 'left' mengarahkan text ke kiri, 'right' ke kanan, 'up' ke atas', 'down' ke bawah, 'alternate' bolak balik kayak orang bingung ha..ha..! Atau jika ingin efek geraknya hanya satu kali setelah itu berhenti, tambahkan kode ini ==> behavior="slide" <==. Lihat kode dan contohnya di bawah. Saya akan coba membuat marquee text dengan ketentuan text mengarah ke kanan, background warna kuning, teks warna merah, tetapi efek teks miring saya hilangkan;

<span style="color:#ff0000;">
<marquee bgcolor="#ffff00" direction="right">
<B><U>http://www.linggihnote.blogspot.com</U></B>
</marquee>
</span>

'bgcolor' (warna background) saya pilih warna kuning, bisa anda tuliskan dengan kode warna seperti contoh di atas '#ffff00', atau cukup dengan menuliskan 'yellow', begitu juga dengan warna teksnya, hasilnya sama saja. Text yang muncul jadinya seperti ini;