Responsive Blogger Background Berdasarkan Tipe Halaman

Struktur template atau kerangka sistem interface Google Blog menggunakan format XML. Lalu apa itu XML? Silahkan Searching aja banyak kok penjelasannya :D

Kali ini gue mau bikin tutorial untuk membuat responsive background yang berbeda ditiap tipe page pada Google Blog. Google Blog memiliki 3 tipe halaman, yaitu Index, Static Page, dan Item. Berikut penjelasan masing-masing tipenya:

• Index,  adalah halaman utama saat blog diakses. Cirinya pada url hanya berisikan nama domain dari blog. Misalkan: http://irfantanjung.blogspot.com/
• Static Page, adalah halaman statik yang dibuat untuk keperluan tertentu, misalnya untuk membuat halaman kontak, tentang blog, atau yang lainnya. Cirinya pada url terdapat huruf p setelah nama domain blog. Misalkan: http://irfantanjung.blogspot.com/p/kontak.html
• Item, adalah halaman yang digunakan untuk memuat artikel yang dibuat. Cirinya pada url terdapat judul artikel yang dipisahkan tanda (-)

Setelah paham perbedaan dari tipe-tipe halaman pada Google Blog, maka selanjutnya tinggal oprek templatenya. Sebelum lanjut, pastikan blog menggunakan bahasa inggris, hal ini dikarenakan agar sama dengan langkah yang gue buat. Berikut langkah-langkahnya:

• Masuk ke Google Blog Admin Page
• Pilih Blog yang akan di edit templatenya
• Pilih Template pada menu sidebar sebelah kiri
• Pilih Edit Template
• Pada halaman Template Editor, cari tag CSS untuk BODY dengan cara menekan kombinasi tombol CTRL+F atau COMMAND+F. Kemudian tuliskan body { pada kotak pencarian dan di ikuti menekan tombol ENTER
• Jika sudah ditemukan kode CSS untuk element body, maka sisipkan kode css berikut kedalam element body

body {
 color: #5E6472;
 font-family: "open sans", sans-serif;
 font-size: 15px;
 line-height: 25px;
 background: url(url_gambar_background) no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

• Ganti tulisan url_gambar_background menjadi url link untuk gambar yang akan digunakan sebagai background. Kemudian pilih tombol Save
• Lakukan refresh pada halaman blog

Jika berhasil maka background sudah menggunakan gambar yang dipilih tadi, dan posisinya akan konstan walaupun jendela browser diperkecil ataupun diperbesar. Selanjutnya tinggal membuat agar tiap tipe halaman memiliki background yang berbeda-beda. Namun sebelum membuat kode css pembeda, anggap saja perubahan yang tadi dibuat merupakan sebagai Default kode css atau kode css untuk halaman utama. Jadi selanjutnya tinggal membuat kode css untuk halaman Static Page dan Item.

Berikut kode css untuk merubah background pada halaman Static Page:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
 <style type='text/css'>/*CSS background static page*/
  body {
   color: #5E6472;
   font-family: "open sans", sans-serif;
   font-size: 15px;
   line-height: 25px;
   background: url(url_gambar_background_static_page) no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
  }
 </style>
</b:if>

Berikut kode css untuk merubah background pada halaman Item:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <style type='text/css'>/*CSS background item*/
  body {
   color: #5E6472;
   font-family: "open sans", sans-serif;
   font-size: 15px;
   line-height: 25px;
   background: url(url_gambar_background_item) no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
  }
 </style>
</b:if>

Tempatkan masing-masing kode diatas setelah kode ]]></b:skin>
kemudian pilih Save dan Refresh halaman blog, maka background tiap halaman akan berbeda.


Referensi Artikel didapatkan dari:

http://stackoverflow.com/questions/22556250/make-background-image-responsive