Menambah kolom blog dan membuat running text ber link

Sebelum memulai sebaiknya save dulu HTML blogmu atau buat blog baru sebagi percobaan
Di bawah ini saya mencoba menjelaskan bagi anda yang ingin menambah dan membagi elemen
header 3, 4, 5 kolom bahkan lebih, tergantung keperluan anda baik itu untuk space iklan, daftar
link, maupun untuk widget lainnya.

Salah satu contoh yang saya maksud seperti ini.

Untuk membuat 4 kolom di bawah header langkah-langkahnya adalah sebagai berikut :

1. Login ke Blogger --> Tata LeTak --> Edit HTML

2. Sebaiknya anda mendownload dulu template untuk menghindari sesuatu yang tidak diinginkan
pada template anda yaitu dengan Klik Download Template Lengkap
3. Setelah itu cari kode ]]></b:skin>
dan tambahkan kode di bawah ini diatas kode ]]></b:skin>

#under_header1{
}

#under_header2{
float:left;
width:33.33%;
}

#under_header3{
float:left;
width:33.33%;
}

#under_header4{
float:right;
width:33.33%;
}
Sehingga susunan baris kodenya akan terlihat seperti pada gambar di bawah ini :
4. Selanjutnya cari baris kode berikut (atau yang mirip, tergantung model template yang anda
pakai tapi pada dasarnya sama) :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='judul blogmu (Header)' type='Header'/>
</b:section>
</div>
Lalu tambahkan kode di bawah ini dibawah kode di atas :
<div id="under_header1">
<b:section class='header' id='underheader1' preferred='yes'/>
</div>

<div id="under_header2">
<b:section class='header' id='underheader2' preferred='yes'/>
</div>

<div id="under_header3">
<b:section class='header' id='underheader3' preferred='yes'/>
</div>

<div id="under_header4">
<b:section class='header' id='underheader4' preferred='yes'/>
</div>
Sehingga susunan kodenya akan menjadi seperti terlihat pada gambar di bawah ini :
5. Setelah itu klik tombol SIMPAN TEMPLATE, dan periksa pada Tata Letak apakah kolom
yang baru dibuat sudah muncul di bawah header seperti terlihat pada gambar pertama di atas.

6. Jika ingin posisi kolom seperti pada gambar dibawah ini :

Maka baris kode seperti tersebut pada poin 3 dirubah menjadi seperti berikut :
#under_header1{
float:left;
width:33.33%;
}

#under_header2{
float:left;
width:33.33%;
}

#under_header3{
float:right;
width:33.33%;
}

#under_header4{
float:left;
width:100%;
}
Sehingga susunan baris kodenya akan seperti terlihat pada gambar berikut :

7. Jika ingin posisi kolom Tambah Gadgetnya seperti terlihat pada gambar dibawah ini :
Maka di bawah baris kode #under_header4{ tambahkan baris kode berikut margin:0 25%; dan
rubah lebar width-nya, sehingga baris kodenya akan terlihat seperti dibawah ini :
#under_header4{
float:left;
margin:0 25%;
width:50%;
}
8. Atau jika ingin semua posisi kolom sejajar seperti terlihat pada gambar di bawah ini :
Maka baris kode pada poin 3 akan menjadi seperti terlihat di bawah ini :
#under_header1{
float:left;
width:25%;
}

#under_header2{
float:left;
width:25%;
}

#under_header3{
float:left;
width:25%;
}

#under_header4{
float:right;
width:25%;
}
9. Jika ingin membuat lebih banyak lagi kolom di bawah Header, tinggal ikuti aja langkah-
langkah yang telah dijelaskan sebelumnya. Misalkan ingin membuat beberapa kolom seperti
terlihat pada gambar dibawah ini :
Maka susunan baris kode pada poin 3 akan menjadi seperti terlihat di bawah ini :
#under_header1{
}

#under_header2{
float:left;
width:50%;
}

#under_header3{
float:right;
width:50%;
}

#under_header4{
float:left;
width:33.33%;
}

#under_header5{
float:left;
width:33.33%;
}
#under_header6{
float:right;
width:33.33%;
}

#under_header7{
float:left;
width:25%;
}

#under_header8{
float:left;
width:25%;
}

#under_header9{
float:left;
width:25%;
}

#under_header10{
float:right;
width:25%;
}

#under_header11{
float:left;
width:50%;
}

#under_header12{
float:right;
width:50%;
}

#under_header13{
float:right;
width:50%;
}

]]>

Sementara susunan baris kode pada poin 4 akan menjadi seperti :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='ali rachmad (Header)' type='Header'/>
</b:section>
</div>
<div id='under_header1'>
<b:section class='header' id='underheader1' preferred='yes'/>
</div>

aaa<div id='under_header2'>
<b:section class='header' id='underheader2' preferred='yes'/>
</div>

<div id='under_header3'>
<b:section class='header' id='underheader3' preferred='yes'/>
</div>

<div id='under_header4'>
<b:section class='header' id='underheader4' preferred='yes'/>
</div>

<div id='under_header5'>
<b:section class='header' id='underheader5' preferred='yes'/>
</div>

<div id='under_header6'>
<b:section class='header' id='underheader6' preferred='yes'/>
</div>

<div id='under_header7'>
<b:section class='header' id='underheader7' preferred='yes'/>
</div>

<div id='under_header8'>
<b:section class='header' id='underheader8' preferred='yes'/>
</div>

<div id='under_header9'>
<b:section class='header' id='underheader9' preferred='yes'/>
</div>

<div id='under_header10'>
<b:section class='header' id='underheader10' preferred='yes'/>
</div>

<div id='under_header11'>
<b:section class='header' id='underheader11' preferred='yes'/>
</div>

<div id='under_header12'>
<b:section class='header' id='underheader12' preferred='yes'/>
</div>
<div id='under_header13'>
<b:section class='header' id='underheader13' preferred='yes'/>
</div>

<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

Running text pd blog

Berminat membuat silahkan anda copy kode di bawah ini dan letakan diatas kode
<head>

<script type='text/javascript'>
//<![CDATA[

msg = " http://namablogmu.blogspot.com ";

msg = "--- deskripsi blogmu ---" + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
//]]>
</script>

PERHATIAN lihat penggalan HTML berikut:

msg = " http://xxxxx.blogspot.com ";
msg = "--- xxxxxx ---" + msg;pos = 0;

Diubah dan isi dengan :

msg = " http://kata2mu.blogspot.com ";

msg = "--- kata2mu juga ---" + msg;pos = 0;
running text yang memiliki link tujuan

Script HTML yang temen2 sisipkan adalah di bawah ini:

<div id="running-text" class="scroller">

<marquee scrolldelay="70" onmouseover="this.stop();"
scrollamount="2" onmouseout="this.start()">
<span style="font-weight:bold;">
1. <a href="http://alamatmu.blogspot.com/">TUTORIAL BLOG</a>
<span style="font-weight:bold;"><span style="font-
weight:bold;"><span style="font-weight:bold;"><span style="font-
weight:bold;"><span style="font-
weight:bold;"></span></span></span></span></span></span>
</marquee>
</div>

Perhatikan kode di bawah ini, kode di bawah ini merupakan bagian script dari kode di
atas yang perlu temen2 edit:
1. <a href="http://alamatmu.blogspot.com/">TUTORIAL BLOG</a>

1 = adalah nomor urut saja, apabila jumlah link mau anda tambah tinggal ubah aja
menjadi2, 3, 4, dst.

http://alamatmu.blogspot.com/ = sesuai alamat URL yang dituju.

TUTORIAL BLOG = adalah nama LINK yang tampil sebagai Running Text dari URL
yang dituju.