How To Remove The Background Blurred Image On Post Pages Of Emporio Theme

If you are using Emporio blogger theme, you will see that when you click on a post, there is usually a blurred background image at the top. If you will like to remove it or hide it, this post will show you how to do so.

There are two methods of doing so. One is by deleting the codes inside of the Emporio theme responsible for the blurred image. The second method is to add  CSS code to hide the blurred background image.

Let proceed with the first method

==> Sign into your blogger dashboard at blogger.com.

==> Go to Theme > Edit HTML.

==> Look for the following codes and delete them.

<b:if cond='data:view.isSingleItem'>
            <b:if cond='data:widgets.Blog.first.posts.first.featuredImage'>
              <b:include data='{                                  image: data:widgets.Blog.first.posts.first.featuredImage,                                  selector: &quot;.bg-photo&quot;                                }' name='responsiveImageStyle'/>
              <div class='bg-photo-container'>
                <div class='bg-photo'/>
              </div>
            </b:if>
          </b:if>


==> Click Save Theme.

That's all.


The second method

==> Sign into your blogger dashboard at blogger.com.
Go to Theme > Edit HTML.

==> Search for this code ]]> </b:skin>

==> Add the following codes below it:

<style type='text/css'>
.bg-photo {display:none !important;}
</style>

==> Click Save Theme.

That's all

Now let me explain some things here. When you delete the codes from inside the theme you will be able to add a gadget at the top sidebar. 


If you choose to only hide the blurred background photo, your first gadget on the sidebar will not be at the top, parallel to the post title. There will be a free space.


I know most users of the Emporio blogger theme will want to remove the background photo that always appears when a post is viewed.  If you tried these methods, and it worked for you, do share with others by using the social media buttons.

Happy blogging.
Sharing is caring

Join My Subscribers Today and Receive Updates by Email

Comments

  1. You are the best Sir..... was looking for a solution for a while now, but I realized.. The background image just beautifies my Blog.... Thanks..

    ReplyDelete
  2. I got attention for this good articles

    ReplyDelete
  3. Little wonder why the Emporio sidebar gadget didn't start at the top!
    Great share as usual Mazino!

    ReplyDelete
    Replies
    1. I can see that yours is now at the top.

      Delete
  4. Mazino, i hid mine in the CSS area of the theme customization with this code .bg-photo {display:none;} and the top sidebar is blank.

    How will i now find the code and remove it, because i searched but couldn't find it.

    ReplyDelete
    Replies
    1. Search for this
      Then make sure the other codes are below it. Then delete.

      Delete
  5. I believe that blurred background photo is called a Lightbox. And that can easily be removed in Settings.

    www.nerdy.com.ng

    ReplyDelete
  6. Thanks mazino. I just successfully removed the blur image on my blog. This article was freaking help. Thanks man.

    ReplyDelete
  7. Thanks for your awesome and easy solution

    ReplyDelete
  8. just one suggestion you can use css box for codes

    ReplyDelete

Post a Comment

Comments with spammy links will not be published. If you have questions unrelated to this post, use the contact page.