Showing posts with label Blogger Tutorial. Show all posts
Showing posts with label Blogger Tutorial. Show all posts

Friday, 16 September 2011

How to create horizontal navigation bar using css script (drop down menu version)

oOne of the horizontal navigation menus are created using css and html scripts that can be put on the blog is a horizontal navigation menu / dropdown menu. As the picture below:


In this tutorial we will build the navigation bar from a standard HTML and css script list.

A navigation bar is basically a list of links, so using the <ul> and <li>elements tag :

There are two steps to making the navigation menu


1. Step 1 (Insert css menu on template blogspot)

Saturday, 30 October 2010

How to install google maps on blogspot (displays a map in blog )

There may be among friends who want to install the maps from google map for maps and satellite images to appear on the blog. This map can help visitors find your site or location. Google allows users to select a specific location on a map, the map can then be put to a blog at no charge (free).

All you have to do is just need to open a google site map, select the place / location on the map then you copy the script that is available to be installed on the blog.

Examples of maps that can be displayed on the blog can be found here:

Tuesday, 28 September 2010

Make related post with thumbnails in blogger (blogspot)

In addition to making related post in text form, we can also make a related post with thumbnails in the blog. Related post with thumbnails by default will take pictures in the post to serve as a thumbnail in the related article, if in the post did not exist then the thumbnail image will be blank.



A site that provides services to make related post with thumbnails is http://www.linkwithin.com

To create a pictorial post relared following procedure:

Tuesday, 17 August 2010

New Digg verify


This is a post to verify new digg .

Wednesday, 28 July 2010

Creating a horizontal navigation menu on blogspot with css menu (blue sprite version)

Creating a horizontal navigation menu on blogspot with css menu (blue sprite version). By default, navigation menus are not available at blogspot. To show or make the navigation menu then needs to be added   scripts  (css or html script). In this post we will create a simple horizotal the navigation menu using the css script .Menu script as namely sprite horizontal blue version is a variant of the navigation menu before such massive blue-navigate menus using css script.
.


 To make it do the following procedure:

Wednesday, 23 June 2010

How to leave the title field blank in HTML Javascript widget

How to leave the title field blank with the HTML Javascript widget
If you using the HTML javascript widget in blogger/blogspot. Suddenly, we cannot edit or a new HTML Javascript widget without entering someting text in the title field. whenever I try to leave that field blank, it will show error. Error message: "required field must not be blank." This means that not only can I not edit widgets I already have, but I cannot add new ones.






This is a little tips, if you want to leave the title field blank with the HTML Javascript widget

Thursday, 17 June 2010

Free javascript hosting



Sometimes if you create a blog on a free hosting like blogspot, so to beautify the look of a blog requires a javascript file, but blogger does not allow for hosting a javascript file javacript exception file is inserted into the gadget html / javascript. Solutions to overcome this is to utilize the free javascript hosting

Free JavaScript Hosting can help you to host a javascript file, and use the direct link or a link to access the external javascript file from the blog.
This service is free, and available a premium service. Premium service certainly has better performance than free for hosting your javascript.
You can upload and share your javascript file on the site below:




Tuesday, 15 June 2010

How to make oldest blog post go first page (home page) in blogspot

In blogspot, How to make oldest blog post go first page (home page) ?. You can change time on the "post date and time" with the newest time.

Example when I make this post at 23/05/10. Then when you make oldest blog post go first page (homepage), you must change time with a newest time.

Login in your blogger account
Edit post, select blogpost that will go first page
On the post option change "post date and time" with the newest time






Cause this day 15/06/10 , i am change with 15/06/10.

Thursday, 22 April 2010

Free audio hosting , Free Music Hosting


Below list of free audio hosting , free music hosting and free mp3 hosting

1. ImageCabin
Maximum audio size = 25 MB , registration required = no
Allowed audio files: wav, mp3, ogg

2. MailboxDrive
Maximum audio size = 15 MB , registration required = yes
Allowed audio files: mp3, mp4, wma

3. MP3 Upload
Maximum audio size = 12 MB, registration required = no
Allowed audio files: mp3, wav, wma, mid, ram, aif, mpeg

4. FileFactory
Maximum audio size = 300 MB, registration required = no
Allowed audio files: mp3

5. Vulo
Maximum audio size = 10 MB, registration required = no
Allowed audio files: mp3

6. File Dropper
Maximum audio size = 5120 MB, registration required = no
Allowed audio files: mp3


7. FileFreak
Maximum audio size = 5 MB, registration required = no
Allowed audio files: mp3

Saturday, 26 December 2009

Top ten best website (Alexa version)

Below are 10 best websites based on assessment results from the alexa rank in December 2009, the list is to appear in the level of google while the bloggers are in a eight position to beat msn website


The list can be seen below

1. http://www.google.com/
2. http://www.facebook.com/
3. http://www.yahoo.com/
4. http://www.youtube.com
5. http://www.live.com/
6. http://www.wikipedia.org/
7. http://www.baidu.com/
8. http://www.blogger.com/
9. http://www.msn.com/
10. http://www.yahoo.co.jp/


References: Alexa rank



Sunday, 13 December 2009

Memasang widget google translator ke blog (translator gambar bendera)

Selain google translator standar, anda juga bisa memasang widget google traslator dengan icon bendera. Jika anda mengklik ikon bendera, maka secara otomatis akan terbuka sebuah halaman hasil terjemahan dari halaman aslinya.

Widget ini hanya berfungsi jika halaman web anda berbahasa Indonesia, dalam widget ini anda bisa mengubah atau menerjemahkan isi web anda ke 16 negara (bahasa) lain. Widget ini hanyalah hasil kustomise dari google translate standar. Contohnya bisa dilihat di bawah ini:


Untuk membuat (gadget) widget google translator ke blog anda silahkan ikuti prosedur berikut:


1. Login ke Dashboard, pilih Tata Letak => Elemen Halaman
Pilih Tambah Gadget


2. pada halaman List gadget, pilih Html/Javascript


3. Pada kotak dialog berikut, merupakan tempat memasukkan kode (script) html/javascript


berikut ini adalah script untuk 8 bendera per baris.

Catatan:
Sebaiknya script di bawah ini anda copy ke notepad/wordpad, kemudian scrip dari wordpad tersebut dicopy ke gadget html blog anda, karena jika dicopy langsung dari halaman ini ke gadget html anda, biasanya ada script dari adsense infolinks yang ikut, bisa menyebabkan script tidak berfungsi dengan sempurna.



<div style="border: 1px solid rgb(204, 204, 204); margin: 5px 0pt; padding: 10px 0px 3px; text-align: center; background-color: rgb(255, 255, 255); min-width: 235px;">

<!--GOOGLE TRANSLATE WITH FLAG ICON-->
<div style="width: auto;" align="center">

<!-- Add Indonesian to English-->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=id&ie=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="English" width="24" src="http://i46.tinypic.com/k3wthh.jpg" height="24" title="Google-Translate-Indonesian-to-English"/></a>

<!-- Add Indonesian to French -->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=ied&ie=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="French " width="24" src="http://i50.tinypic.com/2ic7cxh.jpg" height="24" title="Google-Translate-Indonesian-to-French "/></a>

<!-- Add Indonesian to German -->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=id&ie=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="German" width="24" src="http://i49.tinypic.com/2uh8xhi.jpg" height="24" title="Google-Translate-Indonesian-to-German"/></a>

<!-- Add Indonesian to Japanese -->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en&ie=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="Japanese" width="24" src="http://i48.tinypic.com/25klr8n.jpg" height="24" title="Google-Translate-Indonesian-to-Japanese "/></a>

<!-- Add Indonesian to Korean -->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en&ie=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="Korean " width="24" src="http://i47.tinypic.com/2ivk5ud.jpg" height="24" title="Google-Translate-Indonesian-to-Korean"/></a>

<!-- Add Indonesian to Chinese -->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=id&ie=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="Chinese" width="24" src="http://i46.tinypic.com/2hyfj3p.jpg" height="24" title="Google-Translate-Indonesian-to-Chinese"/></a>

<!-- Add Indonesian to Russian -->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en&ie=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="Russian" width="24" src="http://i48.tinypic.com/9r4u11.jpg" height="24" title="Google-Translate-Indonesian-to-Russian "/></a>

<!-- Add Indonesian to Spanish -->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en&ie=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="Spanish" width="24" src="http://i45.tinypic.com/2l8i49c.jpg" height="24" title="Google-Translate-Indonesian-to-Spanish "/></a>

<br/>
<!-- Add Indonesian to India -->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ciw&hl=en&ie=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="India " width="24" src="http://i47.tinypic.com/2h35rfd.jpg" height="24" title="Google-Translate-Indonesian-to-India "/></a>

<!-- Add Indonesian to Saudi Arabia -->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en&ar=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="Saudi Arabia" width="24" src="http://i45.tinypic.com/24nqufd.jpg" height="24" title="Google-Translate-Indonesian-to-Saudi Arabia"/></a>

<!-- Add Indonesian to Netherland-->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en&ar=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="Netherland" width="24" src="http://i45.tinypic.com/2a7ik5t.jpg" height="24" title="Google-Translate-Indonesian-to-Netherland"/></a>

<!-- Add Indonesian to Portugal -->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en&ar=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="Portugal" width="24" src="http://i47.tinypic.com/2vlv60m.jpg" height="24" title="Google-Translate-Indonesian-to-Portugal"/></a>

<!-- Add Indonesian to Italian-->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en&ar=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="Italian" width="24" src="http://i45.tinypic.com/8ygifd.jpg" height="24" title="Google-Translate-Indonesian-to-Italian"/></a>

<!-- Add Indonesian to Philippines-->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ctl&hl=en&ar=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="Philippines" width="24" src="http://i47.tinypic.com/2r7pkdu.jpg" height="24" title="Google-Translate-Indonesian-to-Philippines"/></a>

<!-- Add Indonesian to Ukraina-->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cuk&hl=en&ar=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="Ukraina" width="24" src="http://i50.tinypic.com/bij5s4.jpg" height="24" title="Google-Translate-Indonesian-to-Ukraina"/></a>

<!-- Add Indonesian to Norwegia-->

<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cno&hl=en&ar=UTF8'); return false;" title="Google-Translate"><img border="0" style="cursor: pointer;" alt="Norwegia" width="24" src="http://i45.tinypic.com/2u61agg.jpg" height="24" title="Google-Translate-Indonesian-to-Norwegia"/></a>

</div>

<small>Powered by</small> <img src="http://www.google.com/ig/modules/translatemypage_content/logo.gif" align="absbottom"/><br/>
<small><a href="http://mycomputerdummies.blogspot.com/" target="_blank">Widget translator</a></small><br/>

</div>



Contoh blog yang telah menggunakan widget google translate dengan ikon bendera bisa dilihat disini Kalong
Secara probadi saya lebih suka memakai google translate standar (tanpa bendera), karena kelihatan lebih sederhana.

Monday, 26 October 2009

Convert excel table to html script

There may be among friends who often make the table when going to create a website / blog. You can use the following tools to help you convert (conversion) the excel table into html script. So you just copy from excel and paste on the website and then you get a html script that you can paste on your web page.

To start the conversion:
1. Open your excel, copy the table to be converted
2. Open website tableizer
3. insert (paste) the excel table on the web



4. tableize click it



5. Copy the html script to your web / blog

Tuesday, 18 August 2009

How to hide Navigation Bar (Navbar) Blogger

You may sometimes see a blog that still appeared navigation bar.defaultly when you create a blog, navigation bar will appear which is located at the top of the blog. Navigation bar allows you to speed up to log in to your account (dashboard) to edit or add a post. Because you can simply press the Sign in button to enter your dashboard.



navigation bar
If you've removed it, then you need edit template, you must log in to your account, use link below:
Blogger
(or type http://www.blogger.com on your browser adress bar)


To hide it, you can use the following procedure:

1. Login to your dashboard
2. Select Layout => Edit Html => Check "Expand Widget Templates"

hide navigation bar

3. search code as below

[CDATA [

4. Enter the following code after the code above

# navbar {
height: 0px;
visibility: hidden;
display: none;
}



5. Click Save Template button. Please See the changes on your blog.

Thursday, 18 June 2009

How to create a page hit counter in blog

There may be among friends who know how to make the page hit counter in blog. useful to know the web pages have been opened to how many times. So easy for us to know that the your web or blog visited many other people, or not. There are many websites that provide hit counter script, you only need to register your site (blog) to their site, if it is approved then we will get a script that can be installed in the sidebar (gadget) blog.

Procedure to create page hit counter is:

1. Click the link below to register
Free page hit counter


Fill in the registration sheet on the counter and select the HTML type, select the Counter style you want to use, then click the "Create My Account>>"


2. If approved you will get a script like below, copy this scriptcopy this script will insert to your blog




3. On the following page, click the "add gadget"


4. In the list box, select HTML / JavaScript


5. Enter the script before you copy, as below


Click the "Save" button

Please see the changes on your blog, if successful it will be hit counter appear in the sidebar.

Examples can be seen in the sidebar of this blog

Some links that you can use to get the script page hit counter:
http://www.histats.com/
http://www.counters4u.com/
http://www.free-counter.com/

if you want to look for other page hit counter that can be search here
free page hit counter

Random Posts