Web Nudge

Today I'm thinking on making my own Blogger hacks, as on the previous post I said that everyone should be creative and not only copy others' work. Then my decision was to create a blogger hack that should be helpful for my blog and also for the other blog. But before we create the Blogger hack we need to know some basis and then search the idea to get our work well done.
So I decided to share what I'm going to learn with you, I found (but with some difficulty it seems that people don't love working and programming hacks) some few tutorials on the web about Blogger hacks, it's also useful to get a look on Blogger answer for that. But here's a guide that will help you do right!

I'll expect at least that you know Scripting (a little bit) and working with HTML in simple pages. Those are knowledge that everyone should know today. Blogger hacks isn't written on Java or VB Script; it has it's own language but we'll need to know some about Java Script and also some knowledge about CSS and HTML.
Ok, first you have to know that the blog that you are seeing is a page and you can edit it. (unluckily in Wordpress.com you can't edit your page, so it's a gift from Blogger to let us edit the page, but you have to know also that Blogger language is somewhat limited if you compare it to the capabilities of PHP).
First, you have to know Javascript and little bit of CSS, Javascript is quiet important and you can find here good resources.
Now let's see how to edit the blog main page (other pages are posts and can be edit in common, that mean you edit them all, and not one by one).
On the Blogger dashboard click on Layout and then choose the 'Edit HTML' Tab, you should now see the HTML code of your blog.
From the first look, you'll think it's exactly like a standard HTML page but you'll see after that there's some differences.

In the previous version of Blogger or old templates, the 'page elements' does not exist and Blogger have to change their templates through this page only but now Blogger made things easier and smother for people. But to create hacks we need to know how to edit 'well this page'


This quiet important because if you made an error that affect your blog and make it unable to show or changed its' style , you can for example if you want to correct it, don't find the right error place and honestly Blogger is quiet stupid on Error Handling and will make you nervous and the support service don't respond quickly to your problems (if responded) and that simple because imagine more than 8 million blogs, can some members in the Blogger team handle all their problem?
So to prevent any problem this is quiet necessary to click this button and save your template in a safe place:If for example a problem occur, you can easily return to the original template by uploading it!


"After this part you'll know how much Blogger is easy and cool"
The template code is divided on many parts that you should know, let's begin from the top:
The Head:
As you know, the head contain several information related to the Page Head, in Blogger it's the same. Let's take an example of the title.
The normal and original title of a Blogger blog should be the following
<title><data:blog.pageTitle/></title>
Like on a normal page, we can edit the Blogger title, simply by changing the data:blog.pagetitle to anything we like.
This is simply Blogger getting data from the Database and we can use it in any part of our Blog (in a post for example, wow quiet cool).
This is useful for example if you want to get it in a hack that you are making, for example a hack that shows " You are know reading the page ... that ..." and other useful information. We'll think after let's continue learning...
The template:
If you know CSS and you are a good designer, then you can make Blogger templates, because it's written in CSS and easy to use!
The template begin from <b:skin><![CDATA[/* and end with ]]></b:skin>
( The template is inside the body meta)
The Body:
The rest of the page 'including the footer'.
Here you should find the Div meta of the side bar, the blog posts... and also lines describing your widgets.
You'll think where your widget content is stored, don't worry it's also in the template but need that you tick 'Expand Widget templates' (Don't jump we'll see how to work with them later)
The footer:
You can put in the footer anything like Copyright or your name and even a script.
To write in the Page footer you should write inside the <div class='footer_txt'> meta.
Scripts:
If you want for example to insert a script, like the tracking script of Google analytics (Read the complete guidance of doing it on my blog!), then you should place this script before the body tag. NB: It's not always before the body tag, the provider will tell you were but if it instruct you to put it on the body tag, then put it just before and don't disorder the body content keep it organized for better reading.


After mastering the reduced code and making some changes (like changing the footer and title, things easy but we start with), you can know expand the widgets templates, you'll notice that the code become longer and loosing this time, but don't be afraid it's easy if you concentrate.
The changes:
We must first seek on the changes between the expanded templates and the reduced.
The difference that the expanding one contain the content of the widgets and also the blog posts (which is a widget also!) and also their settings that we can change.
I'll give you now an example that will change your view on Blogger!

Unlocking Blogger Title widget

Let's start with the simplest one: the header (it's also a widget)
In the default version, when you are on the 'page element' page, your header is locked and you can't move it to any part of your template.
By the default your header is locked
But now we can move it where we want hehe :)
How to do this one?
Simply search for the header widget, indication? Try searching something like <b:widget id='Header1' ...
You should find on the same Tag: Locked='true' ; change it to Locked='False'
Hey! We use ' in Blogger and never ", it'll cause an error.
This is a simple hack, but not for your visitor it's for your comfort ;)
As long as you browse the code, you'll find many settings that you can change, every step you go, you'll sing from happiness and say 'Howly, my blog will change...' Yes man keep on reading you'll learn wonderful things.

Adding a widget through Blogger template code

Why to add a widget through the Blogger Template code and we can do it on two clicks through the 'Page Element'
Here's why: Sometimes when I work with Bad-made templates, the Page Element cannot add a Text widget for me (for example), here's why I proposed to give you this sample in order to solve this problem and perhaps other problem that occurred and I didn't faced.
The following code will add a new Text widget (supports script)
Things to change:
X : Change it with another number, note that you can change the whole HTMLX
Title : The title of your Widget
Content : You can change it only from the 'Page Element'

<b:widget id='HTMLX' locked='false' title='Choose a title' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

I hope it's a nice startup to create simple and easy Blogger Hacks!


Your knowledge now allow you to create simple and small Blogger widgets that may not interest the others', plus you can easily get in an unexpected error that you can't solve, so the aim is to become skilled and here's some beginning to get skilled with the Blogger Code

Integrating Text/Script on the Blogger Posts

I think everyone who have some widgets on his blog know how to enter text before and after the Body of Blogger posts.
To do that search for <data:post.body/> and you'll find it between two P tags.
By placing the code before your text will appear before, after you'll text will appear in the bottom of the page and so on.
If you place your text on a Div, you can customize the position of your text 'in the right, in the center, at the left'
With Adsense code, there's a problem that you should fix before putting your adsense code.
This post shows with details how to solve this problem, read it carefully, I'm not going to explain this part in detail here.

Hiding a widget on the main page and showing on the post page

There's a common problem that most of Blogger Hacker may face: If they want to show a widget only if a post is opened, that mean it don't show on the main page.
For example the 'Related post' widget don't show on the main page, but only when a post is selected.
Here's how to solve this problem.
First let's look at a simple widget that always shows

<b:widget id='HTMLX' locked='false' title='Choose a title' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

This widget always shows, but the following shows only when you select a post

<b:widget id='HTMLX' locked='false' title='Choose a title!' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

All you need to add is the lines on Bold.
And that's done! (You see you have so much to learn, you know now the basis, just think of the possibilities and the hacks that you can make)

Blogger syntax

To become skilled you need to master Blogger syntax. What does I mean with Blogger syntax?
For example how to know that the words '<data:blog.pageTitle/> ' will give you the title of the page.
I'm currently searching the web for a library that explain the whole syntax or for a documentation to help programming with Blogger syntax.
If someone knows, please leave me a word.


Now you should fix errors yourself and begin creating real Blogger Hacks by yourself.
But before creating your own you need to see other blogger hacks made by others' to have a better knowledge. I'll publish them one by one (the most used and popular) and group them in one post for the ease of finding them.

Find this guide interesting, link to it!
If you faced any problem, just post a comment describing it and I'll take a look on it.

Posted by Omar Abid at 1:34 AM |    
Labels: blogger, hack