Memberi tampilan huruf dengan ukuran lebih besar pada awal artikel memang tampak lebih menarik, seperti pada artikel ini. Tehnik ini biasa disebut dengan Drop Cap, dan cara membuatnya sebenarnya sama dengan memberikan gambar pada artikel, yaitu menggunakan fitur CSS Float. Intinya dengan Css Float, kita bisa menampilkan gambar ataupun Drop Cap sesuka selera kita, baik disebelah kiri ataupun kanan.

Nah.... bila anda berminat silahkan anda ikuti langkah - langkah berikut :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.


4. Cari kode di bawah ini atau yang mirip dengan kode ini :
</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head> :
<style type="text/css">
hufufbesar
{
float:left;
width:80px;
font-size:400%;
font-family:Edwardian Script ITC;
font-weight:bold;
color:#B85BED;
line-height:80%;
}
</style>
Catatan : Anda bisa ganti jenis huruf sesuai selera anda, silahkan anda bisa lihat macam - macam jenis Font pada artikel Cara Membuat variasi Font pada Teks

6. Simpan Template.  

Langkah selanjutnya anda tinggal menambah sedikit kode HTML pada saat menulis artikel.
Sebagai contoh, saya buat satu paragrap teks sebagai berikut :

"  Dengan CSS float, sebuah elemen dapat kita letakkan disebelah kiri ataupun kanan, yang memungkinkan unsur-unsur lain berada di sekitarnya. Float sangat sering digunakan untuk gambar, tetapi juga berguna ketika berurusan dengan layout, termasuk membuat dropcap seperti pada artikel ini . "
Kemudian pada bagian Edit HTML, sisipkan kode <hufufbesar>HURUF PERTAMA</hufufbesar>, sehingga tampak seperti dibawah ini :


<hufufbesar>D</hufufbesar>engan CSS float, sebuah elemen dapat kita letakkan disebelah kiri ataupun kanan, yang memungkinkan unsur-unsur lain berada di sekitarnya. Float sangat sering digunakan untuk gambar, tetapi juga berguna ketika berurusan dengan layout, termasuk membuat dropcap seperti pada artikel ini.

Berikut hasilnya :
  • Anda juga bisa memberi efek shadow pada huruf tersebut :
Tambahkan kode warna biru berikut pada kode CSS tadi, sehingga menjadi :
<style type="text/css">
hufufbesar
{
float:left;
width:80px;
font-size:400%;
font-family:Edwardian Script ITC;
font-weight:bold;
color:#B85BED;
line-height:80%;

text-shadow: 5px 3px 2px #888888;

}
</style>

Berikut hasilnya :
 
  • Anda juga bisa menambahkan border pada huruf tersebut :
Tambahkan kode warna Merah Muda berikut pada kode CSS tadi, sehingga menjadi :
<style type="text/css">
hufufbesar
{
float:left;
width:80px;
font-size:400%;
font-family:Edwardian Script ITC;
font-weight:bold;
color:#B85BED;
line-height:80%;

text-shadow: 5px 3px 2px #888888;

border:1px solid #919191;
padding:7px;
margin-right:10px;
background-color:#E4F7D3;

}
</style>
 
Berikut hasilnya :
 
  • Anda juga bisa memberi efek box shadow pada border tersebut :
Tambahkan kode warna Merah berikut pada kode CSS tadi, sehingga menjadi :
<style type="text/css">
hufufbesar
{
float:left;
width:80px;
font-size:400%;
font-family:Edwardian Script ITC;
font-weight:bold;
color:#B85BED;
line-height:80%;

text-shadow: 5px 3px 2px #888888;

border:1px solid #919191;
padding:7px;
margin-right:10px;
background-color:#E4F7D3;

box-shadow: 5px 5px 5px #888888;
-webkit-box-shadow: 10px 10px 5px #888888;

}
</style>
 
Berikut hasilnya :
 
Selamat mencoba ya...
Cara menghapus search box bawaan template blog ini berguna bagi anda yang baru saja memakai blog yang bukan standar template blogspot. Mungkin anda ingin menghapusnya karena akan memasang search box Google Adsense untuk pencarian (Adsense for search).

Karena jika memasang search box lebih dari satu akan mengurangi keindahan blog anda dan disatu sisi akan mengurangi peluang pendapatan anda dari Google Adsense untuk pencarian (Adsense for search), terutama bagi anda yang menggunakan blog berbahasa indonesia dimana Google for search adalah satu-satunya jalan mendapatkan duit dari Google Adsense.

Jika memang seperti itu masalah anda berikut caranya :
  1. Login ke Blogspot > Design > Edit HTML
  2. Backup tempalte blog anda untuk antisipasi jika ada kesalahan
  3. Cek list "Expand widget templates
  4. Dengan Ctrl + F Cari kode ini : #searchbox biasanya ada tiga berurutan
  5. Disekitar kode tersebut cari kode yang seperti ini :
#searchbox {
    -moz-background-inline-policy: continuous;
    display: block;
    float: right;
    height: 38px;
    margin-right: 23px;
    margin-top: -42px;
    width: 220px;
}
#searchbox .textfield {
    -moz-background-inline-policy: continuous;
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    float: left;
    height: 24px;
    margin: 5px 1px 2px 5px;
    width: 180px;
}
#searchbox .button {
    -moz-background-inline-policy: continuous;
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    cursor: pointer;
    float: left;
    height: 30px;
    margin-left: 2px;
    margin-top: 6px;
    width: 30px;
}
6. Cari juga kode seperti ini :

7. Hapus semua kode tersebut, atau yang mirip dengan kode tersebut sesuai dengan template anda, perbedaanya biasanya hanya pada ukuran dan style template yang anda gunakan, jadi kode diatas adalah contoh search box bawaan template yang saya gunakan ini.

8.  Simpan template anda dan lihat hasilnya.

9.  Langkah selanjutnya adalah memasang search box baru dari Google Adsense for search, silahkan copy kode yang diberikan dan tempatkan diposisi yang anda inginkan.
Subscribe to: Posts (Atom)