How To: Add a Search Bar on Your Blogger Homepage...and Why You Should.

Search Bars! Search Boxes! What the heck are those and why on earth would I want one on my blog?! Aww friend, I am SO glad you asked! Let me tell you all about this fun lil thing.

Search Bars/Boxes- What are they?

Simply put, a search box/bar works the same as any other search engine would (Ahem...Google, anyone?) except it's on YOUR BLOG and searches through YOUR STUFF! Wheeeeeeeeee! We like that.

For any Blogger users out there, this is in the form of a "Gadget", and is something we can SIMPLY add to our blog to give it a bit more blinggy-bling. 

Why Should I Have One on My Blog?

Well, there's a couple of reasons! For one, functionality! This little Gadget-O-Love adds a lot of functionality to your blog. It enables readers to search through all of your hard work and find exactly what they are looking for.

Why is that important? Because if any readers out there are ANYTHING like me, they don't have a lot of time to scroll through each and every post you've ever written until they find what they're looking for. They'll most likely give up along the way and go somewhere else (GASP!) to get their info. We definitely don't want that.

So, by adding a Search Bar/Box you are saying to your devoted readers, "Hey, I get it...time is money. Why not type in exactly what you're looking for and be on your merry way?"

That's exactly what it does. It creates a little internal search engine within your blog! So now, anytime you've tagged a post (I hope you're making precise tags within each blog post you publish) those tags get stored in your search engine. So let's say Sally loves your blog, is trying to do something she knows she's seen posted before, but can't remember when. By having a Search Bar/Box all she needs to do is kind of know what it is she's looking for (maybe..."fun fonts for free"), type those words into your bar, and hit enter. Your internal search engine will now do the work for her! It will search through each and every post you've written, and then bring up a nice little tidy list of previous blog posts that has something to do with her key words!

So instead of 700 posts, she now only has to go through a couple. Usually the search engine is so smart and precise, that it narrows it down to only 3-4. Badda Bing, Badda Boom. 

In essence, a Search Bar/Box makes your blog work the way it should, as well as making it engaging and helpful. This keeps your readers coming back time and again.

So now, How Do I Add One to My Blogger Blog?

Easy Peasy! Just follow these steps and you'll be there in no time at all :)

1. First and foremost, make sure you are signed into your Blogger account. Once you are, you're going to go to your blog's homepage and click "Design"- which is up on the top right!

2. By clicking "Design" you are able to see your blog's inner core- where you can do any and all changes you might want to make. There are so many lovely things you can do in this place, so play around! 

For our purposes we will need to find "Layout" and click it.

3. Next, you'll see you're now able to see your blog's "skeleton" (in a sense). This is an outline of what you have on your blog, where everything you've added is placed, and an easy way to make any changes- like moving something around, deleting something, or adding on.

Find where you want to add your new Gadget (a Search Bar/Box is indeed a Gadget!)- this place doesn't have to be exact- but has to be around where you're thinking of having it go. I suggest having a search bar somewhere close to your main information on your home page (i.e.: profile pic, social media, etc). We can move the Search Bar around once it's installed.

Click "Add a Gadget".

4. Now we are seeing a list of all the different Gadgets available on Blogger! There's some neat ones there, so look around! You might find something you didn't even know you could do! As you can see, Blogger lets you know what's already been installed by simply saying "Already Added" on the right side of each Gadget.

Scroll down until you find, "Search Box" and click the little "+" on the right. This adds it to your blog!

5. Now we need to simply configure our Search Bar/Box. All this means is we're going to make it do exactly what we want it to do.

A. Here you can title whatever you want your bar to be. Keep in mind that this "name" will show up on your blog for all to see. You can also leave it blank should you choose.

B. Make sure this box is checked! This allows people to type in key words (i.e.: How To, Blog Design, Blog Help...) and your Search Bar will search ALL throughout your blog's posts for any post related to those words! Neat huh?

That being said, I personally want the Search Bar to ONLY search my blog, so I unchecked the following two boxes. I don't want people seeing results from anywhere else, other than my blog :)

C. Here is where you will see a nice little preview of what your Search Bar will look like :)

D. When you are satisfied, click "Save". This will apply those changes to your Search Bar/Box.

6. Now as you can see we're taken back to our blog's skeleton. And, as you can see in A. our Search Bar is automatically up at the very top of my Gadget list. I'm not happy with it being there, so to move the box around all I need to do is click and hold down on the box, and drag to where I want it (within that area). Usually just up and down. If you're wanting it somewhere completely different, you'll need to delete (by clicking "Edit"), delete the Gadget, and start over someplace else on your skeleton.

B. When you think you know where you want it, click "Preview" to be shown a mock-up of what your blog will look like once you hit "Save". Click out of that box and come back here to make changes. I usually have to "Preview" 3 or 4 times before I've got it right.

C. Again, once you're happy with your placement, click "Save Arrangement"!

7. Viola! When I go to my homepage, displayed in all it's glory is my new Search Bar/Box! It's easy to see (up towards the top) and is titled appropriately (so my readers know what it is).

8. Here's how it works! Let's say you want to find an old blog post, or your reader really needs to know how to do something: Just type in the key words into your Search Box and BOOM a beautiful list of ANY and ALL YOUR BLOG POSTS that include those words, shows up! 

Neat. Tidy. Easy. That's what we like!

Blog Tips: Giveaways

No matter what type of blog you have, running giveaways is a great way to gain exposure, followers, and success; especially if you're new to the blogging community.

When I made the move over to the Blogger platform in December and had my new blog design and name reveal in January, I had a huge giveaway that included ad space, products, and gift certificates from other bloggers in the community. I went from having just a handful of followers to over 100 in just a weeks time. But you can't just post a giveaway on your blog and let it sit there hoping people will come and enter. Today I am going to share with you the types of giveaways you can run, who you can get involved, how to run a giveaway, and how to promote it so that not only your giveaway can be successful, but your blog as well.

Types of giveaways/who's involved:

Self Sponsored:

Self sponsoring means that you are the only sponsor/provider of a prize and no one else is involved. Sponsoring your own giveaway can be great if you have product or ad space to offer.  If you have a shop or make your own items/products or have ad space to giveaway you can set your own limits. You can giveaway anything, really! When I co-blogged for Sew Basted I Wanna Purl, we gave away thrifted craft books and purchased craft items, so it doesn't necessarily have to be something you've made. 

Paid Sponsored:

Paid sponsored means that a company, blogger, or person has either given you cash, check, or product/incentive to host a giveaway and will provide in addition to payment a prize for the giveaway. I have hosted several of these and am always happy with the results. These are great because you get to try out product [if thats their form of 'payment'], make new friends, and help out another blogger/comapany/person. But they're even more great because the sponsor will be sharing the giveaway via their social media sites as well so thats double exposure for you! But they're not just giving you something to host a giveaway; typically they want you to write a paid sponsored post on the product or service so be sure to do that when you run the giveaway!

Blogger/Shop Sponsored:

A blogger/shop sponsored giveaway basically means that another blogger or bloggers [or shop owner{s}] is donating ad space, gift cards or product for the giveaway. Typically you will host these with your months sponsors in an effort to gain more followers for yourself as well as your sponsors. Some of your sponsors may just be bloggers, some of them are both a blogger and shop owner so they will donate either ad space or product or both. Some bloggers host this type of giveaway by having all of the sponsors involved donate money toward a gift card. These are my favorite because every blogger out there I follow usually does Target or Starbucks and I am all about both, especially since there is a Starbucks in Target! 

How to run a giveaway:

Plan:

Before you get all gung-ho and publish a giveaway, you need to give it some thought. 

• Why do you want to run a giveaway? 
• Are you wanting to have one because you reached a certain amount of followers? 
• Do you want to host one with your month's sponsors?
• Is a giveaway something you want to do every month? 
• What type of giveaway do you want to run? 
• Self sponsored, paid sponsored, blogger/shop sponsored? 
• Who will you get involved? 
• If its a paid sponsored giveaway you either need to contact the company, blogger or person or maybe they've already contacted you? 
• What are you giving away?  
• Product? Ad space? Supplies? Someone else's product/services?
• How long will the giveaway last?
• How should people enter?
• How many winners?

Once you have a plan, you can start to execute it. Contact anyone you want involved and sort out the details with them. If it's a paid sponsored giveaway, usually the company/blogger/person will give you guidelines. If you have other sponsors, they'll let you know what they can give. But no matter who is involved, you'll need to get information from them.

Entries for the giveaway:

There has to be something that the readers need to do in order to enter the giveaway. You can have them do one thing or ten things; but whatever it is, you need to be sure you're very clear about it. Here are some ideas [and things I've used in the past] for my giveaways:

• Leave a blog post comment [could be anything or specific to the giveaway]
• Follow on Facebook, Twitter, Pinterest, Instagram, Bloglovin', GFC, Hello Cotton, etc. [and/or any of your sponsors of the giveaway]
• Subscribe to RSS feeds
• Fave their Etsy/Storenvy/Big Cartel shop
• Pin an image or the giveaway

The entries are almost endless depending on the type of giveaway you're having and what you're giving away. If you have a sponsored giveaway, be sure to ask them for any links they want as entries so they can gain the same exposure as you and make it fair for them for sponsoring. 

What to include:

When you have your plan for the giveaway knocked out, all parties involved contacted and info collected, this is what you are going to want to include in your post [typically in this order, though not necessary]:

• Giveaway header image
• Introduction to the giveaway
• People involved [include images of them or their product with captions of who they are or what it is and any links to their blog, social media sites, shop, etc]
• Information on how to enter
• Timeline for giveaway
• Terms & Conditions
• Entry form
• Be sure to thank everyone and wish them luck!

Entry Forms:

I only know of two ways to have people enter a giveaway; by leaving a comment with any information required on that particular post or through Rafflecopter. 

If you're using Wordpress or another blog platform that does not allow you to embed codes into posts you can have entrants leave a comment on the post stating that they've followed you, liked you, etc etc. Then you can use a site like random.org to choose a winner by entering in their names. This is an okay way to have people enter, but I suggest using Rafflecopter. This is why:

Rafflecopter allows you to fill out a form with all of the links and info needed for your entries and gives you a code to embed into the HTML portion of your blog post. When people come to your post to enter the giveaway, they simply follow the prompts on the Rafflecopter form and all information is stored on your account where you can check entries and see that information. Rafflecopter is also awesome because when the giveaway has ended, you're able to have the Rafflecopter form choose, at random, a winner for you and post it on the form which will show up on your post. You can then contact your winner via the information they provided. See, amazing. It practically does all the work for you! Since switching to Blogger, this is the only thing I use for my giveaways. It's free, too!

Promoting your giveaway:

Once you have the post written up, previewed [to make sure everything looks correct and the entry form shows up], and is published, now it's time to put it on blast. There are so many ways to promote your giveaway! 

• Sharing via Google+
• Twitter
• Pinterest
• Facebook
• Email
• Instagram
• Giveaway link ups
• Giveaway groups on Facebook
• At the bottom of any following blog post

If any sponsors are involved be sure that they share via their social media sites as well. This is the part that gains you more exposure, followers, and success!! Initially sharing the giveaway is great, but be sure to do it a few times a day, daily, until the giveaway is over. Let all your friends, family, bloggy friends and community know that you're having a giveaway. Have a reminder at the bottom of any blog post you publish after the giveaway, too, so that any new follower who didn't know about your giveaway now does. Promote, promote, promote!

As a blogger we are already promoting ourselves daily so this should be the easy part for you! 

Be sure to make your giveaway fun! Light up your post with bold letters and colors; include photos or giffs; talk highly of your sponsors and anyone involved! 

And well, since I'm writing up a post on running giveaways, we thought it would be fun to run a little giveaway ourselves! All of us contributors here feel that building up the blogging community with unique and original bloggers is super important. With plans of highlighting bloggers in future monthly posts series, what a better way to kick that off by giving away a prize of being a solo featured blogger for May?? 

If you're the winner, we will feature your blog/shop in a post in May with links to up to 4 additional social media sites, a photo of you and/or product you make, as well as a little blurb so that our readers can learn a little bit more about you and go check you out! The giveaway will end Monday, April 29th and the winner will be announced/contacted the next day! The featured post will go up May 6th! Please use the Rafflecopter form below to enter. Thank you for all of your guys' support! 

a Rafflecopter giveaway

How To: Remove the Blogger Picture Shadow

I don't know about you, but one of the first things that needed to go when I first started my blog, was the weird little shadow that formed behind every picture!

I mean, don't get me wrong- I LOVE BLOGGER and will forever hold them close to my heart. For the most part they are easy to use and just plain awesome! But that one little tick- that darn shadow...just BUGGED ME!

If you just cannot climb in the same boat as me- no problem! No harm and no foul. Totally get it. But if you are sitting at your desk, hanging by the edge of your seat, going, "YES YES YES!" then this blog is for you. How to remove that silly little shadow around all of your images.

So as you can see, our blog images (and some images elsewhere) did indeed have that little bugger. I mean, I guess it's not the stupidest thing...but it sure bugged me! You Sir, gots to go!

This trick is like, SUPER DUPER simple. I promise. But I do need to say- this trick is (of course) only for Blogger users AND those that are using the SIMPLE VIEW template. So, if you're using DYNAMIC VIEW, this won't work. Also, my step-by-step will be using the new blogger interface. By "new" I mean the one you probably already have- because it was available back in like...2011 or something. 

Ok! Moving on!

1. Make sure you are signed into your blog. You can tell if you are by looking at the top right corner. On your blog's homepage, click on DESIGN.

2. Next, you're going to click on TEMPLATE on the left hand side.

3. Once that has been clicked, find the CUSTOMIZE box and go ahead and click it.

Notice, here is a great way to tell if you're using the SIMPLE template or another one. As you can tell, we are indeed using it!

4. Since we're good to go, on the left hand side, find ADVANCED and click.

5. A little scroll box will show up directly to the right. Scroll down until you find ADD CSS and go ahead and click that.

6. Next, a white box will appear. In that box copy and paste this code EXACTLY:

.post-body img, .post-body .tr-caption-container, .ss, .Profile img, .Image img,

.BlogList .item-thumbnail img {

  padding: none !important;

  border: none !important;

  background: none !important;

  -moz-box-shadow: 0px 0px 0px transparent !important;

  -webkit-box-shadow: 0px 0px 0px transparent !important;

  box-shadow: 0px 0px 0px transparent !important;

}

Easy right? Once your code is pasted, make sure to hit ENTER after the last character, "}".

7. Once the code is pasted and you've hit enter after the last character, go ahead and click APPLY TO BLOG. If you're nervous it didn't work- you will immediately notice the shadow has been removed on the preview that shows below what you're doing :)

Violà! You've now removed those pesky shadows from any and all images on your blog!

If you decide you hate it and want those shadow frames back, just follow the steps again- except delete all the text in that white box, then click APPLY TO BLOG. 

Hope that helps, guys!!!

How To: Add Pages on Blogger

Yesterday we wanted to get to know you and your needs as a blogger a little better so we asked what it is that you need help with. We got several emails and some comments and we plan to answer every one we can. Today we are answering Angie's question on how to add pages to her blog Keith & Angie Pope. We will be showing this for Blogger.

Step one:

You are going to want to create or download an image for the page[s] that you are wanting to add. I simply created one using PicMonkey by uploading a downloaded banner and adding 'SPONSOR' to it. This is the image that will be clickable for your new page on your blog. 

*Repeat for any other pages you want to add

Step two:

Upload your image to an image hosting site [I use Flickr]. Keep this window open because you're going to come back to it in a later step. 

*If you do not wish to use HTML for your pages, you can simply skip these two steps 

Step three:

Head on over to Blogger and click on 'Pages'. You'll then click on 'New Page' then 'Blank Page'. Add a title and any information you want for this new page. Once you added your content be sure to preview to check and make sure it looks how you want it. If everything checks out, publish like you would a blog post. Then be sure to click 'Save Arrangement' located in the top right corner of your Blogger dashboard. 

Once you're back on your 'Pages' screen, if you wish to use HTML for your pages when in public view of your blog, choose from the drop down menu next to 'Show pages as' and click 'Don't show' [shown in these brackets on the image below]. This option makes it where the default pages menu isn't shown on your public view of your blog and allows for the HTML [clickable images] to act in their place.

 

*If you are not using an image for your pages you are done!

Step four:

Head on over to your 'Layout section and click on 'Add gadget' under your Header section. Select 'HTML/JavaScript' and paste this code:

<a href="PAGEURL" target="_blank"><img src="IMAGEURL" alt="TITLE" width="0" height="0" /></a>

Fill in any of the information in RED. You can find the page URL by clicking on 'view' under the page you created. Your image URL will be from the image you uploaded earlier on your image hosting site. The title is the name of the page you created. For the width and height numbers, simply put in the appropriate dimensions that would be proportionate to your blog and under your header. [Your image hosting site suggests different sizes you could use; I would go with the smallest to second smallest proportionate [not square unless your image is square] image size and grab that URL. ]

Repeat code and fill in all appropriate information for each new page.

Once you have pasted the code[s] and filled in the information, save it, preview your blog to make sure it all looks right, then click on Save Arrangement. 

If you are needing any help with any of the HTML or would like help in creating page images, please let us know! You can email us at b.you.blog [at] gmail [dot] com. 

How To: Add A Pin It! Button To Your Blog Posts

If you have a blog, more than likely you're pinning your posts. Much like we do here, you have an image you pin either to a Pinterest board containing all of your blog posts or another board about blogging. But aside from you pinning your posts, your readers can pin them too! The easiest way to allow for your posts to be pinned is to add a 'Pin it!' button to the bottom of your posts. In just a few simple steps you can expose your blog to hundreds of thousands more potential followers. 

Step One:

Upload a 'Pin it!' image to an image hosting site [I use Flickr]. You can find one by doing a Google search for a Pinterest image or you can create one yourself. I created my own for my personal blog A Fox & A Wolf by using PicMonkey. After your image is uploaded, find the image URL.

Step Two:

Head on over to Blogger and go to 'Template' and then 'Edit HTML'. Click 'Expand Widget', hit CTRL>f and search for <div class='post-footer'>. 

You're going to want to paste this code above that:

<a href="javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());"><img alt="Pin It!" style='border: none;' src="INSERT IMAGE URL"/></a>

Where it says 'INSERT IMAGE URL' you're going to want to paste your Pinterest image URL that you uploaded to your image hosting site. Click 'Preview' to make sure the code copied correctly, then 'Save Template'. 

Now you are on your way to having the best exposure on blog posts and your blog in it's entirety. You can view B.You's board on Pinterest here. 

If you have any questions about adding the 'Pin it!' button to your blog, please leave us a comment below or send us an email at b.you.blog [at] gmail [dot] com. 

How To: Install Social Media Icons on Blogger

A while back the lovely Torrie shared how to create social media icons... today I am going to show you how to install those social media icons on Blogger. 

Once you've followed her tutorial, you'll want to upload your images to an image hosting site. I use Flickr. To grab the link for the code, click on the image >> actions >> view all sizes. Once you're on the screen where you can select different sizes, select the size that will fit in your sidebar. You're going to right click that image and then you will have the link for your code. 

This is the code you will need for your social media icons. 

<a href="URLFORICON" target="_blank"><img src="IMAGEURL" alt="TITLE" width="165" height="55" /></a>

Change the information in red. In this tutorial I am demonstrating with our 'Twitter' social media icon so in the 'URLFORICON' section of the code I am going to put the URL for our Twitter account making sure to stay within the quotations. The image URL link you'll want to copy and paste [shown in photo above] in the 'IMAGEURL' section of the code being sure to stay within the quotations. The 'TITLE' section is just where you can put either 'Twitter' or which ever social media site this icon will be connected to. Or you could just put your blog name. Where the 'width' and 'height' numbers are in red is where you will input the image size for your sidebar. This is what your code should look like after all of the information is added:

<a href="https://twitter.com/byourownblog" target="_blank"><img src="http://farm9.staticflickr.com/8472/8434386280_3d51d80d0d_m.jpg" alt="B.You" width="165" height="55" /></a>

Repeat these steps for all other social media icons, making sure to save the complete code in Notepad or Word. Once you have all the codes completed, head on over to Blogger and go to 'Layout'. In your sidebar select 'add gadget'.

Then choose 'HTNL/JavaScript'

Copy and paste all of your codes then select 'add'. Be sure to preview your blog before you save to make sure that it all looks right. If it does, and everything is in place, select 'save arrangement' and then head back to your blog to make sure that the links work. If they don't, be sure that you copied the codes over correctly and that you stayed within the quotations when entering your information. If everything is running smoothly then you're good to go. You'll have a pretty new addition to your sidebar that represents you and all things connected to you. 

If you have any questions about the installation process or need help at all, let us know. You can leave us a comment below or send us an email at b.you.blog [at] gmail [dot] com.

How To: Add Post Dividers

Another way to add a bit of flair to your blog is to have a post divider image. This is a thin, horizontal graphic that separates your posts instead of just a line. It adds another level of personality to your blog, and can make your space seem more put together.

You can see what my divider graphic on Fox + Hazel looks like below:

First, you need to find or create a divider image that you like. Choose something that is noticable, but not so flashy that it distracts the readers eye.

Here are a few free resources you can use:

IROCKSOWHAT - 1 & 2 & 3

Sweetly Scrapped 1 & 2

MeinLilaPark

Make sure your image is the same pixels wide as your posting section of your blog. To find out how wide your post section is, go into the Template section and click on Edit Html. Search for "main-wrapper" (without the quotation marks.) This is how wide your images should be inside your post to fit. Make sure your divider is the same width. If it's too wide, it will hang over into your side bars. It's best to have an exact fit, but you can air on the side of too small to be safe. You can use Picmonkey to re-size your image if needed. You can also do this within Photobucket.

Take that image and upload it your photo hosting site of choice. I'm a Photobucket user, so mine is uploaded there.

Next, go into the layout section of your blog and click Add a Widget. Next find the Html/Javascript widget and click on it.

Copy & paste this code into that box:

<style type="text/css">.post {

background: url(YOURURLHERE) no-repeat;

background-position: bottom center;

margin:1.5em 0 1.5em;

border-bottom: none;

padding-bottom: 3.5em;}

</style>

Where it says YOURURL, paste the direct URL for your image from your hosting site. If you are using Photobucket for example, then find the direct link for your image from there and replace it.

Click Save. Your widget doesn't need to be anywhere specific in your side bar as it won't show up there because the HMTL is affecting the blog posts and nothing in your sidebar. I personally keep all my HMTL widgets on the bottom left hand side just to keep it organized.

Now view your blog and see your magical work! Amazing right? Now your blog is just a teeny bit more custom and a whole lot snazzier looking! Simple things like a post divider can help set your blog apart from all the others floating around in the blogosphere - and of course you want to be set apart, right? ;)

If you have any questions, please ask away! We'll try our best to answer them =)

How To: Import Blogs From Google Reader to Bloglovin'

Yesterday we shared with you some news about Google Reader and GFC going away soon and that Bloglovin' is around to help! We also mentioned that you can import your blogs from Google Reader in to Bloglovin' without having to manually enter each link. What a life saver! We had some people ask us how to do that so we are going to share the 'how to' with you today.

Step One:

Log in to your Bloglovin' account and go to settings. Scroll down to the 'Import Blogs' button and click that.

Step Two:

Select Google Reader

Step Three:

Confirm importing from Google Reader

Step Four:

Select 'allow access'

Step Five:

You will get a screen like this that shows your importing process

Once it's complete, it will take you back to your Bloglovin' home page and all of your favorite blogs will be there ready for you to read!