Advertisement:

How To Remove Border Around Images In Blogger Posts

Discussion in 'PC Tricks, Tutorials, Softwares And Solutions' started by FestoEmpire, Jul 25, 2017.

Users Viewing Thread (Users: 0, Guests: 0)

    FestoEmpire Member

    Member Since:
    Jan 27, 2016
    Message Count:
    3
    Likes Received:
    0
    Current Phone:
    +2348037343364
    Sponsored Links:
    [IMG]
    Have you ever wondered why every image in your blogger posts is surrounded with shadows and borders? Here is the reason. By default, blogger shows border and shadow around images or photos in blog posts. If you you find this annoying and wants to get rid of them, just follow my guide below to get it done.



    see the difference in the screenshot below:

    [IMG]

    FollowThe Steps Below

    Method One:
    ==> Go to your blogger Dashboard
    ==>Theme > Customize > Advanced > Add CSS
    ==> Copy and paste the code below inside
    ==> Click Apply to Blog.

    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
    .BlogList .item-thumbnail img {
    padding: 0 !important;
    border: none !important;
    background: none !important;
    -moz-box-shadow: 0px 0px 0px transparent !important;
    -webkit-box-shadow: 0px 0px 0px transparent !important;
    box-shadow: 0px 0px 0px transparent !important;
    }
    [IMG]
    After applying the above code, your blogger images will no longer appear with border and shadows around them.

    Note: If the above method doesn't work for you, follow method Two below:

    ALSO READ:
    How to center blogger top navigation pages using css code



    Method Two:
    ==> Go to Blogger's Dashboard > Theme > Edit HTML
    ==> Backup your template so you can reverse back if you make any mistake
    ==> Click anywhere on the code area and search for the code below by pressing CTRL + F
    border: 1px solid $(image.border.color);
    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    Note: if you can't find the entire code, then try to find this line and the rest of it should appear:
    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    Then, carefully delete the entire code and Save your template.
    Cheers!

Sponsored Links:

Sponsored Links:

Share This Page