Stitched Box Shadow

Bagaimana membuat sebuah box berisikan teks atau yang biasa disebut text box???

Tertarik membuatnya dengan CSS dan berkreasi dengan warna maupun tampilannya???

Coba lihat demo dibawah ini :

1. Login ke blogger.

2. Pilih Template - Edit HTML.

3. Centang Expand Template Widget.

4. Letakkan kode berikut diatas </style> :

.stitched {
   padding: 20px;
   margin: 10px;
   background: #FE80DF;
   color: #fff;
   font-size: 18px;
   font-weight: bold;
   line-height: 1.3em;
   border: 2px dashed #fff;
   border-radius: 10px;
   box-shadow: 0 0 0 4px #000000, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
   text-shadow: -1px -1px #aa3030;
   font-weight: normal;
} 

5. Simpan Template.

Selesai???

Belum sob, untuk menampilkan box nya sendiri mulailah pada elemen dimana box ini ingin diletakkan, misalnya di sebuah halaman posting dengan menggunakan kode HTML :

     <div class="stitched">

        ISI TEXT ANDA DISINI

    </div>

Bagaimana, mudah bukan???

Untuk berkreasi dengan warna maka bisa lihat kode-kode nya disini.

Terima kasih, semoga bermanfaat...

Referensi : CSS Tricks

Tips Membuat Scroll Box di Dalam Postingan

Pernahkan anda melihat tampilan seperti ini pada postingan seseorang? Saya yakin anda sering melihatnya, terutama untuk memudahkan para blogger dalam membedakan sebuah kode script. Yup bener banget, scroll box ini biasa dipakai untuk memudahkan para pembaca membedakan sebuah script yang disertakan dalam sebuah postingan. Selain itu hal ini juga mempermudah pembaca, karena tidak akan memakan banyak tempat apabila script yang disertakan dalam postingan. 

Jika sebelumnya scroll box ini saya buat untuk style label dan yang lainya untuk cuztumize blog sekarang saya akan menjelaskan bagaimana cara memasukan scroll box di postingan untuk membedakan teks biasa dengan script. 

Oke langsung saja saya jelaskan bagaimana cara memasukan scroll box di postinan blog.

• Yang pertama, masuk ke blog anda

•  Sebelum posting sesuatu, alangkah lebih baik kalau anda buat dulu teksnya di Microsoft Office World

• Buat scroll Box dengan mempastekan script berikut di postingan anda (bukan di compose tetapi di HTML)

<div style=padding: 5px; overflow: auto; width: auto;height:50px;border:1px solid #000000>  

</div>

}

• Pastikan anda membuat scroll sebanyak script yang akan anda masukan ke postingan anda

• Kemudian klik save

• Anda sudah siap memasukan script di scroll box dan teks lainnya tentunya

Selamat Mencoba, Good Luck :)