August 14, 2009

Blog Log


I will try to keep a log of every HTML related change I make to this blog, for those who'd like to learn how I did them. As you can tell I freakin love tricking out the template and have gotten pretty addicted to learning all the snazy tricks web pages are capable of. Note, these edits work for my template and might not for yours. I also linked to where I got the help from. Anyway, behold!:

13. How To Change Blogger's Default Favicon. (9.16.09) Link, Link, Link.

cool sites:
-20 Free Favicon Icon Sets
-favicon.cc gallery
-Favicons R Us
-Create your own (1)
-Create your own (2)
-This trick here allows favicons to change automatically
<link href='YOUR-FAVICON-URL' rel='shortcut icon'/>
<link href='YOUR-FAVICON-URL' rel='icon'/>

for animated:
<link href='http://img2.pict.com/54/4e/47/1628749/0/sonar3.gif' rel='shortcut icon' type='image/ico'/>

put either of these right above the </head> tag. It basically needs to be planted inside the <head> </head> tags but away from all the more important elements, therefore you put it right above the </head> for safety.

Now to me the only time favicons are worth something is when I'm looking through sites in my bookmarks list where then I'm more likely to watch the icons than the site names, and when I have a site I like alot where then it'll stand out in the tab bar and I'll attend it before others. And maybe a 3rd instance where you have a really cool icon that shows off the web's capabilities and stretches my imagination. Like this one
. The shade of black around the image gives a feel like the globe made a dent in the tab bar....3-D!

Now the whole point of a favicon is branding. So that anyone can recognize your site a mile a way, but that'll only be the case if they already know and like your site. Since branding is the objective then in my opinion an animated favicon is a no-no, because then there's nothing to "recognize". It's always moving and therefore your brain has nothing definitive to register. an Another reason animated favicon is bad is that it's distracting. Don't think that something that small has no effect, that clock at the bottom right of your screen is already an incredible subconscious distraction. And distraction is the internet's #1 problem overlooked in my opinion. There's so much crap everywhere on every page(like mine) that I don't see how the authors believe you'll be able to concentrate on the content, especially when it's text.

As you see my animated favicon is minimalist, importantly, it doesn't change colors and it doesn't shift or dance. It's as slow and yet unique and yet animation-y as I could get it. If you don't want one this lame then I suggest getting a static image. With kickass colors and preferably no text unless it's actually readable!

12. How to remove subscribe to post comments (atom) (8.28.09) Link

replace:
.feed-links {
clear: both;
line-height: 2.5em;
}

with this:

.feed-links {
display:none;
}


11. Link Color (8/23/09) Link
my settings, I believe they're the default settings:
Link color: #4D4DFF
Visited Link color: #820BBB
other colors

10. Code Box For Blogger:(8/16/09) Link

Mine:
.codebox{
background:#FBFEFF;
font-family:Arial,sans-serif;
border:1px solid #B3E7FF;
color:#333333;
clear:both;
padding:10px;
}


9. Drag And Drop Images:
On any image upload page(not just Blogger's), instead of clicking "Browse" you can right away drag and drop multiple image files into the gray box next to the "Browse" button with this firefox extension/add on.

8. Hover Effect Buttons:(8/4/09) Link, Link
To my knowledge there are 3 ways to do this:
-replace the image with another(that doesn't seem to work for me)

-join the 1st image and its hover-button, and have it toggle

-what I use, place semi-transparent .png over 1st image

the "style" tag only needs to be used once, while the "div" is used for each button
<style>
.test3 a, #test3 a:visited {display:block; width:210px; height:24px;text-decoration:none;}
.test3 a span {visibility: hidden;text-decoration:none;}
.test3 a:hover span {display:block;float:left;visibility: visible;text-decoration:none;}
.test3 a:hover {white-space:normal;}
.test3 img {border:0;}
</style>
<div class='test3'>
<a style="background:url(http://i28.tinypic.com/o5w50y.jpg) no-repeat" href='http://www.blogger.com'><span><img class='appear' src="http://i27.tinypic.com/2i1jzmb.png" /></span></a>
</div>
special thanks to spavel

7. Remove Blogger's Navigation bar for more slightly more space: 8/13/09 Link

6. Remove Blog Name From Page Title In Blogger(effect can be seen in search engines and blog) 8/14/09
Link

5. Centering Posts(or anything)
"something"
<div style="text-align:center;">"something"</div>


4. Adding Borders Around Elements: Link

3. Centering Middle Column: Link
add "margin-left"(because my middle column clings to the left) Remember to reduce other columns so it may still sum up to your "#outer-wrapper" width.
#main-wrapper {
width: 559px;
margin-left:8px;
float: $startSide;
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 */
}


2. Editing the width of columns
#outer-wrapper {
width: 1000px;(this is the whole page, the sum of all the other values must equal this amount)
margin:0 auto;
padding:0px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 559px;
float: $startSide;
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 */
}

#sidebar-wrapper {
width: 231px;
float: right;
border-left: 2px solid $bordercolor;
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 */
}
#newsidebar-wrapper {
width: 201px;
float: left;
border-right: 2px solid $bordercolor;
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 */
}


1. 3 Column Template
Mine (3 Column Minima)
More
blog comments powered by Disqus