coding Archives - Page 2 of 3 - The Blogging Brew

How To Create A Hover Effect For Your Blog Images

January 24, 2015 • blogging, coding, how to • 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.

Adding A Hovering Pinterest Button To Your Blog Images

December 21, 2014 • blogging, coding, how to • Comments

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

As you probably know by now, Pinterest is one of my favorite social media platforms, especially when it comes to blogging. It’s the perfect place to get your content in front of new eyes, and test out your approach to new readers. And I mean, who doesn’t love an infinite feed of blogging tips, clothing styles, and cute puppies? Simply put, I can’t get enough of it, so when I redesigned my blog a few days ago, I made sure it was Pinterest friendly!

One of the best things you can do for your blog is make your content easily shareable. If I can’t find a way to share your post within a few seconds of glancing, I probably won’t share it. I’ve found that the easiest way to prompt my readers to pin my graphics is by making it pinnable through a hover button. That way, all they have to do is hover over their favorite image, click my custom button, and be taken to a window for pinning it! You might have seen this kind of button on other blogs and thought it was something only knowledgable coders can install, but I promise, it’s super simple.

I’m going to take you through a short tutorial for installing your own hovering Pinterest button, and a few tips for designing your custom button. If you want to make yours even more interactive, I’ll also show you how to add a hover transparency effect!

INSTALLING YOUR PINTEREST HOVER BUTTON

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

2. Search for the </body> tag.

3. Copy the code below, and paste it above the </body> tag:

4. To use your own custom button, replace the URL in line 3 with the direct URL of your button image. You can get that URL by uploading your image to a website like Photobucket.

5. If you don’t want your button to be placed in the center of your graphic, change the center in line 4 to topleft, topright, bottomleft, or bottomright.

6. Save and view your blog!

DESIGNING YOUR CUSTOM PINTEREST BUTTON

The great thing about this tool is that you can use whatever image you want, which is great for keeping your blog’s color scheme consistent! Here are some tips for creating the best Pinterest button:

If you don’t have professional graphic design software, I recommend using a website like Canva, Pixlr, or Picmonkey. I might have to make an entire post about these websites, because I love them so much!
A good size to go off of is 100 x 100 pixels, which avoids covering up your graphic too much or making it too small to read.
If you use text on your button (like “Pin It!”), use a simple font. Fancier fonts tend to take up more room, meaning the text has to be smaller to fit in your button. An exception would be using your blog header’s font, as long as it’s readable!
Stick to your blog’s theme. It makes your blog look more professional and clean!

ADDING A TRANSPARENCY EFFECT ON HOVER

1. From your Blogger dashboard, go to Template > Customize > Advanced > Add CSS

2. Copy the following code and paste it in the box:

3. Click “Apply to Blog” and check out your effect!

UPDATE: I will no longer be following comments on this post, so if you’re having any trouble, feel free to contact me!

How To Make A Back To Top Button For Your Blog

August 15, 2014 • blogging, coding, how to • Comments

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

After getting a ton of great feedback for my last Blogger tutorial, I decided it was time for another one! I was planning on making a tutorial for adding social media icons to your navigation bar, but this week has been crazy busy for me and I haven’t found the time to put that one together. Instead, I found a super simple way to make a back to top button that I couldn’t wait to share with y’all!

I just installed this button on my blog a few days ago, and I love it! You can use any image you want, which is perfect for anyone who wants to make sure this button matches their design! I also love how it fades in and out; it’s the little things that get me! Oh, and it doesn’t involve your template code whatsoever, so there’s no need to worry about messing your design up if you’re clueless about coding. As long as you know some basics about Blogger, you’ll be good to go!

Design Your Button

I made my button using PicMonkey, but you can use whatever photo editing method you want! This website is my favorite for editing/creating graphics because it’s free and has just about everything someone with my skill level could need! Maybe someday I’ll make it to the Photoshop level, but right now I’ll settle with pre-made graphics.

For my button, I just took one of the pre-made arrow graphics and added some text below it. You can get as fancy as you want, or keep it simple like I did!

Once you’ve designed your button, head over to a website like Photobucket and grab the URL for your image. You’ll need this when you’re inputting your code!

Create Your Widget

Go into the Layout section of Blogger and create a new HTML/JavaScript widget in the footer area of your blog. This is where all of your code will be going!

Add The Code

This is where the magic comes in! After searching for what seemed like forever to find the perfect code, I found this at My Blogger Tricks. They have a bunch of other great tutorials, but this is one of their updated versions with all the extra smooth scrolling and fading effects. Paste this code into the widget you just made, and add the URL for the image you created where it says “IMAGE LINK”.

Save your widget and you’re done! Go check out your blog to see your new button and test it out!

UPDATE: I will no longer be following comments on this post, so if you’re having any trouble, feel free to contact me!