Add Ribbon Effect Widget To Blogger For Special Custom Posts
Add ribbon effect widget to blogger for special announcement, Custom posts or to promote anything special. Normally this gadgets are used to promote or giveaways based on pure CSS.
 |
| Add Ribbon Effect Widget To Blogger For Special Custom Posts |
VIEW DEMO
A pure CSS based ribbon widget for blogger to promote giveaways or announcement. You can see such widgets in many websites designed to look distinct from normal layout and colors of the blog. That results into more clicks and traffic for your giveaways. These are tactics that are carried out by many successful bloggers. If you have some niche ideas and content to promote then you can use this widget for the promotion of those contents for which you want traffic. There are two ways for getting user attention. First one is the notification bar at the top and second is the attractive widget where you can get user attention. This ribbon effect is completely based on pure CSS that is the reason it loads very fast and even does not increase page size of your blog.
1
| Quality Of This Ribbon Effect Blogger Widget. |
➨ Based on Pure CSS and HTML.
➨ Loads faster.
➨ No Javascript Hence does not slow down page loading speed.
➨ This ribbon Effect widget works with all browsers like internet explorer, Safari, Mozilla and chrome.
➨ Gains user attention because of its design.
➨ Best way to promote your content.
➨ Most used widget for giveaways.
➨ Installation is easy. Simple copy paste code.
2
| Code for Ribbon Effect Widget. |
<style type="text/css">
/***********************************************
* Custom Ribbon Effect Widget- © Avdhootblogger (www.avdhootblogger.com)
* This notice must stay intact for use.
* Visit http://www.avdhootblogger.com/ for full source code.
***********************************************/
.avdhootouter {padding:5px;
margin: 50px auto;
width: 280px;
height: 390px;
border-radius: 10px;
position: relative;
z-index: 90;
background:#474747 URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGY3u4OPSv_hjGj2UqbS0GgB0JqlkMSqiRiGvEUr0VM1C5u9tV4wxbfU0iJLpWE4Z7QHI50EDtwiDrWnXcHaFTMOKADNVYw_uQ039MtxCCfDgNQzZolKVS6Ekl66g8gxqn1ClRA1_wzLg/s1600/Pure+CSS+Letterpress+Effect.png) REPEAT;padding:10px;
}
.avdhootinside {border:1px dashed #000;padding:0.5em;}
.avdhootnavy {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
}
.avdhootcss {
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: #0099CC;
background-image: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#007399));
background-image: -webkit-linear-gradient(top, #0099CC, #007399);
background-image: -moz-linear-gradient(top, #0099CC, #007399);
background-image: -ms-linear-gradient(top, #0099CC, #007399);
background-image: -o-linear-gradient(top, #0099CC, #007399);
color: #FFF;
-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);
}
.avdhootcss:before, .avdhootcss:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}
.avdhootcss:before {
left: 0;
}
.avdhootcss:after {
right: 0;
}
.textcss {
font: 20px Tahoma, Helvetica, Arial, Sans-Serif;
text-align: center;
color: #FFF; text-shadow: 0px 2px 3px #555;}
.textcss2 {
font: 20px Tahoma, Helvetica, Arial, Sans-Serif;
text-align: JUSTIFY;
color: #000; text-shadow: 0px 2px 3px #555;}
</style>
<div class="avdhootouter">
<div class="avdhootinside">
<div class="avdhootnavy"><div class="avdhootcss">RIBBON</div>
</div>
<DIV CLASS="textcss">
<p><b>CSS RIBBON: How To Add Ribbon </b></p></DIV>
<DIV CLASS="textcss2">
<B> <p>A TUTORIAL TO ADD RIBBON EFFECT WIDGET FOR BLOGGER CAN BE USED FOR PROMOTION OF NEW PRODUCTS</B>
</DIV>
<a target="_blank" href="http://www.avdhootblogger.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXDOyBDtQtAsj8Ik-A1VxQDDG5M4UMiJyYCrnnN49YuW8OwhCI0yvCvdMmLmDq_vGD91o50yvYXU3GnWo5CZlzZ2sv49LpbsNXcyec20bBOHehJESlwkXHwrZtnICysCc5r1FI_LrRut0/s1600/naya-logo2.png" alt="Avdhootblogger:-widget for blogger"/></a>
</div></div>
/***********************************************
* Custom Ribbon Effect Widget- © Avdhootblogger (www.avdhootblogger.com)
* This notice must stay intact for use.
* Visit http://www.avdhootblogger.com/ for full source code.
***********************************************/
.avdhootouter {padding:5px;
margin: 50px auto;
width: 280px;
height: 390px;
border-radius: 10px;
position: relative;
z-index: 90;
background:#474747 URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGY3u4OPSv_hjGj2UqbS0GgB0JqlkMSqiRiGvEUr0VM1C5u9tV4wxbfU0iJLpWE4Z7QHI50EDtwiDrWnXcHaFTMOKADNVYw_uQ039MtxCCfDgNQzZolKVS6Ekl66g8gxqn1ClRA1_wzLg/s1600/Pure+CSS+Letterpress+Effect.png) REPEAT;padding:10px;
}
.avdhootinside {border:1px dashed #000;padding:0.5em;}
.avdhootnavy {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
}
.avdhootcss {
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: #0099CC;
background-image: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#007399));
background-image: -webkit-linear-gradient(top, #0099CC, #007399);
background-image: -moz-linear-gradient(top, #0099CC, #007399);
background-image: -ms-linear-gradient(top, #0099CC, #007399);
background-image: -o-linear-gradient(top, #0099CC, #007399);
color: #FFF;
-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);
}
.avdhootcss:before, .avdhootcss:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}
.avdhootcss:before {
left: 0;
}
.avdhootcss:after {
right: 0;
}
.textcss {
font: 20px Tahoma, Helvetica, Arial, Sans-Serif;
text-align: center;
color: #FFF; text-shadow: 0px 2px 3px #555;}
.textcss2 {
font: 20px Tahoma, Helvetica, Arial, Sans-Serif;
text-align: JUSTIFY;
color: #000; text-shadow: 0px 2px 3px #555;}
</style>
<div class="avdhootouter">
<div class="avdhootinside">
<div class="avdhootnavy"><div class="avdhootcss">RIBBON</div>
</div>
<DIV CLASS="textcss">
<p><b>CSS RIBBON: How To Add Ribbon </b></p></DIV>
<DIV CLASS="textcss2">
<B> <p>A TUTORIAL TO ADD RIBBON EFFECT WIDGET FOR BLOGGER CAN BE USED FOR PROMOTION OF NEW PRODUCTS</B>
</DIV>
<a target="_blank" href="http://www.avdhootblogger.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXDOyBDtQtAsj8Ik-A1VxQDDG5M4UMiJyYCrnnN49YuW8OwhCI0yvCvdMmLmDq_vGD91o50yvYXU3GnWo5CZlzZ2sv49LpbsNXcyec20bBOHehJESlwkXHwrZtnICysCc5r1FI_LrRut0/s1600/naya-logo2.png" alt="Avdhootblogger:-widget for blogger"/></a>
</div></div>
3
| How to add this ribbon widget to blogger ? |
➨ Go to blogger Dashboard.
➨ Click on layout.
➨ Click on add a gadget.
➨ Choose HTML/JAVASCRIPT.
➨ Copy the above code and paste into the gadget.
➨ You are done.
4
| Customization of Blogger Widget. |
➨ Type your text in the place of ribbon .See in the dash area.
➨ Type your title on the place of "CSS RIBBON: How To Add Ribbon".
➨ Type your description on the place of "tutorial to add...."
➨ Insert your image URL in the dash area. You can see it at the end of the code.
➨ You can insert your own links on the place of description using A HREF tags.
<a href="URL">YOUR LINK DESCRIPTION</a>
➨ You can customize the entire width and height of this widget. See the dashed area in the first part of the code.➨ Save the gadget and you are done.
NOTE - This is completely customizable. You can edit the CSS to change the effects. If you have some knowledge of CSS then you can make it more magical. It is an example of CSS web design.
BLOGGER WIDGETS
I hope you liked this ribbon widget for blogger that can be used to promote special products, custom posts, featured posts and many more. If you like this widget please comment and do share. Ask any query if you feel any problem in adding this widget to blogger.
