Language Translation Widget

English is not the most popular language in the world. In fact, according to many reports, the Chinese language (Mandarin) is certainly the most widely spoken language. In the internet community, the other popular language platforms are arguably Spanish, Russian, Arabic, Albanian, Portuguese, Malay, Italian, French, Japanese, and Korean.

Translation from English to other languages

If you have a blog written in English, it would be also nice to have a Translation Option within your blog for the non-English speaking population. There are many online translation tools, the popular free tools being AltaVista's Babel Fish translation and Google's Language Translator.

For this Language Translation Widget, I have used the Google Language Translator which enables the user to translate English website into Arabic, Chinese, French, German, Italian, Japanese, Korean, Portuguese, Russian, and Spanish. The JavaScript used here can be applied to most of the blogging sites like Blogspot, Typepad and Wordpress.

Language Translation Flags and Script

In your blogger, go to Layout -> Page Elements , click Add a Page Element to the place you want the Language Translation Widget to appear and then click on HTML/JavaScript. Enter a relevant Title such as: Language Translation and paste the following code in the content box:



Points to Note:

- If you want a slightly bigger flag, you can increase the width of the images, for example, width="30" to width="36" and the height="20" to height="24" .

- If a translation doesn't look right, you can always suggest to Google a better translation to help them improve their translation quality.

- If you do not want some translation to appear, then you simply remove that particular code!

Add Music Widget to your Blog

Adding a Music Console Widget to your blogger so that the visitors can listen to your music or even to your radio station is a quite good idea, dont you think so!? It is also not as difficult as you may think but no worries, I will show you how:

Navigate to Template -> Page Elements , click Add a Page Element to the place you want the Music Console to appear and then click on HTML/JavaScript. Done so far?! Right, enter a relevant Title such as: Listen to my Music and paste the following code in the content box:

<embed autostart="false" height="40" width="300" loop="true" src="URL of music file"/></embed>

For example, using the following code:

<embed autostart="false" height="40" width="300" loop="true" src="URL of music file"/></embed>



If you like that type of music then go to [ this Site ] for more tunes!

Some explaination:

autostart="false" - it does not play the music automatically
autostart="true" - it plays the music automatically
height="40" - the height of the music console
width="300" - the width of the music console
loop="true" - it loops the music once finished
loop="false" - it does not loop the music once finished
src="URL" - the url address of the music to be played

Note: The Music Console will look different depending which type of Windows Media Player you have and also on the Internet Browser for exmaple Internet Explorer or Firefox. When browsing with Firefox, the Music Console will be played in Apple player. Yep true!

Hexadecimal HTML Color Codes and Names

Blogger also gives you the choise of fonts and colours which you can nagivate under the Layout -> Fonts and Colors. There you will be able to change the font types, font size and also the colors but the available colors on the screen are limited. So, if you cannot find the color you want, you may want to copy the appropriate hex codes of the colors below, and paste them into the “color hex code” box.

Use the HTML Color Code Chart below:

COLOR NAMECODECOLOR
Black#000000 
Grey0#150517 
Grey18#250517 
Grey21#2B1B17 
Grey23#302217 
Grey24#302226 
Grey25#342826 
Grey26#34282C 
Grey27#382D2C 
Grey28#3b3131 
Grey29#3E3535 
Grey30#413839 
Grey31#41383C 
Grey32#463E3F 
Grey34#4A4344 
Grey35#4C4646 
Grey36#4E4848 
Grey37#504A4B 
Grey38#544E4F 
Grey39#565051 
Grey40#595454 
Grey41#5C5858 
Grey42#5F5A59 
Grey43#625D5D 
Grey44#646060 
Grey45#666362 
Grey46#696565 
Grey47#6D6968 
Grey48#6E6A6B 
Grey49#726E6D 
Grey50#747170 
Grey#736F6E 
Slate Grey4#616D7E 
Slate Grey#657383 
Light Steel Blue4#646D7E 
Light Slate Grey#6D7B8D 
Cadet Blue4#4C787E 
Dark Slate Grey4#4C7D7E 
Thistle4#806D7E 
Medium Slate Blue#5E5A80 
Medium Purple4#4E387E 
Midnight Blue#151B54 
Dark Slate Blue#2B3856 
Dark Slate Grey#25383C 
Dim Grey#463E41 
Cornflower Blue#151B8D 
Royal Blue4#15317E 
Slate Blue4#342D7E 
Royal Blue#2B60DE 
Royal Blue1#306EFF 
Royal Blue2#2B65EC 
Royal Blue3#2554C7 
Deep Sky Blue#3BB9FF 
Deep Sky Blue2#38ACEC 
Slate Blue#357EC7 
Deep Sky Blue3#3090C7 
Deep Sky Blue4#25587E 
Dodger Blue#1589FF 
Dodger Blue2#157DEC 
Dodger Blue3#1569C7 
Dodger Blue4#153E7E 
Steel Blue4#2B547E 
Steel Blue#4863A0 
Slate Blue2#6960EC 
Violet#8D38C9 
Medium Purple3#7A5DC7 
Medium Purple#8467D7 
Medium Purple2#9172EC 
Medium Purple1#9E7BFF 
Light Steel Blue#728FCE 
Steel Blue3#488AC7 
Steel Blue2#56A5EC 
Steel Blue1#5CB3FF 
Sky Blue3#659EC7 
Sky Blue4#41627E 
Slate Blue#737CA1 
Slate Grey3#98AFC7 
Violet Red#F6358A 
Violet Red2#E4317F 
Deep Pink#F52887 
Deep Pink2#E4287C 
Deep Pink3#C12267 
Deep Pink4#7D053F 
Medium Violet Red#CA226B 
Violet Red3#C12869 
Firebrick#800517 
Violet Red4#7D0541 
Maroon4#7D0552 
Maroon#810541 
Maroon3#C12283 
Maroon2#E3319D 
Maroon1#F535AA 
Magenta#FF00FF 
Magenta1#F433FF 
Magenta2#E238EC 
Magenta3#C031C7 
Medium Orchid#B048B5 
Medium Orchid1#D462FF 
Medium Orchid2#C45AEC 
Medium Orchid3#A74AC7 
Medium Orchid4#6A287E 
Purple#8E35EF 
Purple1#893BFF 
Purple2#7F38EC 
Purple3#6C2DC7 
Purple4#461B7E 
Dark Orchid4#571B7E 
Dark Orchid#7D1B7E 
Dark Violet#842DCE 
Dark Orchid3#8B31C7 
Dark Orchid2#A23BEC 
Dark Orchid1#B041FF 
Plum4#7E587E 
Pale Violet Red#D16587 
Pale Violet Red1#F778A1 
Pale Violet Red2#E56E94 
Pale Violet Red3#C25A7C 
Pale Violet Red4#7E354D 
Plum#B93B8F 
Plum1#F9B7FF 
Plum2#E6A9EC 
Plum3#C38EC7 
Thistle#D2B9D3 
Thistle3#C6AEC7 
Lavendar Blush2#EBDDE2 
Lavendar Blush3#C8BBBE 
Thistle2#E9CFEC 
Thistle1#FCDFFF 
Lavendar#E3E4FA 
Lavendar Blush#FDEEF4 
Light Steel Blue1#C6DEFF 
Light Blue#ADDFFF 
Light Blue1#BDEDFF 
Light Cyan#E0FFFF 
Slate Grey1#C2DFFF 
Slate Grey2#B4CFEC 
Light Steel Blue2#B7CEEC 
Turquoise1#52F3FF 
Cyan#00FFFF 
Cyan1#57FEFF 
Cyan2#50EBEC 
Turquoise2#4EE2EC 
Medium Turquoise#48CCCD 
Turquoise#43C6DB 
Dark Slate Grey1#9AFEFF 
Dark Slate Grey2#8EEBEC 
Dark Slate Grey3#78C7C7 
Cyan3#46C7C7 
Turquoise3#43BFC7 
Cadet Blue3#77BFC7 
Pale Turquoise3#92C7C7 
Light Blue2#AFDCEC 
Dark Turquoise#3B9C9C 
Cyan4#307D7E 
Light Sea Green#3EA99F 
Light Sky Blue#82CAFA 
Light Sky Blue2#A0CFEC 
Light Sky Blue3#87AFC7 
Sky Blue#82CAFF 
Sky Blue2#B0E2FF 
Light Sky Blue4#566D7E 
Sky Blue#6698FF 
Light Slate Blue#736AFF 
Light Cyan2#CFECEC 
Light Cyan3#AFC7C7 
Light Cyan4#717D7D 
Light Blue3#95B9C7 
Light Blue4#5E767E 
Pale Turquoise4#5E7D7E 
Dark Sea Green4#617C58 
Medium Aquamarine#348781 
Medium Sea Green#306754 
Sea Green#4E8975 
Dark Green#254117 
Sea Green4#387C44 
Forest Green#4E9258 
Medium Forest Green#347235 
Spring Green4#347C2C 
Dark Olive Green4#667C26 
Chartreuse4#437C17 
Green4#347C17 
Medium Spring Green#348017 
Spring Green#4AA02C 
Lime Green#41A317 
Spring Green#4AA02C 
Dark Sea Green#8BB381 
Dark Sea Green3#99C68E 
Green3#4CC417 
Chartreuse3#6CC417 
Yellow Green#52D017 
Spring Green3#4CC552 
Sea Green3#54C571 
Spring Green2#57E964 
Spring Green1#5EFB6E 
Sea Green2#64E986 
Sea Green1#6AFB92 
Dark Sea Green2#B5EAAA 
Dark Sea Green1#C3FDB8 
Green#00FF00 
Lawn Green#87F717 
Green1#5FFB17 
Green2#59E817 
Chartreuse2#7FE817 
Chartreuse#8AFB17 
Green Yellow#B1FB17 
Dark Olive Green1#CCFB5D 
Dark Olive Green2#BCE954 
Dark Olive Green3#A0C544 
Yellow#FFFF00 
Yellow1#FFFC17 
Khaki1#FFF380 
Khaki2#EDE275 
Goldenrod#EDDA74 
Gold2#EAC117 
Gold1#FDD017 
Goldenrod1#FBB917 
Goldenrod2#E9AB17 
Gold#D4A017 
Gold3#C7A317 
Goldenrod3#C68E17 
Dark Goldenrod#AF7817 
Khaki#ADA96E 
Khaki3#C9BE62 
Khaki4#827839 
Dark Goldenrod1#FBB117 
Dark Goldenrod2#E8A317 
Dark Goldenrod3#C58917 
Sienna1#F87431 
Sienna2#E66C2C 
Dark Orange#F88017 
Dark Orange1#F87217 
Dark Orange2#E56717 
Dark Orange3#C35617 
Sienna3#C35817 
Sienna#8A4117 
Sienna4#7E3517 
Indian Red4#7E2217 
Dark Orange3#7E3117 
Salmon4#7E3817 
Dark Goldenrod4#7F5217 
Gold4#806517 
Goldenrod4#805817 
Light Salmon4#7F462C 
Chocolate#C85A17 
Coral3#C34A2C 
Coral2#E55B3C 
Coral#F76541 
Dark Salmon#E18B6B 
Salmon1#F88158 
Salmon2#E67451 
Salmon3#C36241 
Light Salmon3#C47451 
Light Salmon2#E78A61 
Light Salmon#F9966B 
Sandy Brown#EE9A4D 
Hot Pink#F660AB 
Hot Pink1#F665AB 
Hot Pink2#E45E9D 
Hot Pink3#C25283 
Hot Pink4#7D2252 
Light Coral#E77471 
Indian Red1#F75D59 
Indian Red2#E55451 
Indian Red3#C24641 
Red#FF0000 
Red1#F62217 
Red2#E41B17 
Firebrick1#F62817 
Firebrick2#E42217 
Firebrick3#C11B17 
Pink#FAAFBE 
Rosy Brown1#FBBBB9 
Rosy Brown2#E8ADAA 
Pink2#E7A1B0 
Light Pink#FAAFBA 
Light Pink1#F9A7B0 
Light Pink2#E799A3 
Pink3#C48793 
Rosy Brown3#C5908E 
Rosy Brown#B38481 
Light Pink3#C48189 
Rosy Brown4#7F5A58 
Light Pink4#7F4E52 
Pink4#7F525D 
Lavendar Blush4#817679 
Light Goldenrod4#817339 
Lemon Chiffon4#827B60 
Lemon Chiffon3#C9C299 
Light Goldenrod3#C8B560 
Light Golden2#ECD672 
Light Goldenrod#ECD872 
Light Goldenrod1#FFE87C 
Lemon Chiffon2#ECE5B6 
Lemon Chiffon#FFF8C6 
Light Goldenrod Yellow#FAF8CC 

Add a Quote of the Day widget

Ever wanted to post a [ Quote of a Day ] within your Blog but really knowing how to?! Well, it is not that difficult, all it requires is some JavaScript codes and vuala! Providing, you know what to do ... in this case, copy and paste will work.

The one I will demonstrate to you is a simple JavaScript which stores quotes and authors in a format called “arrays”. We all know a month has got 31 days (well more or less but we stick to 31 days) so within this javascript you can store 31 quotes which will display a new quote every day of the month.

Here we go:

Navigate to Template -> Page Elements , click Add a Page Element to the place you want your Quote of the Day to appear and then click on HTML/JavaScript.

Give it a Title Name and paste the following code into the content box:

<div style="border:1px solid #333; background-color: #fff; padding: 4px; margin-top: 5px; font-weight: bold;">

<script language="javascript" type="text/javascript">

var d=new Date();

var quotes=new Array(31);

var authors=new Array(31);

quotes[0]="If a man watches three football games in a row, he should be declared legally dead.";

quotes[1]="Friendship is far more tragic than love. It lasts longer.";

quotes[2]="Advice is like castor oil, easy enough to give but dreadful uneasy to take.";

quotes[3]="";

quotes[4]="";

quotes[5]="";

quotes[6]="";

quotes[7]="";

quotes[8]="";

quotes[9]="";

quotes[10]="";

quotes[11]="";

quotes[12]="";

quotes[13]="";

quotes[14]="";

quotes[15]="";

quotes[16]="";

quotes[17]="";

quotes[18]="";

quotes[19]="";

quotes[20]="";

quotes[21]="";

quotes[22]="";

quotes[23]="";

quotes[24]="";

quotes[25]="";

quotes[26]="";

quotes[27]="";

quotes[28]="";

quotes[29]="";

quotes[30]="";

authors[0]="Erma Bombeck";

authors[1]="Oscar Wilde";

authors[2]="Josh Billings";

authors[3]="";

authors[4]="";

authors[5]="";

authors[6]="";

authors[7]="";

authors[8]="";

authors[9]="";

authors[10]="";

authors[11]="";

authors[12]="";

authors[13]="";

authors[14]="";

authors[15]="";

authors[16]="";

authors[17]="";

authors[18]="";

authors[19]="";

authors[20]="";

authors[21]="";

authors[22]="";

authors[23]="";

authors[24]="";

authors[25]="";

authors[26]="";

authors[27]="";

authors[28]="";

authors[29]="";

authors[30]="";

document.write(quotes[d.getDate()-1] + '<div style="text-align: right; margin-top:5px; font-style: italic;' + authors[d.getDate()-1] + '</div>');

</script>
<noscript>You need to enable JavaScript to read this.</noscript>
</div>


A small explanation about the whole script & code:

I have defined a div table for the Quote of the Day to be displayed in with following atributes: 1px solid dark colour border, white background and 5 px spacing. If you do not want the table border to be displayed then there is a way of hidding it by simply replacing border:1px with border:0px and this will not show the border anymore.

Anyhow, you can of course change the border color, background color, spacing and even add other elements/atributes as you wish. If you need a list of color values, then visit the HTML Color Code Chart.

Note: When you type the quotations and names, do not use characters like " or ; and do not press “Enter” within the quotation marks as these are special characters which are used by JavaScript.