Showing posts with label Ribbon using css. Show all posts
Showing posts with label Ribbon using css. Show all posts

Add NEW Ribbon To Your Latest Blogger Post

Posted by Unknown on Tuesday, February 19, 2013


You might seen "New Ribbon" in latest post...,
It's useful to interact your visitors with newest updates and releases.
How to add this widget on your blog?
1. Go to your blog dashboard and go to Template tab .
2. Back up your template.
3. After back up click on Edit HTML and check the option Expand Widget Templates .
4. Search for ]]></b:skin> and paste this code above it.

.wrappercbt12
{
  margin: 50px auto;
  width: auto;
  height: auto;
  background: transparent;
  position: relative;
}
.ribboncbt123
{
  font: bold 20px Sans-Serif;
  text-align: center;
  transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -25px;
  top: 7px;
  width: 160px;
  background-image: linear-gradient(top, #129, #12f);
  background-image: -o-linear-gradient(top, #129, #12f);
  background-image: -ms-linear-gradient(top, #129, #12f);
  background-image: -moz-linear-gradient(top, #129, #12f);
  background-image: -webkit-linear-gradient(top, #129, #12f);
  color: #fff;
  -o-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribboncbt-wrapper12
{
  width: 86px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -4px;
  right: -4px;
}


5. Now Search for this :  <b:include data='post' name='post'/> and replace it with this code.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost == &quot;true&quot;'>
<div class='wrappercbt12'>
<div class='ribboncbt-wrapper12'><div class='ribboncbt123'>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>


6. Save the template and watch your blog.

you're done.
Non-Spammy Reviews are welcome in Comments Below!
If you have any query, suggestion or etc just comment or send us at Wishbox.
b:include data='post' name='post'/>
b:include data='post' name='post'/>
b:include data='post' name='post'/>
b:include data='post' name='post'/>
More aboutAdd NEW Ribbon To Your Latest Blogger Post