Customize Your Ubuntu 11.10

I love customizing Ubuntu, and after upgraded my OS to Oneiric Ocelot, I realized that I've customized so many things. Here is the screenshot of my desktop.

Customized Ubuntu 11.10 with Gnome Shell

List of some useful Gnome Shell extensions that I've tried:

• Extended Places Menu extension (it gives something like quick launch menu on your Gnome Shell top bar): http://www.webupd8.org/2011/10/extended-places-menu-gnome-shell.html
• Gnome Shell Media Player extension (it gives a contol menu in your Gnome Shell sound button): http://www.webupd8.org/2011/10/gnome-shell-mediaplayer-extension.html
• Gnome Shell Monitor extension (it gives system monitor in your Gnome Shell top bar): http://www.webupd8.org/2011/10/gnome-shell-system-monitor-extension.html
• Zeitgeist extension (it gives you a Journal menu in Gnome Shell menu): http://www.webupd8.org/2011/10/zeitgeist-gnome-shell-extension.html
• Gnome Shell Message Notifier extension (it gives notification communicating using IM, works well with empathy): http://www.webupd8.org/2011/11/never-miss-im-notifications-in-gnome.html
• CPU temperature & Overlay Icon extension: http://www.webupd8.org/2011/07/2-more-gnome-shell-extensions-cpu.html

List of some Gnome Shell theme:

• Executive Gnome Shell - Metacity: http://www.webupd8.org/2011/12/executive-beautiful-theme-pack-with.html
• Zukitwo: http://www.webupd8.org/2011/05/zukitwo-beautiful-gnome23shell-theme.html
• Ambiance Blue: http://www.webupd8.org/2011/08/ambiance-blue-cool-blueish-ambiance.html
• Other theme: http://www.webupd8.org/2011/10/4-beautiful-gnome-32-compatible-gtk.html

The other things to do?

• Sushi previewer: http://www.webupd8.org/2011/10/install-sushi-file-previewer-in-ubuntu.html

Or find it here : http://www.webupd8.org/2011/10/things-to-tweak-after-installing-ubuntu.html

Note: I'll update this page later (if I've tried and installed the other extension.)
Happy Customizing :)

Get back Share button in new Google Reader

I'm a Google Reader user, and we know that Google has introduced their new interfaces. Ok, it's cool and clean but I lost something useful in Google Reader. I can't find the original Google Reader share button. Maybe it is replaced with Google + share button? Oh I missed that button, because the shared item linked with my personal blog.

Ok, fine. I tried to ask Google itself and found that there is an extension to get back Google Reader original share button. Yay! And here is the link for the chrome extension. Thanks to these extension :) And here is the result :)

Download for Google Chrome extension: https://chrome.google.com/webstore/detail/gmgmcmhmodidojodfoekpbjnejlhcbpb?hl=en-US

The Evolution of the Geek [infographic]

from dailyinfographic.com (http://dailyinfographic.com/geek-streak-infographic)

Highlight Syntax in Blogger

Last time, I've tried to customize my Blogger template so when I posted some code, it can display code more clear. Asked Google and found that it was so easy to highlight code in Blogger using Syntax Highlighter.

All you need to do is:
1. Go to your Blogger setting where you can edit your Blogger template.
2. Use your browser to find </head> tag.

Add Blogumus to Blogger

Blogumus is a flash based tag cloud which display all of your blog label in a nice flash animation. It is very simple to add it into your Blogger. If you're using the new Blogger template (not Dynamic template), then open your Blogger template and proceed to Edit HTML.

There, check the 'Expand Widget template' checkbox and search for something like this one:

<b:section-contents id="sidebar-right-1">
.
.
.
</b:section-contents>

If you've found it, there you'll found all of your sidebar widget. Just add this code so it'll become like this one:

<b:section-contents id="sidebar-right-1">
.
.
.
<b:widget id='Label99' locked='false' title='tag cloud' type='Label'>
  <b:includable id='main'>
    <b:if cond='data:title'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
      <div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
        <script type='text/javascript'>
        var so = new SWFObject(&quot;http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
        // uncomment next line to enable transparency
        so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
        so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
        so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
        so.addVariable(&quot;distr&quot;, &quot;true&quot;);
        so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
        so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
        so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
        so.write(&quot;flashcontent&quot;);
      </script>
    <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>
</b:section-contents>

Done? Preview it and if everything is ok, you should see flash based tag cloud on your sidebar!

If your blogger using the old template, or if you want to customize your blogumus, then you can follow instruction here:
http://www.bloggerbuster.com/2008/08/blogumus-flash-animated-label-cloud-for.html

Happy customizing! :)

Connect to database with XML HTTP Connection (POST)

Ok, last time I've show you how to use XML HTTP Connection with GET method. Now I'll show you the other method, using POST method. Ok, first, using the same HTML file, but we need to edit the Javascript.. Here is the HTML file for post method

<div id="test2" onClick="getIt('test2')">
2
</div>
<div id="test1" onClick="getIt('test1')">
1
</div>

Using the same database like before, and the same PHP file, but we need to change some code on it. This is for the PHP file.

<?php
$username="mysqlusername";
$password="mysqlpassword";
$database="xml";
$field1=$_POST['field1'];

$con= mysql_connect("localhost","root","");
mysql_select_db($database) or die("unable to select the database..");
if($con)
{
echo "Result of".$field1." \n";
$query="select * from dummydata where id=$field1";
$res=mysql_query($query);
$done=mysql_fetch_array($res);
  if($done['content']!=null)
    {
    echo $done['content'];
    }
  else
    {
    echo "error";
    }
}
else
{
echo "Invalid login information!";
}

mysql_close($con);
?>

Ok, that's all, test it and you'll get the same result like before ;)

Connect to database with XML HTTP Connection

This time, I want to share about XMLHttpConnection. I learn this thing because I need it to develop my (first) BlackBerry application. What is the purpose of XMLHttpConnection? With XMLHttpConnection, I can request a connection in background without reloading the page (something like that). Nah, I tried it and it was successful. Now, it's time to share. I'll show you step by step.

note: this XMLHttpConnection example using GET method. For POST method, I'll post it later. 

First, let's create a simple HTML file. This is my HTML file with some JavaScript code:

<script type="text/javascript">
function getIt(xx){
var get= parent.document.getElementById(xx);
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
else
 {// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
xmlhttp.open("GET","http://localhost/xmlcon/connect.php?field1="+get.innerHTML,false);
xmlhttp.send();
alert(xmlhttp.responseText);
xmlhttp.close();
}
</script>
<html>
Simple XML HTTP Request
<body style="font-size: 3em">
<div id="test2" onClick="getIt('test2')">2</div>
<div id="test1" onClick="getIt('test1')">1</div>
</body>
</html>

Save as main.html and test it in my localhost and the result is like this: