Skip to main content

Hide Blogger Image from Post Page but not from Main Page


Hide Blogger Image from Post Page but not from Main Page


blog

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?

two

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>

  1. <b:if cond="data:blog.pageType != &quot;index&quot;">




  1. <style>


  1. .ssmainhide{

  1. display: none;

  1. }

  1. </style>

  1. </b:if>




The code in place:

code

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:


<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/--kt.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://2.bp.blogspot.com/--kt.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="http://2.bp.blogspot.com/--kt.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://2.bp.blogspot.com/--kt.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.

Comments

Popular posts from this blog

How To Put Adfly Full Page Script In Blogger Blog

How To Put Adfly Full Page Script In Blogger Blog Get paid to share your links! If you have a website and wish to earn money when a visitor simply enters your site, please use the following script.Adfly Full Page  If you have a website with 100's or 1000's of links you want to change over to adf.ly then please use the script below. Simply copy-and-paste the code below on to your webpage or blog and the links will be updated automatically - simple! You can add or remove any domains for the code that you use or your website. <script type="text/javascript">      var adfly_id = 4305280;      var adfly_advert = 'int';      var domains = ['depositfiles.com', 'rapidshare.com', 'vip-file.com', 'smsfiles.ru', '4files.net', 'turbobit.ru', 'uploading.com', 'letitbit.net', 'depositfiles.ru', 'sms4file.com', 'ifolder.ru', 'hotfile.c...

Make Blog Background to Matrix animation

Make Background to Matrix animation How to Change Blog Background in Blogger How to Change Blog Background Become Matrix Style. Have you watch Matrix? I think you have. Because Matrix is a big movie. Even this movie can enter into Box Office and earned $742,128,461! Amazing! So, if you like Matrix, by learn this trick, you can try to change your blog background become Matrix style. Interseted? Just follow the steps below. 1. Log in to your blogger account 2. Go to Design --> Page Elements --> Add Gadget 3. Choose "HTML/Java Script" 4. Add the code below <a href="http://dailybloggiingtips.blogspot.com/" target="_blank">Matrix</a> <style type="text/css"> <!-- body { background-color: #000; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrQKrhyphenhyphenhrs4fpr5-_esUekV-sWIB9a9-zJ9lxSg0Voylft-vKpL_rrlb9b8L6ckwyFoUryku0E90d9cJybIG4-uopJW50UpEYkyWihitFItDrg...

How to Create Apple Touch Icon Of Your Website Or Blogger

How to Create Apple Touch Icon Of Your Website For Ipod Touch , Iphone And Iphone What is Apple Touch Icon  During web surfing  online with an Apple mobile device (iPod Touch, iPad, and iPhone), users have the option of saving web pages directly to their home screen. When a page is saved, an icon is generated to which users may use to access said page without having to launch their browser. As more and more people browse the web with their iOS devices, adding a simple icon to your site helps with branding and looks great making sure your brand is well represented on the iPhone, iPod touch and iPad. Apple Touch Icon is basically  like a favicon of a website.  Similar to the Favicon, the apple-touch-icon.png is a file used for a web page icon on the Apple iPhone, iPod Touch, and iPad. When someone bookmarks your web page or adds your web page to their home screen this icon is used. If this file is not found these Apple products will use the screen shot of t...