Wednesday, 27 February 2008
How to Show Recent Post on the Sidebar
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.
<script src="http://www.geocities.com/uddin_81/recent-post.js"></script>
<script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://YOURBLOGNAME.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>
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 .......
How to Show Recent Post on the Sidebar
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.
<script src="http://www.geocities.com/uddin_81/recent-post.js"></script>
<script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://YOURBLOGNAME.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>
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 .......
Thursday, 21 February 2008
Widget to Put Comment Box Under Posting
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...
Widget to Put Comment Box Under Posting
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...
Wednesday, 20 February 2008
Cool Awn Applets to adorn your Ubuntu Linux Desktop
Installation of Awn applets
#FILE: /etc/apt/sources.list
deb http://ppa.launchpad.net/reacocard-awn/ubuntu gutsy main
$ sudo apt-get update
$ sudo apt-get install awn-core-applets-bzr
A few cool AWN applets
Here are a couple of very nice applets which caught my fancy.
Tuesday, 19 February 2008
Tutorial to Create DTree Menu
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 <head>
<link rel="StyleSheet" href="http://blogoholic.info/files/dtree/dtree.css" type="text/css" />
<script type="text/javascript" src="http://blogoholic.info/files/dtree/dtree.js"></script>
3. Save your editting.
4. Now edit end copy the below code then put on your sidebar.
<div class="dtree">
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','link.html');
d.add(2,1,'Node 1.1','link.html');
d.add(3,2,'Node 1.1.1','link.html');
d.add(4,3,'Node 1.1.1.1','link.html');
d.add(5,0,'Node 2','link.html');
d.add(6,5,'Node 2.1','link.html');
d.add(7,5,'Node 2.2','link.html');
d.add(8,0,'Node 3','link.html');
d.add(9,0,'Node 5','link.html');
document.write(d);
//-->
</script>
</div>
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 :
Tutorial to Create DTree Menu
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 <head>
<link rel="StyleSheet" href="http://blogoholic.info/files/dtree/dtree.css" type="text/css" />
<script type="text/javascript" src="http://blogoholic.info/files/dtree/dtree.js"></script>
3. Save your editting.
4. Now edit end copy the below code then put on your sidebar.
<div class="dtree">
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','link.html');
d.add(2,1,'Node 1.1','link.html');
d.add(3,2,'Node 1.1.1','link.html');
d.add(4,3,'Node 1.1.1.1','link.html');
d.add(5,0,'Node 2','link.html');
d.add(6,5,'Node 2.1','link.html');
d.add(7,5,'Node 2.2','link.html');
d.add(8,0,'Node 3','link.html');
d.add(9,0,'Node 5','link.html');
document.write(d);
//-->
</script>
</div>
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 :
Sunday, 17 February 2008
Interview with Linus Torvalds
Install Avant Window Navigator (AWN) in Ubuntu Linux
- The Dock
- AWN window navigator and
- The shared library 'libawn' which is used to develop applets which enhance the functionality of AWN. The applets can be coded in either 'C' or 'Python' language.
To install AWN on your Linux machine, it has to meet certain conditions. Them being -
- Xgl or AIGLX installed - in short your computer should be capable of compositing support. This mostly means if you have an Nvidia or ATI video card, you should download and install the proprietary drivers.
- A compositing manager installed. A few examples of compositing managers are Beryl/Compiz/Compiz Fusion, Cairo, Xfce, Metacity, xcompmgr and so on.
In Ubuntu you can enable compositing manager by clicking System>Preferences> Appearance and then enabling Visual effects from the 'Visual Effects' tab in the Appearance dialog.
Installation
It opens the "Software sources" dialog box.
$ sudo apt-get update
$ sudo apt-get install avant-window-navigator awn-manager
A few AWN tips
- To add applications to the AWN dock, just drag and drop icons from the Applications menu or from Nautilus (/usr/share/applications).
- You can right click on the AWN dock and select properties to open the 'Avant Window Manager' dialog where you can change the look and feel of the dock and add additional applets.
Thursday, 14 February 2008
The art of disk partitioning explained
Tuesday, 12 February 2008
Sun Microsystems acquires Innotek - the makers of Virtualbox
I have personally found Virtualbox to use less memory resources than Vmware server. It comes with an intuitive GUI And with some point and clicking you can set up any operating system to run as a client OS on your machine.
Tutorial to Create Blogger Template
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 :
background
header
main
footer
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!!!!!!
Tutorial to Create Blogger Template
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 :
background
header
main
footer
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!!!!!!
Monday, 11 February 2008
Python scripts vs Bash scripts in Linux
Now in this file (myfirstscript.sh), enter the following line.
#!/usr/bin/bash
$ which bash
/usr/bin/bash
# Continuation of the above script ...
# Now lets enter a few commands in this script ...
ls -l
sleep 2
who
sleep 2
w
$ chmod u+x myfirstscript.shThis lets you execute the script by its name as follows :
$ ./myfirstscript.sh
Saturday, 9 February 2008
How to Hide Your Post Date, Time and/or Author
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.
<data:post.dateHeader/>.
Hide Post Time
find this code and delete it.
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark'
title='permanent link'><abbr class='published'
expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>.
Hide Post Author
find this code and delete it.
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
.
5. Save your editting
Good Luck ............
Related Post :
Change Post Date Become Calender Icon
How to Hide Your Post Date, Time and/or Author
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.
<data:post.dateHeader/>.
Hide Post Time
find this code and delete it.
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark'
title='permanent link'><abbr class='published'
expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>.
Hide Post Author
find this code and delete it.
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
.
5. Save your editting
Good Luck ............
Related Post :
Change Post Date Become Calender Icon
Wednesday, 6 February 2008
Fedora 9 (Sulphur) Alpha released
- GNOME 2.21
- KDE 4.0 as the default KDE desktop
- Firefox 3 Beta 2
- Anaconda installer improvements - Now you can resize the Ext2, Ext3 and NTFS partitions among other things.
- PackageKit - This is to Fedora what Synaptic is to Debian based Linux distribution. PackageKit acts as a front end to Yum.
- Decrease the startup time of X window system.
- Linux kernel 2.6.24
- Ext4 filesystem support - Ext4 is more scalable and better performing than Ext3.
Tuesday, 5 February 2008
Show or Hide Your Full Post in Blogger
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 </head>
<script src='http://kendhin.890m.com/Readmore.js' type='text/javascript'/>
5. Then find this code <div class='post-header-line-1'/> .
6. If You found it you will see a code like this:
<div class='post-body entry-content'>
or<div class='post body'>
7. The next step is change or replace the code (Only Number 6 code) to be like this:
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
8. Under it you will see a code like this <p><data:post.body/></p>
9. Put the code below under it.
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Show Full Post...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-]Hide Full Post...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>
10. So, the full code will like this :
<div class='post-header-line-1'/>
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Show Full Post...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Hide Full Post...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>
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
<span id="fullpost">
</span>
14. Save your setting.
15 If you want to post an articel place your part articel above this code <span id="fullpost">. Then the remain or full post put between this code <span id="fullpost"> and this </span>
GOOD LUCK>>>>>
Show or Hide Your Full Post in Blogger
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 </head>
<script src='http://kendhin.890m.com/Readmore.js' type='text/javascript'/>
5. Then find this code <div class='post-header-line-1'/> .
6. If You found it you will see a code like this:
<div class='post-body entry-content'>
or<div class='post body'>
7. The next step is change or replace the code (Only Number 6 code) to be like this:
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
8. Under it you will see a code like this <p><data:post.body/></p>
9. Put the code below under it.
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Show Full Post...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-]Hide Full Post...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>
10. So, the full code will like this :
<div class='post-header-line-1'/>
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Show Full Post...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Hide Full Post...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>
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
<span id="fullpost">
</span>
14. Save your setting.
15 If you want to post an articel place your part articel above this code <span id="fullpost">. Then the remain or full post put between this code <span id="fullpost"> and this </span>
GOOD LUCK>>>>>
Red Hat 11th fastest growing company in America
Way to go Red Hat....
Saturday, 2 February 2008
Advertise on This Blog
If you interest to advertise on this blog, send email to kendhin_x@yahoo.com.
Thanks.
Advertise on This Blog
If you interest to advertise on this blog, send email to kendhin_x@yahoo.com.
Thanks.