I don't want to go into the details of customizing your personal Blogger template, but like most default templates, it comes with the same elements and each element can be customized. For the most part, when you're customizing your template, you're adding or removing these elements. Blogger likes to call them "widgets". By objectifying each element as a widget, Google's development team is better able to sort out all the clutter between their implementations, third-party implements, and of course, standards implementations.
First and foremost, if you really want to dive into customizing your Blogger template, you need to get familiar with working with script or code. When you take a look at Blogger's beastily template, you might be scared off and not want to throw a wrench into things. However, it will be quite worth it if you do trial-and-error tests on your own just to see which parts of code displays which elements. Of course, it's easier to use the template editor and enable/disable the widgets, but if you really want to see how things work, you need to get inside the code. However, if you do approach it with trial-and-error, I advise you to do so when you first open your account. You can't open a dummy account and play with it that way, so work it out before you finalize your design. Also, it doesn't hurt to backup your changes by exporting the template or simply copying the source into a text file.
Adding/Removing Widgets and other Blogger Page Elements
You can add or remove widgets and other Blogger page elements by going to your Dashboard > Design > Page Elements. You get a visual representation of your layout. There you can click Edit on each of the elements and edit them.
Customizing the inline stylesheet
Everything you need to change the way your template looks is within these tags found in the <head> section:
<b:skin><![CDATA[
Blogger's default css is found here, therefore you can put your custom styling here
]]></b:skin>
Implementing External Stylesheet
Sometimes, the inline stylesheet gets really inflated and will slow the downloading time. Technically, users are downloading approximately the same amount of data. But in order to have a more perceptively better download, moving that novella of an inline stylesheet into an external one is the best practice.
Copy the same styling from before WITHOUT ALTERING BLOGGER'S B TAGS (which will throw their interpreter off). Paste your custom styling into a text file and rename the extension to css.
You'll need to host that css file on a site that Blogger is friendly with, otherwise it won't work. I suggest using another one of Google's services: Google sites. Google owns Blogger, by the way.
Once you have your Google Sites account open, upload your css file as an "attachment" and reference to it from your Blogger template using a standard HTML <link> tag. When you copy the css link, make sure you remove any additional url paramaters and just get the sole url of the file. For example:
http://sites.google.com/site/eastfistart/eastfistBloggerCSS.css?attredirects=0&d=1
won't work so change it to:
http://sites.google.com/site/eastfistart/eastfistBloggerCSS.css
As proof, my own Blogger site is utilizing an external stylesheet. Check out the source.
Hiding Blogger's default nav bar
If you want to take advantage of the maximum browser window, you'll probably want to hide Blogger's nav bar. Of course, I found it to be quite useful for on-the-spot logging in, accessing the dashboard or editing, but I don't find it aesthetic pleasing. Hiding the nav bar is actually quite simple.
You won't find a reference to the particular div id in the stylesheet, but all you have to do is make one, like so:
You won't find a reference to the particular div id in the stylesheet, but all you have to do is make one, like so:
#navbar{display:none;}That's it. Of course, be aware that if you create your own div named "navbar", it will conflict with Blogger's internal div of the same name. The code is still generated, it just won't be displayed.
0 comments:
Post a Comment