MENAMBAH BACKGROUND DI JUDUL BLOG

Sebagai bahan modifikasi blog di blogger baru, kali ini akan kita pelajari bersama cara membuat sebuah penampilan berbeda pada judul atau nama blog (Blog Title) dengan memanfaatkan sebuah background gambar (background image) dan beberapa efek seperti misalnya opacity effect (efek transparansi), hover effects, box shadow, text shadow, dan rounded corners. Kelebihan penggunaan background image pada sebuah blog terletak pada kemampuannya untuk menciptakan sebuah tampilan dinamis dengan berbagai variasi pewarnaan, pengaturan posisi bacground serta dimungkinkanya penggunaan sebuah gambar animasi yang membuat blog semakin terlihat atraktif.

Dari kode css yang tersertakan nanti, silahkan sampeyan bisa lakukan pengurangan atau mungkin bahkan penambahan kode supaya bentuk header dari desain yang akan kita buat ini mampu memberikan nilai tambah terhadap tampilan blog. Kode CSS yang akan kita pergunakan untuk merubah penampilan header blog adalah seperti di bawah ini :

.header h1.title{
  background:#222 url(http://i42.tinypic.com/2hcnk2e.png) top repeat-x;
    font: normal normal 60px Staccato222 BT;
    color: #0066FF;
    text-shadow:2px 2px 3px #f8c067;
    margin-right:10px;
    border:1px solid #eee;
    -moz-border-radius:15px;
    border-radius:15px;
    -webkit-border-radius:15px;
    -goog-ms-border-radius:15px;
    -moz-box-shadow: 3px 3px 5px #333;
    -webkit-box-shadow: 3px 3px 5px #333;
    -goog-ms-box-shadow: 3px 3px 5px #333;
    box-shadow: 3px 3px 5px #333;
    padding:0 20px;
    text-align:center;    
    }
.header h1.title:hover{
  background:#222 url(http://i49.tinypic.com/28cj9r5.jpg) left bottom repeat-x;
   color:#01dcfd;
    }

Cara Melakukan Perubahan Pada Judul atau Title Blog BloGGeR Baru

1. Login ke BloGGer
2. Setelah memasuki halaman Dasbor, KLIK link Design/Rancangan.
3. KLIK link Edit HTML.
4. Back-up Template dengan cara KLIK link Download Full Template (Download Template Lengkap) kemudian simpan file template di folder PC.
5. Tetap di Edit HTML kemudian Cari kode ]]>

. Gunakan Ctrl+F untuk mencari kode tersebut.

Letakkan Kode CSS di atas ]]>

.

KLIK SAVE Template/Simpan Template.

Buka blog dan lihat perubahan yang terjadi.

Modifikasi ini telah di coba di Template BloGGer Baru Awesome Ink by Tina Chen.