Create a Sticky Floating bar in Genesis Framework

If 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!

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.

   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:

  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

• Install Genesis Hooks Plugin

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

  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

   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


    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>

No comments

Posted at 11:24 |  by Unknown