Last updated on July 25th, 2019 at 11:40 am
Blog layouts with a slider that features your recent or special posts at the top of your home page are popular right now. I know! Most of our Blogger themes feature this design. It’s a great way to feature your amazing blog images and bring attention to certain posts.
However, sliders come in some pretty weird shapes. Some are short, wide rectangles like on our Savannah and Phoebe templates. Others are long and tall, as we’ve used on Jolie, a design that’s great for fashion bloggers. Other sliders feature a more square image like our Sophie and Jemma themes.
So, yeah, sliders come in lots of different shapes and sizes. If you want your Featured Image (aka Thumbnail image or 1st post image) to look great in your slider, it may require changing the shape and size of your image.
After you change your image to suit the slider, you may then find that inside your actual posts, that really tall image look HUGE. Or those short, wide images just don’t cut it.
Well, there’s a pretty easy trick you can use to add a hidden slider image to Blogger posts. This means, your slider will use the hidden image. Then you can add a second image to your posts that’s a better shape or size for the single post pages. You can even use a totally different image! Your choice.
How to Add Hidden Slider Images to Blogger Posts
The process of creating a hidden slider image inside a Blogger post is simple and quick.
This trick can be used on any template featuring a Featured Posts slider by Georgia Lou Studios. This method should also work well on most any other Blogger them with a Posts slider as well as most Blogger Posts sliders use the RSS feed and 1st Post Image.
Special Note: If your template uses automatic excerpts on the front page, Label pages, etc., then the slider image will display in these excerpts. It will also be used for widgets like the Popular Posts widget and the Related Posts. This trick ONLY hides the slider image inside the single post page or if your home page uses full post with manual Read More buttons.
The Video Tutorial
The Written Directions
Step 1: Add Your Images to Your Post
- Login to your Blogger Dashboard.
- Go to the Posts page.
- Click on the title of the post you wish to edit.
- In Compose mode, add your 2 images to your post. Keep in mind that your slider post MUST be the first image. Then add the image you want to display inside the post 2nd.
Hint: To make your slider image easy to find, I add it right at the top of the post.
Step 2: Hide Your Slider Image
- Switch to HTML mode by clicking on the HTML button in the post editor.
- Now we need to find our slider image code. Images are found inside the <img> tag.
- Your image code will look something like this: <img border=”0″ data-original-height=”853″ data-original-width=”1280″ src=”https://1.bp.blogspot.com/-9IJenb9JdB4/WaxTFsbQHiI/AAAAAAAAAxU/lr0pNCS-kJIQKcAipRSKNc5HZFw9T7eLQCPcBGAYYCw/s1600/pexels-photo-185801.jpeg” />
- Inside the slider image code, we’re going to add the following piece of code: style=”display:none;”. This is the code that hides the image.
- Add the above code right after the <img part of the image code. Make sure you leave a space before and after this new code.
- It will look like this: <img style=”display:none;” border=”0″ data-original-height=”853″ data-original-width=”1280″ src=”https://1.bp.blogspot.com/-9IJenb9JdB4/WaxTFsbQHiI/AAAAAAAAAxU/lr0pNCS-kJIQKcAipRSKNc5HZFw9T7eLQCPcBGAYYCw/s1600/pexels-photo-185801.jpeg” />
- Now, click the Update or Publish button to save the changes to your blog post.
Ta da! You have now added a hidden slider image to your post in Blogger.
Sum It Up
Adding hidden slider images to your Blogger posts is a useful trick to know. And it’s simple to do!