To show your recent post on the sidebar is very easy, you just follow the instruction below then you will see your recent post on your blog sidebar. here’s the steps :
1. Login to Blogger then Chose "Layout"
2. Click on "Add page element" (chose where you want to put it) then chose "HTML/Javascript"
3. Copy the code below and put it in the "content" box.
4. Change YOURBLOGNAME with your blogname.
5. The number "10" it’s amount of recent post that will be shown, You can change it.
6. Click Save.
Get Try it .......
To show your recent post on the sidebar is very easy, you just follow the instruction below then you will see your recent post on your blog sidebar. here’s the steps :
1. Login to Blogger then Chose "Layout"
2. Click on "Add page element" (chose where you want to put it) then chose "HTML/Javascript"
3. Copy the code below and put it in the "content" box.
4. Change YOURBLOGNAME with your blogname.
5. The number "10" it’s amount of recent post that will be shown, You can change it.
6. Click Save.
Get Try it .......
Sometimes ago I have posted an articel about "How to Create Commnet Box Under Posting" it use haloscan comment box. It working well for some bloger and bad for some bloger too. If you failed or dislike using haloscan comment box, may be this will be alternatifvfor you. This comment box is created by intensedebate.com, this comment box can be use as a widget, and to apply this widget is very simple, and to remove this is more simple it just like when you remove Page Element from your blog. Ok, if you interest to try this widget I’ll show you how to put it.
1. Login to Blogger.com the chose "Layout --> Edit HTML", click on the link "Download Full Template" to backup your template first
2. Then go to intensedebate.com site sgn up, the login and go to "dashboard"
3. On the up right you will see "add blog" button, click the button
4. Then you will see a box to insert your blog url, fill it then press the button .
5. Then you will see a page like this:
6. For easy, chose"Widget (Recomended)".
7. There are some choice on the "Replace Comment System". Chose "On post without comments" if you want the comment box show under no comment articel (your previouse comment still exist). If you want the comment box exist on every posting chose "On all blog post" (You will lose your previouse comments, but it can be restored).
8. The click "Complete Installation" button.
9. You will see the page like this :
10. Chose your blog then click "ADD WIDGET" button.
Finish...
Sometimes ago I have posted an articel about "How to Create Commnet Box Under Posting" it use haloscan comment box. It working well for some bloger and bad for some bloger too. If you failed or dislike using haloscan comment box, may be this will be alternatifvfor you. This comment box is created by intensedebate.com, this comment box can be use as a widget, and to apply this widget is very simple, and to remove this is more simple it just like when you remove Page Element from your blog. Ok, if you interest to try this widget I’ll show you how to put it.
1. Login to Blogger.com the chose "Layout --> Edit HTML", click on the link "Download Full Template" to backup your template first
2. Then go to intensedebate.com site sgn up, the login and go to "dashboard"
3. On the up right you will see "add blog" button, click the button
4. Then you will see a box to insert your blog url, fill it then press the button .
5. Then you will see a page like this:
6. For easy, chose"Widget (Recomended)".
7. There are some choice on the "Replace Comment System". Chose "On post without comments" if you want the comment box show under no comment articel (your previouse comment still exist). If you want the comment box exist on every posting chose "On all blog post" (You will lose your previouse comments, but it can be restored).
8. The click "Complete Installation" button.
9. You will see the page like this :
10. Chose your blog then click "ADD WIDGET" button.
Finish...
DTree is a menu that be arranged like a tree. It will be like menu when you open "windows Explorer". It's very usefull if you have many posting (articel) in your blog. It can contain many link in small space. It will be like the below image :
Here's the step by step tutorial to create "DTree Menu" in blogger:
1. Login to Blogger, go to "Layout --> Edit HTML"
2. Put the code below over
3. Save your editting.
4. Now edit end copy the below code then put on your sidebar.
Change "link.html" with your own link.
The first number must be unique (d.add(1,0,'Node 1','link.html');
The second number is child of the number (look at the color).
You can add the below code to add a new node with your own image
d.add(10,0,'Profile','link.html','','','http://blogoholic.info/files/dtree/trash.gif');
change "http://blogoholic.info/files/dtree/trash.gif" with your own image.
it will be like this :
DTree is a menu that be arranged like a tree. It will be like menu when you open "windows Explorer". It's very usefull if you have many posting (articel) in your blog. It can contain many link in small space. It will be like the below image :
Here's the step by step tutorial to create "DTree Menu" in blogger:
1. Login to Blogger, go to "Layout --> Edit HTML"
2. Put the code below over
3. Save your editting.
4. Now edit end copy the below code then put on your sidebar.
Change "link.html" with your own link.
The first number must be unique (d.add(1,0,'Node 1','link.html');
The second number is child of the number (look at the color).
You can add the below code to add a new node with your own image
d.add(10,0,'Profile','link.html','','','http://kendhin.890m.com/dtree/trash.gif');
change "http://kendhin.890m.com/dtree/trash.gif" with your own image.
it will be like this :
This tutorial is to create simple blogger template, with simple methods. The easiest way to create blogger template is by edit a template. But don't worry, althought this is a simple methods but it can produce a beautifull template, it depend on how you design it. This tutorial is not to create blogger template from beginning but this is to create template by editing a template. Ok lets begin.
Before we begin I suggest you to create a new blog,weI don't wont to destroy your blog.
To follow this tutorial you have to download this template first. downlad template.
We will create a template that contain four main elements, (Bakground, Header, Main and Footer) Like the image :
So you have to create the four elements, You can use Image editor software like Adobe Photoshop, Corel Draw, Paint, etc.
Here's the detail to design it:
1. Create a design like above image.
2. On the backgroun part it should be a Pattern/Tile.
3. Cut for every part (Background, Header, Main and Footer)
it should be like this :
4. Upload your part image on the webhosting like geocities or on the image hosting like photobucket.
Alll right, now we will arrange these part to the HTML.
1. Go to blogger then go to "EDIT HTML" menu.
2. Click on the "Brows" button to upload above template or this template
3. Find this code
body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: #323232 url('http://blogoholic.info/files/bg.jpg') repeat-x top left; }
4. Change the bold text with your image location
5. Then find this code, and change the blod text with your image location :
#center {background: #ffffff url('http://blogoholic.info/files/body.jpg') repeat-y top center;}
6. Find the code below and change the bold text with your image location:
#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://blogoholic.info/files/head.jpg') no-repeat top center; }
7. Find the code below and change the bold text with your image location:
#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://blogoholic.info/files/foot.jpg') repeat-y top center; }
8. Now find the code below
#outer-wrapper { width: 898px; margin: 0px auto 0; text-align: justify; }
this code width: 898px it's the widht of your blog, change it according to your image.
#main { float: left; width: 445px; margin: 5px; padding: 0px 0px 0px 10px; line-height: 1.5em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; }
This code width: 445px; is size/widht of main, you can change it.
#sidebar { float: right; width: 153px; padding-right: 50px; font-size: 83%; color: $sidebartextcolor; line-height: 1.4em; word-wrap: break-word; overflow: hidden; }
#ads-wrapper {float: left; width: 195px; padding-left: 10px; word-wrap: break-word; overflow: hidden; }
This code width: 153px; is widht of your right sidebar. and this code width: 195px; is widht your left sidebar. And this code padding-right: 50px; is gap of text on the right sidebar with right line. And this code padding-left: 10px; is gap of text on the left sidebar with left line.
#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://blogoholic.info/files/head.jpg') no-repeat top center; }
This code height:196px; width:898; is height and widht of your header, Change it according to your Header Image.
#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://blogoholic.info/files/foot.jpg') no-repeat top center; }
This code width: 898px; height:80px; is widht and height of your footer.
9. Try to modify and preview it until looks good.
10. If it looks good you can save it.
GOOOD LUCK!!!!!!
This tutorial is to create simple blogger template, with simple methods. The easiest way to create blogger template is by edit a template. But don't worry, althought this is a simple methods but it can produce a beautifull template, it depend on how you design it. This tutorial is not to create blogger template from beginning but this is to create template by editing a template. Ok lets begin.
Before we begin I suggest you to create a new blog,weI don't wont to destroy your blog.
To follow this tutorial you have to download this template first. downlad template.
We will create a template that contain four main elements, (Bakground, Header, Main and Footer) Like the image :
So you have to create the four elements, You can use Image editor software like Adobe Photoshop, Corel Draw, Paint, etc.
Here's the detail to design it:
1. Create a design like above image.
2. On the backgroun part it should be a Pattern/Tile.
3. Cut for every part (Background, Header, Main and Footer)
it should be like this :
4. Upload your part image on the webhosting like geocities or on the image hosting like photobucket.
Alll right, now we will arrange these part to the HTML.
1. Go to blogger then go to "EDIT HTML" menu.
2. Click on the "Brows" button to upload above template or this template
3. Find this code
body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: #323232 url('http://kendhin.890m.com/template/bg.jpg') repeat-x top left; }
4. Change the bold text with your image location
5. Then find this code, and change the blod text with your image location :
#center {background: #ffffff url('http://kendhin.890m.com/template/main.jpg') repeat-y top center;}
6. Find the code below and change the bold text with your image location:
#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }
7. Find the code below and change the bold text with your image location:
#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') repeat-y top center; }
8. Now find the code below
#outer-wrapper { width: 898px; margin: 0px auto 0; text-align: justify; }
this code width: 898px it's the widht of your blog, change it according to your image.
#main { float: left; width: 445px; margin: 5px; padding: 0px 0px 0px 10px; line-height: 1.5em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; }
This code width: 445px; is size/widht of main, you can change it.
#sidebar { float: right; width: 153px; padding-right: 50px; font-size: 83%; color: $sidebartextcolor; line-height: 1.4em; word-wrap: break-word; overflow: hidden; }
#ads-wrapper {float: left; width: 195px; padding-left: 10px; word-wrap: break-word; overflow: hidden; }
This code width: 153px; is widht of your right sidebar. and this code width: 195px; is widht your left sidebar. And this code padding-right: 50px; is gap of text on the right sidebar with right line. And this code padding-left: 10px; is gap of text on the left sidebar with left line.
#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }
This code height:196px; width:898; is height and widht of your header, Change it according to your Header Image.
#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') no-repeat top center; }
This code width: 898px; height:80px; is widht and height of your footer.
9. Try to modify and preview it until looks good.
10. If it looks good you can save it.
GOOOD LUCK!!!!!!
There are some reason for bloger to hide Post date, time and author. May be they want to see their blog looks clear or everything. Now I will show you the trick to "hide your post date, time and or author". the mothods is very simple, just find the code that I pointed to you and delete it. You can chose which part want to delete, date only, time only, author only or it all. Ok, if you decided to do it lets begin the hack.
1. Login to blogger the go to "Layout --> Edit HTML"
2. Click on the "Download Full Template" to back up your template first.
3. Check on the "Expand Widget Templates" check box.
Hide Post Date
find this code and delete it.
Hide Post Time
find this code and delete it.
.
Hide Post Author
find this code and delete it.
.
5. Save your editting
Good Luck ............
Related Post :
Change Post Date Become Calender Icon
How to Hide Your Post Date, Time and/or Author
Posted by Funniest Pictures at 01:15 Labels: Blogger HackThere are some reason for bloger to hide Post date, time and author. May be they want to see their blog looks clear or everything. Now I will show you the trick to "hide your post date, time and or author". the mothods is very simple, just find the code that I pointed to you and delete it. You can chose which part want to delete, date only, time only, author only or it all. Ok, if you decided to do it lets begin the hack.
1. Login to blogger the go to "Layout --> Edit HTML"
2. Click on the "Download Full Template" to back up your template first.
3. Check on the "Expand Widget Templates" check box.
Hide Post Date
find this code and delete it.
Hide Post Time
find this code and delete it.
.
Hide Post Author
find this code and delete it.
.
5. Save your editting
Good Luck ............
Related Post :
Change Post Date Become Calender Icon
This is the way to show or hide your full post on the main page of your blog. This is different from my old "Read More " methods. If in old "Read More" Methods it will show "Read More" link, then if you click the link you will load and go to another page that will show your full post/articel. But with my next methode below, if you click the link you will see your full post/articel in the same page and it no needs time to load, it only expand your full post. Do you want to try it? here is the trick:
1. Login to Blogger, Chose "Layout --> Template --> Edit HTML
2. Click "Download Full Templates" link to back up your template.
3. Check on the "Expand Template Wdiget" Check Box.
4. Copy the code below and paste above this code
10. So, the full code will like this :expr:id='"post-" + data:post.id'>
11. Save Your Editing.
12. Go to menu "Setting --> Formatting"
13. On the bottom page you will see a box beside text "Post Template". Copy the code below and paste in to the box
14. Save your setting.
15 If you want to post an articel place your part articel above this code . Then the remain or full post put between this code and this
GOOD LUCK>>>>>
This is the way to show or hide your full post on the main page of your blog. This is different from my old "Read More " methods. If in old "Read More" Methods it will show "Read More" link, then if you click the link you will load and go to another page that will show your full post/articel. But with my next methode below, if you click the link you will see your full post/articel in the same page and it no needs time to load, it only expand your full post. Do you want to try it? here is the trick:
1. Login to Blogger, Chose "Layout --> Template --> Edit HTML
2. Click "Download Full Templates" link to back up your template.
3. Check on the "Expand Template Wdiget" Check Box.
4. Copy the code below and paste above this code
10. So, the full code will like this :
expr:id='"post-" + data:post.id'>
11. Save Your Editing.
12. Go to menu "Setting --> Formatting"
13. On the bottom page you will see a box beside text "Post Template". Copy the code below and paste in to the box
14. Save your setting.
15 If you want to post an articel place your part articel above this code . Then the remain or full post put between this code and this
GOOD LUCK>>>>>
You can advertise on this blog with low cost. Just for $15/Month you can put your banner (15px x 15px) here.
If you interest to advertise on this blog, send email to kendhin_x@yahoo.com.
Thanks.
Subscribe to:
Posts (Atom)