Membuat widget baru dengan posisi seperti di atas tidaklah sesulit yang dibayangkan. Sampeyan bisa membuatnya dalam waktu 1/2 jam hingga 1 jam. Waktu yang lumayan lama ini tak lepas dari upaya menciptakan elemen yang berukuran pas dengan lebar halaman posting. Yah ...., mungkin kita harus merubah ukuran lebar dalam beberapa kali percobaan agar ukuran ke-2 widget baru benar-benar tepat dan presisi dengan ruang yang tersedia, baik di page elements atau di halaman blog. Untuk membuatnya silahkan ikuti langkah berikut.
Cara Membuat Element Baru di Bawah Post Widget
- Login : Login ke Blogger.
- Dasboard/Dasbor : Di halaman selanjutnya setelah klik "Login" akan terlihat halaman Dasboard. Cari dan klik "Design/Rancangan".
- Design/Rancangan : KLIK "Edit HTML".
- Edit HTML : Lakukan Back-up Templates.
- KLIK "Download Template Lengkap/Full Download Templates.
- Simpan file template di folder PC. Berikan nama yang mudah dikenali disertai waktu penyimpanan (misal.Modifikasi-OKT22-10) agar setiap kali back-up kita punya data template dengan kronologis yang terdata rapi.
- Kembali ke Halaman 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:
- 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.
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</b:section>
Jika mungkin sampeyan ingin melihat seperti apa yang dimaksud dengan membuat 2 elemen baru di bawah boks posting, silahkan buka DEMO di bawah ini. Adapun element baru akan terlihat seperti gambar berikut.
contoh liat di atas
Lihat di bawah kolom komentar. Dua widget dalam elemen baru di bawah boks posting berupa Releted postsdan 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 xHTMLxHTML
<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>
Catatan/Keterangan
- 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!
Happy Blogging ....!
Happy Blogging ....!
Salam buat sobat blogger ... ...
Aku hanyalah seorang blogger yang kebetulan suka nulis, suka ngenet dan terutama suka uothak-uathik template blogspot. Bila sampeyan menyukai semua yang telah aku coba tulis dan terbitkan, aku hanya berharap bahwa semuanya bisa memberi manfaat dan mungkin juga bisa memberi dorongan untuk terus nglembur, nulis dan selalu memeras otak menuangkan hal-hal baru yang bermanfaat bagi pembaca. O, ....ya ..., Orang-orang atau tetangga sebelah biasa memanggil ku dengan sebutan si gubhug reyo gila, "yang suka melek malam dengan asap lintingan tak pernah telat". Yah ... moga-moga saja sampeyan semua nggak ikutan memanggil ku seperti para tetangga sebelah! Makacih, ya, atas kunjungannya. Maap nggak bisa kasih wedang kopi ma roti bolu!Silahkan buka link di bawah ini untuk mengikuti tutorial menarik lainnya:
http://Iyan Bjm.blogspot.com
Tidak ada komentar:
Posting Komentar
Saya perlu keritik, saran dan pertanyaan dari para pengunjung sekalian, silakan isi kolom di bawah ini :