If you like this floating bar or add this in your blog so follow this easy steps :
Activate Headlines In Feedburner
Only If you want to update headline automatically , if you want to update headline manually then skip this step
- Go to Feedburner > Publicize > Buzzboost .
- Uncheck all the boxes , keep number of items 14 ,15 or all . set Open links in to Same window or New window .
- Click save to activate this setting .
- Feedburner give you a javascript code . copy that code only from <script> to </script> or save that script in notepad or any where this script was used in next step .
Add Sticky Floating Bar in Blogger - Automatically
- Go to Blogger > Template
- Backup your template .
- Click on Edit HTML
- Search ( CTRL+F ) </head> and just above paste this code :
<script type='text/javascript'>
//<![CDATA[
this.randomizer = function(){
var length = $(".feedburnerFeedBlock li").length;
var ran = Math.floor(Math.random()*length) + 1;
$(".feedburnerFeedBlock li:nth-child(" + ran + ")").show();
};
$(document).ready(function(){
randomizer();
});
$(document).ready(function() {
$('#toggleButton').click(function() {
if ($('#TTF-sticky-floatingbar').is(':visible')) {
$(this).val('▼');
} else {
$(this).val('▲');
}
$('#TTF-sticky-floatingbar').slideToggle();
});
});
//]]>
</script>
5. Search (CTRL+F) ]]></b:skin> and paste this code before it .
#creditfooter{display:none;}
#TTF-sticky-floatingbar {
height: 40px;
background: #000;
border-bottom: 2px solid #ffa200;
position: fixed;
width: 100%;
z-index: 99999;
box-shadow: 1px 2px 9px #ffa200;
top:0px; }
.feedburnerFeedBlock ul, .feedburnerFeedBlock ul li{
margin:0;
padding:0;
list-style:none;
}
.feedburnerFeedBlock ul li a { color:#fff!important; text-decoration:none;}
.feedburnerFeedBlock ul li a:hover {text-decoration:underline;}
.feedburnerFeedBlock ul{
line-height:120%;
}
.feedburnerFeedBlock ul li{
padding:13px; text-align:center; font-family:georgia; font-size:17px; font-weight:bold;
display:none; /* hide the items at first only to display one with javascript */
}
#toggleButton {
position: fixed;
top: 7px;
right: 10px;
z-index: 9999999999;
border-radius: 100px;
padding: 5px 6px;
font-size: 10px;
border-width: 3px;
border: 3px solid #ffa200;
background: #000;
color: #FFF;
cursor: pointer;
}
.sticky-gap {
height: 50px; clear:both;
}
6. Skip this step if you have jquery source link already added in your template.
Now search (CTRL+F) <head> and paste this code below it .
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=1.7.2' type='text/javascript'/>
Now Customize Your Floating Bar :
1. Change Position
When you add floating bar in your blog its automatically set at top of your blog you change change the position of floating bar from top to bottom
- Change this code top: 7px; and this top:0px; To bottom: 7px; and bottom:0px; .
2. Change the color
- For change shadow and border color change this code : #ffa200 for Border , #ffa200 for shadow
- For change the button border color edit : #ffa200
3. For change the gap between your header and floating bar edit this code : height: 50px;
7. Then Search (CTRL+F) <body>
if you use default blogger templates then search <body
then paste the code below it :
<input id='toggleButton' type='button' value='▲'/>Change this script with your feedburner script .
<div id='TTF-sticky-floatingbar'>
<script src='http://feeds.feedburner.com/TheTricksFree?format=sigpro' type='text/javascript'/>
</div><div class='sticky-gap'/>
8. finally click on save button .
For Headlines manually
- Change in CSS code in step 5 : simply replace all .feedburnerFeedBlock ul with .feedburnerFeedBlock1 .
- Change HTML code . in Step 7 with :
<input id='toggleButton' type='button' value='▲'/>
<div id='MBT-Sticky-container'>
<ul class='feedburnerFeedBlock1'>
<li><a href='Add url'>Add Text here 1</a></li>
<li><a href='Add url'>Add Text here 2</a></li>
<li><a href='Add url'>Add Text here 3</a></li>
<li><a href='Add url'>Add Text here 4</a></li>
</ul>
</div><div class="sticky-gap"></div>
then click on save template
BOOM !! finally all done :))
IF you have any problem in this code please comment ...
0 comments:
Post a Comment