Belajar Posting Blog dan Trik Ngeblog dari Internet Untuk Internet

Tips dan Trik Ngeblog 1


Cara membuat buku tamu sembunyi

1. Login ke blogger, masuk ke dashboard, pilih "rancangan" / "layout" yang ada di blog kamu
2. pilih "edit tata letak" dan pilih "tambah gadget". Pilih "HTML/Javascript" dan pastekan kode berikut:
<style type="text/css">
#gb{
position:fixed;
top:30px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()">   </div>

<div class="gbcontent">

kode shoutbox


<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Nah, setelah di paste JANGAN dulu di save! Kita akan pergi mendaftar di situs shoutbox, karena kode di atas belum ada apa-apa, yang mucul nanti cuman tulisan saja. Kalau kamu sudah punya shoutbox sendiri, kamu tinggal paste kode shoutbox kamu di tempat yang bertuliskan "
kode shoutbox" dan langsung save, kamu bisa melewati langkah 3 dan 4. Tapi, kalau kamu belum punya, maka kamu harus melanjutkan tutorial ini.

3. Buka tab baru dan kunjungi http://www.shoutmix.com/ untuk mendapatkan shoutbox yang gratis dan persis seperti yang saya punya saat ini (3-july-2010). Daftar, kemudian buat shoutbox kamu.

4. Biarkan desainnya standar atau mau kamu beri warna lain. Terserah. Setelah itu klik get codes untuk mendapatkan kodenya. Kamu juga bisa mengatur tinggi serta lebar shoutbox di halaman tersebut. copy kode yang ada dan timpa tulisan "
[timpa tulisan ini dengan kode shoutbox kamu]" dengan kode tersebut.

5.setelah ditimpa, kamu save dan lihat blog kamu. Kalau kamu merasa buku tamu kamu kurang tinggi, atau ketinggian kamu tinggal ubah angka "
top:30px" menjadi yang kamu mau. Semakin kecil angkanya semakin tinggi bukunya, begitupun sebaliknya. Perkirakan angka yang tepat, save, lihat hasil. kalau kurang mantap ulangi langkah tadi.



Cara membuat background blog bergaya slide show

1. Buat sebuah blog baru dengan menggunakan template standar dari blogspot yaitu template minima putih biasa yang 2 kolom. Kalo kepengen memakai yang tiga kolom, boleh sobat download di sini. Atau kepengen yang multi kolom alias kebanyakan kolom? download di sini.

2. Setelah blogmu jadi, isi dengan sembarang posting, jangan lupa cantumkan beberapa buah label di kotak labels for this post pada ruang postingmu.

3. Pasang read more nya.

5. Pasang widget label di sidebar blogmu.

Nah, sekarang kita masuk ke tahap pembuatan backgroundnya.


A. MEMASANG BACKGROUND UTAMA

1. Kopi kode di bawah ini, lalu edit dengan menggunakan worpad atau document txt.

background-image:url('http://gambar anda.gif');background-color:transparent;
background-attachment: fixed;
background-position:top left;
background-repeat:no-repeat;

Ganti url gambar yang berwarna merah dengan url gambarmu.
kode top left yang berwarna biru bisa kamu ganti dengan top right, bottom left, bottom right, left, center atau right. Sesuaikan dengan besarnya gambarmu. Bila menggunakan gambar berukuran besar ganti saja dengan center.

Kode no-repeat yang berwarna hijau adalah kode yang menyatakan bahwa gambar yang kamu pasang tidak memerlukan pengulangan, Nah, kalau memakai gambar berukuran kecil semisal gambar texture, hapus saja kode no-repeat tersebut.
2. Login ke blogger --> Klik Customize --> Layout --> Edit html. Cari kode seperti di bawah ini :
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}


3. Rubah kode di atas dengan menambahkan kode hasil editan kamu tadi sehingga hasilnya menjadi seperti di bawah ini : Perhatikan baik-baik penempatan kode hasil editan yang berwarna biru.
body {
background:$bgcolor;
background-image:url('http://gambar anda.gif');
background-color:transparent;
background-attachment: fixed;
background-position:top left;
background-repeat:no-repeat;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

4. Simpan hasil pekerjaanmu dengan mengklik tombol SAVE TEMPLATE.

B. MEMASANG BACKGROUND HALAMAN DEPAN/FRONT PAGE

Tahap pertama

1. Kopi kode seperti di bawah ini, edit terlebih dahulu dengan menggunakan worpad atau document txt.
<style type="text/css">
{ background-color:transparent; }
body {background-image:url('http://gambar anda.jpg');
background-attachment: fixed;
background-position:bottom right;
background-repeat:no-repeat;
</style>

Ganti url gambar yang berwarna biru dengan url gambarmu.

Atur letak gambar dengan merubah kode bottom right yang berwarna kuning

Atur pengulangan gambar bila diperlukan dengan menghapus kode no-repeat yang berwarna hijau. Bila tidak biarkan saja, jangan di hapus.


Tahap ke_dua

Tahap ke dua adalah tahap pemasangan kode hasil editan tadi ke sidebar blog anda, caranya sebagai berikut :

1. Login ke blogger --> Klik Customize --> Layout --> add a gadget --> HTML/JavaScript.

2. Isi title/judul dengan (misalnya) css1.

3. Pastekan kode hasil editan tadi ke ruang content.

4. Klik save untuk menyimpan hasil hasil kerjamu.

Tahap ke_3
Tahap ini adalah tahapan dimana kita akan mengatur css background yang bkita beri nama css1 tadi untuk tampil di halaman depan saja dan akan menghilang bila kita bergerak ke halaman selanjutnya.

1. Login ke blogger --> Klik Customize --> Layout --> Edit html. Centeng kotak Expand Widget Templates

2. Cari nama css background tadi, lalu selipkan dua buah script seperti tampak di bawah ini. Perhatikan penempatan kode yang berwarna biru
<b:widget id='HTML20' locked='false' title='CSS1' 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 != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Secara default, setiap penambahan elemen halaman yang kita lakukan akan dinamai secara otomatis oleh blogspot denag HTML1, HTML2 dan seterusnya.

CSS1 nama dari elemen halaman yang kita tambahkan tadi untuk memudahkan kita mencari elemen yang bersangkutan di ruang edit HTML. Jadi sebaiknya setiap widget/aksesoris kita beri nama.

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

dan kode
</b:if>

adalah kode yang membuat elemen halaman yang kita pilih hanya tampil di halaman depan dan akan menghilang bila kita bergerak ke halaman selanjutnya.

C. MEMASANG BACKGROUND UNTUK HALAMAN SELANJUTNYA

Di sini kerja kita sedikit mudah. Bukankah tadi anda punya kode css background yang anda edit dengan worpad atau document txt lalu anda pasang di side bar dan anda beri nama css1? Nah manfaatkan kode tersebut. Ikuti langkah-langakahnya seperti di mulai dari pengeditan css tersebut hingga css background tersebut terpasang di sidebar blog. Ingat !!! untuk memudahkan kita mencari css backround tersebut, berilah nama misalnya css2.

Untuk mengatur agar css backround yang kita beri nama css2 tadi anda tinggal mengikuti langkah MEMASANG BACKGROUND HALAMAN DEPAN/FRONT PAGE tahap ke_tiga, point 1 sampai 2. Kemudian selipkan 2 baris script seperti tampak pada kode di bawah ini : perhatikan letak penempatan kode yang berwarna biru.

<b:widget id='HTML21' locked='false' title='CSS2' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Sekarang blog anda bisa tampil dengan background yang berbeda pada setiap halamannya.

Cara membuat Cursor Bertabur Bintang

Cursor yang bertabur bintang adalah salah satu cara untuk mempercantik tampilan blog.karena saat cursor di geser kursor tersebut akan mengeluarkan bintang-bintang. Contohnya Bisa kalian lihat disini.

Setelah melihat Contohnya Tertarik tidak sobat untuk membuatnya ?jika tertarik silakan ikuti tutorial Cara Membuat Cursor Bertabur Bintang di bawah ini untuk Membuat Cursor Bertabur Bintang.


1.Login ke blogger.

2.Klik Tatat Letak.

3.Klik Tambah Gadget.

4.Pilih HTML/javascript.



5.Letakkan HTML di bagian paling atas..

6.Pilih lalu Copy dan paste kode di bawah ini ke dalah kotak HTML/javascript tadi .


Bintang biru

<script src="http://denisahlan.netau.net/bintang.biru.js" type="text/javascript"></script>


Bintang  hijau


<script src="http://denisahlan.netau.net/bintang.hijau.js" type="text/javascript"></script>


Bintang  merah

<script src="http://denisahlan.netau.net/bintang.merah.js" type="text/javascript"></script>


Bintang  putih

<script src="http://denisahlan.netau.net/bintang.putih.js" type="text/javascript"></script>

Bintang ungu
<script src="http://denisahlan.netau.net/bintang.ungu.js" type="text/javascript"></script>


Cara membuat tulisan bergerak pada tab browser

untuk membuat tulisan tab browser anda bergerak langkah-langkah nya sebagai berikut:
  1. log in ke blogger
  2. pada tampilan dasbor klik rancangan
  3. pilih elemen laman
  4. klik tambah Gadget
  5. tambah HTML/java script
  6. copy code dibawah ini dan paste ke HTML/ java script




<script>
function tb8_makeArray(n){
this.length = n;
return this.length;
}

tb8_messages = new tb8_makeArray(3);
tb8_messages[0] = "Selamat Datang di web medi ";
tb8_messages[1] = "Belajar bareng yuk....";
tb8_messages[2] = "Moga dapat bermanfaat ^_^";
tb8_rptType = 'infinite';
tb8_rptNbr = 5;
tb8_speed = 100;
tb8_delay = 2000;
var tb8_counter=1;
var tb8_currMsg=0;
var tb8_tekst ="";
var tb8_i=0;
var tb8_TID = null;
function tb8_pisi(){
tb8_tekst = tb8_tekst + tb8_messages[tb8_currMsg].substring(tb8_i, tb8_i+1);
document.title = tb8_tekst;
tb8_sp=tb8_speed;
tb8_i++;
if (tb8_i==tb8_messages[tb8_currMsg].length){
tb8_currMsg++; tb8_i=0; tb8_tekst="";tb8_sp=tb8_delay;
}
if (tb8_currMsg == tb8_messages.length){
if ((tb8_rptType == 'finite') && (tb8_counter==tb8_rptNbr)){
clearTimeout(tb8_TID);
return; } tb8_counter++;
tb8_currMsg = 0;
}
tb8_TID = setTimeout("tb8_pisi()", tb8_sp);
}
tb8_pisi()
</script>

7. ganti kode yang warna merah dgn kata-kata kalian sendiri
8. pilih simpan dan lihat blog

Cara menghilangkan tulisan posting lama/ posting baru dan beranda

Silahkan ikuti cara cara berikut ini:

cara menghilangkan tulisan posting lebih baru:, posting lama dan beranda/home:

1. login ke blog
2. klick rancangan
3. klick edit html
4. cari kode seperti dibawah ini:


#blog-pager-newer-link{
float:left;
}

setelah ketemu ganti dengan kode  dibawah ini:


#blog-pager-newer-link{
display:none;
}

cara menghilangkan tulisan posting lama:

cari kode seperti dibawah ini:

#blog-pager-older-link{
float:right;
padding-right:5px}

lalu ganti dengan kode  dibawah ini:

#blog-pager-older-link{
display:none;}

cara menghilangkan tulisan beranda/ home:

cari kode seperti dibawah ini:

#blog-pager{
text-align:center;
}

lalu ganti dengan kode dibawah ini:

#blog-pager{
display:none;}

selesai simpan template.


Cara Menghilangkan Tulisan Langgan: Entri (Atom) di Blogspot

Cara Menghilangkan Tulisan Langgan: Entri (Atom) di Blogger / Blogspot - Merasa terganggu dengan tulisan Langgan: Entri (Atom) di blog anda? Itu bisa dihilangkan dengan mudah.

Caranya:

1. Masuk Layout, Edit HTML. Centang Expan Template Widget

2. Cari kode:

<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>

3. Hapus kode di atas (no. 2)

4. Simpan dan lihat hasilnya.

Selamat mencoba.


CURSOR JAM ANALOG DAN TANGGAL DI BLOGGER

info : http://www.karsono.co.cc
Pembuatan kursor ini aku temukan dari web rainbow scriptmania, tetapi kodenya sudah dimodifikasi sesuai dengan keinginan, dan hasilnya bisa dilihat disini.
Proses pembuatannya, copy saja kode css dibawah ini
.css1{
position:absolute;top:0px;left:0px;
width:16px;height:16px;
font-family:Arial,sans-serif;
font-size:16px;
text-align:center;
font-weight:bold;
}
.css2{
position:absolute;top:0px;left:0px;
width:10px;height:10px;
font-family:Arial,sans-serif;
font-size:10px;
text-align:center;
}
dan taruh atau pastekan saja kode diatas, tepat diatasnya kode dibawah ini:
]]></b:skin>

Selanjutnya untuk kode javascript, sebelum di copy ke blogger, kode javascript harus di parse terlebih dahulu, caranya copy kode javacript dibawah ini, dan buka web www.blogcrowds.com atau klik saja linknya langsung:

<SCRIPT LANGUAGE="JavaScript">
<!-- http://rainbow.arch.scriptmania.com -->
if (document.getElementById&&!document.layers){

dCol='#00ff00';//warna tanggal.
fCol='#000000';//warna angka jam.
sCol='#00ff00';//warna detik.
mCol='#0066FF';//warna menit.
hCol='#FF3300';//warna Jam.
lCol='#cccccc';//nama blog.

del=0.6; //Follow mouse speed.
ref=40; //Run speed (timeout).

var ieType=(typeof window.innerWidth != 'number');
var docComp=(document.compatMode);
var docMod=(docComp && docComp.indexOf("CSS") != -1);
var ieRef=(ieType && docMod)
?document.documentElement:document.body;
theDays=new Array("MINGGU","SENIN","SELASA","RABU","KAMIS","JUM'AT","SABTU");
theMonths=new Array("JANUARI","FEBRUARI","MARET","APRIL","MEI","JUNI","JULI","AGUSTUS","SEPTEMBER","OKTOBER","NOVEMBER","DESEMBER");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900;
tmpdate=" "+theDays[date.getDay()]+" "+ day +" "+theMonths[date.getMonth()]+" "+year;

D=tmpdate.split("");
K='';
K=K.split(" ");
L=K.length;
N='3 4 5 6 7 8 9 10 11 12 1 2';
N=N.split(" ");
F=N.length;
H='...';
H=H.split("");
M='....';
M=M.split("");
S='.....';
S=S.split("");
siz=40;
eqf=360/F;
eql=360/L;
eqd=360/D.length;
han=siz/5.5;
ofy=-7;
ofx=-3;
ofst=70;
tmr=null;
vis=true;
mouseY=0;
mouseX=0;
dy=new Array();
dx=new Array();
zy=new Array();
zx=new Array();
tmps=new Array();
tmpm=new Array();
tmph=new Array();
tmpf=new Array();
tmpl=new Array();
tmpd=new Array();
var sum=parseInt(D.length+L+F+H.length+M.length+S.length)+1;
for (i=0; i < sum; i++){
dy[i]=0;
dx[i]=0;
zy[i]=0;
zx[i]=0;
}

algn=new Array();
for (i=0; i < D.length; i++){
algn[i]=(parseInt(D[i]) || D[i]==0)?10:9;
document.write('<div id="_date'+i+'" class="css2" style="font-size:'+algn[i]+'px;color:'+dCol+'">'+D[i]+'</div>');
tmpd[i]=document.getElementById("_date"+i).style;
}
for (i=0; i < L; i++){
document.write('<div id="_gue'+i+'" class="css2" style="color:'+lCol+'">'+K[i]+'</div>');
tmpl[i]=document.getElementById("_gue"+i).style;
}
for (i=0; i < F; i++){
document.write('<div id="_face'+i+'" class="css2" style="color:'+fCol+'">'+N[i]+'</div>');
tmpf[i]=document.getElementById("_face"+i).style;
}
for (i=0; i < H.length; i++){
document.write('<div id="_hours'+i+'" class="css1" style="color:'+hCol+'">'+H[i]+'</div>');
tmph[i]=document.getElementById("_hours"+i).style;
}
for (i=0; i < M.length; i++){
document.write('<div id="_minutes'+i+'" class="css1" style="color:'+mCol+'">'+M[i]+'</div>');
tmpm[i]=document.getElementById("_minutes"+i).style;
}
for (i=0; i < S.length; i++){
document.write('<div id="_seconds'+i+'" class="css1" style="color:'+sCol+'">'+S[i]+'</div>');
tmps[i]=document.getElementById("_seconds"+i).style;


}

function mouse(e){
var msy = (!ieType)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number'){
mouseY = e.pageY + ofst - msy;
mouseX = e.pageX + ofst;
}
else{
mouseY = e.clientY + ofst - msy;
mouseX = e.clientX + ofst;
}
if (!vis) kill();
}
document.onmousemove=mouse;

function winDims(){
winH=(ieType)?ieRef.clientHeight:window.innerHeight;
winW=(ieType)?ieRef.clientWidth:window.innerWidth;
}
winDims();
window.onresize=new Function("winDims()");

function ClockAndAssign(){
time = new Date();
secs = time.getSeconds();
sec = Math.PI * (secs-15) / 30;
mins = time.getMinutes();
min = Math.PI * (mins-15) / 30;
hrs = time.getHours();
hr = Math.PI * (hrs-3) / 6 + Math.PI * parseInt(time.getMinutes()) / 360;

for (i=0; i < S.length; i++){
tmps[i].top=dy[L+D.length+F+H.length+M.length+i]+ofy+(i*han)*Math.sin(sec)+scrollY+"px";
tmps[i].left=dx[L+D.length+F+H.length+M.length+i]+ofx+(i*han)*Math.cos(sec)+"px";
}
for (i=0; i < M.length; i++){
tmpm[i].top=dy[L+D.length+F+H.length+i]+ofy+(i*han)*Math.sin(min)+scrollY+"px";
tmpm[i].left=dx[L+D.length+F+H.length+i]+ofx+(i*han)*Math.cos(min)+"px";
}
for (i=0; i < H.length; i++){
tmph[i].top=dy[L+D.length+F+i]+ofy+(i*han)*Math.sin(hr)+scrollY+"px";
tmph[i].left=dx[L+D.length+F+i]+ofx+(i*han)*Math.cos(hr)+"px";
}
for (i=0; i < F; i++){
tmpf[i].top=dy[L+D.length+i]+siz*Math.sin(i*eqf*Math.PI/180)+scrollY+"px";
tmpf[i].left=dx[L+D.length+i]+siz*Math.cos(i*eqf*Math.PI/180)+"px";
}
for (i=0; i < D.length; i++){
tmpd[i].top=dy[L+i]+siz*1.5*Math.sin(-sec+i*eqd*Math.PI/180)+scrollY+"px";
tmpd[i].left=dx[L+i]+siz*1.5*Math.cos(-sec+i*eqd*Math.PI/180)+"px";
}
for (i=0; i < L; i++){
tmpl[i].top=dy[i]+siz*1.9*Math.sin(sec+i*eql*Math.PI/180)+scrollY+"px";
tmpl[i].left=dx[i]+siz*1.9*Math.cos(sec+i*eql*Math.PI/180)+"px";

}
}

buffW=(ieType)?80:90;
function Delay(){
scrollY=(ieType)?ieRef.scrollTop:window.pageYOffset;
if (!vis){
dy[0]=-100;
dx[0]=-100;
}
else{
zy[0]=Math.round(dy[0]+=((mouseY)-dy[0])*del);
zx[0]=Math.round(dx[0]+=((mouseX)-dx[0])*del);
}
for (i=1; i < sum; i++){
if (!vis){
dy[i]=-100;
dx[i]=-100;
}
else{
zy[i]=Math.round(dy[i]+=(zy[i-1]-dy[i])*del);
zx[i]=Math.round(dx[i]+=(zx[i-1]-dx[i])*del);
}
if (dy[i-1] >= winH-80) dy[i-1]=winH-80;
if (dx[i-1] >= winW-buffW) dx[i-1]=winW-buffW;
}

tmr=setTimeout('Delay()',ref);
ClockAndAssign();
}
window.onload=Delay;
}
//-->
</script>

Setelah di parse copy hasil parse kode, kemudian taruh atau pastekan, tepat diatasnya kode di bawah ini:

</body>

Sedangkan untuk perubahan, bisa dilihat kode javascript yang berwarna merah, seperti dibawah ini
dCol='#00ff00';//warna tanggal.
fCol='#E119B9';//warna angka jam.
sCol='#C6F50A';//warna detik.
mCol='#0066FF';//warna menit.
hCol='#D68EE8';//warna Jam.
lCol='#ABB6B6';//nama blog.
rubah warna sesuai keinginan, kalau ingin melihat kode warna bisa dilihat di bawah ini

KODE HTML WARNA DI BLOG 

Untuk membuat postingan blog ataupun interface blog supaya lebih atraktif, tentunya diperlukan perwanaan di setiap sudut postingan blog, yang sesuai dengan selera kita....
Dan untuk melakukan pewarnaan di blog, di perlukan beberapa kode html yang sesuai....
bisa dilihat di web rekan kita :
http://www.karsono.co.cc/2009/04/kode-html-warna-di-blog.html

CARA  MEMBUAT GROUND HUJAN SALJU



Dalam kesempatan ini saya akan sharing tentang cara membuat tampilan background pada blog seperti  hujan salju.
Banyak sekali permintaan dari teman-teman  yang menanyakan bagaimana cara membuat Membuat Background Hujan Salju seperti blog ini..
Sebenarnya cara membuat atau cara menampilkannya cukup simple dengan menggunakan CSS..
Ok... langsung saja ikuti langkah - langkah dibawah ini :




Script Kode Untuk Membuat Background Hujan Salju  :

<style type="text/css">
<!--
body { background-image: url(https://lh6.googleusercontent.com/_VyCMMkwhjoA/TXGoO13F9yI/AAAAAAAAArs/mDr-G_K1ZLM/Bg-www.kikiyo.co.cc.gif); background-color: #4A6873; }
//Visit To www.kikiyo.co.cc for this script
-->
</style>
 



Langkah - langkahnya :
1.Masuk Ke Akun Blogger Anda
2.Klik Rancangan atau Tata letak 
3.Lalu Klik Tambah Gadget
4.Pilih HTML/JavaScript
5.Copy paste script kode diatas didalam HTML/JavaScript
6.Klik Simpan 

Note jika kelihatan tidak bagus, lakukan langkah 
1. Masuk ke Perancang
2. klik background kemudian klik tile
3. klik simpan


Membuat Banner berkedip



Kita memakai website www.gifninja.com  Tinggal siapkan aja 2 gambar yang tingkat kecerahannya berbeda. Atau paling tidak kalau di gandengnkan nggak terlalu jauh. Sehingga image yang terbentuk bisa bagus.

Untuk menyiapkan gambar bisa pakai potoshop atau program microsoft paint. Yang penting buatlah 2 gambar.

Kemudian anda msuk ke website pembuat banner di www.gifninja.com. Terus upload masing-masing gambar. Bisa2 sampai 4 gambar. Kemudian pilih kecepatannya. Kalau sudah sesuai tinggal klik 'make mygift'. Kemudian lihat hasilnya sudah sesuai atau belum. Kecepatannya sudah sesuai juga atau belum. KAlau belum anda klik 'No - it's too slow/fast' tinggal menurunkan atau menaikkan kecepatannya. KAlau sudah cocok..baru klik ' Yes - it's fantastic! kasih nama file ddan tags nya dan klik 'save gift'. Tinggal ambil kode HTML untuk ditanam di blog atau forum
Setelah mendapatkan kita edit sedikit
aslinya
<a href="http://www.gifninja.com"><img src="http://www.gifninja.com/Workspace/fe3e9f5a-496f-4b4e-b45f-ca7e8eb9a46b/output.gif" /></a><center>gifninja.com <a href="http://www.gifninja.com">Create custom animated gifs at gifninja.com!</a></center>
dirubah
<a href="http://jasangeblogging.blogspot.com/p/order.html">
</a><center></center><a href="http://jasangeblogging.blogspot.com/p/order.html"><img style="width: 91px; height: 55px;" src="http://www.gifninja.com/Workspace/fe3e9f5a-496f-4b4e-b45f-ca7e8eb9a46b/output.gif" /></a>

Keterangan :
Warna merah diganti dengan link tujuan
Warna ungu dihapus juga boleh