0

Have you ever try Dock Menu in computer Macintosh? Or you have been looked it? If not yet no problem, such as the image below example layout of icon Dock Menu. Dock menu such as in computer MAC will show icon effect with (Aquos) style, we will see the size change when the mouse goes to that menu.



Ndesign-studio.com is one of sites that provide open source to Css Dock Menu. From all example of coding Dock Menu the easiest from this service is practice it. For sample of layout you can see here. Actually in this sites have already learned as short the tutorial. But it will be better if I explain more.

Follow the step to installing Dock menu : :


1. Download first file CSS dock menu zip package.


2. Then Unzip that file first.


3. At folder JS there 2 file JavaScript (interface.js and jquery.js) and at folder images you will found image file, please upload all file to each host directory (I save the file at Pages.google.com), If finish please open more folder css-dock-menu, repeat more such as the step before by upload file iepngfix.htc and style.css
 


4. Until here upload process finish, the next step how to installing in blogger



How to embedded on blogger:


1. Enter to Edit HTML menu, search code <head> and put this script under that one:


<head>
<script src='http://oom.blog.googlepages.com/jquery.js' type='text/javascript'/>
<script src='http://oom.blog.googlepages.com/interface.js' type='text/javascript'/>
<link href='http://oom.blog.googlepages.com/style.css' rel='stylesheet' type='text/css'/>


For pink color above please satisfied it based on each path directory.


2. Still at Edit HTML page, search code </body> then put this file on code </body> such as below:


<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);
</script>

</body>
</html>



The last step just installing process menu. This Dock menu can you put at wherever area , can in blogger page element or edit HTML page. To make it easy you ca install it this example code below.


<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="http://www.o-om.com"><img src="http://oom.blog.googlepages.com/home.png" alt="home" /><span>Home</span></a>
<a class="dock-item" href="http://www.o-om.com"><img src="http://oom.blog.googlepages.com/email.png" alt="contact" /><span>Contact</span></a>
<a class="dock-item" href="http://www.o-om.com"><img src="http://oom.blog.googlepages.com/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
<a class="dock-item" href="http://www.o-om.com"><img src="http://oom.blog.googlepages.com/music.png" alt="music" /><span>Music</span></a>
<a class="dock-item" href="http://www.o-om.com"><img src="http://oom.blog.googlepages.com/video.png" alt="video" /><span>Video</span></a>
<a class="dock-item" href="http://www.o-om.com"><img src="http://oom.blog.googlepages.com/history.png" alt="history" /><span>History</span></a>
<a class="dock-item" href="http://www.o-om.com"><img src="http://oom.blog.googlepages.com/calendar.png" alt="calendar" /><span>Calendar</span></a>
<a class="dock-item" href="http://www.o-om.com"><img src="http://oom.blog.googlepages.com/rss.png" alt="rss" /><span>RSS</span></a>
</div>


Red color above is goal link pink color above please makes it suitable with each path directory.

For professional programming of course will easier, you can change by yours code css and JavaScript or that image based on your need. Because this tutorial for new user so I explain whatever there. Please improve by yours okay. Thanks (Agusramadhani.com)
 

0

I’ve told you before, that removing Navigation Bar Blogger is one of TOS violation. The other solution is, we can use Auto hide Navbar Blogger. Auto hide works is, when the visitor point his mouse to top page, Navbar will appear. Otherwise, if visitor point his mousedown (not in Navbar area), automatically that Navbar will disappear.


How to place it:


Find out body { code in Edit HTML page. Then, insert code below right before body { code:

 

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

 

Good Luck!

0
Dropdown menu or Pull-down menu is the collection of some data (in the form of text and link) which is shortened to become a single menu. Dropdown menus can be used as you need. Beside it can be used as an alternative Blogroll, you can also use it to make many link addresses to the targeted site. Do you want to know how to make it?

How to make standard dropdown menu



 

<form name="jump">
<select name="menu" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="http://alamat-url1.com">Menu1</option>
<option value="http://alamat-url2.com">Menu2</option>
<option value="http://alamat-url3.com">Menu3</option>
</select>
</form>
 


How to make dropdown menu with button



<form name="jump">
<select name="menu">
<option value="http://alamat-url1.com">Menu1</option>
<option value="http://alamat-url2.com">Menu2</option>
<option value="http://alamat-url3.com">Menu3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="OK">
</form>



How to make dropdown menu with picture button



<form name="jump">
<script>
function jumpMenu(){
location=document.jump.menu.options[document.jump.menu.selectedIndex].value;
}
</script>
<select name="menu">
<option value="http://alamat-url1.com">Menu1</option>
<option value="http://alamat-url2.com">Menu2</option>
<option value="http://alamat-url3.com">Menu3</option>
</select>
<a href="Javascript:jumpMenu()"><IMG SRC="http://oom.blog.googlepages.com/Go.gif" border=0></a>
</form>


Note: The code which is marked with red color can be replaced as you want.

8
below the comment column. Although that blog has been set in Indonesian language, you can change the text with your own style as an example: “Write a comment” or “Want to chit chat” or with the other texts. The method to change that text is very easy, just follow the step below:


1. Enter Edit HTML page

2. Turn on the Expand Template Widget

3.Find the code below:

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b><font color='#444'>
<img alt='Post a Comment' border='0' height='47' src='http://oom.blog.googlepages.com/comments.gif' width='61'/>
<data:postCommentMsg/></font></b></a>
</p>

Change the red text above as you want it.

4. Then save your template, good luck :)
0

Importing Wordpress to Blogger - Blogger don't offer this feature directly within the Blogger UI, a handy little service called Wordpress2Blogger (which is hosted on App Engine) will help you convert your Wordpress blog into a Blogger blog. Then from your dashboard, click "Import" to import the converted file.


0

Has not been one day since the countless pairs icon Back to the top, it also has many colleagues who ask how of the way. Icon back to the top is actually useful to leap from page to page down the top, so colleagues will not have to do ScrollBar on the browser.

0

OK, I just assume you already understand how to make Custom Domain, I have not, please read my previous writing again here or just eBooks downloaded it here. For sub-domain please read more here. Now, following more How to take advantage of the sub-domain for the installation of other (non-Blogger), or more precisely other Platform (Forum, Wordpress, PHP script for instance) but the main domain still use Blogger.


For example, see the use of sub-domains with different platforms below:

0

There are two choices of multi-language widget (translator) that you can use to translate your blog to another language. This widget has been provided by Google Translate dan Babelfish Translator. Unfortunately, this widget still doesn’t support Indonesian language. If your blog is English, there is nothing wrong for you to try this widget :)

0
“Blogger actually never erases your picture although you don’t use that picture. The picture that is uploaded through blogger usually is saved automatically in Google Picasa.”.

Until now, there is no certainty about the saving capacity for the postings in Free Blogger. If you use FTP External (Private hosting), of course the saving capacity depends on the related hosting directory. How about the saving capacity for picture in Blogger? It’s different with the saving capacity for the postings. The saving capacity for picture in Blogger can be seen directly and the picture in Blogger is usually saved automatically in Google Picasa

0
Top post is a statistic which shows some popular articles that we have published. Most of top posts are valued from the amount of clicks or the score from many comments. In default, Wordpress has widget to show top post, but how about blogspot? Of course it could, although standard Blogspot doesn’t have it, we also can show it. Top Post in blogspot that will be made later is counted from the amount of comments. This widget is made by a beautiful blogger woman, Amanda Fazani . This woman can be said as a famous blogger tutorial. Even o-om is amazed with her blogging ability :). This top post widget is made with the help from Yahoo Pipes. It can be seen in