Crystal Computer

Split header column became two column

noreply@blogger.com (Unknown) — Fri, 17 Apr 2009 08:13:00 +0000

Can I change the blog header into two or three columns. The answer is yes, of course with a few changes to the css code. All right .. follow these steps. Go to your page element, and you will find template structure like this :

Now we will change the header column become 2 header columns. Click Edit HTML tab, go to your template code and find the code like this :

/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
no-repeat top center;
height:190px;
}

#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}

Delete above code and replace with this code ;

/* Header
===================================
*/

#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}

#head-inner {
width:600px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}

#r_head{
width:300px;
float:left;
padding-top:10px;
}

Go to lower side and find the code like this :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>

Delete above code and replace with this code :

<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

Click SAVE CHANGES button and done.

Now click Page Elements tab and you will see your header column become 2 columns :

Good Luck

Blogger Archive Calendar

noreply@blogger.com (Unknown) — Thu, 16 Apr 2009 18:55:00 +0000

This is for New Blogger using Layouts templates only (blogspot or custom domain). Classic Templates not supported.

As with any template modifications, always make a backup before preceding !

Also, feeds for posts must be enabled in your settings (Blogger>Dashboard>Settings>Site Feed> Post Feed can either be set at Full or Short). Private blogs do not have feeds, so they are not supported.

Step #1

Go to Template>Edit HTML. Leave the Expand Widget Templates box UNCHECKED (default)

This code will replace your Archive widget. Scroll down and find yours in your template. Will look something like this.

Copy the following code, then highlight the archive widget as shown and replace it with a paste.

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='toggle' var='interval'>

</b:includable>
<b:includable id='flat' var='data'>
<div id='bloggerCalendarList'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</div>

<div id='blogger_calendar' style='display:none'>
<table id='bcalendar'><caption id='bcaption'>

</caption>

<thead id='bcHead'></thead>



<tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr>
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr>
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr>
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr>
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr>
<tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr>
</tbody>
</table>
<table id='bcNavigation'><tr>
<td id='bcFootPrev'></td>
<td id='bcFootAll'></td>
<td id='bcFootNext'></td>
</tr></table>

<div id='calLoadingStatus' style='display:none; text-align:center;'>
<script type='text/javascript'>bcLoadStatus();</script>
</div>
<div id='calendarDisplay'/>

</div>

<script type='text/javascript'> initCal();</script>

</b:includable>
<b:includable id='posts' var='posts'>

</b:includable>
<b:includable id='menu' var='data'>
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
<b:includable id='interval' var='intervalData'>
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
</b:widget>

At this point you may want to save the template. It should save without any errors, if not then make sure you followed the above, and copy/pasted correctly.

Find in your template the ending ]]></b:skin> tag and the ending </head> tag. It should look something like this in your template

Copy the following script, and paste it in between these two tags. Here's what you need.


<script type='text/javascript'>
//<![CDATA[

var bcLoadingImage = "http://phydeauxredux.googlepages.com/loading-trans.gif";
var bcLoadingMessage = " Loading....";
var bcArchiveNavText = "View Archive";
var bcArchiveNavPrev = '◄';
var bcArchiveNavNext = '►';
var headDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var headInitial = ["Su","Mo","Tu","We","Th","Fr","Sa"];

// Nothing to configure past this point ----------------------------------
var timeOffset;
var bcBlogID;
var calMonth;
var calDay = 1;
var calYear;
var startIndex;
var callmth;
var bcNav = new Array ();
var bcList = new Array ();

//Initialize Fill Array
var fill = ["","31","28","31","30","31","30","31","31","30","31","30","31"];
function openStatus(){
document.getElementById('calLoadingStatus').style.display = 'block';
document.getElementById('calendarDisplay').innerHTML = '';
}
function closeStatus(){
document.getElementById('calLoadingStatus').style.display = 'none';
}
function bcLoadStatus(){
cls = document.getElementById('calLoadingStatus');
img = document.createElement('img');
img.src = bcLoadingImage;
img.style.verticalAlign = 'middle';
cls.appendChild(img);
txt = document.createTextNode(bcLoadingMessage);
cls.appendChild(txt);
}
function callArchive(mth,yr,nav){
// Check for Leap Years
if (((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0)) {
fill[2] = '29';
}
else {
fill[2] = '28';
}
calMonth = mth;
calYear = yr;
if(mth.charAt(0) == 0){
calMonth = mth.substring(1);
}
callmth = mth;
bcNavAll = document.getElementById('bcFootAll');
bcNavPrev = document.getElementById('bcFootPrev');
bcNavNext = document.getElementById('bcFootNext');
bcSelect = document.getElementById('bcSelection');
a = document.createElement('a');
at = document.createTextNode(bcArchiveNavText);
a.href = bcNav[nav];
a.appendChild(at);
bcNavAll.innerHTML = '';
bcNavAll.appendChild(a);
bcNavPrev.innerHTML = '';
bcNavNext.innerHTML = '';
if(nav < bcNav.length -1){
a = document.createElement('a');
a.innerHTML = bcArchiveNavPrev;
bcp = parseInt(nav,10) + 1;
a.href = bcNav[bcp];
a.title = 'Previous Archive';
prevSplit = bcList[bcp].split(',');
a.onclick = function(){bcSelect.options[bcp].selected = true;openStatus();callArchive(prevSplit[0],prevSplit[1],prevSplit[2]);return false;};
bcNavPrev.appendChild(a);
}
if(nav > 0){
a = document.createElement('a');
a.innerHTML = bcArchiveNavNext;
bcn = parseInt(nav,10) - 1;
a.href = bcNav[bcn];
a.title = 'Next Archive';
nextSplit = bcList[bcn].split(',');
a.onclick = function(){bcSelect.options[bcn].selected = true;openStatus();callArchive(nextSplit[0],nextSplit[1],nextSplit[2]);return false;};
bcNavNext.appendChild(a);
}
script = document.createElement('script');
script.src = 'http://www.blogger.com/feeds/'+bcBlogId+'/posts/summary?published-max='+calYear+'-'+callmth+'-'+fill[calMonth]+'T23%3A59%3A59'+timeOffset+'&published-min='+calYear+'-'+callmth+'-01T00%3A00%3A00'+timeOffset+'&max-results=100&orderby=published&alt=json-in-script&callback=cReadArchive';
document.getElementsByTagName('head')[0].appendChild(script);
}

function cReadArchive(root){
// Check for Leap Years
if (((calYear % 4 == 0) && (calYear % 100 != 0)) || (calYear % 400 == 0)) {
fill[2] = '29';
}
else {
fill[2] = '28';
}
closeStatus();
document.getElementById('lastRow').style.display = 'none';
calDis = document.getElementById('calendarDisplay');
var feed = root.feed;
var total = feed.openSearch$totalResults.$t;
var entries = feed.entry || [];
var fillDate = new Array();
var fillTitles = new Array();
fillTitles.length = 32;
var ul = document.createElement('ul');
ul.id = 'calendarUl';
for (var i = 0; i < feed.entry.length; ++i) {
var entry = feed.entry[i];
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == "alternate") {
var link = entry.link[j].href;
}
}
var title = entry.title.$t;
var author = entry.author[0].name.$t;
var date = entry.published.$t;
var summary = entry.summary.$t;
isPublished = date.split('T')[0].split('-')[2];
if(isPublished.charAt(0) == '0'){
isPublished = isPublished.substring(1);
}
fillDate.push(isPublished);
if (fillTitles[isPublished]){
fillTitles[isPublished] = fillTitles[isPublished] + ' | ' + title;
}
else {
fillTitles[isPublished] = title;
}
li = document.createElement('li');
li.style.listType = 'none';
li.innerHTML = '<a href="'+link+'">'+title+'</a>';
ul.appendChild(li);

}
calDis.appendChild(ul);
var val1 = parseInt(calDay, 10)
var valxx = parseInt(calMonth, 10);
var val2 = valxx - 1;
var val3 = parseInt(calYear, 10);
var firstCalDay = new Date(val3,val2,1);
var val0 = firstCalDay.getDay();
startIndex = val0 + 1;
var dayCount = 1;
for (x =1; x < 38; x++){
var cell = document.getElementById('cell'+x);
if( x < startIndex){
cell.innerHTML = ' ';
cell.className = 'firstCell';
}
if( x >= startIndex){
cell.innerHTML = dayCount;
cell.className = 'filledCell';
for(p = 0; p < fillDate.length; p++){
if(dayCount == fillDate[p]){
if(fillDate[p].length == 1){
fillURL = '0'+fillDate[p];
}
else {
fillURL = fillDate[p];
}
cell.className = 'highlightCell';
cell.innerHTML = '<a href="/search?updated-max='+calYear+'-'+callmth+'-'+fillURL+'T23%3A59%3A59'+timeOffset+'&updated-min='+calYear+'-'+callmth+'-'+fillURL+'T00%3A00%3A00'+timeOffset+'" title="'+fillTitles[fillDate[p]].replace(/"/g,'\'')+'">'+dayCount+'</a>';
}
}
if( dayCount > fill[valxx]){
cell.innerHTML = ' ';
cell.className = 'emptyCell';
}
dayCount++;
}
}
visTotal = parseInt(startIndex) + parseInt(fill[valxx]) -1;
if(visTotal >35){
document.getElementById('lastRow').style.display = '';
}
}

function initCal(){
document.getElementById('blogger_calendar').style.display = 'block';
var bcInit = document.getElementById('bloggerCalendarList').getElementsByTagName('a');
var bcCount = document.getElementById('bloggerCalendarList').getElementsByTagName('li');
document.getElementById('bloggerCalendarList').style.display = 'none';
calHead = document.getElementById('bcHead');
tr = document.createElement('tr');
for(t = 0; t < 7; t++){
th = document.createElement('th');
th.abbr = headDays[t];
scope = 'col';
th.title = headDays[t];
th.innerHTML = headInitial[t];
tr.appendChild(th);
}
calHead.appendChild(tr);
for (x = 0; x <bcInit.length;x++){
var stripYear= bcInit[x].href.split('_')[0].split('/')[3];
var stripMonth = bcInit[x].href.split('_')[1];
bcList.push(stripMonth + ','+ stripYear + ',' + x);
bcNav.push(bcInit[x].href);
}
var sel = document.createElement('select');
sel.id = 'bcSelection';
sel.onchange = function(){var cSend = this.options[this.selectedIndex].value.split(',');openStatus();callArchive(cSend[0],cSend[1],cSend[2]);};
q = 0;
for (r = 0; r <bcList.length; r++){
var selText = bcInit[r].innerHTML;
var selCount = bcCount[r].innerHTML.split('> (')[1];
var selValue = bcList[r];
sel.options[q] = new Option(selText + ' ('+selCount,selValue);
q++
)
document.getElementById('bcaption').appendChild(sel);
var m = bcList[0].split(',')[0];
var y = bcList[0].split(',')[1];
callArchive(m,y,'0');
)

function timezoneSet(root){
var feed = root.feed;
var updated = feed.updated.$t;
var id = feed.id.$t;
bcBlogId = id.split('blog-')[1];
upLength = updated.length;
if(updated.charAt(upLength-1) == "Z"){timeOffset = "+00:00";}
else {timeOffset = updated.substring(upLength-6,upLength);}
timeOffset = encodeURIComponent(timeOffset);
}

//))>
</script>
<script src='/feeds/posts/summary?max-results=0&alt=json-in-script&callback=timezoneSet'></script>

Now save your template. It should save without errors, if not recheck your steps above. One more thing needs to be configured in your Archive Widget. Goto the Page Elements page, find your Archive Widget, and click to edit it. You'll see a screen like this

The title can be anything you want. The style MUST be Flat List as show. Options should NOT have Show Oldest Posts firsts checked. Archive Frequency MUST be Monthly. The Date Format can be anything you want. The calendar will accept whatever you decide here.

Save the widget. Then try it out. Go view your blog and if everything is correct you should have the calendar working now.

If you've made it this far, and it's working you'll note that without any style associated with it the calendar is a bit plain. But we've got some of that covered as well. Admire your work so far. Make sure it seems to function.

Good Luck

Label Cloud in New Blogger Template

noreply@blogger.com (Unknown) — Thu, 16 Apr 2009 18:12:00 +0000

Here is the code and setup information to use the Label Cloud in New Blogger. First you obviously have to have a blog on New Blogger, and you MUST be using the layouts templates,(this isn't available for classic templates, or FTP published blogs ) and you must have some posts labeled already. (There needs to be at least ONE label with more than ONE entry or the scripts hit a bug - so have at least one label with more than one entry before starting).

Make sure you backup your template before making any changes!

Log into Blogger and go to your layouts section. On the 'Page Elements' setup page make sure you have a label widget already installed where you want it (it can be moved around later). Then go to the Edit HTML settings and leave the widgets NOT exapanded. It will make things easier to deal with.

Now the code comes in 3 parts. A section for the stylesheet, a configurations section, and then the actual widget itself.

The first part to put in is the stylesheet section. The following code needs to be copied and inserted into your stylesheet, which in the layouts is marked out by the tags. Easiest thing to do is find the closing skin tag

]]></b:skin>

and place the code right BEFORE that.
Here it is, copy and paste without modification right now. I'll explain what can be tweaked later.

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

This next section is the configuration section for the Cloud. It also goes in the head of the template, but outside of the stylesheet part. Easiest thing to do again is to find the closing stylesheet tag

]]></b:skin>

But this time place the code right AFTER that line, but BEFORE the </head> tag. Here it is.

All of these settings can be changed but I'll explain them in a moment. The defaults will work for now.

Now the widget itself. Scroll down and find the label widget in your sidebar. It should look something like this.

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>

<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>

<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Copy the following code (from beginning widget tag to ending widget tag) and replace
the line above with it.

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}

var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

Click SAVE TEMPLATES button Finish

Now if all has gone well, and you have posts already labeled, then if you preview the blog you should see some form of the Cloud appearing. If it doesn't appear, then something went wrong. You should probably back out and try it again from the start.

Most likely the cloud with it's default settings won't be what you ultimately want. But all the colors and sizes are configurable to match your tastes. If the cloud is appearing in preview then you can go about changing some of the variables so they suit.

The settings in the Variables section will be where you make most of your adjustments. Here I'll explain what each setting does.

var cloudMin= 1;

This setting you can use to limit the number of labels shown (for example if you have a lot of labels). Leave the setting at 1 to show ALL labels. If you enter in a higher number, then only labels that have at least that number of entries will appear in the cloud.

var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;

The lines for

maxFontSize
maxColor

do what you may think they do. The first one sets the size (in pixels) of the label with the most amount entries. The maxColor sets the color of that entry (in RGB format). Similiar with the next two

minFontSize
minColor

Just these are for the label with the least amount of entries. Again the size is in pixels, the color is in RGB format. Any labels between the two will get their color/sizes based on how many labels they are, and where their entry count falls, giving the much desired cloud effect.

From my experimenting, there are many factors that make up a pleasant looking cloud. From color/size choice, to the number of actual labels, to how well dispersed the entries are amoung the labels. 3 Labels don't make a good cloud as there isn't much to work with. You just have to experiment around to see what looks good with your setup.

IMPORTANT, when change the color settings, Keep them in the format supplied. In between the [] and the numbers separated by commas. The default colors are BLUE for the max and BLACK for the min. You can select any valid RGB color combination. If you don't know what RGB colors are, don't worry. It's just a way of defining a color. You can use many charts on the Internet to get the correct RGB value for the color you want to try. Here's one that is fairly good.

RGB Color Code Chart

Remember, if you get the 3 sets of numbers to enter them in correctly. Inside the [ ] separated by commas.

Also experiment with different font sizes. Again it depends on how many entries, how dispersed they are, and how much room for the cloud is available as to what looks good.

The last variable there is

lcShowCount

This can either be false (default) or true. All this does is turn off/on the post count displayed next to the label. Usually in a 'traditional' cloud the count isn't used. But if you go to a 'flat' listing then it's sometimes useful to turn it on.

Now to the CSS section. Most people won't need to tweak these much, and it's not necessary to understand what all those entries are for. Most are just to make sure that other styling elements from the rest of your page don't inherit in and ruin the cloud. But there are a few that you may want to change to suit.

The first line

#labelCloud {text-align:center;font-family:arial,sans-serif;}

You could change the fonts used in the cloud here if you wanted. Also, the text-align statement can also be changed. I have it set to center by default but you could use

text-align:justify;
text-align:right;
text-align:left;

If those suit better.

The next line

#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}

Well don't worry about most of it unless you are a hardcore CSS'er. The only one of real importance is the first entry

display:inline;

You can change that to

display:block;

To get the 'Flat' (each entry on it's own separate line) listing of the weighted entries. Usually if that is set to block you would probably want to change the sort frequency from alphabetical to frequency. You do that by editing the widget from the Page Elements tab in Blogger.

And the last bit I'll mention is the line

#labelCloud .label-count

If you set the lcShowCount variable to true to show the post counts, you could change the color/size of those numbered entries with that line.

Good Luck

Tips to Make Multi Column on Blogger Template

noreply@blogger.com (Unknown) — Thu, 16 Apr 2009 17:48:00 +0000

To make footer part become one column, it isn’t difficult as you imagine. But, you need a little trick to make the footer blog have multi column. To make you understand, I advise you to try it. Make a new blog for this little experiment (don’t do it on your main blog). In order to avoid any accident that might be happen..

First preparation that we need to give attention most is, width of our column that will be split into multi column, quantity of column that we going to make, space between one column to another column. But, templates in Blogger are so much. To make a deal with those problems, let’s use template Minima. Minima is original template that provide by Blogger with optional color white. Number of column that we are going to make is three column.

Original Minima template has 660 pixel column widths. We are going to make three columns, if we calculate it : 660px divide by 3 = 220px. With space (code to make space is padding) between column is 10px. Based on result of my calculation, column that we will make is 205px.

This is the steps to make multi column on blogger template :

Step 1:

Don’t give a tick on white little box beside sentence, “expand widget template”. Or it will be twice more difficult.
Add the code below exactly above code ]]></b:skin>

/* bottom
==================== */

#bottom {
width: 660px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:#BDBABD;
padding: 15px 0 15px 0;
}

#bottom h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ff5a00;
font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}

#bottom ul {
padding: 0;
margin: 0;
}

#bottom ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #031c5d;
}

#bottom ul li a {
display: block;
padding: 0 10px;
color:#0701FD;
text-decoration: none;

}
#bottom ul li a:hover {
background: #B1ACB1;
}

#left-bottom {
width: 205px;
float: left;
padding-left:10px;
}

#center-bottom {
width: 205px;
float: left;
padding-left:10px;
}

#right-bottom {
width: 205px;
float: left;
padding: 0 5px 0 10px;
}

3. Head to body under part of template code. Find out codes like this:

<div id="footer-wrapper">
<b:section class="footer" id="footer">
</b:section></div>

4. Copy and paste code below exactly above of the previous code.

<div id="bottom">

<b:section class="bottom" id="left-bottom">

<b:section class="bottom" id="center-bottom">

<b:section class="bottom" id="right-bottom">

</b:section></b:section></b:section></div>

5. Click Save Template Buttons.

6. It’s done!

Step 2:

1. Click Page Element tab.

2. Are your new columns already become three ?

Good Luck

Install Onion Emoticons To Post Editor

noreply@blogger.com (Unknown) — Thu, 16 Apr 2009 17:16:00 +0000

Feel interesting to install this emoticon to your post editor? Please read till end. However, please remember this tutorial only work at Fire fox not for Internet Explorer and only at Compose not for Edit HTML. Here is the steps :

Or this is the full tutorial :

1. Download firefox here.

2. Open your firefox.

3. Install grease monkey here.

4. Click this script and this scrip then click install.

5. Go to your template editor, and find this code ]]></b:skin>

6. Copy and paste following codes and place above of ]]></b:skin>

img.emoticon {
padding: 0;
margin: 0;
border: 0;
}

7. Click Save Template button .

8. Done .

Add Favicon to Your Blog URL Address

noreply@blogger.com (Unknown) — Thu, 16 Apr 2009 16:24:00 +0000

Do you ever seen your blog URL? what do you see beside your blog URL ? yea.. beside your blog URL address is a blogger icon, see the following sreenshot :

The icon beside URL address named with Favicon ( favourite icon ). If you ask to me, do blogger icon can be changed with your icon or might be with your photo's ? the answer is you can do that. See the following sreenshot :

How about the step to do that? this is the steps :

1. First you must have an image, for example like this:

2. After that, you must change your image to be icon. For do that, you can use favicon Generator, please check out http://www.iconj.com

3 sign up or register

4 Login with your user

5 Click at "Icon Generate" or "Animated Favicon"

6 After the process is complete, click at My favicon code

7 Next step is login to blogger with your ID.

8 Click at "Layout".

9 Click at "Edit HTML" tab.

10 Click at "Download full template" link. Save your template into computer (importan !):

11 Find the code :

12 Place your "Favicon code" below of . For example :


<link rel="shortcut icon" href="http://www.iconj.com/favicon.php?user=can301" type="image/x-icon" />
<link rel="icon" href="http://www.iconj.com/favicon2.php?user=can301" type="image/gif" />


13 Click "Save Template" button.

14 Done.

Now you have favicon at your blog URL addres.

How To Make A Link Into Colorful Winks

noreply@blogger.com (Unknown) — Wed, 15 Apr 2009 15:18:00 +0000

Just follow the following steps if you would like to know how to do it.

1 Log in into blogger using your ID

2 Click Layout

3 Click “Edit HTML” tab and find this code </head>

4 Copy code below and paste into above the </head>

<script scr='http://h1.ripway.com/Can301/rainbow.js'/>

</head>

5. Finally, click on "SAVE TEMPLATE" button and done

Now, View your blog and put the mouse on it. If the link has wink and the color changes automatically, it means it works well.

Make a News Paper Style Drop Caps

noreply@blogger.com (Unknown) — Wed, 15 Apr 2009 14:53:00 +0000

This is more then easy. this is the steps:

Step #1 :

1. Login to blogger with your ID

2. After entering the dashboard page , click Layout.

3. Then click edit HTML tab.

4. Click the Download full template link. Save your template:

5. Go to your template code

6. Copy and paste the following code above of ]]></b:skin>

/* magazine drop caps */

.magazine {
float:left;
color:#000;
background:#fff;
line-height:80px;
padding-:1px 5px 0 0;
font-family:times;
font-size:100px;
}

7. Click Save Template button

8. Step #1 is finish.

Step #2 :

1. Click Setting tab.

2. Click formatting tab.

3. Go to lower side. you will find a blank text are beside Post Template. Fill that blank text area with this code :

<span class="magazine"> </span>

4. Click Save settings button.

5. finish

How to post your article?

When you post your article, choose tab. and you will see the code below :

<span class="magazine"> </span>

Place the first alphabet between and

Example :

<span class="magazine">M</span>elilea Botanical Skin Care Series is the result of advanced technology developed by the Melilea Research Institute, each of the seven products in this range has been uniquely formulated to ensure maximum efficacy.

Publish your article and finish.

How make the menu drop down

noreply@blogger.com (Unknown) — Wed, 15 Apr 2009 14:50:00 +0000

Do you ever seen the menu such as menu below ? please click at the menu to see the effect of this menu :

The name of this menu is drop down menu.

To make the dropdown menu, you only make the code be like this :

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu><option value=0 selected> Your text title here! </option>

<option value=" your address link here "> the text here will be display </option> </select></form>

For example, the code such as the following :

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1" name="menu">

<option>- Blog Tutorial - </option>



<option value="http://businternet.blogspot.com/2009/04/how-to-get-carousel-viewer.html">Carousel Viewer</option>

<option value="http://businternet.blogspot.com/2009/03/automatic-link-text-and-banner.html">Automatic Link Exchange</option>

<option value="http://businternet.blogspot.com/2009/03/how-to-create-animation-label-cloud.html">Animation Label Cloud</option>

</select></form>

This is the result :

Now, how to add this code to your blog. This is the step :

1. Login to blogger with your ID

2. After entering the dasboard page , click Layout .

3. Click at Page Element tab. See the picture below :

4. Click at Add a Page element.

5. After emerging pop up window , Klik add to blog button for the things HTML/JavaScript. See the picture following :

6. Copy and paste the code below into available column :

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1" name="menu">

<option>- Blog Tutorial - </option>



<option value="http://businternet.blogspot.com/2009/04/how-to-get-carousel-viewer.html">Carousel Viewer</option>

<option value="http://businternet.blogspot.com/2009/03/automatic-link-text-and-banner.html">Automatic Link Exchange</option>

<optionvalue="http://businternet.blogspot.com/2009/03/how-to-create-animation-label-cloud.html">Animation Label Cloud</option>

</select></form>

7. Click save changes

8. Finish.

Comment Blog Send to @mail

noreply@blogger.com (Unknown) — Wed, 15 Apr 2009 14:49:00 +0000

This tips is about every your visitor give a comment at your blog automatically sending to your @mail inbox. So that every the comment entering in blog direct in sending automatically to yout @mail, hence you have to do setting at setting tab.

This is the steps :

1. Login to blogger with your ID.

2. Click Settings.

3. Click Comments.

4. Scroll to underside and you will find a box near the article Comment Notification Address, write your email address inside the box. for example : jalupapang2000@yahoo.com

5. Click Save settings

6. Finish.

Now you'd get an email from blogger.com every your blog visitor give a comment.

Adding an Image Beside Post Title

noreply@blogger.com (Unknown) — Wed, 15 Apr 2009 14:43:00 +0000

How to adding a small image at the post title ? here is the steps.

Step #1

You must have a small image image, for example like this :

Step #2

Upload your small image to image hosting. For example : you can upload your image to blogger, Yahoo geocities, Google pages, or another free image hosting. If you has been uploading your image, please get the image code. for example : I'm has been upload an image to tinypic.com and the image code is :

http://i42.tinypic.com/mlii5l.jpg

So that the picture can appear at your blog, you must create the code like this :

<img src="http://i42.tinypic.com/mlii5l.jpg"/>

And the image will appear like this :

Step #3

Add the image code to your template code. Here are the steps to add image code to your blog.

Or, do you still using old (classic) template ? Never mind, bellow is the steps adding image code to classic template :

1. Login to blogger with your ID.

2. At the dashboard page, click Template.

3. Click Edit HTML.

4. Back up your template code (important!).

5. Find this code :

<blogitemtitle$>

6. Replace your image code beside above code :

<img src="http://i42.tinypic.com/mlii5l.jpg"/> <blogitemtitle$>

7. Click Save Settings button.

8. Done. Now your every post title will appear with your small image.

This is for new blogger template :

1. Login to Blogger with your ID.

2. At the dashboard page, click Layout.

3. Click Edit HTML.

4. Back Up your template code (important!).

5. Please mark the little box beside Expand Widget Template. Wait for a moment

6. Go to your template code, and find the code like this :

<a href="data:post.url"><data:post.title></data:post.title></a>
7. Add your image code like this :

<a href="data:post.url"> <img src="http://i42.tinypic.com/mlii5l.jpg" /> <data:post.title></data:post.title></a>

8. Click SAVE TEMPLATE button.

9. Done.

Now your every post title will appear with your small image.

Making Read More plus the title of article

noreply@blogger.com (Unknown) — Wed, 15 Apr 2009 14:43:00 +0000

To make the function of Read More is not too difficult, you only need to add a few code at read more code that you have ever made before in your template. Here are the steps :

Step #1 :

1. Login to blogger with your ID

2. In the dashboard page , click Layout.

3. Then click edit HTML tab.

4. Click the Download full template link. Save your template (very important)

5. Please mark the little box beside Expand Widget Templates. Wait for a moment.

6 Go to your template code, and find the code like this :

<data:post.body/>

7 Delete the above code and change with this code :

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<strong><a expr:href='data:post.url'>Continue reading “ <data:post.title/>”  »» </a></strong>
</b:if>

Step #2 :

1. Click Setting tab.

2. Click formatting tab.

3. Go to lower side. you will find a blank text are beside Post Template. Fill that blank text area with this code :

<span class="fullpost"> </span>

4. Click Save settings button.

5. Step #2 is done.

How to post your article?

When you post your article, choose and you will see the code below :

<div class="fullpost">

</div>

Place the first paragraps above of :

<div class="fullpost">

and place the rest of paragrap under of :

<div class="fullpost">

and above of :

</div>

and then publish your post. Done.

Now, see the result! The function of Read More will always have the title of your article, too.

If you still feel confuse, this is the example how to place your article:

By offering similar elements of popular social networking sites and combining a monetization method for content producers in one solution, Flixya offers a powerful method to publish and monetize on line content and generate revenue. Flixya.com offers a member focused platform where people can share videos, photos and blogs. The members keep all ad revenue generated from each piece of content that is contributed.<div class="fullpost">

Flixya is the first social networking community to offer 100% revenue to participating members. We feel Flixya represents the second generation of social networking and raises the bar for the future of online social responsibility.
</div>

Good Luck!

Add A Shoutbox To Your Blog

noreply@blogger.com (Unknown) — Wed, 15 Apr 2009 14:27:00 +0000

Shoutbox is a little box for sending a short message, with shoutbox you can chat with your blog visitor. An example of shoutbox is be like this :

&amp;amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;a href="http://www5.shoutmix.com/?can301"&amp;amp;amp;amp;amp;amp;gt;View shoutbox&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;amp;gt;

ShoutMix chat widget

Where you can get a shoutbox? there is very much site provide this service. One of them is http://www.shoutmix.com. At this site you can get a shoutbox for free (basic account). This is the steps for get a shoutbox at shoutmix :

Please visit http://www.shoutmix.com.
Before you must register, please click "CREAT YOUR SHOUTBOX NOW", or you can click "SIGN UP" at upper tab.
If you are has registered at shoutmix, please login with your ID.
At the column with title Style, click appearance.
Then click pull down menu beside Load From Preset for setting your shoutbox, please select which you want. If it is done, don't forget to click Save Setting.
To get HTML code for your shoutbox, please click "Use Shoutbox"
Click at "Place Shoutbox on web page", write the width and hight you want.
Copy all of the HTML code at text area below of "Generated Codes", paste at notpad and then save to your computer.
Click "Log out" and then close.
Done. now you have a shoutbox code for add to your blog.

Now you can add your shoutbox code to your blog, please following the steps :

1. Login to blogger with your ID.

2. After entering the dasboard page , click Layout.

3. Click at Page Element tab. See the picture below :

4. Click at Add a Page element.

5. After emerging pop up window , Klik add to blog button for the things HTML/JavaScript. See the picture following :

6. Open your Shoutbox code, copy and then paste into available column.

7. Click save changes

8. Done.

Now you have a Shoutbox at your blog.