√ Cara Menciptakan Pita Dengan Css Di Postingan Blog

Cara Membuat Pita dengan CSS di Postingan Blog - Pada kesempatan ini aku akan membagikan cara menciptakan Pure CSS Ribbon atau pita pada blog. Pita dengan efek lipat ini biasanya digunakan pada postingan blog atau biasa juga ditempatkan di halaman statis.

Pure CSS Ribbon ialah pita dengan efek lipatan yang biasa diterapkan pada postingan blog atau halaman statis yang digunakan untuk memperindah halaman pada blog. Pita ini dikombinasikan dengan goresan pena judul yang ada di dalamnya, menyerupai untuk ucapan selamat tiba atau hanya untuk memperindah tampilan judul saja.

Pita pada blog ini pula tidak akan memberatkan proses menciptakan halaman pada blog sebab memakai isyarat css. Oleh sebab itu tanpa panjang lebar lagi berikut aku akan membagikan cara menciptakan pure css ribbon keren ini di blog kalian.

Cara Membuat Pita dengan CSS di Postingan Blog

1. Buka blog anda > pilih Tema > Edit HTML

2. Letakkan isyarat CSS di bawah ini sempurna berada di atas isyarat ]]></b:skin> atau </style>

/* Pure CSS Ribbon by Yuki */ .ribbon-rsp{position:relative;z-index:1;padding:1em 2em} .rspribbon{font-size:120%!important;text-transform:uppercase;width:60%;position:relative;background:#f35b5b;color:#fff;text-align:center;padding:1em 2em;margin:2em auto 3em} .rspribbon:before,.rspribbon:after{content:"";position:absolute;display:block;bottom:-1em;border:1.5em solid #d74545;z-index:-1} .rspribbon:before{left:-2em;border-right-width:1.5em;border-left-color:transparent} .rspribbon:after{right:-2em;border-left-width:1.5em;border-right-color:transparent} .rspribbon .ribbon-isi:before,.rspribbon .ribbon-isi:after{content:"";position:absolute;display:block;border-style:solid;border-color:#b23232 transparent transparent transparent;bottom:-1em} .rspribbon .ribbon-isi:before{left:0;border-width:1em 0 0 1em} .rspribbon .ribbon-isi:after{right:0;border-width:1em 1em 0 0}

3. Jija sudah pilih Simpan Tema

4. Untuk menerapkannya kedalam postingan blog anda, Buat Postingan Baru > pilih Menu HTML (bukan compose) lalu letakkan isyarat ini di dalamnya

<div class="ribbon-rsp"> <h2 class="rspribbon"> <strong class="ribbon-isi">SELAMAT DATANG</strong> </h2> </div>

DEMO

Itulah Cara Membuat Pure CSS Ribbon pada Postingan Blogger, jikalau ada hal yang kurang dimengerti dapat eksklusif menuju kolom komentar, Terimakasih.

Sumber http://www.analisyuki.com/