Posts

Showing posts with the label Image Effects

Add a Pinterest Pin It Mouseover Button on Blogger Images

Image
Images have always played a prominent role in attracting new visitors through search engines like Google and Bing. But when Pinterest decided to enter the social media mix, it upped the ante in a big way. Pinterest lets blog owners use their service to add a 'pin' to photos or content images on the site. When visitors of that site see a photo they like, they can choose to click on the red Pinterest button for Blogger, and add it to their Pinterest account. The person who pressed your Pinterest button for Blogger can now see your photo on their dashboard, and share it with friends or followers on the service. They can also come across this photo when users add keywords or category tags to the image. More importantly, that photo links to your site when clicked on and will contain a description title of your blog name or post. Therefore, adding the Pinterest button for Blogger will help you to benefit from tons of new traffic coming from Pinterest and people who had found your ph...

How to Turn Off Auto Enhance for Blogger Photos

Image
When you go to upload photos on Blogger, look closely for changes between the picture you uploaded on your computer and how it looks on Blogger. If you notice any darkening of the pictures themselves, especially in light-colored areas of the photo, you are seeing the results of a Blogger auto-enhancing feature. This Blogger auto-enhancing feature is packaged within the service and is intended to give your photos a more professional feel. It works by smoothing out fuzzy photos and removing any imperfections in personal photos, so that you see your best looking you. However, you may realize that not every picture that you upload needs to undergo this enhancement. In fact, it may even cause your site to look dull or outdated as it can turn white photos gray. The first picture was auto-enhanced, while the second one was not Turning Off Picture Auto-Enhancement on Google Plus Fortunately, there is a way to adjust these settings so that you're able to turn them on and off at will. You ma...

Add a Custom jQuery Lightbox To Blogger

Image
If you are not satisfied with the default Lightbox set up by Blogger, here's another amazing way to show off your pictures. If you've missed out, I have already shown in one of my posts how to customize the Blogger Lightbox by changing the background color, borders or the text color, but this tutorial will show you how to replace it entirely with a cool jQuery Lightbox plugin that is very popular among bloggers. What this Lightbox does, is to display larger versions of the images that will pop-up into a larger box once we click on them, and allows us to easily navigate through that set of photos by using the previous and next buttons. To see it in action, please visit the following demo blog and click on any picture to enlarge it. Demo Blog Adding jQuery Lightbox to Blogger Step 1. From your Blogger Dashboard , click on Template > Edit HTML Step 2. Click anywhere on the code area and press the CTRL + F keys to open the search box. Paste the following tag inside the searc...

How to Increase Thumbnail Resolution on Blogger

Image
When we add a widget on Blogger, the thumbnails will keep a default size of 72 x 72px which might not look good if we try to make them bigger using only CSS. However, with a bit of JavaScript we'll be able to replace the thumbnail with the same image of higher resolution and this way, larger images will no longer appear blurry. In this tutorial we will see how we can replace the default thumbnail size of the popular posts widget even though we can apply this trick on any of the blog widgets. Demo Blog . Changing the Thumbnail Size for the Popular Posts Widget Step 1. First, let's add the Popular posts gadget by going to Layout > click on the Add a gadget link and select Popular Posts from the popup window. Step 2. Next, go to Template > click on the Edit HTML button > click anywhere inside the code area and press CTRL + F keys to open the Blogger search box. Step 3. Type or paste the following tag inside the search box then hit Enter to find it: </head> Af...

Create a CSS3 Image Hover Effect with Animated Vinyl Record

Image
Here is an amazing CSS image effect to reveal more information on your images with a really cool CSS3 hover animation. This is just perfect for blogs dedicated to music or if you just want to show off the music that you love. So, what we will do in this tutorial is to take an image for our album cover, add some fancy CSS3 transitions and transforms that, on hover, will slide out a pure-CSS vinyl record behind it. Finally, we will add some basic HTML to our post or page where we need to apply this amazing effect. Demo: hover over the album cover and see how CSS reveals further information: The Wall is the eleventh studio album by the English progressive rock group Pink Floyd. How to Apply The Animated Vinyl Record on Blogger Images Step 1. From your Blogger's Dashboard , go to Template > click on the Edit HTML button: Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box: Step 3. Type or paste inside the search box the tag below ...