Menambah Widget Di Atas Posting Blog

Langkah-langkah untuk menambahkan widget di atas Posting Blog adalah sebagai berikut.
1. Login ke http://blogger.com hingga masuk Dasbor
2. Klik Tata Letak (layout)
3. Klik tab Edit HTML
4. Cari dan temukan kode seperti di bawah ini.
<b:section class='main' id='main' showaddelement='no'>
5. Kemudian ubahlah showaddelement menjadi yes sehingga menjadi seperti di bawah ini.
<b:section class='main' id='main' showaddelement='yes'>
6. Kemudian Simpan Template
7. Selesai


Blog Advertising

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

Membuat Footer Multi Kolom

1. Login ke http://blogger.com hingga masuk Dasbor
2. Klik Tata Letak (layout)
3. Klik tab Edit HTML
4. Kemudian cari dan temukan kode seperti di bawah ini.
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
Pada contoh ini, Tips Trik Blog menggunakan template Son Moto, template default kepunyaan blogspot. Mungkin Anda akan menemui kode yang berbeda pada template non-blogspot namun pada prinsipnya sama.
Ada juga kode-nya seperti di bawah ini.

<div id='footer-wrap1'><div id='footer-wrap2'>
<b:section class='footer' id='footer'>
<b:widget id='Text1' locked='false' title='' type='Text'/>
</b:section>
</div></div>

5. Ganti kode yang berwarna biru dengan kode di bawah ini.
<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div><!--kolom pertama-->

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div><!--kolom kedua-->

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div><!--kolom ketiga-->

<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p><!--garis horisontal-->

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>
Catatan :
Anda dapat merubah width (berwarna merah) dengan komposisi prosentase yang berbeda sesuai selera masing-masing.
Jika Anda ingin menambahkan kolom lagi, Anda juga harus merubah komposisi prosentase tersebut sedemikian rupa sehingga lebarnya menjadi 100%.
Anda pun dapat merubah warna dan panjang garis horisontal dengan merubah prosentasenya atau bahkan jika tidak menginginkannya, Anda dapat menghapusnya.
6. Kemudian letakkan kode berikut ini di atas kode ]]></b:skin>
#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}
7. Kemudian Simpan Template
8. Selesai
Nah, setelah berhasil, pada menu elemen halaman, Anda akan mendapati footer dengan multi kolom, seperti di bawah ini.
Sekarang Anda dapat menambahkan widget berjejer secara horizontal di footer blog Anda, seperti Anda lihat pada blog ini.



Blog Advertising

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

Membuat Judul Blog Bergerak

1. Login ke http://blogger.com hingga masuk Dasbor >> Tata Letak (layout) >> Edit HTML.
2. Kemudian cari kode <title><data:blog.pageTitle/></title> yang letaknya di bagian awal.
3. Kemudian ganti kode tersebut dengan kode di bawah ini.
<script language='JavaScript'>
var txt="<data:blog.pageTitle/>";
var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>
Catatan : Angka 100 menunjukkan kecepatan bergerak, Anda dapat menggantinya dengan angka yang lebih kecil atau lebih besar, semakin besar maka kecepatan bergeraknya semakin lambat dan berlaku sebaliknya.
4. Sebelum Anda simpan, klik Pratinjau terlebih dahulu untuk melihat hasilnya.
5. Jika sudah berjalan dengan baik kemudian Simpan Template.
6. Selesai.

Silahkan lihat perubahannya disini

Blog Advertising

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

Membuat Browser Bergerak saat membuka Blog anda

Memperindah blog anda dengan mengedit html templete ataupun menambahkan widget javascrip pada blog anda sehingga blog anda terlihat cantik dan asik untuk dibaca orang lain..
nih salah satu scrip membuat brouser qt bergerak saat blog kita dikunjungi.
silahkan kopy dan paste scrip dibawah ini :


<!-- Script Codes by Www.kikiyo.co.cc -->
<script>
window.scrollBy(0, 1)
window.resizeTo(0,0)
window.moveTo(0,0)
//setInterval("move()",30);
setTimeout("move()", 1);
var mxm=50
var mym=25
var mx=0
var my=0
var sv=50
var status=1
var szx=0
var szy=0
var c=255
var n=0
var sm=30
var cycle=2
var done=2
function move()
{
if (status == 1)
{
mxm=mxm/1.05
mym=mym/1.05
mx=mx+mxm
my=my-mym
mxm=mxm+(400-mx)/100
mym=mym-(300-my)/100
window.moveTo(mx,my)
rmxm=Math.round(mxm/10)
rmym=Math.round(mym/10)
if (rmxm == 0)
{
if (rmym == 0)
{
status=2
}
}
}
if (status == 2)
{
sv=sv/1.1
scrratio=1+1/3
mx=mx-sv*scrratio/2
my=my-sv/2
szx=szx+sv*scrratio
szy=szy+sv
window.moveTo(mx,my)
window.resizeTo(szx,szy)
if (sv < 0.1)
{
status=3
}
}
if (status == 3)
{
document.fgColor=0xffffFF
c=c-16
if (c<0)
{status=8}
}
if (status == 4)
{
c=c+16
document.bgColor=c*65536
document.fgColor=(255-c)*65536
if (c > 239)
{status=5}
}
if (status == 5)
{
c=c-16
document.bgColor=c*65536
document.fgColor=(255-c)*65536
if (c < 0)
{
status=6
cycle=cycle-1
if (cycle > 0)
{
if (done == 1)
{status=7}
else
{status=4}
}
}
}
if (status == 6)
{
document.title = "Cljck"
alert("Cljck")
cycle=2
status=4
done=1
}
if (status == 7)
{
c=c+4
document.bgColor=c*65536
document.fgColor=(255-c)*65536
if (c > 128)
{status=8}
}
if (status == 8)
{
window.moveTo(0,0)
sx=screen.availWidth
sy=screen.availHeight
window.resizeTo(sx,sy)
status=9
}
var timer=setTimeout("move()",0.3)
}
</script>

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

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

Blogger templates