Membuat Sajian Multi Kolom

Minggu, 22 Juli 2018

Bagikan :

Tweet

Membuat sajian multi kolom disini maksudnya membuat lebih dari satu sajian dalam satu kolom, ini berkhasiat sekali untuk menghemat space blog anda yang sudah mempunyai sajian yang banyak ibarat pada pola screenshot diberikut:

Langkah-langkah untuk membuat 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 aba-aba dibawah ini sebelum aba-aba 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 aba-aba dibawah ini sebelum aba-aba </head>

<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>

6. Kemudian Save

Kemudian ke sajian Layout-->Page Elements-->pilih Add Gadget yang akan engkau 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
- aba-aba yang berwarna hijau ialah title sajian anda
- aba-aba yang berwarna biru ialah lebar dan tinggi sajian multi kolom
- aba-aba yang berwarna merah ialah isi dari sajian anda

Silahkan dicoba,,semoga berhasil!!!

 

Orig :

bloggejeh.blogspot.com/search?q=kode-warna

Tag : Tips dan Trik, Tutorial Blogging