35 Cara Menambahkan Elemen Halaman Diatas Footer

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Masih tentang desain template setelah sebelumnya saya posting cara menambah dua kolom elemen halaman dibawah sidebar utama dan menambah sebuah elemen halaman dibawah dua sidebar yg telah dibuat itu, agar lengkap kali ini akan saya paparkan lagi langkah-langkah menambah elemen halaman diatas footer seperti terlihat pada gambar berikut:

image
Yang saya jadikan tempat eksperimen kecil ini blog saya lainnya (lihat disini) yang menggunakan template default blogger, minima

Baiklah langsung aja berikut cara menambah elemen di atas footer:

  1. Login ke blogger dengan id anda
  2. Tuju menu Tata Letak
  3. Pada tab menu, klik Edit HTML
  4. Backup template anda, klik Download Template Lengkap
  5. Sekarang cari kode ini :
    #footer {
    width:900px;
    clear:both;
    margin:0 auto;
    padding-top:15px;
    line-height: 1.6em;
    text-transform:uppercase;
    letter-spacing:.1em;
    text-align: center;
    }
  6. Tambahkan atau copy lalu paste kode berikut di bawah kode tadi
    /* bottom
    ----------------------------------------------- */
    #bottom {
    width:900px;
    clear:both;
    margin:0 auto;
    float:left;
    padding:10px 0;
    color:#333;
    background:#ffffff;
    border-top:1px solid #333;
    }
    #bottom a:link {
    color:#006699;
    text-decoration:none;
    }
    #bottom a:hover {
    color:#c06000;
    text-decoration:underline;
    }
    #bottom a:visited {
    color:#045FB4;
    text-decoration:none;
    }
    #bottom h2 {
    padding:20px 0 2px 0;
    margin:0 0 10px 0;
    border-bottom:1px dotted #cccccc;
    font-size:11px;
    font-weight:bold;
    line-height:1.4em;
    text-transform:uppercase;
    }
    #bottom ul {
    padding:0;
    margin:0;
    color:#333;
    }
    #bottom ul li {
    list-style-type:none;
    border-bottom:1px dotted #333;
    background:url("http://i35.tinypic.com/2n03mgz.jpg") no-repeat 0px .17em;
    padding-left:17px;
    margin-top:2px;
    }
    #left-bottom {
    width:200px;
    float:left;
    padding-left:15px;
    }
    #center-bottom {
    width:200px;
    float:left;
    padding:0 20px 0 20px;
    }
    #right-bottom {
    width:420px;
    float:right;
    padding-right:15px;
    }
  7. Sekarang kita membuat kode HTML untuk elemen di atas footer tersebut. Cari kode ini :
    <div id='footer-wrapper'>
    <b:section class='footer' id='footer'/>
    </div>
  8. Tambahkan kode berikut di atas kode tadi :
    <div id='bottom'>
    <b:section class='bottom' id='left-bottom' preferred='yes'/>
    <b:section class='bottom' id='center-bottom' preferred='yes'/>
    <b:section class='bottom' id='right-bottom' preferred='yes'/>
    </div> <!-- end bottom -->
  9. Sekarang klik tombol SIMPAN TEMPLATE
  10. Selesai
Note: sesuaikan ukuran lebar (widht) footer dengan template anda dan lebar elemen yang akan ditambahkan sesuaikan selera anda dengan memperhatikan jarak marginnya.
Untuk melihat hasilnya masuk ke elemen halaman, semoga berhasil! Bisa lihat hasil eksperimen saya disini


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

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

35 komentar :

  1. terimakasih apresiasinya!

    BalasHapus
  2. gan....klo nambah elemen hlaman gini berpengaruh ga ma content wrappernya? aq mau tak pasangi lagi......untuk optimalisasi add.....gmn gan?

    BalasHapus
  3. iya perhatikan note yg anaa tulis diakhir postingan, mudah kok insyaAllah silahkan dicoba, klu khawatir template rusak bisa back up dl sebelum ngedit!

    BalasHapus
  4. makin keren aja...
    duh edit HTML lagi...
    makasih tutorialnya mba...

    BalasHapus
  5. terimakasih ukh!

    doain ya, anaa rencananya pingin buat template nie kedepan, terutama nambah koleksi template islami yg masih kurang.

    BalasHapus
  6. kalo minta template yang defaultnya ini bisa gak sob :D

    BalasHapus
  7. link pembuatnya khn ada dibagian akhir template ini...o-om.com

    aslinya putih dan abu2, anaa ngedit habis2 jg nie template...

    BalasHapus
  8. tambahin elemen ya...wah ok niee...makasih ya

    BalasHapus
  9. Terima kasih mba, alhamdulillah template sy sekarang udah ada kolom elemen di footernya. Yg mau saya tanyakan lebih lanjutnya, kode mana aja yg harus saya rubah biar ukuran kolomnya sama dgn template saya. Trus kalo mau ngerubah warna back groundnya, kode color yg mana ya yg harus saya rubah?Trims
    Sekali lagi maaf udah ngerpotin terus..
    Jazakillah

    BalasHapus
  10. Oh, cara ngerubah warna background ahamdulillah udah bisa mba, hehe
    Cuma nyesuaian ukuran kolom aja mba. Tolong dibantu ya mba...

    BalasHapus
  11. @ insantis: iya anaa baru liat site antum.

    pertama sesuaikan size widht header, outer wrapper, dan footer...

    tentukan size widht elemen halaman yg akn dibuat diats footer, dengan mengurangi margin/jaraknya.

    biar mudah klu sdh jadi elemen diatas footernya, isi dulu dgn content htmlx, klu ada yg saling tindih teksx, edit template ganti sizex kemudian klik pratinjau sampai anda temukan ukuran yg pas dgn melihat pratinjau teksx sdh tdk saling tindih...trakhir simpan template...

    smg dipahami dan membantu!

    BalasHapus
  12. Ok deh trims banyak...belum ngerti sih mba, tp coba berusaha deh..
    Doakan saya! (hehe)

    BalasHapus
  13. Assalamu alaiykum..
    Apa kabar mba?? moga sehat selalu ya..
    Maaf Mba, gak jadi aja deh edit footer pake jasa Mba, abis aku malu sih, hehe. Lagipula biarain aja gitu dulu ah, coz masih belum terlalu butuh ini. Cuma butuh buat nyimpen followers aja. Tp nanti sewaktu 2 saya butuh bantuan Mba, tolong dibantu ya! :-)
    Banyak yg mau saya tanyakan Mba:
    1. Utk tab view, bila saya pasang script yg diletakkan di gadet menjadi dua (ada dua tab view), itu bisa jalan ga Mba??
    2. Biar text di side bar(tolong lihat text "submit tulisan" saya di sidebar) menjadi rata kiri-kanan (justified) gimana ya caranya?
    3. Kalau berkenan Tolong buatin tutorial bikin "next page"/navigasi pake angka dong mba. kaya blog2 download template.
    4. Maafin saya yg bawel ya Mba, hehe
    Thanks before. Jazakillah

    BalasHapus
  14. Oh iya, ada satu ketinggalan mba :-) :-). Ttg recent post sama comment, kenapa ya saat di priview itu mucul. Tp kalau lg online, itu ga ada..mungkin mba tahu penyebabnya. Sekali lagi (tp yg pasti bukan yg terakhir) makasih...hehe

    BalasHapus
  15. @ insanitis37: wslm, alhamdulillah.

    1. u/tab view klu script yg sama tdk bs, klu buat dua dgn script berbeda bisa klu ada waktu anaa posting lg tab view versi dua.

    2. nanti anaa jwb di shoutmix anda krn kolom komentar ini membatasi kode script yg bs ditampilkan

    3. iya.

    4. gpp

    5. klu anaa klu gunakn gadget dr blogger u/recent posy saat previewx yg error tp stlh save g' tu? trbalik sm pngalaman antum???

    BalasHapus
  16. As.Ukhti, sy sdh coba alhamdulillah berhasil. tapi kenapa ya Text Judulnya nggak center di tengah. tapi malah mlorot kebawah. coba lihat di blog sy: warungherbal.cjb.net. Jazakallah

    BalasHapus
  17. Wa'alaikumussalam...iya anaa dah lihat blog warung herbalnya.

    kalau ingin teksnya berada dipinggir rubah aja teks aligenx left (kiri)atau right (kanan).

    kalau tak ingin adaa border bagian bawah titel, hapus aja bordernya. (anaa lihat titel sidebar blog herbal g' ada border bagian bawah-ini skdar saran klu antum ingin menyesuaikanx)

    biar tidak melorot kebawah rubah angka paddingx.
    cara mudah setiap merubah angka paddingx klik pratinjau klu dah pas baru simpan template.

    semoga membantu!

    BalasHapus
  18. Makacih ya...setelah aku coba ternyata oke juga...

    BalasHapus
  19. i love u full..
    mantep pisan..

    BalasHapus
  20. @ moy: Terimakasih apresiasinya

    BalasHapus
  21. Thanks mba ilmunya, aku baru berhasil malam ini mencoba tutor ini, kemaren2 gagal terus.

    BalasHapus
  22. Hi there, this is Very nice post, and very useful article. That way it's work. Ty very much.

    BalasHapus
  23. singkat, jelas n berhasil..makasih infonya.

    BalasHapus
  24. mba artikelnya sangat bermnfaat,, saya juga sudah berhasil menerapkannya,, tapi mba kok setelah saya terapkan elemennya ke bawah(tiga baris ke bawah) ya? padahal kan di tutorial elemennya kesamping (left, center right) bagaimana solusinya mba?

    BalasHapus
  25. blognya keren euy.....

    BalasHapus
  26. Saya udah bikin 3 kolom diatas footer,tp kok ada garis hitamnya? Cara ngilanginnya gmana boz?

    BalasHapus
  27. Assalamu'alaikum guru, ane mohon sekiranya apabila dapat memberikan penjelasan yang lebih untuk tutorial yang ada di: http://flowplayer.org/tools/demos/scrollable/index.html karena ane sudah coba dan alhamdulillah berhasil, tetapi ga bisa dklik next..
    Sungguh ane penasaran untuk jquery yang satu ini dan ga tau harus b'tanya pada siapa slain antum..

    Syukran..

    BalasHapus
  28. mhn maaf tanya ne ... template di blog sy ga ada footer wrapper spt yang di maksud di atas shg sy bingung bagaimana menambahnya .. mohon pencerahannya

    BalasHapus
  29. Thanks infonya
    Ini yang saya cari
    Sangat cocok untuk pemula nagi saya

    BalasHapus
  30. mau nanya nih gan..gimana kalo kode di atas tersebut tidak ada pada template kita

    BalasHapus
  31. kalau cuma 1 kolom gimana min?

    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!