Database Blogspot Bagian Body

Memasukkan Database Blogspot Bagian Body Kedalam Template


Artikel Database Blogspot Bagian Body ini adalah lanjutan dari artikel Memasukkan Database Blogspot Ke Template. Bagian body adalah bagian untuk menampilkan halaman yang dapat dilihat oleh pengunjung manusia. oleh sebab itu akan banyak sekali kode-kode HTML dan kode-kode database blogspot yang terdapat disana. Kita hanya akan mencoba mengenal beberapa kode saja terlebih dulu, agar kita mudah dalam tahapan mempelajari cara membuat blog.


Struktur Utama Template Body
Hampir semua template blog dinamis biasanya akan terdiri dari  :

1. Header
2. Navigasi
3. Posting
4. Komentar
5. Sidebar
6. Footer

Dan di template yg sdg kita pelajarri ( lihat di sini : http://strukturtemplate.blogspot.com/ )
adalah salah satu template yang akan kita coba untuk menampilkan template dinamis dengan template NEW XML.

Langkah Memasukkan database blogspot bagian Body

1.Ganti tag bagian Header ini :

 <div id='header'>
  <h1><a href='https://bahrululumdotcom.blogspot.com'> Panduan Belajar Membuat Template Blog</a></h1>
 </div>

Dengan kode ini :

<div id='header'>

<b:section class='header' id='header-blogspot' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Template Pertamaku (Header)' type='Header'>

<b:includable id='title'>

  <b:if cond='data:blog.url == data:blog.homepageUrl'>

 <data:title/>

 <b:else/>

 <a expr:href='data:blog.homepageUrl'>
  <data:title/>
 </a>

  </b:if>

</b:includable>

<b:includable id='description'>

  <div class='descriptionwrapper'>

 <p class='description'>
 <span>
 <data:description/>
 </span>
 </p>

  </div>

</b:includable>


<b:includable id='main'>

 <div id='judul-blog'>

 <h1 class='title'>

                <b:include name='title'/>

        </h1>

 </div>
 

<div id='deskripsi-blog'>
<b:include name='description'/>

   </div>

</b:includable>

</b:widget>

</b:section>

</div>

2.Ganti sekumpulan tag-tag bagian posting,komentar,meta dibawah ini  :

<div id='kotak-posting'>

 <div id='Judul-Artikel'>
  Judul Artikel : Menampilkan Gambar FULL pada Header
 </div>

 <div id='isi-Posting'>
  Isi Posting
 </div>

 <div id='rencana-meta'>
  Isi Meta
 </div>

 <div id='komentar'>
  rencana kolom komentar
 </div>

 <div id='form-komentar'>
 rencana form komentar
 </div>
</div>

Dengan kode ini :

Karena ini adalah bagian utama komlom posting,komentar,meta dll, yang sangat kompleks sekali kode-kodenya, maka saya langsung saja membundel nya kedalam satu file yang bisa di download disini: download di 4shared.com : 8kb
kotak-posting-database-24jun12-forupload


3.Ganti sekumpulan tag-tag bagian Sidebar ini :

<div id='ruang-Sidebar'>
  
 <div id='ruang-Sidebar-top-besar'>
  Isi ruang-Sidebar-top-besar
 </div>

 <div id='ruang-Sidebar-kiri'>
  Isi ruang-Sidebar-kiri
 </div>
   
 <div id='ruang-Sidebar-kanan'>
  Isi ruang-Sidebar-kanan
 </div>

</div>

Dengan kode ini :

<div id='ruang-sidebar'>

 <b:section class='sidebar' id='ruang-Sidebar-top-besar' preferred='yes'/>


 <b:section class='sidebar' id='ruang-Sidebar-kiri' preferred='yes'/>

 <b:section class='sidebar' id='ruang-Sidebar-kanan' preferred='yes'/>

</div>

4.Ganti sekumpulan tag-tag bagian Footer ini :

<div id='footer-kaki'>
 Belajar Template copyright 2010 | Template by : <a href='https://bahrululumdotcom.blogspot.com/'>Bahrul Ulum dot com</a>   | Powered by:Blogger
</div>

Dengan kode ini :

<div id='footer-kaki'>

 <b:section class='foot' id='footer-3' showaddelement='no'>

  <b:widget id='Attribution1' locked='true' title='' type='Attribution'>

   <b:includable id='main'>

   <b:if cond='data:feedbackSurveyLink'>

    <div class='mobile-survey-link' style='text-align: center;'>

     <data:feedbackSurveyLink/>

    </div>

    </b:if>


    <div class='widget-content' style='text-align: center;'>

    <b:if cond='data:attribution != ""'>

    <data:attribution/>

    </b:if>

    </div>


    <b:include name='quickedit'/>

   </b:includable>

  </b:widget>

 </b:section>

</div>

Selesai....

Langkah Kedua :Simpan Template di Notepad
Setelah anda mengganti/Mengedit semua kode2, lalu simpan di notepad dengan cara :
1. Klik pada tab file pada notepad,
2. Lalu klik save as,
3. Beri nama dengan Templateku.xml ,
4 .Lalu pada Save as type , pilih All files.
5. Klik save , dan simpan di dekstop.






Langkah Ketiga : Upload ke Blogger
1.Masuk kedashbor blogger
2.Pilih Tab Template ( pada blog yg baru dibikin)
3.Klik pada Tab Cadangkan/Pulihkan ( Disebelah kanan atas




4. Klik Pilih File
5. Lalu cari template yang tadi kita simpan di dekstop
6. Klik OPEN
7. Klik Unggah/Upload , tunggu sesaat sampai selesai ter upload
8. Jika tidak ada masalah, maka kini template bikinan kita sudah merubah bentuk template bawaan blogger.

Catatan : Jika anda masih gagal, silahkan bandingkan dengan template yang telah saya uji coba yang bisa di download disini download di 4shared.com : 6kb :
Template Struktur dasar ubah konten Pos

Sampai disini kita telah sampai pada tahapan akhir memasukkan Database Blogspot kedalam template bikinan kita sendiri. Tinggal kita utak-atik lagi tampilannya dengan merubah kode tag-tag bagian CSS.

Yang perlu diingat : Tidak semua pembuat template itu adalah juga seorang desainer. Perusahaan pembuat template profesional memiliki bagian-bagian tersendiri untuk pembuat kode-kode template dan bagian desainer.
Jadi jangan berkecil hati dulu yah jika template bikinan kita ini terlihat sangat kaku dan sederhana. Seiring dengan waktu dan pengalaman, nantinya mudah-mudahan kita bisa sekaligus menjadi desainer template yang bagus.

Semoga bermanfaat
Salam
Bahrul Ulum