Membuat Blog Bergaya Magazine Style Template

Semenjak kemunculan Wordpress Theme bertajuk Magazine Style Theme, sebut saja Mimbo Theme, Revolution Theme, Arthemia Theme, dan banyak lagi yang lainnya, seakan ada trend baru dalam membuat theme atau template yaitu mengadopsi Magazine Style Theme atau Magazine Style Template. Salah satu korban nyata atas trend tersebut adalah Kang Rohman sendiri , pada dua template yang release paling akhir kang Rohman beri nama magazine Template walaupun keduanya belum benar-benar mengadopsi Magazine Style Template

Ciri khas dari magazine style template adalah ada kolom atau isi dari blog tersebut yang bisa hilang di saat kita membaca keseluruhan artikel atau bahkan sebaliknya yaitu ada kolom yang tadinya tidak muncul menjadi muncul.



Apakah template blogger bisa memakai sistem  seperti itu? jawabannya adalah bisa. Coba lihat contohnya di http://magazine-1.blogspot.com  silahkan perhatikan semua widget yang ada, kemudian klik pada tombol Read Full story, dan yang terjadi adalah ada sebagian widget yang menghilang dari pandangan, dan begitupun sebaliknya ada yang tadinya tidak muncul menjadi muncul (sidebar bawah).

Teknik yang di gunakan sangatlah sederhana, anda tinggal membubuhkan kode tambahan pada widget yang ingin di hilangkan atau bahkan di munculkan, berikut adalah kode tambahannya :



Muncul menjadi tidak muncul :

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

Widget yang ingin di hilangkan

</b:if>



Tidak muncul menjadi muncul :

 <b:if cond='data:blog.pageType == "item"'>

Widget yang ingin di di munculkan

</b:if>



Sebagai contoh, silahkan anda lihat kode template anda. anda akan melihat kode yang mirip seperti kode di bawah ini :



<div id='sidebar'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='HTML8' locked='false' title='Blog Tutorial Untuk Pemula' type='HTML'/>

<b:widget id='HTML7' locked='false' title='Get Update Via Email' type='HTML'/>

<b:widget id='HTML1' locked='false' title='' type='HTML'/>

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>

<b:widget id='Label2' locked='false' title='Browse by Categories' type='Label'/>

<b:widget id='HTML2' locked='false' title='Site Info' type='HTML'/>

</b:section>

</div>

Satu kode widget seperti :

<b:widget id='HTML8' locked='false' title='Blog Tutorial Untuk Pemula' type='HTML'/>

Kode seperti di atas berarti mewakili satu widget atau Gadget yang kita pasang di sidebar atau di footer. Widget tersebut akan muncul di halaman depan blog anda. Apabila pada template biasa pada umumnya,walaupun di klik menu read more atau baca selengkapnya, widget –widget tersebut akan selalu muncul. Jika anda menambahkan kode yang saya tulis di atas, maka widget tersebut akan tidak tampil, contoh :



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

<b:widget id='HTML8' locked='false' title='Blog Tutorial Untuk Pemula' type='HTML'/>

</b:if>



Itu jika untuk satu widget saja, jika anda mempunyai widget banyak yang berderet kebawah dan ingin menyembunyikan semuanya, maka kode yang di pasang seperti ini :

<div id='sidebar'>

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

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='HTML8' locked='false' title='Blog Tutorial Untuk Pemula' type='HTML'/>

<b:widget id='HTML7' locked='false' title='Get Update Via Email' type='HTML'/>

<b:widget id='HTML1' locked='false' title='' type='HTML'/>

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>

<b:widget id='Label2' locked='false' title='Browse by Categories' type='Label'/>

<b:widget id='HTML2' locked='false' title='Site Info' type='HTML'/>

</b:section>

</b:if>

</div>



Itu untuk membuat widget dari yang muncul menjadi menghilang. Jika untuk yang dari yang tidak muncul menjadi muncul lumayan sedikit repot karena anda harus membuka expand template anda terlebih dahulu dengan memberi tanda ceklis pada kotak kecil di samping tulisan Expand Template Widget. Contoh, jika anda belum membuka expand widget template, kode widget akan terlihat seperti ini :

<b:widget id='HTML8' locked='false' title='Blog Tutorial Untuk Pemula' type='HTML'/>



Maka jika setelah di expand akan terlihat seperti ini (perhatikan judul widgetnya) :

<b:widget id='HTML8' locked='false' title='Blog Tutorial Untuk Pemula' type='HTML'>

<b:includable id='main'>

  <!-- only display title if it's non-empty -->

  <b:if cond='data:title != &quot;&quot;'>

    <h2 class='title'><data:title/></h2>

  </b:if>

  <div class='widget-content'>

    <data:content/>

  </div>

  <b:include name='quickedit'/>

</b:includable>

</b:widget>



Jika widget tersebut tidak ingin tampil di halaman depan, kemudian ingin tampil apabila masuk halaman artikel, maka anda harus menambahkan kode seperti ini :

<b:widget id='HTML8' locked='false' title='Blog Tutorial Untuk Pemula' type='HTML'>

<b:includable id='main'>

<b:if cond='data:blog.pageType == "item"'>

  <!-- only display title if it's non-empty -->

  <b:if cond='data:title != &quot;&quot;'>

    <h2 class='title'><data:title/></h2>

  </b:if>

  <div class='widget-content'>

    <data:content/>

  </div>

  <b:include name='quickedit'/>

</b:if>

</b:includable>

</b:widget>

Jangan lupa untuk klik tombol SIMPAN TEMPLATE dan nikmati tampilan blog anda yang bergaya Magazine style Template.



Bingung.. bingung… bingung, kang Rohman suka bikin bingung orang, kalau bikin tutor setengah-setengah begitu . Eithhh.. tenang dulu donk, kan belum selesai, artikel nya saja belum saya tutup. Bagi anda yang masih bingung dengan keterangan di atas, coba langkah-langkah di bawah ini :

Untuk Widget muncul kemudian menghilang

1. Login ke blogger dengan ID anda.


2. Klik Tata Letak


3. Klik tab Edit HTML


4. Silahkan klik tulisan Download Template Lengkap. Silahkan di backup dulu templatenya (penting!)


5. Cari kode yang mirip seperti ini di template anda : <div id='sidebar'>
   
   <b:section class='sidebar' id='sidebar' preferred='yes'>
   
   <b:widget id='HTML8' locked='false' title='Blog Tutorial Untuk Pemula' type='HTML'/>
   
   <b:widget id='HTML7' locked='false' title='Get Update Via Email' type='HTML'/>
   
   <b:widget id='HTML1' locked='false' title='' type='HTML'/>
   
   <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
   
   <b:widget id='Label2' locked='false' title='Browse by Categories' type='Label'/>
   
   <b:widget id='HTML2' locked='false' title='Site Info' type='HTML'/>
   
   </b:section>
   
   </div>


6. Pilih widget mana yang mau di sembunyikan, kemudian tambahkan kodenya, contoh :
   
   <b:if cond='data:blog.url == data:blog.homepageUrl'>
   
   <b:widget id='HTML8' locked='false' title='Blog Tutorial Untuk Pemula' type='HTML'/>
   
   </b:if>


7. Klik tombol SIMPAN TEMPLATE


8. Selesai.

Untuk Widget Menghilang kemudian muncul

1. Login ke blogger dengan ID anda.


2. Klik Tata Letak


3. Klik tab Edit HTML


4. Beri tanda ceklis pada kotak di samping tulisan Expand Template Widget, tunggu beberapa saat sampai proses selesai.


5. Cari kode widget yang mau anda modifikasi, contoh :
   
   <b:widget id='HTML8' locked='false' title='Blog Tutorial Untuk Pemula' type='HTML'>
   
   <b:includable id='main'>
   
   <b:if cond='data:blog.pageType == "item"'>
   
     <!-- only display title if it's non-empty -->
   
     <b:if cond='data:title != &quot;&quot;'>
   
       <h2 class='title'><data:title/></h2>
   
     </b:if>
   
     <div class='widget-content'>
   
       <data:content/>
   
     </div>
   
     <b:include name='quickedit'/>
   
   </b:if>
   
   </b:includable>
   
   </b:widget>


6. Klik tombol SIMPAN TEMPLATE.


7. Selesai.

Mudah-mudahan dapat dengan mudah di fahami, selamat bereksperimen!