January 2009

Customizing videos in Blogger - Part 3

January 31, 2009

In tutorial How to add a video in Blogger we've talked about the options of placing a video in our Blog...Them in Part 1 and Part 2, we've learned something about video customization, slideshows...
This time, I'll show you how to make a Video Gallery and set the video to Autoplay.

MAKING A VIDEO GALLERY
Video Gallery or Video Wall is a group of your favorite videos (personal or public ones) displayed in a gallery box with video thumbnails.

◄ DailyMotion Video Wall ►
Dailymotion is a video hosting service website with great interface and features. You can share videos, create your channels...
Here's the example of the video wall created in Dailymotion:

...stylish. Anyway, the steps are:
► create an account with Dailymotion.com
► go to My Channel
► under Video Tools (left menu), select Create a Videowall

Options:
► choose a channel you'd like to display (public, or your personal..)
► you can adjust the size (rows, columns)
► autoplay. zooming, video titles, spacing...

Copy the provided code, and paste it into your Blog Post, or Sidebar/Footer using a HTML/JavaScript gadget from Add a Gadget (LAYOUT ► PAGE ELEMENTS)

....as simple as it gets...

◄ BLINKX Video wall ►
Blinx is the world’s largest and most advanced video search engine. It's very intuitive. You'll figure it out in a second...Here's the example of the Video wall created in Blinkx:

..Steps:

► go to blinkx.com
► search for the videos of your interest
► drag the videos into your playlist box (bottom left)
► when you're done (you can place 1 or 101 video - it doesn't matter), click on Wall it on the bottom of the box..
► copy the provided code, and paste it into your Blog Post (rather in HTML MODE, than COMPOSE)

Video wall will have a certain width and height....Just change it to fit your Blog post (refer to resizing videos in Part 1)

That's it...

◄ Videos in HTML tables ►
Here is another way of organizing videos in your Blog. It's quite old fashioned, but still works. In this example, I've made a video gallery from Youtube videos (you can use videos from anywhere, of course):

Video 1	Video 2	Video 3	Video 4

Video 5	Video 6	Video 7	Video 8

Video 9	Video 10	Video 11	Video 12

...3 rows with 4 columns, and a caption for each video...You can modify the videos size, add some borders, background color...
..if you like it,click here to grab the code:

...replace the lines in green with your own titles, and lines in orange with the video code provided from a site (Youtube, Metacafe....)

SET A VIDEO TO AUTOPLAY IN BLOGGER
Here's the example how to set a Youtube videos to autoplay when your Blog post is opened:
The original video code:

And after tweaking:

..you have to add &autoplay=1 (in orange) just like in the code above...in both places.

That's it...if you have any questions, scream!

Smile!

post signature

Customizing videos in Blogger - Part 2

5 comments

January 28, 2009

In article Add a Video in Blogger Post, we talked about uploading and embedding videos in your Blog.
And in Part 1 of video customization tutorial, we learned to resize the video, position it (align it) and add some captions to it.
In this article, we'll learn to make a PLAYLIST.

HOW TO MAKE VIDEO PLAYLIST?

◄ YOUTUBE VIDEOS ►

Ok, you already know how to add a youtube video into Blogger post. Now, we'll going to see how to make a playlist from the videos we choose.
First, create an account with Youtube.com.

Below, you can see my examples:

Player example 1	Player example 2

...these are default Youtube players. As you can see, I've chosen a few videos I'd like to play on my Blog, and just embedded the player into the post. Options:
► yes, you can change the size of the player (read Part 1)
► when you update your playlist on Youtube, the one on your Blog is automatically updated

To create your playlist, you need to have an account. Rest is simple:
► browse (search) for the videos you like
► include the certain video in the playlist (click on the Playlist link under the video)
► when you've created your playlist, go to your Account
► on the list of options, click on Custom Video players
► customize your player, and select the playlist you'd like it to play..
► you can create different playlists, and choose different settings for each
Click on the picture to enlarge it:

How to place Youtube videos in Blogger Sidebar?
1. The easiest possible way - in your Blogger account, go to LAYOUT ► PAGE ELEMENTS ► "Add a Gadget" ► choose VIDEO BAR from the list
Here, you can choose what kind of videos you want to feature on your Blog. To choose your own Videos, just create and edit your channel in Youtube (Account ► Edit Channel)

2. Google wizard - similar to number 1., but more advanced. You have the option to place the playlist horizontally or vertically, and choose what channels or videos you'd like to show....
Copy the code provided, and place it in HTML/Java script gadget (or alternately into Post).

3. Also, you can place a third party Gadget/Widget to display Youtube videos. Advantage - different skins and options. Disadvantage - sometimes, they are buggy. Here are the links of some cool ones:
Youtube Videos Gadget
Youtube Videos Channel
Youtube Sidebar Widget

4. Old fashion way....Create HTML table, and place the embed codes into the column...choose width and height, borders, captions....
This may seem to be dull, but trust me, you can get great results....More about tables + videos in Part 3

5. You can also add RSS feed of some popular Youtube channels...Read more about it here.

***

◄ PLAYLIST BY MYFLASHFETISH ►
This is a cool one, you have to admit....

I made this video playlist at myflashfetish.com

Advantages ► design, customizable (autoplay, loop), cool
Disadvantages ► you can only make a playlist of music videos

If you're interested, here's how to:
► create your account with MyFlashFetish.com
► click on Video Playlist tab
► on the left, you can customize your player design, on the right make your playlist (click on Add to Playlist beside the video)
► choose if you'd like it to autoplay, name it, and Save (Get code)
► COPY the code from below (just click on Copy button) or click on Blogger icon. I preffer coping the code, and pasting it manually, but it's your choice...
► !CAUTION! when you paste the code into post, and hit Publish, you'll may get an error....just check the box beside the "Stop showing title or body HTML errors for this post"...No worries, it will work.

Next time, we'll make a nice video gallery.....

Smile!

post signature

Customizing videos in Blogger - Part 1

18 comments

January 24, 2009

In article Add a Video in Blogger Post, we talked about uploading/embedding videos in your Blog...Plain and simple.

Now, we'll add some spice to it. We'll learn how to:

► change the size of uploaded video (make it bigger, smaller, wider...)
► position the video (center it, align it left or right)
► add captions to videos (titles, headings)
► make the playlist of the videos we choose
► set a video to autoplay when Blog post opens
► make a video gallery in post

***

VIDEO SIZE
When you upload or embed a video from a certain site, it will appear in your post in default size. The size depends of the provider or service from where you get the video.
It's important to know that you can adjust the size (width + hight) to whatever suits you....

2 things you should keep in mind:
► change the width and height values proportionally. (if you care about the video quality) But this is not a must-do. You have to keep the same ratio, so that the video doesn't get stretched - when you increase/decrease the width, you'll get the height value by multiplying the width by 0.8235.

► in order to fit the video perfectly (the width part) into your Post, check your HTML, and find out what's the width of your post section (usually under the name main-wrapper, or main..)

Ok, you've uploaded or embedded the video in the post. Either way, you'll be able to see the code of that video clicking on EDIT HTML tab in your Post editor.

All you have to do now, is change the width and height values in the code, to whatever suits you. Here are some examples:

◄ Video uploaded through Blogger, using video

icon ►
The code looks like this:

...in green, you can see the values for width and height. Adjust them to whatever you like...

◄ YouTube Videos ►
The code looks like this:

...here, you'll have to change the values in green to whatever suits you...as you can see, you have to do this in two places... :]

Basically, that's it. No matter where do you get your video from (Youtube, Google videos, Metacafe, or any other service), you'll do the same thing. Just tweak the height and width in the provided code....

WITHOUT TWEAKING THE CODE
...you can also choose between 4 different default sizes that Youtube offers...All you have to do is click on the Customize icon beside the code:

...when you make your choice, copy the code, and paste it into the post...

***

POSITION OF THE VIDEO
If you have a small sized video, you can choose where you'd like to position it. You can align it left, right, or center it.

◄ Video uploaded through Blogger, using video

icon ►
This is the easy one. After successful upload, in COMPOSE mode, click on your Video, and align it clicking on the alignment icons in the Blogger Toolbar...

◄ YouTube and other Videos ►
Here, you'll have to place some extra code. It's easy. We'll just wrap the video in the new div element (container), and add some alignment. You'll find the code of the video clicking on:

I want to align my Youtube video to the right. Here's the code:

...in pink, you can see the new, added code...
...same way, you can center the video, changing text-align:right; into text-align:center;...
...left alignment is the default one...

***

You can also squeeze the video into the text, and align it (same like you do with the pics). Now, there's no button that will do this for you. You'll have to place some code. Again.

To achieve the effect from the picture above, you''ll have to add the code in green, around your video code:

...this will align the video on the left, and it will be wrapped with text...
...you can align it to the right, just changing float:left; into float:right;...
...we've added some margin to distance the video from the text...you can adjust this, of course...

***

CAPTIONS
Adding a caption, title or heading to our video is also quite easy. I'll show you the example where the video is centered, and caption is centered under the video:

And the code:

<div style="text-align:center; display: block;"><object width="225" height="144"><param name="movie" value="http://www.youtube.com/v/fnzlOYaeOwU&hl=en&fs=1"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/fnzlOYaeOwU&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="225" height="144" style></embed></object><div>You can write something here...</div></div>

...in green, you can see the added code...
...we've added two div elements, one for the style, and one for the caption....
...you can play with it, and place a caption on the top, align everything to the right or left....

***

Next time, we'll learn how to embed a custom video playlist in our blog, how to make a video gallery in the post and activate the autoplay option....

Smile!

post signature

Add a Video in Blogger Post

19 comments

January 21, 2009

We'll say something about How to upload video files in Blogger. It's quite simple really. You can upload (embed is better word) videos from services like Youtube.com, or you may want to upload your personal videos from your camera or computer.

MY OPTIONS?
As I've mentioned, it depends what do you want to do, but basically, we can wrap this in 2 categories:
1. Embedding videos from Youtube (or similar services) - fast; practical; public files
2. Upload videos through Blogger control panel - slower; practical, personal (private) files

1. To embed a video into your Blog is the simplest thing. Honestly. You can find tons of videos on Youtube.com (the most popular free video hosting and online video streaming service).
► go to Youtube.com and find the video you'd like to place into your Blog
► copy the code from the Embed box on the right
► paste it into your post (rather in EDIT HTML mode, but COMPOSE will do the thing too)

Here's the example. This is my favorite cartoon - La Linea:

Ok, this was easy. But you can also get more from Youtube. Creating your account with Youtube gives you the option of:
► uploading your own videos and sharing them
► you can make certain videos private
► create playlist
► use the Share option - to share videos in your Blog directly from Youtube (this is convenient if you post youtube videos often)

***

2. You can Upload a video file from your computer or camera while composing/editing a post. Your videos are kept private, and are not shared. This is great if you have personal videos, and don't want expose them anywhere else, except on your Blog. Steps:

► click on the video icon

in the toolbar while composing the post
► browse for the file on your computer/camera
► choose a title + check the Agree to terms box
► click Upload video

Here's the disadvantage of this method - it's slow. Upload time depends on the size of the video file and your internet connection speed.
To make things more smoother, I suggest compressing or converting your video file (decrease it's size) before uploading it to Blog.
Here's what it looks like:

Blogger excepts AVI, MPEG, QuickTime, Real, and Windows Media formats and the max size of the file is 100 MB.
My advices for converting/compressing video files:

And here's some great tools for downloading any kind video from internet to your computer:

Next time, we'll learn how to customize our videos (change their size, width, make a slideshow, gallery, add some colors....).

Smile!

post signature

Guestbook in Your Blogger Blog

87 comments

January 15, 2009

If you have a Blog, personal or non-personal, you know how important (and encouraging) is to see some feedback from your readers......well at least the positive one.....:] [:
You also know what are your options in Blogger:

► visitors/readers can use comments (but they are attached only to a certain post)
► you can add a Shout box (Chat box) to your Sidebar (which is all right, but kind of too active, and works fine for chatting and instant messaging)
► something else?

Your Guestbook entries (comments) will be about you, your Blog, work, and will not apply to a certain post.

WHAT ARE MY OPTIONS?
Hm, searching for a good Guestbook provider, I've found a bunch of them. But, there's a bad bunch, and a good bunch. I'll show you my favorites (good bunch). I've tested them personally, and therefor, guarantee for them.

◄ GUESTBOOK EMBEDDED IN YOUR BLOG ►
This is the best option to add a Guestbook. Why? Because visitors will not be forced to leave your Blog to sign the Guestbook (which is a case with 99% Guestbooks for blogs) .
The only good and functional option I've found is Bravenet Guestbook. Bravenet is a very popular (with good reason) provider of dozen web tools and services. Guestbook is one of them.
Check out example I've made: My Guestbook

What to do? Click here to see step-by-step instructions...

► create an account (free) at Bravenet.com
► confirm the account clicking on the link in your email
► while logged in, go to Web Tools section and click on Guestbook
► design page will open...customize your gustbook here...try everything!
► when you're done (there's a million options), click on the Get Code in the upper right corner of the page
► copy the entire Embeddable Copy and Paste Code
► now, in your Blogger, create a new Post
► paste the code into it
► on the bottom of the Post box, click on Post Options
► set the date (on the right) far back in history....like 2 years, or more (we do this, so the post doesn't appear as a "new" post on the main page)
► publish the post
► go to your LAYOUT -- POSTS -- EDIT POSTS and search for your Guestbook post (where you've placed the code)
► click on View
► when the post opens, copy it's URL address (save it in Notepad or somewhere)
► the only thing left to do is to show our Guestbook to our readers/visitors and invite them to sign in
► you can do this how ever you want (as a picture in a sidebar, on the bottom of your posts, in header)
► just Link it with the URL address of your post (where Guestbook code is)

Options? Unlimited! Music, custom backgrounds, fonts, styles, size, you can edit everything, make rules, ban....anything you think of. It's brilliant. And free...

◄ GUESTBOOK AS A SEPARATE WEB PAGE ►
You can see the disadvantage of this method from the title... This means, when someone clicks on "Sign my Guestbook" link on your Blog, it will open a completely different page where your Guestbook will be. Because it's hosted on the server of the Guestbook provider...

But, don't think of this as a bad thing. There are advantages of this method too. Simplicity, usability and security.
The process of getting one:
► create an account with the provider (free)
► create your guestbook (choose the design, customize)
► you'll get the URL address of your Guestbook
► Link to it from your Blog

Where to get one?
123.guestbook.com ► check the Guestbook example
ultraguest.com ►check the Guestbook example
free-guestbook.com ► check the Guestbook example

If you've heard of some others, do tell me.....

Smile!

post signature

Customizing "Newer + Older Posts" Link in Footer

121 comments

January 12, 2009

We're going to customize our Blogger footer a bit. To be more precise, the links Newer Post, Home and Older Post that we can find on the very bottom of the post.

WHAT ARE THOSE?
For those who do not know, Newer Post, Home and Older Post are links that appear on the bottom of the posts. When visitors click on, lets say, Older Posts, it will take them to the Page with the set of your previous posts.
The number (set) of the posts on this page will be the same as the number of the Posts on your main page (don't think that a click on the Older Posts will open ALL of your Posts!)
You can adjust the number of the posts on the main page going to LAYOUT ► PAGE ELEMENTS ► and clicking on Edit in the BLOG POSTS box.....

WHY IS THIS SO IMPORTANT? IS IT AT ALL?
It is. This is a great navigation tool for your visitors. If you make these links more visible and eye catching, people will click on them, and will be dragged into the maze of your Blog posts...and stay there forever and ever...
Ok, seriously, I suggest doing this.

SO, WHAT CAN I DO?
This is a fun part. You can customize these links in Blogger in a few ways:

► changing the text of Newer, Older, Home links
► placing a picture beside them (a small icon, arrow, or whatever...)
► placing a picture (image) instead of these links

First, back up your Blogger template. Avoid the worst. Put safety first.
When you've done this, let's identify the code we're going to mess around with....Go to:
LAYOUT ► EDIT HTML ► click on Expand widget templates in the upper right corner....Locate this part of the 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>
<div class='clear'/>
</b:includable>

...now, as you can see, there are three groups, one for each link:
► pink represent the code for Newer Post link
► orange for the Older Post
► green for Home
► white wraps all of these up...

◄Changing the text of the links►

You need to REPLACE following parts in original code with ANY TEXT you like:
► replace <data:newerPageTitle/> with, for example NEXT POST
► replace <data:olderPageTitle/> with, for example PREVIOUS POST
► replace <data:homeMsg/> (only the first one) with, for example HOMEPAGE
Click here to see the complete 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'>NEXT POST</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'>PREVIOUS POST</a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>HOMPAGE</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>
<div class='clear'/>
</b:includable>

◄Placing icon/picture beside links►

You will have to INSERT the code for picture:

...replace the part in orange with URL of your hosted picture...
...use small icons...
Click here to see the complete 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'><img src='http://i42.tinypic.com/zn4qic.jpg'/><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/><img src='http://i40.tinypic.com/sfcox4.jpg'/></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>
<div class='clear'/>
</b:includable>

◄Picture/image INSTEAD of links►

This one is my favorite! You can place any kind of picture you want! All you have to do is use this code for the pic:

...just replace the part in pink, with the URL of your hosted picture...
...and in code, REPLACE the original link code for text with picture code:
► replace <data:newerPageTitle/> with the pic for newer (next) posts
► replace <data:olderPageTitle/> with the pic for older (previous) posts
► replace <data:homeMsg/> (only the first one) with the pic for homepage...
Click here to see the complete 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'><img src='URL ADDRESS'/></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'><img src='URL ADDRESS'/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src='URL ADDRESS'/></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>
<div class='clear'/>
</b:includable>

That's about it....Oh yes, one more thing:

◄Switch places of the links►

If you find the position of Newer/Older post awkward (I do), you can switch their places easily. Making Newer posts appear on the RIGHT side, and Older posts on the LEFT side (like a book). To do this, go to LAYOUT ► EDIT HTML, and find the following part in code (CSS style):

#blog-pager-newer-link {
float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

...just switch the float style, so it will look like this:

#blog-pager-newer-link {
float: $endSide;
}

#blog-pager-older-link {
float: $startSide;
}

...Ok, this is really it now....be creative, you can do whatever you imagine...

If you need help, or have some ideas, ask, share...

Smile!

post signature

Blogger XML Template ► Stitch

28 comments

Here's one more Blogger template....Cute, ha? It's ideal if you like crafty + scrapping + sewing, and also if you don't....
It's clean, wide and nice Blogger template.

The only place where housework comes before needlework is in the dictionary. ~Mary Kurtz

What do you get:

► wide post section (but still resolution friendly)
► large customized footer (3 more columns)
► and bunch of smaller things.....

Check out the Page Elements View:

Preview :: Download

If you have questions, ask...

post signature

Tracking Your Visitors - Who's visiting my Blog?

33 comments

January 6, 2009

It's always interesting to know who's visiting (reading) our Blog...Sometimes, it's just curiosity, but tracking your visitors can also give you important insight regarding:

► country (location) of visitors
► language
► browsers they use
► monitor resolution
► time spent on your site
► visited pages
► percentage of new visitors
...
...and so on...You can see that these are all quite detailed statistics, but don't mix them up with a detective tool that can provide information about individual visitor...It's an overall statistics data, and you will not be able to find out names and personal data of your visitors....

...for a professional Blog, this is a MUST, because, knowing you visitors can help you in optimizing your site, and as a result, gain more readers...

WHAT ARE MY OPTIONS?
I'll make a list of most popular tracking tools. They are all tested, and are used by thousands of Bloggers. You'll have to choose the one you like....or use them all. :]

***

SIMPLE HIT COUNTERS

Hit counters will not provide you with a detailed statistics, but they will count your visitors..And they are quite easy to install. If this is what you're looking for, here 's where you can find them:

***

DETAILED COUNTERS AND TOOLS

These are the tools that will provide you with detailed statistic data about your visitors. All of them are free, but also, some of them have an option to upgrade (pay)....

GOOGLE ANALYTICS is quite a powerful tool for analyzing your visitors. It's totally free, made by Google (you can use your existing Google account), no need for placing a counter/gadget on your Blog (it's private).....It's very detailed, well, maybe even too detailed.....Anyway, I would recommend this...
Installing Google Analytics in Blogger

STATCOUNTER is also a good choice. It's free, highly configurable, no ads on your Blog...You have to create an account, set up a project, paste some code, and start analyzing! There's really a bunch of great features....also, check the demo on their website...
Read the instructions: Statcounter tracking in Blogger

SITEMETER has some powerful features. It records unique visitors, and specific page view details about each visitor, but limits itself by unique visitors... The Free SiteMeter service will show you information about the latest 100 unique visitors to your website...you'll have to upgrade (pay) to get some more from it....Read the instructions: SiteMeter tracking in Blogger

***

MAPS and REAL-TIME TRACKING

CLUSTR MAPS is a service (a gadget really) that provides you with a code, that will show a map of your visitors. The map shows the locations of all visitors to your page, cumulatively (even for huge numbers). Clicking on it zooms in to a big world map, and (optionally) lets you zoom in to the continents...It's free if you have less than 2500 visitors daily. Try it...it's fun.

FEEDJIT - with this gadget, you can watch your visitors arriving in real-time...It easy to install, and it can also give you some extra traffic...people just love to click...

BLOG CATALOG Recent Viewers widget is a great way to see who's visiting your Blog...It shows the box with a recent visitors + their avatar....You can get some extra traffic with it, it's easy to install, it's customizable, and free of course...To use it, you have to join the BlogCatalog community, which is a positive thing....

MyBlogLog is also one of the great tracking tools. One minor disadvantage: to join in, you need to have a Yahoo account (if you don't have one). But it's not a big deal...you can set up account in a minute. When you have it, you'll register with MyBlogLog, set up a profile, and you're ready to go! Share your online activity, surf around and get noticed.....

Smile!

Change the Width of Your Blog - Make the Blog Wider

196 comments

January 2, 2009

This can be quite important feature, if you care about it....Changing the width of your Blogger Blog will gain you some extra space (to place more gadgets, pics, ads...), or it will make your Post section wider (meaning: larger pictures, wider paragraphs), you can also add a third column, if you want.....

CURRENT SITUATION (What's out there?)
There's a thousands of templates out there...you have Blogger default templates + Dozens of other sites that provide a free Blogger Templates...
All right, you knew that....but here's another thing you should consider:
There are 2 kinds of templates (layouts) you can use:

► FLUID width or STRETCH templates - template that resizes to fit any computer monitor. It stretches corresponding to the monitor resolution.
Advantage is obvious, and a big disadvantage is DESIGN. It's quite restraining when it comes to this. Of course, it depends what you like. For a professional looking template, it's great....But for a personal one, it can be a bit dull.....

► FIXED WIDTH templates - they have a fixed width, regardless of monitor resolution....They are ideal for designing and customizing, but, the width part can sometimes be a real pain in the....:]
...Why? Because:
- people have different Monitor (screen) sizes,
- and they use different resolutions on them...
...the final result is: Blog appears different in each combination!

Read more about Monitor sizes and resolution, and how to change the resolution...

◄Imagine lying down in the grass with your nose pressed deep into the thatch. Your field of vision would not be very large, and all you would see are a few big blades of grass, some grains of dirt, and maybe an ant or two. This is a 14-inch 640 x 480 monitor. Now, get up on your hands and knees, and your field of vision will improve considerably: you'll see a lot more grass. This is a 15-inch 800 x 640 monitor. For a 1280 x 1024 perspective (on a 19-inch monitor), stand up and look at the ground. Some monitors can handle higher resolutions such as 1600 x 1200 or even 1920 x 1440—somewhat akin to a view from up in a tree...►

SHOULD I CHANGE THE WIDTH OF MY BLOG?
Well, it depends. If you already have a wide template, or you're using Stretch (fluid) layout, there's no need of doing this...

Resolution friendly means that your Blog doesn't exceed the width of 750px. Why 750? Because statistics tells us that lots of people are still using a 800x600 px resolution. And if you make your Blog wider than 750, these group of people will have to scroll left-right on your page....which is quite irritating. And you can lose those visitors....

But, there's also a saying, and it goes like this:
Lie ► A Bigger Lie ► Statistics.

If you surf a bit, and pay attention to web pages width, you'll notice that lots of web sites (even popular ones), are way over the 750 px!
So, it's really up to you....

LET'S CHANGE THAT WIDTH ALREADY.....
The only problem here will be the identification of the CSS style in your template (Layout). This is the part in the code section that defines styling, including width of elements.
There's so many different templates around, and it's a different story for each one...

But don't worry....there's a pattern. A backbone. A Layout constitution. A certain way of organizing (naming) elements. It's basically the same thing, under the different name.....
For this example, we'll take a default Blogger template ► Minima. Let's do it.

1. First thing is identification. Go to: LAYOUT ► EDIT HTML, and find the parts that defines the width of the Main section, Post sections, Sidebar, Header Section and Footer.
For Minima, we have this situation:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
..................................

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
..................................

#main-wrapper {
width: 410px;
float: $startSide;
..................................

#sidebar-wrapper {
width: 220px; float: $endSide;
..................................

#footer {
width:660px;
clear:both;

...in Minima (and lots of other templates) elements are categorized by these names:
► header-wrapper is Header
► outer-wrapper is our Main section, other elements are wrapped inside of it..
► main-wrapper represents Post Section
► sidebar-wrapper stands for Sidebar
► footer is Footer :]

...this means that our header-wrapper is 660px wide, outer-wrapper width (Post section + Sidebar+ margins) is also 660px, and footer 660 px.

2. Let's change the width:

#header-wrapper {
width:750px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
......................................................................
#outer-wrapper {
width: 750px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
.......................................................................

#main-wrapper {
width: 500px;
float: $startSide;
........................................................................

#sidebar-wrapper {
width: 220px;
float: $endSide;
........................................................................

#footer {
width:750px;
clear:both;

...I've decided to make my Post section (main-wrapper) wider. In order to do this, I have to increase my outer-wrapper. Now, here's the RULE:
◄ If you want to increase the width of your Posts section or Sidebar, you HAVE to increase your Main section width (outer-wrapper) for the same value! ►
◄ 500px + 220px + margins = 750px ►

In this example, I've increased my Post section (main-wrapper) for 90px, so I've changed 410px into 500px. I did the same for the Main section (outer-wrapper), changed 660px into 750px....I've left the Sidebar the same width, 220px.
I've also changed the width for my header-wrapper and footer....into 750px. Note that this is not necessary, but better do it...for the sake of symmetry in your Layout...

That's about it. Remember, when you're changing the width of your (custom) Blogger template, certain elements will be (can be) under different name....Do not let it confuse you! You know how the elements are organized inside of it....and in the end, its a 5 minutes job...some simple mathematics + patience.....

If you need any help, ask.....

Smile!

post signature

Blogger XML Template ► Article

106 comments

Another little Blogger template, go ahead, take it....you don't have to wait....
It's clean, wide and nice, + it has no price.....
But before you take it for a ride, just peek a little, to see what's inside:

► 3 columns + large footer (3 more columns)
► customized comment form with highlighted author comments...
► includes "Recent Posts" and "Popular Posts" widgets...
► horizontal links menu bar (Home, About....) - it's so easy to Edit it...
► and other smaller things.....

Check it out: