Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Membuat Drop Cap Disertai Beberapa Efek dan Background Image

Panduan BloGGeR kali ini mencoba memberikan sebuah tips dan triks untuk menampilkan bentuk huruf yang berbeda dan dipadukan dengan berbagai efek pada huruf terdepan sebuah posting baik disetiap alinea atau paragraf. Bentuk huruf terdepan seperti yang tertampilkan dalam blog ini bisa dilakukan secara berulang atau hanya pada huruf terdepan posting.

Terus terang saja ..., bingung juga aku ketika mau menuliskan judul untuk posting ini. Hayo ..., coba seandainya sampeyan yang posting mo di kasih judul apa? Ho yo .... apa coba? Lha ..., bingung to?! Lho ..., kok malah komat-kamit! Emang ada hantu lewat, ya? Ha .... ha ... rasain, tuh! Biar sama-sama bingungnya! Dah ... sambil mikir judulnya mo di kasih kalimat seperti apa, silahkan sampeyan sambil lihat barangnya. Lihat yang cermat, tuh, pantat si bocah jorok yang sukanya membeledingkan pantat!

Untuk membuat model huruf depan dengan tampilan lebih besar dengan background tertentu, kita hanya perlukan sebuah syntax yang terdiri dari beberapa kode CSS. Penggunaanya tergantung selera dan berbagai bentuk tambahan kode CSS seperti misalnya efek kedip (blink sffects) dan efek bayangan teks (text-shadow), efek transparansi atau efek blur (opacity effects) dan efek background lengkung (rounded corners) bisa dijadikan pelengkap untuk membuat tampilannya semakin "nganeh-anehi". Ho ... ho ... super komplit toh, jadinya. Sampeyan silahkan lakukan modifikasi dengan menambah atau mengurangi kode CSS yang nanti aku sertakan. Misalnya background image-nya mau diganti photo tetangga atau photo simbah juga boleh. Mau dihilangkan juga boleh. Mau diperbesar hurufnya juga bisa. Udah, pokoknya terserah sampeyan mo ditampilkan seperti apa. Yang penting blog tambah keren dan punya tampilan berbeda. Oye ...?!

Cara membuat seperti tampilan huruf di atas

  1. Login to BloGGer (Login ke BloGGeR) : Seperti biasanya, tuliskan "User Nameatau Email Address" kemudian tulis "Password (Sandi)".
  2. Dasboard (Dasbor) : KLIK link "Design (Rancangan)".
  3. Design (Rancangan) : KLIK link "Edit HTML".
  4. Find Code (Cari Kode) : Cari Kode "]]></b:skin>". Posisi kode tersebut di atas kode </head>. Gunakan "Ctrl+F" untuk mencarinya.
  5. Copy-Paste : Copy Kode CSS di bawah kemudian Paste di atas kode "]]></b:skin>".
  6. SAVE Template (Simpan Template) : KLIK "SAVE Template (Simpan Template)".

Kode CSS :

.bgsGRhd {
float:left;
color:#0000CC;
line-height:45px;
background:url(http://i964.photobucket.com/albums/ae124/gubhugreyot/anima/LatemBleding.gif) center no-repeat;
margin:-3px 10px 0 0;
font-family:Times New Roman;
padding:3px;
-moz-border-radius:12px;
font-size:4em;
font-weight:700;
text-shadow:white 0.02em 0.02em 0.1em;
opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60);
text-decoration:blink;
border:1px solid blue;
}
.bgsGRhd:hover{
background:url(http://i964.photobucket.com/albums/ae124/gubhugreyot/anima/BlueDog_bgDropCapHov.gif) center no-repeat;
opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);
}

Cara menggunakan di posting :

<span class="bgsGRhd">H</span>uruf depan dipotong dan diletakkan diantara kode (tag) pembuka span dan tag penutupnya.
Terlihat di atas pada kata Huruf, huruf H dipisahkan dari uruf.

Ganti background dan kode CSS

  1. Untuk membuat background pada huruf yang diperbesar tersebut, silahkan ganti URL gambarnya.
    Gambar 1 : http://i964.photobucket.com/albums/ae124/gubhugreyot/anima/LatemBleding.gif
    Gambar 2 : http://i964.photobucket.com/albums/ae124/gubhugreyot/anima/BlueDog_bgDropCapHov.gif.
  2. Ukuran Gambar di max 50px (height) dan 50px (width).
  3. text-decoration:blink; : untuk menciptakan efek berkedip.
  4. Opacity : untuk menciptakan efek blur atau transparansi.
  5. -min-border-radius:12px; : untuk menciptakan efek lengkung di ke-4 sisinya.
  6. font-size : Apabila ukuran huruf diperbesar atau diperkecil, maka line-height juga harus dirubah. Sesuaikan dengan perubahan yang dilakukan pada ukuran huruf.


Drop Caps Otomatis

Jika sampeyan ingin membuat drop caps otomatis yang yang dapat digunakan di halaman posting, kolom komentar atau yang lain, silahkan ikuti tutorialnya dengan klik link di bawah ini:



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


» Happy Blogging - gubhugreyot «


Bagi yang ingin mengikuti panduan cara cepat mencari kode html menggunakan Ctrl+F, sampeyan bisa KLIK di sini!

8 komentar:

  1. Pak dhe..
    saget ndamel tempalate kangge blogger nopo mboten???
    nak saget di posting ke nggih!!!
    matursuwun

    BalasHapus
  2. Saya sedang persiapkan beberapa Extreme Template untuk bisa dimanfaatkan sobat-sobat blogger. Beberapa telah dalam proses finishing. Karena tenaga hanya sorangan wae dan harus juga posting maka ya agak alon-alon. Extreme Template merupakan bentuk-bentuk ektrim desain blog yang jarang ditampilkan karena berbagai penataan yang sangat berbeda dengan template biasa.

    Salam ...

    gubhug reyot

    BalasHapus
  3. ass sob..salam knl blogger ya..sebelumnya aku mw minta tolong ne m soa..klo di ijinin aku minta code yg buat follow animation..ky punya sobat..

    sklian cara pengerjannya y sob..

    di tunggu diani http://rievay-bloodthirsty.blogspot.com/ waslam sob.

    BalasHapus
  4. salam.
    pak, saya tanya, bagaimana cara membuat blogroll untuk wigget yg memiliki gambar, seperti : freewebsubmit, blogger indonesia, dan lambang2 yang lainnya, maklum saya masih awam dan baru blajar blog ( maaf kalau penjelasan saya tidak tepat, bapak bisa lihat di blog saya : karamatsati.blogspot.com- disana banyak sekali tautan wigget dan lambang2nya di sidebar kanan blog saya, bagaimana cara membuatnya menjadi blogroll agar bisa menghemat tempat. terimakasih pak, mohon penjelasannya. salam hormat.

    BalasHapus
  5. mantap mas!! ane uda nyoba, keren simpson nya!

    BalasHapus
  6. Wah..., decak kagum Ae ma blog Mas ne..., sungguh manis pisan...! I Like This Site...!

    Belum pernah Ae liat Blogsite serapi dan semanis ini...! Salut Mas...!

    BalasHapus
  7. Asslkm mas,apa kabar??kenalkan nama sy Arlon, mau berguru blog,bisa minta no kontakny mas??matur nuwun
    Terima kasih banyak...semoga makin berkah...aamiiiin

    BalasHapus
  8. no kontak boleh HP atw pun rumah juga boleh, yang penting saya bisa berguru dengan master "gubhugreyot".ini email sy: sd.alfiis@gmail.com

    BalasHapus

 
GR | Edited by | gubhug reyot