Blogspot Blog HTML help: position and width of post area, sidebar and top widget are wrong [fixed]


#1

Hi! I recently tried to make my popular posts widget and my footer 100%, so they both cover the whole screen.I followed a tutorial on helpblogger (http://helplogger.blogspot.de/2014/08/blogger-header-footer-full-width.html). but after I was done, the sidebar and the main post area had shifted. As another result, the text in the post area is not as wide as the pictures anymore. It all looks a bit messed up. I did manage to make my footer 100% though, it did not work for the widget. And when I tried to move the popular posts widget, a scroll bar appeared at the bottom of my blog, as if the blog was wider than 100%, even though there’s nothing when you scrol to the right. The main problem though is how I can move the main post area and also the sidebar. Is there anyone who can tell me how to fix all this? I have tried a lot and nothing seems so work properly.I am a bit afraid to screw it up even more (but don’t worry, of course I have backups).

http://sparkandbark.blogspot.de/

Thank you so much, I would really appreciate any help! Malin


#2

@Malin_Rouge

Fixes

1. For Popular Post Widget

Find CSS Code .PopularPosts .widget-content {margin-top:0px; margin-left:0px; margin-right:-30px;} in your template.

Replace it with .PopularPosts .widget-content {margin-top:0px; margin-left:0px; margin-right:-30px;max-width: 100%;}

2. For Main And Sidebar area

I do not get you. What do you want ? Be specific…


#3

Hey! Thank you for your help. It’s nice that you took time to have a look :slight_smile: I have fixed most of my problems by now. The only thing now is that there is a scrol bar at the bottom, so you can scroll a bit to the right, even though there is nothing there. That happened, when I put the footer on 100%. Do you know how to fix this? Thank you so much for your help!

Best, Malin


#4

@Malin_Rouge

Glad to help you.

Just find this in your Template

body {background:#ffffff none repeat scroll top left;color:#000000;font:normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;padding: 0px;border-bottom: 8px solid #e3e3e3;margin-bottom:-1000px!important;}

add overflow-x: hidden; property after body {

Please Note that i have found some serious problems in your template CSS.

The CSS Style Sheet have invalid properties.

For E.g. padding: 0px;;

         `_background-image: none;`

          --min-height :

Have you complete it ?

Let me know


#5

Oh wow, that really worked and it was so easy! I asked in several forums already and nobody knew how to fix it. Thank you so much :slight_smile: I checked my template and removed two “_” but I think everything looks as it should now, so that’s no problem? And since you seem to be someone who REALLY understands HTML: Maybe you have an idea why the comment count doesn’t show on my homepage below each post? It should say something like “10 comments” below every “Read more” button. I am using Disqus and the comment count disappeared after i got a new template. I tried a few tutorials and asked in a few forums, but nothing helped and nobody knew how to fix it. The Etsy seller ignores me anyway haha. Not very nice. I know this isn’t the original topic, but it’s the only thing I would like to change in my blog design, I already gave up on it and since you seem to know a lot, I thought I might just ask :slight_smile: But even if you don’t know or don’t have time to help me further: Thank you a lot for your help!

Best, Malin


#6

@Malin_Rouge

It may be little bit technical to add DISQUS Comment Counter below Read More Link. But i will tell you, how to do that.

  1. Search For </head>

  2. Add script given below just before </head>

@Malin_Rouge - In above script, replace syncboost with your disqus site username.

  • Now Find <div class="post-footer"> and paste <a expr:href="data:post.url + &quot;#disqus_thread&quot;">Comments</a> just After It.

May Hope this works for you. If not worked, then you have to send your blog template to me to look into real matter.

Tip - You should update your theme ASAP. Since It has many viewer experience problems.

Thanks, If you need any other help. Then, you can send Private Message to me via this forum.


#7

Okay thank you for the help :smile: It’s just that this code already exists in my template, I think even several times! I tried adding it as you suggested anyway, but nothing happened. Weird thing is: If i load my blog sparkandbark.com the comment count appears for one second, then it’s gone again haha! My disqus name is sparkandbark for sure, so that can’t be the problem. I tried to upload my blog template as xml for you to see but I can’t upload it here because they don’t let me upload this format…It’s so nice that you want to have a look at it, but I have no idea how to send it. Oh and are there so many viewer experience problems? Looks pretty normal in my browser.


#8

@Malin_Rouge

I have send you a message about how to send template to me. Just check your inbox in this forum.

Of course,Tell me, which browser you are using so that i will tell the exact problem to you. I have just check your site in Firefox, Chrome and IE.

Here are some other invalid properties included in your template.

-- min-width: 850px !important;
--_width: 850px !important;
--min-width: none !important;
.content-fauxcolumn-outer {--width:100% !important;}
.region-inner {--width:100% !important;}
.content-inner {--padding:0px !important;}
--min-width: 1140px;
--padding-left: 0px;
--padding-right: 310px;
--right: 310px;
_width: expression(this.parentNode.offsetWidth -
--width: 300px;
--width: 310px;
--margin-right: -310px;
-- max-width: 850px !important;

Correct these properties Line by line in your template.

One more favour require from your side. If all of your problems have been solved except Disqus comment system. Then, Rename this post title by adding [fixed] at the end. So that, It can be closed.

For Your Disqus Comment System Problem, It is better to create a new Topic in this forum.

Bests,

Robin Singh


#9

Hey Robin,

when I correct those values it messes up my footer and even though the values are “not correct” everything looks just fine? I am using Chrome and have checked my blog in IE previously, but it looks how I want it to look like. The Disqus comments are the only problem :frowning: And yes sure, I will reply in a minute and rename this topic :slight_smile:

Best, Malin