Dealing with the bottom of the page

In the bottom of the blogspot pages we see these lines actually we do not like a lot:

Subscribe to: Posts (Atom)

Powered by Blogger.

These are easy lines to remove. I did it in funkymonks, now it seems cleaner. Here how I did it:

To remove "subscribe" thing

<b:include data='feedLinks' name='feedLinksBody'/>

delete in your html code.

To remove the "powered by" thing

find /* Footer part, to the end of this part add display:none;

Additional thing what did for funkymonks is this: playing with "older page" link, "home" links.

I deleted Home link for now and replaced older and newer page links with an image. Find this part in your code:

<b:includable id='nextprev'>

<div class='blog-pager' id='blog-pager'>

<b:if cond='data:newerPageUrl'>

<span id='blog-pager-newer-link'>

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>

</span>

</b:if>

<b:if cond='data:olderPageUrl'>

<span id='blog-pager-older-link'>

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>

</span>

</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

<b:else/>

<b:if cond='data:newerPageUrl'>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

</b:if>

</b:if>

</div>

Now, if you want to change the text, just delete these underlined parts and write you own text.

If you want to put an image source, delete them, put this: <img src="Image URL" />

Before and after:

......................................................................................................................................

How to remove Navbar in Blogspot (top navigation bar)

I did a quick search about it since I do not like the navbar. I think it steals serious amount of pixels from the screen and it is not that much useful for the readers. So I did this:

Go for your html editor and find this code: ]]>
Before this line, put this: #navbar { display: none; }

It's done. Simple right?

Before and after:

......................................................................................................................................

Transparent Background for Posts

This was what I was looking for a while. Since I have an underwater picture in background for funkymonks, I didn't want to override it with a post background although I needed a background for posts itself because posts are not seem clear without it. Finally I saw our course instructor did that somehow for gadget backgrounds. 

http://easypeasydesign.blogspot.com/2011/04/blogspot-stuff-this-too-is-awesome-inc.html

Then, by the help of our teaching assistant I managed to do that. This is how I did it:

Firstly, we create a file 32x32 or 16x16 in photoshop and we fill it with a transparent color as we want. Then save it as png-24. Upload it to a hosting site and get a direct link. Then find this in your html editor:

.date-outer {

instead of this : background-color: $(post.background.color);

put this : background: url("your direct link here") repeat;

Finally, here is the result:

......................................................................................................................................

Header design for funkymonks

I thought it would be a nice idea to change the header of the funkymonks because it was so simple. This is the the initial version of the header:

Then I thought, "hey this is a site about diving! Why don't I add a fish or something to header?" Then found this cute thing:

But, ehm, it is too cute i think. Didn't like it. Maybe I should use a bigger fish and maybe a font change would be better:

But this cover all the place in the screen. Looked like this in a bigger page:

Doesn't look good right? I thought so. Then I used small characters and a smaller header which does not cover all the page.

In a bigger screenshot:

It's all for now, I know it is not good but it felt better than the previous one.

......................................................................................................................................

Lets separate the posts that share the same date !

I realized a problem in blogspot (this may not be a problem but it bothered me anyway) which is that: if you have 2 or more posts on the same day, blogspot do not separate them, they look in the same background. On a dummy site, I will try to show you what I mean.

As you see the background does not separate between the two different posts although it is separate for the posts that are posted in different dates.

You can do these steps to fix this: http://www.southernspeakers.net/2010/12/show-date-for-each-blogger-post.html

Finally, here is the result. Ta da !

......................................................................................................................................

Don't you like the date header?

From the beginning, I couldn't get used to this date header thing. So I did a quick search for "how can i remove date header" and here what I found:
Go to HTML design part find that:

.main-inner .widget h2.date-header {
margin: 0 -15px 1px;
padding: 0 0 $(date.padding.bottom) 0;

Between the code upon, put this : display: none;

Here is how it seems now:

But now, I need to align the post title and gadget titles, so I use the info I mentioned in previous post (http://va333furkank.blogspot.com/2011/04/aligning-widgets.html) and here the result is:

......................................................................................................................................

Aligning the widgets

In blogspot, it seems blog roll and the left-right gadgets are not aligned well.
In order to solve this, I put this code: #Blog1{margin-top: -5.9px;} to the end of the css-widget part. If you delete the minus in the code, it moves the opposite direction.
In my site, gadgets do not have lines so to clearly show the result, I put a yellow guide line.

Before and after:

reblogged from http://easypeasydesign.blogspot.com/2011/03/aligning-top-line-on-your-blog-column.html

......................................................................................................................................