Cara Membuat Pure CSS Ribbon

Kali ini saya akan memberikan tutorial cara memebuat Pure CSS Ribbon. Sebelum melanjutkan diharapkan kalian Share dan berkomentar. Pure CSS Ribbon Pertama kali saya melihat di blog indonesia yaitu Arlinadzgn, Arlinadzgn Adalah website yang menawarkan Panduan,Tutorial,Template,Jasa Blogger. Arlinadzgn merupakan situs blog indonesia yang niche nya Panduan Blog.

Cara Membuat Pure CSS Ribbon

Buka blog sobat > lalu klik tema > edit HTML

Cari kode <style> atau <b:skin> lalu copy kode dibawah ini, dan paste tepat di bawah kode <style> atau <b:skin>

// Pure CSS Ribbon
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
  background: #1e2e36 none repeat scroll top left;
  color: #444;
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  position: relative;
  line-height: normal;
}

.ribbon-wrapper {
  position: relative;
  z-index: 1;
  margin: 5% auto;
}

h1.post-title {
  visibility: hidden;
  width: 0;
  height: 0;
}

.ribbon {
  font-size: 20px!important;
  text-transform: uppercase;
  width: 50%;
  position: relative;
  background: #f35b5b;
  color: #fff;
  text-align: center;
  padding: 1em 2em;
  margin: 2em auto 3em
}

.ribbon:after,
.ribbon:before {
  content: "";
  position: absolute;
  display: block;
  bottom: -1em;
  border: 1.5em solid #d74545;
  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-inner:after,
.ribbon .ribbon-inner:before {
  content: "";
  position: absolute;
  display: block;
  border-style: solid;
  border-color: #b23232 transparent transparent;
  bottom: -1em
}

.ribbon .ribbon-inner:before {
  left: 0;
  border-width: 1em 0 0 1em
}

.ribbon .ribbon-inner:after {
  right: 0;
  border-width: 1em 1em 0 0
}

Bila sudah klik save

Cara pemakaian Pure CSS Ribbon ini gampang, Kalian paste kode dibawah ini dan tempatkan di HTML bukan Compose

<div class="ribbon-wrapper">
  <h3 class="ribbon">
<strong class="ribbon-inner">Pure CSS Ribbon By Getrongers</strong>
</h3>
</div>

Live Preview

Itulah tutorial Cara Membuat Pure CSS Ribbon, Semoga Bermanfaat Di Tutorial Kali ini.