Hi Friends, you might seen a side ribbon in many blogging template
and many of you should have the wish to add this ribbon to your blogger
template.So today i am
here to tell you how you can add this stylish ribbon right to your
blogger template.The main reasons behind using this type of ribbons is that these
type of ribbons are more noticbale then anything else.This ribbon
will be shown at the right top corner of your posts and will look awesome at your blog .To add this ribbon you just need to copy paste some
codes into your blogger blogs template and then refresh your blog to see
it live in action.It will work almost in all major browser without
having any problem.
That's it.please share this by click on below share buttons.If Any problems occurs Just leave comments below.
Steps to add ribbon in your blog
- Go to Blogger Dashboard
- Click on DropDown Menu and select Template
- Backup your Template before making any changes to your blog
- Now Click on Edit HTML --> Proceed --> Expand Widget Templates
- Press Ctrl + F and search the code shown below
<head>
- Now paste the below code just after it.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
$(".dropdown img.flag").addClass("flagvisibility");
$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
$("#result").html("Selected value is: " + getSelectedValue("sample"));
});
$('.blog-posts').find($('.post')).first().prepend("<span class='new1'/>")
$("#flagSwitcher").click(function() {
$(".dropdown img.flag").toggleClass("flagvisibility");
});
});
</script>
- Now Look For ]]></b:skin> and paste the below code just above it.
.new1 {
width: 56px;
height: 56px;
position: relative;
left: 20px;
top: -5px;
float: right;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE_yeTHWUgCEFBn7lXYoRaYO9pd3ZsqSwbnlJxvq4aRxPNdp7-L2rIPFSNnNcpiRdCwxNL0U0RNnB4WOGJ-svx5PMXvq2npdMuiMOagFejDtHF5MO4U_sDJDVF84DHhgTgMLsF1ocFLPw/s1600/New.png") no-repeat scroll 0% 0% transparent;
}
- Now Save your template and go to your blogger blog to see it live in action.
Note: if u already have jquery/1.7.1/jquery.min.js in your template head don't add <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
Like it? Share it.
No Comments
Click to Add a New Comment