This post will tell you how to make a MY HELLO BAR on your Blog for Advertising, Sponsors or directing readers to a post you want to Highlight!
Notice the bar across my page that says "Advertise with Marine Wife, Mommy & Life!!!" and the button beside it that says "Advertising & Sponsors"?
This can be customized to your color choice, to say anything you want AND have the button direct to any location you want!
I've come across several awesome blogs that have this neat feature on their blog and decided to give it a whirl last week. I LOVE it! But couldn't find a whole lot of information on it anywhere and had to go through the search via Google to figure out what it was.
An awesome feature to have as a blogger or web page to bring to light something you'd like to be noticed a bit more.
Go to www.hellobar.com you can create an account for free or you can view it as a demo on your site before you register with hello bar.
Here's where I had trouble. Coding is a pain in the arse for me.... Their site shows where to place the code if you have a "basic" layout/code. But if you've hired someone on that is more tech savvy to make your page look great the location that Hello Bar gives you to put it in won't work, I looked for a reeeealllly long time, my eyes began to blur and I about gave up the whole thing in general...
My site was made by Munchkin Land Designs I adore her work!
With it being made outside of blogger the coding completely changes.
Hello Bar's How to Deploy Site says this for Blogger users: Blogger’s deployment options is similar to WordPress’. You can have your
Hello Bar show up on a single page by pasting your code snippet in via
the Edit Html view. You may have to save the post while in the Edit Html view though as Blogger has a nasty habit of placing in
<br /> tags where they aren’t supposed to be. Alternatively, if you want site wide exposure, you can go to the Design section of your blog and Edit HTML for the blog’s template. Just paste the code snippet in after the line that looks like: <body expr:class='"loading" + data:blog.mobileClass'>
Again, I looked forever for that coding it wasn't there..... Then I decided, that the code <head> looked like a good place to start.... Since it goes at the the head of the page..... Above the code <head> I placed my Hello Bar Code. Below is a picture of a blank space above the code <head> That is after I hit enter a couple times, put the code in there and BAM! It worked!!!!!
Well, if you decide to create one of these awesome features, hopefully this will help ease your pain and time with deploying it.
If you have any questions feel free to ask away! Love ya guys!!
It looks great! I think I might have to borrow this tutorial.
ReplyDelete:) Hope it works for you! :)
DeleteI love this post and will tell you that I taught myself for WP, but do agree it can be tricking with the coding. Thanks for sharing this and truly a great reference for anyone wanting to try this out!! :)
ReplyDeleteHello! We are your newest followers from the GFC hop. We would love a follow in return! This is great information! Thanks for sharing. We are looking forward to reading more from you :)
ReplyDeleteColleen at Sugar Aunts
What a great tutorial. I found you through the blog hop. I'm a marine SO as well. :)
ReplyDeletehttp://mellowfellowgoesforaride.blogspot.com/
Following you hun! Yay for another great MilSO Blog!!!
DeleteMarine Wife Mommy & Life
Hey, I am your latest follower from the GFC collective! I would love for you to head on over and give me a follow to :-)
ReplyDeletehttp://www.curvyguruceri.com/
xxx