Blog Official - Situs Judi Online Terpercaya

Blog yang mengulas beberapa situs agen judi online poker, dominoqq, togel online, judi taruhan bola, live casino, sportsbook ibcbet maxbet sbobet yang terbaik dan terbukti terpercaya

Cara Membuat Efek Ribbon atau Pita


Membuat blog menjadi lebih menarik merupakan pekerjaan para blogger, yang bertujuan supaya para pembaca / penggunjung betah berada pada blog tersebut. Banyak sekali cara untuk mempercantik tampilan blog. Caranyapun berbeda-beda, semua itu tergantung dari kreasi Anda masing-masing.

Memperindah Blog Dengan Efek Pita

Disini saya mau memberikan satu cara membuat tampilan blog Anda agar menjadi lebih keren. Yaitu dengan membuat efek pita atau ribbon. Bentuk pita ini bisa di terapkan dimana saja sesuka Anda, bisa ditaruh pada bagian menu navigasi ataupun pada bagian fotter. Yang dibutuhkan yaitu kode CSS dan kode HTML sebagai pemanggilnya.

Berikut ini tampilan dan kodenya :

Blog Pertapan

CSS :


.ribbontd {
 font-size: 20px !important;
 width: 50%;
 position: relative;
 background: #1daaeb;
 color: #fff;
 text-align: center !important;
 padding: 1em 1em !important;
 margin: 1em auto 3em;
}
.ribbontd:before, .ribbontd:after {
 content: "";
 position: absolute;
 display: block;
 bottom: -1em;
 border: 1.5em solid #148ec7;
 z-index: -1;
}
.ribbontd:before {
 left: -2em;
 border-right-width: 1.5em;
 border-left-color: transparent;
}
.ribbontd:after {
 right: -2em;
 border-left-width: 1.5em;
 border-right-color: transparent;
}
.ribbontd-content {
 color:#fff;
}
.ribbontd .ribbontd-content:before, .ribbontd .ribbontd-content:after {
 content: "";
 position: absolute;
 display: block;
 border-style: solid;
 border-color: #1077a7 transparent transparent transparent;
 bottom: -1em;
}
.ribbontd .ribbontd-content:before {
 left: 0;
 border-width: 1em 0 0 1em;
}
.ribbontd .ribbontd-content:after {
 right: 0;
 border-width: 1em 1em 0 0;
}
.blogpertapan-blogspot-com { position: relative; z-index: 1; }

HTML :


 <div class="blogpertapan-blogspot-com">
<h1 class="ribbontd"><strong class="ribbontd-content">Blog Pertapan</strong></h1>
</div>
Itulah kodenya, silahkan di edit dan ditempatkan pada tempat yang Anda suka dan kiranya membuat tampilan blog menjadi lebih menarik.
Anda baru saja membaca artikel yang berkategori CSS dengan judul Cara Membuat Efek Ribbon atau Pita. Apabila Anda suka, silahkan klik tombol G+ dibawah !
Ditulis oleh: Admin