Friday, April 30, 2010

The Meaning Of Blog

Tonight, I thought; before plunging into an online business, so  I must know the various terms in the Internet world. one of them is the blog. I explore several websites that contain the meaning of the blog. this is what I found, there are:

1.    Merriam-Webster said Etymology:  Short for Weblog. That men is a Web site that contains an online personal journal with reflections, comments, and often hyperlinks provided by the writer.
2.    If you see in Wikipedia.org Blog is a type of website, usually maintained by an individual with regular entries of commentary, descriptions of events, or other material such as graphics or video. Entries are commonly displayed in reverse-chronological order.
3.    Wordpress.org On introduction to Blogging (Popular Blog Management System). “Blog” is an abbreviated version of “weblog,” which is a term used to describe web sites that maintain an ongoing chronicle of information. A blog is a frequently updated, personal website featuring diary-type commentary and links to articles on other Web sites. Blogs range from the personal to the political, and can focus on one narrow subject or a whole range of subjects.

Into three terms above, I found some similar the meaning components of blog, there are :
1.    Short for Weblog;
2.    Website;
3.    personal website;
4.    personal journal;
5.    Individually managed;
6.    Regularly updated;
7.    frequently updated;
8.    reflections, comments, and often hyperlinks provided by the owner blog.
enough? maybe you could add or my understanding of the blog. wrong?
Posted by at No comments:
Labels:

Tuesday, March 9, 2010

Simple CSS vertical menu Digg-like

Do you like Digg.com webdesign? I like much its menu, simple and clean.

This tutorial explains how to implement a simple vertical menu digg-like using CSS and javascript to show/hide sub-menu. The result is like this:
 
 Download this tutorial


Step 1: HTML code
HTML structure is very simple and contains two 
     tags (menu and sub-menu):



    Copy and paste the following code in a new html page:



    Step 2: CSS code
    Copy and paste this code to define menu button:

    ul, li{margin:0; border:0; padding:0; list-style:none;}
    #middlebar{
    font-size:11px;
    color:#3b5d14;
    background:#90b557;
    font-weight:bold;
    padding:4px;
    height:30px;
    }
    #middlebar .menu li {
    background:url(lm.png) left top no-repeat;
    height:30px;
    float:left;
    margin-right:10px;
    }
    #middlebar .menu li a{
    color:#3b5d14;
    text-decoration:none;
    padding:0 10px;
    height:30px;
    line-height:30px;
    display:block;
    float:left;
    padding:0 26px 0 10px;
    background:url(rm.png) right top no-repeat;
    }
    #middlebar .menu li a:hover{
    color:#666666;
    }


    ...and this is the code for the sub-menu:

    #middlebar ul .submenu {
    border:solid 1px #c9dea1;
    border-top:none;
    background:#FFFFFF;
    position:relative;
    top:4px;
    width:150px;
    padding:6px 0;
    clear:both;
    z-index:2;
    display:none;
    }
    #middlebar ul .submenu li{
    background:none;
    display:block;
    float:none;
    margin:0 6px;
    border:0;
    height:auto;
    line-height:normal;
    border-top:solid 1px #DEDEDE;
    }
    #middlebar .submenu li a{
    background:none;
    display:block;
    float:none;
    padding:6px 6px;
    margin:0;
    border:0;
    height:auto;
    color:#105cbe;
    line-height:normal;
    }
    #middlebar .submenu li a:hover{
    background:#e3edef;
    }


    Step 3: Javascript to show/hide submenu
    Now, add this simple Javascript code to show/hide the sub-menu when an user clicks on a link contained into the menu.

    function showlayer(layer){
    var myLayer = document.getElementById(layer);
    if(myLayer.style.display=="none" || myLayer.style.display==""){
    myLayer.style.display="block";
    } else { 
    myLayer.style.display="none";
    }
    }

    This function get in input the parameter layer (the ID of sub-menu you want hide/display), in this case sm_1, passed from this link:

  • "#" onclick="javascript:showlayer('sm_1')">Profile


    Save all and try it!

     Download this tutorial
Posted by at No comments:
Labels:

Thursday, February 4, 2010

Digg-like navigation bar using CSS

Navigation bar with rounded corners an sliding doors technique for background images, Digg inspired.

This tutorial explains how to design a digg-like navigation bar using a liquid design with rounded corners for links.
The result is something like this:

 Download this tutorial

 Step 1: HTML page
Create a new HTML page and copy and paste the following code inside  tag:



In the second link, "News", I added the class "active" (in bold). If you use URL variables and PHP to implement a dynamic navigation bar with some topics, if is defined an URL variable equal to "topic name" (in this case equal to "news") then add the attributeclass="active" to the link. The code to implement this simple tip is very simple:

 if(isset($_GET['news'])){ echo 'class="active"';}?>


Step 2: rounded corners with liquid design for links
Before to start, I spend few rows to explain how to implement this simple effect using CSS. The typical way is using this simple structure:

...in HTML code:

"mypage.html">All


Step 3: CSS file, #topbar
Create a new CSS file (style.css) and copy and paste the following code for #topbar element (remeber to link this file in your HTML page):

#topbar{
font-size:14px;
color:#3b5d14;
background:#b2d281;
font-weight:bold;
padding:6px;
overflow:auto;
height:1%;
clear:both;
}
#topbar a{
color:#3b5d14;
text-decoration:none;
margin:0 10px;
height:23px;
line-height:23px;
float:left;
display:block;
}
a.active{
height:23px;
line-height:23px;
background:url(pic/tb_a.png) right top no-repeat;
padding-right:10px;
}
a.active span{
background:url(pic/tb_span.png) left top no-repeat;
height:23px;
display:block;
padding-left:10px;
}


Step 4: CSS file, #middlebar
In the same CSS file (style.css), add the following code:

#middlebar{
font-size:11px;
color:#3b5d14;
background:#90b557;
font-weight:bold;
padding:6px;
overflow:auto;
height:1%;
clear:both;
}
#middlebar a{
color:#3b5d14;
text-decoration:none;
margin:0 5px;
padding-right:10px;
height:23px;
line-height:23px;
display:block;
float:left;
background:url(pic/mb_a.png) right top no-repeat;
}
#middlebar a span{
background:url(pic/mb_span.png) left top no-repeat;
height:23px;
display:block;
padding-left:10px;
}

Save and test the result!

 Download this tutorial

Posted by at No comments:

Monday, January 11, 2010

Beauty Menu Navigasi wit css

Menu Navigasi beauty with css ( not with image ) so load your blog is verry fast. Follow this step :


1. Log in your blog.

2. See code like this ]]>

3. Coppy and paste code before code ]]>



/* Navigasi Menu */

#navmenu {

height:auto;

margin:0;

width:100%;

background:#81F781;

float:left;

}

#navmenu ul {

padding: 0;

margin:0;

float: left;

list-style: none;

}

#navmenu li {

padding:0;

list-style: none;

padding: 0;

margin:0;

}

#navmenu ul li {

float: left;

display:inline;

}

#navmenu li a, #navmenu li a:link, #navmenu li a:visited {

color:#000000;

font-family: Verdana;

text-decoration:none;

margin:0;

display:block;

padding:9px 10px 9px 10px;

font-size:12px;

}

#navmenu li a:hover {

background:#088A08;

color:#000000; }

4. Look code like this :












5. Copppy paste code after no 4 :




6. Save.

Good Luck !
Posted by at No comments:
Labels:
Subscribe to: Posts (Atom)