dunia widget: 2014

Selasa, 06 Mei 2014

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 :

1	`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;

}

Membuat Widget Kategori Tertentu Dengan Thumbnail

Widget Kategori Tertentu Dengan Thumbnail Pada Blog, masi seputar pembahasan tentang widget jika sebelumnya saya telah membahsa tentang Widget Live Scor Pada Blog disini saya akan coba membahas tentang widget perlabel.

Sedikit saja saya akan jelaskan arti dari kata kategori ya, karena saya rasa sebagian besar dari kita hanya mengenal tentang kategori sedangkan arti dari kata kategori tersebut sebagian besar belum tahu termasuk saya.

Menurut terminologi bahasa Kategori/Label adalah bagian dari sistem klasifikasi (Golongan, Jenis perangkat, Negara, dsb). Kategori/Label yang berasal dari bahasa Inggris mempunyai makna deskripsi singkat yang diberikan untuk tujuan identifikasi. Kategori/Label merupakan penanda mengidentifikasi atau deskriptif yang melekat pada suatu objek. Itulah sedikit tentang Arti kata Kategori/Label, kembali pada inti pembahasan artikel.

Widget Kategori Tertentu Dengan Thumbnail

Pasti Anda sering menjumpai widget perlabel seperti inikan baik itu pada blog Personal maupun blog magazine, contohnya seperti pada halaman depan blog ini. Seperti yang pernah dibahas oleh sang master template yang bernama Mas Kolis pada blog yang satunya (maskolis.com) widget ini berfungsi untuk mengelompokkan label tertentu agar lebih membantu pengunjung blog untuk mencari kategori-kategori yang ada pada web maupun blog Anda dengan mudahnya.

Baiklah, kita langsung saja pada langkah-langkah pembuatannya :

Pertama letakkan code berikut ini tepat di atas ]]></b:skin>

img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:60px;width:60px;padding:2px}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0}
ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}

Kedua, Letakkan Code JavaScript dibawah ini tepat diatas </head>

<script src='http://fianetmucode.googlecode.com/files/labels.js' type='text/javascript'></script>

Save template, selanjutnya menuju pada tata letak. Tambahkan Gadget Html/Javascript dan masukkan code pemanggil didalamnya di bawah ini

<script type='text/javascript'>var numposts =6;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script> 

<script type="text/javascript" src="/feeds/posts/default/-/Tutorial?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script>

Keterangan :
Numposts =6 adalah jumlah postingan yang akan ditampilkan sedangkan Tutorial ganti dengan nama label pada blog Anda.

Jika ingin menambahkan Selengkapnya tambahkan script di bawah ini tepat di bawah code pemanggilnya di atas

<a href="URL LABEL" style="float:right;font:normal 11px Coda;padding:5px 0;" title="Selengkapnya">Selengkapnya &#187;</a>

Keterangan : Ganti URL LABEL dengan Url Pada Label Anda.

sumber : fianetmu.com

Rabu, 08 Januari 2014

jadwal sholat republika

lagu blog ku