Cara Resize Gambar di Home page Magazine Template R.1.2

Sambil larak-lirik posisi Kampanye Damai Pemilu Indonesia 2009 di om google, mending ngebahas yang lain biar tidak bosan. Sudah beberapa kali kang Rohman menerima keluhan tentang Magazine Template R.1.2, keluhannya yaitu tentang tampilan gambar yang ada di bagian home page yang terlihat kecil.

Bagaimana cara resize gambar di home page magazine Template magazine R.1.2 ?

Jika anda merasa kurang nyaman dengan tampilan gambar yang ada pada home page magazine Template R.1.2, anda bisa me resize nya dengan cara berikut :

 

• Login ke blogger dengan ID anda.
• Klik Tata Letak.
• Klik tab Edit HTML

• Cari kode berikut :

   

  .post-body img{
        max-width:70px;
        padding:1px;
        float:left;
        margin:0 5px 1px 0;
        border: 1px solid #cadaef;
  }

  
  
  

   

  
  



• fokus pada kode :
  

   

  
  
  

  max-width:70px;

  
  
  

   

  
  



• 
  

  Gantilah nilai pixelnya dengan yang lebih tinggi, di sarankan tidak lebih dari 300px, misal :

  
  
  

   

  
  
  

  max-width:300px;

  
  
  

   

  
  



• 
  

  Sehingga kodenya akan menjadi seperti dibawah ;

  
  
  

   

  
  
  

  .post-body img{
        max-width:300px;
        padding:1px;
        float:left;
        margin:0 5px 1px 0;
        border: 1px solid #cadaef;
  }

  
  



• Klik tombol Simpan template



• Selesai

Keterangan tambahan :

Max-width artinya maksimal lebar gambar yang ditampilkan. Mudah bukan?

 

Selamat mencoba!

Buat Kolom Dibawah Header Pada Magazine Template 2

Jika sebelumnya kang Rohman telah membuat tutorial tentang cara membuat kolom di atas kolom posting pada template magazine 2, maka pada kesempatan kali ini mencoba alternatif lain yaitu membuat kolom dibawah kolom header. Ini tentunya berguna bagi anda yang suka menyimpan iklan langsung di bawah header.

Jika menilik pada desain asli magazine template 2, maka anda tentu saja tidak dapat menyimpan iklan atau apa saja langsung di bawah header. Berikut desain asli dari magazine template 2 :

 

Dan kita akan membuatkan kolom baru yang langsung berada di bawah kolom header, berikut contoh ilustrasi dari penempatan iklan langsung di bawah kolom header :

 

Tertarik ingin membuat kolom langsung di bawah header? berikut adalah cara lengkapnya :

1. Silahkan login ke Blogger dengan ID anda.
2. Klik Tata Letak
3. Klik tab Edit HTML.
4. Klik tulisan Download Template Selengkapnya.
5. Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.
6. Cari kode ]]></b:skin>.
7. Copy paste kode berikut persis di atas kode  ]]></b:skin>.

   .adscolumn{
   width:933px;
   padding:10px 3px;
   background:#fff;
   margin:5px 10px 0px 10px;
   text-align:center;
   border:1px solid #C0C0C0;
   }

   .adscolumn .widget{
   }

8. Lihat ke bagian bawah, lalu cari kode berikut :

   <div id='main-wrapper'>

9. Copy paste kode berikut persis di atas kode <div id='main-wrapper'> :

   <b:section class='adscolumn' id='adscolumn' preferred='yes'/>

10. Klik tombol SIMPAN TEMPLATE.

11. Selesai.

 

Langkah selanjutnya, silahkan klik tab Elemen Halaman, maka anda akan melihat tata letak template menjadi seperti contoh gambar berikut :

 

Sekarang anda sudah bisa memasukan apa saja langsung di bawah kolom header.  Selamat mencoba!

Jangan lupa juga untuk mengunjungi para sponsor Blog Kang rohman yang ada di bawah kolom header serta di bawah posting ini agar kang Rohman rajin membuat tutorial baru !

Buat Kolom Diatas Kolom Posting Pada Magazine template 2

Tutorial kali ini khusus Kang Rohman tujukan bagi anda para pengguna template magazine 2 yang ingin menambahkan kolom baru di atas kolom posting. Ini di sebabkan setelah melakukan inspeksi ke beberapa pengguna template magazine 2, ternyata banyak diantaranya yang sering memasang iklan atau apa saja di atas kolom posting, namun tampilannya menjadi kurang enak untuk di lihat. Coba perhatikan gambar di bawah ini :

 

 

Coba bandingkan dengan gambar berikut :

 

 

Di lihat dari segi fungsi, kedua duanya memiliki fungsi yang sama yaitu memasang iklan di atas kolom posting, tidak ada yang salah dengannya. Namun, secara estetika gambar yang kedua jauh lebih baik. Disamping memiliki fungsi memasang iklan, nilai keindahan dari template tersebut tidak menjadi rusak ( itu menurut kang Rohman lho ).

Untuk menciptakan seperti gambar yang kedua seperti contoh di atas, anda perlu membuat kolom baru di atas kolom posting. Bagi yang berminat, silahkan ikuti langkah-langkah berikut ini :

 

1. Silahkan login ke Blogger dengan ID anda.
2. Klik Tata Letak
3. Klik tab Edit HTML.
4. Klik tulisan Download Template Selengkapnya.
5. Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.
6. Cari kode ]]></b:skin>.
7. Copy paste kode berikut persis di atas kode  ]]></b:skin>.

    

   .topcolumn{
   width: 578px;
   padding:10px 0px 10px 10px;
   background:#fff;
   margin:0px 0px 10px 0px;
   text-align:left;
   border:1px solid #C0C0C0;
   }

   .topcolumn .widget{
   }

    

8. Lihat ke bagian bawah, lalu cari kode berikut :

    

   <div id='main-wrapper'>

    

9. Copy paste kode berikut persis di bawah kode <div id='main-wrapper'> :

    

   <b:section class='topcolumn' id='topcolumn' preferred='yes'/>

    

10. Klik tombol SIMPAN TEMPLATE.

11. Selesai.

 

Langkah selanjutnya, silahkan klik tab Elemen Halaman, maka anda akan melihat tata letak template menjadi seperti contoh gambar berikut :

 

 

Sekarang anda sudah bisa memasukan apa saja di atas kolom posting anda tanpa harus mengganggu keindahan dari template anda.

 

Selamat mencoba! serta jangan lewatkan, posting selanjutnya adalah tentang cara menambahkan kolom baru di bawah kolom header untuk template magazine 2. Jangan sampai terlewatkan!.

Tips Atasi Error "ID Widget seharusnya unik"

Mungkin ada diantara rekan-rekan sekalian yang merasa prustasi ketika
melakukan Edit HTML pada kode template selalu mengalami kegagalan
akibat adanya pesan error yang seperti ini misalnya :

Kami tidak dapat menyimpan template Anda.




Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi



   Lebih dari satu widget ditemukan dengan id: HTML1. ID Widget seharusnya unik.

atau mungkin yang seperti ini :

Kami tidak dapat menyimpan template Anda.




Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi



   Lebih dari satu widget ditemukan dengan id: Feed1. ID Widget seharusnya unik.

Pesan error nya sama persis, yang berbeda hanyalah id nya saja yaitu : HTML1 dan Feed1.
Dan itupun hanya sekedar contoh saja, ID yang muncul mungkin HTML2, HTML3, HTML4 dst, atau
mungkin juga Feed2, Feed3, Feed4 dst. Bagi yang belum mengetahui, mungkin akan merasa bingung
atau bahkan seperti di katakan di awal yaitu merasa prustasi untuk sekedar mengedit kode template miliknya.
Pertanyaan yang mungkin muncul yaitu apa penyebab bisa muncul pesan error seperti di atas tadi? jika saya boleh
menjawabnya mungkin seperti ini : pesan error tersebut muncul karena di dalam template sobat ada dua buah widget atau lebih
dengan ID yang sama. Masih bingung? saya beri contoh agar tidak larut dalam kebingungannya. Misalkan di dalam
template sobat terdapat kode-kode widget seperti ini :


<div id='sidebar-wrapper'>

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

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

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

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

</b:section>

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

<b:widget id='HTML5' locked='false' title='Belajar buat website' type='HTML'/>

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

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

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

<b:widget id='HTML7' locked='false' title='Yang mampir' type='HTML'/>

<b:widget id='HTML8' locked='false' title='Site feed' type='HTML'/>

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

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

</b:section>




Pada contoh di atas terlihat ada dua buah kode widget dengan ID yang sama, yaitu HTML1 (perhatikan hurup yang di cetak merah):





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



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






Apabila kejadiannya seperti contoh di atas, maka dapat di pastikan sobat tidak akan pernah bisa mengubah atau mengedit
kode template sobat karena akan selalu menerima pesan error. Kejadian ini sering terjadi ketika sobat mengganti template
yang lama dengan template yang baru. Ada kalanya sang desainer template mencantumkan beberapa widget di dalam template
buatannya. Ketika kode template itu di upload blogger, maka antara widget milik sobat dengan widget sang desainer template
berada dalam satu kode widget dengan ID yang sama.



Setelah mengetahui penyebab dari pesan error seperti yang di terangkan di atas, pasti muncul pertanyaan lanjutan
yaitu bagaimana cara untuk mengatasi masalah tersebut? Dan jawaban saya pun kira-kira seperti ini : apabila muncul
error "ID Widget seharusnya unik" maka caranya gampang sekali yaitu sobat harus mengubah ID yang error dengan
ID baru yang belum ada di dalam kode widget, dalam hal ini adalah angka nya yang di bedakan. Contoh : apabila pesan error
yang di tayangkan mengusung ID:HTML1, maka sobat harus mengubahnya dengan ID yang lain, misal HTML30, HTML31,
HTML32, ataupun dengan angka yang lainnya yang penting tidak sama dengan ID widget yang lainnya. Ambil contoh kode-kode
widget seperti ini :


<div id='sidebar-wrapper'>

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

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

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

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

</b:section>

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

<b:widget id='HTML5' locked='false' title='Belajar buat website' type='HTML'/>

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

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

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

<b:widget id='HTML7' locked='false' title='Yang mampir' type='HTML'/>

<b:widget id='HTML8' locked='false' title='Site feed' type='HTML'/>

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

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

</b:section>




Maka tugas sobat hanyalah mengubah salah satu ID nya dengan nomor yang belum ada, misal ID HTML1 di ubah menjadi
ID HTML15, misal kodenya jadi seperti ini :


<div id='sidebar-wrapper'>

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

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

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

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

</b:section>

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

<b:widget id='HTML5' locked='false' title='Belajar buat website' type='HTML'/>

<b:widget id='HTML15' locked='false' title='Free Download' type='HTML'/>

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

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

<b:widget id='HTML7' locked='false' title='Yang mampir' type='HTML'/>

<b:widget id='HTML8' locked='false' title='Site feed' type='HTML'/>

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

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

</b:section>




Apabila ID widgetnya sudah di ubah, silahkan coba save lagi templatenya. Saya kira tidak
akan ada lagi pesan error yang menjengkelkan tadi.



Selamat mencoba !

How to fix error message "Widget IDs should be unique" ?

Possibly you ever have the pip when doing Edit HTML
at your template code always experience of failure with error message like this :

We were unable to save your template.




Please correct the error below, and submit your template again.



    More than one widget was found with id: HTML1. Widget IDs should be unique.

Or maybe like this:

We were unable to save your template.




Please correct the error below, and submit your template again.



    More than one widget was found with id: Feed1. Widget IDs should be unique.

Error message is same , the different only at ID, that is HTML1 and Feed1.
And that is just an example, ID which emerge possibly HTML2, HTML3, HTML4 etc,
or possibly also Feed2, Feed3, Feed4 etc. Possibly you will feel
to confuse with this error message, because you can't edit your template code.
The question possibly emerge that is what do cause can emerge the error message like that? if I may answer possible it be like this : error message emerge because in your template code is have two widgets or more with same ID. Still confuse? I give an example. For example in your template code have widget code be like this :


<div id='sidebar-wrapper'>

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

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

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

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

</b:section>

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

<b:widget id='HTML5' locked='false' title='Belajar buat website' type='HTML'/>

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

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

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

<b:widget id='HTML7' locked='false' title='Yang mampir' type='HTML'/>

<b:widget id='HTML8' locked='false' title='Site feed' type='HTML'/>

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

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

</b:section>




At the example above seen two widget codes with the same ID, that is HTML1 (attention the red letter):






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



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






If the case such as the example, of course you can't Saving your template code because it will always error.
What must be doing if the case like that? you must change one of widget ID with diffrent ID. Example :
change HTML1 with HTML15
or other number, but the number must be different with other widget ID.


<div id='sidebar-wrapper'>

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

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

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

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

</b:section>

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

<b:widget id='HTML5' locked='false' title='Belajar buat website' type='HTML'/>

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

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

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

<b:widget id='HTML7' locked='false' title='Yang mampir' type='HTML'/>

<b:widget id='HTML8' locked='false' title='Site feed' type='HTML'/>

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

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

</b:section>




You just change one of widget ID with different number, example : HTML1 changed with HTML15, for example :


<div id='sidebar-wrapper'>

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

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

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

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

</b:section>

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

<b:widget id='HTML5' locked='false' title='Belajar buat website' type='HTML'/>

<b:widget id='HTML15' locked='false' title='Free Download' type='HTML'/>

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

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

<b:widget id='HTML7' locked='false' title='Yang mampir' type='HTML'/>

<b:widget id='HTML8' locked='false' title='Site feed' type='HTML'/>

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

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

</b:section>




If you had changing your widget ID, click Save Template button. And you will never se the error message.