Membuat Related Post Blogger Dengan jQuery

Setelah excited membuat artikel Cara Menonton TV Online Dengan Mudah dan Cepat kini kita kembali dalam artikel Tips Blogger. Dalam tips kali ini kita akan belajar membuat related post dengan menggunakan jquery. Mungkin selama ini Anda mengetahui cara membuat related post (artikel terkait) dengan metode konvensional yaitu dengan menyisipkan kode html yang mungkin sedikit menyulitkan bagi Anda. Membuat related post dengan jquery relatif lebih mudah dan praktis.

Keuntungan apabila kita menggunakan related post dengan jquery antara lain :

1. Easier : since All of the work is(has to be) done on the client side, You will not need to modify your template at all. widget will read post tags that blogger already display with each post.

2. Smarter : Cause This widget will list the top related 5(or more) posts sorted by relevancy!
Top relevant posts are the posts that have more tags in common with the current post.

3. More Optimized: Will only use summary feeds instead of querying default feeds that return full contents!

4. This widget also can work as a recent posts widget when there is no tags to aggregate.

5. Can be also used to get related posts from another blogspot blog. And in that case you don't have to run it on a blogspot!

6. A fixed list of tags can be used to aggregate.
7. It can display loading text or icon until widget is loaded.
8. Related posts list can be styled based on relevancy!
9. You can specify either to load widget on document ready or on window load.
10. Widget will be attached to container specified or it will be placed where you made the JavaScript call.

Langsung saja kita mulai tutorialnya :

1. Seperti biasa Anda harus Log In dahulu pada akun Blogger Anda

2. Pada dashboard, pilih Tata Letak/Rancangan => Elemen Halaman.

3. Kemudian pilih Tambah Gadget => Tambahkan HTML/Javascript.

4. Kemudian masukkan kode berikut dalam form widget tersebut

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
'loadingText':'loading...'
});</script>

5. Jika sudah kemudian klik Simpan Widget.

Agar lebih optimal, tempatkan widget related post dengan jquery tersebut tepat berada dibawah posting/artikel dengan menggeser widget tersebut ke bawah posting/artikel. Anda juga bisa menempatkan script related-posts-widget-1.0.js ke hosting Anda sendiri. Untuk pilihan hosting murah saya merekomendasikan Hosting Murah Indonesia Indositehost.com.


Lebih mudah dan praktis bukan? Selamat mencoba...

Membuat Navbar Blog Ala Facebook

Hampir semua orang tahu Facebook. Ya, situs jejaring sosial yang memiliki jutaan anggota di seluruh dunia. Kelebihan Facebook dari situs jejaring sosial lainya terletak pada tampilanya yang sangat user friendly serta dukungan berbagai fasilitas yang lengkap. Salah satu fasilitas yang disediakan oleh Facebook adalah navbar interaktif untuk mempermudah dalam mengakses menu hingga untuk chatting dengan teman kita yang sedang online di Facebook.

Sangat menarik memang. Nah, bagaimana bila Anda mengaplikasikan navbar tersebut pada blog/situs pribadi Anda. Wah, tentunya akan tambah menarik. Ok, tidak usah panjang lebar langsung saja dalam Tips Blogger kali ini kita akan belajar membuat navbar ala facebook pada blog kita. Disini kita akan memanfaatkan layanan gratis dari Wibiya. Berikut langkah-langkahnya :

1. Kunjungi situs Wibiya


2. Lakukan pendaftaran dengan mengklik Get It Now

3. Isi semua form yang tersedia


4. Jika sudah klik Next

5. Kemudian pilih tema navbar yang Anda inginkan


6. Kemudian klik Next, kemudian akan tampil pilihan aplikasi. Pilih aplikasi yang ingin Anda tampilkan

7. Jika sudah klik tombol Next, kemudian lengkapi data-data yang dibutuhkan untuk memasang aplikasi.

8. Kemudian klik Next. Pilih platform blog Anda (Blogger, Wordpress, dll)

9. Kemudian Copy kode yang disediakan dan paste di blog yaitu dengan menambah gadget baru di blog Anda.

10. Selamat Anda telah memiliki navbar blog ala Facebook.

Mudah sekali bukan? Tentunya blog Anda akan semakin interaktif bagi para pengunjung.

Cara Membuat AlertBox Pesan Pembuka Untuk Blog

Mungkin Anda pernah berkunjung ke sebuah blog yang saat pertama kali di buka tidak langsung terlihat isi blognya, namun terdapat pesan tertentu di dalam kotak dialog. Nah..inilah yang disebut Alertbox. Alertbox berfungsi untuk menyampaikan pesan pesan tertentu(contoh: pesan pembuka, sapaan, peringatan,dll) kepada pengunjung blog. Setiap kali pengunjung masuk ke halaman blog Anda, maka pengunjung akan mendapatkan alert atau pesan tersebut.

Pesan tersebut akan hilang ketika pengunjung mengklik alertbox tersebut. Mungkin memasang alertbox bukanlah sesuatu yang bijak. Karena akan sedikit mengganggu kenyamanan pengunjung blog Anda. Jika Anda ingin memasangnya, sebaiknya jangan terlalu banyak.

Apabila Anda ingin mencoba memasangnya berikut adalah trik untuk memasang alertbox pesan pembuka di blog. Script dasar untuk membuat alertbox adalah :

<script type="text/javascript">alert(Pesan yang ingin Anda tampilkan)</script>

Script diatas hanya untuk satu alertbox. Anda dapat menambahkannya sesuai keinginan. Misal jika Anda ingin memasnag dua pesan/alertbox maka Anda harus membuat dua script alert :

<script type="text/javascript">alert(Pesan pertama yang ingin Anda tampilkan)</script>
<script type="text/javascript">alert(Pesan kedua yang ingin Anda tampilkan)</script>

Untuk memasang script diatas tidaklah sulit, berikut langkah-langkahnya :

1. Log In ke Blogger http://blogger.com/
2. Pada beranda/Dasbor pilih Tata Letak >> Tambah Gadget >> Tambahkan HTML/Javascript
3. Kemudian copy paste script alert diatas
4. Simpan Perubahan.

Anda dapat berkreasi dengan membuat pesan alert konfirmasi. Yaitu pesan untuk meyakinkan pengunjung apakah tetap akan berkunjung ke blog Anda. Pengunjung mendapat dua pilihan apabila memilih “OK” maka pengunjung akan dibawa ke situs/blog Anda. Namun bila penguinjung memilih “CANCEL” maka pengunjung akan dibawa ke situs lain yang sudah Anda tentukan. Untuk scriptnya seperti dibawah ini :

<script type="text/javascript">
confirm('Apakah Anda yakin untuk melanjutkan berkunjug ke blog Supardi Punya?);
if (confirm(' Apakah Anda yakin untuk melanjutkan berkunjug ke blog Supardi Punya?')) {
window.location = "http://www.supardipunya.co.cc/";
}
else {
window.location = "http://langkah-mudah.blogspot.com/";
}
</script>

CATATAN :
1. Teks berwarna merah ganti dengan pesan sesuai keinginan Anda
2. Ganti URL blog berwarna merah dengan alamat blog Anda.
3. Ganti URL blog berwarna birtu dengan URL blog Anda yang lain
4. Dari contoh script di atas, pengunjung yang menekan OK, akan dibawa masuk ke http://www.supardipunya.co.cc/ sedangkan bagi pengunjung yang menekan CANCEL akan dibawa http://langkah-mudah.blogspot.com/ .


Bagimana Anda tertarik…? Selamat Mencoba

Cara Membuat Menu Pulldown di Blog

Banyak sekali manfaat pabila Anda memasang Pulldown Menu di blog. Pulldown menu akan membuat link-link Anda menjadi lebih simpel dan lebih mudah diakses. Selain itu juga untuk menghemat space/ruang di blog Anda. Pulldown menu ini bisa Anda isi dengan link Blogroll, Daftar Artikel, Label dan sebagainya.

Script dasar untuk membuat pulldown menu adalah sebagai berikut :

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
size="1" name="menu">

<option>- Judul Menu -</option>

<option value="http://URL_link_1/">Nama_link_1</option>
<option value="http://URL_link_2/">Nama_link_2</option>
<option value="http://URL_link_3/">Nama_link_3</option>

</select>
</form>

Untuk menambah link yang ingin ditampilkan dengan cara menambah script di bawah :

<option value="http://URL_link_/">Nama_link_</option>

Sebanyak yang Anda perlukan.

Contohnya di bawah ini :

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
size="1" name="menu">

<option>- LABEL -</option>

<option value="http://supardipunya.blogspot.com/search/label/Bisnis%20Online">Informasi Bisnis</option>
<option value="http://supardipunya.blogspot.com/search/label/tips%20seo">Tips SEO</option>
<option value="http://supardipunya.blogspot.com/search/label/tips%20blogger">Tips Blogger</option>
<option value="http://supardipunya.blogspot.com/search/label/Islam">Artikel Islam </option>
<option value="http://supardipunya.blogspot.com/search/label/Free%20MP3">MP3 Gratis</option>
<option value="http://supardipunya.blogspot.com/search/label/E-Book">E-BOOK Gratis </option>
<option value="http://supardipunya.blogspot.com/search/label/Tukaran%20Link">Tukaran Link</option>

</select>
</form>


Dan hasilnya seperti di bawah ini :

- LABEL -Informasi BisnisTips SEOTips BloggerArtikel Islam MP3 GratisE-BOOK Gratis Tukaran Link

Cara memasangnya adalah sebagai berikut :

1. Log In ke Blogger http://blogger.com/
2. Pada beranda/Dasbor pilih Tata Letak >> Tambah Gadget >> Tambahkan HTML/Javascript
3. Kemudian copy paste script alert diatas
4. Simpan Perubahan
5. Setelah itu masukkan script seperti di atas. Jangan lupa mengganti dengan link-link Anda sendiri
6. Setelah semua selesai klik Simpan Perubahan.

Anda bisa menambahkan atribut warna pada menu pulldown yang telah Anda buat tadi. Berikut kode yang harus Anda masukkan untuk membuat variasi warna pada menu pulldown :

style="color:kode warna font; background:kode warna background"


Berikut contoh kode secara lengkap :


<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
size="1" style="color: #0080FF;background: #E6E6E6">
<option>- Judul Menu -</option>

<option value="http://URL_link_1/">Nama_link_1</option>
<option value="http://URL_link_2/">Nama_link_2</option>
<option value="http://URL_link_3/">Nama_link_3</option>

</select>
</form>

Contoh hasilnya akan seperti ini :

- Judul Menu -MP3 GratisE-BOOK Gratis Tukaran Link

Anda bisa membuatnya semakin variatif dengan membuat warna yang berbeda pada setiap link. Berikut kodenya :

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
size="1" style="color: #0080FF;background: #E6E6E6">
<option>- Judul Menu -</option>

<option value="http://URL_link_1/"style="color:#B40404;background:#088A08">Nama_link_1</option>
<option value="http://URL_link_2/"style="color:#B40404;background:#088A08">Nama_link_2</option>
<option value="http://URL_link_3/"style="color:#B40404;background:#088A08">Nama_link_3</option>

</select>
</form>

Ubah kode berwarna biru dengan kode warna yang berbeda sesuai keinginan Anda.


Semoga Bermanfaat…

Tampilan Huruf Besar di Awal Posting Artikel Blog

Setiap Anda membaca koran, Anda pasti menjumpai penggunaan huruf besar/drop cap di awal kalimat. Bagaimana jika Anda menerapkannya untuk blog Anda. Pasti akan sangat menarik dan membuat artikel Anda jadi tidak membosankan. Nah…pada Tips Blogger kali ini kita akan membahas cara membuat membuat tampilan huruf besar di awal posting.

Langsung saja kita mulai tutorialnya…..

1. Login ke akun blogger Anda
2. Pada dashboard, pilih Tata Letak kemudian pilih Edit HTML.

PENTING : Sebelum melakukan edit template, sebaiknya simpan dulu template blog Anda mengklik tulisan “Download Template Lengkap”. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan Anda sudah memiliki back-up untuk mengembalikannya seperti semula.

3. Kemudian cari kode ]]></b:skin> .

TIPS : Untuk mempermudah menemukan kode tersebut tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser , kemudian tinggal ketikan kata yang ingin Anda cari.

4. Copy paste kode di bawah ini diatas kode ]]></b:skin> tersebut.

/* huruf besar
----------------------------------------------- */
.besar {
float:left;
color: #000000;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;
}

5. Setelah selesai kemudian klik “Simpan Template”.

Untuk membuat artikel Anda dimulai dengan huruf besar/dropcap, pada waktu memposting setelah selesai menulis artikel pada editor pilih “Edit HTML”. Kemudian tambahkan kode ... , diantara huruf awal yang ingin Anda tampilkan sebagai huruf besar. Selanjutnya klik "Terbitkan Entri".
1. Ketika kamu melakukan posting (buat), silakan ketik tulisan kamu sampai selesai.

2. Masih dalam "buat posting", klik pilihan "Edit HTML". Letaknya di atas sebelah kanan form "buat posting". Hasilnya kamu akan melihat postingan kamu dalam kode HTML.

3. Tambahkan kode <span class="besar"> ... </span>, diantara huruf awal postingan.

4. Terakhir pilih "Terbitkan Entri".
Contoh :

<span class="besar">M</span>elalui tips sederhana ini Anda akan mengetahui cara mudah menghasilkan jutaan backlink blog Anda dalam waktu yang tidak terlalu lama? Bagaimana caranya? Pada prinsipnya tips ini memanfaatkan metode Multi Level Marketing? Dan dalam postingan kali ini saya ingin mengajak Anda semua untuk memanfaatkan kedahsyatan faktor kali dan kecepatan penyebaran ini dalam bentuk backlink.

Hasil :

Melalui tips sederhana ini Anda akan mengetahui cara mudah menghasilkan jutaan backlink blog Anda dalam waktu yang tidak terlalu lama? Bagaimana caranya? Pada prinsipnya tips ini memanfaatkan metode Multi Level Marketing? Dan dalam postingan kali ini saya ingin mengajak Anda semua untuk memanfaatkan kedahsyatan faktor kali dan kecepatan penyebaran ini dalam bentuk backlink.


Semoga Bermanfaat…

Cara Membuat Kursor Animasi Ular di Blog

Berbagai upaya kita lakukan demi membuat blog kita tampil cantik dan menawan. Namun terkadang perubahan yang kita lakukan pada blog terlalu berlebihan sehingga bukanya blog menjadi lebih cantik namun malah membuat loading blog semakin lambat. Dan pengunjungpun berkurang.

Untuk itu Anda perlu selektif dalam menampilkan widget/animasi di blog agar tidak menjadi berlebihan. Nah, dalam Tips Blogger kali ini saya akan membahas tentang cara mempercantik blog dengan membuat tampilan kursor animasi di blog kita. Animasi kursor tersebut tampil setiap kali pengunjung menggerakan kursornya di halaman blog kita.

Jangan khawatir, tips membuat animasi kursor ini tidak berdampak terhadap kecepatan loading blog Anda. Langsung saja kita bahas satu persatu cara membuat animasi kursor di blog :


1. Langkah pertama login dahulu ke akun blogger Anda
2. Pada dashboard, pilih Edit Layout–> Edit HTML.

PENTING : Sebelum melakukan edit template, sebaiknya simpan dulu template blog Anda mengklik tulisan “Download Template Lengkap”. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan Anda sudah memiliki back-up untuk mengembalikannya seperti semula.


3. Jika sudah, cari kode </head> dan Copy-Paste kode berikut di atasnya :

<style type='text/css'>
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: regular;
font-weight: bold;
font-family: 'bell mt', tahoma, arial;
color: #0080FF;
/* End Optional */

/* Start Required - Do Not Edit */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type='text/javascript'>
//<![CDATA[
/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/

;(function(){

// Your message here (QUOTED STRING)
var msg = "Ketik Teks Anda di Sini";

/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */

// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 16;

// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;

// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;

// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;

////////////////////// Stop Editing //////////////////////

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement :

document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) +

'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},

drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},

ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};

})();
//]]>
</script>

Tips : Untuk mempermudah menemukan kode tersebut tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser , kemudian tinggal ketikan kata yang ingin Anda cari.

PENTING :
a. Ganti kode
- font-style: regular; (ganti dengan underline untuk gaya teks bergaris atau italic untuk teks miring)

- font-weight: bold; (ganti dengan bold untuk gaya teks tebal atau normal untuk teks normal)

- font-family: 'bell mt', tahoma, arial; (ganti dengan jenis font yang Anda inginkan)

- color: #0080FF; (ganti dengan kode warna yang Anda inginkan, untuk melihat kode warna klik di sini Kode HTML Warna Untuk Blog)

b. Ganti tulisan yang berwarna merah Ketik Teks Anda di Sini dengan teks yang Anda inginkan
c. Ganti kode var size = 16 sesuai dengan ukuran teks yang Anda inginkan.


4. Jika sudah selesai kemudian klik “Simpan Template”



Contoh hasilnya bisa Anda lihat sekarang di blog Supardi Punya ini

Membuat Form Berlangganan Untuk Blog

Untuk lebih mendekatkan blog Anda dengan pengunjung Anda bisa memanfaatkan tips blogger kali ini. Dalam tips blogger kali ini kita akan coba membuat form berlagganan artikel untuk blog. Membuat form berlangganan artikel blog sangat bermanfaat bagi para pengunjung blog yang ingin selalu menerima update posting blog Anda langsung di email mereka sehingga para pengunjung tidak perlu kesulitan untuk membaca artikel-artikel Anda.
Anda terlebih dahulu harus mendaftarkan blog dalam akun Feedburner. Kalu belum silahkan daftar dahulu DI SINI. Jika sudah terdaftar langsung saja praktekan tips kali ini.

Langkah-langkah untuk memasang widget form berlangganan adalah sebagai berikut :

1. Log In ke akun Blogger Anda
2. Pada beranda/Dasbor pilih Tata Letak >> Tambah Gadget >> Tambahkan HTML/Javascript
3. Kemudian copy paste kode di bawah ini :

<div style="padding: 10px 0px; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfigANBs2daotfuL3Z2rkQyNGOCz-ldJ8zTh7rKNDDIsyCMHqE48kTIiNNAuw-_AIzG02N5Q7XxkJpRqY6j4971G9aJe1R09YuZDzp_XVPKg0yRcmSy5fdFKxPuup83L5xey_MW3Dvhg/) no-repeat scroll right top; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">
<form action="http://feedburner.google.com/fb/a/mailverify" style="border: 1px solid rgb(204, 204, 204); padding: 3px 3px 5px; text-align: left;" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Supardi Punya', 'popupwindow', 'scrollbars=yes,width=300,height=320');return true">

<a href="http://feeds2.feedburner.com/Supardi%20Punya" rel="alternate" type="application/rss+xml"><img alt="RSS Feed" style="border: 0pt none ; vertical-align: middle;" src="http://www.feedburner.com/fb/images/pub/feed-icon16x16.png" /> Langganan Posting Supardi Punya Melalui RSS FEED</a>



Langganan Posting Supardi Punya Melalui Email:
<input style="width: 190px;" value="" name="email" type="text"><input value="Supardi Punya" name="uri" type="hidden"><input value="en_US" name="loc" type="hidden"><input value="Berlangganan" type="submit">



<a href="http://feeds2.feedburner.com/Supardi%20Punya"><img style="border: 0pt none ;" alt="" src="http://feeds2.feedburner.com/%7Efc/%20Supardi%20Punya?bg=FFFFFF&amp;fg=000000&amp;anim=0" height="26" width="88" /></a></form>
</div>

4. Jika sudah kemudian klik ”Simpan”

PENTING :

Sebelum memasukkan kode diatas Anda perlu mengganti kode sebagai berikut :

1. Ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfigANBs2daotfuL3Z2rkQyNGOCz-ldJ8zTh7rKNDDIsyCMHqE48kTIiNNAuw-_AIzG02N5Q7XxkJpRqY6j4971G9aJe1R09YuZDzp_XVPKg0yRcmSy5fdFKxPuup83L5xey_MW3Dvhg/ dengan alamat penyimpanan file gambar Anda sendiri.
2. Ubah Supardi Punya dengan nama feed blog Anda.
3. Sesuaikan nilai width dan height sesuai dengan ukuran template elemen halaman blog.
4. Ganti warna feed-count (bg=FFFFFF&fg=000000) sesuai dengan warna blog Anda.


Mudah bukan….?

Cara Membuat Tabel Dalam Posting Blog

Dalam membuat artikel atau posting blog tidak jarang kita perlu menampilkan data-data kuantitatif (angka-angka) yang rumit apabila ditulis dalam bentuk kata-kata. Untuk itu Anda perlu menampilkan data-data tersebut dalam bentuk tabel agar mudah dibaca dan dipahami.
Nah, sesuai topic diatas tips blogger kita kali ini akan membahas tentan cara membuat tabel dalam posting blog. Langsung saja berikut tutorialnya. Misalnya Anda akan menampilkan data sebagai berikut,

Saya mempunyai 3 (tiga) teman dari kota berbeda. Si A dari kota Surabaya, Si B dari kota Jakarta, dan Si C dari kota Madiun. Ketiga teman saya tersebut mempunyai hobi yang berbeda. Si A mempunyai hobi sepak bola. Si B mempunyai hobi bermain catur, sedangkan Si C mempunyai hobi bermain kartu.

Dari kalimat di atas akan kita buat ke dalam tabel berbentuk seperti di bawah ini :

Nama Teman	Kotas	Hobi
A	6	Sepak Bola
B	6	Bermain Catur
C	4	Bermain Kartu

Untuk membuat tabel di atas kita perlu memasukkan kode di bawah ini dalam posting artikel kita :

<table border="1" width="300">
<tr bgcolor="#0099FF "><td align="center"><b>Nama Teman</b></td><td align="center"><b>Kotas</b></td><td align="center"><b>Hobi</b></td&gt;</tr>
<tr><td align="center">A</td><td align="center">6</td><td align="center">Sepak Bola</td&gt;</tr>
<tr><td align="center">B</td><td align="center">6</td><td align="center">Bermain Catur</td&gt;</tr>
<tr><td align="center">C</td><td align="center">4</td><td align="center">Bermain Kartu</td&gt;</tr>
</table>

PENTING :

1. Kode dasar dalam tabel adalah <table> ... </table>.
2. Kode untuk membuat baris tabel <tr> ... </tr> .
3. Kode untuk membuat kolom tabel <td> ... </td> , dalam satu baris bisa Anda buat beberapa kolom.
4. Kode umum yang menyertai dalam kode tabel adalah width (...px), border (...px), align (center, left, right) dan bgcolor (kode warna/#......).



Semoga Bermanfaat….

Cara Membuat Buku Tamu Blog Dengan ShoutBox

Salah satu kriteria blog yang baik adalah blog yang senantiasa menjaga hubungan timbal balik dengan para pengunjungnya. Oleh karena itu kita perlu membuat blog kita menjadi interaktif sehingga memudahkan interaksi kita dengan pengunjung blog. Salah satu cara untuk membuat blog/website kita semakin interaktif adalah dengan membuat buku tamu/guest book di blog.

Dengan demikian hubungan baik antara pemilik blog dengan pengunjung blog dapat senantiasa terjlin. Langsung saja dalam tips blogger kali ini kita akan belajar membuat widget guest book/buku tamu dengan memanfaatkan layanan dari ShoutMix. Layanan dari ShoutMix ini bersifat gratis, jadi Anda tidak perlu ragu untuk mencobanya. Untuk dapat memanfaatkan layanan dari ShoutMix terlebih dulu Anda harus melakukan pendaftaran, lakukan pendaftaran dengan cara sebagai berikut :

1. Kunjungi www.shoutmix.com

2. Kemudian klik Create shoutbox

3. Isi dengan lengkap pada form yang disediakan,

Shoutbox ID : isi dengan username yang Anda inginkan
Choose password : isi dengan password yang Anda inginkan
Retype password : ulangi isi password Anda sama seperti sebelumnya
Name : isi dengan nama lengkap Anda
Email : isi dengan alamat email Anda

4. Setelah semua form telah terisi, segera lakukan Login ke dalam akun shoutmix yang telah Anda buat sebelumnya,

5. Sekarang Anda dapat mulai membuat widget shoutmix sesuai keinginan dengan mengatur warna dan ukuran yang sesuai dengan blog Anda

6. Setelah selesai kemudian klik “save setting” kemudian pilih “grab code”
7. Copy seluruh kode HTML yang tersedia
8. Kemudian masuk ke akun blogger Anda dan buat sebuah elemen/gadget baru lalu pilih HTML/JavaScript - ADD TO BLOG
9. Kemudian Paste kode HTML yang telah Anda Copy dari shoutmix sebelumnya
10. Setelah selesai klik “Simpan”



Selamat, sekarang blog Anda menjadi semakin interaktif dan menyenangkan……

Cara Mengatur Tampilan Widget di Blog

Semakin banyak widget dan gambar yang ditampilkan di blog Anda maka hampir dapat dipastikan loading blog Anda akan semakin lambat. Untuk mengatasi hal tersebut Anda perlu mengatur waktu serta tempat widget blog akan ditampilkan. Dalam artikel Tips Blogger kali ini saya akan membahas cara mengatur tampilan widget di blog. Bagaimana caranya? Langsung saja berikut langkah-langkahnya :

1. Cara Menampilkan Widget di Halaman Depan Saja

Sisipkan kode di bawah ini dalam elemen widget yang ingin Anda tampilkan di halaman depan saja.

<b:if cond="data:blog.url == data:blog.homepageUrl">
</b:if>

Contoh :

<b:widget id="HTML44" locked="false" title="Tips Blogger" type="HTML">
<b:includable id="main">

<b:if cond="data:blog.url == data:blog.homepageUrl">

<!-- only display title if it's non-empty -->
<b:if cond="data:title != """>
</b:if></b:if></b:includable></b:widget><h2 class="title"><data:title></data:title></h2>
<div class="widget-content">
<data:content/>
</div>
<b:include name="quickedit">

</b:if>

</b:includable>
</b:widget>

2. Cara Menampilkan Widget di Halaman Selanjutnya

Sisipkan kode di bawah ini dalam elemen widget yang ingin Anda tampilkan di halaman selanjutnya setelah halaman home :

<b:if cond="data:blog.pageType == &quot;item&quot;">
</b:if>

Contoh :

<b:widget id="HTML45" locked="false" title="Trik Blogger" type="HTML">
<b:includable id="main">

<b:if cond='data:blog.pageType == "item"'>

<!-- only display title if it's non-empty -->
<b:if cond="data:title != """>
</b:if></b:if></b:includable></b:widget><h2 class="title"><data:title></data:title></h2>
<div class="widget-content">
<data:content/>
</div>
<b:include name="quickedit">

</b:if>

</b:includable>
</b:widget>

Catatan :

1. Kode di atas dapat dilihat saat Anda melakukan edit template (Tata Letak --> Edit HTML -- > dan centang "Expand Template Widget").

2. Pilihlah widget yang menurut Anda sesuai untuk ditampilkan dan widget mana yang tidak perlu ditampilkan, baik di halaman depan maupun di halaman selanjutnya.

3. Utamakan memilih widget yang memuat script dan image.




Selamat Mencoba....

Catatan :

1. Kode di atas dapat dilihat saat Anda melakukan edit template (Tata Letak --> Edit HTML -- > dan centang "Expand Template Widget").

2. Pilihlah widget yang menurut Anda sesuai untuk ditampilkan dan widget mana yang tidak perlu ditampilkan, baik di halaman depan maupun di halaman selanjutnya.

3. Utamakan memilih widget yang memuat script dan image.



Selamat Mencoba....

Kode HTML Warna Untuk Blog

Untuk m,percantik blog/website tidak jarang kita menepatkan warna tertentu. Untuk menempatkan warna, sebelumnya kita harus mengetahui kode warna yang kita inginkan tersebut. Berikut saya sediakan kode HTML warna untuk blog yang bisa Anda pilih :

Kode warna yang terpilih :

Silahkan pilih warna kesukaan Anda.....

Cara Membuat Widget Random Post Pada Blogger

Untuk memudahkan pengunjung mengetahui artikel apa saja yang ada di blog kita, kita bisamenambahkan sebuah widget Random Post yang akan menampilkan posting/artikel di blog kita secara acak. Dengan demikian postingan/artikel terdahulu yang tersimpan pada arsip blog masih tetap dapat disimak oleh pengunjung. Tips blogger tentang widget Random Post ini sangat bermanfaat untuk meningkatkan page views blog kita yaitu semakin banyak artikel kita yang dilihat oleh pengunjung.
Langkah-langkah untuk memasang widget random post adalah sebagai berikut :

1. Log In ke akun Blogger Anda hingga masuk
2. Pada beranda/Dasbor pilih Tata Letak >> Tambah Gadget >> Tambahkan HTML/Javascript
3. Kemudian copy paste kode di bawah ini.

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ul style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=ac99ebe0691031008a48d750fdbeaa67&url=http%3A%2F%2Fbloganda.blogspot.com&num=10" type="text/javascript"></script>

PENTING : Ganti teks bloganda.blogspot.com dengan nama blog Anda sendiri tanpa diikuti http, missal supardipunya.blogspot.com. Angka 10 menunjukkan jumlah postingan yang akan ditampilkan secara acak yang bisa kita ubah sesuai dengan keinginan kita.

4. Kemudian klik “Simpan Perubahan”


Semoga Bermanfaat dan Selamat Mencoba...

Cara Membuat Background Teks Pada Posting Blog

Bagi Anda yang ingin tampilan posting blognya lebih menarik dan tidak monoton patut mencoba tips blogger yang satu ini. Tips blogger kita kali ini adalah tips membuat background pada teks di artikel yang kita buat. Dalam membuat background teks terdapat dua pilihan yaitu membuat background dengan warna dan membuat background dengan gambar.

Mari kita bahas satu persatu :

1. Membuat background dengan warna

Yang perlu Anda lakukan adalah ketika Anda akan memulai untuk membuat posting blog, pilih pada tab Edit HTML. Berikan kode berikut ini diantara teks yang ingin Anda beri background warna :

<div style="background:kode warna;">

Isi teks yang ingin di beri background warna…

</div>


PENTING : Ganti tulisan kode warna dengan kode warna yang Anda inginkan. Untuk mengetahui macam-macam kode warrna klik di sini.

Hasilnya akan seperti ini :

Bagi Anda yang ingin tampilan posting blognya lebih menarik dan tidak monoton patut mencoba tips blogger yang satu ini. Tips blogger kita kali ini adalah tips membuat background pada teks di artikel yang kita buat. Dalam membuat background teks terdapat dua pilihan yaitu membuat background dengan warna dan membuat background dengan gambar.

2. Membuat background dengan Gambar

Siapkan dahulu gambar yang ingin Anda jadikan background. Kemudian upload gambar tersebut di penyedia hosting gambar gratis seperti Picasa, Photobucket, Flickr dll.
Sama seperti sebelumnya ketika anda akan memulai untuk membuat postingan, pilih tab Edit HTML. Berikan kode berikut ini diantara teks yang ingin Anda beri background gambar :

<div style="background:url alamat gambar Anda no-repeat;">

Isi teks yang ingin di beri background gambar

</div>


Ganti tulisan url alamat gambar Anda dengan url penyimpanan gambar Anda. Anda bisa mengganti kode no-repeat menjadi repeat agar gambar ditampilkan berulang-ulang
Berikut contoh hasilnya :

Bagi Anda yang ingin tampilan posting blognya lebih menarik dan tidak monoton patut mencoba tips blogger yang satu ini. Tips blogger kita kali ini adalah tips membuat background pada teks di artikel yang kita buat. Dalam membuat background teks terdapat dua pilihan yaitu membuat background dengan warna dan membuat background dengan gambar.

Demikian tips kali ini, Semoga bermanfaat…

Cara Membuat Variasi Marquee Di Blog

Marquee adalah suatu bentuk animasi berupa teks atau image yang bergerak atau berjalan dengan arah dan posisi tertentu. Marquee terbentuk dari beberapa kode html yang sederhana. Dengan menambahkan marquee di blog/website Anda akan semakin membuat blog/website Anda tampak menarik dan interaktif. Mungkin Anda pernah menemukan blog/website yang menerapkan animasi marquee. Sangat menarik bukan… ?.

Tanpa basa-basi langsung saja dalam tips blogger kali ini kita akan belajar Membuat Variasi Marquee Di Blog. Efek marquee sangat bervariasi, Anda dapat memilihnya sesuai selera dan keinginan Anda.

Kode dasar HTML dalam pembuatan marquee adalah <marquee> ... </marquee>
Melalui kode HTML tersebut dapat dbuat berbagai macam variasi marquee, berikut diantaranya :

1. Marquee Teks Bergerak Dari Kiri ke Kanan Atau Sebaliknya

<marquee direction="left"&gt;Teks Marquee Bergerak Dari Kanan Ke Kiri</marquee>

Teks Marquee Bergerak Dari Kanan Ke Kiri

<marquee direction="right"&gt; Teks Marquee Bergerak Dari Kiri Ke Kanan</marquee>


Teks Marquee Bergerak Dari Kiri Ke Kanan


NOTE : "direction" merupakan kode yang berguna untuk menentukan arah gerakan teks atau image. Anda dapat mengisinya dengan variasi seperti left, right, up, dan down.

2. Marquee Teks Bergerak Dari Bawah ke Atas Atau Sebaliknya

<marquee direction="up" width="50%" height="50">Teks berjalan ke atas yang dibatasi area tertentu</marquee>

Teks berjalan ke atas yang dibatasi area tertentu

NOTE : Untuk mengubah gerakan menjadi dari atas ke bawah ganti kode direction="up" dengan kode direction="down" . Sedangkan atribut "height" dan "width" berfungsi untuk menentukan tinggi serta lebar area marquee yang digunakan oleh teks/image, atributnya bernilai angka atau prosentase (%).

3. Marquee Teks Bergerak Dengan Kecepatan Tertentu

Untuk mengatur kecepatan marquee digunakan atribut :
"scrolldelay" : untuk mengatur waktu berhenti/tunda dari gerakan marquee teks
"scrollmount" : untuk mengatur kecepatan gerakan teks, atributnya berupa angka. Semakin besar angka, maka semakin cepat gerakanya

<marquee scrolldelay="3000" direction="down" scrollmount="2" width="75%" bgcolor="#33ccff" height="50">Teks bergerak ke bawah dgn waktu tunda 3 detik, berkecepatan tertentu yang lebar dan tinggi area tertentu </marquee>

Teks bergerak ke bawah dgn waktu tunda 3 detik, berkecepatan tertentu yang lebar dan tinggi area tertentu

Contoh : Teks bergerak ke bawah dengan waktu tunda 3 detik, berkecepatan tertentu dengan lebar dan tinggi area tertentu

4. Marquee Teks Dengan Penambahan Warna Background Tertentu

<marquee scrollmount="2" bgcolor="#33ccff">Teks berkecepatan tertentu dengan menggunakan latar warna biru muda</marquee>

Teks berkecepatan tertentu dengan menggunakan latar warna biru muda

NB : "bgcolor" berfungsi untuk memberikan warna latar/background teks, atributnya adalah kode warna HTML. Ganti kode #33ccff dengan kode warna yang Anda inginkan.


5. Marquee Teks Bergerak Dengan Arah Bolak-Balik

<marquee behavior="alternate">Teks ini akan berjalan bolak-balik</marquee>

Teks ini akan berjalan bolak-balik

NOTE : "behavior" berfungsi untuk mengatur pola gerakan teks dengan atribut yang seperti scroll (gerakan ke kiri), slide (sekali bergerak lalu berhenti), dan alternate (bergerak bolak-balik).

6. Marquee Teks Dengan Jenis dan Ukuran Font Tertentu

<span style="color: rgb(0, 0, 255);" ><marquee direction="down" behavior="alternate" scrollamount="10" width="50&amp;" bgcolor="#f2f5a9" height="100">Teks arial warna biru</marquee></span>

Teks arial warna biru

NOTE : Tambahkan kode <span> ... </span> diantara kode marquee, singkat kodenya seperti di atas. “font-family:arial” untuk menentukan jenis font serta kode “color:#0000ff” ” untuk menentukan warna font.

7. Marquee Teks Dengan Variasi Gerakan Mouse

Yaitu apabila mouse didekatkan, maka teks akan berhenti. Dan akan bergerak kembali setelah mouse dipindahkan ke luar area. Berikut kodenya :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" align="left" width="75%" bgcolor="#000000" height="100">
<a href="http://supardipunya.blogspot.com/2009/09/mendulang-dollar-dari-google-adsense.html">Mendulang Dollar dari Google AdSense</a>

<a href="http://supardipunya.blogspot.com/2009/09/bisnis-online-affiliasi-mudah-dan.html">Bisnis Online Affiliasi Mudah dan Menghasilkan</a>

<a href="http://supardipunya.blogspot.com/2009/07/cara-daftar-paypal-gratiss.html">Cara Daftar PayPal</a>

<a href="http://supardipunya.blogspot.com/2009/07/cara-daftar-di-alertpay-gratis.html">Cara Daftar Di Alertpay GRATIS</a>

<a href="http://supardipunya.blogspot.com/2009/07/ptc-mendapat-hanya-dengan-mengklik.html">PTC : Mendapat $$$ Hanya Dengan Mengklik</a>
<a href="http://supardipunya.blogspot.com/2009/07/pts-berkomentar-dapat.html">PTS : Berkomentar Dapat $$$</a>

<a href="http://supardipunya.blogspot.com/2009/06/bisnis-online-gratis-mudah-dan.html">BISNIS ONLINE GRATIS, MUDAH, DAN MENJANJIKAN</a>

</marquee>


Mendulang Dollar dari Google AdSense

Bisnis Online Affiliasi Mudah dan Menghasilkan

Cara Daftar PayPal

Cara Daftar Di Alertpay GRATIS

PTC : Mendapat $$$ Hanya Dengan Mengklik
PTS : Berkomentar Dapat $$$

BISNIS ONLINE GRATIS, MUDAH, DAN MENJANJIKAN




NOTE : Untuk mengubah teks menjadi gambar ganti teks berwarna hijau dengan alamat enyimpanan imge/gambar Anda.

Contoh :

<marquee><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLaofyLKywt6ybmnsspgiMOQFATuSGX6jzl_OCDGu7XSSuTAmMhxxi2kUeAdR0FPdW1P15j3Xbq4A_LZm3kl_Jix2udxost_kPQU2BDdmmxHTwFHcV3ZnzCf1K9T28UAuxQxVTxgYT2Q/"/></marquee>





SEMOGA BERMANFAAT....

Membuat Efek Buram / Blur Pada Gambar Artikel Blog

Untuk menambah kejelasan isi artikel di blog tidak jarang kita menyisipkan satu atau beberapa gambar di sela-sela isi artkel. Anda dapat membuat tampilan gambar menjadi lebih menarik dengan memberi efek buram(blur) pada gambar Anda. Dalam tips blogger kali ini kita akan membahas cara membuat efek buram(blur) pada gambar di artikel/posting blog.
Ada dua tipe tampilan yang bisa Anda pilih untuk menampilkan gambar dengan efek buram(blur). Tipe pertama adalah menampilkan gambar dengan tampilan buram terlebih dahulu kemudian menampilkan tampilan gambar sesungguhnya ketika kursor menyentuh gambar (Gambar 1). Tipe kedua adalah menampilkan tampilkan gambar sesungguhnya terlebih dahulu kemudian menampilkan tampilan gambar buram ketika kursor menyentuh gambar (Gambar 2).

Gambar 1

Gambar 2

Berikut cara untuk membuat efek buram pada gambar artikel/posting blog :

1. Seperti biasa Log In dahulu ke akun Blogger Anda
2. Pada dashboard, pilih Edit Layout–> Edit HTML.

Sebelum melakukan edit template, sebaiknya simpan dulu template blog Anda mengklik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan Anda sudah memiliki back-up untuk mengembalikannya seperti semula.

3. Pada menu Edit HTML carai kode ]]> , lebih mudah apabila Anda menggunakan CTRL+F.

4. Letakkan kode dibawah ini tepat di atas kode ]]>

.blur-before {
opacity: .4;
-moz-opacity: .4;
filter: alpha(opacity=40);
}
.blur-before:hover {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}
.blur-after {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}
.blur-after:hover {
opacity: .4;
-moz-opacity: .4;
filter: alpha(opacity=40);
}

5. Setelah selesai kemudian klik “Simpan Template”

Selanjutnya setiapAnda ingin menampilkan gambar dengan efek buram pada artikel yang Anda buat, pada opsi penulisan artikel Edit HTML tambahkan atribut kode <a href="#go" class="linkopacity"> untuk hasil seperti Gambar 1 di atas dan atribut kode <a href="#nogo" class="linkopacity"> untuk hasil seperti Gambar 2 di atas. sebagai contoh lihat kode di bawah ini untuk setiap masing-masing gambar di atas.

<a href="http://www.blogger.com/post-edit.g?blogID=319948605987470972&amp;postID=5166849818383405645#go" class="linkopacity"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLaofyLKywt6ybmnsspgiMOQFATuSGX6jzl_OCDGu7XSSuTAmMhxxi2kUeAdR0FPdW1P15j3Xbq4A_LZm3kl_Jix2udxost_kPQU2BDdmmxHTwFHcV3ZnzCf1K9T28UAuxQxVTxgYT2Q/" />

<a href="http://www.blogger.com/post-edit.g?blogID=319948605987470972&amp;postID=5166849818383405645#nogo" class="linkopacity"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLaofyLKywt6ybmnsspgiMOQFATuSGX6jzl_OCDGu7XSSuTAmMhxxi2kUeAdR0FPdW1P15j3Xbq4A_LZm3kl_Jix2udxost_kPQU2BDdmmxHTwFHcV3ZnzCf1K9T28UAuxQxVTxgYT2Q/" />

Cara Mudah Membuat Teks Berjalan di Address Bar

Bagi Anda yang sudah mulai bosan dengan tampilan blog yang biasa-biasa saja bisa menerapkan tips blogger kali ini. Dalam tips blogger kali ini kita akan membuat teks berjalan di addres bar browser saat blog Anda di buka. Tutorial blogger ini sangat bermanfaat untuk mempercantik blog atau untuk menyampaikan pesan-pesan tertentu kepada para pengunjung blog.

Langsung saja kita mulai tutorialnya. Berikut langkah-langkahnya :

1. Seperti biasa Log In dahulu ke akun Blogger Anda
2. Pada dashboard, pilih Edit Layout–> Edit HTML.

PENTING : Sebelum melakukan edit template, sebaiknya simpan dulu template blog Anda mengklik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan Anda sudah memiliki back-up untuk mengembalikannya seperti semula.

3. Pada Edit HTML cari kode </head>, lebih mudah apabila menggunakan fasilitas find di browser dengan cara menekan CTRL+F.

4. Copy Paste kode di bawah ini di atas kode tadi </head>.

<SCRIPT language='JavaScript'>
var txt=":::Tulis teks Anda di sini::: ";
var kecepatan=170;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</SCRIPT>

Ganti teks berwarna biru dengan teks yang ingin Anda masukkan sesuai keinginan Anda.

5. Setelah selesai jangan lupa Simpan Template Anda


Mudah bukan ? Sekarang coba refresh browser Anda dan lihat perubahanya….