arozaq.com

Showing posts with label Tips Trik Blogger. Show all posts

Home » Posts filed under Tips Trik Blogger

5.6.11

Membuat Sub-Menu Navigasi Diatas Hider

Dengan menu navigasi blog akan terlihat lebih menarik. Selain itu tentunya bagi si pemilik blog juga lebih mudah meng-organisir konten dari blognya. Begitupun sebaliknya buat pengunjung blog, menu seperti ini mempermudah pengunjung dalam meng-eksplor isi blog.

Cara Membuat Random Post Dinamis

widget random post ini akan menampilkan seluruh postingan blog kita secara acak dengan trik slide show.

Ini akan lebih memaksimalkan semua isi postingan tertampil dengan jeda waktu yang dapat kita atur. Dan satu lagi kelebihan random post ini tidak memakan space yang besar dan sangat simpel.

Jadi, tertarik untuk memasang? ini dia script code-nya:

Cara memasang random post dinami inipun cukup mudah, Silahkan sobat pasang di sidebar : masuk ke blog sobat >> Layout >> Add Gadget >> HTML/Javascript >> copy and paste kode dibawah ini dan tempatkan di HTML/Javascript >> simpan/save >> lihat hasilnya.

Note: Ganti Url yang berwarna merah dengan alamat blog kamu.

30.9.10

Tambah Title Pada Judul Post blogger

Menurut para SEO expert, salah satu faktor kecil penunjang terhadap SEO adalah dengan membubuhkan title terhadap link.
Title link yang di maksud disini adalah ketika sebuah link disorot oleh mouse komputer,akan keluar sebuah tulisan kecil.
Langkah - langkahnya :
1. Silahkan login ke blogger dengan ID anda
2. Klik tab menu Edit HTML
3. Klik kotak kecil disamping tulisan Expand Template Widget
4. Carilah kode seperti dibawah ini :
<a expr:href='data:post.link'><data:post.title/></a>
5. Hapus kode tadi lalu ganti dengan kode berikut :
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
5. Lalu cari kembali kode seperti ini :
<a expr:href='data:post.url'><data:post.title/></a>
6. Hapus kode tadi lalu ganti dengan kode berikut :
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
7. Klik tombol SIMPAN TEMPLATE. lihat hasilnya ........

Teknik diatas hanyalah memasukkan keyword judul post ke dalam link judul post. Pada dasarnya, kode yang ditambahkan adalah expr:title='data:post.title'

VARIASI LAIN

Serta

<a expr:href='data:post.url' expr:title='"Tutorial blog : " + data:post.title'><data:post.title/></a>

16.9.10

Membuat Artikel Berhubungan dengan Gambar ( Related Posts )

Membuat artikel berhubungan dengan sebuah tampilan dengan gambar atau bahasa kerennya Related Posts with Thumbnails for Blogger.

Langkah-langkahnya :
1. Login ke blogger.com masuk ke bagian, setelah masuk ke dasboard,pilih tata letak atau layout,
2. Pilih edit HTML, check the "Expand Widget Templates" check box
3. Cari kode di bawah ini. Gunakan Edit>Find>ketikan yang di cari </head>
4. Setelah Ketemu kemudian masukan kode dibawah ini di atasnya

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>


5.Cari Kode Dibawah ini
<div class='post-footer-line post-footer-line-1'>
Jika tidak ketemu cari yang satu ini

6.kemudian letakan kode berikut di bawahnya kode tadi ( 5 )

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if></b:if>

7. Simpan Template dan lihat hasilnya

Catatan :

Sebelum membuatnya pastikan telah membuat LABEL atau CATEGORY jika belom hasilnya tidak akan tampil.
Jumlah yang di tampilkan bisa di atur dengan mengganti kode berikut ( Merah ) : var maxresults=5

Untuk judul di bagian ( Merah ) :

var relatedpoststitle="Related Posts&quot;;

15.9.10

Tips Menampilkan Postingan Hanya Judulnya Saja

Ingin Blog kelihatan simpel dan rapi dengan menampilakan postingan hanya judulnya saja ???
Hasilnya seperti Blognya Kang Rohman di halaman Home poting barunya hanya terlihat judulnya saja, langkah-langkahya sebagai berikut :
1. Login ke blogger
2. Klik Rancangan
3. Klik menu Edit HTML
4. Carilah kode ]]></b:skin>
5. Copy kode berikut, lalu paste di bawah kode ]]></b:skin>
     <style type='text/css'>
     <b:if cond='data:blog.pageType != "item"'>
     <b:if cond='data:blog.pageType != "static_page"'>
     .post-body{display:none;}
     </b:if>
     </b:if>
     </style>
6. Klik tombol SIMPAN TEMPLATE. lihat hasilnya...
Catatan : kode diatas masih menyisakan beberapa elemen seperti tanggal posting, komentar dan yang lainnya. Jika anda ingin menghilangkan semuanya dan yang tersisa hanya judul post nya saja, mungkin anda bisa menggunakan kode berikut :
     <style type='text/css'>
     <b:if cond='data:blog.pageType != "item"'>
     <b:if cond='data:blog.pageType != "static_page"'>
     .post-body, .post-footer, .jump-link,
     .post-timestamp, .reaction-buttons,
     .star-ratings, .post-backlinks,
     .post-icons, .date-header{display:none;}
     </b:if>
     </b:if>
     </style>

Tips Menghilangkan Pesan Pencarian Blogger

Risih dengan pesan pencarian Blogger !!!

Langkah-langkah Menghilangkan Pesan Pencarian Blogger :

Sign in ke blogger dengan ID anda.
Klik Tata Letak.
Klik tab Edit HTML.
Cari kode seperti ini ]]></b:skin>
simpan kode berikut di atas kode yang tadi :
.status-msg-wrap{
display:none;
}
Klik tombol Simpan Template.

Menghilangkan Icon Obeng dan Tang / Quick edit Blogger

Tidak suka ada Obeng dan Tang pada saat edit Blog !!!

Langkah-langkah menghilangkan icon obeng dan tang pada blog :
1. Login ke blogger
2. Klik Tata Letak.
3. Klik tab Edit HTML.
4. Cari kode seperti ini ]]></b:skin>
5. Copy paste kode berikut persis di atas kode yang tadi :
.quickedit{
display:none;
}

6. Klik tombol Simpan template.

11.9.10

Pasang Skrip Alert Di Blog

Skrip Alert adalah sebuah kode yang menghasilkan sebuah kotak selamat datang sebelum masuk sebuah blog / website.

Langkah-langkanya :
1. Login ke blogger
2. Klik Tata Letak >> Edit HTML
3. Cari kode </head>
4. Copy paste kode berikut di atas kode </head> (ganti tulisan yang berwarna biru sesuai dengan yang di inginkan).
<SCRIPT language='JavaScript'>alert("Selamat datang di blog arozaq");</SCRIPT>
5.Klik tombol SIMPAN TEMPLATE dan lihat hasilnya.............

Kode Skrip Alert yang lain
<SCRIPT language='JavaScript'>window.alert("Selamat datang di blog arozaq");</SCRIPT>

10.9.10

Membuat Drop Cap

Drop Cap adalah trick membuat huruf pertama pada awal artikel berupa huruf besar.
Langkah-langkahnya :

Login di blogger.com
Masuk ke menu Layout atau Tata Letak, lalu pilih Edit HTML
Cari skrip seperti di bawah ini: .post {margin:0 0 ...;}
Ketik kode HTML di bawahnya .dropcaps { float:left; color:red; font-size:70px; line head:100px: padding-top:25px; padding-right:2px; }
Lalu klik SAVE TEMPLATE

Setelah itu, di dalam postingan, di depan huruf yang ingin diperbesar, ketik: <span class="dropcaps">Huruf yang di perbesar</span> Setelah dipublish lihat hasilnya, Selamat mencoba.

4.9.10

Membuat Penggalan Artikel

Penggalan Artikel Sebenarnya bukanlah suatu tulisan hasil posting, akan tetapi hanya berupa tulisan biasa yang ujung kalimatnya di beri link untuk menuju ke artikel sebenarnya.
Untuk membuat penggalan artikel langkah pertama adalah mengcopy sebagian kalimat yang mau kita link, yang kedua adalah mencatat address dari artikel tersebut, ujung dari kalimat tersebut kita buatkan link.

Kode untuk membuat penggalan artikel :

<span style="color:#FD8403"><font size="6">Judul Artikel</font></span>
<hr width="100%" align="left">
<br/>
Isi Penggalan Artikel <a href="http://http://onoway.blogspot.com"><b>...Read more...</b></a>
<hr width="90%" align="left">
<br/>

Keterangan :
kode warna merah : teks yang akan muncul paling atas sebagi judul Artikel
Kode warna biru : ganti kode dengan isi penggalan artikel yang mau di tampilkan

Hasilnya :
Judul Artikel

Isi Penggalan Artikel ...Read more...

Untuk penempatan kode pada template blog :

Tempalte Klasik
1. Sign in di blogger dengan id
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy seluruh kode HTML yang ada, kemudian save. Ini untuk backup data apabila terjadi kesalahan dalam proses editting template
5. Cari kode seperti di bawah ini :

<div class="post"><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>

Tempatkan kode yang telah kita buat tadi persis diatas kode diatas, sehingga kodenya menjadi :

<span style="color:#FD8403"><font size="6">Judul

Artikel</font></span>
<hr width="100%" align="left">
<br/>
Isi Penggalan Artikel <a href="http://http://onoway.blogspot.com"><b>...Read

more...</b></a>
<hr width="90%" align="left">
<br/>
<div class="post"><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>

6. Klik tombol Preview untuk melihat perubahan yang baru di lakukan
7. Apabila sudah OK, klik tombol save Template Changes
8. Selesai.

Catatan : cara di atas tentunya merujuk kepada template asli buatan blogger.com, bagi pengguna template

bukan buatan blogger tentu akan lain, yang perlu di ingat yaitu penempatan kode penggalan artikel adalah persis diatas kode untuk Posting artikel.

Tempalte Baru
1. Sign In di blogger dengan id sobat
2. Klik menu Layout
3. Klik menu Page Elements
4. Klik Add a Page Element
5. Klik tulisan ADD TO BLOG yang berada di bawah tulisan HTML/JavaScript
6. Copy paste kode penggalan artikel yang telah kita buat tadi
7. Klik tombol SAVE CHANGES
8. Klik kotak element yang baru di buat, tahan kemudian pindahkan di atas kotak yang bertuliskan Blog post (di drag & drop)
9. Klik tulisan View Blog untuk melihat hasil dari penambahan kode tadi
10. Bila sudah OK, klik tombol SAVE
11. Selesai.

Cara Membuat Tabel di Blog

Untuk membuat tabel di blog, bisa di lakukan dengan kode HTML yang khusus.
Perintah yang di pakai adalah <table> ..... </table>. Di dalam tabel bisa di masukan beberapa atribut, antara lain yaitu:

bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".
align : untuk mengatur tata letak tulisan yang ada pada tabel, rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right".
cellpadding : untuk mengatur jarak antara tepi sel dengan isi sel di dalam sebuah tabel. Penempatan kodenya : cellpadding="pixel".
border : untuk mengatur tingkat ketebalan garis tepi pada tabel. Penempatan kodenya : boeder="pixel".
cellspacing : untuk mengatur jarak antara sel. Penempatan kodenya : cellspacing="pixel".
height : untuk mengatur tinggi tabel. penempatan kodenya : height="pixel"|"% quot;.
height : untuk mengatur lebal tabel. Penempatan kodenya : height="pixel"|"%".

Sintaks atau kode yang terbentuk yaitu seperti ini :

<table align="left"|"center"|"right"
bgcolor="color"
border="pixel"
cellpadding="pixel"
cellspacing="pixel"
width="pixel"|"%"
height="pixel"|"%">

.....................

</table>

Sebuah elemen TABLE, juga berisi beberapa elemen yaitu CAPTION, elemen TH (table header), elemen TR (table row), serta elemen TD (table row).

Elemen CAPTION berfungsi untuk membuat judul dari sebuah tabel, elemen ini mempunyai atribut align dengan nilai top (yaitu judul di simpan di sebelah atas tabel), juga bottom (yaitu judul berada di sebelah bawah dari tabel).

Sintaks atau kode yang terbentuk yaitu seperti ini :

<caption align="top"|"bottom">

............................

</caption>

Elemen TR (Table Row) yaitu untuk membuat baris, elemen ini di tempatkan di dalam elemen tabel. Atribut yang bisa di pakai di dalam TR antara lain :

align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right quot;.
valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom".
bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".

Sintaks atau kode yang terbentuk yaitu seperti ini :

<tr align="left"|"center"|"right"
bgcolor="color"
valign="top"|"middle"|"bottom">

.....................

</tr>

Elemen TH (Table Header) berfungsi sebagai header sel pada sebuah kolom tabel. Atribut yang bisa di pakai antara lain:

align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right quot;.
valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom".
bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".
colspan : untuk mengatur kolom. Penempatan kodenya : colspan="nomor".
rowspan : untuk mengatur row atau baris. Penempatan kodenya : rowspan="nomor".

Sintaks atau kode yang terbentuk yaitu seperti ini :

<th align="left"|"center"|"right"
bgcolor="color"
valign="top"|"middle"|"bottom"
colspan="number" rowspan="number">

.....................

</th>

Elemen TR (Table Row) adalah elemen untuk membuat kolom. atribut yang bisa di pakai antara lain :

align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right quot;.
valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom".
bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".
colspan : untuk mengatur kolom. Penempatan kodenya : colspan="nomor".
rowspan : untuk mengatur row atau baris. Penempatan kodenya : rowspan="nomor".

Sintaks atau kode yang terbentuk yaitu seperti ini :

<td align="left"|"center"|"right"
bgcolor="color"
valign="top"|"middle"|"bottom"
colspan="number" rowspan="number">

.....................

</td>

Beberapa contoh agar sedikit lebih jelas :
Untuk membuat sebuah tabel tunggal, kodenya seperti ini :

<table width="200" border="1">
<tr>
<td>

Contoh

</td>
</tr>
<table>

Hasilnya :

Contoh

Terlihat bahwa tulisan yang ada, tampak mepet ke dinding tabel, apabila ingin agar tulisan berada persis di tengah tabel, maka cukup tambahkan saja kode align="center" pada kolomnya. misal seperti ini :<table width="200" border="1"><tr><td align="center">Contoh</td></tr></table>Hasilnya :

Contoh

Contoh-contoh di atas menggunakan nilai border 1, coba bandingkan apabila menggunakan nilai border yang lebih besar, misalkan 9. Kodenya kira-kira seperti ini :

<table width="200" border="9">
<tr>
<td align="center">

Contoh

</td>
</tr>
</table>

Hasilnya :

Contoh

Jika ingin kolomnya bertambah, tinggal tambahkan kode kolomnya. contoh dua kolom, kodenya seperti ini :

<table width="300" border="9">
<tr>
<td align="center">

Contoh

</td>
<td align="center">

Contoh juga denk

</td>
</tr>
</table>

Hasilnya :

Contoh

Contoh juga denk

Kalau ingin dua baris, kira-kira kodenya seperti ini :

<table width="300" border="1">
<tr>
<td align="center">

Contoh

</td>
<td align="center">

Contoh juga denk

</td>
</tr>
<tr>
<td align="center">

Contoh

</td>
<td align="center">

Contoh juga denk

</td>
</tr>
</table>

Hasilnya :

Contoh	Contoh juga denk
Contoh	Contoh juga denk

Jika tabelnya ingin di beri warna, tinggal tambahkan kode bgcolor="kode warna". contoh :

<table width="300" border="1" bgcolor="black">
<tr bgcolor="green">
<td align="center">

Contoh

</td>
<td align="center">

Contoh juga denk

</td>
<tr bgcolor="yellow">
<tr>
<td align="center">

Contoh

</td>
<td align="center">

Contoh juga denk

</td>
</tr>
</table>

Hasilnya :

Contoh	Contoh juga denk
Contoh	Contoh juga denk

Sekarang contoh dengan mengunakan fungsi caption serta TH (table header). Misalkan ingin membuat sebuah tabel data dari nama-nama CS, misalkan seperti ini :

<table align="left" border="2" bgcolor="cyan" cellpadding="5"

cellspacing="0" >
<caption align="top"><b>Tabel 1.1</b></caption>
<tr bgcolor="fuchsia">
<th colspan="2">Data CS</th>
</tr>
<tr bgcolor="green">
<th>No.</th>
<th>Nama</th>
</tr>
<tr bgcolor="yellow">
<td>1.</td>
<td>arozaq</td>
</tr>
<tr bgcolor="red">
<td>2.</td>
<td>masruhan</td>
</tr>
<tr bgcolor="blue">
<td>3.</td>
<td>lestiono</td>
</tr>
</table>

Hasilnya :

**Tabel 1.1**
Data CS
No.	Nama
1.	arozaq
2.	masruhan
3.	lestiono

Selain untuk menempatkan tulisan, sebuah tabel pun banyak di gunakan untuk menempatkan gambar agar terlihat lebih rapih. Contoh :

src="http://24rohman.googlepages.com/resepbisnis.gif" alt="mau pinter membuat blog atau website? klik saja di sini"/>	alt="mau software murah tapi sangat berguna? klik saja di sini"/>
alt="mau software murah tapi sangat berguna? klik saja di sini">	src="http://24rohman.googlepages.com/resepbisnis.gif" alt="mau pinter membuat blog atau website? klik saja di sini"/>

Kodenya :

<table width="300" border="1" cellpadding="20">
<tr>
<td align="center">

<a href="http://www.resepbisnis.com/?id=Rohman" target="new"><img

height="58" src="http://24rohman.googlepages.com/resepbisnis.gif" alt="mau pinter

membuat blog atau website? klik saja di sini"/></a>

</td>
<td align="center">

<a href="http://www.obralplus.com/?id=rohman"><img

src="http://24rohman.googlepages.com/aniobral.gif" alt="mau software murah tapi sangat

berguna? klik saja di sini"/></a>

</td>
</tr>
<tr>
<td align="center">

<a href="http://www.obralplus.com/?id=rohman"><img

src="http://24rohman.googlepages.com/aniobral.gif" alt="mau software murah tapi sangat

berguna? klik saja di sini"></a>

</td>
<td align="center">

<a href="http://www.resepbisnis.com/?id=Rohman" target="new"><img

height="58" src="http://24rohman.googlepages.com/resepbisnis.gif" alt="mau pinter

membuat blog atau website? klik saja di sini"/></a>

</td>
</tr>
</table>

jika beranggapan bahwa garis tabel menggangu pemandangan, maka kita bisa mensiasatinya dengan cara

menghilangkan garisnya yaitu nilai bordernya kita buat 0 (nol).
contoh :

<table width="300" border="0" cellpadding="20">
<tr>
<td align="center">

<a href="http://www.resepbisnis.com/?id=Rohman" target="new"><img

height="58" src="http://24rohman.googlepages.com/resepbisnis.gif" alt="mau pinter

membuat blog atau website? klik saja di sini"/></a>

</td>
<td align="center">

<a href="http://www.obralplus.com/?id=rohman"><img

src="http://24rohman.googlepages.com/aniobral.gif" alt="mau software murah tapi sangat

berguna? klik saja di sini"/></a>

</td>
</tr>
<tr>
<td align="center">

<a href="http://www.obralplus.com/?id=rohman"><img

src="http://24rohman.googlepages.com/aniobral.gif" alt="mau software murah tapi sangat

berguna? klik saja di sini"></a>

</td>
<td align="center">

<a href="http://www.resepbisnis.com/?id=Rohman" target="new"><img

height="58" src="http://24rohman.googlepages.com/resepbisnis.gif" alt="mau pinter

membuat blog atau website? klik saja di sini"/></a>

</td>
</tr>
</table>

hasinya :

src="http://24rohman.googlepages.com/resepbisnis.gif" alt="mau pinter membuat blog atau website? klik saja di sini"/>	alt="mau software murah tapi sangat berguna? klik saja di sini"/>
alt="mau software murah tapi sangat berguna? klik saja di sini">	src="http://24rohman.googlepages.com/resepbisnis.gif" alt="mau pinter membuat blog atau website? klik saja di sini"/>

Catatan : Karena kode diatas merupakan kode HTML, maka pada saat posting harus pada posisi Edit HTML jangan pada posisi Compose. Apabila ingin di simpan di sidebar, pilih yang untuk HTML/javaScript.

2.9.10

Ubah Background Web dengan Javascript

JavaScript adalah bahasa pemrograman berbasis prototipe yang berjalan disisi klien, jadi gak perlu install server web localhost untuk menjalankannya.
Jika kita berbicara dalam konteks web, sederhananya, kita dapat memahami JavaScript sebagai bahasa pemrograman yang berjalan di browser.
Ada beberapa hal yang harus diperhatikan dalam pengelolaan pemrograman JavaScript, diantaranya JavaScript adalah “case sensitive”, yang artinya JavaScript membedakan huruf besar dan huruf kecil, Jika Anda pernah belajar bahasa pemrograman seperti Turbo C atau C++, maka sama seperti bahasa pemrograman tersebut, dimana huruf T tidak sama dengan huruf t. Dalam bahasa pemrograman JavaScript juga, sebagai contoh fungsi perintah var tidak boleh ditulis Var dan juga tidak boleh ditulis VAR (huruf besar semua), yang benar adalah var (huruf kecil semua). Perintah lain adalah new Date tidak boleh ditulis new date (huruf kecil semua), dan banyak yang lainnya.
Berikut kode javascript untuk membuat link yang bisa menyulap warna latar belakang website. Berikut adalah websitenya:

<a href="#" onMouseOver="document.bgColor='red'">Warna Merah</a>
<a href="#" onMouseOver="document.bgColor='blue'">Warna Biru</a>
<a href="#" onMouseOver="document.bgColor='green'">Warna Hijau</a>

Silakan simpan di halaman web atau blog, kemudian langsung uji coba script.

PENJELASAN SCRIPT
Sedikit penjelasan untuk kumpulan kode di atas.

Pertama kita simpan tulisan Warna Merah, Warna Biru dan Warna Hijau di dalam tag <a> yang artinya memberikan link. Tapi biar ketika diklik gak lari ke halaman lain, maka kita isikan href nya dengan tanda pagar (#).

onMouseOver="document.bgColor='blue'"

Kode di atas berarti ketika kursor berada di atas text, maka jalankan perintah mengubah warna latar dengan javascript document.bgColor='blue' .

Sekian, jika ingin mengganti warnanya silakan ganti tulisan blue dengan warna lainnya.

30.8.10

Membuat Background Posting

Pasang background posting biar ada variasi tidak monoton dan membosankan!
Dalam membuat background ada dua alternatif yaitu membuat background dengan warna dan membuat background dengan bantuan gambar.

Membuat background dengan warna
Agar warna background postingan bisa berbeda-beda setiap postingan, anda perlu melakukan :
Ketika anda akan memulai untuk membuat postingan, pilih tab Edit HTML jangan pilih Compose. Awali postingan anda dengan kode seperti ini :
<div style="background:kode_warna_disini;">
<div style="background:#D9D7D7; text-align:justify; font-size:120%">
Dan diakhir postingan, harus di tutup dengan kode seperti ini :
</div>

Keterangan :
kode #D9D7D7 menunjukkan background berwarna abu-abu
kode justify menunjukkan jenis huruf
kode 120% menunjukkan besar huruf

Membuat background dengan Gambar
Agar gambar background postingan bisa bmuncul di setiap postingan, anda perlu melakukan upload gambar supaya di dapat kode gambar,kalu sudah dapat kodenya tinggal masukan ke kode skrip dibawah ini :
<div style="background:url(kode_gambar) no-repeat;">
Dan diakhir postingan, harus di tutup dengan kode seperti ini :
</div>

catatan : ganti kode_gambar dengan kode gambar yang sudah di upload

29.8.10

Membuat Efek Blink ( kelap-kelip ) Pada Teks

Efek Blink berfungsi sebagi menarik perhatian pada pengunjung supaya fokus terhadap text yang kelap kelip.
Cara Membuat Efek Kelap Kelip adalah sebagai berikut :
1. Login ke Blogger.com
2. Pilih Rancangan / Tata letak
3. Tambah Gadget baru ( pilih edit HTML/Javascript )
4. Copy paste kode di bawah ini
<blink>"Text Yang Akan Muncul"</blink>
Hasilnya :
"Text Yang Akan Muncul"
Keterangan : Kode yang berwarna biru adalah text yang akan muncul dan kelap kelip jadi ganti sesuai yang diinginkan, OK! Semoga bermanfaat................

27.8.10

Entri Populer Blogger ( New )

Ada yang baru di Blogger!!!
Entri Populer adalah sebaris artikel yang sering dicari / dikunjungi, dan bagaimana cara memasangnya ikuti langkah-langkah berikut
1. Login ke blogger kemudian pilih menu "Rancangan".
2. Kemudian klik link "Add a gadget" dimana akan ditempatkan animasi flash.
3. Pilih "Entri Populer"

4. Simpan.

23.8.10

Cara Pasang Flash di Blog ( Animasi )

Untuk memasang flash/ animasi ke dalam blog, yang diperlukan adalah file flash yang biasanya ber-extensi .swf
upload file tersebut ke hosting. misal di 4shared.com, potobucket.com atau tempat hosting lainnya. File animasi flash tersebut bisa dijadikan hiasan pada blog atau bisa juga dijadikan hiasan di header sehingga membuat blog menjadi lebih animatif.

Untuk memasang flash pada blog caranya sebagai berikut :

1. Login ke blogger kemudian pilih menu "Layout".
2. Kemudian klik link "Add a gadget" dimana akan ditempatkan animasi flash.
3. Pilih "HTML/Javascript" kemudian taruh script berikut :

<embed src="http://www.4shared.com/embed/327890257/6b3ef0b2/preview.swf" width="150" height="150" allowfullscreen="true" allowscriptaccess="always"></embed><a href="http://onoway.blogspot.com/p/produk.html"></a>

Keterangan :
Kode warna biru menunjukan kode gambar/animasi yang di upload dari 4shared / potobucket
Kode warna merah menunjukan kode links yang di tuju

Hasilnya :

20.8.10

19.8.10

Membagi Dua Kolom Header

Membagi header menjadi dua kolom, bukanlah pekerjaan sulit tapi jangan di anggap remeh.
Langkah-langkahnya :
1. Login ke blogger dengan ID anda.
2. Klik Layout.
3. klik tab Edit HTML
/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}

#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}

4. hapus kode di atas, lalu ganti dengan kode berikut ini :
/* Header
===================================
*/

#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}

#head-inner {
width:600px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}

#r_head{
width:300px;
float:left;
padding-top:10px;
}

5. Temukan kode seperti bawah ini :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>

6. Hapus kode di atas, lalu ganti dengan kode di bawah ini :
<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

7. Klik tombol Simpan Perubahan.
8. Selesai.

18.8.10

Menghilangkan Angka Dalam Label

Trick Menghilangkan Angka Dalam Label hanya dengan menghapus sedikit kode di dalam kode template.

Langkah-langkahnya :

Sign in ke blogger
Klik Layout
Klik menu Elemen Halaman
Klik tab Edit HTML
Beri tanda centang pada kotak di samping tulisan Expand Template Widget
Cari kode berikut (<data:label.count/>)
Jika anda sudah menemukan kode yang seperti di atas, silahkan hapus/delete
Klik tombol Simpan Template

16.8.10

Image dalam Kode Marquee

Kode Marquee adalah kode untuk membuat text ataupun gambar bisa bergerak / berjalan.

Prinsip dasarnya hanya perlu memasukan kode text / gambar ke dalam kode marquee, kode marquee sendiri adalah <marquee> dan </marquee>

Untuk membuat foto tampil harus menggunakan kode html tambahan ( merah ):
<img src="http://i961.photobucket.com/albums/ae91/arozaq/mitos.jpg" height="100" width="100" />

Contoh :

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

<img  src="

http://i961.photobucket.com/albums/ae91/arozaq/mitos.jpg

"  height="100" width="100" />
<br/><br/>
<img  src="

http://i961.photobucket.com/albums/ae91/arozaq/mitos.jpg

"  height="100" width="100" />

</marquee>

Hasil :

http://i961.photobucket.com/albums/ae91/arozaq/mitos.jpg" height="100" width="100" />

http://i961.photobucket.com/albums/ae91/arozaq/mitos.jpg" height="100" width="100" />

Keterangan :

Kode <br/> untuk memisahkan beberapa buah gambar ( tidak berdempetan ).
Kode

onmouseover="this.stop()"  onmouseout="this.start()"  scrollamount="2" direction="up"  width="100%" height="200"  align="center" berfungsi ketika mouse menyorot pada gambar akan berhenti dan sebliknya.

Variasi lain dengan memakai bingkai ( kode warna merah )

<table border="10" cellpadding="3" height="105" width="105"/>
<tr>
<td>
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="102" height="102" align="center">

<img src="

http://i961.photobucket.com/albums/ae91/arozaq/mitos.jpg

" height="100" width="100" />
<br/>
<img src="

http://i961.photobucket.com/albums/ae91/arozaq/mitos.jpg

" height="100" width="100" />

</marquee>
</td>
</tr>
</table>

Tambahkan warna background biru dengan menambahkan kode berikut ( biru )

<table border="10" cellpadding="3" height="105" width="105" bgcolor="#b1c3d9" />
<tr>
<td>

5.6.11

Membuat Sub-Menu Navigasi Diatas Hider

23.10.10

Cara Membuat Random Post Dinamis

30.9.10

Tambah Title Pada Judul Post blogger

16.9.10

Membuat Artikel Berhubungan dengan Gambar ( Related Posts )

15.9.10

Tips Menampilkan Postingan Hanya Judulnya Saja

Tips Menghilangkan Pesan Pencarian Blogger

Menghilangkan Icon Obeng dan Tang / Quick edit Blogger

11.9.10

Pasang Skrip Alert Di Blog

10.9.10

Membuat Drop Cap

4.9.10

Membuat Penggalan Artikel

Cara Membuat Tabel di Blog

2.9.10

Ubah Background Web dengan Javascript

30.8.10

Membuat Background Posting

29.8.10

Membuat Efek Blink ( kelap-kelip ) Pada Teks

27.8.10

Entri Populer Blogger ( New )

23.8.10

Cara Pasang Flash di Blog ( Animasi )

20.8.10

Menghilangkan Garis Bawah Link

19.8.10

Membagi Dua Kolom Header

18.8.10

Menghilangkan Angka Dalam Label

16.8.10

Image dalam Kode Marquee