Create 2 New Elements Under the Posting Blog: New Blogger Templates

Pembuatan Element Baru di Bawah Widget Post New Blogger Templates.
Membuat elemen baru untuk pemasangan beberapa wifget blog sangat penting dilakukan. Pembuatan elemen baru berguna untuk lebih memudahkan pengaturan posisi/tempat widget yang terpasang atau mau dipasang. Kita akan coba bahas cara membuat elemen baru di bawah kolom/box posting atau tepatnya di bawah kolom komentar. Sisi menguntungkan dari elemen baru dengan lokasi di bawah boks posting adalah kedekatanya dengan posting yang setiap saat di baca pengunjung serta lebar bidang yang cukup luas. Bila kita menggunakan template 2 kolom maka 2 buah elemen baru dengan lebar masing-masing 250px bisa termanfaatkan. Sampeyan juga bisa merubahnya menjadi 2 elemen dengan lebar (width) berbeda (misalnya 300px dan 200px). Sangat efektif dan tepat sebagai sebuah wadah widget! Beberapa widget seperti Stats, Recent Posts, Popular Posts, Related Posts, atau mungkin Profile Blogger dan beberapa widget lain bisa di tempatkan di sini.

Cara Membuat Element Baru di bawah Posting di New Blogger Template

• Login to Blogger
• Dasboard
• Design/Rancangan
• Edit HTML
• Back-up Templates (lihat caranya di Special Tutorials - menu sebelah kiri atas).
• Cari Kode (find CSS Code) ]]></b:skin>.
• Letakkan Kode CSS di atas ]]></b:skin>.
• Cari kode:

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

• Letakkan xHTML berikut tepat di bawahnya.

<div id='bottompostLEFT'>
<b:section class='bottompostleft' id='bottompostleft' showaddelement='yes'/>
</div>
<div id='bottompostRIGHT'>
<b:section class='bottompostright' id='bottompostright' showaddelement='yes'/>
</div>

• KLIK SAVE Templates/Simpan Templates.
• Periksa hasilnya di Page Elements/Elemen Laman di bawah "Posting Blog".
• Apabila Elemen baru sudah terlihat, coba isi dengan widget. Sampeyan bisa menggeser widget yang sudah ada di sidebar seperti widget profile, stats, label, arsip atau yang lain (dengan cara di "drag") untuk melakukan percobaan hingga hasil fungsi elemen baru bisa dilihat di halaman blog. Setelah "drag widget dari sidebar" KLIK "SAVE", kemudian buka blog.

Kode CSS

#bottompostLEFT {
        float: left;
        overflow: hidden;
        width: 200px;
        margin: 20px 0 10px 0;
        padding: 0;
}
#bottompostRIGHT {
        float: right;
        overflow: hidden;
        width: 200px;
        margin: 20px 0 10px 0;
        padding: 0;
}
.bottompostleft .widget, .bottompostright .widget  {
        border-bottom: 2px solid #666;
        padding-bottom: 10px;
        margin: 10px 0;
}
.bottompostleft .widget a:link, .bottompostright .widget a:link {
        color: $(widget.link.color);
        text-decoration: none;
}
.bottompostleft .widget a:visited, .bottompostright .widget a:visited {
        color: $(widget.link.visited.color);
}
.bottompostleft .widget a:hover, .bottompostright .widget a:hover {
        color: $(widget.link.color);
        text-decoration: underline;
}

Catatan/Keterangan:

• Untuk mencari kode <b:section class='main' .... dst, cari sebagian kode terlebih dahulu agar lebih mudah. Contoh cari yang ini terlebih dahulu.
  <b:section class='main' id='main' showaddelement='no'>
• Gunakan Ctrl+F untuk mencari kode. Sampeyan bisa membuka tutorial Cara Cepat Cari Kode di Template dengan membuka Special Tutorials.
• Untuk memudahkan pembuatan elemen baru ini sebaiknya gunakan width/lebar dari ukuran yang agak kecil terlebih dahulu, baru selanjutnya semakin diperlebar hingga diperoleh ukuran yang paling tepat. Sampeyan bisa memperkirakan ukuran dua elemen baru yang dibuat dengan melihat dan membandingkan dengan lebar halaman posting.
• Setiap perubahan pada width elemen baru, periksa hasilnya dengan membuka blog.
• Akan lebih baik buat percobaan terlebih dahulu di blog khusus nyoba desain baru. Buatlah sebuah blog khusus percobaan!

Perbandingan Cara Buat Elemen

Sampeyan bisa membuka link di bawah ini untuk membandingkan pembuatan elemen baru di bawah posting yang dibuat dengan cara sedikit berbeda dan dilakukan di Blogger Lama (Template Tata Letak).

Cara Lain Membuat Elemen di Bawah Posting Blog

Untuk melihat hasil yang telah diterapkan di halaman blog, silahkan buka link demo berikut (lihat di bawah kolom komentar. Di elemen baru ditempatkan widget Related Posts dan Recent Posts).

D E M O

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «