Changing The Color Of Your Bloglovin’ Button

• No Comments

Bloglovin’ is my all time favorite feed for reading blogs on, so having a button for my readers to follow me from was essential. Anyone with an account can grab their own button from the widgets page, which is super convenient, but there’s one issue – it only comes in two colors, baby blue and a pastel pink. As you can see, neither of those colors fit with my blog theme, and I didn’t really want my Bloglovin’ button stealing the show on my front page. I’ve seen a few bloggers with custom-colored buttons and couldn’t figure out what kind of magic they were using, until I finally found the secret.

Changing The Color Of Your Bloglovin Button

That’s it. That’s all you need. Well kind of. See how all that’s in there is an opening and closing “div” tag? Those tags will do the magic, but you have to give it some extra code first. Create a text/HTML widget and paste in the above code. Now head over to that Bloglovin’ widgets page I linked to earlier, and choose either the pink or blue button (use the blue if you want to use my references in the next few steps). Copy the code they give you – mine looks like this:

Now paste that code between the “div” tags in the first code I showed you. If you chose the blue button and save your widget now, it should appear the same as mine. This is where the tedious part comes in.

See how there are five numbers, all set to “315”? To get the color you want, you’ll have to change all of those numbers to something else, but make sure when you change a number, you change all five of them to the same number. Otherwise your color won’t change. To test out how much the color will change based on how much you change the number, try changing the “315” to “300”. You’ll notice the color became a brighter green, so it’s going backwards on the color wheel. Now change the “300” to “330”. Now the color has a blue tint to it, so it’s going forward on the color wheel. Play around with that number until you get close to what you want, and know you won’t get the exact color.

Cool, right?

If you have any questions or trouble, let me know in the comments!

Have you discovered any cool blog tricks? Share your secrets!

ps – you should definitely follow me on Bloglovin’ if you haven’t yet. Shameless self promotion.

How To Run A Successful Reader Survey

• 2 Comments

Last week I recapped my reader survey and talked about all the information I gained from it, which was a ton! It went so much better than I’d anticipated, thanks to a few guidelines I made for myself before running it. Today I want to share those guidelines with you, and show you how to create a survey from start to finish. By the end of this post, you’ll have all the knowledge you need to run your own successful reader survey!

1. Determine what you want to get out of your survey

Running a survey without much intention won’t provide you with much information, which is why it’s important that you know why you’re making one. Do you want to discover who your audience is? Did you launch a new design and need some feedback? Are you considering making some changes and want to know how your audience will handle them? I ran my survey to figure out what my audience enjoyed about my content, and determine how they were finding that content. Knowing your purpose will help you come up with questions for the next step!

2. Come up with specific questions

Part of the reason I think my survey went so well was because of the questions I asked. I knew what I needed to know, so I asked exactly those questions rather than broad ones. For example, if you want to know whether your readers enjoy your content, don’t ask, “Do you enjoy reading my content?” Instead, ask something like, “What types of content do you enjoy reading the most?” and list out the different topics you post about so your readers can choose. The main point is, avoid asking yes or no questions wherever possible. Your readers have answers, so let them give them to you!

3. Order your questions so they flow well

You don’t want your readers feeling confused when they go through your survey, so making sure your questions flow is important. For example, if you have multiple questions about your content, group all of those together. I also grouped all of my short answer questions together and placed them at the bottom, so it doesn’t look like I’m asking my reader for a whole essay!

4. Create your survey

Now comes the fun part! You have multiple options when deciding where you want to host your survey, but I personally like Google Forms the most. It has an easy to use format, and lots of designs to choose from. My favorite feature is the spreadsheet they create with all of your responses, making it easy for you to see how the survey is going and get a quick glance at what people are saying.

5. Launch your survey

Once you’ve finished making your survey, it’s time to launch it! I launched mine through a blog post, where I explained why I was running the survey and what I was hoping to get out of it. This is also the time to put your social media skills to the test and spread the word. Tweet it, pin it, and share it everywhere! Here are some extra tips for making your launch successful:

- Create a sense of urgency. You want your followers to complete it sooner than later, so by setting a deadline (say 3 days), you’ll get more responses.

- Don’t just tell people to complete it. Tell them why you’re doing this, and give them a good reason to decide on their own that they want to participate.

- Include an incentive if you think your efforts aren’t working. Maybe send a freebie to everyone who participates!

6. Collect and interpret your data

After your determined time period is over, take some time to look at your responses and analyze them. Are there any trends? Surprises? Make a list of these notes. Hopefully they gave you the information you were looking for!

7. (Optional) Create a graphical display and share the results with your readers

Have some fun and put the data you got into a beautiful infographic. This will make it easy for your readers to see how your survey went, and gives you something to look back on! I decided to post about my results too, but that’s totally optional.

If you have more questions, feel free to Tweet at me or comment below!

How To Create A Hover Effect For Your Blog Images

• No Comments

Note: This tutorial is currently for Blogger blogs only, but I plan on adding a WordPress version soon!

Every blogger has a common goal in mind when creating content: drawing their audience in. If you can keep your reader’s eyes on your content until they’ve read the entire post, then you’ve discovered the secret! But not a lot of blogger’s can say that confidently, including myself. I’m still learning all the tricks behind creating super fantastic content that readers just can’t resist finishing, but I’ve gathered a few tips along the way. Interestingly enough, one of those tips has nothing to do with the words on the page, and everything to do with the images you place between them.

Whenever a blogger asks me for tips on making their posts better, I always say that quality graphics are a necessity. They’re fabulous eye-catchers (I guess that’s kind of obvious), and they add a sense of professionalism to your blog. But what if I told you that those images could work even harder for you? That’s where hover effects come in.

I don’t know about you, but I just love when a blog has hover effects. Everywhere. On links, category tabs, social media buttons, and pretty much everything that’s clickable. They add a level of engagement that your content alone can’t create, and for some reason I feel more inclined to click something if it has a hover effect. Graphics are no exception, which is why today I’m going to teach you how to add a hover effect to your blog images! To keep things simple, I’ll show you how to change the opacity of an image on hover, which is the effect I have my blog images set for.

I made two different tutorials for this, with one geared towards those who have coding knowledge/want to learn about coding, and the other for my followers who want absolutely nothing to do with coding. I think I’ll try this method for the rest of my tutorial posts, because I know some people like having a simpler option.

METHOD ONE: NON-CODERS

1. From your blog’s Blogger page, go to Template > Customize > Advanced > Add CSS

2. Paste the following code:

3. Press Apply To Blog That’s it! If you want to change the intensity of the transparency effect, just change the “.7″ to a different number between 0 and 1. “0” means the image is completely transparent, and “1” means the image is completely opaque.

METHOD TWO: CODERS

1. From your blog’s Blogger page, go to Template > Edit HTML

2. Search for “.post-body img”. If you can’t find it, just add “.post-body img { }” within the “Posts” section of your CSS template. Your CSS template is the area between <b:skin> and ]]></b:skin>.

3. Between the curly brackets, type out opacity:1.0; This will make sure that when your image isn’t being hovered over, it’s completely opaque.

4. Below that section of code, paste the following:

This creates the hover effect. If you want to change the intensity of the effect, just change “.7″ to a number between 0 and 1. “0” means the image is completely transparent, and “1” means the image is completely opaque.

This is what the final code should look like:

That’s it! I love pairing this effect with a Pinterest button, because it highlights the button so well. Check out my other tutorial if you’re interested in making one!

If you’re nifty with coding, you can take this basic tutorial and make it your own with a few edits. Maybe add a border, or a text overlay! Take a few seconds to roam around my blog and you’ll notice I’ve hidden hover effects just about everywhere. One of my favorites is the hover drop down menu in my “categories” tab up top. Look out for a tutorial later on creating your own!