Place to share anything

As a newbie in blogging, with no html experiences at al, its difficult for me to insert java script into my post at blogspot.com. Until I found articles about how to add javascript into post in blogspot. Now I can insert my javascript code into my blogspot pages. Its very simple to enable this javascript, we only need a few lines of code into blogspot template, save then finished.

In this post I will share my experience of inserting code to enable javascript. Now after applying this blogger trick, you would be able to show html/java scripts in your blog posts with custom display boxes.

Simply follow these steps:

1. Log in to your blogspot dashboard.

2. Go to Layout and then Edit HTML.

3. Find the section ]]></b:skin> then paste the code right above that section.

pre
{
background:#efefef;
border:1px solid #A6B0BF;
font-size:120%;
line-height:100%;
overflow:auto;
padding:10px;
color:#000000 }
pre:hover {
border:1px solid #efefef;
}
code {
font-size:120%;
text-align:left;
margin:0;padding:0;
color: #000000;}
.clear { clear:both;
overflow:hidden;
}

Then SAVE your template.

After adding the above code the process is finished. Now whenever you want to display javascript in your post, just add opening ‘pre’ tag and closing ‘pre’ tag and in the center your script.

<pre>

your javasript code

</pre>

Few days ago, I try to look for the code to display page navigation on my blog hosted at blogspot.com. I search and found the best and working code to show page navigation in the bottom of every pages in my blog.

This is what I mean by page navigation:

To get something similar like the image above, I just need a little tweak at my blogspot tempate. Remember, I know nothing about html, css programming…!!!

I just want to say that, these steps below can be done by anyone, no html experiences needed. If you interested to add a page navigation in your blogspot website, simply follow the steps below.

1. Login into your blogspot dashboard and then click layout.

2. On the layout window, select edit html. Then you will see a textbox contain the template code of your website.

3. Find the </body> section. You can easily done this by pressing CTRL+F and type </body> then it will be highlighted automatically once its found.

3. Copy this code, and paste just above the </body> section.

<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;}
.showpageArea a {border: 1px solid #505050;color: #000000;font-weight:normal;padding: 3px 6px !important;padding: 1px 4px ;margin:0px 4px;text-decoration: none;}
.showpageArea a:hover {font-size:11px; border: 1px solid #333;color: #000000;background-color: #FFFFFF;}
.showpageNum a {border: 1px solid #505050;color: #000000;font-weight:normal;padding: 3px 6px !important;padding: 1px 4px ;margin:0px 4px;text-decoration: none;}
.showpageNum a:hover {font-size:11px; border: 1px solid #333;color: #000000;background-color: #FFFFFF;}
.showpagePoint {font-size:11px;padding: 2px 4px 2px 4px; margin: 2px;font-weight: bold;border: 1px solid #333;color: #fff;background-color: #000000;}
.showpage a:hover {font-size:11px; border: 1px solid #333;color: #000000;background-color: #FFFFFF;}
.showpageNum a:link,.showpage a:link {font-size:11px;padding: 2px 4px 2px 4px;margin: 2px;text-decoration: none;border: 1px solid #0066cc;color: #0066cc;background-color: #FFFFFF;}
.showpageNum a:hover {font-size:11px;border: 1px solid #333;color: #000000;background-color: #FFFFFF;}
</style>
&lt;script type=&quot;text/javascript&quot;&gt;
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==&quot;.blogspot.com/&quot;;
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= &#39;&#39;;
var upPageHtml =&#39;&#39;;
var downPageHtml =&#39;&#39;;
var pageCount=5;
var displayPageNum=2;
var firstPageWord = &#39;First&#39;;

(more…)

Currently there are many photo editing software like photoshop, picasa, acdsee, Corel Photopaint, and many more. But those software must be installed on local computer and some software are not free, you have to pay to use them. Its pixlr.com, an online photo editing tool. This web application doesn’t need to be installed to run. The only thing you need is web browser and internet connection. Its absolutely free to use. To me, pixlr is a revolutionary in web application, after eyeos (an online operating system), now pixlr (online photo editing), whats next?

This application interface is more like photoshop with many tools like marquee tool, magic wand tool, crop tool, smudge, brush and many more. Also there are many filters available. For me, its a very good web application.

Try this online photo editing here at http://pixlr.com