Inserting mp3s or music files.

Ever thought of inserting your favorite song as an mp3 or other audio file into your blog? Well here you can learn how, it's quick and easy.

Add this tag <EMBED SRC="fileURL" HEIGHT="40" WIDTH="200">. For example:

<EMBED SRC="http://files.blog-city.com/files/aa/37088/p/f/MyTheme.mp3" "HEIGHT="40" WIDTH="200">

This will produce a 40x200 player to appear at the desired point in the page, which will play the file. Shown below;

Once you have done this give the widget a title like "My Music" and save.

Extra

If you use <EMBED SRC="fileURL" HIDDEN="TRUE" AUTOSTART="TRUE"> instead of <EMBED SRC="fileURL" HEIGHT="40" WIDTH="200">, the player will be hidden, but automatically play in the background.

Read more »

Inserting images using HTML

Inserting images using HTML

The web wouldn't be half the experience if it wasn't for the <IMG> tag. The <IMG> tag delivers the ability to easily insert images into a page from anywhere on the web. We'll take a look at this tag and the sort of things you can do with it

<IMG> basics

The <IMG> tag specifies not only the image location, but also how to present it on the page. The SRC attribute describes the location of the image as a URL or a URI. You can link an image in from anywhere on the web. For example:

<IMG SRC="http://www.google.com/images/logo.gif">

You can control the size of the image by specifying the WIDTH="" and HEIGHT="" attributes. You can specify the number of pixels, or percentage of original image, the size the image is to be resized to. It is not recommended that you let the browser size your image, as it will never make as good a job as a dedicated image program. In addition, you may be asking the user to download more bytes than they need to, if you aren't going to be displaying the full image.

In addition you can specify how the image positions itself to other elements beside. We can control this using the ALIGN="" attribute. This allows us to control how text is to flow around the image. Consider the two examples below. The first image has the ALIGN="LEFT" while the second has ALIGN="RIGHT".

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

There are a number of different values you can have in the ALIGN attribute and they include: LEFT, RIGHT, MIDDLE, TOP, BOTTOM. There are extra ones, but they do not operate on all browsers.

Being practical with images

One of the key things to remember when designing your pages with images inside them is how the page is physically built and rendered for the user. The HTML page is downloaded first, which is then interpreted by the browser and rendered. Then, if there are any images or external resources to retrieve, the download of them begin after the page has been rendered. Therefore it is possible for the user to see no images to begin with, and for them to then pop on the screen. But even that is on the assumption the resource was found.

So with that in mind, there are a number of techniques we can do to give the user a greater experience when viewing images.

Let us first look at the situation where the image is not found. Let us look at displaying the Google image, but assume for some reason it isn't available. We see this in the page:

<IMG SRC="badimage.jpg">

As you can see, the small generic invalid [x] box is displayed (some browsers may just display an empty space). As we can see from the ALIGN example at the top the size of the image can dramatically effect the page layout, which you may wish to maintain even if there is no image available. We would do this by specifying the width and height attributes. For example:

<IMG SRC="badimage.jpg" WIDTH="200" HEIGHT="100">

As you can see the size of the image has now been rendered. However, its still just an empty box. We can suggest alternative content should the image not be loaded yet, or is unavailable. We do this using the ALT attribute. For example:

<IMG SRC="badimage.jpg" WIDTH="200" HEIGHT="100" ALT="Google Image">

Now you can see, the box has some text inside, which is great feedback for the user. But there is still more we can do. Just as we illustrated with the <A> tag, we can specify a TITLE attribute that will popup a small piece of text when the mouse hovers over it.

<IMG SRC="badimage.jpg" WIDTH="200" HEIGHT="100" ALT="Google Image" TITLE="Google">

This allows you to add a little more depth to your images and increase the multimedia experience.

Linking From Images

As stated earlier you can make your links clickable by simply wrapping them in the <A> tag. For example:

<A HREF="http://www.google.com"><IMG SRC="http://www.google.com/images/logo.gif"></A>

Now if you click on the image, you will be taken to Google. However, do you notice something about the appearance of the image? It has a border around it. This is the default behaviour for images that are clickable. Sometimes this is not the look you are after and would prefer it not to be like that. You can turn off the border, by adding the attribute BORDER="0" to the <IMG> tag.

<A HREF="http://www.google.com"><IMG SRC="http://www.google.com/images/logo.gif" BORDER="0"></A>

Read more »

Screensaver at Blog

Screensaver at blog

1. Make ScreenSaver.js file contain this code :  var idleTime=0;var standby=false;function CheckInactivity(){idleTime+=10;if(idleTime>60){InitializeStandBy()}}function InitializeStandBy(){if(!standby){var a=0;a=jQuery(window).height();jQuery("#energysaving").show().css({height:"0",width:"0",left:"50%",top:"50%"}).animate({width:"100%",height:a,left:"0",top:"0",opacity:"1"},1000);standby=true}}function StopStandBy(){if(standby){jQuery("#energysaving").animate({width:"0",height:"0",opacity:"0",left:"50%",top:"50%"},500);setTimeout('jQuery("#energysaving").hide();',800);standby=false}}document.write('<link rel="stylesheet" href="http://www.onlineleaf.com/savetheenvironment.css" type="text/css">');if(typeof(jQuery)=="undefined"){document.write('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"><\/script>')}function InitJQuery(){if(typeof(jQuery)=="undefined"){setTimeout("InitJQuery();",50)}else{jQuery(function(){jQuery(document).ready(function(){setInterval("CheckInactivity();",10000);jQuery(this).mousemove(function(a){idleTime=0;StopStandBy()});jQuery(document).keypress(function(a){idleTime=0;StopStandBy()});jQuery("body").append('<div id="energysaving"><p><font style="color: #2fb2fa;">SCREEN SAVER MODE IS "<blink>ACTIVE</blink>"</font><br/><span><font style="color: #FFFFFF;">Gerakkan mouse kalo ingin "<blink>non-aktifkan</blink>" screen saver</font></span></p><div id="copyrightOnlineLeaf"><font style="color: #00FF00;">Copyright 2011 - Kintunan | Kunjungi Selalu | http://kintunan.blogspot.com/</font> <font style="color: #FFFFFF;">Supported by: www.onlineleaf.com</font></div></div>');jQuery("#energysaving").hide()})})}}InitJQuery(); 
2. Upload ScreenSaver.js to your site U like
3. place code below before : <head>
   <script src='URL js file that u upload'>
   </script>

Read more »

Smooth Scroll to Top At Blog

place this code below before: ]]></b:skin>

#kaluhur{
right:20px;
bottom:20px;
position: fixed;
}

then paste this code below before : </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $('a[href*=#luhur]').click(function() {
  if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
  && location.hostname == this.hostname) {
   var $target = $(this.hash);
   $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
   if ($target.length) {
    var targetOffset = $target.offset().top;
    $('html,body').animate({scrollTop: targetOffset}, 1000);
    return false;
   }
  }
 });
});
//]]>
</script>






Then replace:  <body> into code below

<body id="luhur">

Then copy paste this code below before </body>

 
<div id='kaluhur'>
<a href='#luhur' title='Luhur'><img src='https://7707928374904518111-a-1802744773732722657-s-sites.googlegroups.com/site/kintunan/icon_top.gif'/></a>
</div>
 
Then Save Template, Preview It. Finish 

Read more »

Energy Saving Mode For Blogs or Websites

Energy Saving Mode For Blogs or Websites

This is a free service and it is provided by http://www.onlineleaf.com/.Their standby engine is deliver a fully functional and simple way to help your website run requiring less energy to generate. It hides heavy animations, covers the window in dark colors (as these, in many cases are less energy consuming) and pauses heavily running background processes.

When your visitors are inactive, this engine launch a standby screen, with the text "Energy saving mode".


This is very easy to add to your website or blog with in few seconds.

Login to your Blogger dashboard --> Design --> Edit HTML.

You don't need to click on "Expand Widget Templates".

Scroll down to where you see the </head> tag of your template.

Now copy below code and paste it just before the </head> tag.

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>

This standby engine uses the jQuery Javascript library, so if you are using other Javascript libraries or code, add below code instead of above code :

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>

<script>jQuery.noConflict();</script>

Time of inactivity

Also you can easily define how long time your visitors have to be inactive, for the engine to launch the standby screen, by adding ?time=X where X should be replaced with the number of seconds you would like to define the time interval. An example could be:

<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js?time=120"></script>

... which will set the time of inactivity to 2 minutes (120 seconds).

This can be configured to display in any of the supported languages, if you add ?lang=code, where code is one of the language short codes below.

Supported languages

ak - Akan

da - Danish

de - German

en - English

es - Spanish

fr - French

fi - Filipino gr - Greek


hr - Croatian

id -Indonesian

jp - Japanese

it - Italian

nl - Dutch

pl - Polish

pt - Portuguese

bpt - Brazilian Portuguese
ro - Romanian

sl - Slovenian

se - Swedish

sk - Slovak

sw - Swahili

tr - Turkish

vi - Vietnamese

The following example will be using Spanish for the standby screen:

<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js?lang=es"></script>

Read more »

Floating Back To Top

If you have some longs posts, or if some loyal visitors, who love to comment a lot on your blog, then it may create a small problem to other visitors, who would wish to come quickly to the top of the blog, after reading a post and it's comments.

So to add a short-cut for them, would be a good idea in this case. For this you can easily add a "Go to Top" arrow button, which keeps on sliding as the readers reads the post, and whenever clicked by him/her, it will escort them to the top region of the blog [See this in action in this blog - Right corner].

Go to Layout -> Add a Gadget -> HTML/JavaScript type

 Then paste this code in to it:

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://i34.tinypic.com/35lyjrb.gif" /></a>

And of course you can use other images too, by replacing the red part of the code above

Read more »

How to Change Blogger Icon

Most bloggers (Blogspot users) are eager to uniquely customize the appearance of their blogs, and one of the small but significant customizations is changing the icon / favicon. This article will explain about how to change your blog icon, from the default Blogger icon to your own custom icon. I have used this method myself so I am sure it will work for you as well. Would you like to know more?

Recently, I had changed my tab icon of my blogger site. It used to be a common blogger icon which is an orange rectangle with the white letter B inside it. I changed it into my custom made icon of a sky blue rectangle with vertical I and Y (my initials), which also looks like a winking smiley. If you are interested in doing the same, here are the steps to do it:

1. Prepare an image, can be JPG or PNG format. I suggest PNG format because its size will be smaller by a 4:1 ratio. It means that a 10 Kb JPG image will be a 2.5 Kb in PNG format. Also make sure the size is small like 20 x 20 pixels or less, so the file will be smaller in size and won't make your blog loads slower.

If it's difficult for you to edit a small image, you can make a bigger one first, like 200 x 200 pixels or more, and after finish, you can skew it smaller. Microsoft Paint can do it for you easily.

2. Upload the image to an image hosting service, like the free PhotoBucket. Then, obtain the direct link to your image for the next step. You can use another image hosting service if you like, just remember to get the direct link.

3. Add this bold tags to your template. To access it, click "edit html" in "layout" section. Put them in head section, between "title" tag and "b:skin" tag. If you face difficulties in finding the tag, just use the find tool in your browser. In Mozilla Firefox, the shortcut is ctrl+f. If you use another browsers, apply with adaptation. 

 

<title><data:blog.pagetitle>
<link href='put the direct URL of your image here' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
<b:skin>

Save and done! Visit your blog, open a few tab, and you should see your new icon there. It is very simple, so feel free to try it

Read more »