51 Menambahkan Elemen Halaman Baru Diatas Dua Kolom

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

Postingan ini khusus menjawab pertanyaan sobat Rahmatea, yang menanggapi postingan saya yang membahas cara menambahkan elemen halaman dibawah dua kolom. Bagaimana trik atau caranya jika elemen yang ditambahkan diatas dua kolom? Caranya mudah saja kebetulan postingan sebelumnya kita membahas cara menambahkan sebuah kolom pada sidebar, sehingga hasilnya template yang semula dua kolom menjadi tiga kolom.
menambahkan elemen halaman baru atau kolom baru pada sidebar
Sekarang kita lanjutkan...
Bagaimana cara menambahkan sebuah kolom elemen halaman diatas dua kolom

menambahkan sebuah kolom elemen halaman diatas dua kolom
Ikuti langkah-langkah berikut:


1. Pertama dalam keadaan loggin pastinya, klik TATA LETAK => EDIT HTML.
2. Carilah kode seperti berikut: (lebar atau width tentu berbeda sesuai lebar kolom pada template sobat)

#sidebar-wrapper {
  width: 220px;
  float: right;
  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 */
}
3. Kalau sudah ketemu tambahkan kode berikut diatas kode tadi
#topsidebar-wrapper {
border: 1px solid #FFFFFF;
background:#FFFFFF;
width:440px;
float:right;
padding:5px;
margin-top:10px;
}
Keterangan widht: 440px adalah penjumlahan dari dua kolom elemen yang telah ada pada sidebar template minima percobaan saya jadi sobat sesuaikan jumlahnya dengan menjumlahkan lebar dua kolom pada sidebar sobat!
4. lengkap kodenya jadi seperti ini:
#topsidebar-wrapper {
border: 1px solid #FFFFFF;
background:#FFFFFF;
width:440px;
float:right;
padding:5px;
margin-top:10px;
}

#sidebar-wrapper {
  width: 220px;
  float: right;
  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 */
3.Langkah selanjutnya,anda cari kode berikut:
 
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

4. setelah ketemu letakkan kode berikut, dibawah kode tadi:

 
<div id='topsidebar-wrapper'>
<b:section class='sidebaratas' id='sidebaratas' showaddelement='yes'>
</b:section>
</div>
5. Sehingga kodenya jadi seperti berikut:
<div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol'/>
      </div>
<div id='topsidebar-wrapper'>
<b:section class='sidebaratas' id='sidebaratas' showaddelement='yes'/>
</div>
6. Selesai. jangan lupa simpan template. Lihat hasilnya pada elemen halaman kalau sudah ada kolom elemen baru diatas dua kolom seperti screenshot diatas berarti berhasil.
Semoga bermanfaat tidak saja bagi penanya tapi juga bagi teman-teman yang lain!


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

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

51 komentar :

  1. wah mantap ya tipsnya, cuma ayas g butuh karna dah tersedia di templateku, :D

    eh sudah tak ganti tuh yang di recent commentnya dengan alamatku, tetep g bisa. Pake yang dari blog langsung, terus pake script dari ant, n macam2 + script dari pemiliknya templateku sendiri tak coba2 tetep g bisa, dah taklaporin sih ke pemiliknya, cuma belum da konfirmasi, please ya klo bisa, thanx ;)

    BalasHapus
  2. @ oen: ya pelajaran ini mungkin sobat tak butuh, blm tentu bagi yg lain. walaupun banyak template gratis yg menyediakan bg sbgn org berhasil mempraktekan sebuah pelajaran adalah kepuasan tersendiri.

    soal recent comment, saya masangx pada beberapa blog dengan template berbeda alhamdulillah smua scriptx bekerja normal.

    BalasHapus
  3. kapan2 dicoba, tapi sekarang lagi males edit nih....
    thanks banget ya mba...

    BalasHapus
  4. salam sobat
    trims ilmu dan infonya.
    menambah eleman halaman baru di atas dua kolom .
    bisa dipraktekkan nich,,tapi coba2 dulu mas,

    BalasHapus
  5. @ sda: iya kadang anaa jg gitu save aja dl, prakteknya klu dah ada waktu senggang. terimakasih apressiasinya!

    BalasHapus
  6. @ Nura: ups waktu kita ngetik dan post komentar hampir bersamaan ya? jd td hnya bls psn ukh sda.

    Terimakasih apresiasinya.

    BalasHapus
  7. Ilmu yang bermanfaat nih...
    cocok diterapkandi blog ku kaya'nya nih...

    BalasHapus
  8. bisa tu ngak apa. cuma lebih baik kalau ada demonya. gambar untuk posting separuh aja berukuran 500 x 285.

    BalasHapus
  9. @ wilyo: terimakasih apresiasinya

    @ blogspot...: maksudnya apa ya ukhty seri? insyaAllah bisa, triknya sdh berhasil saya praktekkan diblog eksperimen disini

    BalasHapus
  10. wah sip tuh mantab.... lihat dulu deh hasilnya

    BalasHapus
  11. wuih Mantab gan tipsnya... punya aq dh aq coba koq...

    BalasHapus
  12. Mantap ulasannya, ijin copy buat pribadi!

    BalasHapus
  13. infonya bagus sob, cm mungkin agak sedikit diperjelas buat "namecode" nya..biar nggak ada salah persepsi tuch...

    cz hal yg paling kita takutkan dalam memposting sebuah tutorial adalah penerapannya, apalagi buat para pemula..pazti bingung banget...

    keep blogging dech...!!!

    BalasHapus
  14. @ rezky, tyval dan nuansa pena: terimakasih apresiasinya

    @ Kian: apa lagi yg kurang jelas? mengapa mesti takut posting tutorial? Lagian semua tutorial diblog ini saya posting setelah berhasil menerapkannya sendiri. Original.

    Saya jg pemula tp alhamdulillah g' bingun tu?
    Tidak akan berhasil klu tidak berani mencoba...

    BalasHapus
  15. terimakasih yah sob atas ilmunya
    bermanfaat sekali, ^^

    salam blogger :)

    BalasHapus
  16. Maaf Ukh,,saya gak paham dengan pesan ukhti di guest book...mohon diperjelas pesannya :-)

    BalasHapus
  17. Mantep sobat tipsnya. .thanks ya tk sharingnya :)

    BalasHapus
  18. @ Local Download: Terimakasih apresiasinya
    @ Insanitis37: Kmrn kirain serius pesan template nuansa merah n hitam.

    BalasHapus
  19. @ sifa: eh ada ukhty rupax. syukron apresiasinya ukh, hnya beda beberapa detik ya kita posting komentarx?

    BalasHapus
  20. Whaaw script lagi...templatku yg lama kayak gini, sekarang cukup dua kolom ajha nih mba...

    Aku kepengen buat 3 kolom di bawah dan backgroundnya ngikutin template awal...bisa tulung tunjukin di sini ada gag mba?

    BalasHapus
  21. punya saya sudah ada bawaaan dari templatenya..thanx info nich

    BalasHapus
  22. saya simpan dulu ya, siapa tahu nanti diperlukan..terima kasih ya

    BalasHapus
  23. terimakasih sharingnya sob, bermanfaat banget

    BalasHapus
  24. Subhanallah.. penting neh...
    hehehehe :D
    dari kemaren piet cari²
    hohohoho
    syukron iah udaa berbagi.... ^___^

    sudi kiranya mampir untuk meninggalkan jejak
    di bait ane, di tanah blogger...
    syukron ^__^

    BalasHapus
  25. jadi malu...yang pesan dan perlu baru muncul.... terima kasih sobat...insyaAllah akan saya pasang, mudah mudahan langsung OK.....(lagi sibuk offline...maaf)

    thank's ya....salam buat semua.

    BalasHapus
  26. satu lagi postingan mantaf nihh..
    dilanjut....

    BalasHapus
  27. Nice info bgt nich Sobat...
    mkasih dh bgi2 y...oy, da Award bwt Sobat d tmpt saya...mhon diambil y...

    Salam Blogger...

    BalasHapus
  28. sip mbak yg seperti ini jarang dbahas blog blog terkemuka
    padahal malah banyak ditanyakan :D

    gak ada SM nya ya mbak?

    BalasHapus
  29. ok sekali nich, simpan dulu yaaa

    BalasHapus
  30. sangat bermanfaat mbak...sukses yaa

    BalasHapus
  31. info yg sangat bermamfaat thx ya

    BalasHapus
  32. woww..templatnya tambah cantik & profesional ana,,,
    congrats

    BalasHapus
  33. @ ducky: jawabannya ada disini search aja
    @ rumah blogger: sama-sama
    @ sabrinet: silahkan. Terimakasih jg apresiasinya
    @ asep, piet puu, terimakasih apresiasinya. 'Afwan
    @ rahmatea: sbntr aja kok ngeditx insyaAlllah langsung ok
    @ ahmad. adi: terimakasih, awardx nnt diambil
    @ mas doyok: sm? sok
    @ sabrinat, udin, blog sedekah: terimakasih apresiasinya

    BalasHapus
  34. Assalaamu'alaikum....
    Akhi....
    Salam kenal dari ana Abu Ahmad dari kota Binjai Sumatera Utara. Blog Antum ini bagus banget dan menjadi inspirasi buat blog ana.
    Akhi...ana mau minta izin seluruh postingan artikel yang antum punya ana copy ya buat di taruh di blog ana juga. Ana baru aja belajar buat blog jadi perlu banyak materinya nih...he...he...
    Boleh nggak akhi....?
    Apa aja syaratnya...?
    Ana tunggu jawabanya ya...
    oh, iya ini alamat blog ana itu www.technosunnah.blogspot.com

    Jazakallahu khoiran jaza....

    BalasHapus
  35. emm pengen tapi takut gak karuan ya wes deh hehheh
    mba klw liat blog ku itu kan ada yg tulisan woody mau aku ganti susah bgd carane piye?itu kan karena dari template sananya Gitu.....

    BalasHapus
  36. Thank u so much i like u hehhe terima kasih yah ukhti aku senang bisa di bantu.......... nnti bantu lagi kla ada masalah oce....

    BalasHapus
  37. wah makin manteb aja nih temen q satu ini, bakalan jadi the next of blogger master

    BalasHapus
  38. keren trus pelajarannya..

    duh akhir2 ni sibuk dilanjut sakit ditambah gangguan internet..

    BalasHapus
  39. pada dasarnya kode yg digunakan pada ket "posted by, icon tanggal, maupun commentar pengunjung" pd blog ini terdiri dari code yg terpisah...mulai dari code CSS dan HTML nya, sedangkan untuk Backgrounnya K'ian buat code baru untuk mempermanis tampilan yang sudah ada...lain kali akan kian jelaskan lebih detail

    jadi untuk mengeditnya sobat cari code CSS berikut : (biasanya "author,date,comm / comments)..kalo nggak salah design dasar template kita sama.. jadi akan lebih mudah untuk gw jwb...ok

    BalasHapus
  40. @ All: Terimakasih apresiasinya. Maaf blm sempat menjawab komentar satu persatu

    BalasHapus
  41. Mantap mba tutorialnya, lugas dan mudah dimengerti sama yg awan seperti saya, emang sie banyak template gratis tinggal dowload tapi gimana gitu, beda ma ubah2 sendiri dari standarnya ada kepuasan tersendiri, thanks ya tutorialnya. btw salam kenal

    BalasHapus
  42. @ Sepwawan: Terimakasih apresiasinya.

    BalasHapus
  43. sll aktiv berkunjung kesini meskipun tak pernah main ke blog reot's, sahabat sll datang u/ berkunjung.... menyambung tali sillaturrahmi.

    keren nih sob pengen juga aq coba

    BalasHapus
  44. @ Rizky: Maaf. Belum sempat blog walking aja.

    Terimakasih apresiasinya.

    BalasHapus
  45. emm klw mau tambah satu kolom lagi gimna nih?? mash bingung yg inikah caranya?? biar aku punya template jadi 3 kolom??

    BalasHapus
  46. @ Chomisah Noer: Ukhty tuk nambah satu kolom gadget pada sidebar bacadisini.

    BalasHapus
  47. alhamd,tutorialnya mudah dipraktekkan,..jazakallah..

    BalasHapus
  48. terima kasih atas caranya bermanfaat untuk saya...

    BalasHapus
  49. Salam ...

    Ma'af kalo beda dengan topik.
    Cuman Saya pengen nanya, bagaimana caranya supaya tampilan POSTING BLOG seperti TOKO ONLINE ?
    Maksudnya setting kode HTML dll supaya posting yang muncul terlihat berjejer ke samping, jadi tinggal klik GAMBAR untuk melihat isinya ?

    Terimakasih atas bantuannya ...

    BalasHapus
  50. makasih tipsnya mas, udah diterapin, tapi hasilnya kolom agak menjorok ke kiri dari 2 kolom dibawahnya dan agak kebawah tdk sejajar dgn kolom posting blog (seperti digambar kedua postingan, saya otak-atik lagi ternyata masalahnya pd padding dan margin-top. saya buat semuanya jadi 0px. baru pas

    BalasHapus
  51. wah..susah banget sob... kodenya beda ma kode ane sob...

    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!