Blogger Tricks |Blogger Templates |Blogger Widgets

Flickr Slideshow Generator

2009-03-11T22:03:00.000-07:00

Add Flickr Slidehsow in Blogs, Web page Easily, with our online Flickr Slideshow Generator

Flickr Slideshow Generator BETA

Flickr Slideshow Generator allows you to generate the HTML necessary to embed a custom Flickr Slideshow in your page or blog.

Stuff that Flickr Slideshow Generator wouldn't do (at least by now...)

Work on MySpace or LiveJournal (these websites have restricted it)
Allow to change the background color
Set the order in which the pictures are showed
Automatically loop slideshow when it finish

How to Use it in Blogger: Go To Layout=>Add Page Element =>HTML/JAVASCRIPT
Paste the HTML Code. Save

Preview:

How to customize Blogger Meta Tag Title For SEO.

2009-03-11T05:31:00.000-07:00

To Customize the Blogger Meta Tag Title For Better Search Engine Optimized Blog Use the Below Tricks

How to Make Tag or Label Cloud in New Blogger Template

2009-03-10T07:30:00.000-07:00

How to make Tag / Label Cloud in New Blogger Template (xml).

In order to make a label cloud, I will use the technique of phydeaux. Before reading and applying this tutorial, make sure that you have added label element in your blog. Before doing this one, make sure that your blog uses a Label. Ok my friends, here are the steps;

Sign in into blogger
Click Layout menu
Click Edit HTML tab
Click Download Full Template, and then save the data to back up if you make mistakes in editing the template code.
Click Expand Widget Templates to give a check.

Read Complete Post Here..

How to Make Multi Column on Blogger Template

2009-03-10T07:27:00.000-07:00

I would like to share my trick and tips to make multi column on blogger template. Like in wordpress, maybe you ever see any footer column which split into 2, 3, or even 4 parts. The question is, “do we can make the same thing in Blogger?” Of course we do. It will be very easy to build. Do you want to know more? Read it till end!

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 ]]>

/* 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;
}
Head to body under part of template code. Find out codes like this:
Copy and paste code below exactly above of the previous code.
Click Save Template Buttons.
It’s done!

Step 2:

Click Page Element tab.
Are your new columns already become three?

If it hasn’t success yet, you must be missing something. If you already success, congratulations on you.

How to Add an Image Beside Post Title

2009-03-10T07:26:00.001-07:00

Don’t you want your blog look beauty? Maybe you can add several accessories. One of them is adding a small image beside post title, for example : please take a look the image below :

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 Blogger and the image code is :

http://bp1.blogger.com/_c-XFk4OciTE/R9tFIn8-17I/AAAAAAAAAag/WZAbe5f7GaE/s400/mypencil.jpg

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

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 :

Login to blogger with your ID.
At the dashboard page, click Template.
Click Edit HTML.
Back up your template code (important!).
Find this code :
Replace your image code beside above code :
Click Save Settings button.
Done. Now your every post title will appear with your small image.

This is for new blogger template (beta template) :

Login to Blogger with your ID.
At the dashboard page, click Layout.
Click Edit HTML.
Back Up your template code (important!).
Please mark the little box beside Expand Widget Template. Wait for a moment
Go to your template code, and find the code like this :
Add your image code like this :
Click SAVE TEMPLATE button.
Done. Now your every post title will appear with your small image.

All right brothers, see you at my next tutorial.

Feel interesting for this post? Please Digg it!.

How to Add Live Traffic Tracking Tool to Blog

2009-03-10T07:25:00.000-07:00

Want to know where are your visitor come from for live? If yes, you can add blog tool from http://feedjit.com. With web or blog tool from http://feedjit.com, you can know your visitor come from. Easy install to blog and without signup before, grab the code and add to your sidebar and you have a live tracking tool for free.

Below is the example widget from feedjit.com :

Live Traffic Feed

Free SEO ebook : Search Engine Optimization

2009-03-10T07:24:00.000-07:00

Want to get 1 top ranking at Google Search? Need ton traffic to your site? Optimize your site or blog. Don't know what should be do with your blog? Download this SEO e-book and read how to optimize your blog. The creator of this free e-book is Brad Callen. I'm loving this e-book because very simple but complete, good tips and trick. So, don't waiting untill tomorow, go a head to download this e-book. File size to download is only 1.66 MB. Please click at the image button :

How to Split Blog header ,make it two column

2009-03-10T07:22:00.000-07:00

Tomorrow night, one of my blog visitors has been ask to me how to insert search engine at the header blog? Hmmmm... All right... I try to answer this question. To inserting a search engine or everything at the header column, you must split your header column became 2 or 3 column. For example I'm has been split my header column became 2 column.

Much technique to split header column, however I will show you my technique at my free template magazine template 1, so before you exercise to split header column please download template here! And then please create a new blog for practise.

Are you ready to do some action with me? 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;        
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) 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 :

Delete above code and replace with this code :

Click SAVE CHANGES button and done.

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

Ok guys, now you can add anything at the new element in the right header.

If you feel interest with this post, please digg it.

Make a D'tree Menu at Bloggers Blog

2009-03-10T07:20:00.000-07:00

Did you ever seen Window Explorer? At Window Explorer have a beauty menu likely my left banner. Did you know, you can make that menu at your blog. For example, please checkout my example blog here!, this menu named D'tree menu.

Feel interest to make this menu at your blog? here is the steps to make a d'tree menu :

#Step 1

Click layout.

Click Edit HTML tab.

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

Go to your template code, and find the code .

Copy and then paste following code above of :

Click Save Template button.

Step 31 is done.

#Step 2

Click Page Elements.

Click Add a Page Element to make a element.

Choose for HTML/Javascript.

Copy and paste the following code at the element :

<div class="dtree"> <p><a href="javascript: d.openAll();"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><b>Close all</b></a></p> <script type="text/javascript">  </script> </div>

Click SAVE CHANGES button.

Done. Now you have a d'tree menu at your blog.

Notes : Original code is from http://www.destroydrop.com. All of links at this tutorial is my link, you must changing the links with yourself links.

Happy blogging!

How to Remove the Number of Label

2009-03-10T07:15:00.002-07:00

Somebody ask to me, how how to remove teh number of label? allright, do you understand the meaning of the above question? please take a look at the following picture :

Do you wish to eliminate the number at lable too? this is the steps :

After entering the dashboard page , click Layout. Please saw the picture :

Then click edit HTML tab. Please saw the picture :

Click the Download full template link. Save your template:

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

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

()

If you was found the above code, please delete.

Click Save Template button.

Done. Please see the result.

Now your label will not with number.

If you enjoy this post please Digg It!

How to Add Digg Button to Post Page

2009-03-10T07:15:00.001-07:00

With Digg button you can easy to submit your post with your self or with your visitor to digg.com. Feel interesred to add digg button to your blog? this the steps :

After entering the dashboard page , click Layout. Please see the picture :

Then click edit HTML tab. Please see the picture :

Click the Download full template link. Save your template:

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

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

Delete the code above and alter with following code :