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

Memasukkan Database Blogspot Ke Template Buatan Sendiri

Setelah lama sekali saya menjanjikan untuk mempublish artikel memasukkan database blogspot kedalam template, maka kini saya coba menuliskan tahapan memasukkan beberapa database blogspot untuk template buatan kita sendiri. Saya bukannya sedang banyak waktu luang, tapi ini karena saya kefikiran terus sama janji saya untuk meneruskan artikel cara membuat template. Dan mudah-mudahan ini bisa menjadi jawaban atas beberapa permintaan teman-teman yg mungkin ingin serius menjadi pembuat template atau minimal ingin mengenal template blog.



Catatan : Artikel ini merupakan lanjutan dari seri membuat template blogspot yang dimulai dari sini : Cara membuat template blog. Untuk anda yang baru saja mampir di artikel ini silahkan lihat dulu dari awal yah.

Saya ingin mengingatkan sekali lagi , bahwa saya bukanlah AHLI pembuat template, saya sekedar membagikan pengalaman saya dalam mengutak-atik template blog atau website saya. Jadi mungkin masih banyak kekurangan yang tidak dapat memuaskan anda. Jadi jika ada kesalahan baik disengaja atau tidak sengaja, saya mohon di maafkan seikhlasnya.

Fungsi Database

Database berfungsi menyimpan data untuk ditampilkan berulang-ulang di  halaman yang sama atau di halaman berbeda. Dengan adanya database, maka website atau blog bisa di bikin menjadi website yang dinamis.Website dinamis adalah website yang halamannya bisa dirubah atau berubah atau bertambah dan berkurang konten nya seiring dengan penambahan atau pengurangan pada database yang diinput, tanpa harus merubah kode halaman HTML nya.Ciri yang paling mudah dikenali untuk website dinamis adalah pada  kolom komentar.

Pendahahuluan : Pengenalan Database Blogspot

Blogspot atau blogger memiliki dua kode-kode database yang berbeda cara penulisan dan peng aplikasian nya. Yaitu database untuk template klasik dan database untuk template NEW XML.
Jika anda mau mencoba semua pembelajaran template dari mulai contoh template 1 s/d template 20 , anda bisa menggunakan form template klasik. Untuk hal ini saya sarankan anda untuk MEMBUAT BLOG BARU di blogspot, jangan blog anda yang telah berjalan(sudah banyak artikel) dijadikan bahan percobaan, nanti akan banyak trial dan error yang terjadi, sehingga blog anda yang sudah eksis akan terganggu.

Untuk contoh aplikasi di template klasik telah saya buat disini :
http://strukturtemplate.blogspot.com/

Cara memasukkan kode-kode struktur template contoh ke template klasik , sbb :

1. Buat blogspot baru ( harus ), beri judul dan URL blog terserah anda.
2. Setelah itu langsung menuju ke pengaturan TEMPLATE ( Klik Tab Template)
3. Lalu scroll ke paling bawah halaman, klik :"Kembali ke Template Klasik" , klik lagi link Kembali ke Template Klasik , sampai terbuka Editor template HTML.
4. Hapus kode2 yg ada di kolom editor HTML tsb.Dan gantikan dengan kode2 HTML yg ada di templatepertama20 ,atau bisa copy yg ada disini : view-source:http://strukturtemplate.blogspot.com/
5. Lalu tekan "Save" atau "Simpan Template"
6. Lihat hasilnya

Jika ada yang bertanya :"Apa beda template klasik dengan template New XML ?". silahkan lihat di postingan ini :
http://universityofbloggers.blogspot.com/2009/02/cara-merubah-template-blog.html

Beberapa hal yang ingin saya tambahkan untuk perbedaan template klasik dengan NEW xml adalah pada template NEW xml ada kemudahaan dalam DRAG and DROP fitur widget dll. Kalau di template klasik, kita harus menambahkan sendiri kode-kode widget kedalam editor HTML, sedangkan di NEW xml, kita hanya tinggal klik add gadget lalu pilih widget yang ingin ditampilkan.Template NEW juga kini semakin mudah untuk didesain dengan menggunakan fitur "Blogger Template Designer" . Kelebihan lain, kini ada fitur memasukkan deskripsi dan ada fitur Pengalihan URL ( Redirect ).

Sedangkan kelebihan Template klasik, karena dia sedikit dalam meminta kueri ke database,maka template klasik sedikit lebih cepat loading nya dibanding template NEW xml.


Baiklah, kita kembali ke tema database blogspot. Karena kita ingin kedepannya bisa lebih mudah dalam peng operasian blog, maka kita akan membatasi pada database blogspot NEW XML saja.

Struktur Database Blogspot

Kode-kode Database Blogspot akan banyak kita temukan dengan kode bukaan:
b:section
b:widget
b:includable
b:include


Saya tidak akan membahas maksud dari kode-kode itu di artikel ini, saya akan langsung mulai memberikan beberapa database blogspot penting untuk dimasukkan kedalam template kita.

Langkah Memasukkan database Blogspot New XMl ke Template

1. Sebelumnya lihat lagi struktur template dasar yang ada di sini : view-source:http://strukturtemplate.blogspot.com/ copy semua kodenya.
2. Bikin lagi blogspot baru, atau jika mau pakai blog yg tadi kita ubah ke template klasik, maka ubah lagi ke tempate new xml, caranya klik pada link : "Tingkatkan Template"
3. Lalu masukkan kode-kode yg tadi kita copy.

Setelah kode dimasukkan, lalu kita mulai  lakukan penggantian kode-kode sbb :

A. Database dan Kode tag bagian atas Template blog (sebelum body)

1. Ganti tag

<html>

dengan tag ini :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

2. Ganti tag :
<title>Template Pertamaku</title>

dengan kode ini :

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
    <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
      <meta content='width=1100' name='viewport'/>
    </b:if>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>

3.Ganti tag :

<style type='text/css'>

dengan kode ini :

<b:skin><![CDATA[/*

4.Ganti tag :

</style>

dengan kode ini :

]]></b:skin>

---

Hmmm... karena artikel Memasukkan Database Blogspot Ke Template ini sudah terlalu panjang, maka akan saya lanjutkan di postingan berikutnya disini :
Database blogspot bagian body

Beberapa hari yang lalu tak ada hujan atak ada angin, aku tiba-tiba masuk ke sebuah gedung aula tua. Terlihat gedung itu sangat berantakan dan tak ada yang sanggup untuk memperbaikinya.Aku juga heran kenapa gedung yang dinding nya tampak bagus, dengan hiasan dan ornamen yang cantik serta ada pajangan-pajangan yang sangat elok, lalu kenapa terlihat berantakan? Dan juga kulihat banyak disana-sini air tergenang?

Lalu aku mendapati ada seorang yang tampak berwibawa sedang duduk termenung di sebuah bangku sederhana. Aku mendekati orang itu dan mencoba mencari tau apa yang sedang difikirkannya. Ternyata orang itu sedang memikirkan bagaimana caranya me renovasi gedung yang sudah berulang kali gonta-ganti kontraktor, dan selalu tak berhasil menjadikan gedung itu berfungsi sebagaimana mestinya. Lalu aku mencoba membuat solusi dengan menyodorkan beberapa lembar kertas rencana. Aku sendiri tak ingat apa solusi yang kutuliskan di kertas itu, pokoknya aku ingat hanya memberikan kertas ke orang itu saja.



Orang itu menerima kertas ku dengan memicingkan mata seperti berfikir keras. Ia tampak meneliti kertas rencanaku dengan serius. Dibolak-balik kertasku beberapa kali. Dan beberapa saat kemudian, orang itu berteriak: " Haaaa.. ini dia.. ini yang saya mau..!!." Katanya dengan girang dan spontan.

Dipanggilnya aku dan diberikan kembali kertas rencana itu kepadaku. Orang itu lalu mengatakan bahwa aku lah yang pantas meneruskan perbaikan gedung itu.Aku lalu diberikan surat perintah kerja sebagai bukti bahwa aku ditunjuk oleh orang itu sebagai kontraktor yang akan merenovasi total menurut gambar kerja yang aku berikan. Saking girangnya, aku berlari keluar dan langsung pulang kerumah ku.

Tak ada yang istimewa buat anda atas ceritaku itu, tapi buatku itu istimewa. Karena orang itu adalah Bapak Joko Widodo sang walikota Solo yang terkenal itu.

Aku heran dan bingung , padahal aku belum pernah bertemu beliau sebelumnya. Dan aku bagai mendapat berkah bisa dipertemukan langsung dengan pak Joko Wi, demikian panggilan pak walikota yang merakyat itu.Apalagi pertemuan ku itu adalah pertemuan membawa rezeki buat ku, yakni aku diberikan proyek renovasi gedung aula yang beberapa kali telah gagal dikerjakan oleh beberapa kontraktor sebelumnya.

Namunnnn... yang tidak enaknya.. ternyata itu cuma mimpi ku dimalam hari. Ya itu Cuma mimpi. Saat aku terbangun aku masih saja termangu. Kenapa aku ketemu dengan pak Joko widodo yah? Padahal aku lihat beliau aja cuma di televisi. Dan itu pun jarang sekali aku nonton TV.

Ahh.. mudah-mudahan mimpi ini menjadi pertanda baik saja buat aku dan juga buat pak Joko Widodo.Semoga beliau selalu mendapat bimbingan, lindungan dan cucuran Rahmat dari Allah SWT. Amiien...

My Diary... 11 Juni 2012

Cara Kembali Ke Profil Blogger dari Profil Google

Setelah tulisan saya tentang merubah profil Blogger ke Profil Google plus , lalu ada pertanyaan bagaimana caranya jika kita mau kembali ke profil Blogger ? Mungkin ada alasan tertentu sehingga dianatara kita ingin kembali ke profil blogger semula.



Saya belum pernah melakukan merubah kembali profil google plus ke blogger, namun jika anda ingin melakukan nya anda bisa coba dengan mengunjungi link ini :
http://www.blogger.com/revert-profile.g

Tapi kalau aturan nya tidak berubah , anda tdk bisa beralih kembali ke profil blogger setalah anda merubah keprofil google plus, setelah lewat masa 30 hari. Namun tak ada salah nya untuk mencoba.

Demikian tulisan Mengembalikan Profil Google Plus Ke Profil Blogger ini saya sampaikan sebagai jawaban dari pertanyaan yang ada di kolom komentar disini : bagaimana caranya untuk kembali ke profil blogger semula?