The trouble is, Blogger isn’t as easily customized as a self-hosted WordPress blog. With a little Google research and a lot of errors (especially if you’re not as expert in CSS/HTML tweaking as me), you can still personalize a Blogger blog to suit your, er, designer bent.
I’m going to show you some of the customizations I did for this blog to make it look like this current incarnation:
CAUTION:
Please, please, puhleeeease: before you insert any of these changes, back up your template. (I won't be responsible for any error if you don't!)
- Click on Template, choose Edit HTML, Proceed to the Template Editor and then Expand Widget Templates.
- Place your cursor inside the Template Editor, click Ctrl+A to highlight every single piece of code, then click Ctrl+C to copy everything to the clipboard.
- Open Notepad, paste (Ctrl+V) the whole stuff, and save the document to finish.
Creating a Floating NavBar
The NavBar is perhaps the one identifying mark of every blog that’s on the Blogger platform so if you have a personal domain, it’s one of the things that you’d want to hide first.
 |
| with the navbar |
There’s a code to remove the navbar completely but I chose to use a floating navbar instead because I need a quick access to the sign-in link and eventually the admin dashboard, heh. With this tweak, the navbar will be on "hide" mode but will still appear (float) when you mouse over the top of the blog.
 |
| without the navbar. |
Here’s how to do it:
1. On your dashboard, go to Template » Edit HTML and on the Template Editor, look for “/*Variable definitions”.
2. Immediately before it, paste the following code:
#navbar-iframe{3. Save Template to keep the new changes.
opacity:0.0;
filter:alpha(Opacity=0);
}
#navbar-iframe:hover{
opacity:1.0;
filter:alpha(Opacity=100, FinishedOpacity=100);
}
Alternatively, go to Template » Customize » Advanced » Add CSS and paste the same code in the box, like so:
Click Apply to Blog (the orange box on the upper right hand corner) to save your changes.
[ Source ]
Remove Footer from Homepage
The default footer on the homepage of any Blogger blog includes the tags and the default share buttons and it often throws me off.
It’s kinda messy on the eyes so I opted to remove it from the index page but I wanted it to show in the post pages.
If you want the same tweak, here’s how to do it:
1. Go to Template » Edit HTML » Proceed and tick on Expand Widget Templates on the Template Editor.
2. Look for the following code:
]]></b:skin>3. Immediately after it, paste the following code:
<style type='text/css'>4. Click on Preview to see how it looks like and if you like the changes, Save Template.
<b:if cond='data:blog.pageType == "index"'>
.post-footer {display:none !important;}
</b:if>
</style>
[ Source ]
Add Separators Between Posts
Once you’ve removed the footer on the homepage, there’s nothing to distinguish one post from another, save perhaps the date header. On this blog though, I opted out of placing the date before the post title so I used an image to separate posts.
Before you place the code in the Template Editor, create your separator image or look for one on Google (search “free post dividers”). Make sure it’s not copyrighted material or that you know how to make image attributions properly. Once you have an image, upload it somewhere else (I use Photobucket) and get the URL for that image.
Here’s how I did it:
1. Once again, go to the Template Editor and find this code:
<div class='post-footer-line post-footer-line-3'/>2. Immediately below the code, paste this snippet:
<center><img border="0" src='PLACE YOUR IMAGE URL HERE'/></center>Where PLACE YOUR IMAGE URL HERE is, replace with the URL of your uploaded separator image.
What you just did is place the separator image below the complete post (i.e., after the post footer tags).
Alternatively, if you don’t want an image and you just want a simple line, you can use this code instead:
<br/><hr color="red"><br/>And it will look like this:
[ Source ]
Add Floating Vertical Share Bar
Blogger’s default horizontal share bar at the end of the post is sufficient but I wanted to put those fancy vertical sharing bars on my site so, of course I went and got me one.
You’ll have to create an account at ShareThis to get a unique Publisher Key and take advantage of the tracking option. Otherwise, you can just get the code. (For this option, I chose “Website” as Platform instead of Blogger because I had some issues with the horizontal buttons that were supposed to go at the end of each post.)
Here’s how to do it:
1. Go to Template Editor and look for this code:
</head>2. Immediately before it, paste the following snippet:
<script type="text/javascript">var switchTo5x=true;</script>3. Then look for this code:
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>
</html>4. Before it, paste this code:
<script type="text/javascript">stLight.options({publisher: "PUBLISHER_KEY"});</script><script>var options={ "publisher": "PUBLISHER_KEY", "position": "left", "ad": { "visible": false, "openDelay": 0, "closeDelay": 0}, "chicklets": { "items": ["facebook", "twitter", "googleplus", "linkedin", "stumbleupon", "tumblr", "pinterest", "email", "sharethis"]}};var st_hover_widget = new sharethis.widgets.hoverbuttons(options);</script>Replace PUBLISHER_KEY with the key you obtained from ShareThis when you signed up.
This will place a vertical share bar on the left of your blog. You can also place it on the right by replacing “left” with “right” on the “position” value in the code above.
Changing the Title Tag for Blogger Posts
The default Title Tag in Blogger places the Blog Title first, followed by the Post Title...which could be bad for SEO. (Just sayin’.)
Find this code on your Template Editor...
<title><data:blog.pagetitle/></title>...and replace with this code:
<b:if cond='data:blog.pageName == ""'>The title bar will now look like this:
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
[ Source ]
I think that’s it. If you have more questions about how I customized this blog, just ask them in the comment section below and I’ll try to help. (TRY being the operative word as I’m only a copy cat when it comes to codes and customizations, heh.)
No comments :
Post a Comment