F Membuat Dua Kolom Elemen Halaman Tambah Gadget Dibawah Kolom Posting - by omcatur

Membuat Dua Kolom Elemen Halaman Tambah Gadget Dibawah Kolom Posting

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

Nah pada kesempatan kali ini, insyaAllah saya akan mengetengahkan tutorial menambahkan dua kolom elemen halaman   tambah gadget dibawah kolom posting



Baiklah silahkan ikuti langkah-langkah berikut:

  • Login ke akun anda >> pada dasbor klik >> Template >> Edit HTML (Jangan ceklis Expand Widget Template).
  • Kemudian cari kode berikut atau yang serupa:
<div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog type='Blog'/> </b:widget> </b:section></div>
  • Jika sudah dapat letakkan kode berikut dibawah kode </b:section> sebelum kode </div> 
 <b:if cond='data:blog.url == data:blog.homepageUrl'> <b:section class='sidebar' id='magazine-left' showaddelement='yes'> <b:widget id='Text51' locked='false' title='Column 1' type='Text'/> </b:section> <b:section class='sidebar' id='magazine-right' showaddelement='yes'> <b:widget id='Text52' locked='false' title='Column 2' type='Text'/> </b:section> <div style="clear: both;"></div> </b:if>

Sampai pada point ini, Anda dapat melihat preview template atau pratinjau tapi kolom masih terletak disebelah kiri bukan pada posisi tengah. Untuk itu anda perlu menambahkan lagi kode CSS berikut untuk menjadikan kedua kolom berada pada posisi tengah.
  • Carilah kode ]]></b:skin> dan letakkan kode berikut sebelum kode ]]></b:skin>
 #magazine-left { width: 45%; float: left; } #magazine-right { width: 45%; float: right; }

Anda masih bisa menambahkan kode CSS diatas, misalnya menambahkan border dll, silahkan berkreatifitas!

  • Jangan lupa klik preview atau save template untuk segera melihat hasilnya.
Jika anda berhasil mengikuti setiap langkah diatas maka pada bagian Tata letak anda akan melihat dibawah kolom posting seperti screen shoot berikut:

Demikian tutorial menambahkan elemen halaman tambah gadget dibawah kolom posting. Semoga bermanfaat!

sumber

CONVERSATION

5 komentar:

  1. thanks gan infonya izin bookmark,blog agan sangat menarik elgn dan sangat2 profesional.....
    visit my blog http://catatanguseko.blogspot.com

    BalasHapus
  2. akhirnya berhasil juga,.. makasih ya sob,cara sobat berhasil saya praktikkan,sekian lmanya mencari gagal2 trus.. yang ini sukses..
    sekalian ijin kopas yach...hehehw
    http://kebangkitandunia.blogspot.com/

    BalasHapus
  3. Mantaap gan, semoga bermanfaat :)
    Ijin share http://grosiracemaxstasik.com/obat-tradisional-alzheimer/

    BalasHapus

Feature Post