Cara Membuat 2-dua Elemen Baru di Bawah Box Posting

Pada postingan artikel Education for All kali ini EFA akan memposting sebuah artikel tentang cara membuat 2 buah Elemen baru di bawah Post Widget/box posting/kolom komentar pasti akan sangat bermanfaat bagi siapapun. Elemen baru ini bisa dimanfaatkan untuk berbagai widget, terutama widget yang berkaitan dengan posting, seperti recent posts, related posts atau popular posts. Dengan letak yang tak jauh dari box posting tentu menjadi sangat ideal sekali. Selain widget yang tersebut di atas, mungkin sobat blogger mania  juga bisa memindahkan widget profile, stats atau atau label/categories. Bila sobat blogger mania berminat untuk membuatnya silahkan ikuti langkah langkah berikut ini:

Login ke Blogger
klik "Design/Rancangan
KLIK "Edit HTML
Cari kode ]]></b:skin>, kemudian copy dan pastekan di atas kode ]]></b:skin>.
Lanjutkan dengan mencari kode <b:section class='main' id='main' showaddelement='no'> Di bawah kode tersebut akan terdapat kode berikutnya dengan bentuk seperti ini:

<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>

Letakkan xHTML tepat di bawahnya.
KLIK "SAVE Templates/Simpan Template".
Lihat hasilnya dengan membuka Page Elements/Element Laman. Bila penambahan kode berhasil dengan baik, maka akan terlihat dua buah element baru tepat di bawah Post Widget.
Coba gunakan untuk menempatkan widget dan lihat hasilnya dengan membuka blog.
Untuk percobaan sampeyan bisa menggeser (drag) widget profile dan satu widget yang lain untuk ditempatkan di elemen yang baru selesai dibuat.  
 
Lihat di bawah kolom komentar. Dua widget dalam elemen baru di bawah boks posting berupa Releted posts dan Recent Posts using jQuery-CSS3.

Kode CSS

#bawahpostingkiri, #bawahpostingkanan {
        word-wrap: break-word; 
        overflow: hidden;     
        padding: 0;
        margin: 0;
}
#bawahpostingkiri {
        float: left;
}
#bawahpostingkanan {
        float:right;
}
#bawahpostingL {
        margin:20px 5px 15px 0;
        padding:5px;
}
#bawahpostingR {
        margin:20px 0 15px 5px;
        padding:5px;
}
#bawahpostingL .widget, #bawahpostingR .widget {
        margin:0;
        padding:0
}
#bawahpostingL .widget {
        width:185px;
}
#bawahpostingR .widget {
        width:185px;
}

 ]]></b:skin>,

XHTML

<div id='bawahpostingkiri'>
<b:section class='bawahpostingL' id='bawahpostingL' showaddelement='yes'/>
</div>
<div id='bawahpostingkanan'>
<b:section class='bawahpostingR' id='bawahpostingR' showaddelement='yes'/>
</div>

Contoh Penempatan dan penyimpanan   XHTML

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>

<div id='bawahpostingkiri'>
<b:section class='bawahpostingL' id='bawahpostingL' showaddelement='yes'/>
</div>
<div id='bawahpostingkanan'>
<b:section class='bawahpostingR' id='bawahpostingR' showaddelement='yes'/>
</div>


    * Kode yang berwarna kuning adalah kode yang terdapat di template. Silahkan simpan kode baru penambah 2 elemen dengan posisi seperti terlihat di atas.
    * Penambahan widget dengan ukuran width:185px; ini dilakukan di Template Tata Letak (Minima/Thisaway) dengan kondisi masih seperti aslinya, dimana lebar (width) pada post widget (#main-wrapper) sebesar 410px.
    * Jumlah lebar ke dua elemen baru berkisar lebar #main-wrapper atau #main-wrap dikurangi 40px s/d 60px. Dalam kode di atas jumlah lebar dua element baru = 185px + 185px = 370px. Lebar #main-wrapper = 410px.
    * Anda dapat merubah lebar kiri dan kanan dalam ukuran berbeda.
    * Akan lebih baik jika anda gunakan selisih yang cukup besar dengan main-wrap, baru kemudian setelah berhasil lebar pada elemen baru sedikit demi sedikit diperbesar hingga diperoleh ukuran tepat.
    * Periksa setiap perubahan yang dilakukan dengan melihat hasilnya di Elemen Laman dan halaman blog.
    * Untuk memudah cek hasil perubahan, gunakan elemen baru untuk wadah widget profile dan satu widget yang lain.


Semoga bermanfaat!

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :

• 
• 

» Selamat Berkreasi - E F A «