Ads Top

Show Blogger Image only in Homepage and Hide it in Post Page


To hide images/pictures from blogger posts and make them appear only in homepage, we will add just a small piece of CSS code in our template and then use the class "hidepic" each time we want to hide an image.

Just follow the next steps:

Step 1. Go to Dashboard - Template - Edit HTML


 Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box:

 Step 3. Type or paste this code inside the search box then hit Enter to find it:
]]></b:skin>
Step 4. Paste the following code just below it
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style>
.hidepic{
display: none;
}
</style>
</b:if>
Step 5. Save the Template.

Now, each time you create a post, first add the picture that you want to hide and then switch to the HTML tab where you'll see the HTML code of the image that you added - it will look something like this:
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-shsd_c51zRA/T6UeoPgcbII/AAAAAAAACCc/sYI6WB22CaM/s1600/fire_bird_by_fhrankee-d32af8v.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-shsd_c51zRA/T6UeoPgcbII/AAAAAAAACCc/sYI6WB22CaM/s320/fire_bird_by_fhrankee-d32af8v.png" width="320" /></a></div>

Note: it should be at the exact location where your image has been added 
(if the image is at the middle of the text, then the code should be found at the middle)

Step 6. Replace "separator" with "hidepic" - see the screenshot below:

If you need more help, please leave a comment below.

No comments:

Categories

adsense adsense optimization adsense tips Animation Announcement Apps Background backlinks Basic blog Blog Design blogger Blogger Design Blogger Hack blogger pages blogger posts Blogger Security Blogger Special Tricks Blogger Templates Blogger Tips Blogger Tips & Tricks Blogger tools blogger tricks Blogger Widgets Blogger Widgets and plugins Blogging Basic Tips Blogging ethics Blogging tips Blogging Tools Blogging Tricks Btemplates 2013 Btemplates 2014 Bugs and Errors click bombing Comments css CSS and HTMLTricks CSS3 Cursors custom domain Design Drop Down Menu Earning Tips Editing emoticons Events Facebook Facebook tricks Featured Content Slider firebug Flash Free Coupons Free Recharge Gadget Generator Google Google AdSense Google Analytics Google Plus Google Plus Tricks Guest Posts Horizontal Menu How To HowTo Tuts HTML Image Image Effects Increase traffic instagram Interesting invalid clicks Java Script javascript jQuery Label labels Link Building Links LOGO Makers Make Money Make Money Online Marketing Menu bar menus Menus for Blogger Multi Tabbed Navigation navigation menu News Numbered Page Optimizing Other Tricks Page Photoshop Pop Out popular posts Post posts presentations Pure CSS Menu recent comments recent posts related posts Responsive Blogger Templates robots Rss Search box SEO SEO Strategy SEO Tips & Tricks sitemap Slide Show slideshows Social Media social media plugins statcounter static pages Style your Blog swf Tab Menu Template Template Designing Template Tricks Templates templates 2016 threaded comments Tips tools Traffic Tips Twitter Unlock modems Vertical bar Video Wallpapers Web Designing web hosting Webmaster Tools Widget Widget Generators Widgets wordpress WordPress Plugins WordPress Themes WordPress Tricks WP Tips
Powered by Blogger.