
Halo Sobat - Kali ini saya mau membagikan Tutorial Cara Memasang Pure CSS Ribbon Di Postingan Blog.Tutorial ini berguna bagi anda yang ingin menggunakannya di blognya.Tutorial ini saya dapatkan dari berbagai macam blog sob :) Penasaran?Langsung aja yuk!
Pemasangan Pure CSS Ribbon
1. Masuk ke Beranda Blog > Template > Edit HTML2. Masukkan Kode Dibawah Ini Diatas ]]></b:skin> Atau </style>
/* CSS Ribbon */
.non-semantic-protector {position: relative;z-index: 1;}
.ribbon {font-size: 16px !important;width: 50%;position: relative;background: #ba89b6;color: #fff;text-align: center;padding: 1em 2em;margin: 2em auto 3em;}
.ribbon:before, .ribbon:after {content: "";position: absolute;display: block;bottom: -1em;border: 1.5em solid #986794;z-index: -1;}
.ribbon:before {left: -2em;border-right-width: 1.5em;border-left-color: transparent;}
.ribbon:after {right: -2em;border-left-width: 1.5em;border-right-color: transparent;}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {content: "";position: absolute;display: block;border-style: solid;border-color: #804f7c transparent transparent transparent;bottom: -1em;}
.ribbon .ribbon-content:before {left: 0;border-width: 1em 0 0 1em;}
.ribbon .ribbon-content:after {right: 0;border-width: 1em 1em 0 0;}
Sobat bisa custom sendiri tampilannya sesuai selera
Penerapan Pure CSS Ribbon
Masukkan kode dibawah sesuai dengan keinginan sobat,bisa taruh di Postingan.Kalau Saya Sih,Menaruhnya Di Bawah Post<div class="non-semantic-protector">
<h1 class="ribbon">
<strong class="ribbon-content">Ferdi Style</strong>
</h1>
</div>
Sekian tutorial kali ini sobat,Jika ada kesulitan silahkan bertanya melalui Kotak Komentar
Posting Komentar