Home
Blogger

Add Pure CSS Ribbon in Blogger Blog Post

Add Pure CSS Ribbon in Blogger Blog Post
CSS

CSS ribbon was massively used in Blogger template formerly but majority of Blogger use ribbon image. And it was affect Blogger loading time to display images. However by using of CSS we can create beautiful ribbon which is better than using ribbon image. In this tutorial I will show you about creating ribbon by the help of CSS and not a single piece of image file has used to create this.


This ribbon can be used in Blogger post title or as h3 title or at the beginning of any table content. In this coding I have used 3 type blue colors light, medium and dark thus ribbon can be visible clearly.


ribbon

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on  -> Template -> Edit HTML->

Step 3 Now find the </b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)

Step 4 Copy and Paste below code above/before </b:skin>

.css-ribbon {
    position: relative;
    z-index: 1;
   padding: 1em 2em;
}
.bsribbon {
    font-size: 120% !important;
    width: 60%;
    position: relative;
    background: #0CC5F4;
    color: #fff;
    text-align: center;
    padding: 1em 2em;
    margin: 2em auto 3em;
}

.bsribbon:before, .bsribbon:after {
    content: "";
    position: absolute;
    display: block;
    bottom: -1em;
    border: 1.5em solid #04A8D1;
    z-index: -1;
}

.bsribbon:before {
    left: -2em;
    border-right-width: 1.5em;
    border-left-color: transparent;
}

.bsribbon:after {
    right: -2em;
    border-left-width: 1.5em;
    border-right-color: transparent;
}

.bsribbon .ribbon-content:before, .bsribbon .ribbon-content:after {
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    border-color: #088EB0 transparent transparent transparent;
    bottom: -1em;
}

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

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

Customization

  • Alter 60% for increasing width from line number 7.
  • Replace #0CC5F4, #04A8D1 and #088EB0 for changing the ribbon color.
Step 5 Now hit the Save template button.

How to use it?

In Blogger template we have to use it in HTML view. For adding this ribbon as post title just go to in Blog Post editor or page and switch to Compose view to HTML view and paste the below code-
HTML view


<div class="css-ribbon"> 
  <h1 class="bsribbon">
    <strong class="ribbon-content">Pure CSS  Ribbon</strong>
  </h1>
</div>


Customization

  • Replace Pure CSS Ribbon text with your Title.  
Now switch to HTML view to Compose view and publish the post and see beautiful ribbon with your text.  For any further help feel free to write me. You feedback is always appreciable.  

5 comments

  1. ek kothai fatafati ...khub valo laglo ei css style ...thanks
    • Thanks Bro..hope everybody will like it..
  2. All the best tips for new janarashion?
    • This is all about CSS nothing else.
  3. awesome css style bro.. keep it up
Go Up