Info Mayata

Menyajikan segala informasi yang dijumpainya di dunia maya dengan ringkas

Cara Membuat 3 Kolom di Bawah Header Blogspot

by Mimin Opers , at Tuesday, September 23, 2014 , have 0 komentar
Apa teman-teman blogger semua ingin tampilan blognya tambah ramai? Kali ini saya akan menjelaskan sedikit tentang bagaimana cara membuat ramai blog teman-teman semua, salah satunya dengan membuat tiga kolom di bawah header. Widget 3 kolom dibawah header ini sebenarnya bisa Anda tambahkan jika pada bagian sidebar template sudah penuh dan terlalu panjang. Sebagai alternatif untuk meletakkan kode html ataupun javascript yang mungkin andaperlukan. Kurang lebih sama dengan postingan saya yang dulu tentang membuat multi kolom yang diletakkan di bagian bawah blog, namun kali ini saya meletakkannya bagian atas atau tepatnya dibawah header.


Baiklah langsung menuju lokasi pengeditan template-nya.
  • Silahkan login ke blogger.
  • Tuju Tata Letak.
  • Pilih tab Edit HML.
  • Jangan di klik Expand Template Widget, karena akan memusingkan anda.
  • Letakkan kode css berikut ini diatas kode ]]></b:skin>
    /* –- Top --*/
    #top {
    background:#fff;
    margin-top:10px auto;
    width:960px;
    overflow:hidden;
    font-size:12px;
    padding:10px;
    }
    #top h2 {
    background:#000 url(http://lh5.ggpht.com/_7Y9pl24WpQY/Ss37F0ZA9kI/AAAAAAAAB2k/c_ySi8QZg20/header_thumb%5B2%5D.jpg) repeat-x;
    font-size:14pt;
    font-weight:400;
    text-align:center;
    font-style:normal;
    line-height:1.3em;
    color:#fff;
    padding:5px;
    margin-top:-10px;
    margin-left:-10px;
    margin-right:-10px;
    }
    #top ul {
    color:#333;
    margin:0;
    padding:0;
    }
    #top ul li {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC9qUjbMvnqg6Qs0YzCGYCeceyK_Gd9df4k6rt5GM4DK7-5Kpv2rqdOqjqASJVkPOzW22h9WyDzanBil2iglFweYCcxCXwEgbBG7qKO6mA2hdVKin_gQahwEsQVMSQznvyH-IX7CIvZFK4/s320/b3.gif) no-repeat;
    list-style-type:none;
    border-bottom:1px dashed #CCC;
    margin:0 0 10px;
    padding:0 0 5px 20px;
    }
    #top ul li a:hover {
    margin:0px 0px 5px;
    padding:0px;
    }
    #topcenter {
    width:300px;
    float:left;
    margin-left:10px;
    background:#fff;
    padding:10px
    }
    #topleft {
    width:280px;
    float:left;
    margin-left:10px;
    background:#fff;
    padding:10px;
    }
    #topright {
    width:280px;
    float:right;
    margin-left:10px;
    background:#fff;
    padding:10px;
    }
  • Cari kode yang mirip seperti ini, biasanya letaknya dibawah </head>
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='JUDUL BLOG ANDA (Header)' type='Header'/>
    </b:section>
    </div>
  • Kemudian letakkan kode berikut ini tepat setelah kode diatas :
    <div id='top'>
    <b:section class='top' id='topleft' preferred='yes' showaddelement='yes'>
    </b:section>
    <b:section class='topcenter' id='topcenter' preferred='yes' showaddelement='yes'>
    </b:section>
    <b:section class='topright' id='topright' preferred='yes' showaddelement='yes'>
    </b:section>
    </div>
  • Simpan Template.
Semoga bermanfaat dan bisa membuat blog anda jadi ramai.

Sumber: http://www.maskolis.com/2011/03/membuat-3-kolom-di-bawah-header.html
Mimin Opers
Cara Membuat 3 Kolom di Bawah Header Blogspot - written by Mimin Opers , published at Tuesday, September 23, 2014, categorized as Tutorial Blog . And have 0 komentar
No comment Add a comment

1. Berkomentarlah menggunakan kalimat yang baik dan sopan, serta sesuai topik Artikel di atas. Komentar yang tidak sesuai topik akan dihapus.

2. Tidak diperbolehkan menggunakan link hidup atau live link, link akan otomatis terhapus guna mencegah spam.

3. Sebelum bertanya, pastikan sobat sudah membaca seluruh isi Artikel.

4. Jika bertanya sesuatu, jangan lupa untuk memberi tanda centang pada Beri tahu saya atau Notify me agar sobat menerima pemberitahuan balasan melalui email.

5. Follow blog M-TAJUDDIN-NS untuk mendapatkan update Artikel terbaru dan jangan lupa tekan tombol share jika sobat merasa Artikel di atas bermanfaat.

Cancel Reply
GetID

Arsip Artikel

Subscriber

Copyright ©2013 Info Mayata by
Theme designed by Damzaky - Published by BLOG MR.W
Powered by Blogger
-->