Cara Membuat Blogroll Marque dalam Tabel dan Image

langsung aja kita praktek ya...

abis @meykurdt bingung nih mu pake kata pembukaan'a apa...

dalam pemasangan kode'a nanti yang mesti kita persiabkan adalah:

kebalikan dari judul'a,

1. Gambar/image'a dulu,

2. Membuat tabel,

3. Script untuk membuat teks berjalan,

4. trakhir baru Blogroll yang akan ditampilkan dalam tabel dan image tersebut.


ya...baiklah kita akan bahas one/one,

untuk gambar, bebas, tinggal pilih mu gambar apa aja...

masalah ukuran ntar aja...

klo udah dapat gambar'a, upload dulu untuk mendapatkan

alamat URL dari gambar tersebut yang nantinya akan kita selipkan dalam kode'a,

masih bingung mau upload'a dimana....? klik aja disini...untuk

upload di Photobucket.

bagi yang belum punya account disana daftar dulu disini, bagi yang udah punya

silahkan Sing In dan kemudian Upload, dan jangan lupa untuk

menyimpan alamat URL'a,

contoh untuk image @meykurdt seperti ini :

http://i371.photobucket.com/albums/oo160/ameykurt/blogrollameykurdt.jpg

na....sekarang perhatiklan kode ini:

#gambar {
background:url('http://i371.photobucket.com/albums/oo160/ameykurt/blogrollameykurdt.jpg');
height:148px; /* tinggi gambar */
width:198px; /* lebar gambar */
}

ini adalah script dari gambar tersebut yang akan kita selipkan

pada CSS template, yang perlu di perhatikan disini adalah alamat gambar

pada background:url (harus diganti dengan URL gambar masing²,dan jangan lupa

pake tanda 'petik')

lagh...sekarang dimana kode tersebut akan kita selipkan...?

::* sing in di Blogger

::* Klik Sub Menu Edit HTML pada Menu Tata Letak

::* Klik DownLoad Template Lengkap untuk backup data template

::* Beri centang pada kota kecil disamping tulisan Expand Template Widget

::* sekarang cari kode ini :

<style> (untuk yang memakai template klasik)

dan

]]></b:skin> (untuk yang memakai template baru)

kalo udah ketemu kode'a, copy dan paste script gambar tadi di atas kode ini,

untuk yang pake template baru kira² seperti ini:

#gambar {
background:url('http://i371.photobucket.com/albums/oo160/ameykurt/blogrollameykurdt.jpg');
height:148px;
width:198px;
}

]]></b:skin>

nah...selesai langkah pertama....

berikutnya kita bikin script/kode untuk membuat tabel dan marque,

perhatikan kode di bawah:

<table border="2" /* ini adalah bentuk tabel dengan boder/garis'a sebesar 2 pixel */

width="200" /* lebar tabel 200 pixel */

height="150" /* tinggi tabel */

(untuk ukuran lebar dan tinggi tabel harus diserasikan dengan lebar dan tinggi gambar tadi)

cellpadding="1"> /* ini semacam garis juga, sebagai penyela */

<tr>
<td align="center">

<div id="gambar"> /* ini adalah script untuk memanggil dari kode gambar yang sudah kita selipkan pada CSS template tadi */

<marquee /* ini adalah bentuk dari kode marque */

onmouseover="this.stop()"
onmouseout="this.start()"
scrollamount="2" /* ini adalah tempo, klo mau lebih cepat bisa di ganti dengan 3,4,5 dan seterusnya */

direction="up"
width="100%" /* lebar kotak untuk marque */
height="200" > /* tinggi */

(disini adalah nama dan alamat dari blogroll yang akan dipasang)


/* yang di bawah ini ada script penutup dari script diatas*/

</marquee>

</div>
</td>

</tr>

</table>

mudah² ngerti ya..,

untuk blogroll, kita tinggal pilih nama dan alamat dari blog

yang akan kita tampilkan.

untuk contoh blogroll @meykurdt seperti ini :

<table border="2" width="140" height="204" cellpadding="1">

<tr>
<td align="center">
<div id="gambar">
<marquee onmouseover="this.stop()"
onmouseout="this.start()"
scrollamount="2"
direction="up"
width="100%"
height="200" >

<br/><a href="http://ameykurdt.blogspot.com" target="_blank"><b>@meykurdt</b></a>
<br/><br/>
<br/><a href="http://kolom-tutorial.blogspot.com" target="_blank"><b>Kolom-Tutorial</b></a>
<br/><br/>
<br/><a href="http://fatihsyuhud.com" target="_blank"><b><i>Blog Indonesia</i></b></a>
<br/><br/>
<br/><a href="http://afatih.wordpress.com" target="_blank"><b>Blog Tutorial</b></a>
<br/><br/>
<a href="http://rohman-freeblogtemplate.blogspot.com" target="_blank"><b><i>Free Blog Template</i></b></a>
<br/><br/>
<a href="http://kolom-authorized.blogspot.com" target="_blank"><b>Authorize service</b></a>
<br/><br/>

</marquee>

</div>
</td>

</tr>

</table>

nah...

tinggal ganti nama dan URLnya aja,

untuk menampilkannya di blog, kita tinggal menambahkan sebuah elemen/gadget baru

di sub Menu elemen halaman pada Menu Tata Letak,

lalu klik Tambah Elemen, dan tambahkan elemen HTML/javascrip.

copy dan paste kode di atas pada kotak yang tersedia,

masalah judul, boleh dikasih judul, atau gak pun gak papa,,

selesai....

"Selamat Mencoba sambil belajar"