Membuat Auto Drop Cap Pada Postingan di Blog

Membuat Auto Drop Cap Pada Postingan di Blog - Hello, kawan! Kali ini saya ingin share sebuah tutorial tentang cara membuat auto drop cap pada postingan di blog. Auto drop cap, maksudnya adalah membuat huruf pertama pada setiap postingan di blog anda menjadi kapital (besar) dan memiliki warna yang berbeda dengan yang lainnya sesuai dengan apa yang sudah di atur. Auto drop cap ini biasanya sering di gunakan untuk memperindah struktur tampilan dalam setiap paragraf yang ada supaya terlihat lebih rapi, unik, dan terkesan indah.

Untuk contoh dari auto drop cap ini kurang lebihnya bisa anda lihat pada gambar di bawah ini :

Nahhh, kira-kira begitu penampakannya... :D Dan bagi anda yang tertarik silahkan bisa langsung anda ikuti saja tutorial cara membuat auto drop cap pada postingan di blog berikut ini :

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

4. Kemudian letakkan script kode berikut ini tepat di atas kode ]]></b:skin>.

.capital:first-letter {
float: left;
display: block;
font-family: Times, serif, Georgia, Arial;
font-size: 50px;
color: green;
margin: 5px;
padding: 5px;
}

atau script kode yang ini juga bisa :

p:first-letter {
display: block;
float: left;
color: lime;
font-size: 50px;
font-family: Georgia, Times, Courier, Arial;
margin: 5px;
padding: 5px;
}

5. Pilih salah satu dari kedua script kode di atas, setelah itu klik save/simpan template. Selesai dan lihat hasilnya...

Membuat Widget Labels atau Category Menjadi Dua Kolom

Membuat Widget Labels atau Category Menjadi Dua Kolom - Untuk menghemat tempat yang ada pada blog/web anda, maka kita benar-benar harus bisa berpikir lebih creative dan responsive dalam menanggapi suatu permasalahan yang ada. Widget labels atau category yang ada di blog anda bisa di minimalis agar tidak terlalu memakan tempat, yaitu dengan cara membuatnya menjadi dua kolom.

Langkah pertama yang harus anda lakukan adalah pasang dulu widget labels atau category di blog anda, silahkan bisa anda ikuti tutorial berikut ini :

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Tata Letak".

3. Klik "Tambah Gadget".

4. Kemudian pilih "Labels".

5. Atur widget tersebut menjadi seperti berikut :

6. Klik save/simpan.

Setelah itu, kita beranjak ke langkah selanjutnya yaitu menyisipkan sedikit kode ke bagia HTML template blog untuk membuat widget labels atau category yang sudah di buat agar menjadi dua kolom. Silahkan ikuti langkah-langkah berikut ini!

1. Masuk ke halaman "Template".

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

4. Kemudian cari kode ]]></b:skin> (gunakan Ctrl+F untuk mencarinya) dan letakkan script CSS berikut ini tepat di atasnya!

}#Label1 li {       float: left;       width: 45%; }

5. Lalu klik save/siimpan template, slesai dan lihat hasilnya...

Note :
Untuk previewnya bisa langsung anda lihat pada gambar di atas, hasilnya kurang lebih seperti itu.

Cukup sekian postingan tentang cara membuat widget labels atau category menjadi dua kolom ini, semoga bermanfaat bagi anda.

Cara Membuat Efek Bayangan (Box Shadow)

Cara Membuat Efek Bayangan (Box Shadow) - Pada kesempatan kali ini saya akan share sebuah tutorial tentang cara membuat efek bayangan (box shadow) menggunakan CSS, tepatnya dengan CSS3. Sebenarnya CSS itu kaya akan keunikan dan keindahan jika kita pelajarai lebih dalam dan lebih detail lagi. Semakin dalam kita belajar CSS, akan semakin besar rasa ingin tahu kita tentang apa saja yang bisa di lakukan oleh CSS ini.

Efek bayangan (box shadow) ini memang sangat menarik dan pastinya memiliki daya pikat tersendiri bagi mata. Oke, langsung saja bagi anda yang ingin mencoba untuk membuat efek bayangan (box shadow) ini silahkan bisa anda simak dan perhatikan tutorial cara membuat efek bayangan (box shadow) berikut ini!

Syntax dasar untuk membuat efek bayangan (box shadow) dengan CSS3 :

box-shadow: x-point y-point blur spread color inset;

Keterangan :
1. x-point merupakan bayangan yang mengarah pada offset horizontal (horizontal shadow). Jika bernilai negatif, maka bayangan yang di hasilkan akan mengarah ke samping kiri dan sebaliknya, jika bernilai positif maka akan mengarah ke samping kanan.
2. y-point merupakan bayangan yang mengarah pada offset vertical (vertical shadow). Jika bernilai negatif, maka bayangan yang di hasilkan akan mengarah ke atas dan sebaliknya, jika bernilai positif maka akan mengarah ke bawah.
3. blur untuk mengatur jarak blur dari bayangan (menetukan besar kecilnya efek blur pada bayangan).
4. spread merupakan ukuran dari bayangan itu sendiri.
5. color untuk menetukan warna bayangan yang akan di hasilkan.
6. inset untuk menaruh bayangan di dalam box dan bersifat optional, artinya boleh ada dan boleh tidak.

Perhatikan gambar di bawah ini!

Dan berikut adalah script CSS untuk membuat efek bayangan (box shadow) seperti gambar di atas, mulai dari yang A-F.

Kotak A (tanpa menggunakan efek blur) :

#kotak_A{
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
}

Kotak B (ada tambahan efek blur sebesar 5px) :

#kotak_B{
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}

Kotak C (ada tambahan spread sebesar 5px) :

#kotak_C{
-moz-box-shadow: -5px -5px 0 5px #888;
-webkit-box-shadow: -5px -5px 0 5px#888;
box-shadow: -5px -5px 0 5px #888;
}

Kotak D (ada tambahan efek blur dan spread sebesar 5px) :

#kotak_D{
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;
}

Kotak E (tanpa x-point dan y-point dengan efek blur sebesar 5px) :

#kotak_E{
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}

Kotak F (sama dengan kotak E dengan tambahan spread sebesar 5px) :

#kotak_F {
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px #888;
box-shadow: 0 0 5px 5px #888;
}

Nahhh, cukup sekian dulu postingan saya pada kesempatan kali ini. Semoga postingan dengan judul cara membuat efek bayangan (box shadow) ini bermanfaat bagi anda,