Jul 22, 2012

Header Customization - Remove extra space on Blogger header

39 comments
I also often see bloggers unhappy with the header spacing. Either there's too much empty space, the header doesn't line up how they'd like or something else is bothersome. In this article I explain which styles give the most control over header spacing and show how to override them to your liking.

New Blogger templates include a large amount of empty space. This is the result of a few pesky styles tucked away in a style-sheet included at run time. These styles aren't visible in Edit HTML and it's easy to miss where exactly the problem is coming from. 

The below five styles come from the style-sheet I mentioned or in the template:

.header-inner .widget{margin-left:30px;margin-right:30px}
.Header h1{margin-bottom:10px}
.header-inner .Header .titlewrapper { padding: 22px $(header.padding); }
.header-inner .Header .descriptionwrapper { padding: 0 $(header.padding); } 
.Header .description{margin:.5em 0 10px;padding:0 2px} 


Overriding these five styles has a big impact on a blogs header. The easiest thing to do is copy those styles, then paste them into the Design->Template Designer ->Advanced->Add CSS box. Alter the numbers to find the desired look. For example if all values are set to zero like this: 

.header-inner .widget{margin-left:0px;margin-right:0px}
.Header h1{margin-bottom:0px}
.header-inner .Header .titlewrapper { padding: 0px 0px; }
.header-inner .Header .descriptionwrapper { padding: 0 0px; } 
.Header .description{margin:0em 0 0px;padding:0 0px} 

The difference is massive, just look at the before and after screen shots from my test blog. The same information takes up about half as much room with the styles overridden. These are the two extremes, adjust the numbers to find what works for your design.


Summary
Overriding these five styles has a large impact on the look of a blogs header. It's easy to do and requires very little HTML knowledge to do thanks to the new template designer. Just copy the lines I've shown and play with the numbers until you find the look that fits.

If you feel this is helpful or you like it, Please share this using share buttons available on page.

39 comments :

  1. Oh my freaking gosh thank you thank you thank you thank you!! I have been searching for css codes online for 3 hours, testing them to see if they would work on blogger, but none of them did....until yours! Now the header doesn't have a huge space under it! http://chantelslittlebitsofsunshine.blogspot.com/

    ReplyDelete
  2. Okay - I'm losing my mind over something! I tried your code above and it didn't work for my particular issue. I have a small gap between my header and the content. Any idea how to get rid of if? I entered a code to decrease the line spacing (which worked), but that affected all of my blogger widgets. I know there has got to be a way to fix it, but I can't find the solution! Thanks in advance for any help you can provide! :) Here is my site: http://heerenshappenings2.blogspot.com/

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. awesome superb............ i succeed by doing this to my blogger
    www.freshersjobsaadda.blogspot.com

    ReplyDelete
  5. Thank you :)
    http://www.technologyeduc.com/

    ReplyDelete
  6. I don't believe it--I played around with various CSS parameters for 2 days, adding umpteen of them before giving up & reverting to my original template.

    Then I come across your simple, straightforward sample code--insert it and it's perfect. Thanks so much!!

    ReplyDelete
  7. Great tip, thanks, saved me a lot of puzzling: http://justintuijl.blogspot.co.uk/2016/03/header-customization-for-google-blogger.html

    ReplyDelete
  8. Thank you for giving very helpful Tips
    Manoj kumar
    www.newskkt.com

    ReplyDelete
  9. اليك خدمات منزلية متقدمة تساعدنا علي الارتقاء بشركة ركن البيت في مدينة الدمام من خلال اعمالها المتميزة التي تقدمها في مجال النظافة والقضاء علي الحشرات فخدماتنا متنوعة مثل شركة تنظيف بالدمام التي تكون متخصصة في اعمال النظافة العامة التي تتمثل في المنشأت الكبيرة والصغيرة بجميع انواع واليك خدمة متميزة ايضا وهي شركة تنظيف فلل بالدمام التي تكون لديها كل الامكانيات المثالية التي تساعدنا في تنفيذ خدمات نظافة الفلل المستعملة والمفروشة بواسطة فريق فني لديه كل الامكانيات التي تساعده في تقديم ذلك ولديك خدمة ايضا نظافة الشقق بواسطة شركة تنظيف شقق بالدمام وعمل التنظيف اللازم لها بواسطة فريق لديه اعمال التميز والتنفيذ في تقديم الخدمات المخصصة في اعمال النظافة واليك خدمة مثالية نقدمها في القضاء علي الحشرات الصغيرة بواسطة مبيدات طبيعة تساعدنا في ذلك فتعاملك مع شركة مكافحة حشرات بالدمام لديها امكانيات متميزة تساعدك علي ان تخلصك من الحشرات لان تجد كل ذلك الا من خلال ركن البيت التي لديها كل الامكانيات في البحث عن شركة رش مبيدات بالدمام التي تقوم بالرش بواسطة فني مختص معه الادوات اللازمة للقيام بذلك وعطائك الضمانات اللازمة علي ذلك واليك خدمة نقل اثاث منزلية تساعدك في الوصول الي مكانك الجديد بواسطة شركة نقل اثاث بالدمام التي لديها كل الامكانيات والسيارات التي تساعدك علي تحقيق ذلك

    ReplyDelete
  10. This content creates a new hope and inspiration with in me. Thanks for sharing article like this. The way you have stated everything above is quite awesome. Keep blogging like this. School website design uk

    ReplyDelete
  11. .NET Framework (pronounced dot net) is a software framework developed by Microsoft that runs primarily on Microsoft Windows. It includes a large class library named Framework Class Library (FCL) and provides language interoperability (each language can use code written in other languages) across several programming languages. Programs written for .NET Framework execute in a software environment (in contrast to a hardware environment) named Common Language Runtime (CLR), an application virtual machine that provides services such as security, memory management, and exception handling. (As such, computer code written using .NET Framework is called "managed code".) FCL and CLR together constitute .NET Framework. More Info: Dot Net Training in Chennai

    ReplyDelete
  12. Learn Dot Net Training in Chennai at Credo Systemz. Training offered by MNC Experts. Rated as Best .Net Training Institute in Chennai. Learn C# & ASP.Net Course with 100% Placement.

    .NET Framework developed by Microsoft is an integral part for most of the primary applications running on Windows. .NET with its consistent and comprehensive programming model, created a technological revolution in recent years. Applications built using .NET has the capability to entice the user with visually stunning experiences along with faultless and secured communication system.

    Top 10 Dot Net Training Institute in Chennai

    ReplyDelete
  13. http://www.aspdotnetchamp.com/2011/11/main-components-of-net-framework.html

    ReplyDelete
  14. شركة من اكبر الشركات الامنية في مصر علي اعلي مستوي من التميز استمتع معنا بافضل الخدمات المتقدمة من شركة الحارس الخاص في مصر شركة حراسات خاصة علي اعلي جودة وتقدم في العمل علي اعلي مستوي من التميز شركة امنية سوف تقدم اليكم كافة الخدمات المتميزه والعالمية بيد متخصصين في الحراسة .

    ReplyDelete

  15. افضل شركة في المملكة العربية السعودية علي اعلي مستوي من التقدم في العمل استمتع بكافة الخدمات المتميزه في المملكة شركة العنود من كبري الشركات المتميزة والعالمية في مجال تنظيف خزانات بمكة علي اعلي مستوي من التميز استمتع بكافة الخدمات التي تقدمها اليكم العامالة علي اعلي مستوي شركة تنظيف خزانات بمكة باقل الاسعار .

    ReplyDelete
  16. شركة الاخلاص والامان سوف تستمتع بالكثير من الخدمات المتميزه علي اعلي مستوي استمتع بالكثير من الخدمات مع نقل اثاث الطائف الان في المملكة العربية السعودية نقل الاثاث من خلال عربات مجهزة من الداخل علي اعلي مستوي من التميز نقل عفش الطائف بافضل الخدمات المتميزه .

    ReplyDelete
  17. تريد ان تحصل علي صيانة كريازي مجانا لجميع اجهزتك مراكز العالمية توفر الان مختصين في صيانة جورندنج و كريازي في جميع المدن والمراكز وتقوم بتنظيم حمله تجول جميع المناطق لكي يتم صيانة جميع اجهزة جروندنج و كريازي

    ReplyDelete
  18. خدمات متطورة وحديثة في اعمال الصيانة علي اعلي جودة في مصر افضل الخدمات المتميزه والمتطورة صيانة جليم جازالتي تقدم كافة الاعمال المتميزه في تصليح الاعطال علي اعلي جودة في مصر استمتع بكافة الخدمات المتميزه .

    ReplyDelete
  19. اقل سعر افضل خدمة حملات صيانة مجانية في مصر استمتع بكافة الخدمات المتميزه والمتطورة لدي دليل الصيانات الشامل في مصر صيانة يونيون اير التي وخدمات التصليح داخل المنازل علي اعلي مستوي صيانة بيكوالمعتمدة في جمهورية مصر العربية .

    ReplyDelete
  20. صيانة الاجهزة الكهربائية علي اعلي جودة في مصر استمتع باقوي العروض شركة وايت ويل المعتمدة في كافة الخدمات المتميزه والمتطورة والعالمية لدي صيانة وايت ويل سوف تستمتع بكافة اعمال الصيانة بيد محترفين
    .

    ReplyDelete
  21. فريق عمل صيانه يونيفرسال لديه الخبره التي تؤهله للتعامل مع جميع الاعطال الموجوده بالاجهزه الكهربائية المنزلية بكل كفائه وخبرة وباقل الاسعار .

    ReplyDelete
  22. لخدمات الصيانه المتخصصة توجههوا الى مراكز
    صيانه سوني
    و صيانه جليم جاز
    او اتصل بنا على الخط الساخن طوال 24 ساعة نتميز بسرعة وجودة اداء الخدمة الموقع الالكتروني:
    http://www.maintenanceg.com/Sony-Agent-Service-Company.html


    http://www.maintenanceg.com/Glemgaz-Agent-Center-Egypt.html

    ReplyDelete
  23. تعتبر صيانه يونيون اير الاولي عالميا في مجال صيانة وصناعه جميع انواع الاجهزه الكهربائية المنزلية والتي تتم في مصانع عالمية تقوم بتوفير افضل الاساليب الخاصه بها وتوفير قطع الغيار اللازمه لذلك .

    ReplyDelete
  24. اكبر مراكز صيانة ويرلبول يقدم خدمات الصيانه الفورية والمجانية من خلال فريق العمل المتنقل الموقع الالكتروني
    https://www.almyaa.com/Whirlpool-Maintenance/

    ReplyDelete
  25. خدمات متنوعه ومتميزه من اكبر الشركات في مصر والتي تقدم افضل الانواع من الاجهزه الكهربائية المنزلية بالاضافه الي ضمان من صيانة كاريير علي تقديم افضل الخدمات علي مدار ال 24 ساعة لخدمة جميع العملاء .

    ReplyDelete
  26. تعرف علي اساليب متنوعه من شركة اسفلت التي تعمل علي تنفيذ مشروعات متخصصه في مقاولات عامة تتم علي ايدي مجموعه من اهم مهندسيين المملكة العربية السعودية الان .

    ReplyDelete
  27. احصل علي افضل الخدمات من شركات ابادة الحشرات في مصر والتي توفرها اكبر شركة في مصر الشركة الفرنسية والتي اصبحت لديها علامات الجوده والكفائه في ابادة حشرات الموجوده بالمطاعم والمنازل والمستشفيات لانها متخصصه في تلك المهام ويمكنك التعرف علي اسعار شركات مكافحة الحشرات في مصر عند التواصل معنا .

    ReplyDelete
  28. الصيانه الحديثة والمتطورة في
    صيانة كريازي لان الصيانه السليمة يجب ان تتم على ايدي متخصصين الموقع الالكتروني:
    http://www.kiriazi-maintenance.com/

    ReplyDelete
  29. شركة اسفلت اكبر شركة متخصصه في مجال سفلته طرق حيث نستخدم اقوي انواع الاسفلت حتي لا يحدث اي تشققات في الطرق حيث نستخدم اجود انواع الطوب والزفت حتي يكون عازلا للحراره ولا يتأثر بالحراره سواء مرتفعه او منخفضه في الفصول المختلفه وحتي لا يحدث اي تلفيات في الطرق.

    ReplyDelete
  30. نقوم في صيانة يونيفرسال بتقديم افضل واعلي قطع الغيار جودة والتي تصلح لجميع الاجهزة الكهربائية في جميع البيوت المصريه علي اختلاف انواعها واصداراتها وتعمل علي افضل شكل.

    ReplyDelete
  31. نقوم بعمل صيانة مجانيه لجميع الاجهزة الكهربائية في منازكم الخاصه من خلال مهندسين صيانة وايت ويل في جميع انحاء جمهورية مصر العربية وايضا تواصلوا معنا من اي رقم تليفون في جميع انحاء جمهورية مصر العربية علي اعلي مستوي من خلال صيانة وايت وستنجهاوس في مصر.

    ReplyDelete
  32. نقدم لكم افضل قطع الغيار المصنعه في مصانعنا فقط من خلال صيانة يونيون اير افضل خدمت الصيانة في جميع انحاء مصر والتي تستطيعون ان تتواصلوا معها من اي مكان في جمهورية مصر العربية.

    ReplyDelete
  33. الان من خلال افضل شركة مكافحة الحشرات تستطيع ان تحصل علي اقوي خدمة لابادة مكافحة البق والصراصير علي اعلي مستوي من خلال افضل شركات ابادة الحشرات في جمهورية مصر العربية.

    ReplyDelete