Membuat Sajian Multi Kolom

Membuat sajian multi kolom disini maksudnya menciptakan lebih dari satu sajian dalam satu kolom, ini mempunyai kegunaan sekali untuk menghemat space blog anda yang sudah mempunyai sajian yang banyak ibarat pada teladan screenshot berikut:

Langkah-langkah untuk menciptakan sajian multi kolom silahkah ikuti ibarat dibawah ini:
1. Login ke blogger anda
2. Layout-->Edit HTML
3. Kemudian cari kode ]]></b:skin>
4. Masukan arahan dibawah ini sebelum arahan diatas

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900;
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E;
overflow: hidden;
background-color: #FF9900;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Keterangan :

- Angka yang berwarna merah-->lebar kotak sajian utama
- Angka yang berwarna biru--> tinggi kotak sajian utama
- Kode yang berwarna hijau--> warna border sajian utama
- Kode yang berwarna ungu-->warna Font sajian utama
- Kode yang berwarna abu-abu-->Warna background sajian utama
- Kode yang berwarna kuning-->Warna border kotak utama
- Kode yang berwana orange-->warna background kotak utama

Untuk mengetahui kode-kode warna silahkan klik disini

5. Silahkan masukkan arahan dibawah ini sebelum arahan </head>

6. Kemudian Save

Kemudian ke sajian Layout-->Page Elements-->pilih Add Gadget yang akan kau tempatkan sajian multi kolom ini-->HTML/Javascript

Silahkan masukkan script sajian multi kolom dibawah ini:

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Title sajian 1</a>
<a>Title sajian 2</a>
<a>Title sajian 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Link 1 di sajian 1 <br />
Link 2 di sajian 1 <br />
Link 3 d1 sajian 1 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Link 1 di sajian 2 <br />
Link 2 di sajian 2 <br />
Link 3 d1 sajian 2 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Link 1 di sajian 3 <br />
Link 2 di sajian 3 <br />
Link 3 d1 sajian 3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan
- arahan yang berwarna hijau ialah title sajian anda
- arahan yang berwarna biru ialah lebar dan tinggi sajian multi kolom
- arahan yang berwarna merah ialah isi dari sajian anda

Silahkan dicoba,,semoga berhasil!!!

Orig :

https://catatanspirito.blogspot.com//search?q=kode-warna