Apply different layout/styling to static pages

by Greenlava

Finally Blogger has come up with the much awaited static pages feature. Blogger simply refer to them as Pages. You can create up to 10 static pages, perfect for your About Me and Contact pages.

However, a Page will look just like homepage or any other page. Would it be nice if you can change the layout, making them look more like pages and less like posts? Maybe you want the sidebar or footer removed? Well good news, you can. Look at a sample Page here, compare it with the homepage, and notice the difference. The same goes to my SEO Tools, FAQs and Support pages.

Okay let’s start with the tutorial,

 

I. Applying the conditional styling

  1. Go Dashboard > Design > Edit HTML.
  2. Back up your template.
  3. Find this code in your template HTML:
    • <body> -if you are using Layout templates, or
    • <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> -if you are using Designer template.
  4. Copy the code below and paste it right after the code step 3: 

    <!-- Static page styling Start-->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
.blog-pager, .footer, .post-footer, .feed-links, .sidebar { display:none !important;}
#main-wrapper {width: 95%; float:none; margin: 0 auto !important;}
</style>
</b:if>
<!-- http://www.bloggersentral.com -->
<!-- Static page styling End -->

    For Designer template, replace code line 5 with: 

    .main-inner .columns {width: 100%;padding-left:0 !important;padding-right:0 !important;}
  5. What goes into the <style>…</style> tags are CSS rules. It depends on what we are trying to change and differs between templates. In the code above, we
    • Remove blog pager, blog footer, post footer, feed links and sidebar. This is done in code line 4.
    • Widen the post area to fill up the spaces vacated by the sidebars. This is done in code line 5. If you want to do this too, find out what’s your header’s or header-wrapper’s width and apply it here.

II. Identifying and adding your own elements to the code

Your elements’ Ids and classes maybe different from the ones given in the code above. You can find yours by going through your template code. To get an idea what to look for, here’s a sample code snippet, taken from Blogger Sentral’s template:

<div class='side-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='HTML4' locked='false' title='Popular Posts' type='HTML'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

As you can see an element, be it a division, a section or a widget is assigned an ID and/or a class. To remove it from the Page, simply add the ID or class to the selector list in code line 4 in step 4. For an ID you need to add “#” prefix and for a class, add “.” as prefix.

Update: There is an easier method of finding Blogger widget and section Id’s.

For example, if you want to remove the “Popular Posts” widget, all you have to do is add #HTML4 to the selector list; To remove the the whole lower left sidebar (which holds the Popular Posts and Labels widgets), add #sidebar2 to the list.

 

III. Styling pages individually

(added Oct. 2010)

Using the static_page conditional tag as explained above will apply the styling on all static pages. Now what if you want to style only one page. Let’s say for instance you want to change the background color of your About Me page to pale green, while leaving all other pages as they are. Can you do that?

Yes you can, and it’s easier than you might think.

  1. Go to Postings > Edit Pages and select the About Me page.
  2. Switch to HTML mode.
  3. Insert you CSS code on top of the page content, like so: 
    <style type="text/css">
.content-inner {background-color: palegreen;}
</style>

YOUR STATIC PAGE CONTENT HERE
  4. Yes, you don’t need any conditional tag. This code only resides inside that one page, therefore it won’t affect other pages.

Enjoy!

Subscribe to our blog via email or RSS to receive free future updates.


Update 26 Oct 2010
Add Styling Pages Individually.

351 comments to "Apply different layout/styling to static pages"

«Oldest ‹Older 1 – 200 of 351 Newer› Newest»
Neno Wasian,  February 12, 2010 at 1:36 PM    

i use static page in http://beranitahu.blogspot.com/ but, why the script that i wrote in that page doesn't appear in my blogger page? but it just appear in preview page only?

tina,  February 20, 2010 at 11:20 PM    

Thanks for the explanation, I'll try it!

@neno The title says *static page* ...i.e. the code is for the extra (up to 10) pages you can add to your blog-one (page with posts)

About the Work of Jennifer Andersen,  March 9, 2010 at 4:32 AM    

I have successfully modified most of the static page layout using your instructions (see http://dreamdoggardencoach.blogspot.com/p/test-page-1.html), but I cannot seem to figure out how to shift the rounded corners and the line that runs vertically through the post to the far right. Any ideas?

Greenlava,  March 9, 2010 at 10:33 AM    

@Jenn
The rounded corners and vertical line are background images. They don't expand following your width change. You'll have to remove the images (and of course you will lose the rounded corners effect).
Find this:
#main-wrap1 {
width:485px;
float:left;
background:#446666 url("http://www1.blogblog.com/rounders4/corners_main_bot.gif") no-repeat left bottom;
margin:15px 0 0;
padding:0 0 10px;
color:#cceedd;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main-wrap2 {
float:left;
width:100%;
background:url("http://www1.blogblog.com/rounders4/corners_main_top.gif") no-repeat left top;
padding:10px 0 0;
}
#main {
background:url("http://www.blogblog.com/rounders4/rails_main.gif") repeat-y left;
padding:0;
width:485px;
}

just delete all background codes in main and main-wrap2. For main-wrap1 trim the code to background:#446666; to keep background color.

glee,  March 12, 2010 at 9:10 PM    

Just want you to know that your tutorial had helped me a lot in improving the looks of my blogger site. this "styling the static page" would be my next challenge. I'll come back for this next time.

As a thank you, I'm now your follower and I've tweeted about this. great job and all the best :)

Gleenn @ Creative Fashion

Greenlava,  March 14, 2010 at 11:13 PM    

@gleenn
I'm glad you find this blog useful. Thanks for following and tweeting.

Gabrielle Shone,  April 15, 2010 at 6:07 PM    

Thank you, you got me part of the way there! I've been able to remove most of the features I didn't want but cannot figure out why my text on my static page is truncating. Anyone out there who can suggest a solution would be sincerely loved!!!!!
http://www.loveislovesydney.com/p/about-me_14.html

Greenlava,  April 15, 2010 at 6:43 PM    

@Gabrielle Shone
Your template uses (an obsolete) auto readmore code. This code does not take into account the new (static) page feature.
To correct your code, read Blogger Auto Read more with thumbnail.
You want to copy the code in step 8 and paste it to replace the corresponding code in your template. I'm not 100% sure that this code will work in your template, because maybe there is a slight difference. But don't worry, it's fixable.
Pls backup your template first (Layout>Edit HTML, click Expand widget Templates, copy all code and paste in Notepad).

Lori Howden-Weaver,  April 17, 2010 at 3:05 AM    

You are AWESOME!!!!! Thanx!!!!!

Greenlava,  April 17, 2010 at 10:45 AM    

@Lori Howden-Weaver
You're welcome!!

About the FNJ,  April 24, 2010 at 12:04 AM    

Can you tell me how to remove the title on the static page post, but still have it show up in the pages tab?

Greenlava,  April 24, 2010 at 12:26 AM    

@About the FNJ
Just add this code right before [/style] tag in step 3:
.post h3 {display:none;}

Ana,  April 24, 2010 at 8:39 AM    

How can I get the font size and color of the static pages on my vertical bar? Thank you!!!

Greenlava,  April 24, 2010 at 3:58 PM    

@Ana
To change font size and color in the sidebar, go to Layout>Edit HTML and add these codes right before ]]> line:
1. Sidebar content
.sidebar .widget-content {color: #FF0066;font-size:12px;}
2. Sidebar title
.sidebar h2 {color: #FF0066;font-size:12px;}

change the values as desired.

glee,  April 24, 2010 at 5:10 PM    

Thank you so much for this, it worked well on my static pages. I just wonder though how to remove the link within for my static pages. I hope to find the answer somewhere on your tutorials here. Thanks a lot

glee,  April 24, 2010 at 5:18 PM    

how do I get that /p/ in the url? I didn't get that part. please help. And how do I remove the link within for the static pages?

About the FNJ,  April 24, 2010 at 10:24 PM    

Can I change the style on one static page, but not on others?

About the FNJ,  April 24, 2010 at 11:05 PM    

Your instructions are incredibly helpful! I wonder if you can help me with another question. I have a customized 3-column minima grid (www.FoodNewsJournal.com). Is it possible to customize ONE static page (but not the others) so that it only the left sidebar disappears, but not the right? (so the layout would have one wide column on left, but maintain right sidebar). Thanks!

Greenlava,  April 25, 2010 at 10:04 AM    

@gleenn
I see you applied my old static page hack to your blog.
This post is for the new (standalone) Pages. You can create Pages in Dashboard>Edit Posts>Edit Pages. All standalone Pages have /p/ in their link.
If you want to switch to standalone Pages, you will no longer need the the old hack.
"how do I remove the link within for the static pages?" -I'm sorry but I don't understand what you mean, what link?

Greenlava,  April 25, 2010 at 10:21 AM    

@About the FNJ
To customize just one page you need to replace static page conditional tag in step 3 line 2 with blog url conditional tag. Read Display widget on specific pages in Blogger for the syntax, what you want is item 3.f.
Then add this code to replace the content in line 4 and 5:
#newsidebar-wrapper {display:none;}
#main-wrapper {width:730px;}

Good luck

glee,  April 25, 2010 at 10:26 AM    

Hi Green,

Yeah, I've been following your tutorials all the while starting from adding the navigation bar on top of my home page. Taking it step by step, your tutorial is really easy to follow. [Thanks a lot for that] :)

I'm using linkin within widget for all my posts so that every posts displays related topic at the bottom which says "You might also like". I don't need it for my static pages but I couldn't remove it. Is it possible to remove those link within photos at the bottom of my static pages?

glee,  April 25, 2010 at 10:29 AM    

oh, btw, I added you to my blogroll at
Creative Fashion as a thank you :)

Greenlava,  April 25, 2010 at 11:43 AM    

@gleenn
Oh...that LinkWithin. I was reading "link within" as in "link inside" :)
Just add this before {display:none;}:
#lws_0
that should do it.

Thanks for the link up

glee,  April 25, 2010 at 12:12 PM    

hi Green,

I just did, pasted #lws before {display: none !important} in the code for static hack but it didn't work. Which {display: none} do you refer?

Greenlava,  April 25, 2010 at 4:41 PM    

@gleenn
Your existing static hack styling:
.post-header-line-1, .date-header, .post-footer, #comments, #blog-pager, .post-feeds, .sidebar { display:none !important; }
#main-wrapper {width: 968px; }
#main {width: 900px; margin: 0 auto;}

add #lws_0, like this,
#lws_0, .post-header-line-1, .date-header, .post-footer, #comments, #blog-pager, .post-feeds, .sidebar { display:none !important; }
#main-wrapper {width: 968px; }
#main {width: 900px; margin: 0 auto;}

glee,  April 25, 2010 at 7:26 PM    

Wow Green, you're a genious! how neat, I got everything perfect now. Thanks a lot! :)

About the FNJ,  April 26, 2010 at 1:33 AM    

Fantastic. You give incredibly clear directions that I haven't been able to find anywhere else, thank-you!

Greenlava,  April 26, 2010 at 5:41 PM    

@gleenn
@About the FNJ
My pleasure

Heather,  April 30, 2010 at 1:40 PM    

I am using a graphic header and have successfully moved the text header from the static pages. I want my sidebar to show on the static pages and to stay consistent with my blog, but I can't seem to figure out the CSS code to do that. Help?

Heather,  April 30, 2010 at 1:54 PM    

Also, my sidebar is now at the bottom of the static page, to the left. :/

Heather,  April 30, 2010 at 2:08 PM    

Nevermind, I got it. :) Sorry about spamming your comments! Thank you for this tutorial, it is amazing and helped so much!

Greenlava,  April 30, 2010 at 2:20 PM    

@Heather
Okay, glad it worked out for you.
Do come back and feel free to ask questions

About the FNJ,  May 3, 2010 at 8:14 AM    

I've styled one static page as you instructed in Comment #20 (which worked perfectly, thank-you!) and now I'm trying to remove the static page titles as you instructed in Comment #12. However, since I've customized one static page, I've only been able to remove the page header on that particular page, and not the others. Any idea how I would remove the titles on all static post pages (but not the tabs), including those which have been customized and those which haven't? Thank-you!

Greenlava,  May 3, 2010 at 1:40 PM    

@About the FNJ
Just add another one (the code in step 3) with only this inside style tags:
.post h3 {display:none;}

About the FNJ,  May 4, 2010 at 12:15 AM    

Awesome, THANK-you!

Alexis,  May 5, 2010 at 6:25 PM    

Hi there,

I don't know where to look for the body tag as you said. I have tried different ways to add your code in order to have my static pages display in full, but it doesn't work. Can you help me please?

Alexis,  May 5, 2010 at 6:48 PM    

You can see my static page here: http://alexis-sclipiridecristal.blogspot.com/p/clame.html

Thanks again!

Greenlava,  May 5, 2010 at 10:31 PM    

@Alexis Design
To find body tag:
1. Go Dashboard > Layout > Edit HTML.
2. Press Ctrl+F to activate search function.
3. Type <body inside the search box, and hit Enter.

Fe,  May 7, 2010 at 11:24 PM    

I really love this site, your tutorials are so helpful. I have a question about static pages though
Could you please check this link out http://www.curlynikki.com/search/label/Celebrity%20Interviews

The static page "celebrities" features all posts that have labels with the word celebrity in it. How does one do that? I'd like to have a static page that says "HOTD" and I want all my posts with the label hair to be on that page so that people can find all those posts under the one page.

Greenlava,  May 8, 2010 at 1:13 AM    

@Fe
That is not a static page. It's a labels page.
Just use this url in your navigation tab:
http://YOURBLOGNAME.blogspot.com/search/label/YOURLABEL

f r i l l,  May 13, 2010 at 1:46 AM    

wow! I'm a complete and utter neophyte and your instructions were easy to follow. Thank you so much!
Will there be other things we can do with these pages? add a table or stuff like that?

Greenlava,  May 13, 2010 at 3:18 PM    

@f r i l l
You're welcome.
A Page is just like a regular post except it is static. You czn add content to it as you would a regular post -be it texts, images, tables etc.

Thomas Ryan Rhodes,  May 14, 2010 at 8:36 PM    

Thanks for the info. I have looked at this fix and it is great. I only have one problem. There are certain pages that I want to keep the layout of the homepage and only one page where I do not want any layout. Is there a way to do this with just one of the pages?

Greenlava,  May 14, 2010 at 10:43 PM    

@Thomas Ryan Rhodes
See reply #20, first paragraph.

Booklover,  May 18, 2010 at 11:53 PM    

I'm using a designer templated installed from draft.blogger.com It does not have the #main-wrapper or anything.
How can i modify width of my page there?

my site is http://bookreviews.bookrack.in

Greenlava,  May 19, 2010 at 12:15 PM    

@Booklover
Replace your #main-wrapper line (line 5) with this:
.main-inner .columns {padding-right:0;}

Subscribe to our feed to stay updated.

Booklover,  May 19, 2010 at 7:10 PM    

Worked! Your awesome !

Greenlava,  May 19, 2010 at 8:50 PM    

@Booklover
I'm glad to hear that :)

TANN,  May 29, 2010 at 6:57 PM    

Hey Greenie...
I want to install a Nabble forum as a static page but I cant seem to find the [body] tag anywhere in order to insert the above code. I too am using a template installed from draft.blogger. Also I like the forum to have a 75% width and I would like to delete the tweetmeme button from this page and also from the all posts page but I am not sure whether to write the id =#t118664etc or the class = tweetmemebutton? I am also assuming that the [b if cond = data:blog.url] line is followed by the address of the static page to which I want to apply this hack?

Ryan,  June 2, 2010 at 11:37 AM    

@Greenlava,
I'm having the same (or at least similar) problem as @Booklover. I attempted your suggested fix but it doesn't seem to be working for me. This is my first attempt at HTML anything, so I'm sure there are any number of ways I could be messing up. Any help would be much appreciated! Thank you!!

imwithryan.blogspot.com

Greenlava,  June 4, 2010 at 12:50 PM    

@Ryan
Don't forget to include "!important":
.main-inner .columns {padding-right:0 !important;}

Ryan,  June 4, 2010 at 8:54 PM    

woohoo! Thanks! :)

Ryan,  June 4, 2010 at 9:01 PM    

@Greenlava
My apologies if I'm being a pest...I very much appreciate the help!! That worked in widening the posting area, however now on the static pages I get a scroll bar at the bottom as though there is more off to the right on the page, but there isn't. Is this something that is fixable? Thanks again!

imwithryan.blogspot.com

Greenlava,  June 5, 2010 at 6:52 PM    

@Ryan
Try adding .main-inner .fauxcolumn-right-outer and .main-inner .column-right-outer in line 4 (in front of { display:none !important;})
I'm not 100% sure that will work because I can't test it from here. Any try it out and come back here with the result.

Ryan,  June 6, 2010 at 12:53 AM    

@Greenlava
Worked! :D Thank you very much for your help!!

TANN,  June 8, 2010 at 6:45 PM    

Dear Greenlava ... while everything looks pretty straightforward I am still having trouble placing the code in my draft.blogger template... I cant seem to find a body tag anywhere!!! I read somewhere that I can add this code after b:template-skin tag just before the head tag ... but this doesn't work either!!! Any suggestions?

Greenlava,  June 8, 2010 at 10:48 PM    

@Ryan
You're welcome

@IoanG
Look for [/head] tag, body tag is right under it. BTW if you wan to, you can put the code right under [/head](above the body tag), it should work just as well.

Anshul Dixit,  June 19, 2010 at 1:19 AM    

Hi.. thanks for the nice tutorial.. I want to remove timestamp and author name from static pages. Please show me how to do that.

Secondly, I am using intense debate comments on my blog. I don't want the comments to appear on some of the static pages. How can I do that ?

Greenlava,  June 20, 2010 at 10:30 AM    

@Anshul Dixit
I don't think timestamp and author name are displayed on static pages.
To remove comments, simply set it so in post options before publishing the page.

Daniel.James,  June 25, 2010 at 1:32 AM    

Thank you for the tutorial. I have installed the Nabble forum I was wondering how do I remove the accents from the sidebar when the widgets are removed and the post is stretched. Is there a way to change the value of the accent to white only the static pages?

In the Blogger designer you can change the accent colour but this makes the accent completely disappear and not shown on the main post pages to separate the sidebar and posts.

I do want the accent just not on the static pages where the sidebar is removed.

Currently this is only done in my demo site. When its works correctly I will implement in my real domain.

Thank you

Daniel James

http://webexploits.blogspot.com

Greenlava,  June 25, 2010 at 6:12 PM    

@Daniel.James
Yes you can apply the color change to only the static pages, afterall that's what this tutorial is all about.
Now if only I have your demo site url...
(you can email me the url if you don't want to post it here)

Daniel.James,  June 26, 2010 at 5:21 AM    

Hello thanks for the quick reply. The address is http://webexploits.blogspot.com

if you look on the privacy policy page you can see the Separator Line Colour is #e8e8e8. I do want it to appear on the home page and the post pages.

Daniel.James,  June 26, 2010 at 5:27 AM    

I have just purchased the domain webexploits.co.uk

Blogger should be redirected to .co.uk soon.

One other question, how can I hide the footer in the static pages. I have seen a few tutorials but they dont work because they only remove the widget title.

You are welcome to contact me daniel.james.webexploits@live.com

Thank you

Daniel James

Laurie Grassi,  June 26, 2010 at 5:40 AM    

I like the way my static pages look at present, but I've added Link Within to my blog (Home) page, and I've got some fixes to do to the static pages, and the minute I revise them, I know Link Within is going to show up on them. How do I just pop some code into my html to stop that from happening?

Thx so much!!

Greenlava,  June 27, 2010 at 12:56 AM    

@Daniel.James
1. Separator line:
Go to Design > Edit HTML and find this code:
.fauxcolumn-right-outer .fauxcolumn-inner {
border-left: 1px solid #e8e8e8;
}
replace border-left: 1px solid #e8e8e8; with border-left: none;

2. Footer
Your footer id is footer-3. So just add #footer-3 in code line 4.

Greenlava,  June 27, 2010 at 1:05 AM    

@Laurie Grassi
See reply #23

Daniel.James,  June 27, 2010 at 2:57 AM    

Expert advice thank you. Do you think I should remove the footer profile and privacy policy widgets. Would the homepage look better without them, considering I have the static pages for them.

Also the home page would load a little faster. I could add the privacy policy and profile links in the copyright footer section.

How does that sound?

Thank you

Anyone is welcome to contact me daniel.james.webexploits@live.com
so we can exchange ideas and give constructive feedback.

Daniel James of http://www.webexploits.co.uk/

Greenlava,  June 27, 2010 at 2:37 PM    

@Daniel.James
I personally would prefer the second option (links in the footer).

Daniel.James,  June 28, 2010 at 8:31 AM    

Hello again, I have made significant improvements like removing the navbar widget completely. This has removed the annoying space above the header which I think looks professional.

How can I remove the padding below the footer. I have used firebug in Firefox to see if I could identify the html. Having no success with this one.

I have noticed that most websites have very little or no margin top and bottom which saves and looks more professional.

Greenlava,  June 28, 2010 at 4:46 PM    

@Daniel.James
To remove the space, go to Design > Template Designer > Advanced > Add CSS and add this code:
body {padding-bottom: 0;}
.content-outer {-moz-box-shadow: none;-webkit-box-shadow: none;-goog-ms-box-shadow: none;box-shadow: none;}

Daniel.James,  June 29, 2010 at 3:54 AM    

Absolutely fantastic is this your professional job. I have learnt so must about web design and html, thank you.

Harvey44,  July 1, 2010 at 2:13 AM    

Hi Greenlava.

I am trying to remove the sidebars and post area from this page.

I have really tried hard to follow the instructions without success.

The page I am trying to edit is:

http://www.nyskiblog.com/p/harvey-road-forum.html

Could you look at it?

Greenlava,  July 1, 2010 at 4:49 PM    

@Harvey44
Oh you fixed it...the forum looks great.

Harvey44,  July 1, 2010 at 5:16 PM    

Thanks Greenlava. It wasn't easy - for me!

It seems like there are other issues, of course!

I have that forum embedded in an HTML widget. Not sure but I don't THINK I can get the window to scroll or expand past a certain length. I won't know for sure until after I get a certain number of posts in the forum, but I'd rather get the bugs worked out before I go live with it.

I "THINK" this is a problem because when I click on the Nabble (forum provider) help links, if I get info that is too long in the window, it is cut off with no option to scroll.

Any work around?

Greenlava,  July 1, 2010 at 10:29 PM    

@Harvey44
Try adding this code before or after the Nabble javascript code:
[style]
#nabbleiframe {overflow:auto:}
[/style]
replace [ and ] with < and >

Harvey44,  July 1, 2010 at 10:36 PM    

Disaster.

I tried what you recommended. It delete the code from my widget. Because I have automatic forwarding to my blogger URL I can't get it back.

I tried to reinstall from the template and it doesn't work. You can't really back up widget content I guess.

Ideas?

Greenlava,  July 1, 2010 at 10:59 PM    

Delete code from your widget? I don't get it.
You installed Nabble inside a Page, by adding (similar to)this code in post editor right?
[a id="nabblelink" href="http://myforum.936189.n3.nabble.com/"]myforum[/a]
[script src="http://n3.nabble.com/embed/f936189"][/script]

Adding the code I've given in reply#75 will turn the whole code into this:
[a id="nabblelink" href="http://myforum.936189.n3.nabble.com/"]myforum[/a]
[script src="http://n3.nabble.com/embed/f936189"][/script]
[style]
#nabbleiframe {overflow:auto:}
[/style]

Harvey44,  July 1, 2010 at 11:33 PM    

Thanks for the help and so sorry for the panic.

With your code I was able to get back to nabble and regenerate the original code, not sure why - as the redirect was still in place.

I've gone back to the original code. It looked like when I used your code there was space for a scroll bar but no bar. Probably because i don't have enough content to scroll.

When I get brave I'll try again.

Thanks for all your help, and sorry for my boneheaded move.

Greenlava,  July 1, 2010 at 11:35 PM    

@Harvey44
Oops...
#nabbleiframe {background-color:limegreen;overflow:scroll;}
should be
#nabbleiframe {overflow:auto;}
instead

Aclem,  July 4, 2010 at 7:38 PM    

About reply #20
Could you show an example of
how it should look? :D

Aclem,  July 4, 2010 at 7:55 PM    

Nevermind! I fixed it! ;)

http://aclem-productions.blogspot.com/

Harvey44,  July 4, 2010 at 9:03 PM    

Greenlava,

I figured out that I should remove the limegreen ;).

Thanks for the update. It works exactly as planned.

I'm thinking about moving the nabble forum to a custom (sub)domain.

forum.nyskiblog.com

A few issues and I'm not sure all relate to this post so hope it's ok.

If I set up a subdomain, it's like a separate site functionally?

Can I set it up so that I have only one login for the domain and the subdomain?

How do I make the forum hosted on the new subdomain look exactly as it does now? Mimicking the main site?

Is there SEO value to hosting this on my subdomain vs with nabble?

Do I have to worry about duplicate content issues?

Greenlava,  July 5, 2010 at 9:16 AM    

@Harvey44
Ahh...subdomain. I have zero knowledge on this subject, so I guess you have to ask somewhere else. Try posting your question in Blogger Help Forum.

Janneke,  July 11, 2010 at 5:42 AM    

Just what I was looking for! Thank you!!!

Greenlava,  July 11, 2010 at 11:25 AM    

@Janneke Smit
Looks good

BioGal,  July 18, 2010 at 1:23 AM    

Sorry, Greenlava, but I am completely stuck. I tried all your suggestions:

I've added the code after [/head]
- after [body]
- using a specific url (http://panoptifier.blogspot.com/p/post-archive.html, with
#newsidebar-wrapper {display:none;}
#main-wrapper {width:900px;}
- using the static_page condition
- replacing line 5 with
.main-inner .columns {padding-right:0;)

:(

I wonder if it is the template I am using...

When I preview a static page, or the specified archive page after any of the attempts above - it doesn't look any different.

Please be so good as to advise me!

Greenlava,  July 18, 2010 at 10:54 AM    

@BioGal
Do you have the code on right now? I don't see it anywhere.

BioGal,  July 18, 2010 at 2:59 PM    

Sorry, I took it off as it wasn't doing anything! I have put it back between [/head] and [body]

Thank you for all your help.

BioGal,  July 18, 2010 at 8:50 PM    

Okay, so this is SUPER WEIRD - I spent HOURS yesterday trying different versions of the code in different places and NOTHING worked.

Now, I've randomly tried a password protect function on a page and it made itself without sidebars, etc.

Then I tried the other static pages - they are sidebar-less too!

Greenlava, did you fix this remotely for me? If so, THANK YOU!

Maybe Blogger doesn't allow too many changes in a day and freaks out...

Anyway, THANK YOU!

Greenlava,  July 18, 2010 at 9:36 PM    

@BioGal
No, telekinesis is a bit out of my league :)
Maybe you misplaced a dot or something.

ZMoney,  July 18, 2010 at 11:52 PM    

Greenlava

I used your steps in the blog above to take away my static page's sidebars and widen the post field.

All worked except I can't seem to widen the post field. You said to find my header width and apply it on line 5. I can't find my header width anywhere HELP! Also, where do I apply it in line 5?

I'm a mess right now! Please help!

Greenlava,  July 19, 2010 at 8:05 AM    

@ZMoney
Replace the code in line 5 with this:
#main-wrap1, #main, .main .Blog {width:740px;}

A word about Rounders template. This template is a little tricky to work with because it uses background images to simulate rounded corners. Background images don't expand with your column.

Surya Kasturi,  July 19, 2010 at 1:07 PM    

i could make it partially.
i want to remove a widget, whose details are
sectionId=footer-3 widgetId=HTML2
but i dont know where to add this.
i use template designer template.
(http://scientisttoday.blogspot.com/p/contact.html)
if you visit this page, i can say that the code corresponds to recommended books code.
1. what i should do to remove that code from static pages.
2. you can see a scroll bar in that page. i dont want that, how to do.

Greenlava,  July 19, 2010 at 4:37 PM    

@spk
1. Your present code:
.blog-pager, .footer, .post-footer,
.feed-links, .sidebar, .footer3 { display:none ! important;}
.main-inner .columns {width: 100%;padding-left:0 !important;padding-right:0 !important;}

change it to:
.blog-pager, .footer, .post-footer, .feed-links, .sidebar, .footer3, #HTML2 { display:none !important;}
.main-inner .columns {width: 100%;padding-left:0 !important;padding-right:0 !important;}

2. To remove the scroll bar, you need to increase the Google spreadsheet iframe height from 659 to maybe 700.

BenWicked,  July 22, 2010 at 8:57 PM    

hello..hello :)
im having trouble applying different backgrounds to the top, left, right n bottom of my blog :(
i cant figure out the scrit to do that ...help everyone! :(
mayday! n thanks in advance :)

Greenlava,  July 24, 2010 at 12:49 AM    

@BenWicked
You can only apply one background to a HTML element. To apply more than one you have to add elements to wrap your blog content. For example:
[body]
[div id="leftbg"]
[div id="rightbg"]
[div id="bottombg"]
YOUR EXISTING BLOG CONTENT
[/div]
[/div]
[/div]
[/body]

Then in CSS you apply a background to each div, specifying different background position to each one.
Refer to Using image as background to learn about background image positioning.

Unknown,  July 25, 2010 at 4:42 AM    

Found the article really useful but still having problems. I do not want the header and the about me on my static page, but I cannot figure out how to remove them?
http://amusingreflections.blogspot.com

Greenlava,  July 25, 2010 at 5:16 AM    

@Brunetta
The Id for your header and About Me are Header1 and Profile1 respectively, therefore your step 4 line 4 code is this:
.blog-pager, .footer, .post-footer, .feed-links, .sidebar, #Profile1, #Header1 { display:none !important;}

Unknown,  July 25, 2010 at 10:03 PM    

Thank you very much, it is working now! I have found this site to be very informative in the 24 hours I have looked at it!

Greenlava,  July 26, 2010 at 4:26 PM    

@Brunetta
You're welcome.
Do use the Post Index tab and search box on the menu bar to find what you need.

Zoë Yule,  July 30, 2010 at 7:33 AM    

Hi Greenlava! I found this article really helpful and easy to follow, but the suggested code doesn't appear to change anything on my blog?! Address: http://zoeyule.blogspot.com/ and the page I'm trying to make different is http://zoeyule.blogspot.com/p/photography.html. I would like the sidebar to be narrower and the main wrapper wider to allow the slideshow (also thanks to your helpful instructions) to be larger. Any suggestions? I'm very grateful for your expertise and advice!

Greenlava,  July 30, 2010 at 4:24 PM    

@Zoë Yule
I only see the comments (code line 1, 8 and 9) in your source code, which only means one thing -there is something wrong with the conditional tag in line 2.
Just reapply the code and see what happens.

Zoë Yule,  July 31, 2010 at 6:46 PM    

Thanks Greenlava, I started over and adjusted the parameters one by one until I got to where I wanted! Thanks for your help!

Anonymous,  August 7, 2010 at 10:09 AM    

Excellent post, thank you!

Greenlava,  August 8, 2010 at 1:56 AM    

@Anonymous
You're welcome. Come back any time.

Travis,  August 14, 2010 at 6:22 AM    

Your code works great..thanks..I have a magazine style template but I'm having problems displaying the post the way it would look on an individual post page. I am able to take all the stuff out with your code, but I need to somehow put div class='single' id='post' into the code so that the post won't be boxed up and limited to only 300x200 box like it is on my magazine style home page. Any way to add one element to a static page in the same code chunk I used to take stuff out?

Travis,  August 14, 2010 at 6:48 AM    

I just sent you in a question and I sorted it out...I applied the same treatment to .post as you did for main-wrapper for the static page to make the post be a normal size.....it seems like it is working

MTA,  August 23, 2010 at 12:05 PM    

how about this template? http://btemplates.com/2009/blogger-template-zengard/ i try and not working

Colleen,  August 24, 2010 at 2:20 AM    

Hi. I have really enjoyed your site and have learned much...but being a beginner...I am having trouble removing the two separator lines from my static pages. Could you help me out. My site is:

www.shadowedstar.net

Thank you!!

Greenlava,  August 24, 2010 at 8:41 AM    

@MTA
This conditional tag application should work on all templates. It is just a matter of finding your elements' id or class and use it in code line 4 and 5.
Anyway, what is that you are trying to achieve? Tell me and I'll find the ids/classes for you.

Greenlava,  August 24, 2010 at 9:00 AM    

@Colleen
Add this snippet right before the closing [/style] tag:
.fauxcolumn-left-outer .fauxcolumn-inner, .fauxcolumn-right-outer .fauxcolumn-inner {border:none;}

MTA,  August 24, 2010 at 6:03 PM    

the template is automaticly do the read more. i like that but in page i want the full page. did not want to automatic readmore. how to do that?

Greenlava,  August 25, 2010 at 12:23 AM    

@MTA
This post: Blogger Auto Read more with thumbnail explains how to apply auto readmore, similar to what you have in your blog.
To remove the read more, just remove the codes in your blog that are similar to the codes presented in the tutorial.

MTA,  August 25, 2010 at 2:33 AM    

im sory for disturbing you but how to remove auto readmore with thumbnail to blogger pages only. not all blog? im totally blur. can you help me? please..

MTA,  August 25, 2010 at 3:15 AM    

i have solve the problems. i search from google. anyway thanks a lot greenlava for help..

Dea Bianglala,  August 30, 2010 at 12:03 PM    

Hi, Greenlava..

I wanted to make a page special for blog list or recent post,
is that posible to do it?
what I supposed to do?
please help me...
tq

Greenlava,  August 30, 2010 at 6:56 PM    

@Meys
1. Go to Design > Page Elements.
2. Add the gadgets
3. Reposition them under Blog Posts gadget box
4. Apply this tutorial to remove sidebar and blog post, and widen the main column area.

Anonymous,  September 2, 2010 at 1:23 AM    

This tutorial is great! I was able to apply a lot of the information provided here to my site. Thanks a ton!

Though I do need HELP with this:

I am trying to widen the post area to fill up the spaces vacated by the sidebars i removed. I found my header-wrapper’s width which is this:

#header-wrapper {
margin: 7px 0px 7px 0px;
padding: 4px;
width: 970px;
background: $headerbgColor;
border: 1px solid $headerBorderColor;
}

and I adjusted line 5 of the code like this:

#main-wrapper {width: 970px; float:none; margin: 0 auto !important;}


But it's not working and my site looks this way with the empty space on the right:

http://www.sehnsuchtisawave.com/p/vids.html :/

Can anyone help, it'd be greatly appreciated!

Greenlava,  September 2, 2010 at 1:58 AM    

@Mia
You have an inner container (named main) with 476px width. Undo that width by adding:
#main {width:auto;}
after line 5.

Dea Bianglala,  September 2, 2010 at 3:59 PM    

yes... its working! tq..Green Lava
but I still have problem here, pls check my blog http://akademikata.blogspot.com
pls help me how to hide the blog list widget in the footer (bloglist 2)bcoz I only want this widget appeare in my "Serba-Serbi" page...

Greenlava,  September 2, 2010 at 4:50 PM    

@Meys
Add this snippet:
[b:if cond='data:blog.url == "http://akademikata.blogspot.com/p/serba-serbi.html"']
#BlogList2 {display:block;}
[b:else/]
#BlogList2 {display:none;}
[/b:if]

Anonymous,  September 3, 2010 at 9:14 AM    

:) Ahhh, thanks a ton! Greenlava, you are as awesome as your screen name :D

Jeannette,  September 3, 2010 at 3:58 PM    

I am using a magazine style template.I would also like to style my page but I cannot get the static pages(technique tuesday) to show the full post.Can you tell me please what I can change in the code.If I change the code in the mini post and hentry it also changes the main blog post and not just the static pages.

I would very much appreciate any help you can give me.My blog is www.sweetgummytrees.blogspot.com

Regards

jncarriere

Greenlava,  September 4, 2010 at 3:10 AM    

@Jeannette
The "read more" on your static page is due to an old read more script (that's made obsolete by the introduction of pages).
I think it's best for you to contact the template maker for the fix.
I tried looking in your template, but can't find the script.

Mrs. Snitker,  September 14, 2010 at 12:56 PM    

You're Awesome!
Thanks for your help. Very clear directions. It did exactly what I wanted!

Nivia,  September 17, 2010 at 3:04 AM    

I want to customize my PageList and i try to use this tutorial ( i use layout templates)
http://www.bloggersentral.com/2010/03/how-to-align-pagespagelist-gadget.html

but I have a problem with the static page.

I past this code after "body"

.blog-pager, .footer, .post-footer, .feed-links, .sidebar, #PageList{ display:none !important;}
#main-wrapper {width: 95%; float:none; margin: 0 auto !important;}

and add the pagelist code before the line ]]>
but it doesn't work :(

can you help me please?! :)

SAM,  September 17, 2010 at 3:30 AM    

Greenlava...im stucked :(

i cant remove the header.

Im using template designer picture window.

I upload my header..i found out my ID:Header1

So..i followed ur instruction, paste #Header1

But not works.

Then i view my page source. Found another code ID:Header1_headerimg

Once again, I paste #Header1_headerimg

But then no luck...not works again. May i know what did i do wrong? Please help

Greenlava,  September 17, 2010 at 6:19 PM    

@Nivia
The pagelist alignment tutorial and this tutorial do two different things. Could you tell me what exactly you are trying to achieve?

@SAM
If you give me your blog url, I could take a peek at your source code (to find the culprit).

Nivia,  September 18, 2010 at 12:46 AM    

omg i'm so stupid x_X
I misunderstood it.
what i wanted to do was this tutorial
http://www.bloggersentral.com/2010/02/highlighting-current-page-tab-in.html

and it works :)
Sorry for the miss understanding and my bad english ^^''

Greenlava,  September 18, 2010 at 1:33 PM    

@Nivia
I'm glad you've got it worked out :)

Mag VB,  September 22, 2010 at 11:28 PM    

I'm just stuck, I guess. I tried doing all the above and I still have sidebars...even bigger than before on all my pages...can you help
magnoliavolleyball.blogspot.com

Sam,  September 23, 2010 at 8:32 PM    

Greenlava...

here's my url.

http://durian13.blogspot.com/

2nd question:

is the hack above able to hide/add some widget in different static page?

As im planning to use jquery image slider in my static pages. And different image slider has different images in different statis pages.

But once i add javascript in page element, the jquery image slider show up in every statis page with same images.

So, i plan to make image slider A for statis page A, img slider B for statis page B, etc.

I hope u get my meaning. thanks. looking forward ur reply. thanks again.

Greenlava,  September 24, 2010 at 7:10 PM    

@MagnoliaBigDog
What is the problem again?...umm have you changed template?

Greenlava,  September 26, 2010 at 12:27 AM    

@Sam
1. #Header1 {display:none !important;} should work just fine.
2. Follow this tutorial to display widget on specific URL.

Tes,  September 27, 2010 at 2:29 PM    

Hi! can you please help me? I have a problem with my new blog. I placed the "read more" feature in the post but now the static pages also has the read more. I wanted to remove it.. I tried all the tutorials I can find but I keep getting an error.. either a closing tag div or b:if.. I close with a tag but still not working.. I am left to no option but going back to the old saved template.

Greenlava,  September 27, 2010 at 5:34 PM    

@Tes
Go to Design > Edit HTML and click the "Revert widget templates to default" link located below the code box.
That should undo whatever changes you did (to the Blog widget).

Tes,  September 27, 2010 at 5:41 PM    

Thanks! But I still want to have the read more feature for my posts and removed from my static pages. Can you help?

Greenlava,  September 27, 2010 at 6:05 PM    

@Tes
Try this: Blogger Auto Read more with thumbnail

Tes,  September 27, 2010 at 9:46 PM    

Thank you very much! You are an angel! :) That solved my problem.. yehey! And I like the thumbnail thing.. :)

Greenlava,  September 27, 2010 at 9:57 PM    

@Tes
My pleasure.
Stay updated by subscribing to Blogger Sentral and following on Twitter.

Bruce,  October 2, 2010 at 2:07 AM    

Greenlava,

I looked at a number of posts on how to do this and yours is the first one that worked for me . . . thanks a bunch . . .

I am using a gallery style template.I would also like to style my page but I cannot get the static pages to show the full post.Can you tell me please what I can change in the code please.

I really appreciate your kind help.

http://panduramagallery.blogspot.com/p/contact-us.html

terima kasih, daun keladi~

Greenlava,  October 6, 2010 at 5:47 PM    

@Pandurama Art Gallery
Please refer to reply #8.
Your gallery uses codes similar to the auto read more. You have to locate the codes in your template and add in the static page conditional tag.

Rob,  October 11, 2010 at 10:03 AM    

Thanks for the great tutorials, you're da bomb! I have it working for the most part. I'm still getting a line down the middle of the pages. I read post 4 thinking that was it, but have no #main in my template file.

http://amllpnonprofit.blogspot.com/p/nonprofit-team.html

Greenlava,  October 11, 2010 at 10:26 AM    

@Rob
Welcome to Blogger Sentral.
For the line in the middle refer to reply #111

Rob,  October 11, 2010 at 10:38 AM    

@Greenlava
You are truly the best. Sorry for asking again. I did look, I guess I just didn't put it together. Thanks!

على باب الله,  October 14, 2010 at 3:17 AM    

can i use this hack to upply to all post pages but not in homepage ?

Greenlava,  October 14, 2010 at 8:47 AM    

@على باب الله
You can apply this to any page or pages. Just replace the conditional tag. Refer to Targeting specific pages with conditional tag for a list of available conditional tags.

Unknown,  October 15, 2010 at 9:45 AM    

Hi greenlava,
Many thanks to you.
I followed what you have showed here, & it worked!
Thanks again.
Dankeschön. (:

Anonymous,  October 19, 2010 at 8:34 PM    

hi,
following your guidance i was able to create different layout on static pages
however i could not remove Gadget of HTML/JavaScript on my other pages (Privacy, etc..)
how do i show Gadget of HTML/JavaScript only my main page while removing it on other pages (Privacy, etc..)
tq

Greenlava,  October 20, 2010 at 9:28 AM    

@Anonymous
You have to find the widget id and add it to code line 4 (in front of {display:none;})
Refer to this tutorial on how to find the id: Finding Blogger widget and section Id’s

PixelatedMushroom,  October 22, 2010 at 8:46 AM    

Thanks! perfect!

Michael,  October 26, 2010 at 12:02 AM    

Greenlava, I had previously been searching the web for almost two months for information on how to adjust the layout of static pages to make them look different from my home page and was getting despondent because I couldn't find anything until now. I must just say thank you SO much for all your awesome help on here.

If I may, could I ask for some further assistance, however. The problem is that I have used the code to make my page look more like a web page and to add a different background to my first static page, but I now wish to change the background of the post area too and also add one or to gadgets to this static page alone. Is this possible?

Any response would be greatly appreciated!

Many thanks :D

Greenlava,  October 26, 2010 at 3:08 PM    

@Michael
I've updated this tutorial. See III. Styling pages individually.
To add gadgets to a single page, you have to use a different conditional tag. Refer to Targeting specific pages with conditional tag for details.

Shay Moore The TribalDancer,  October 27, 2010 at 3:22 AM    

In your sample page, you have the top Blogger navigation bar as a mouse-over drop-down. I am trying to find the article where you made this possible, as I hate that the bar can chop up a design, but like to have access to the links it provides. Any help you can offer would be wonderful. Thanks!

Greenlava,  October 27, 2010 at 3:37 PM    

@Shay Moore
Here is the tutorial: Navbar peekaboo: Hide and make it appear on hover

Unknown,  October 31, 2010 at 1:28 AM    

thank you so much..

but i prefer blogazine :)

Anonymous,  November 2, 2010 at 4:46 PM    

Hi...Green,
I followed all your tutorials here and it worked wonderful on my blog after trillion trials and errors!

Thanks for sharing. Sharing is caring... :)

Hugs, e-na.

Greenlava,  November 2, 2010 at 9:58 PM    

@Muhammad Taqi
@Anonymous
You're welcome guys. Do come back :)

surefire,  November 8, 2010 at 9:41 AM    

Hi Greenlava,

Thanks for this post. I'm new to HTML and CSS and have been figuring out piece by piece how to make my blog look the way I'd like. This tutorial has been very helpful.

I'm building a static page, which I'm hoping will have a very simple and clean aesthetic. I've inserted conditional styling into my main template in order to hide my sidebar widgets, and within blogger's "Edit Post" function I've also applied ".post h3 {display: none !important;}" to hide the page (post) title and date stamp.

What I can't figure out is how to eliminate (or otherwise make use of) the white space that now exists between my static page's header and the text below -- space that I assume is left over from where the date stamp and page title would normally go. I've found information elsewhere on how to eliminate post titles from an entire blog, thereby eliminating page titles also, but I don't want to do that!

Do you have any suggestions for how to eliminate the great swath of white space between my header and regular text? The static page in question is http://chrysoprase.blogspot.com/p/footnotes-superscript.html.

Thanks so much!

Greenlava,  November 8, 2010 at 7:32 PM    

@surefire
Half of the white space is due to three line breaks [br/] in the page itself. One break after the first style tag and the other two after the second style tag.
You need to remove them.

Marisol,  November 10, 2010 at 8:14 AM    

This worked wonderfully!!! Thank you!

chela,  November 19, 2010 at 12:28 PM    

Hi thanks for your help. I have customised my static page with your help, one other thing I would like is to change the skin (not the background color) on the static page, different from the blog home page. I am using Simple Design template.
Again thanks but in advance.

South Suburban Savings,  November 22, 2010 at 2:58 AM    

Thank you, thank you, THANK YOU!!!! :) It worked like a charm right away!

CrEaToR,  November 29, 2010 at 1:46 PM    

Is it possible to change the link of my static page and add the link of any one of my labels,so that when someone clicks on my stand alone page he/she will be directed to the link of the label
plz reply
to this email
atif.slayer@gmail.com

Greenlava,  November 29, 2010 at 5:01 PM    

@BlEeD$fOr^mE*dEmOn
You can find the answer here:Adding non-pages links to pages/PageList gadget

Antoine,  December 1, 2010 at 3:15 AM    

Hi Greenlava,
I'm back;).
I can not remove the white space on the right side.

http://www.tweakyourdevice.com/p/forum.html


Thx you in advance for your help.





.title, .datebox, .blog-pager, .footer, .post-footer, .feed-links, .sidebar { display:none !important;}
#main-wrapper {width: 95%; float:none; margin: 0 auto !important;}

Greenlava,  December 1, 2010 at 8:20 AM    

@Antoine
Add this:
#content {width:95%;}

CrEaToR,  December 1, 2010 at 1:06 PM    

Thanks dude

CrEaToR,  December 1, 2010 at 1:13 PM    

plz visit m blog i'v just created it a week ago.It's my first ever blog.
http://worldofcstrike.blogspot.com/
tell me how it is
any expert tips from u would be helpfull

thanks in advance

Antoine,  December 2, 2010 at 12:48 AM    

Thx again Greenlava !

But, I changed my template, and I can not do the trick ( I have the bar on the right side, and the title: ( ). Would you have an idea?

http://www.tweakyourdevice.com/p/forum.html

"
.h1, .footer, .new-footer, .post-footer, .feed-links, .sidebar { display:none !important;},
#clearfix {width: 95%; float:none; margin: 0 auto !important;}
"

Greenlava,  December 3, 2010 at 11:14 AM    

@Antoine
This time:
#colLeft {width:900px;}
#colRight {display:none;}

Antoine,  December 3, 2010 at 8:20 PM    

Thx you so much Greenlava ;)

Doing It Yourself,  December 4, 2010 at 6:38 AM    

I tried your code in order to break the format originally intended for my post page but it still isn't working.
With my "http://doingityourselfnyc.blogspot.com/p/do-it-yourself.html" page, I want the content of the thumbnail box (an email form) to fully appear on the page, not cropped. This goes for my other pages as well. Any help or suggestions are appreciated!

Greenlava,  December 4, 2010 at 8:08 PM    

@Doing It Yourself
Your layout is controlled by one (or combination) of the few JQuery scripts that are present in the header of your template. The only way you can change it is by altering the scripts.

DaKara,  December 7, 2010 at 9:08 AM    

Your blog has been extremely helpful! I have used your tutorial on modifying static pages and have updated the homepage of a blog I am working on (http://bhamzumbamamis.blogspot.com/). I am now trying to add 3 horizontal images, that will be linked to other static pages when clicked, using an unordered list but I'm not sure how to go about inserting the code and the images. The style for the ul is below:

homepage ul{
margin: 0 auto;
padding: 0;
}
homepage ul.horizontal_list li{
text-align: left;
float: left;
list-style: none;
padding: 3px 10px 3px 10px;
margin: 5px;
border: 1px solid #CCC;
}

Any help you can offer would be greatly appreciated!

Thanks!

Greenlava,  December 7, 2010 at 5:32 PM    

@DaKara
Read the answer in my Facebook discussion board.

Greenlava,  December 12, 2010 at 6:27 PM    

@Jenna
I answered this before, here it is

Review Mom,  January 13, 2011 at 1:05 PM    

I'm having trouble and am wondering if you can help. I added the code and saved the changes, however, the static pages haven't changed. Everything is exactly the same as it was before the code was entered??

http://www.familyreviews.net/p/coupons_12.html

Thanks in advance for your help!

Greenlava,  January 14, 2011 at 4:18 PM    

@Review Mom
This is what you have in the style tag right now:

.blog-pager, .footer, .post-footer, .feed-links, .sidebar { display:none !important;}
#main-wrapper {width: 95%; float:none; margin: 0 auto !important;}

The element names in your template are different then what are given in the tutorial. Use this one instead:

.blog-pager, .footer, .post-footer, .feed-links, #sidebar, .postmeta2 { display:none !important;}
#contentleft, .postarea, .date {width: 100%; float:none; margin: 0 auto !important;background:white;}

Pingkan,  January 17, 2011 at 9:30 AM    

thanks for making easy tutorial here, greenlava. I've used it for my blog. but the page doesn't show full. it still has empty space from the sidebar I've been managed to not showed. how to make it full?

check it here: http://lovelygloriouspainful.blogspot.com/p/support-test.html

thanks for your help :)

miss beyond,  January 17, 2011 at 2:41 PM    

Hi Greenlava.. I am using your codes to make static pages in my blog. This is my page address:

http://beyondmindeyesstudio.blogspot.com/p/contact.html

The auto read more (originally from this template) for this page is gone. It is ok because we dont need it in pages right? But it still leave the thumbnail and summary. The sidebars also are not removed.I don't know where to change the codes.
Thank you.

Greenlava,  January 17, 2011 at 11:50 PM    

@Nduk Pingkan
Replace your styling code with this one:

.sidebar { display:none !important;}
#main-wrapper {float:none; margin: 0 auto !important;}
#main {width: 95%;}

Pingkan,  January 18, 2011 at 9:49 AM    

perfect! thank you! :)

Marisol,  January 23, 2011 at 4:06 PM    

Thank you so much for this!! It's the only thing that has worked. However i cant get rid of the separator line :( any tips on that??

Greenlava,  January 23, 2011 at 6:25 PM    

@MariB
I have answered this before, in reply#111.

Marisol,  January 24, 2011 at 5:32 PM    

Wow, that was perfect. Looking through your answers i see you have already responded about removing Linkwithin, but reply 23 and 25 did not work for me:(

[style]
.blog-pager, .footer, .post-footer, .feed-links, .sidebar, .footer-inner { display:none !important;}
.main-inner .columns {width: 100%;padding-left:0 !important;padding-right:0 !important;}
.fauxcolumn-left-outer .fauxcolumn-inner, .fauxcolumn-right-outer .fauxcolumn-inner {border:none;}
[/style]

Greenlava,  January 24, 2011 at 6:05 PM    

@MariB
I see "Limkwithin". That's the title of your Linkwithin HTML/Javascript gadget. Go to Design > Page Elements > Edit to remove it.

Anonymous,  January 26, 2011 at 8:41 AM    

Hello there,

I'd like my footer to appear on my static page. can you please help me? That's my blog-->

http://cockasnook.blogspot.com/

thanx

Greenlava,  January 26, 2011 at 11:24 AM    

@miss V
Remove .footer from code line 4.

Anonymous,  January 26, 2011 at 6:30 PM    

no, It didn't work. That's how my code looks like:


[b:if cond='data:blog.pageType != "static_page"']
[b:if cond='data:post.allowComments']
[b:if cond='data:post.numComments != 0']
[a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'][b:if cond='data:post.numComments == 1']1 [data:top.commentLabel/][b:else/][data:post.numComments/] [data:top.commentLabelPlural/][/b:if][/a]

There's nothing else in my code referring to static pages.
:(

Greenlava,  January 26, 2011 at 7:47 PM    

@miss V
I'm referring to this:

style]
.blog-pager, .footer, .post-footer, .feed-links, .sidebar { display:none !important;}
#outer-wrapper {width: 1150px; padding:0px;}
#main-wrapper{background:url() #ffffff; width: 1000px; margin: 0px 10px 0px 10px;}
.post {padding: 10px 0px 0px 0px; }
.post h3 {font-size:160%;}
[/style]


this is the very code YOU added in your template to make the contact page looks as it is now, remember?

Anonymous,  January 26, 2011 at 8:13 PM    

Obviously I don't.... : \
I'm lost in the codewolrd !
That's why we need your lovely advice blogs. That worked just fine. Thanks

x

Kumar Sundaram,  January 28, 2011 at 1:59 AM    

Hi !

I didn't see you have a topic on 'pages' on your blog so i posted my question on your facebook page.
But i am repeating here, for other can also benefit from it. And also, perhaps in the anticipation of a early reply :)

So, my blog is www.anumukti.in. I have added 'pages' widget and have put it on the sidebr (you can see the title 'pages'). And so far i have added just one new page. But it's opening truncated on the homepage like any other post, but here the 'read more' is not able to expand it. see: http://www.anumukti.in/p/nirs-report-nuclear-energy-is-dirty.html

What to do? Once i am able to get this, then i hope i will be able to customize the static page as you have guided in this post. Your instructions are easy to follow. Thanks a lot.

Unknown,  January 28, 2011 at 8:27 PM    

OMG I am so glad I found you...This has been extremely helpful. However, I cannot for the life of me get the middle space to widen in order to take up more of the blank space. I did everything you put in your post, and they tried the couple of things that were in the comments. Still no luck. Would you be able to let me know what I am missing here. P.S. I couldn't find my header width...Here is my blog... http://www.nicolesrevolution.blogspot.com
P.S.S. I removed all what I tried and left only what you initially indicated originally. Thanks so much!!

Greenlava,  January 29, 2011 at 1:13 AM    

@Queen Nicole
Have you tried this (from step I.4)?
For Designer template, replace code line 5 with:
.main-inner .columns {width: 100%;padding-left:0 !important;padding-right:0 !important;}

Greenlava,  January 29, 2011 at 1:23 AM    

@अणुमुक्ति
The problem is caused by an obsolete auto read more code. Get the auto read more code that works here:
Blogger Auto Read more with thumbnail

Unknown,  January 29, 2011 at 3:21 AM    

You are AWESOME!! GIVING TONS of ROYAL Kisses your WAY!!!

mub,  February 1, 2011 at 5:15 AM    

This is fantastic! Thank you!

Belinda Keller,  February 1, 2011 at 6:23 PM    

Hi,

Im a newbie to blogger. I have set up my page, but limited my content until I get all of the elements and the look that Im going for completed. I will admit that I dont know much if anything about HTML.....

Here is my question;
I want to be able to set up a page with a contact form (which I have done) but I want to remove the sidebar from that page and any other pages that I might add through the set up process....Is this possible to do? I have tried this in blogger draft to no avail as the options that I see on many tutorials are non-existent for me?

So if it is possible to have additional pages without all of the elements on my home page, can someone explain to me how to do this?

Thanks so much.....

«Oldest ‹Older 1 – 200 of 351 Newer› Newest»

Comments on this post are closed.