Membuat Efek Bayangan (Box Shadow) Dengan CSS

Apa Itu CSS?

CSS merupakan kependekan atau singkatan dari Cascading Style Sheets, yang berfungsi untuk mengontrol tampilan dari sebuah halaman website sehingga akan lebih terstruktur dan seragam.

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa file. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

Sebelum memasuki dunia CSS, anda harus mampu menguasai dasar-dasar HTML

CSS dapat mengendalikan ukuran gambar, warna body teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri/kanan/atas/bawah, dan parameter lainnya.CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokument. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Cara Sederhana Membuat CSS Box Shadow

CSS Box Shadow sering digunakan untuk menampilkan bayangan pada elemen level-blok ( seperti div ). Dalam CSS menggunakan properti box-shadow menempel satu atau lebih bayangan yang muncul pada sebuah box. Properti box-shadow dapat diterapkan pada browser Firefox, Chrome, IE, Safari dan Opera. Mari kita lihat contoh CSS di bawah dengan melihat gambar diatas :

Box :”A”

.shadow {

  -moz-box-shadow:    3px 3px 5px 6px #ccc;

  -webkit-box-shadow: 3px 3px 5px 6px #ccc;

  box-shadow:         3px 3px 5px 6px #ccc;

}

Beberapa istilah properti yang dipakai pada CSS Box Shadow

1. Bayangan offset horisontal, untuk offset positif berarti bayangan akan berada di sebelah kanan boxsedangkan untuk offset negatif akan menempatkan bayangan pada sebelah kiri box.

2. Bayangan offset vertikal, untuk offset negatif berarti bayangan akan berada di atas box sedangkan offset positif berarti bayangan akan berada di bawah box.

3. Radius blur (opsional), jika diatur pada posisi 0 bayangan akan menjadi tajam, pemberian angka yang lebih tinggi, bayangan pada box akan menjadi lebih blur (buram).

4. Radius penyebaran (opsional), untuk nilai positif akan menambah ukuran bayangan dan untuk nilai negatif  akan mengurangi ukuran. Standar yang digunakan adalah 0 (bayangan adalah ukuran yang sama seperti blur)

5. Warna, default warna bayangan box adalah warna hitam, namun bisa diatur dengan warna yang lain.

SHADOW INNER ( Bayangan di dalam box )

Box “B”

.shadow {

   -moz-box-shadow:    inset 0 0 10px #000000;

   -webkit-box-shadow: inset 0 0 10px #000000;

   box-shadow:         inset 0 0 10px #000000;

}

Bayangan di Satu-Sisi

Box “C”

.one-edge-shadow {

            -webkit-box-shadow: 0 8px 6px -6px black;

               -moz-box-shadow: 0 8px 6px -6px black;

                    box-shadow: 0 8px 6px -6px black;

}

Catatan : Anda tidak langsung mencopas kode "ELEMENT" langsung sama persis seperti diatas,karena element yang akan anda modifikasi pada template blog tentu berbeda, bisa jadi yang ingin anda rubah adalah box pada element body content,post-body atau element pada side bar.

Selamat Mencoba & Semoga Bermanfaat.

Jika Anda memiliki masalah dengan penempatan kode seperti diatas, silahkan kontak admin

Cara Membuat Kotak Script KEREN Pada Postingan

Kotak script sendiri berfungsi untuk memperindah setiap postingan artikel yang menggunakan kode kode HTML,CSS, atau Bisa juga untuk menampilkan informasi penting, biasanya informasi penting dibuat beda tampilanya supaya mendapat banyak respon, mengapa demikian? Karena biasanya yang paling beda itu yang biasa banyak  di lihat.

Cara membuat kotak script warna-warni pada postingan

Untuk membuat kotak scriptnya sendiri sebenarnya tidaklah susah, hanyamungkin butuh kesabaran di setiap posting artikel, anggap saja setiap postingan artikel ini aset sobat, kalo misal sobat anggap postingan ini aset, pasti sobat akan mempercantik atau memperindah setiap posting artikel, karena asal sobat tahu artikel setiap postingan sobat tidak akan hilang, dan akan tetap ada selama blog sobat tidak diblokir, mulai sekarang sebisa mungkin sobat buat artikel itu suatu hal yang menarik dan satu hal lagi, anggap artikel itu aset buat sobat yang akan tetap abadi.

Lanjut ke cara membuat kotak script warna-warni pada postingan,Ok langsung saja kita membahas ke topik utama cara membuat kotak script warna warni di poastingan blog, berikut :

1. Masuk ke Blogger

2. Klik Entri Baru

3. Kemudain Pilih HTML – bukan Compose

4. Masukan kode script berikut disetiap sobat akan membuat postingan artikel

Berikut kode scriptnya :

Cara membuat kotak script warna - berwarna pada postingan blog Pertama

<div style="background-color: #008893; border: 2px #22486e dashed;color:#fff;padding: 10px; t-align: left;"> Kode Script anda letakkan Disini </div>

Cara membuat kotak script warna berwarna pada postingan blog Kedua

<div style="background-color:#FFF8DC; border: 2px #22486e solid;border-radius:5px; padding: 10px; text-align: left;">Kode Script anda letakkan Disini </div>

Cara membuat kotak script warna berwarna pada postingan blog ketiga

<div style="background-color:#2F4F4F;color:#fff;border-radius:5px;padding: 10px; text-align: left;">
Kode Script anda letakkan Disini </div>

Cara membuat kotak script warna berwarna pada postingan blog keempat

<div style="background-color: #82cafa; border: 3px #22486e double; color: #222222; padding: 10px; text-align: left;">
Kode Script anda letakkan Disini </div>

Cara membuat kotak script warna berwarna pada postingan blog kelima

<div style="background-color:#8B0000;color:#fff; border: 2px #22486e inset; padding: 10px; text-align: left;">Kode Script anda letakkan Disini </div>

Cara membuat kotak script warna berwarna pada postingan blog keenam

<div style="background-color: #c2c2c2; border: 2px #22486e ridge; padding: 10px; text-align: left;">Kode Script anda letakkan Disini </div>

Cara membuat kotak script warna berwarna pada postingan blog ketujuh

<div style="background-color:#87CEFA; border: 2px #22486e solid; padding: 10px; text-align: left;">Kode Script anda letakkan Disini </div>

Keterangan  :

  * Kode warna merah adalah background, silahkan sobat ganti sesuai keinginan

  * Border adalah Ketebalan garis

  * Solid,ridge,inset,double,dll adalah garis tepi, silahkan pilih sesuai hati.

  * Padding adalah jarakgaris dengan tulisan

Saya rasa cukup sekian tutorial cara membuaut kotak script warna warni atau berwarna sederhana pada postingan blog, jika mungkin sobat masih bingung cara penerapan, silahkan tinggalkan komentar, jika Sobat nmemiliki permasalahan dalam penerapan script diatas..

Demikian cara membuat kotak script warna warni atau berwarna sederhana terima kasih atas kunjunganya.

Semoga Bermanfaat..

Cara Memasang Auto Readmore di Blogger Blog

Mungkin jika pemula dan membuat blog dengan template defaultnya Blogger maka anda akan melihat satu perbedaan dengan Blog atau website lain yang Anda kunjungi,anda pernah  menemukan sebuah artikel terputus dan anda diharuskan untuk klik link readmore atau baca selengkapnya untuk dapat melihat artikel secara utuh.Tujuan dari pemasangan readmore (summary post) ini sendiri bertujuan untuk menghemat ruang halaman homepage blog sehingga tampilan homepage akan tampak rapi.

Bagi anda yang ingin sekali memasang auto readmore di posting blogger,pada kesempatan kali ini saya akan membagikan sebuah tutorial untuk membantu anda membuat auto readmore sederhana di blog yang anda miliki.

Berikut cara memasang auto readmore di posting blogger

1. Pertama-tama yang anda harus lakukan adalah masuk ke halaman dashboard blog anda di www.blogger.com dengan menggunakan akun blogger yang anda miliki.

Backup dulu template Anda sebelum melakukan peng-editan

2. Setelah masuk ke halaman dashboard,silahkan anda klik Template lalu klik EDIT HTML

3. Cari kode </head> lalu letakkan kode berikut ini di atas kode </head>

<script type='text/javascript'>

var thumbnail_mode = &quot;float&quot; ;

summary_noimg = 250;

summary_img = 250;

img_thumb_height = 50;

img_thumb_width = 50;

</script>

<script type='text/javascript'>

//<![CDATA[
//Autoreadmore by bloggingpasuruan.blogspot.co.id

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

if(img.length>=1) {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

summ = summary_img;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

Keterangan:

summary_noimg = 250 (panjangnya teks pada post yang tidak memiliki gambar)

summary_img = 250 (panjangnya teks pada post yang memiliki gambar)

img_thumb_height = 50 (ukuran tinggi gambar/tumbnail pada postingan)

img_thumb_width = 50 (ukuran lebar gambar/tumbnail pada postingan)

4. Jika sudah,selanjutnya anda cari kode <data:post.body/> ,silahkan anda hapus kode tersebut dan ganti dengan kode dibawah ini.

Anda akan menemukan kode <data:post.body/>  lebih dari satu,gantilah <data:post.body/>  yang ke du atau yang ketiga.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/><b:else/> <b:if cond='data:blog.pageType != &quot;item&quot;'> <style type='text/css'>.post-footer {display:none;}</style> <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script><span class=' pasuruanreadmorelink ' style='float:right'><a expr:href='data:post.url'>Read More</a></span></b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></b:if>

Catatan:

Teks yang saya beri warna merah adalah untuk menonaktifkan fungsi post footer baik dihalaman homepage maupun statis.Anda dapat menghapus kode tersebut jika anda ingin mengaktifkan fungsi post footer.

5. Agar tampilan kelihatan lebih menarik,anda dapat memasukkan css berikut ini diatas kode ]]></b:skin.

/* CSS Read more link*/

.pasuruanreadmorelink a{font-family:cuprum; background-color:#45818e; color:#FFF; font-size:12px; padding:1px 3px 1px; text-transform:none}

. pasuruanreadmorelink a:hover{background-color:#2E5760}

6. Jika sudah,silahkan anda klik simpan.

Terakhir,lihatlah homepage blog anda dan lihatlah apabila auto readmore telah muncul maka anda telah berhasil memasang auto readmore di posting blog anda.

Bagaimana? cukup mudah bukan?

Catatan : Tutorial diatas adalah cara menambahkan AUTO READMORE pada TEMPLATE DEFAULT bukan MODIFIKASI READ MORE yang sudah ada sebelumnya pada template Blog Anda.

Semoga bermanfaat