Jumat, Oktober 22, 2010

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 sampeyan juga bisa memindahkan widget profile, stats atau atau label/categories. Yah ..., kenapa tidak? Sesuatu yang baru selama tidak merugikan aku kira layak untuk di coba. E ... barangkali pas buat blog sampeyan?!

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.
    • Tulis User Name atau Alamat Email.
    • Tulis Password/Kode Rahasia/Sandi.
    • KLIK "Login".
  • 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:
  • <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.

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.


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 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 ....!


Tutorial Menarik Lain


Anda bisa mengikuti tutorial blogger yang super lengkap dan berisi ratusan tutorial dengan bahasa yang gampang dipahami lengkap dengan berbagai desain cantik CSS3 dengan membuka link di bawah ini:

Related Posts

11 komentar:

  1. Permisi... aku boleh tanya kan senior....
    Kalau menjadikan widget sebelah kanan supaya bisa di isi 2 buah htm gmana???
    seperti mengisikan gadget share facebook dan twitter berdampingan dan sejajar...
    Bantuin dunk???

    BalasHapus
  2. wah masih bingung aku..semoga aja cepat paham.makasih

    BalasHapus
  3. mantabs tutorialnya, lanjutkan terus mbak tanty

    BalasHapus
  4. tanti I Love You Full .. Muachh

    http://mbahlogis.blogspot.com/

    BalasHapus
  5. mantappp infonya mbak!!

    happy blogwalking
    by: Aan Shared
    http://aan-shared.blogspot.com

    BalasHapus
  6. Mantapsss......
    Terima Kasih Atas Ilmunya

    BalasHapus
  7. Terima kasih Infonya Bro, izin ikut menerapkan ya. hehe

    Informasi Lowongan Kerja Terbaru BUMN, BANK, Persero, Swasta, & Berbagai Perusahaan Besar di Indonesia : http://expocpnsbumn.blogspot.com/

    BalasHapus
  8. Makasih bgt bro info nya, sangat bermanfaat saya. hehe
    Jangan Lupa mampir ke blog EXPO Lowongan Kerja Terbaru ane ya Lowongan Kerja PT. INKA Multi Solusi

    BalasHapus
  9. thanks untuk artikelnya yaa mbak.. emmm mohon kunjungan baliknya di: http://bulshitman.blogspot.com

    BalasHapus

 
Tantytm | Edited by | Tanty Template Modification