Membuat Text Box CSS

DESCRIPTION

Apa itu Text Box CSS
Text Box CSS adalah semacam widget yang digunakan untuk membuat teks penting dalam suatu postingan. Mungkin ada yang pernah melihat teks box model biasa dan yang menarik, namun belum tahu cara membuatnya. Text Box ini tidak terlalu penting, menurut saya Text Box berguna untuk mempercantik suatu website. Untuk membuatnya sangat mudah, Anda hanya ikuti langkah berikut. 

Anda bisa melihat langsung demo di atas!

Memasang Text Box di Blog

1. Login Blogger.
2. Pilih Template, Edit HTML.
3. Letakkan CSS berikut di atas code

<style type='text/css'>
/* basic styling OneBlogTricks.blogspot.com  */

.lifted_content_box {
    display: block;
    width: 500px;
    margin: 0 auto;
    position: relative;
}
.lifted_content_box h1 {
    font-size: 14px;
    font-weight: bold;
    line-height: 2em;
    margin: 0; /* for the triangular shape/cut */
    height: 0;
    border-bottom: 25px solid #505050; /* kinda acts as the height */
    border-right: 15px solid transparent; /* adjust to change the angle */
    display: inline-block;
    color: #fff;
    text-shadow: 1px 1px 0 #585858;
    padding: 0 10px;
    vertical-align: bottom; /* fixes the mysterious gaps bug */
}
.lifted_content_box div {
    padding: 10px;
    background: #fff;
    border-top: 5px solid #505050; /* was just experimenting. gives a nice look and feel: D */;
    -webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.20);
    -moz-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.20);
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.20);
}
.lifted_content_box p {
    margin: 0 0 10px;
    color: #555;
    line-height: 1.5em;
}
/* lifted shadows  */
.lifted_content_box::before,
.lifted_content_box::after {
    content: '';
    position: absolute;
    width: 50%; /* maybe we could set a max-width for larger content boxes ? */
    height: 20px;
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    -webkit-transform: rotate(-5deg) skew(-10deg);
    -moz-transform: rotate(-5deg) skew(-10deg);
    -o-transform: rotate(-5deg) skew(-10deg);
    -ms-transform: rotate(-5deg) skew(-10deg);
    transform: rotate(-5deg) skew(-10deg);
    left: 10px;
    bottom: 13px;
    z-index: -1;
}
.lifted_content_box::after {
    left: auto;
    right: 10px;
    -webkit-transform: rotate(5deg) skew(10deg);
    -moz-transform: rotate(5deg) skew(10deg);
    -o-transform: rotate(5deg) skew(10deg);
    -ms-transform: rotate(5deg) skew(10deg);
    transform: rotate(5deg) skew(10deg);
}
</style>

4. Save Template.

5. Letakkan code berikut di HTML.

<article class="lifted_content_box">
    <h1>JUDUL BOX</h1>
    <div>
        <p>Paragraf Pertama Texboxt</p>
        <p>
    ISI TEXT ANDA DI SINI...
        </p>
    </div>
</article> 

6. Untuk pemasangannya ikuti langkah berikut:

Memasang Text Box di Postingan Blog

1. Buat entri baru.
2. Letakkan code HTML (di langkah ke-lima) tersebut ke tab HTML postingan (bukan Compose).

Memasang Text Box di Widget Blog

1. Pilih Tata Letak.
2. Add Widget, HTML/Javascript.
3. Letakkan code HTML (di langkah ke-lima) di dalamnya.

Share This :