Ads Top

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 :)

Categories

adsense adsense optimization adsense tips Animation Announcement Apps Background backlinks Basic blog Blog Design blogger Blogger Design Blogger Hack blogger pages blogger posts Blogger Security Blogger Special Tricks Blogger Templates Blogger Tips Blogger Tips & Tricks Blogger tools blogger tricks Blogger Widgets Blogger Widgets and plugins Blogging Basic Tips Blogging ethics Blogging tips Blogging Tools Blogging Tricks Btemplates 2013 Btemplates 2014 Bugs and Errors click bombing Comments css CSS and HTMLTricks CSS3 Cursors custom domain Design Drop Down Menu Earning Tips Editing emoticons Events Facebook Facebook tricks Featured Content Slider firebug Flash Free Coupons Free Recharge Gadget Generator Google Google AdSense Google Analytics Google Plus Google Plus Tricks Guest Posts Horizontal Menu How To HowTo Tuts HTML Image Image Effects Increase traffic instagram Interesting invalid clicks Java Script javascript jQuery Label labels Link Building Links LOGO Makers Make Money Make Money Online Marketing Menu bar menus Menus for Blogger Multi Tabbed Navigation navigation menu News Numbered Page Optimizing Other Tricks Page Photoshop Pop Out popular posts Post posts presentations Pure CSS Menu recent comments recent posts related posts Responsive Blogger Templates robots Rss Search box SEO SEO Strategy SEO Tips & Tricks sitemap Slide Show slideshows Social Media social media plugins statcounter static pages Style your Blog swf Tab Menu Template Template Designing Template Tricks Templates templates 2016 threaded comments Tips tools Traffic Tips Twitter Unlock modems Vertical bar Video Wallpapers Web Designing web hosting Webmaster Tools Widget Widget Generators Widgets wordpress WordPress Plugins WordPress Themes WordPress Tricks WP Tips
Powered by Blogger.