Artikel Pilihan

Programmer Corner


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

Font adalah salah satu element desain yang sangat mempengaruhi hasil dari keseluruhan desain, karena dengan pemilihan jenis font yang tepat maka akan menghasilkan sebuah desain yang pas dan enak dilihat

Berikut ini beberapa font gratis:

Cardo

Tenderness

St Marie

SMD Black

Days typeface

ElementalEnd

Block face

Null

Droid

Dekar


Font adalah salah satu element desain yang sangat mempengaruhi hasil dari keseluruhan desain, karena dengan pemilihan jenis font yang tepat maka akan menghasilkan sebuah desain yang pas dan enak dilihat

Berikut ini beberapa font gratis:

Aerofrog

High Five

St Transmission

Teardrop

Lobster

Fabianstem

Circled

Color Lines

Luco

Badabing


Font adalah salah satu element desain yang sangat mempengaruhi hasil dari keseluruhan desain, karena dengan pemilihan jenis font yang tepat maka akan menghasilkan sebuah desain yang pas dan enak dilihat

Berikut ini beberapa font gratis:

Matey

Base

Prociono

Gembira

MSD.10 Typeface

Rubber

Paranoid

Sertig

Code

Solgas

Dapatkan artikel via Email!

Jika menyukai artikel yang dimuat pada weblog ini, silahkan daftarkan melalui email untuk mendapatkan langganan artikel terbaru yang dibuat. Semua artikel akan secara otomatis dikirimkan ke email yang didaftarkan! GRATIS!