Pages

Saturday, February 15, 2014

Adding Buttons to your Sidebar {Saturday Tutorials}

Alright so I confess....I don't run my own blog sponsorships. Gasp!!! How dare I even offer advice on something I don't even do!!! Well in my defense, I have helped a ton of lovely ladies organize their sidebar. That qualifies me as a mini-expert right? Right! 

Army Crafter | Life Could Be a Dream | The Albrecht's Blog | From Bisons to Buckeyes
Love and Waffles | Marry Mint | Living in Yellow | Life with Amberly & Joe | Artsy Cajun | You Gotta Have Hart 
Hurry Up and Wait | Helene in Between | Happily Ever After | Venus Trapped in Mars | All Things Life & Air Force Wife | Jets and a Brunette
Munchkins and the Military | Loving Life Moore | the Florkens | Going Green

In case you're out of the loop and have absolutely no idea what I'm speaking of, sponsorships are all of the lovely buttons you see on blog sidebars. Pretty much, they're ads--people pay you (or swap with you) to put their face on your blog in the hope that your readers will take a gander over at their blog. Got it? Ok, good. 

I use Passionfruits to run all of my ads and sponsorships but it's really super easy to do them yourself as long as you have the time and a little bit of know-how. Which is why I'm here. Smiles all around! My amazing friend Jamie from You Gotta Have Hart let me use her blog as my guinea pig and use her sponsorship sidebar as my example for this here tutorial. Right now, Jamie solely does swaps on her blog but this process pretty much works for paid sponsorships too. 

Step One: Set up your gadget

If you already have an HTML/javascript gadget in your blogger layout, then all you have to do is open it up to start. You can do that really easily by using the little toolbar icon on your blog. Ta-dum...there's your HTML gadget aka the place you put your button code. Hopefully you know what the width of your blog's sidebar because that will help you in the next step. 

Step 2: Setting up your button
Alright, so your button's place of residence is open and ready for business. (Yay us!!) Now we can work on your button code. Most of the time if you're swapping buttons with someone or if they're paying you to reside on your sidebar, they will have a button to give you. Which is absolutely wonderful because you need that button code they'll give you. What is not wonderful is that there is no uniform size everyone's button will be--you could have a button that's 500x500 and one that's 150x150 and your sidebar is 300x300. 

This code solves all of your mismatched button problems:

<div class="BLOGNAME" style="witdth: 200px; margin: 0 auto;"> <a href="BLOGURL" rel="nofollow"> <img src="IMAGEURL" alt="BLOGNAME" width="200" height="200"/> </a>

BLOGNAME is obviously well the name of the blog (you put that in twice); BLOGURL--whatever it says in the search bar that starts with http. The IMAGEURL is where the image is hosted; if you don't know what that is, right click on an image and choose 'copy image url'. The width and the height all depend on your sidebar's width. This is what my square button code would look like:

<div class="Army Ever After" style="witdth: 200px; margin: 0 auto;"> <a href="http://www.armyeverafter.com" rel="nofollow"> <img src="http://4.bp.blogspot.com/square+button.jpg" alt="Army Ever After" width="200" height="200"/> </a>

Copy and paste your button code into your HTML gadget. Click save and your set! 

Your buttons are now added to your sidebar!! How do you set up your ads on your blog? 



No comments:

Post a Comment

Your comments warm my heart!! Leave one for me and I PROMISE to email you back (unless you're a no-reply blogger in which case please fix that)!!

Saturday, February 15, 2014

Adding Buttons to your Sidebar {Saturday Tutorials}

Alright so I confess....I don't run my own blog sponsorships. Gasp!!! How dare I even offer advice on something I don't even do!!! Well in my defense, I have helped a ton of lovely ladies organize their sidebar. That qualifies me as a mini-expert right? Right! 

Army Crafter | Life Could Be a Dream | The Albrecht's Blog | From Bisons to Buckeyes
Love and Waffles | Marry Mint | Living in Yellow | Life with Amberly & Joe | Artsy Cajun | You Gotta Have Hart 
Hurry Up and Wait | Helene in Between | Happily Ever After | Venus Trapped in Mars | All Things Life & Air Force Wife | Jets and a Brunette
Munchkins and the Military | Loving Life Moore | the Florkens | Going Green

In case you're out of the loop and have absolutely no idea what I'm speaking of, sponsorships are all of the lovely buttons you see on blog sidebars. Pretty much, they're ads--people pay you (or swap with you) to put their face on your blog in the hope that your readers will take a gander over at their blog. Got it? Ok, good. 

I use Passionfruits to run all of my ads and sponsorships but it's really super easy to do them yourself as long as you have the time and a little bit of know-how. Which is why I'm here. Smiles all around! My amazing friend Jamie from You Gotta Have Hart let me use her blog as my guinea pig and use her sponsorship sidebar as my example for this here tutorial. Right now, Jamie solely does swaps on her blog but this process pretty much works for paid sponsorships too. 

Step One: Set up your gadget

If you already have an HTML/javascript gadget in your blogger layout, then all you have to do is open it up to start. You can do that really easily by using the little toolbar icon on your blog. Ta-dum...there's your HTML gadget aka the place you put your button code. Hopefully you know what the width of your blog's sidebar because that will help you in the next step. 

Step 2: Setting up your button
Alright, so your button's place of residence is open and ready for business. (Yay us!!) Now we can work on your button code. Most of the time if you're swapping buttons with someone or if they're paying you to reside on your sidebar, they will have a button to give you. Which is absolutely wonderful because you need that button code they'll give you. What is not wonderful is that there is no uniform size everyone's button will be--you could have a button that's 500x500 and one that's 150x150 and your sidebar is 300x300. 

This code solves all of your mismatched button problems:

<div class="BLOGNAME" style="witdth: 200px; margin: 0 auto;"> <a href="BLOGURL" rel="nofollow"> <img src="IMAGEURL" alt="BLOGNAME" width="200" height="200"/> </a>

BLOGNAME is obviously well the name of the blog (you put that in twice); BLOGURL--whatever it says in the search bar that starts with http. The IMAGEURL is where the image is hosted; if you don't know what that is, right click on an image and choose 'copy image url'. The width and the height all depend on your sidebar's width. This is what my square button code would look like:

<div class="Army Ever After" style="witdth: 200px; margin: 0 auto;"> <a href="http://www.armyeverafter.com" rel="nofollow"> <img src="http://4.bp.blogspot.com/square+button.jpg" alt="Army Ever After" width="200" height="200"/> </a>

Copy and paste your button code into your HTML gadget. Click save and your set! 

Your buttons are now added to your sidebar!! How do you set up your ads on your blog? 



No comments:

Post a Comment

Your comments warm my heart!! Leave one for me and I PROMISE to email you back (unless you're a no-reply blogger in which case please fix that)!!