Background Image (Gambar) di Judul atau Nama (Title) Blog BloGGeR Baru

Keterbatasan sebuah template membuat seorang blogger harus pandai-pandai mensiasati sehingga keterbatasan yang ada bukan menjadi suatu penghalang untuk membuat penampilan blog bertambah menarik. Hal seperti ini harus dimaklumi karena membuat sebuah desain blog yang sesuai dengan selera jutaan pengguna pastilah sesuatu yang mustahil dilakukan. Kondisi yang seperti ini tentunya harus mendorong semangat blogger untuk lebih memperdalam pemahaman desain blog. Ketelatenan untuk mengothak-athik template menjadi kunci keberhasilan segala bentuk modifikasi hingga didapatkan sebuah desain blog baru yang benar-benar sesuai dengan cita rasa atau selera pengguna.

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://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgBlogTitleNBTV136H1.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://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgBlogTtl2NBTRedBlackH3V169.gif) 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 ]]></b:skin>. Gunakan Ctrl+F untuk mencari kode tersebut.
   Panduan Cara Cepat mencari kode HTML bisa sampeyan buka dengan KLIK link di bawah ini :
   
   Cara Cepat Cari Kode HTML di Template
6. Letakkan Kode CSS di atas ]]></b:skin>.
7. KLIK SAVE Template/Simpan Template.
8. Buka blog dan lihat perubahan yang terjadi.
9. Modifikasi ini telah di coba di Template BloGGer Baru Awesome Ink by Tina Chen.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «

Keterangan :

- Atur ukuran font dengan merubah nilai pada font-size:60px;
- Jenis font (font-family) dapat dirubah pada font-family:Staccato222 BT;