12 {{ upvoteCount | shortNum }}
12 {{ upvoteCount | shortNum }}

How To Reduce Blogger Image Header

by kertoon
9 replies
  • WEB DESIGN
    • |
I am using the Simple Theme and load a bigger dimension image for the header. Now I want to reduce it smaller with CSS.

Using the Inspect Element, I tried to reduce it 500px width and it works, but I have problem getting it to work on the Blogger.

I tried various CSS versions, but still stuck.

From the Inspect Element, it is:
#header-inner img {
margin: 0 auto !important;
width: 500px;
height: auto;
}
#blogger #header #image #reduce
Avatar of Unregistered
  • Profile picture of the author jimmy adam
    Hello kertoon I'm searching for this pattern please follow up.
    1.If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) - Check the box next to 'Expand Widget Templates'

    If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed - Check the box next to 'Expand Widget Templates'

    2.Find for the following lines: (Press Ctrl + F to get a search box)


    <img expr:alt='data:title' expr:height='data:height'
    expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl'
    expr:width='data:width' style='display: block'/>

    3.Replace the above lines with the one I have below.


    <img expr:alt='data:title' expr:height='data:height'
    expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl'
    expr:width='data:width' style='display:block; height:auto; width:100%;'/>

    3.All you have to do now is adjust the width from 100% to some other number. To increase it, you can go beyond this number. 200% for example, though your image will become pixelated.

    4. Done
    {{ DiscussionBoard.errors[11540547].message }}
    • Profile picture of the author kertoon
      Jimmy,
      As for your suggestion, the image size in the mobile is not responsive. It appears small.


      In order to have a crispy and clear picture, I upload a 500px wide image, then I set the width to 300px to the code as you suggested.



      It is responsive and the only downside is I cannot have a bigger image header for the blog.


      That was I was trying to do. Upload a 800px wide image, then use the CSS to tweak it.


      But I have problem getting the image to reduce to the width 500px. I have tried various code such as header-inner img, Header1_headerimg, etc.



      Still not working.
      {{ DiscussionBoard.errors[11540824].message }}
  • Profile picture of the author MdJahidShah
    Go to Dashboard - Design - Edit HTML.

    Then press Ctrl +F, here will see a search box. Now search writes your "#header-inner img". When you find it, then change the width and height. And click "Save-Change".
    {{ DiscussionBoard.errors[11540687].message }}
    • Profile picture of the author kertoon
      Cannot find such line or code in the Simple Theme.
      {{ DiscussionBoard.errors[11540817].message }}
      • Profile picture of the author MdJahidShah
        then visit your site by morzila fire fox and the click on mouse right button go "inspect" then find the div which is contained the picture. Then edit code
        {{ DiscussionBoard.errors[11540945].message }}
  • Profile picture of the author albertocosta
    To ensure that the images in the theme applied to your site are of the best possible quality, these images are stored in a special storage space, which you can not access from the manager (and which is not discounted from your storage quota).

    It is therefore not possible to change the size of these images once you have downloaded them to the manager, in the theme appearance customization page ( Settings> Appearance> Customize ).
    {{ DiscussionBoard.errors[11540768].message }}
    • Profile picture of the author kertoon
      Abertocosta, actually it can be done.
      {{ DiscussionBoard.errors[11540816].message }}
  • Profile picture of the author Surbhi Mane
    Click "Layout" under the Blogger Template Designer and locate your blog header on the template layout below. Click "Edit" in the header layout. Upload the picture from your computer by selecting the "From your computer" radio button under the Image section and entering in the location on your PC.
    {{ DiscussionBoard.errors[11540803].message }}
  • Profile picture of the author sftslab
    Through blogger settings you can change the image header.
    {{ DiscussionBoard.errors[11545635].message }}
Avatar of Unregistered

Trending Topics