Add Pure CSS Ribbon in Blogger Blog Post

Add Pure CSS Ribbon in Blogger Blog Post

Comments: 5
data:blog.title
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.  

Speak Your Mind

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 Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

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

Name

Email *

Message *