Kemarin ada seorang sobat yang bertanya kepada saya, 'bagaimana cara membuat widget related posts seperti yang saya gunakan pada blog ini'. Sebenarnya cara membuat widget related posts sudah pernah saya posting di blog ini, hanya saja memang versi related posts yang saya gunakan sekarang ini berbeda dengan versi related posts yang sudah pernah posting di blog ini. Oleh karena itu, pada postingan ini saya akan menjelaskan cara membuat related posts seperti yang saya gunakan pada blog ini atau yang saya beri nama related posts v2.

Mungkin anda akan bertanya apa perbedaan antara related posts v1 dan v2?
Kalau pada related posts v1, related posts akan ditampilkan bersamaan dengan judul labelnya dan dikelompokan berdasarkan labelnya masing-masing. Sebagai contoh, perhatikan screenshot dibawah ini.


Sedangkan versi 2, related posts atau artikel yang berhubungan hanya menampilkan judul posting saja (tanpa judul label) dan semua artikel yang berhubungan digabung menjadi satu sehingga mirip dengan widget related posts milik Wordpress. Contoh tampilannya seperti ini:


Bagi anda yang ingin memasang related posts v2 atau related posts ala wordpress silahkan ikuti langkah-langkah dibawah ini:

1. Pada halaman dashboard blogger, buka menu Design -> Edit HTML

2. Beri centang pada "Expand Widget Templates"

3. Cari kode ]]></b:skin>

4. Letakkan kode css berikut diatasnya

#related-posts { float : left; width : 250px; margin-left : 5px; font-size: 12px; line-height : 1.8em; margin-bottom:10px; } #related-posts a{ color:#4b4b4b; }
#related-posts a:hover{ color:#ca1717; }
#related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { margin : 10px 5px 5px 20px; padding : 0; }

5. Selanjutnya cari </head>

6. Letakkan kode javascript berikut diatasnya

<script src='http://hermanblog.googlecode.com/files/Related-posts.js' type='text/javascript'/>

7. Kemudian cari <p><data:post.body/></p> atau <data:post.body/>

8. Jika ada dua kode yang sama, pilih yang pertama

9. Letakkan kode berikut dibawahnya

<div id='related-posts'>
<div style='font-size:18px'><b>Related Posts:</b></div>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if>
</b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>

Keterangan:
Teks yang dicetak tebal adalah judul widget dan angka 5 adalah jumlah postingan yang muncul dalam related posts. Silahkan ganti sesuai keinginan

10. Jika sudah, simpan template anda dan lihat hasilnya. Kalau berhasil jangan lupa pencet tombol like dibawah

Jika anda mencari informasi tentang tips meningkatkan pagerank blog biasanya salah satu tips yang disarankan adalah berkomentar di blog dofollow. Memang benar berkomentar di blog dofollow bisa meningkatkan google pagerank karena blog dofollow adalah blog yang telah menghilangkan atau melepaskan atribut nofollow dari form komentarnya sehingga jika ada pemilik blog yang meninggalkan komentar di blog tersebut, maka ia akan mendapat backlink dari empunya blog dengan catatan si pemilik blog harus berkomentar sebagai name/URL atau mencantumkan link blognya disana.

Bagi anda yang belum tahu apa itu Nofollow? Nofollow adalah atribut HTML yang berfungsi untuk memberi perintah kepada search engine untuk tidak menelusuri suatu link pada halaman blog sehingga google search engine tidak akan menganggap link tersebut sebagai backlink. Cara ini dibuat pertama kali oleh Matt cutts dan Jason Shellen pada tahun 2005 untuk mencegah pemilik blog melakukan spam dengan berkommentar sebanyak-banyaknya di blog ber PR tinggi.

Contoh kode link nofollow:

<a href="http://www.contoh.com/" rel="nofollow">bogger tips n tutorial</a>

Secara default, blog blogspot menggunakan sistem nofollow pada form komentarnya. Namun tidak sedikit pula blogger yang menerapkan sistem dofollow dalam comment formnya.

Untuk menemukan blog-blog mana saja yang menggunakan sistem dofollow, anda bisa googling dengan kata kunci 'dofollow blog list' atau 'daftar blog dofollow'. Ada banyak situs yang membuat daftar blog dofollow di situsnya.

Nah sekarang pertanyaannya adalah apakah blog tersebut masih menganut sistem dofollow? Sebab tidak sedikit blog yang awalnya memang bersifat dofollow tapi sekarang sudah tidak lagi. Untuk mengetahuinya, gunakan cara berikut:

Browser Firefox
Ada 2 cara yang bisa digunakan:

1. Melihat properties linknya
Ini adalah cara klasik yang sering digunakan blogger atau webmaster untuk mengecek status link. Caranya, klik kanan pada link yang berada pada kolom komentar lalu pilih Properties jika muncul tulisan relation: nofollow berarti blog tersebut bersifat nofollow.



2. Menggunakan addons Firefox
Ada banyak addons Firefox yang mampu mendeteksi link nofollow, salah satunya adalah SearchStatus. Dengan addons ini anda bisa melihat apakah suatu link dofollow atau nofollow dalam waktu yang bersamaan. sehingga lebih cepat. Anda bisa instal addonsnya disini. Setelah instal, aktifkan fitur pendeteksi nofollow dengan cara klik kanan pada logo SearchStatus yang terletak dipojok kanan bawah layar lalu pilih Highlight Nofollow Links. (Jika anda ingin menonaktifkan fitur ini cukup hilangkan centang pada 'Highlight Nofollow Links').


Jika link dihighlight merah berarti blog tersebut bersifat nofollow.



Browser Google Chrome
Instal Chrome SEO disini. Setelah itu, aktifkan fitur pendeteksi nofollow dengan cara klik logo Chrome SEO yang terletak di pojok kanan atas. kemudian tunggu beberapa saat hingga menu Chrome SEO muncul selanjutnya klik link Show Nofollow.



Browser IE
Untuk pengguna IE, caranya cukup mudah anda tinggal copas kode dibawah ini ke address bar pada halaman dimana anda ingin melakukan pengecekan.

javascript: var anchors;anchors = document.getElementsByTagName("a");var anchorIndex;for(anchorIndex = 0;anchorIndex < anchors.length;anchorIndex++) { if(anchors[anchorIndex].getAttribute("rel") && anchors[anchorIndex].getAttribute("rel")=="nofollow") anchors[anchorIndex].style.backgroundColor="red";} void(0);

Jika blog tersebut bersifat nofollow maka link akan dihighlight merah seperti gambar berikut.



Browser Safari
Caranya hampir sama dengan browser IE yaitu tinggal copas kode ke address bar pada halaman dimana anda ingin melakukan pengecekan.

javascript:var%20a=document.getElementsByTagName('a');for(var%20z=0;z%3Ca.length;%20z++){if(a[z].rel==’nofollow’){a[z].style.border=’1px%20solid%20%23F00';}}

Semoga bermanfaat..!

Tidak terasa sudah satu minggu saya tidak update blog ini. Hal ini dikarenakan saya sedang sibuk menata ulang konten di blog ini dan menambah beberapa tool ke dalamnya. Salah satunya adalah navigasi Breadcrumb.

Breadcrumb merupakan salah satu plugin milik Wordpress yang berfungsi untuk memudahkan pembaca dalam menelusuri halaman blog. Jadi ibarat peta atau sitemap dalam blog.

Plugin ini biasanya diletakkan diatas halaman posting. Contoh tampilannya seperti ini:

Selain dapat memudahkan pembaca dalam mengetahui lokasi halaman yang sedang ditelusuri, plugin ini juga dapat mengoptimasi halaman blog di search engine (SEO). Bahkan dianjurkan langsung oleh Google lho. Tidak percaya? Berikut adalah kutipan yang saya ambil dari ebook 'Google Search Engine Optimization Starter Guide'.


Ingin mengetahui lebih banyak teknik-teknik SEO dalam ebook Google Search Engine Optimization Starter Guide? Silahkan baca disini.

Ok saya rasa cukup penjelasannya, untuk pengguna wordpress anda bisa download plugin Breadcrumb disini. Sedangkan untuk pengguna blogger ikuti langkah-langkah berikut untuk memasang navigasi breadcrumb:

1. Buka Blogger. Masuk ke menu Design -> Edit HTML

2. Beri centang pada 'Expand Widget Templates'.

3. Setelah itu, cari kode <b:if cond='data:post.title'>

4. Letakkan kode berikut dibawah <b:if cond='data:post.title'>

<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumb'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>

5. Selanjutnya cari kode ]]></b:skin>

6. Letakkan kode css berikut diatasnya

.breadcrumb {
padding:5px 5px 5px 0px;
margin: 0px 0px 10px 0px;
font-size:90%;
line-height: 1.2em;
border-bottom:3px double #e6e4e3;
}

7. Jika sudah simpan template anda dan lihat hasilnya.

Semoga bermanfaat :)

Setelah saya memposting tentang cara membuat kotak alert message. Ternyata ada seorang sobat yang bertanya kesaya bagaimana cara membuat kotak alert message yang ada konfirmasinya. mungkin yang dimaksud adalah seperti yang ini kali ya


Hmm,, kayaknya nggak salah lagi deh . Setelah jelajah kesana kemari, buka sana sini. Akhirnya ketemu juga tipsnya. Ok deh tanpa basa-basi, mari kita mulai.

1. Seperti biasa, login ke blogger. Lalu masuk ke menu Design -> Edit HTML

2. Letakkan kode berikut ini dibawah <head> atau tepatnya diantara <head> dan <b:skin>

<script type='text/javascript'>
if (confirm(&quot;Terima kasih telah mengunjungi blog ini. Klik OK untuk melanjutkannya&quot;)) {
window.location = &quot;http://mrsulblog.blogspot.com/&quot;;
}
else {
window.location = &quot;http://google.com/&quot;;
}
</script>

Keterangan:
Tulisan yang dicetak tebal adalah teks yang muncul dalam kotak alert. Silahkan ganti dengan teks yang anda inginkan
Tulisan berwarna merah adalah alamat web yang akan terbuka jika pengunjung klik OK
Tulisan berwarna hijau adalah alamat yang akan terbuka jika pengunjung klik Cancel atau Close

3. Kalau sudah, klik Save Template dan lihat hasilnya


Selain kotak alert yang sudah dibawah diatas masih ada 1 jenis lagi yaitu kotak alert dengan prompt field yang contohnya seperti dibawah ini.



Untuk membuat kotak alert ini caranya sama dengan diatas. Bedanya hanya pada scriptnya. Agar lebih jelas silahkan perhatikan cara dibawah ini.

1. Login ke blogger. Lalu buka menu Design -> Edit HTML

2. Masukkan script berikut dibawah kode <head>

<script type='text/javascript'>
var name = prompt(&quot;Masukkan nama anda disini&quot;, &quot;Nama&quot;);
alert(&quot;Welcome to my blog&quot;)
</script>

Perhatian:
Jika anda sudah pernah memasang script kotak alert maka dihapus dulu scriptnya sebelum memasang script ini.

Teks yang dicetak tebal merupakan pesan yang muncul dalam kotak alert
Teks yang berwarna merah merupakan teks yang muncul dalam kotak jawaban.
Teks yang berwarna hijau merupakan pesan yang muncul setelah pengunjung klik OK. Silahkan ganti sesuai keinginan.

3. Kalau sudah, klik Save Template.

4. Selesai. Silahkan liat hasilnya.

Postingan ini saya buat untuk menjawab pertanyaan dari seorang rekan blogger yang menanyakan kepada saya melalui email. Beliau bertanya kesaya, "mas, bagaimana cara membuat kotak blogger tutorial seperti di blog mas?" Hm.. Mungkin yang dimaksud adalah yang ini kali ya :)



Ok sebenarnya cukup mudah untuk membuat daftar isi seperti diatas. Bagi anda yang sudah lama ngeblog pasti sudah tahu cara membuatnya hanya saja mungkin caranya yang berbeda.

Nah berikut saya akan memberikan cara membuat kotak daftar isi dengan cara saya sendiri. Silahkan diikuti bagi yang ingin mencobanya.

1. Login ke blogger. Buka menu Design -> Page Elements
2. Klik Add a Gadget -> HTML/Javascript. Masukkan kode dibawah ini kedalam kotak

<style>
.list {
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px;
}
</style>

<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:380px; height:180px; background-color: #ffffff; border:1px solid #ffffff;">

<div class="list">
1. <a href="http://mrsulblog.blogspot.com/2010/12/apa-itu-blog.html">Apa itu blog</a></div>

<div class="list">
2. <a href="http://mrsulblog.blogspot.com/2010/12/cara-membuat-blog-di-blogger.html">Panduan membuat blog di blogger</a></div>

</div>

Keterangan:
380px merupakan lebar kotak
180px merupakan tinggi kotak
#ffffff pada background-color merupakan warna background
#ffffff pada border merupakan warna garis pinggir. Silahkan ganti sesuai dengan template anda.

Ingat:
Ganti tulisan yang berwarna merah dengan alamat postingan anda dan ganti tulisan berwarna merah yg dicetak tebal dengan judul postingan anda. Jika anda ingin menambah postingan baru maka copy kode yang berkedip lalu letakkan diatas kode </div>

Jangan lupa untuk mengganti angkanya dengan angka 3 dan begitu seterusnya jika anda ingin menambah postingan baru lagi.

3. Kalau sudah klik Save Template. Selesai.

Jika anda ingin menggunakan icon gambar sebagai pengganti angka maka ganti kode ini

<style>
.list {
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px;
}
</style>

Dengan kode berikut

<style>
.list {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFkJAjtj4mbqS8VwpaPStAy_Bxkq-GoFjfYSPjsWeI2PAF0ioOBAStWSS5bPY9KP2_bZh8LT1NzBhMcr0W6W7DmSa3KMaBJ4kt3V5KGNRkmCoSX7x4kES06Ra0u8mEAh66J1RcELENR56I/") no-repeat left center;
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px 0px 0px 20px;
}
</style>

Ganti tulisan yang berwarna merah dengan alamat icon gambar anda dan hapus angka pada setiap judul postingan.

Selamat mencoba. Semoga berhasil

Untuk template standar blogger, ketika anda mengklik pada salah satu postingan anda biasanya yang muncul pada menu bar browser adalah judul blog anda yang kemudian diikuti dengan judul posting seperti contoh dibawah ini.




Dan pada halaman index search engine yang muncul adalah seperti ini.






Cara ini kurang bagus untuk SEO karena judul posting anda akan tertutup oleh judul blog apalagi bagi yang memberi judul blognya panjang.

Nah untuk mengatasi masalah tersebut kita bisa mengakalinya dengan menukar posisinya yaitu dari judul blog - judul posting menjadi judul posting - judul blog. Sehingga hasilnya menjadi seperti ini

Pada menu bar browser

Pada halaman index search engine






Ok uda jelaskan? Nah bagi anda yang tertarik. Silahkan ikuti langkah-langkah dibawah ini.

1. Login ke blogger. Buka menu Edit HTML

2. Cari kode <title><data:blog.pageTitle/></title>

3. Ganti kode tersebut dengan kode dibawah ini

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/><title><data:blog.pageTitle/></title>
</b:if>

4. Kalau sudah klik Save Template.

5. Selesai. Sekarang coba anda klik pada salah satu postingan anda. Apakah hasilnya sesuai dengan yang anda harapkan? I Hope So :)

Selamat mencoba. Semoga berhasil...

Meta tag adalah salah satu teknik yang sering digunakan oleh webmaster untuk mengoptimalkan blog atau websitenya pada search engine atau yang sering disebut dengan Search Engine Optimization (SEO).

Nah kemarin saya sudah sempat membahas mengenai meta tag untuk keyword dan deskripsi. Kali ini saya akan mencoba membahas tentang meta tag untuk Sitemap.

Sitemap itu hampir sama dengan meta tag keyword dan deskripsi dimana kedua-duanya berfungsi untuk mempermudah search engine dalam menelusuri dan membaca isi dari web kita. Bedanya adalah dengan menambahkan sitemap search engine pada blog kita maka jika ada perubahan/update pada web kita, search engine akan segera tahu dan segera mengindex halaman kita pada search engine.

Berikut saya akan menjelaskan cara menambahkan Google sitemap dan Yahoo sitemap pada blog karena kedua search engine inilah yang paling banyak digunakan oleh pengguna internet saat ini.

Cara menambah Google sitemap pada blog

1. Login ke akun gmail anda lalu kunjungi http://google.com/webmasters/tools.

2. Setelah itu masukkan alamat blog anda pada kotak "Click here to add site". Contohnya: http://www.mrsulblog.blogspot.com. Lalu klik Add site

3. Kemudian akan muncul pesan "Your site has been added to your account.."

4. Klik Verify your site


5. Klik menu dropdown lalu pilih add a meta tag


6. Copy kode yang ada pada kotak lalu letakkan seperti contoh yang telah diberikan


7. Kalau masih bingung, klik menu Edit HTML blogger

8. Letakkan kodenya diatas <title><data:blog.pageTitle/></title>

9. Jika sudah simpan template anda lalu balik lagi ke Google Webmaster Tool

10. Klik Verify.

11. Jika berhasil maka akan muncul pesan "You've successfully verified .."


Cara menambahkan Yahoo sitemap pada blog

Untuk Yahoo sitemap caranya hampir sama dengan cara menambahkan Google sitemap seperti diatas. Berikut langkahnya:

1. Login ke yahoo mail anda lalu kunjungi http://siteexplorer.search.yahoo.com/

2. Masukkan alamat blog anda lalu klik Add my site

3. klik By adding a META tag to my homepage

4. Copy kode seperti yang saya lingkari dibawah ini.


5. Buka menu Edit HTML blogger.

6. Letakkan kode tersebut diatas <title><data:blog.pageTitle/></title>. Jika anda sudah memasang Google sitemap. Letakkan pas dibawahnya.

7. Jika sudah simpan template anda lalu kembali ke halaman Yahoo sitemap. Klik Ready to Authenticate. Selesai


Selamat mencoba. Semoga bermanfaat..


Tambahan:
Jika anda mengalami error pada saat pemasangan meta tag Yahoo sitemap maka tambahkan karakter '/' sebelum >. Misal kode meta tag-nya seperti ini <META name="y_key" content="kode_verifikasi" > maka ganti menjadi <META name="y_key" content="kode_verifikasi" />

Melanjut postingan sebelumnya tentang cara mendaftar blog ke search engine dan tips agar blog cepat terindeks di search engine. Maka pada postingan ini saya akan membahas tentang SEO (Search Engine Optimization) lagi.

Ada banyak teknik SEO yang bisa diterapkan untuk mengoptimalkan blog anda. Seperti membangun backlink, mengoptimalkan konten, memasang meta tag, dan mendaftar blog ke direktori atau search engine.

Nah dari sekian teknik diatas, cara yang paling mudah diterapkan adalah memasang meta tag. Memasang meta tag pada blog sama seperti memberi identitas pada blog kita. Tujuannya agar search engine lebih mudah mengenali isi dari blog kita. Karena pertama kali yang di crawl atau ditelusuri pada blog kita adalah bagian title blog sehingga alangkah baiknya jika kita selipkan deskripsi atau keyword yang berhubungan dengan isi blog kita di bagian tersebut.

Untuk memasang meta tag di blogger caranya sangat mudah:

1. Buka blogger. Klik Design -> Edit HTML

2. Letakkan script meta tag berikut dibawah <title><data:blog.pageTitle/></title>

<meta name="description" content="deskripsi blog"/>
<meta name="keywords" content="keyword atau kata kunci blog"/>
<meta name="robots" content="index follow"/>

Keterangan:
Ganti tulisan yang dicetak merah sesuai dengan penjelasan berikut:

deskripsi blog: deskripsi singkat tentang topik blog anda. Contoh: "tutorial membuat blog untuk blogger". Usahakan kalimatnya tidak lebih dari 150 karakter

keyword atau kata kunci blog: isi dengan keyword atau kata kunci yang berhubungan dengan topik blog anda. Contoh: "blogger tips, blogger tutorial, tutorial blog". Usahakan untuk tidak mengulangi 1 kata lebih dari 3 kali dan tidak mengisi kata kunci yang tidak relevan dengan isi blog anda. Misalnya blog anda berisi tentang travel lalu anda memberi keyword "free download, foto bugil, video porno" yang merupakan keyword populer di internet. Karena hal ini akan dianggap spamming.

index follow: berarti meminta spider untuk mengindeks atau menelusuri link yang ada pada halaman blog. Jika anda tidak ingin spider untuk mengindeks link pada halaman blog anda. Gunakan perintah "noindex nofollow".

3. Jika sudah, klik Save Template. Selesai.

Selamat mencoba. Semoga blog sobat semakin akrab dengan Google dan teman-temannya.

Marquee adalah kode HTML yang berguna untuk membuat teks berjalan. Dengan memasang marquee ini, blog kita akan terlihat lebih hidup dan dapat menghemat ruangan pada blog kita.

Ada beberapa efek marquee yang dapat kita buat seperti: teks bergerak kesatu arah, bergerak bolak balik, bergerak keatas, bergerak sekali saja, dan lain-lain.

Efek-efek ini timbul karena adanya perpaduan dari beberapa fungsi yang disebut dengan attributes. Sebelum kita mulai, mari kita pelajari dulu fungsi dari masing-masing atributes.

Beberapa attributes yang sering digunakan dalam marquee yaitu:

1. Behavior : untuk mengatur gaya gerakan pada teks.
Ada 3 gaya gerakan yang bisa digunakan yaitu :

• Alternate : Teks bergerak bolak-balik
• Slide : Teks hanya bergerak sekali saja
• Scroll : Teks bergerak ke satu arah secara kontinu

2. Direction : mengatur arah gerakan teks.
Ada 4 arah gerakan yang bisa digunakan yaitu :

• Up : Teks bergerak keatas
• Down : Teks bergerak kebawah
• Left : Teks bergerak kekiri
• Right : Teks bergerak kekanan

3. Face : Untuk mengatur font teks seperti : arial, verdana, times new roman, courier, dan lain-lain. Anda bisa menggunakan semua jenis font yang tersimpan pada komputer Anda

4. Color : Untuk mengatur warna teks, seperti : "black", "green", "blue", "red", "yellow", dan lain-lain. Anda juga bisa menggunakan kode warna untuk menghasilkan warnanya, seperti: "#fffff", "#ff5a00", "#abb0b5", dan lain-lain. Belum tau cara menghasilkan kode warna. Baca disini

5. Width : Untuk mengatur panjang ruangan teks dalam satuan pixel.

6. Height : Untuk mengatur lebar ruangan teks dalam satuan pixel.

7. Bgcolor : Untuk mengatur warna background, seperti: "black", "green", "blue", "red", "yellow", dan lain-lain. Jika Anda ingin menghilangkan warna background gunakan "transparent".

8. Scrolldelay: Untuk mengatur waktu tunda gerakan dalam satuan mili detik.

9. Scrollamount: Untuk mengatur kecepatan gerakan dalam satuan pixel.

10. Loop: untuk mengatur jumlah pengulangan.

Itulah beberapa attributes yang sering digunkan untuk membuat efek marquee atau teks berjalan. Berikut saya akan memberikan beberapa contoh efek marquee:

Contoh 1: Efek teks berjalan bolak-balik secara horizontal:

Welcome To My Blog

Kodenya:

<font face="arial" color="black" size="4"><marquee direction="right" behavior="alternate" direction="right" scrollamount="2" height="20px" scrolldelay="10" bgcolor="orange" width="450px">Welcome To My Blog</marquee></font>



Contoh 2: Efek teks berjalan bolak-balik secara vertikal:

Welcome To My Blog

Kodenya:

<font face="verdana" color="yellow" size="4"><marquee direction="up" behavior="alternate" scrollamount="2" height="100px" scrolldelay="10" bgcolor="green" width="450px">Welcome To My Blog</marquee></font>



Contoh 3: Efek teks berjalan kekanan secara kontinu

Welcome To My Blog

Kodenya:

<font face="times" color="green" size="4"><marquee direction="right" behavior="scroll" scrollamount="3" height="20px" scrolldelay="10" bgcolor="yellow" width="450px">Welcome To My Blog</marquee></font>



Contoh 4: Efek teks berjalan kekiri sekali saja

Welcome To My Blog

Kodenya:

<font face="courier" color="red" size="4"><marquee direction="left" behavior="slide" scrollamount="1" height="20px" scrolldelay="100" bgcolor="blue" width="450px">Welcome To My Blog</marquee></font>



Contoh 5: Efek teks berjalan kekanan tiga kali

Welcome To My Blog

Kodenya:
<font face="courier" color="blue" size="4"><marquee direction="right" loop="3" behavior="slide" scrollamount="1" height="20px" scrolldelay="100" bgcolor="red" width="450px">Welcome To My Blog</marquee></font>



Contoh 6: Efek Bounce

Panduan membuat blog

Kodenya:

<font face="comic sans ms" color="orange" size="4"><marquee scrolldelay="10" behavior="alternate" direction="up" width="450px" scrollamount="2" height="100px" bgcolor="black"><marquee scrolldelay="10" behavior="alternate" direction="left" scrollamount="2">Panduan membuat blog</marquee></marquee></font>


Untuk membuat teks berhenti jika mouse menyentuh area marquee dan berjalan kembali jika mouse meninggalkan area marquee. Tambahkan kode onmouseover="this.stop()" dan onmouseout="this.start()"

Sebagai contoh saya memasukkan kode ini:

<font face="arial black" color="green" size="4"><marquee behavior="alternate" direction="up" onmouseover="this.stop()" width="450" height="100" onmouseout="this.start()" bgcolor="blue">panduan membuat blog untuk pemula beserta tips n triknya...</marquee></font>

Hasilnya seperti ini:

panduan membuat blog untuk pemula beserta tips n triknya...

Silahkan menggeser mouse Anda ke area marquee untuk melihat hasilnya..

Ini hanya beberapa contoh efek marquee atau teks berjalan. Masih banyak efek-efek lain. Silahkan utak-atik sendiri dengan mengganti nilai-nilai pada attributes.


Cara memasang kode marquee pada blog:

1. Login ke Blogger. Klik menu Design->Page Elements
2. Klik Add a Gadget-> HTML/ Javascript
3. Masukkan kode marquee yang ingin Anda gunakan lalu klik Save
4. Selesai. Klik View Blog untuk melihat hasilnya

Selamat berkreasi...

Bagi seorang blogger kata blog tentu sudah kerap didengar. Bahkan saking familiarnya dengan kata ini sampai-sampai website statis pun disebut sebagai blog.

Nah agar tidak ada lagi yang salah mengartikan blog. Maka disini saya akan menjelaskan sedikit mengenai pengertian blog dan apa perbedaan antara website biasa (statis) dengan blog.

Secara ringkas, blog adalah singkatan dari Weblog yaitu sebuah aplikasi berbasis web yang disusun secara kronologis dimana posting terbaru akan tampil pada halaman teratas dan diikuti posting-posting sebelumnya.

Blog pertama kali muncul pada tahun 1990-an. Awalnya disebut weblog dan diperkenalkan oleh John Barger pada tanggal 17 Desember 1997. Istilah ini kemudian dipersingkat menjadi blog oleh Peter Merholz.

Perbedaan antara blog dengan website biasa adalah blog lebih mudah untuk mengupdate informasi sedangkan website biasa, halamannya cenderung tetap dan yang diupdate hanya isi dari halaman tersebut.

Website biasa umumnya digunakan untuk menjual sedangkan blog lebih mengutamakan interaksi antara pemilik blog dengan pembaca blog dimana pembaca blog dapat memberikan tanggapan atau komentar terhadap artikel yang diposting pemilik blog. Perbedaan blog dengan website biasa adalah blog lebih dinamis dan mudah digunakan.

Pada awalnya blog digunakan oleh seorang blogger sebagai bentuk catatan (diary) online mereka, sehingga bebas dibaca oleh siapapun di internet. Namun seiring dengan berjalannya waktu, blog telah berkembang menjadi bentuk yang lebih kompleks baik dari segi isi (konten), tampilan maupun kegunaannya.

Secara umum, blog dapat dibagi menjadi 2 yaitu blog gratis dan blog berbayar. Blog gratis adalah blog yang dibuat melalui situs penyedia blog gratis seperti blogger.com, wordpress.com, blogsome.com, blogdetik.com, dan lain-lain.

Sedangkan blog berbayar adalah blog yang dibuat menggunakan nama domain dan hosting sendiri. Disebut blog berbayar karena untuk membuat blog tersebut, anda harus beli domain dan hosting melalui situs penyedia domain dan hosting. Kemudian menginstal platform blog seperti Wordpress (yang biasanya disediakan secara gratis).

Apa beda blog gratis dan blog berbayar?
Dari segi kinerja tidak jauh berbeda. Hanya untuk blog gratisan terlihat kurang profesional karena menggunakan sub domain. Contoh alamatnya, bloganda.blogspot.com atau bloganda.wordpress.com dan kelangsungan blog jenis ini sangat bergantung pada situs penyedianya. Jika suatu saat situs penyedia blog menghentikan layanannya maka blog anda akan hilang.

Sedangkan blog berbayar menggunakan top level domain (TLD) yang menggunakan akhiran .com, .net, .org, contoh bloganda.com atau bloganda.net sehingga terlihat lebih profesional. Dan blog berbayar tidak akan hilang selama anda tetap memperpanjangkannya setiap tahun.

Jika anda ingin serius berbisnis online tentu lebih baik menggunakan blog berbayar. Tapi untuk pemula, tidak masalah membuat blog gratis dulu toh dengan blog gratis pun anda sudah bisa menghasilkan uang di internet dan anda juga bisa mengupgradenya menjadi blog berbayar di kemudian hari.

Jika anda ingin membuat blog gratis. Saya menyarankan anda untuk membuat di blogger.com. Karena blogger.com adalah milik Google sehingga lebih aman dan mudah terindeks dalam mesin pencari Google. Untuk mengetahui cara membuat blog di Blogger. Silahkan baca "Panduan membuat blog di Blogger"

Happy Blogging