Close Menu

Cara Membuat Pita CSS Keren di Blog

ErwinBy

Cara Membuat Pita CSS Keren di blog – Pada kesempatan ini akan membagikan tutorial cara membuat pita 3 dimensi dengan efek lipat di blogger maupun wordpress.

Banyak hal yang dapat kita lakukan untuk mempercantik tampilan postingan atau halaman blog kita, salah satunya adalah membuat membuat pita ucapan selamat datang pada judul postingan atau halaman blog kita.

Pita ini murni menggunakan CSS, jadi tidak akan memberatkan loading blog kita (Pure CSS Ribbon). Untuk tampilannya sendiri sendiri bisa kalian lihat pada thumbnail diatas atau demo codepen dibawah.

Disini saya akan membagikan cara memasangnya baik itu menggunakan Blogger ataupun WordPress, berikut Tutorialnya:

Cara Membuat Pita CSS di Blogger

  1. Login ke Blogger
  2. Pilih Tema, pada menu SESUAIKAN, pilih Edit HTML
  3. Letakkan kode ini tepat diatas kode ]]></b:skin> atau </style>
    /* Pita CSS by felmika.com */
.ribbon-rsp{position:relative;z-index:1;padding:1em 2em}.mikarbn{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}
.mikarbn:before,.mikarbn:after{content:"";position:absolute;display:block;bottom:-1em;border:1.5em solid #d74545;z-index:-1}
.mikarbn:before{left:-2em;border-right-width:1.5em;border-left-color:transparent}
.mikarbn:after{right:-2em;border-left-width:1.5em;border-right-color:transparent}
.mikarbn .pita-mika:before,.mikarbn .pita-mika:after{content:"";position:absolute;display:block;border-style:solid;border-color:#b23232 transparent transparent transparent;bottom:-1em}
.mikarbn .pita-mika:before{left:0;border-width:1em 0 0 1em}
.mikarbn .pita-mika:after{right:0;border-width:1em 1em 0 0}
  4. Kemudian pilih Simpan Tema
  5. Untuk menerapkannya di blog, buat postingan atau halaman baru
  6. Pindah ke mode Tampilan HTML
  7. Kemudian masukkan kode ini di dalamnya
    <h2 class="mikarbn"><strong class="pita-mika">SELAMAT DATANG</strong></h2>

Itulah tadi cara membuat pita css di blogger. Selanjutnya cara memasang pita css di blogger.

Beda halnya dengan wordpress, kita tidak perlu mengedit tema atau template wordpress, karena di dalam wordpress itu sendiri sudah disediakan, tempat untuk menyimpan CSS khusus. Untuk tutorialnya sebagai berikut.

Cara membuat Pita CSS di WordPress

  1. Buka wordpress anda
  2. Pada menu Tampilan, pilih Sesuaikan
  3. Pilih CSS tambahan
  4. Kemudian masukkan kode ini di dalamnya, kemudian pilih Simpan
    /* Pita CSS by felmika.com */
.ribbon-rsp{position:relative;z-index:1;padding:1em 2em}.mikarbn{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}
.mikarbn:before,.mikarbn:after{content:"";position:absolute;display:block;bottom:-1em;border:1.5em solid #d74545;z-index:-1}
.mikarbn:before{left:-2em;border-right-width:1.5em;border-left-color:transparent}
.mikarbn:after{right:-2em;border-left-width:1.5em;border-right-color:transparent}
.mikarbn .pita-mika:before,.mikarbn .pita-mika:after{content:"";position:absolute;display:block;border-style:solid;border-color:#b23232 transparent transparent transparent;bottom:-1em}
.mikarbn .pita-mika:before{left:0;border-width:1em 0 0 1em}
.mikarbn .pita-mika:after{right:0;border-width:1em 1em 0 0}
  5. Untuk menerapkannya di dalam postingan, buat postingan atau halaman baru
  6. Pindah ke mode Teks
  7. Kemudian masukkan kode ini di dalamnya
    <h2 class="mikarbn"><strong class="pita-mika">SELAMAT DATANG</strong></h2>

Untuk tampilannya bisa dilihat pada tampilan demi dibawah ini.

DEMO
Share.
Add A Comment

Leave A Reply