Tutorial cara membuat multi kolom blog

Tutorial cara membuat multi kolom blog sangatlah berguna untuk agan yang ingin menghemat space/tempat blog yang dimana nantinya akan tercipta beberapa menu hanya dalam satu kolom. Di samping cara ini berguna untuk menghemat space, tutorial cara membuat multi kolom blog juga berguna bagi agan-agan yang ingin mempercantik tampilan sebuah blog seperti yang terlihat pada penampakan gambar di bawah ini.

multi kolom blog

Sebelum kita melanjutkan pembahasan tentang tutorial cara membuat multi kolom blog, ada baiknya jika agan mampir sebentar ke postingan ane yang lainnya yang membahas tentang cara membuat auto link postingan, hal ini berguna untuk agan yang ingin memaksimalkan seo on page pada sebuah blog.

 Berikut tutorial cara membuat multi kolom blog

Coba agan perhatikan langkah-langkah di bawah ini jika agan ingin membuat multi kolom blog :

1. Login ke akun blogger agan

2. Layout-->Edit HTML

3. Kemudian cari kode ]]></b:skin>

4. Simpan kode dibawah ini sebelum kode ]]></b:skin>

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;
}

Ket :

- Kode warna merah   = lebar kotak menu utama

- Kode warna biru      = tinggi kotak menu utama

- Kode warna hijau     = warna border menu utama

- Kode warna ungu     = warna Font menu utama

- Kode warna abu      = Warna background menu utama

- Kode warna kuning  = Warna border kotak utama

- Kode warna orange  = warna background kotak utama

5. Sisipkan kode dibawah ini sebelum kode </head>

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

6. Langkah selanjutnya klik Simpan

Untuk menempatkan menu multi kolom blog silahkan copy paste kode di bawah ini dan simpan di menu sidebar agan atau letakan dimana saja sesuai dengan selera agan :  

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Title menu 1</a>
<a>Title menu 2</a>
<a>Title menu 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Link 1 di menu 1 <br />
Link 2 di menu 1 <br />
Link 3 d1 menu 1 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Link 1 di menu 2 <br />
Link 2 di menu 2 <br />
Link 3 d1 menu 2 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Link 1 di menu 3 <br />
Link 2 di menu 3 <br />
Link 3 d1 menu 3 <br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Ket :

- kode warna hijau = title menu anda

- kode warna biru  = lebar dan tinggi menu multi kolom

- kode warna merah = isi dari menu anda 

   

Nah cukup mudah bukan  tutorial cara membuat multi kolom blog? ane harap tulisan nawbi ini dapat dipahami oleh agan-agan semua dan tentunya dapat bermanfaat, jika ada kekurangan silahkan agan untuk menambahkannya di kolom komentar sehingga kita dapat sama-sama belajar.