--> Create a Sticky Floating bar in Genesis Framework | Experience Lab - Online business creation and development guide for bloggers and startups

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 ...

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

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,4,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,3,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Create a Sticky Floating bar in Genesis Framework
Create a Sticky Floating bar in Genesis Framework
http://lh4.ggpht.com/-nfHjnuPgOko/Ue1a5ARqB_I/AAAAAAAAKAo/GVOtFZz0n9s/image%25255B42%25255D.png?imgmax=800
http://lh4.ggpht.com/-nfHjnuPgOko/Ue1a5ARqB_I/AAAAAAAAKAo/GVOtFZz0n9s/s72-c/image%25255B42%25255D.png?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2013/07/create-sticky-floating-bar-in-genesis.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2013/07/create-sticky-floating-bar-in-genesis.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy