Create a Sticky Floating bar in Genesis Framework

sticky floating bar for genesisIf you are a CopyBlogger StudioPress Customer and uses Genesis as your Wordpress theme Framework, then you may know that playing with core genesis theme functions ain't that easy unless you know a better shortcut. In this tutorial you will learn an extremely easy way to create a sticky floating bar to show Random Headlines in your Wordpress blogs powered by Genesis. We won't be using PHP but would use JavaScript for our front-end scripting. Just like HelloBar and several other attention grabber bars, you can create a custom one for free. This long horizontal Stickybar can be added at Blog Footer or Header and is fully responsive in design.  It will display rotating Links of your most recent posts in random order on each page refresh.  A New headline will appear on every next pageview, thus giving you an extra advantage of increased Pageviews. It also contains a light toggle button to hide or show the sticky bar. I have created both Static and Dynamic versions of this bar for your convenience. Lets add this cute, light-weight stickyBar Plugin to your wordpress blogs!

DEMO: To test this bar in action please visit our sister Blog!

If you are a blogger user, you must read the following tutorial instead:

1. Activate Recent Headlines on Feedburner?

  1. Go To Feedburner > Publicize > BuzzBoost
  2. Uncheck all boxes. Keep number of items 15 or choose All to select all posts have your published so far. Make links open in same window.
  3. Click Save to activate the List of your recent posts.

buzzboost settings
   4. In the same window you will find a JavaScript code that you will need to copy. Only copy the code starting with <script> and ending with </script> as shown below:
feedburner javascript snippet
  Save this code inside a notepad because we will use it later in this tutorial.

2. Install Genesis hooks Plugin

In order to hook HTML, PHP and shortcodes to any of the existing hooks within Genesis Framework you need to install this extremely useful plugin developed by christopher

Using this plugin you can add HTML to any part of your layout. You can add JavaScript/HTML above or below content area, sidebar, footer, header and wherever you want.

3. Install Sticky Bar  - Dynamic

Now follow these easy steps to add the bar inside your layout:

  1. Login to your Wordpress Admin Panel
  2. Then Go To Appearance > Editor

edit genesis stylesheet

  3. Paste the following CSS Styles inside the stylesheet. Add it at the bottom

/*--------Floating Sticky bar For Genesis by www.MyBloggerTricks.com --------------*/
#creditfooter{display:none;}
#MBT-Sticky-container {
   height: 55px;
background: #000;
border-top: 5px dashed #FC8D59;
border-bottom: 2px solid #FFFFFF;
position: fixed;
width: 100%;
z-index: 99999;
box-shadow: 1px 2px 9px #666;
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:20px; 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: 19px;
right: 10px;
z-index: 999999999999;
border-radius: 100px;
padding: 5px 6px;
font-size: 10px;
border-width: 3px;
border: 3px solid #FC8D59;
background: #000;
color: #FFF;
cursor: pointer;
}
.sticky-gap {
height: 80px; clear:both;
}

Customization:


[a] Change Colors

  • To edit the border colors of the toggle button and Main Sticky container edit: #FC8D59
[b] Change Location/Position
By default the sticky bar would load at the top of webpage but if you wish to show it at your blog footer then make these changes:
  • Replace top:0px; with bottom:0px;
  • Replace top:19px; with bottom:19px;

[c] To increase or decrease the vertical gap between your content and the sticky bar edit  height: 80px;

   4.  Now go To Genesis > Theme Settings

edit genesis theme settings 

   5. At the bottom you will find two fields to insert Scripts inside Header and footer. Inside the first box represented by wp_head() or </head> Paste the following JavaScript code inside it:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=1.7.2'></script>
<script type="text/javascript">

this.randomizer = function(){
    var length = $(".feedburnerFeedBlock ul li").length; // this is where we put the id of the list
    var ran = Math.floor(Math.random()*length) + 1;
    $(".feedburnerFeedBlock ul li:nth-child(" + ran + ")").show();
};

$(document).ready(function(){  
    randomizer();
});


$(document).ready(function() {

$('#toggleButton').click(function() {
if ($('#MBT-Sticky-container').is(':visible')) {
$(this).val('▼');
} else {
$(this).val('▲');
}
$('#MBT-Sticky-container').slideToggle();
});

});

</script>

 

  6. The final step is adding the HTML  code to make the Stickybar appear just below body tag. For this we will need to go to Genesis > Simple hooks

add sticky bar to simple hooks

 

    7. You will find many text boxes on this page. Simply find the checkbox for genesis_before Hook   and paste the following cod inside it:

<input type="button" id="toggleButton"  value="▲" />

<div id="MBT-Sticky-container">
<script type="text/javascript" src="http://feeds.feedburner.com/RichIncomeWays?format=sigpro" type="text/javascript" ></script>
</div><div class="sticky-gap"></div>

Replace the above bolded JavaScript code with the BuzzBoost code you copied in this step.
  9.  Save your template and you are all done!

Visit your blogs to see it working just perfectly! :)

Install StickyBar - Manual

If you wish to display a selected list manually or some custom headlines to share news updates with your blog readers you can make the following modifications:

1. Change the CSS Code:
Inside the CSS code shared above in step#7  replace all .feedburnerFeedBlock ul   with .feedburnerFeedBlock1

 

2. Change the HTML code
Instead of using the HTML code shared in step#8 kindly use the following one:

 

<input id='toggleButton' type='button' value='▲'/>
<div id='MBT-Sticky-container'>
<ul class='feedburnerFeedBlock1'>
  <li><a href='ADD URL HERE'>ADD TEXT 1 HERE</a></li>
<li><a href='ADD URL HERE'>ADD TEXT 2 HERE</a></li>
<li><a href='ADD URL HERE'>ADD TEXT 3 HERE</a></li>
<li><a href='ADD URL HERE'>ADD TEXT 4 HERE</a></li>

<li><a href='ADD URL HERE'>ADD TEXT 5 HERE</a></li>
  </ul>
    </div><div class="sticky-gap"></div>

The above code will help you create 5 headlines. You can edit the text and URL address for each link. To create a new headline use the following code and keep add it above </ul>:

 

<li><a href='ADD URL HERE'>ADD TEXT  HERE</a></li>

Need Help?

We hope you enjoyed this simple creation of a stickybar. We will continue releasing some more interesting tutorials on making Genesis a much better platform. Let us know if you need any help. Peace and blessings buddies :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

16 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Dear Mohammad

    I need your help very badly, I have an youtube adsense approved account, but not approved for my site www.blogofaccounting.net. Please help me in this regard, how can i approved adsense for my website. Please help

    ReplyDelete
    Replies
    1. Hi I am author of www.bloggerbasic.com
      Dear Sumit Gogawat ? If you are from Pakistan. I inform you. Your youtube account will not access due to blocked. You can not able to access any feature of youtube.com Even if using unblock proxy.

      Delete
    2. Dear Sumit Gogawat, I would like to tell you that Google hates sites or blogs which are under construction and don't have good enough original content, i saw your site it's good and you can make it even more better just by putting some value to it. there some areas in your site that i think you should work on before applying to Adsense. First just put some more good content, create a site map of your blog you can get more info on Mybloggertricks to create your site map and add this to your Google webmaster account, create a privacy page, and please don't copy others content ever, always give credit your images and other things on your posts. Do these things for few months and then apply for Google Adsense and remember whether you are from India or any where from the word you don't have to wait for six months if you have a Adsense ready site.

      Delete
  2. This is new to me...And i found it great.Thanks for sharing this post..

    Regards
    Bloggingtipsandtrix.blogspot.com

    ReplyDelete
    Replies
    1. Hi Cerwenlloyd, please give your best for your blog and don't mess with blogging. thanks

      Delete
  3. Again a nice piece of code. I will definitely try it and will give you the feedback. Thanks for sharing this. MBT rocks

    ReplyDelete
    Replies
    1. Yes Ravi bro this such a splendid gadget for wordpress users. you should must try to this gadget..

      Delete
  4. Very Nice..

    Google Adsense has started to show favicon with advertiser's site url. Its look like very cool...

    ReplyDelete
    Replies
    1. Your Right Faheem, I notice that also on my blog.

      Delete
  5. genesis framework is to expensive do you have any free to download for this themes?

    ReplyDelete
  6. Buenas tardes soy de Perú

    Me preguntaba si podrían tan amable de hacer un tutorial de como implementar correctamente DOMINIO PREFERIDO en blogger y con dominio propio.


    Siempre tengo error al momento de elegir dominio preferido usando blogger y dominio propio thanks you


    Por cierto sus consejos son muy buenos, yo mismo eh cabreado a muchos wordpreseros y casi todas mis técnicas las eh sacado de aquí xD, saludos

    ReplyDelete
  7. Slam Mustafa bro...
    I created a notification bar would you like to have a visit to my blog to have a demo of that. You'll found that at top. Tell me if you find any bug in it..
    Thanks

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. Sorry I forgot to add link to my blog
      EtHow.com
      Sorry about these comments too...

      Delete
  8. Hey Can You Add this month only word press tutorials because i run my blog on wordpress now a days wordpress is better than blogger
    my site
    www.cloudspedia.com

    ReplyDelete