Some of you might be wondering why would anyone want to hide images from the post page but show them in the main page. Well, the reason is that, these images can be used to create TGPs - Thumbnail Gallery Post. The images will appear in the main page, but when the post page is viewed, the images won't be there anymore. Sort of a welcoming committee for a certain event, you see them early on, but they won't be involved in the actual event itself. You get the idea. Let's cut to the chase shall we?
Step 1:
If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -
If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed -
Find for </b:skin> - Paste the following code directly below </b:skin>
If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -
If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed -
Find for </b:skin> - Paste the following code directly below </b:skin>
<b:if cond="data:blog.pageType != "index"">
<style>
.ssmainhide{
display: none;
}
</style>
</b:if>
The code in place:
Step 2:
Go ahead and upload an image to your post. When you click on Edit HTML, the HTML portion of the image will look something like this:
The HTML for your image should look like this now:
Go ahead and upload an image to your post. When you click on Edit HTML, the HTML portion of the image will look something like this:
<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj14SoH8S9FHwouMmnmK52Gn5pbNaf_o1IGB9_6ZDm-_HjIRPB2OwAe4fQ7HXvW82Fs_kOqlbNrPT-KoOBnFmau3HlHTUDBvcNGr_qQlu1xVlzsk3ZjF_gXyce9VZyxUp1gnlf0VM3nutk/s1600/P1010367_edit.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj14SoH8S9FHwouMmnmK52Gn5pbNaf_o1IGB9_6ZDm-_HjIRPB2OwAe4fQ7HXvW82Fs_kOqlbNrPT-KoOBnFmau3HlHTUDBvcNGr_qQlu1xVlzsk3ZjF_gXyce9VZyxUp1gnlf0VM3nutk/s320/P1010367_edit.JPG" width="320" /></a></div>All you have to do now is, change the word 'separator' in the first line of the HTML, to 'ssmainhide'. You don't have to do this for all the images, just do this to the image that you want to hide from the post page.
The HTML for your image should look like this now:
<div class="ssmainhide" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj14SoH8S9FHwouMmnmK52Gn5pbNaf_o1IGB9_6ZDm-_HjIRPB2OwAe4fQ7HXvW82Fs_kOqlbNrPT-KoOBnFmau3HlHTUDBvcNGr_qQlu1xVlzsk3ZjF_gXyce9VZyxUp1gnlf0VM3nutk/s1600/P1010367_edit.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj14SoH8S9FHwouMmnmK52Gn5pbNaf_o1IGB9_6ZDm-_HjIRPB2OwAe4fQ7HXvW82Fs_kOqlbNrPT-KoOBnFmau3HlHTUDBvcNGr_qQlu1xVlzsk3ZjF_gXyce9VZyxUp1gnlf0VM3nutk/s320/P1010367_edit.JPG" width="320" /></a></div>
That will be all. The image that you have modified will appear in mainpage, but not on your post page. Cheers and God bless.
nice tutorial
ReplyDelete@M.A: Thanks. Enjoy your stay here. Cheers and God bless.
ReplyDeleteThanks so much for all your help with my blog the other day! When you have time I was wondering if you might take a look at the tables on this page: http://hisperfectpromises.blogspot.com/p/blogs.html . I can't figure out what is making some of the buttons raise up higher above the rest. (Mostly on the Thursday hop) TIA!
ReplyDeleteHi, been following this blog for a while and picked up a few tricks here so thanks but I'm a real amateur with HTML, wondered if there is a simple way to round off the corners on blog posts that you know ? Have looked at other sites but it seems very complicated and don't want to start playing around with it too much as worried I might mess it up.
ReplyDeleteCongrats on the TC btw :)
@dirtycowgirl: Well, I didn't bother to figure it out before this, until you asked. I have a working method in hands. Tested and fully functional. I've improvised the way to add them and stuffs, so it's simple enough to add. However, I'm kinda tied up at the moment. I will publish a post on this, probably by this weekend. Stay tuned. Cheers and God bless.
ReplyDeleteDo you know how to set a static page on homepage? I want to hide any blogpost from homepage. i want to set a link that will point to all my blogpost. thanks
ReplyDelete@Paid Critique: I have something close to what you're asking. Not exactly a static page on the homepage, per se. But you can use something similar with text gadget or HTML gadget. Let the tutorial do the talking:
ReplyDeleteBlogger Tips: Setting Up Homepage
If you have further questions (that is not related to the tutorial post on this page), please use the contact form. Cheers.
@Yoboy,
ReplyDeletethis is paid critique. thank hope i can understand very well the instruction.
i want to make something like this. --> http://www.test1.southernspeakers.net/
Paid Critique@mensitaly
@Paid Critique: Here's the tutorial you're looking for:
ReplyDeleteBlogger Tips: Setting Up Homepage
Cheers.
abolutely useful!!!! :D thank you very much!
ReplyDelete@raldical: No problem at all. Cheers.
ReplyDeleteHi! What about doing the reverse? i.e. I want the picture on the post but I don't want it on the main page. (Reason is: I want the 2nd picture in the post to show as the "welcome image," not the 1st pic.) Any thoughts?
ReplyDeleteThanks for what you do here! Very helpful!!
@Dietz: Use the following code in step 1:
ReplyDelete<b:if cond="data:blog.pageType != "item"">
<style>
.ssmainhide{
display: none;
}
</style>
</b:if>
Very useful, thx a lot for helping me with other stuffs also!
ReplyDeleteGreat work, cheers!
@Allentto: No problem at all. Happy to help, as always. Cheers and God bless.
ReplyDeleteThank you Very Much for this Post..
ReplyDeleteI wanted to display a different picture as a thumbnail to my blog and was struggling to find a way out.
But, today this post showed me a way!!
THANK YOU AGAIN
BTW, Is there any way to show some other picture (other than the first) as thumbnail?
@Aalunga: You can set any picture you want as the thumbnail - not necessarily the first. Just include the 'hiding code' for the picture that you'd want to keep out of your post page.
ReplyDeleteCheers.
@YoboY
ReplyDeleteThanks for the Reply..
But, How to do that?
@Aalunga: "I wanted to display a different picture as a thumbnail to my blog and was struggling to find a way out."
ReplyDeleteWhatever picture you want to display as your thumbnail, just go to Edit HTML mode, copy the HTML portion of that picture, and paste at the top of your blog. That will give you two copies of the same picture. One in your post, and another duplicate at the top of your page. Then perform Step 2 on that picture.
It goes without saying that the jump break, or better known as 'Read-More' break, should be in place. Or else your entire post will be visible on the front page, and it beats the entire purpose of having a thumbnail.
In Summary, to have any picture as your thumbnail:
1) First compose your post normally.
2) Include pictures to your post, again like how you'd always do.
3) Include the jump-break (Read more). Note that only the portion before the jump-break will be seen on the front page.
4) Switch to Edit HTML mode.
5) Now copy the HTML of the picture that you'd like to use as thumbnail, or feel free to use a picture that is not even in your post.
6) Paste that HTML portion anywhere before the 'read-more' code.
7) Perform Step 2 in the tutorial above to that HTML portion.
Thank you very much YoboY...
ReplyDelete@Aalunga: Don't mention it :)
ReplyDeleteAwesome!!! Very helpful, Thank you very much for posting!!! Na Nach!
ReplyDeleteThat's great :)
DeleteI just noticed that there is a very large space between the post with the hidden images and the next post. I tried everything in your article about reducing spaces between posts, nothing seems to work. This does not happen on any other post. only on the one with the hidden images. Do you have any idea why this might be and how I might be able to change it so as to appear normal? I have about 25 images hidden, I have reduced the images to about 5 or 6. It seemed to help but still way too large. I can't imagine what it might be.
DeleteCan I have a look at your blog?
DeleteThank you so much for your quick responce. Blessings. blog adress is: www.nanach.name please scroll down to see the image in the article "Yayin Hungari"
ReplyDeleteclick on image to see gallery view. I did a double take on this one. I hid the images from the main page and from the post itself. The reason that I did this is because I wanted to be able to view the gallery with a click on the image without having to display thumbnail views. Everything works wonderful so far except the mentioned issue.
The gap was because you had large line breaks between your images. The images itself are hidden, but the line breaks are not. I'm gonna give you a code to hide line breaks as well. But, you need to keep in mind that this code will remove line breaks from your others posts on the main page as well. You don't have any at the moment, but just so that you know:
DeleteThis is the code. Use this instead of the one I gave above:
<b:if cond="data:blog.pageType != "index"">
<style>
.ssmainhide{
display: none;
}
.post-body br{
display: none !important;
}
</style>
</b:if>
Cheers.
Thanks a million, works. In order for the line breaks to be hidden from both the main page and the post page I had to add the same code with a change ( with "item" instead of "index") the result is exactly what I wanted, I am very happy. All the best blessings.
ReplyDeleteThat's great :) Cheers..
DeleteHi Yoboy,
ReplyDeleteI have added auto post summary in my blog. While summarising the summary displays the term ".ssmainhide{ display: none; } " in each summary.
Is there any way to avoid that?
Hi Aalunga,
DeleteIf you've added auto summary, you won't be needing the tweak in this tutorial any longer, as most auto post summary plugin chooses a thumbnail by default. Besides, there isn't a way to let these two (auto post summary and the HTML tweak in this tutorial) to co-exist. You gotta remove on them.
Thank you....
ReplyDeleteI got the point!
Hi
ReplyDeleteThe trick is not working after blogger made the domain corrections (from .com to .country). {One among the reasons why I went for auto post summary}..
Is there any way to do the same?
Hi aalunga,
DeleteI don't quite get that. What trick isn't working again? If you're referring to the tweak in this post, can I have a look at any of your blog that has this tweak installed, without auto post summary?
Sorry..
DeleteI made a small error when pasting the code...
Now, I got what I wanted (Hide Summary and a Picture in Post Pages) by mixing your tweak with Auto Post Summary.
BTW, You are welcome to visit my site, which is in my mother tongue- Tamil:
http://aalunga.blogspot.com
I am a Tamil as well. Unfortunately, I can't read and write in Tamil. I can speak Malaysian street Tamil though. Valgaai Tamil!
DeleteHow to unhide images(there are images on main page , but no in posts) as I have blogger template where it hidden, can't figured it out...thanks
ReplyDeleteCan I have a look at your blog?
DeleteHello Yoga;
ReplyDeleteI'd like to ask if there's a way to show all thumbnails of the images of every post in Magazine view?
By default, it only shows a few and I'd like to see them all, at all times.
Is there any way to do that?
Replied
DeleteYou're most welcome! :)
ReplyDeletehi i want to start blogging but before that i have a question How do i add a small image with some text info under post title on my main page like other blogs and i want from visitor click the post title to see more info like images, links.... and of course i want to add different images for each new post titles like this blog www.theologetics.com/
ReplyDeleteHi there,
ReplyDeleteThe link you gave doesnt have the image under post title that you're describing. What am I missing? In any case, it doesnt sound like something that we can easily pull off. But if you've seen in other websites, there's probably some tutorial on it somewhere in the web.
Hello Yoga, thanks for the useful post. How about if I just want to hide the image caption and not the image itself in the main page but will display both the image and the caption in post page? The reason for this is that the caption became visible in the summary of the post in the main page and it takes the valuable space for other words. May you can help me with my dilemma, I am sure many bloggers would be helped if you write another post for this. Keep it up and happy blogging! :)
ReplyDeleteHi there,
DeleteIt sounds possible, but as for saving space from summary text, I'm afraid there are other players that you need to take into account. If your summary is done using external scripts, this will not work. Let me have a look at your blog. What's your blog's address?
I'm sure I'll find the answer by the time you read this but I figured I'd ask anyway so that maybe someone with similar issues can resolve it.
ReplyDeleteYou're information works, thank you so much, but on my homepage in the preview I see the following code: stLight.options({publisher: "ur-4a2e7b48-6ba3-ae68-ca57-c225b862b4d2", doNotHash: false, doNotCopy: false, hashAddressBar: false}); - See more at: http://purcival.blogspot.com/#sthash.TRRbeJaf.dpuf
and then my preview begins immediately after.
I'm working on it now, I'll let you know if anything changes.
That looks like some content from some third party script. Have you got it sorted?
DeleteThanks. It is working.
ReplyDeleteExcellent! :)
DeleteThanks,I was searching for this only
ReplyDeleteGlad you've found it :)
DeleteThis is really nice post works well and easy to configure...thanks for all info..
ReplyDeleteYou're most welcome..
Deletethanks 4 nice tutorial .
ReplyDeleteThank You brother =D ...
ReplyDeleteit doesn't work with my templates...
ReplyDeleteI see images appearing on both your homepage and post page.
ReplyDeleteHey Great tweak. But am interesting in doing around, hide the image in the main page and see it on the inside post page. Can you do that?
ReplyDeleteSee the word 'index' in Step 1? Replace it with 'item':
Deleteb:if cond="data:blog.pageType != "item""
when i try this its working but the background of my post became change ! from black it became yellow =( any helps how can i fixed it ? i want to use this without a problem on my template please help
ReplyDeleteplease check what happen to my post here http://nonstop-anime.blogspot.com/2015/01/the-chief-of-staff-of-revolutionary.html
ReplyDeleteand check to the other post thanks i hope you will help me
Now i get it! thanks for sharing! it is working now =)
ReplyDeletehttp://nonstop-anime.blogspot.com/2015/01/naruto-shippuuden-jump-super-anime-tour.html
Glad you got it sorted :)
Delete