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 (-)
- 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
Berikut kode css untuk merubah background pada halaman Static Page:
<b:if cond='data:blog.pageType == "static_page"'>
<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 == "item"'>
<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
