Add NEW RIBBON TAG TO YOUR LATEST BLOGGER POST

We all have mentors , even I have one.I started blogging when I came across Mybloggertricks.com .Mybloggertricks is the reason why you see YPG at this stage now.Its been good 3 years now and we have grown into a full tree from a sapling that needed nourishment.Mybloggertrick provided that nourishment and thats why we are standing here.As a fan follows his celebrities even I have done the same and followed each and every step.

Mybloggertricks recently rolled out Chef looney with a whole look to its template.The eye catching feature is the way they display the old and the new posts with a ribbon at the top right side.Although this gave inspiration but the codes differ a lot.We have added our own spice to make it interesting

LIVE DEMO

Procedure

• Go to blogger and log in 
• Navigate to Template > Edit Html > Expand Widgets 
• Now search for ]]></b:skin> and paste this code above it 

#first-post{background:#DAD6D6}
.wrapper {
  margin: 50px auto;
  width: auto;
  height: auto;
  background: transparent;
  border-radius: 10px;
  position: relative;
  z-index: 90;
}
.ribbon-wrapper-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}
.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45);
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}
.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}

• Search for  b:include data='post' name='post'/> andreplace it with this code : 

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
<div class='wrapper'>
       <div class='ribbon-wrapper-green'><div class='ribbon-green'>NEW</div></div>
  <div id='first-post'>
   <b:include data='post' name='post'/>
  </div></div>
 <b:else/>
  <b:include data='post' name='post'/>
 </b:if>
<b:else/>
 <b:include data='post' name='post'/>
</b:if>

• Click on the preview and if everythings ok , then save it 

Written by Aman

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.