How To Create A Hover Effect For Your Blog Images
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.
Building A Kick Butt Sponsorship Program
After you’ve blogged for a while and gotten the gist of things, you might feel the need to take the next step in developing your blog. You may have already tapped into the sponsorship world by sponsoring another blog, or doing free ad swaps with some of your friends. As your content gets better though, so do your stats, meaning more exposure. All that sidebar space is worth a bit more now, meaning one thing: it’s time to build a sponsorship program!
The great thing about the sponsorship system is that bloggers are at the center of it. They’re both the sellers and consumers, meaning it’s a win-win business. Most of the time, bloggers will use the money they make from selling ads to buy more for their own blog, making it a huge system of happy bloggers! And with the right tools, creating your own sponsorship program can be super simple. Here are some general steps to guide you through the process!
DETERMINE YOUR GOAL
Before setting anything up, you need to establish what you want to get out of your sponsorship program. Are you wanting to get more exposure? Help out other bloggers? Make some side cash? This will help you determine what you’ll be offering with your ads, and how much you’re willing to give up that space for. If you just want to meet other bloggers and help them out along the way, you might offer more shout outs at a lower price. But if this is strictly for the business/money-making aspect, you’ll want a more structured program with a higher price.
CONSIDER TIME
Running a sponsorship program can require as little as a few minutes a day, to a couple of hours. Think about how much time you’re willing to devote towards your program, and only offer what you can work with. If you have a tight schedule, limit your spaces to 4 or 5 spots. You can always increase that later!
DECIDE ON A PLATFORM
There are several websites out there that will host your sponsorship program, but my absolute favorite is Passionfruit. They take care of everything, and I mean everything. All you have to do is choose the type of ads you want, set the price and a few other details, and place the code in your blog. Passionfruit creates both the ad display and ad shop for you, so no other coding involved! Passionfruit does charge for their service, but their prices start at only $3, which is totally worth it in my opinion. They take so much work off your back!
The other option is to run your own ad program. The great thing about this choice is that you don’t have to pay someone else to run your ads, but it also means there’s more work for you to do. You can create a page on your blog and write out what your options are, and have bloggers contact you by email to work out the details.
SET UP YOUR ADS
This is where we get into the details. There are a lot of things to decide on here, and it all depends on what goals you came up with.
length – how long will each blogger have their ad on your blog? The most common length is one month, which is enough to build a relationship while giving other bloggers a chance for sponsoring you.
shout outs – how many shout outs will you offer? These can be in the form of blog shout outs or social media shout outs, and if you’re offering a tiered system of ads (small ad, medium ad, and large ad for example) you might increase this number as the ad gets bigger. Once again, consider the amount of time you have and don’t offer what you can’t give out!
will you rotate your ad spots? – rotating means that the order of ads on your sidebar will switch around every time your blog is visited. This is great for keeping things fair and giving your sponsors the exposure they deserve! You can also offer more ads while only displaying a few, giving those sponsors extra exposure when they’re up.
will you make a sponsor post? – sometimes bloggers will offer to post about their sponsors in an end-of-the-month post. Usually they’ll ask all of their sponsors a few questions, and post their answers along with a description of the blog. It’s a fun way to connect with your sponsors if you offer it!
what are your restrictions? – it’s always a good idea to include some restrictions to avoid an awkward situation. For example, if you’re running a food blog and a fashion blogger wants to sponsor you, it might be hard for you to promote them to an audience that will enjoy their content. I generally use these terms:
“I reserve the right to deny an ad spot if your blog doesn’t fit with my blog’s aesthetic, or if your ad is distorted.”
You might choose to have more or less restrictions, depending on your blog type and quality opinions.
CREATE YOUR SPONSORSHIP PAGE
This is an extremely important part of your sponsorship program, because it’s where you’ll hook in a buyer. Rather than just placing your ad shop and calling it a day, I suggest writing up a paragraph or so about you and your blog. It gives your potential buyers some background on your blog’s success, and allows them to get to know you a bit before diving in. Make sure to be yourself! Bloggers want to sponsor someone genuine and organized so they know their money is being spent well. This is the place to brag a bit!
Another good idea is to include your stats. It gives other bloggers an idea of how much exposure their ad will get, so they can determine how much they’re willing to spend. Don’t worry if your stats aren’t off the charts yet though; mine surely are not! Numbers really aren’t everything. In fact, when I decide to sponsor another blog, the majority of my decision is based off the kind of person that blogger is. I would rather sponsor a small blog whose writer is enthusiastic and excited to promote me, than a bigger blog whose writer might not give me enough attention to make it worth the cost.
PROMOTE YOUR PROGRAM
Finally, it’s time to promote what you’ve created! Social media is a great place to talk about your new sponsorship program. Make an Instagram post, pin a snapshot, or tweet about it. Show your potential buyers how great you are at promoting something!
Offering a discount is another great way to bring buyers in. By lowering your prices for a day or so, you’ll bring in more sponsors and fill up those spots faster than ever!