Blog Tutorial | Tips Blogging | Free Software

Buttons Appear And Disappear

2010-08-23T10:45:00.000+07:00

Although now rarely update this blog, unlike in the past that I update almost everyday because lately I'm very busy plus my internet connection that uses a prepaid card which is often very problematic IM3 so that almost no time and a little lazy for blogging as well looking for material to post, but still I am a time to to update this blog.
At my leisure time and an internet connectional though some what decent break this connection I would like to invite you all to make Keys Appear And Disappear that can be used on the sidebar or else where as desired, application code that will be mydiscuss this you can see here or here.
Instantly, so do not get bored because there are many stories here. To create this button, please copy code below and put it wherever you like, like in the sidebar or insections can also posts.

<div>
<div style="margin: 5px;">
<div class="normalfont" style="margin-bottom: 2px;">
<input value="OPEN
" style="margin: 0px; padding: 5px; width: 100%;
 font-size: 12px;
 font-weight:bold; background:red;
 color:white;
 border:1px dashes yellow;

-moz-border-radius-topright: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px; " onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'CLOSE
'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'OPEN
'; }" type="button" /></div>
<div class="alt2">
<div style="display: none;">
<div style="border: 2px dashes white; color:blue;background-color:NONE; text-align: justify; padding:10px; ">
<center>

PUT CODE, OR LINK TEXT HERE


</center>
</div>
</div>
</div>
</div>
</div>

Description:
Code that I printed in red, please replace inaccordance with the wishes and for which I printed in yellow are width: 100%; (the width of the button) and font-size: 12px; (size of the text that appears on the button), please adjust to the needs and the rest please consider changing them selves while learning.

When it is done save the changes already made and to see the results mate. For buddies who still do not understand please leave questionsin comments field below this posting.

Good luck and hopefully successful!...

Spoiler For Comments.

2010-08-11T12:22:00.000+07:00

In past posts I wrote about how to make Creating Scroll Box Comment Part 1 and Make Scroll In Comments Box Part 2 which is useful to wrap comments that there are huge numbers. One more way to make a comment does not appear elongated because their numbers are down so much that is to make Spoiler On Comments it.
Little me explain briefly for who had no knowledge about this spoiler. The spoiler is a button that serves to display and hide the comments on your blog. In order more clearly try clicking the button below:

If you want to make a spoiler on the block comments, please follow these steps:
Log in to Blogger.
If you've signed on the Dashboard, click Layout or Design and select Edit HTML.
Download template as a precaution in case of errors. Check the small box beside writing Expand Widget Templates.
Find CSS code for comments-block. If you have found the following scrolling commands into it to add

height: 300 px; /* high block comment */
border:1px solid # CCC ; /* color frame block comment */
overflow:auto; /* scroll commands */

height and frame colors can be changed as desired buddy. If you do not want to use the scroll to block comments, just delete the scroll command above.
Then search ]]></b:skin>, if you have found this place the CSS code below in the code are:

/*-----Toggle Spoiler-----*/
.widgethidden {
display:none
}
.widgetshown {
display:inline;
overflow:auto;
}

Then place it under the following script code ]]></b:skin>:

<script type='text/Javascript'>
function togglespoiler (postid){
var whichpost = document.getElementById(postid);
if
(whichpost.className=="widgetshown"){whichpost.className="widgethdden";
}
else{
whichpost.className="widgets hown";
}
}
</script>

Next find the following code:

<dl id='comments-block'>

For those of you who already use avatars Blogger Profile, find this code:

<dl expr:class='data:post.avatarInd entClass' id='comments-block'>

If you have found, please you replace with this code:

<dl class='widgethidden' id='comments-block'>

Or with this code for using avatars Blogger Profile:

<dl expr:class='data:post.avatarInd entClass' class='widgethidden' id='comments-block'>

You need to know:
If you use the scroll-then block comments Blogger Profile avatars will not be seen as it is covered by a block comment scroll box.

Then add the following code right above it:

<div style='text-align:center; margin:10 px 0px; font-size: 15 px; font-weight:bold;'>
<a href='javascript:togglespoiler ("comments-block")' title=' Click for expand '>Show/Hide Comments</a>
</div>

Size of letters, the title of the link (Click for Writing expand), and a link (post Show/Hide Comments) can change according to your wishes.
When it is done save the changes you have made.

Done and Good luck!!

Make Scroll In Comments Box Part 2

2010-08-02T08:54:00.000+07:00

Yesterday I made a tutorial on Creating Scroll In Box Comments Section 1 and for the second part please read the following tutorials:
On the way Create Scroll Box In Comment Part 1 , how made by using CSS code by adding a few commands on the code comments-block but if you use blogger profile avatar in the comments box as in My blog is here, the avatar will not appear or disappear, so would be an eyesore as well.
Create Scroll Box Comment In Part 1 it works if you use the avatar MyBloglog like on my blog comment box. If you use Blogger Avatars should use this second mode, only just a bit complex and need care because they have to add a bit of code on a template because only in this way avatar profile bloggers on your blog comment box may appear. Ways must be done to make this scroll are as follows:

1. Log in to Blogger.
2. After being on the Dashboard page, click Design and then click Edit HTML.
3. As usual do not forget to download the full template used as a back-up if there is an error in editing, you can return to their original form before the edit.
4. Check the small box beside writing Expand Widget Templates and look for code like this:

<dl id='comments-block'>

For my friend who uses an avatar profile bloggers, looking for code like this:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

If you have found, add the following code in the code are:

<div style='overflow:auto; border:1px solid #ccc; height: 250 px;'>

Adjust the height with the wishes. Then look again like the code below:

</b:loop>
</dl>

If you have found, place the following code just below the code:

</div>

Save the changes that have been done and good luck buddy!.

Creating Scroll Box Comment Part 1

2010-07-29T09:35:00.000+07:00

Criticism, suggestions, comments or questions are expected course blog owners including me because it will make us the spirit and of course there was the inspiration for the next step in making a posting. Comments, criticisms, suggestions, or questions is a part of the blog as a means to provide feedback to postings made.
If a given article comments by visitors would be very enjoyable for the owner of the blog and of course you as a visitor can interact with owners blogs and other visitors. A blog of the longer perched in the virtual world of course would be very much the comments from the articles we write and the more elongated downward, perhaps 10 or 20 comments is not a problem but what if the comment number in the hundreds, it will be very inconvenient and makes it look blogs themselves become damaged.
So many comments that were not annoying and an eyesore to the blog, we could make such Scroll to the labels that had my post here, so that your blog comments box will look neat though comments in the article very much. If you want to make the scroll on the comment box, you can follow these steps:

Login to Blogger.com.
Select menu Design and click Edit HTML.
If you are looking for CSS code to comments-block and to facilitate the search for use Ctrl + F on your computer keyboard. If you have found add the code below into the code earlier:

height: 300 px; /* height to scroll comment box */
border:1px solid # CCC ; /* border color comment box */
overflow:auto; /* scroll command */

Adjust the frame size and color to your liking. And if the code you do not have a code template for comments-block, add the following code above code ]]></b:skin>:

#comments-block {
height:300px; /* height to scroll comment box */
border:1px solid #CCC; /* border color comment box */
overflow:auto; /* scroll command */
}

Save the changes you made and see the result in many posts that have comments.

Good luck....

Beautiful NavBar Menu

2010-07-22T17:51:00.001+07:00

About blog view again as it once I described in the earlier posting, this time I will discuss about how to make Navbar Menu or a row of menu choices from the visitors. If you are bored with the look of the original Menu Navbar template you download, you can change the look of these Navbar easily without having to modify the template code which makes headaches using the services of the site Flashvortex.com that provides a wide range of choices from Navbar Menu you can choose as they pleased, and which you must clearly satisfied with the services of those sites.
One example of the shape of the Navbar Menu Flashvortex you can see below:

And still many others to choose from. Please go to the site I meant to get the various forms NavBar of your choice.

Finish and good luck!

Energy Saving

2010-07-19T00:35:00.001+07:00

You know what would my post? For those who already know it is okay because it already knows , but for those who do not know please read the rest of this post. But for who knows why should it be read later if not mistaken for cheap .
We started just let me do not get bored, Energy Saving or usually called by Screen Saver typically found on smartphones and computers. The main functions of the Energy Saving in accordance with the name and title of this post is when a computer or cell phone is in a state not used then the energy would be minimized so that it can save electricity usage and bateray.
Energy Saving now not only are there only on a computer or mobile phone but on a blog can also be fitted with Energy Saving. Want to know how? Carry on reading this post!... Energy Saving For installation on your blog is very easy to do and do not need to code a lot and a long time.
For installation on the blog copy code below and put it right under the code <:head> in your blog template code, this code is usually located at the very top of the template code.

<script language='javascript' src='http://pageprotection.googlecode.com/files/savetheenvironment.js' type='text/javascript'/>

when it's finished do not forget to click Save Template button and you're done already. Click the View Blog link and do not let the moment move the mouse so your computer screen will be covered with a black mark Energy Saving has been running.
Not easy and good luck!.

How to Make a Table of Contents

2010-07-16T21:31:00.001+07:00

Not just a book that has a list of contents, but the blog can also be given a list of contents, said Enes, an example of the contents of which I mean you can see here.
How to create table of contents is very easy and does not make Loading blog becomes heavy. If you are interested in him please follow these guidelines:

1. Login to Blogger.com with your id.
2. After being on the Dashboard click menu New Entry because in making a list of the contents of the same by making the posting.
3. Next copy the code below and paste it in the column that appears and do not forget to give the title to the form title eg Sitemap.

<div style="overflow:auto; border: 1px solid #CCC; -moz-border-radius:5px; -webkit-border-radius:5px; margin:0px; padding:10px; width:auto; 
height:500px;

background-color:#fcfcfc; text-align:left;">
<div id="cl_option">

Please Wait..... 

</div>

<div id="cl_content_list">
</div>

<ul><script type="text/javascript">var_number_of words_in_the_summary = 750;</script>
<script src="http://sites.google.com/site/ruangbmi/DaftarIsi.js"></script> <script src="
http://mpthreelyrics.blogspot.com/feeds/posts/default

?alt=json-in-script&callback=onLoadFeed&max-results=9999"></script></ul>
</div>
</p>

Description: Customize the print my

Red

to your liking.

height:500px;

is higher than the list of contents. Creation only in
accordance with your wishes.

4. If you are finished click the Image Preview to see the results if it is based on the desire click Publish entry.

5. Finish and good luck!

Blogger Statistic

2010-07-14T05:50:00.001+07:00

The first time you try to use the latest features Blogger Statistics I think my is very comfortable to use even though the display very simple, with this feature makes the Blogger feels more complete and we do not need to use the services of Google Analytics, because almost everything in the Google Analytics already exists in the Blogger feature that can mate see statistics on page Dashbord.
Some features of Blogger statistics when viewed from the menu sequence is:

1. Blogger Stats Overview
Features to look at statistics the number of visits globally. With statistics display is divided into four parts, so my friend could see where visitors are coming from where the blog.

2. Statistics Blogger Post
Surely my friend already knew its function.

3. Source Blogger Traffic Stats
All traffic requests are recorded and displayed in the form of reports so you know how visitors find your blog.

4. Blogger Audience Statistics
The function of this feature to learn from countries where your blog visitors and what browsers are widely used to display the blog pages. Maybe that's enough that I need to explain and for others to see and try to please see your own this Blogger Statistics features on the Dashboard page your blog.

Good luck!

Eliminate Sidebar Title

2010-07-10T01:58:00.000+07:00

These days I am bothered by the title of a sidebar that can not be removed but before there is a change from Blogger to remove the sidebar title is easy enough to empty the box provided for the title but after a change becomes very difficult because we must make changes on our blog template.
To remove a title on the sidebar there are two different ways according to the results of an experiment that I do are:

1. Using CSS code.
2. Eliminate the source code from the title or an order to show the title in the sidebar in the template.

Step One:
1. Login to Blogger.com..
2. Click menu Design.
3. Click on Edit Html menu..
4. View and record the first ID Widget that will be removed. Suppose you want the widget ID is eliminateHTML1, HTML2 , HTML3 , HTML4.
5. After viewing and recording ID Widget one after the next step search code ]]></b:skin>. If you have found this place the code below just above ]]></b:skin>

#HTML1.title, #HTML2.title, #HTML3.title, #HTML4.title {
display:none
}

6. Click the button marked Image to see results and if it is in conformity with the desire click the Save Template button.
7. Done.

Step Two
Still on the Edit menu Html, check the little box beside writing Expand Widget Templates then search for sidebar title to eliminate Friend Link Under these headings there is code like below use (CTRL + F to search):

<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>

If you have found this to delete code:

<h2 class='title'><data:title/></h2>
</b:if>

Click the preview button to see results and if it is in conformity with the desire click the save button templates.

Done and good luck!

Creating Floating Shoutbox

2010-07-07T00:11:00.001+07:00

Perhaps many of you new bloggers who are still confused about how to Create Floating Shoutbox follows I will show you how to no longer confused about how to create floating shoutbox. Get to the subject, the steps in making Shoutbox drift is as follows:

1. Login to Blogger.com.
2. From Dashboard Page click menu Design and click Edit Html menu.
3. Further search code </head>, if you have found, place the following code just below the code </head>

<style type='text/css'>
#gb{
position:fixed;
top:50px;
 /* position of the button layout to change according to your wishes */
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh6.ggpht.com/_pThhtmWVZ88/S64CahqtgEI/AAAAAAAAA2o/WGVlprYGc3Q/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #cccccc;
background:#eeeeee;
padding:10px;
}
</style>
<script type='text/javascript'>
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id='gb'>
<div class='gbtab' onclick='showHideGB()'></div>
<div class='gbcontent'>
<div style='text-align:center;'><a href='javascript:showHideGB()' title='Close'/>
</div>

Put your script Shoutbox here


<div style='text-align:right'>
<a href='javascript:showHideGB()'>
[close]
</a>
</div>
</div>
</div>
<script type='text/javascript'>
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
</div>

Description:

top: 50 px;

is location of button can Shoutbox above and below please your creation own according to your liking.

4. Click the button Image and if it is in accordance with the wishes click Save Template.

Done and good luck!

How to Avoid Stock Personalized Search

2010-07-04T00:44:00.001+07:00

Connecting posts ago about the Personalized Search which make busy owner of a blog/web because the process of checking the more complex positions. To be more clear please read before posting.
To avoid the effects of Personalized Search is a web browser there are some programs that already provide a way to avoid the effects of Google's Personalized Search. One of browsers that provide this facility is Mozilla Firefox.
An easy way is by using Private Browsing feature we can use to make browsing so we are not traceable trail. Because Personalized Search using Cookies and Cookies will not be active when we do browsing using Private Browsing feature of Mozilla Firefox, using the Private Browsing feature the results of our search in the Internet world will not be 'contaminated'. To enable Private Browsing feature Mozilla Firefox, click the Tools - Start Private Browsing or to make it easier just hit Ctrl + Shift + P, Then do check your site's position as usual. If so, turn off Private Browsing feature is back.
Done And Good Luck!

Sources of articles in Indonesian Language : http://panduandasar.com

Features That Make Google's Personalized Search Bother

2010-06-30T18:11:00.000+07:00

Since a few months ago, December 4 , 2009, Google officially announced the new Personalized Search feature. Unlike previously where the effects of Personalized Search is only applicable for users of Google's search engine is currently logged into their Google account, Personalized Search now effect applies to persons who use the Google search engine, no matter if they're logged in or not. This leads me to say these features make the hassle of SEO activities.
Google Personalized Search is a feature where the results of searches performed by visitors are no longer purely based on ratings, but have been influenced against the relevant customs visitors. For example, if you do a search on tutorial blogspot and that you click on a search results page blogspot tutorial site which is in a position to 10th, then at a later time, if we do a search on blogspot tutorial again, then the site will most likely be ranked number one, although it was not the original ratings.
For owners of blogs and websites, this feature is causing problems on two things, namely: Not easy to check rankings for the sites they have, because the results are displayed on search pages has been affected by the Personalized Search. More difficult to attract first- time visitors because once someone clicks on a competitor, it's likely in the next search (for similar keywords), they will return a competitor is clicking.
For the first problem can be solved with the first logout from the Google account and cleaning up cookies listed. In Firefox, you can do so via the Web Developer toolbar, and click on Cookies - Delete Domain Cookies at while flying on Google's site. As for the second issue we will discuss how the next article.

Sources of articles in the Indonesian language in http://panduandasar.com

How to Make Color Label Cloud

2010-06-27T16:36:00.001+07:00

Tag or label mentioned in a blog category also very important benefits in addition is to classify the posting, in terms of SEO also helps. With the existence of these labels will facilitate visitors in finding the information sought.
In terms of innate view of Blogger appearance of label is actually spelled is good enough but if we are not happy we can make the appropriate modifications to the look we want, by making the writing on the label is colored cloud, or by making the appearance of this spin label cloud.
To make it difficult even for a beginner though as only live just copy and paste .

Stage in the modification of this Label Cloud as follows:
1. Log in to Blogger.com.
2. Select Design - > Edit HTML.
3. First backup your template by downloading the template.
4. Then find the code below:

]]></b:skin>

5. Then place the code below directly above

/*--- Color Cloud --- */
.label-size-1 a {
font-size: 12px;
text-decoration: none;
color:#66B5FF;}
.label-size-2 a {
font-size: 14px;
text-decoration: none;
color:#cc0000;}
.label-size-3 a {
font-size: 15px;
font-family: Arial, Tahoma, Verdana;
text-decoration: none;
color:#38B63C;}
.label-size-4 a {
font-size: 18px;
font-weight:bold;
text-decoration: none;
color:#ff7c66;}
.label-size-5 a {
font-size: 24px;
text-decoration: none;
color:#ffcc66;}
.label-size-1 a:hover, .label-size-2 a:hover, .label-size-3 a:hover, .label-size-4 a:hover, .label-size-5 a:hover {
text-decoration:underline;
}

Description: The article "Color" in the code is the color of each text from a label you please change according to your liking.

Finished, save the template changes and see results. Good luck!

Automatic Open Links Without The Click

2010-06-23T00:12:00.001+07:00

Another unique tutorials adorn this blog after creating posts Make Tabview Tidget On Sidebar and How To Increase Blog Traffic new post because this tutorial I should test code first, this tutorial does not need to code a lot and only a few letters and symbols only. little explanation, which I discuss link is not much different this time with links others, which distinguish this link is not necessary at this link click to open it, we just need to mouse over the link then automatically opens link itself. The weakness of this link is a link could not be opened in new windows even though given the command target="_blank" or target="_new" thus causing blog page will be overwritten existing pages in the link. Maybe just enough so let's not boring explanation.

If you want to know for example, please point your mouse here.

If you already know, now to make the link open automatically you just create a code like the following:

<a href="http://tutorial-4u.blogspot.com" onmouseover="window.location=this.href">Blog Tutorial</a>

If you or the webmaster anyone knows how to make these links open in new windows I beg you for sharing your knowledge and write in the comments field. Thank you.

Make Tabview Widget On Sidebar

2010-06-21T07:29:00.001+07:00

Blogging for some people is considered fun but what if in your blog's sidebar that we lacked a place to put various accessories blog that the number spelled out many hundreds and even until relatively narrow place on the sidebar for a variety of accessories.
Possible for the webmaster is not a problem but what about us that are still common in the world of blogs/websites? The answer is very clear confusion, dizziness etc.
To overcome the problem of shortage of places on the sidebar of many, many ways but in this edition I will show one way of making a sidebar widget that is similar to menus in neat rows on the blog that called with tabview widget you can http://mpthreelyrics.blogspot.com.
Whether we start it and please you follow these steps:

First Step
Please you must login to Blogger.
In Dasbor select menu Edit Html and uncheck the little box next to Expand Template Widget because it would appear the codes you a real headache and then search ]]></b:skin> on your own template code. Press Ctrl + F and enter the code above, if you have found a copy and paste the CSS code below in the code earlier:

/*--- Menu Tab View --- */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}

/*--- Main Menu ---*/
div.TabView div.Tabs a {
float: left;
display: block;
width: 90px;/*--- menu width--*/
text-align: center;
height: 24px;/*--- height of the menu ---*/
padding-top: 3px;
margin-right: 4px;/*--- the distance between menus ---*/
vertical-align: middle;
border: 1px solid #CCC;/*--- menu border color ---*/
border-bottom-width: 0;
font-family: "Arial", Times New Roman, Serif;/*--- menu fonts ---*/
font-size: 12px;/* large font menu */
letter-spacing: -1px;
background-color: #A4A4A4;/*--- menu background color ---*/
color: #FFFFFF;/*--- menu font color ---*/
-moz-border-radius-topleft:10px;
-moz-border-radius- topright:10px;
-webkit-border-top-left- radius:10px;
-webkit-border-top-right- radius:10px;
}
div.TabView div.Tabs a.Active {
background-color: # 888888;/*--- background color active menu ---*/
color: #FFFFFF;
}
div.TabView div.Tabs a:hover {
background-color: # 999999;/*--- menu background color hover ---*/
color: #FFFFCC;
font-weight: bold;
}

/* Main Grid */ 
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC;/*---    main box border color ---*/
overflow: hidden;
background:url(" http://i563.photobucket.com/albums/ss76/peace_enes/bgtabview.gif");/*--- background main box ---*/
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden; 
}
div.TabView div.Pages div.Page div.Pad {
padding: 3 px 5px;
font-size: 12px;/*--- main box big letters ---*/
}

who is writing a description can sign in fox according to your wishes

Next place the code below under the code

]]></b:skin>

<script src="http://sites.google.com/site/myscriptku/script/viewtab.js" type="text/javascript"/>

Click the button marked Save Template

Step Two
Click on the menu Page Element then click on Add Gadget and select Html/JavaScript wait a moment, then copy and paste the following code into the box:

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Info Menu 1"> Menu 1 </a>
<a title="Info Menu 2">Menu 2</a>
<a title="Info Menu 3">Menu 3</a>
</div>
<div style="width:99%;height:200px;" class="Pages">

<!-- Start Menu 1 -->
<div class="Page">
<div class="Pad">
Contents Menu 1.1<br/>
Contents Menu 1.2<br/>
Contents Menu 1.3. etc<br/>
</div></div>
<!-- End Menu 1 -->

<!-- Start Menu 2 -->
<div class="Page">
<div class="Pad">
Contents Menu 2.1<br/>
Contents Menu 2.2<br/>
Contents Menu 2.3. etc<br/>
</div></div>
<!-- End Menu 2 -->

<!-- Start Menu 3 -->
<div class="Page">
<div class="Pad">
Content Menu 3.1<br/>
Content Menu 3.2<br/>
Content Menu 3.3. etc<br/>
</div></div>
<!-- End Menu 3 -->
</div></div>
</form>

<script type="text/javascript">tabview_initialize('TabView');</script>
<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;">
<a href="http://ruangsc.blogspot.com/2009/07/cara-membuat-tab-view-widget-pada.html" target="_blank" title="Tabview Widget">Widget by SC Community</a></div>

Posts Info Menu 1, Menu, Contents Menu, etc. Can the fox according to your wishes, in addition you can also add another menu for your blog's sidebar is adequate, if not enough you can change the width menus at the CSS code that you put on top of ]]></b:skin> on your blog and HTML code that you put on sidebar your blog.

Save the results of your changes and see results.

Done, and good luck!

How to Increase Blog Traffic

2010-06-18T00:33:00.001+07:00

This tutorial specifically for beginner Bloggers who have become so webmaster does not seem to need a tutorial like this and I beg leave alone suggestions for beginner Blogger like me in the comments field so that the new Blogger can learn.
How to increase blog traffic is very much at all starting from ad, link exchange etc, besides the way you can utilize services of the site Blogclicker, that powerful and potent increase blog traffic has significant effect on PageRank Blog. In affairs may bring visitors Blogclicker
could be the choice in matters of traffic.
Create your willing and want to increase blog traffic with help of Blogclicker please Follow this tutorial to complete and for those who do not want to please close your browser.
To register on this site is very easy and not hard enough to fill in your name and email only, after a successful registration you will be given the shipment an email with your username and password used to login to the site Blogclicker.
Once logged in locate and click Manage Blog menu after that enter Url your Blog or Url Blog postings you want to improve. If already now see on the right hand side there is a light image, click on the picture to tell that the url you're ready for the update. If all is done, now switch attention to Bar Blog for surfing and surf will get every Credit to do in exchange for visits to your blog.
The more frequent and more to surf the more traffic you can get. Another advantage if you could ask a friend or someone else to use the services website Blogclicker then you will get credited more than five times the income of a friend or someone else who you refer. So first because it was tired and if unclear please go to the site Blogclicker directly for further details and register at the same time. To reach the site please click here.

Okay good luck and have abundant traffic.

Blogger Navbar Using JQuery

2010-06-16T18:40:00.001+07:00

About Blogger Navbar again the most rare interest to Blogger because it is considered disturbing the landscape. Actually I never discussed this problem but the Blogger NavBar at the previous postings using only CSS Code which is quite easy to apply by Blogger beginners though.
The two ways that I post that is Remove the Blogger Navbar and Blogger Navbar Appear And Disappear or in other words can come and hide, appear when highlighted with the mouse and hide if not highlighted with the mouse, please go back if my friend forgot or never read it .
Now for that now is the same with the Blogger Navbar Appear And Disappear difference for this one makes use JQuery is quite small although it does not require any complicated code that much. This method uses JavaScript so that can become transparent and Navbar buddies can arrange this Navbar transparent effects ranging from 0% (Normal Condition) up to 100% (Not Visible).
If my friend wants to learn or just want to try to just please read the following ways:

1. Login to Blogger.com.
2. Click Design which is a change from the Layout.
3. Click the Edit Html Menu and uncheck Expand Widget Templates.
4. Search code </head>.
5. If you have found a copy code below and paste it in the code earlier.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

$(document).ready(function(){

$("#navbar").fadeTo("slow", 0.1
);

$("#navbar").hover(function(){

$(this).fadeTo("slow", 1.0
);

},function(){

$(this).fadeTo("slow", 0.1
);

});

});

</script>

Little explanation, I figure the red print

0.1

shows the effect of transparency of the navbar 90% and if you want change do not look at all figures

0.1

with

0.0

.
If you wish to remain in a state Navbar transparent when the mouse is at the point instead of numbers

1.0

I have a yellow print

0.75

to get a transparent effect for 25%.

6. Done, see the changes by clicking the green button marked Image and if it is in accordance with the wishes Click Save Template.

How my friend is not easy enough, well please in practice and good luck.

Source Script: Blog Music Indo

Tips to Avoid Hackers On Social Network Sites

2010-06-14T07:50:00.000+07:00

Facebook, Twitter and other social networking site which is again booming, and most in great demand, so it's no wonder visitors from social networking sites are so numerous. Given that many visitors, the social networking site is a field for the Pretender to run the action.
Therefore, man must always be aware of various scams on the social networking site.
This mode is the average fraudster uses another person eg account and the account was used to defraud buddy friend by asking for money transfers with a variety of convincing reasons.
Now how to keep this scam does not happen to us?

Few tips to keep my friend to know to avoid this rogue action:

1. Do not click on links that go to the email address of the site that my friend was not clear whether it is an offer or solicitation of any kind.
2. Use a password that is hard to guess someone with a combination of letters and numbers and a combination of uppercase and lowercase letters. Distinguish account passwords with others and as much as possible with regular change password at least once a month and do not save or write the password in a wallet or a place that is easy on the touch or known to others.
3. Always use personal computers and as much as possible to avoid a computer that consumes more than one such cafe.
4. If you can use the Virtual Keyboard to write the password because the virtual keyboard can not be recorded by a keylogger. On each computer is now equipped with a virtual keyboard program called On Screen Keyboard.
The location of the on screen keyboard have Start => All Programs => Accessories => Accessibility => On Screen Keyboard. Try dech search buddy must meet.

Well it was a bit simple tips that may be beneficial to my friend all in terms of foul intent to avoid the fraudsters and hackers.
Once again be careful and always be vigilant when my friend using the social networking site or other sites.

If my friend had the experience of fraud issues in the social networking site, please write in comments field so everyone knows the truth about the fraud in the social networking site.

Make Rotating Label Cloud

2010-06-11T01:16:00.003+07:00

Compete to decorate the blog with various widgets, pictures etc for bloggers is a fun thing, including my own, including bloggers who are never satisfied with what I produce. If I make a posting about Google Translate Shape Flag I will now try to create a label cloud rotates alternately, but this does not automatically but manually, so the label should list the URLs one by one, because I've never tried that automatically succeeded until now. Do not know why never succeeded, probably because the template that I use on this blog does not fit with the script but with the manual method is successful with a success and an example can be seen on my blog buddies who never neglected here.

For how to create a Label Cloud Whirling as follows:
Copy and paste the following code in the sidebar of your blog.

<center>
<embed type="application/x-shockwave-flash" src="http://sites.google.com/site/ruangbmi/tagcloud.swf" id="tagcloud" name="tagcloud" bgcolor="#ffffff" quality="high" flashvars="tcolor=0x333333&amp;mode=tags&amp;distr=true&amp;tspeed=100
&amp;tagcloud=&lt;tags&gt;
&lt;a href='http://tutorial-4u.blogspot.com/search/label/Blog%20Tutorial' style='16' target='_blank'&gt;Blog Tutorial&lt;/a&gt;
&lt;a href='http://tutorial-4u.blogspot.com/search/label/Information' style='16' target='_blank'&gt;Information&lt;/a&gt;
&lt;a href='http://tutorial-4u.blogspot.com/search/label/Technorati' style='16' target='_blank'&gt;Technorati&lt;/a&gt;
&lt;a href='http://mpthreelyrics.blogspot.com/search/label/Games%20Online' style='16' target='_blank'&gt;Games Online&lt;/a&gt;
&lt;a href='http://mpthreelyrics.blogspot.com/search/label/Java%20Aplication' style='16' target='_blank'&gt;Java Aplication&lt;/a&gt;
&lt;a href='http://mpthreelyrics.blogspot.com/search/label/Java%20Games' style='16' target='_blank'&gt;Java Games&lt;/a&gt;
&lt;a href='http://mpthreelyrics.blogspot.com/search/label/Paypal' style='16' target='_blank'&gt;Paypal&lt;/a&gt;
&lt;/tags&gt;" width="200" height="100"
 allowscriptaccess="always"></embed>
</center>

Note: Replace URL with the URL's label mate.

tspeed=100

=> This is the rotating speed of the cloud. If you want to add value faster vice versa.

width="200" height="100"

=> width and height of the cloud, adjust the sidebar of your blog.

If you have saved and see results.

Good luck and be creative.

Google Translate Shape Flag

2010-06-09T00:13:00.002+07:00

Language in the Internet world is very diverse because of internet users from all over the world. With the existence of different languages in the Internet if all people can understand? The answer surely you all know.
If we are residing in territory of Indonesia would set up a blog/website most definitely using the Indonesian language, what if your blog visitors from overseas who do not understand Indonesian? would be very inconvenient. But you do not need to worry because we can install the language translator facility on a blog or website, this way I already made the first post but use the dropdown menu, if you forget or have never read please open here.

This language translator widget I get from blogs my friends. If you want to install this widget, please copy only code below and install in sidebar. For installation in the sidebar does not need me explain it again because all of you surely already know.

<div style="text-align:center;">

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img border="0" alt="Arabic" style="cursor: pointer;margin-right:3px" src="http://img31.imageshack.us/img31/1661/pinginbelajarsaudiarabi.gif" title="Arabic" align="absbottom" /></a>  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img border="0" alt="Korean" style="cursor: pointer;margin-right:3px" src="http://img43.imageshack.us/img43/2771/pinginbelajarsouthkorea.gif" title="Korean" align="absbottom" /></a>  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img border="0" alt="Japanese" style="cursor: pointer;margin-right:3px" src="http://img34.imageshack.us/img34/4583/pinginbelajarjapan.gif" title="Japanese" align="absbottom" /></a>  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img border="0" alt="Chinese Simplified" style="cursor: pointer;margin-right:0px" src="http://img41.imageshack.us/img41/1681/pinginbelajarchina.gif" title="Chinese Simplified" align="absbottom" /></a>
<br/>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img border="0" alt="Russian" style="cursor: pointer;margin-right:3px" src="http://img32.imageshack.us/img32/7591/pinginbelajarrussia.gif" title="Russian" align="absbottom" /></a>  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img border="0" alt="Portuguese" style="cursor: pointer;margin-right:3px" src="http://img31.imageshack.us/img31/7112/pinginbelajarbrazil.gif" title="Portuguese" align="absbottom" /></a>  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img border="0" alt="English" style="cursor: pointer;margin-right:3px" src="http://img43.imageshack.us/img43/2598/pinginbelajarunitedking.gif" title="English" align="absbottom" /></a>  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img border="0" alt="French" style="cursor: pointer;margin-right:0px" src="http://img40.imageshack.us/img40/4035/pinginbelajarfrance.gif" title="French" align="absbottom" /></a>
<br/>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img border="0" alt="German" style="cursor: pointer;margin-right:3px" src="http://img38.imageshack.us/img38/344/pinginbelajargermany.gif" title="German" align="absbottom" /></a>  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img border="0" alt="Spain" style="cursor: pointer;margin-right:3px" src="http://img41.imageshack.us/img41/1191/pinginbelajarspain.gif" title="Spain" align="absbottom" /></a>  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img border="0" alt="Italian" style="cursor: pointer;margin-right:3px" src="http://img36.imageshack.us/img36/6670/pinginbelajaritalia.gif" title="Italian" align="absbottom" /></a>  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img border="0" alt="Dutch" style="cursor: pointer;margin-right:0px" src="http://img33.imageshack.us/img33/2439/pinginbelajarnetherland.gif" title="Dutch" align="absbottom" /></a></div>

If you are finished do not forget to save the changes you made and see results.

Good luck!

Instaling Google Translate With Dropdown

2010-06-07T00:06:00.001+07:00

If your blog is in Indonesian language it's good install language translator widget so visitors of Foreign Affairs of the language is different from the language we can understand the Indonesian people by writing that we make in our blog. Actually, this widget has been provided by the Blogger but it does no harm if we can make it manually at the same time to learn.
To make this widget is not so difficult, simply copy the code below into your blog sidebar.

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

The result is like this :

You can also get a code at http://translate.google.com.

Finish and see the results.

Good luck!

Put Emoticons In Top Box

2010-06-05T00:31:00.001+07:00

Reviews Make you want on the comment box there are emoticons especially bloggers, maybe you can follow this tutorial. directly to the subject just let me not get bored and not tired of typing because I'm lazy because of a new home from work.

1. Login to Blogger.com.
2. Click menu Layout.
3. Click menu Edit Html
4. If it is then check the little box next to Expand Widget Templates
5. Please you look like the code below on your own templates.

]]></b:skin>

To facilitate the search using the find facility on the toolbar or press CTRL + F on your keyboard and enter this article

]]></b:skin>.

6. If you have found a copy and paste the script below right under this code,

<script src='http://sites.google.com/site/myscriptku/script/Yamessmiley.js' type='text/javascript'/>

or this script :

<script src='http://www.hotlinkfiles.com/files/2663243_4xnvn/yemoticon.js' type='text/javascript'/>

can also use the scripts I get from his blog O'OM

<script src=' http://oom.blog.googlepages.co m/smiley.js' type='text/javascript'/>

7. After that look for code like this

<p class='comment-footer'>

<b:if cond='data:post.embedCommentForm'>

8. If you have found a copy and paste the code below directly below <p class='comment-footer'> and the above code <b:if cond='data:post.embedCommentForm'>

<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>

:))

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>

:)]

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>

;))

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>

;;)

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>

:D

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>

;)

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>

:p

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>

:((

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>

:)

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>

:(

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>

:X

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>

=((

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>

:-o

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>

:-/

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>

:-*

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>

:

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>

8-}

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>

~x(

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>

:-t

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>

b-(

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>

:-L

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>

x(

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>

=))

</b>

9. When you're finished press the orange button labeled Save Template.
10. Done. Now let's see the result already appears not emoticon.

Emoticons code from above you can also use as an ornamental post your example like this

Good luck!

Cursor Followed Posts

2010-06-03T08:03:00.001+07:00

To this one is certainly no stranger anymore because my friend who has a website and make sure the blog is often faced with the computer name. In a computer it is definitely my friend also often use a mouse. This mouse has the shape of arrows pointing device called a "Cursor" that can change shape as well as in website or blog. Now create a buddy who wants to change the shape "Cursor" in your website or blog, please copy code below and paste it on your sidebar elements, placed in the code template could also, just paste the below code </head>

<script>

//mouse

//Circling text trail-Tim Tilton

//Website: http://www.tempermedia.com/

//Visit http://www.dynamicdrive.com for this script and more

function cursor_text_circle(){

// your message here

var msg='Text Write here
'.split('').reverse().join('');

var font='Verdana,Arial';

var size=3; // up to seven

var color='#ff0000';

// This is not the rotation speed, its the reaction speed, keep low!

// Set this to 1 for just plain rotation w/out drag

var speed=.3;

// This is the rotation speed, set it negative if you want

// it to spin clockwise

var rotation=-.2;

// Alter no variables past here!, unless you are good

//---------------------------------------------------

var ns=(document.layers);

var ie=(document.all);

var dom=document.getElementById;

msg=msg.split('');

var n=msg.length;

var a=size*13;

var currStep=0;

var ymouse=0;

var xmouse=0;

var props="<font face="+font+" size="+size+" color="+color+">";

if (ie)

window.pageYOffset=0

// writes the message

if (ns){

for (i=0; i < n; i++)

document.write('<layer name="nsmsg'+i+'" top=0 left=0height='+a+' width='+a+'><center>'+props+msg[i]+'</font></center></layer>');

}

else if (ie||dom){

document.write('<div id="outer" style="position:absolute;top:0px;left:0px;z-index:30000;"><div style="position:relative">');

for (i=0; i < n; i++)

document.write('<div id="iemsg'+(dom&&!ie? i:'')+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center;font-weight:normal;cursor:default">'+props+msg[i]+'</font></div>');

document.write('</div></div>');

}

(ns)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(evnt){

ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position

xmouse = (ns|| (dom&&!ie))?evnt.pageX+20:event.x-20; // x-position

}

if (ns||ie||dom)

(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;

var y=new Array();

var x=new Array();

var Y=new Array();

var X=new Array();

for (i=0; i < n; i++){

y[i]=0;

x[i]=0;

Y[i]=0;

X[i]=0;

}

var iecompattest=function(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;

}

var makecircle=function(){ // rotation properties

if (ie) outer.style.top=iecompattest().scrollTop+'px';

currStep-=rotation;

for (i=0; i < n; i++){ // makes the circle

var d=(ns)?document.layers['nsmsg'+i]:ie? iemsg[i].style:document.getElementById('iemsg'+i).style;

d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? 'px' : '');

d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(ie||dom? 'px' : ''); // remove *2 for just a plain circle, not oval

}

}

var drag=function(){ // makes the resistance

y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);

x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);

for (var i=1; i < n; i++){

y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);

x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);

}

makecircle();

// not rotation speed, leave at zero

setTimeout(function(){drag();},10);

}

if (ns||ie||dom)

if ( typeof window.addEventListener != "undefined" )

window.addEventListener( "load", drag, false );

else if ( typeof window.attachEvent != "undefined" )

window.attachEvent( "onload", drag );

else {

if ( window.onload != null ) {

var oldOnload = window.onload;

window.onload = function ( e ) {

oldOnload( e );

drag();

};

}

else

window.onload = drag;

}

}

cursor_text_circle();

</script>

Replace my blueprint in accordance with the wishes.

Finish and save the changes and see the results mate.

Good luck!

Creating Navigation Go Up And Down

2010-06-01T00:36:00.001+07:00

Judging from the title that I made maybe you already understand what I mean. I'll explain a bit there might be a who did not yet understand. Please refer to brief you on the right hand corner of this blog or blogs that have here and please you try to click on the button with the arrow upward or downward. The function of this button makes it easy for your visitors to go to the top and down the blog page with just one click and the button will not budge even if you scroll up or down, this button will always remain on the bottom right hand corner of your computer monitor. I think you've understood my brief explanation and we are now discussing how to create a cloud this by following the way of following through to completion.

Login to Blogger.com with username and password you. Click the Layout Menu and click on the menu Edit Html. Do not forget to download full template first as a back-up data in case of errors in editing the template, you can still return to normal. Then find the code ]]></b:skin> if you have found a copy code below and paste it directly above the code.

#image {
position:fixed;
_position:absolute;
bottom:0px;
right:3px;
clip:inherit;
z-index:+1000;
}

If you have another copy code below and paste it in between the code </head> and code </body> or if it just confused place right under the code </head>

<div id='image'>

<a href='#' title='Ke Atas'><img border='0' src='http://lh6.ggpht.com/_pThhtmWVZ88/S6GTje5rvAI/AAAAAAAAAzo/mmWmXLqMNA4/up.gif
'/></a><br/>

<a href='#bottom' title='Ke Bawah'><img border='0' src='http://lh3.ggpht.com/_pThhtmWVZ88/S6GTjPshAfI/AAAAAAAAAzk/Tx60Un9hHLw/down.gif
'/></a>

</div>

The url is the url of my red print image that appears could change according to your wishes.

Done, save your template changes and see results.

Good luck!!!

Dinamix-FX-Slide-In Menu

2010-05-30T11:42:00.001+07:00

On the internet browsing habits are indeed many benefits in the can as I post this time is the result of browsing and finally get a good tutorial in www.dynamicdrive.com.
This tutorial is given a name Dinamix-FX-Slide-In Menu. I will explain a little Dinamix FX Slide In Menu is a menu that is always hidden in the left side of the screen and is visible only if the menu bar and the mouse cursor is placed on the new menu bar menu that is in them will emerge, this menu is also unique because it is always follow movements to scroll up or down and is always on the left side of the screen.
If you are interested to make it please download the first code, click the article below:

DOWNLOAD CODE

If you have downloaded, extract used to use the software winrar or winzip because this file has extensi.zip. After the two files will appear that has the name ssm.js and ssmltems.js then upload the file but before you upload, you need to edit the file named ssmltems.js to replace the existing link with your own links.
To do edit the file follow the following ways:
right click on the file named ssmltems.js and select Open With and select Notepad, after the open will appear like the example code below :

<!-- 

/* 

Configure menu styles below

NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors

*/ 

YOffset=150; // no quotes!!

XOffset=0;

staticYOffset=30; // no quotes!!

slideSpeed=20 // no quotes!!

waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.

menuBGColor="black";

menuIsStatic="yes"; //this sets whether menu should stay static on the screen

menuWidth=150 ; // Must be a multiple of 10! no quotes!!

menuCols=2;

hdrFontFamily="verdana";

hdrFontSize="2";

hdrFontColor="white";

hdrBGColor="# 170088 ";

hdrAlign="left";

hdrVAlign="center";

hdrHeight="15";

linkFontFamily="Verdana";

linkFontSize="2";

linkBGColor="white";

linkOverBGColor="#FFFF99";

linkTarget="_top";

linkAlign="Left";

barBGColor="# 444444 ";

barFontFamily="Verdana";

barFontSize="2";

barFontColor="white";

barVAlign="center";

barWidth=20; // no quotes!!

barText="MAIN MENU"; // <IMG> tag supported. Put exact html for an image to show.

/////////////////////////// 

// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header

ssmItems[0]=["Menu"] //create header

ssmItems[1]=["Home", "http://mpthrelyrics.blogspot.com", ""]

ssmItems[2]=["Free Games & Aplikasi", "http://download-4u-free.blogspot.com", "_new"]

ssmItems[3]=["Blog Tutorial", "http://tutorial-4u.blogspot.com", "_new"]

ssmItems[4]=["Download Template", "http://www.ziddu.com/download/8406670/Blackwhitemusictemplate.zip.html", "_new"]

buildMenu();

//-->

In fact there are many other menus that you should change according to your liking there are less than 12 menu because I accidentally cut too much. I understand the above code when I really just try to set the display just like the big font, font color, text color and background. You should own because it is easy to learn and while you practice. In writing Main Menu, Home and others that I bolded above may change as you wish.
Furthermore, the file you just uploaded to storage files like google page creator and do not forget to note/copy the files to the url address. To enter into the template code please follow the following guidelines:

1. Login to Blogger.com. 2. Click Layout.
3. Click on Edit Html.
4. Copy paste the following code above the code </head>

<style type="text/css">

<!--

A.ssmItems:link<

color:black;

text-decoration:none;

>

A.ssmItems:hover<

color:black;

text-decoration:none;

>

A.ssmItems:active<

color:black;

text-decoration:none;

>

A.ssmItems:visited<

color:black;

text-decoration:none;

>

//-->

</style>

<SCRIPT SRC="http://sites.google.com/site/myscriptku/script/ssm.js" language="JavaScript1.2">

//Dynamic-FX slide in menu v6.5 (By maXimus, http://maximus.ravecore.com/)

//Updated July 8 th, 03' for doctype bug

//For full source, and 100's more DHTML scripts, visit  http://www.dynamicdrive.com

</SCRIPT>

<SCRIPT SRC="http://sites.google.com/site/myscriptku/script/ssmItems.js" language="JavaScript1.2">

</SCRIPT>

My code in bold please change it with your property that had been uploaded.

5. Click Save Template and see the results.
6. Done and good luck!

If you want to read this article in the Indonesian language, please click here: