Add Pure CSS Ribbon in Blogger Blog Post

Add Pure CSS Ribbon in Blogger Blog Post


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.


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;


  • 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>


  • 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.  
Add Pure CSS Ribbon in Blogger Blog Post
4 Stars stars - "Add Pure CSS Ribbon in Blogger Blog Post" CSS ribbon was massively used in Blogger template formerly but majority of Blogger use ribbon ...

Post a Comment

ek kothai fatafati ...khub valo laglo ei css style ...thanks

Thanks Bro..hope everybody will like it..

All the best tips for new janarashion?

This is all about CSS nothing else.

awesome css style bro.. keep it up

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *