Membuat Box Informasi Tepat di bawah Posting, di atas Kolom Komentar

Membuat box tepat di bawah posting pastinya akan sangat bermanfaat bagi siapapun. Box akan berada tepat di antara teks posting terakhir dan kolom komentar. Sebuah posisi yang sangat strategis sehingga anda harus menggunakannya untuk sesuatu yang benar-benar bermanfaat dan menarik bagi pengunjung. Beberapa link dan informasi penting dapat dengan cepat terakses (dibaca) karena posisinya yang tak dibatasi oleh apapun dengan teks terakhir yang anda postingkan. Image di atas adalah sebuah contoh box bawah posting berikut isi dalamnya yang berupa informasi terkait beberapa blog penting yang bisa diakses agar mendapatkan lebih banyak lagi panduan dan tutorial blogger ataupun tutorial blogdetik. Jika anda sering mengikutksertakan informasi tertentu yang selalu sama setiap kali posting, maka dengan cara membuat box bawah posting ini informasi penting tersebut cukup dituliskan satu kali saja dan selalu akan terlihat sitempat yang sama setiap posting dilakukan (tak lagi harus menuliskannya lagi di setiap kali posting). Anda akan banyak menghemat energi sekaligus hemat kose html. Bagaimana? Enak, kham?!

Cara membuat box bawah posting

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Edit HTML.
5. Lakukan backup template dengan cara:
   
   • Klik Download Template Lengkap (Download Full Template).
   • Simpan file template di folder PC. File yang sudah tersimpan ini berfungsi untuk mengembalikan template ke kondisi sebelum perubahan dilakukan jika terjadi kesalahan yang mengakibatkan kerusakan desain blog. Untuk memulihkan template seperti sebelum perubahan anda bisa klik Browse dan dilanjutkan Upload.
6. Cari kode <b:if cond='data:post.hasJumpLink'> atau kode yang ini <div class='post-header-line-1'/>.
7. Di atas kode <b:if cond='data:post.hasJumpLink'> atau di bawah kode <div class='post-header-line-1'/> akan ditemukan kode seperti berikut:
   

   Kode html yang juga harus ditemukan:

   <data:post.body/>
         <div style='clear: both;'/> <!-- clear for photos floats -->

8. Copy dan pastekan kode html box bawah posting di bawah kode di atas..
9. Klik Simpan Template (Save Template).

Kode HTML Box Bawah Posting

<b:if cond='data:blog.pageType == "item"'>
<div style='float:left;margin:30px 0;padding:0;width:100%;'>
<!-- Awal Content Box Bawah Posting --> 
<h3>Tutorial Lain Yang Wajib di ikuti:</h3>
<div style='min-height:100px;overflow:auto;padding:20px 10px;border:3px double #666;background:#ddd;position:relative;margin:10px 0;'>
<ul>
<li><a href='http://gubhugreyot.blogspot.com' target='_blank' title='Ratusan tutorial blogger dan blogdetik tersedia di sini!'>gubhugreyot-blogger</a></li>
<li><a href='http://gubhugreyot.blogdetik.com' target='_blank' title='Panduan ngeblog di blogdetik sekaligus cara modifikasi blogdetik dan blogger'>gubhugreyot-blogdetik</a></li>
<li><a href='http://bgsgr.blogspot.com' target='_blank' title='Mau belajar design css3? Klik saja karena disinilah tempat yang anda cari!'>bgsgr-blogspot</a></li>
<li><a href='http://lightbox-demo-tutorial.blogspot.com' target='_blank' title='Berbagai Lightbox dan Media Viewer lain tersedia di sini!'>Lightbox : Demo &amp; Tutorial</a></li>
<li><a href='http://lightbox-demo-tutorial.blogspot.com' target='_blank' title='Lengkapi tutorial yang sudah anda jelajahi dengan tutorial spesial yang pasti belum anda baca di sini.'>TantyTM-blogger</a></li>
</ul>
</div>
<!-- Akhir Content Box Bawah Posting --> 
</div>
<div style='clear: both;'/>  <!-- penting harus digunakan --> 
</b:if>

Keterangan/Catatan:

1. Kode box bawah posting di atas telah ditambahkan beberapa link sebagai sample.
2. Ganti isi box jika diperlukan untuk menampilkan sesuatu yang berbeda seperti image misalnya.
3. Anda bisa mengganti beberapa teks yang bercetak tebal dan miring jika kode yang ingin ditampilkan tak jauh beda dengan sample di atas.