26 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:

menembahkan 4 kolom tambah gadget diatas footer

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:

menembahkan 4 kolom tambah gadget diatas footer

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!


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

26 komentar :

  1. Emang mba ukhti ini mangtab banget tutorialnya, di bookmark dulu mba, makasih terlah berbagi.

    BalasHapus
  2. sangat bermanfaat sobat, kebetulan saya sedang mencarinya, langsung di coba dulu..
    terimaksih banyak..

    BalasHapus
  3. @ Sepwawan: Silahkan, terimakasih apresiasinya.
    @ sehat-mu: Alhamdulillah klu post ini dpt membantu. Slmt mencoba, smg berhasil dan bermanfaat. Thanks jg apresiasinya

    BalasHapus
  4. kayaknya sekarang belum butuh deh, hehehe... tapi makasih infonya mbak :D

    BalasHapus
  5. Weh.. saya trauma pakai hitungan persen dalam desain template.
    Soalnya, bagian yang diberi skala persen akan melebar sesuai dengan lebar dan resolusi monitor, jadi template menjadi berbeda tampilannya di monitor berresolusi berbeda.. :)
    Nice post

    BalasHapus
  6. @ Oen: Gpp, makasih apresiasinya
    @ Belajar ngeblog: Skala dgn persen u/kolom trsbt bg sy lbh mudah, asal mengikuti ukuran footer yg menggunakan pixel. Mslhx mungkin klu ukuran footer jg menggunakan skala persen

    Jika ingin menggunakan skala pixel mudah sj, cukup membagi angka footer, dan menggurangi dgn margin.

    Terimakasih apresiasinya

    BalasHapus
  7. keren dah tutorialnya

    masih banyak bingung sih mbak tapi thanks udah sharing nih ilmu

    BalasHapus
  8. keren nih tapi masih bingung mau di isi apa nantinya

    BalasHapus
  9. @ Zonda: Klu ada yg tdk dimengerti baiknya ditanyakan kali?!

    @ Rizky: Kolom yg bnyk atau tuk pencinta ragam gadget kali...?

    BalasHapus
  10. masya alloh blognya kreatif dan penuh dengan nuansa wanita. link blog ini telah saya add di homepage PR3 saya..
    semoga berkenan untuk bertukeran link.
    terima kasih ya.

    BalasHapus
  11. Tutorial yang menarik. Bisa dipraktekkan tapi mesti hati-hati karena saya kurang familiar utak-atik template begini. Bisa-bisa jadi amburadul nanti. He....He.....

    Maaf, saya sudah salah sangka, Mbak Ukhti. Betul ini nama Anda, ya? Saya pikir dulu Anda pria seperti kedua teman saya, Mas Yuda dan Mas Anis yang juga sama-sama jago dalam pemrograman web begini. Pantes saja nuansa blognya Pink, faviconnya pakai bunga. Ini cewek banget.

    BalasHapus
  12. bagus tutorialnya .... disimpan dulu ... mungkin suatu waktu sangat membutuhkan ....
    makasih sharingnya ....

    BalasHapus
  13. nice tips...
    moga2 kian sukses di blogger..
    btw follow balik ya :D

    BalasHapus
  14. Nice tutorial.....
    terima kasih.....

    BalasHapus
  15. nitip link yah... http://jogjaface.com

    BalasHapus
  16. keren, info yang bermanfaat
    salam kenal

    BalasHapus
  17. trims,,
    artikelnya,,
    langsung sya praktekin,,

    BalasHapus
  18. Afwan, kalo mau diubah jadi 3 kolom apany yang harus diubah??
    Widthnya diubah jadi 33% sama dja, mohon pnjelasanny??

    BalasHapus
  19. kok hasilnya gak bisa jadi 4 kolom yach ?!
    tapi malah jadi 4 baris sidebarnya.
    dimana letak kesalahannya neh ?!

    BalasHapus
  20. Mu nanya nih
    di edit Html ku mah g ada kode yg ke2nya ini
    ada nya pula code

    bagaimana???
    mnta pncarahannya dong

    BalasHapus
  21. sangat membantu..
    :D

    smoga blog ini tetap axizzzz dngan tutoria" yg berguna :D

    BalasHapus
  22. mas gimana ya... punya saya gak ada yg footer-wrapernya ik...

    BalasHapus
  23. Makasih ya infonya.. aku rasa dgn menambahkan beberapa kolom/elemen baru di atas Footer bisa nambah ruang Widget baru ya.

    BalasHapus
  24. makasih sob, berhasil diterapkan diblog saya dnegan sdikit modofikasi :D

    BalasHapus
  25. bingung ooyyy... maksih tips nya mas.. langsung mencoba mempraktekkan...

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!