Menambahkan 4 Kolom/ Elemen Halaman Baru Diatas Footer -Assalamu Alaikum WR.WB Hallo sahabat TrikMITOS-blog seputar informasi, islami,kesehatan, kecantikan Tips dan Trik android kord gitar dll, Pada Artikel yang anda baca kali ini dengan judul Menambahkan 4 Kolom/ Elemen Halaman Baru Diatas Footer, saya telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya, yang mungkin bermanfaat buat anda. mudah-mudahan isi postingan Artikel Blogger Tutorials, Artikel CSS dan HTML, Artikel Desain Template, Artikel Footer, Artikel Tutorial Blogger, yang saya tulis ini dapat anda pahami, karna mungkin dari beberapa pengunjung bahasa atau tulisan saya ini agak sulit di mengerti...hehehe benarkah??!!!. baiklah, tanpa panjang lebar dan bertele-tele lagi selamat membaca, jangan lupa baca juga artikel lainnya, karena masih banyak artkel yang menarik lainnya yang menurut saya pribadi sangat bermanfaat

Judul : Menambahkan 4 Kolom/ Elemen Halaman Baru Diatas Footer
link : Menambahkan 4 Kolom/ Elemen Halaman Baru Diatas Footer
Gambar dibawah ini

Menambahkan 4 Kolom/ Elemen Halaman Baru Diatas Footer

Untuk menepati janji saya pada postingan sebelumnya dengan tema merubah posisi sidebar dan main pada template blogger, saya insyaAllah akan mengetengahkan tutorial menambahkan halaman baru diatas footer.

Sebelumnya saya sudah pernah membahas tutorial serupa tapi tak sama, karena elemen yang ditambahkan pada postingan terdahulu hanya tiga kolom, sekarang kita akan belajar bagaimana menambahkan 4 kolom tambah gadget diatas footer seperti gambar berikut:

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

2. Tambahkan kode CSS berikut setelah tag atau kode  ]]></b:skin>

/* --- LOWER --- */
/* --- CSS modified by: Amatullah. Sy --- */
#lower {
     border-top:10px solid #F781F3;
     margin:0 0 10px 0;
     -moz-border-radius-bottomleft:10px;
     -moz-border-radius-bottomright:10px;
}

#lower-wrapper {
     margin:auto;
     padding: 0px 0px 20px 0px;
     width: 960px;
     background: #FBEFF5;
     -moz-border-radius-bottomleft:10px;
     -moz-border-radius-bottomright:10px;
     -webkit-border-bottom-left-radius:10px;
     -webkit-border-bottom-right-radius:10px;
}

#lowerbar-wrapper {
     float: left;
     margin: 0px 0px 0px 0px;
     padding: 10px 0px 0px 0px;
     width: 25%;
     text-align: justify;
     font-size:100%;
     color:#333;
     line-height: 1.6em;
     word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
     overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

.lowerbar {
     margin: 0;
     padding: 0;
}

.lowerbar .widget {
     margin: 0;
     padding: 10px 20px 0px 20px;
}

.lowerbar h2 {
     background:#F781F3;
     -moz-border-radius-bottomleft:6px;
     -moz-border-radius-bottomright:6px;
     -webkit-border-bottom-left-radius:6px;
     -webkit-border-bottom-right-radius:6px;
     margin: -10px 0px 10px 0px;
     padding: 3px 0px 3px 0px;
     text-align: center;
     color:#fff;
     font-size:16px;
     font-weight:bold;
     text-transform:lowercase;
}

.lowerbar ul {
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
     list-style-type: none;
}

.lowerbar li {
     margin: 0px 0px 2px 0px;
     padding: 0px 0px 1px 0px;
     border-bottom:1px dotted #DF0101;
}

.lowerbar a {
     color: #FA58F4;
     text-decoration: none;
}

.lowerbar a:hover {
     text-decoration: underline;
     color: #F7BE81;
}

.lowerbar a:visited {
     text-decoration: none;
     color: #5858FA;
}
/* ---Modefied: http://amatullah83.blogspot.com--- */
/* --- End Lower--- */

Catatan: Silahkan edit kode CSS diatas, untuk menyesuaikan tampilan kolom dengan template sobat.

Perhatikan tulisan yang berwarna merah pada lower wrapper, widht (lebar) 960px ganti dengan lebar footer sobat.

Untuk mengganti kode warna silahkan lihat tabel kode warna disini. Sebagai sedikit tambahan pengenalan property CSS diatas, lihat gambar berikut:

3. Tambahkan kode HTML berikut diatas <div id='footer-wrapper'>

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'> 
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'> 
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'> 
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'> 
</b:section>
</div>

<div style='clear: both;'/>
</div> </div><!-- end lower-wrapper -->

4. Simpan template. Lihat hasilnya pada bagian elemen halaman, apakah sudah terdapat 4 kolom diatas footer? Jika ya, silahkan tambahkan gadget atau widget yang sobat inginkan.

Semoga bermanfaat!

Demikianlah Artikel Menambahkan 4 Kolom/ Elemen Halaman Baru Diatas Footer

Sekianlah artikel Menambahkan 4 Kolom/ Elemen Halaman Baru Diatas Footer kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya jangan lupa tinggalkan komentar anda dan share yang banyak....heheheh.

Anda sekarang membaca artikel Menambahkan 4 Kolom/ Elemen Halaman Baru Diatas Footer dengan alamat link https://trikmitos.blogspot.com/2010/05/menambahkan-4-kolom-elemen-halaman-baru.html