Best Blogger Hack memuat berbagai trik, tips, panduan & tutorial untuk menciptakan berbagai kreatifitas baru yang sebelumnya dipandang tak mungkin dilakukan. Dengan berbagai trik yang dihasilkan melalui obrak-abrik kode html & kode css default blogger, anda bisa mencoba berbagai fungsi baru dari yang sederhana hingga yang kompleks serta berbagai perubahan desain yang sangat radikal.
New Blogger Template/Template Blogger Baru
Kode yang dipergunakan di template blogger baru dan template lama (tata letak & klasik) tidaklah sama, oleh karena itu dalam tutorial ini disertakan 2 (dua) macam bentuk kode untuk blogger baru dan blogger lama. Kode untuk blogger lama juga bannyak dipergunakan di template hasil download.
header{
background: url(https://lh3.googleusercontent.com/-ILlzOVEiQv8/T1jQbeVGY8E/AAAAAAAAB08/SaeQOvFfY8I/s144-c/March82012.jpg);
background-repeat:no-repeat; /* atur pengulangan background */
background-position:98% 10%; /* 90% jarak dari kiri, 10% jarak dari atas */
background-size:100px 100px; /* untuk mengatur width dan height */
}Atau bisa juga dalam bentuk seperti ini:
.header{
background: url(https://lh3.googleusercontent.com/-ILlzOVEiQv8/T1jQbeVGY8E/AAAAAAAAB08/SaeQOvFfY8I/s144-c/March82012.jpg);
background-repeat:no-repeat; /* atur pengulangan background */
background-position:98% 10%; /* 90% jarak dari kiri, 10% jarak dari atas */
background-size:100px 100px; /* untuk mengatur width dan height */
}.Header{
background: url(https://lh3.googleusercontent.com/-ILlzOVEiQv8/T1jQbeVGY8E/AAAAAAAAB08/SaeQOvFfY8I/s144-c/March82012.jpg);
background-repeat:no-repeat; /* atur pengulangan background */
background-position:98% 10%; /* 90% jarak dari kiri, 10% jarak dari atas */
background-size:100px 100px; /* untuk mengatur width dan height */
}.Header-outer{
background: url(https://lh3.googleusercontent.com/-ILlzOVEiQv8/T1jQbeVGY8E/AAAAAAAAB08/SaeQOvFfY8I/s144-c/March82012.jpg);
background-repeat:no-repeat; /* atur pengulangan background */
background-position:98% 10%; /* 90% jarak dari kiri, 10% jarak dari atas */
background-size:100px 100px; /* untuk mengatur width dan height */
}Old Blogger Template/Template Blogger Lama
Template blogger lama seperti template "Minima Blue, Minima Dark, Harbor, Debim, Rounders. Kode ini juga sering digunakan dibanyak template hasil download. Untuk template download ada yang menggunakan bentuk syntax berbeda misalnya #header-wrap atau #header dan beberapa bentuk lainnya.
#header-wrapper {
background: url(https://lh3.googleusercontent.com/-ILlzOVEiQv8/T1jQbeVGY8E/AAAAAAAAB08/SaeQOvFfY8I/s144-c/March82012.jpg);
background-repeat:no-repeat; /* atur pengulangan background */
background-position:98% 10%; /* 90% jarak dari kiri, 10% jarak dari atas */
background-size:100px 100px; /* untuk mengatur width dan height */
}Keterangan:
- Ganti
https://lh3.googleusercontent.com/-ILlzOVEiQv8/T1jQbeVGY8E/AAAAAAAAB08/SaeQOvFfY8I/s144-c/March82012.jpg dengan URL image atau photo yang ingin anda tampilkan di header blog. - Gunakan image dengan ukuran yang tidak terlalu besar, kira-kira seukuran tinggi header agar loading blog tidak terlalu terbebani.
background-size:...px ...px: untuk mengatur lebar dan tinggi image. Gunakan satuan px(pixel). Anda juga bisa merubahnya menjadibackground-size:..px auto; jika diinginkan tingginya mengikuti perbandingan lebar (width), ataubackground-size:auto ..px; ketika akan dibuat lebar otomatis dan tinggi yang ditentukan dalam nilai px.background-position:98% 10%; artingya:
berjarak senilai 98% dari kiri dan 10% dari atas. Jika anda ingin merubahnya di posisi sebelah kiri maka nilai 90% bisa diperkecil hingga 2% s/d 10%. Semakin besar nilai prosentase maka gambar semakin ke kanan atau semakin kebawah.background-repeat:no-repeat; untuk membuat gambar tidak berulang (hanya ditampilkan satu gambar). Jika anda ingin gambar berulang, misalnya yang digunakan bukan photo melainkan sebuah background untuk memenuhi seluruh header makano-repeat dirubah menjadirepeat .
Cara Menyimpan/menggunakan kode css
- Login ke Blogger
Klik untuk login ke Blogger! - Dasbor (Dasboard)
- Template
- Backup/Restore Template. Panduannya bisa dibuka disini
Klik untuk mengikuti panduan cara melakukan backup/restore template. - Edit HTML
- Template › Edit HTML
- Procced (Lanjutkan)
- Cari Kode
]]></b:skin> - Gunakan
Ctrl + F untuk mempermudah & mempercepat pencarian. - Letakkan kode css di atas kode tersebut.
- Simpan Template/Save Template
- Selesai! Silahkan coba cek hasilnya dengan membuka blog anda!
Catatan/Keterangan:
Jika anda ingin menggabungkan kode css untuk menampilkan image seperti yang ada di atas dengan kode default blog (kode yang sudah ada di blog), maka carilah syntaxnya yang sama, kemudian kode css di jadikan satu dan diletakkan di bawah kode yang sudah terpasang.Contoh kode default blog:
#header-wrapper {
width:860px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}Bentuk kode yang diperbarui dengan tambahan kode css baru:
#header-wrapper {
width:860px;
margin:0 auto 10px;
border:1px solid $bordercolor;
background: url(https://lh3.googleusercontent.com/-ILlzOVEiQv8/T1jQbeVGY8E/AAAAAAAAB08/SaeQOvFfY8I/s144-c/March82012.jpg);
background-repeat:no-repeat; /* atur pengulangan background */
background-position:98% 10%; /* 90% jarak dari kiri, 10% jarak dari atas */
background-size:100px 100px; /* untuk mengatur width dan height */
}
