Tools for a webmaster

A web master is a person who is responsible to manage and maintain a web pages/blog. He/she also need to make sure that the web pages/blog are indexed on the search engine. Of course, search engine will try index every web pages/blog on the internet, but it will take time and indexed a few page or every page of your web/blog.

What a webmaster need to do is to submit a site map to the search engine so that the search engine will index the web pages/blog immediately. He/she also can limit the site map to prevent the search engine to indexed unnecessary pages of the web/blog.

There are 3 major search engine that provide free webmaster tools
  1. Google : Google Webmaster tools
  2. Yahoo : Yahoo Site Explorer
  3. MSN : Bing Webmaster tools
Webmaster should use this tools wisely. A webmaster also should know how to find/create the right site map.

Write by Arafa Daming
Labels:

Make a pop-up box like Facebook box

Someone ask me how to create a pop-up box as a notice to visitor. Then, I suggested jQuery to him i found this jQuery plugin (Facebox)

Now, I'll write tutorial about how to apply this plugin.

First, you need to enclose jQuery and this plugin to your page :
<script src="jquery.1.4.4.min.js"></script>
<script src="facebox.js"></script>
And then the jQuery script
<script language="javascript">
$(document).ready(function() {
 $.facebox.settings.opacity = 0.5;
 $('a[rel*=facebox]').facebox();
 $.facebox('This message will pop-up when the page loaded');
});
</script>

Put all this code in the HTML <head> tag.
Done. Have a try!
Visit the official site for more info.

Write by Arafa Daming
Labels: ,

Make a background gradient with CSS (CSS3).

This is another feature of CSS3 and this is awesome.

Example :

CSS3 Gradient background.



CSS code:
#gradient {
    background: -moz-radial-gradient(center, #f4fafe, #a2d2ed) no-repeat #a2d2ed;
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(#f4fafe), to(#a2d2ed)) no-repeat #a2d2ed;
    background: gradient(radial, 50% 50%, 0, 50% 50%, 500, from(#f4fafe), to(#a2d2ed)) no-repeat #a2d2ed;
}
 Have a try! :D

Write by Arafa Daming
Labels:

Remove dotted line (outline) on the clicked link

Remove dotted line (outline) on the clicked link

There will a dotted line around the link after you click on it. To remove that dotted line, simply apply this CSS script :

a:focus {
  border: 0;
  outline: none;
}
Have a try! :D

Write by Arafa Daming
Labels:

[Basic Web Design] Final - The page footer

For this footer, I'll put some background at the bottom left and align the text to the right.
<footer>
<p><a href="#">Home</a> | <a href="#">About Me</a> | <a href="#">Portfolio</a> | <a href="#">Contact Me</a></p>
<p>© 2011 <a href="http://www.arafa-daming.co.cc" target="_blank">Arafa Daming</a></p>
</footer>
The style code :
footer {
    width: 950px;
    height: 50px;
    margin: 10px auto;
    background: #fff url(images/footer-bg.png) no-repeat bottom left;
    border: 1px solid #ccc;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }

footer p {
    text-align: right;
    margin: 0;
    padding-right: 20px;
    font-size: 12px;
    }

footer p a {
    text-decoration: none;
    color: #000;
    }

footer p a:hover {
    text-decoration: underline;
    }
Finish! You can view demo at here.

Write by Arafa Daming
Labels:

[Basic Web Design] Part 7 - Styling web content (sub-content)

For the sub-content, I'll put a background for the title and customizing the paragraph.

  <aside id='left-side'>
  <!--Left side content-->
  <h3>Lorem Ipsum</h3>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<img src="images/rss.png" width="48" height="48">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </aside>
Then style up the content :

#left-side h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    padding-left: 50px;
    text-shadow: 0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0,0,0,.1),
    0 0 5px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.3),
    0 3px 5px rgba(0,0,0,.2),
    0 5px 10px rgba(0,0,0,.25),
    0 10px 10px rgba(0,0,0,.2),
    0 20px 20px rgba(0,0,0,.15);
    background: url(images/icon2.png) no-repeat 12px 0;
    }

#left-side p {
    text-indent: 30px;
    padding: 20px;
    }

#left-side p:first-letter {
    font-size: 20px;
    font-weight: bold;
    }

#left-side img {
    float: right;
    margin: 10px;
    }
 Done!

Write by Arafa Daming
Labels:

[Basic Web Design] Part 6 - Styling web content (Highlight)

6For this highlight, I'll apply simple image sideshow using jQuery.

First, include j query to your page, paste this code on <head> tag :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
Put the image on the highlight section :

<section id='highlight'>
<!--Highlight-->
<img src="images/slide1.png" width="950" height="300">
<img src="images/slide2.png" width="950" height="300">
<img src="images/slide3.png" width="950" height="300">
</section>
Give it style, put this on the <style> tag :

#highlight img { position:absolute; left:0; top:0; }
Lastly, put this script on the <head> tag :

<script>
$(function(){
    $('#highlight img:gt(0)').hide();
    setInterval(function(){$('#highlight :first-child').fadeOut().next('img').fadeIn().end().appendTo('#highlight');}, 3000);
});
</script>
Done!

Write by Arafa Daming
Labels:

[Basic Web Design] Part 5 - Styling web content (Navigation)

We are suing unordered list for navigation :

<nav>
<!--Navigation-->
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Me</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact Me</a></li>
</ul>
</nav>
Then give it some style :

ul {
    margin: 15px 0 0 20px;
    padding: 0;
    list-style: none;
    }

ul li {
    display: block;
    }

ul li a {
    float: left;
    width: 200px;
    margin: 0 10px;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    color: #666;
    background: #d2f4f5;
    border: 1px solid #ccc;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }

ul li a:hover {
    color: #d2f4f5;
    background: #666;
    }
Done!

Write by Arafa Daming
Labels:

[Basic Web Design] Part 4 - Styling web content (Header)

In header, i only use 3D text effect(CSS3) and one image as a background.

<header>
<!--Page title & description-->
<h1>Basic Web Design</h1>
<h2>First web design tutorial by me :D</h2>
</header>
Add this CSS code to the <style> tag :

h1 {
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 40px;
    padding-left: 30px;
    text-shadow: 0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0,0,0,.1),
    0 0 5px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.3),
    0 3px 5px rgba(0,0,0,.2),
    0 5px 10px rgba(0,0,0,.25),
    0 10px 10px rgba(0,0,0,.2),
    0 20px 20px rgba(0,0,0,.15);
    }

h2 {
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 20px;
    padding-left: 50px;
    text-shadow: 0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0,0,0,.1),
    0 0 5px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.3),
    0 3px 5px rgba(0,0,0,.2),
    0 5px 10px rgba(0,0,0,.25),
    0 10px 10px rgba(0,0,0,.2),
    0 20px 20px rgba(0,0,0,.15);
    }
I put some image at he bottom-right of the header.

header {
    width: 950px;
    height: 150px;
    margin: 5px auto;
    background: #fff url(images/banner_design.png) no-repeat bottom right;
    border: 1px solid #ccc;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }
Done! A simple header is ready.

Write by Arafa Daming
Labels:

[Basic Web Design] Part 3 - Styling web layout

Now, we are going to styling web layout and we can see how its look.

Add this style at the <head> tag (After <title> tag)

<style>
body {
    background: #F5F4EF;
    color: #000305;
    font-size: 87.5%; /* Base font size: 14px */
    font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    line-height: 1.429;
    margin: 0;
    padding: 0;
    text-align: left;
    }
/* Enabling HTML5 tags */
header, section, footer, aside, nav, article, figure {
    display: block;
    }

header {
    width: 950px;
    height: 150px;
    margin: 5px auto;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }

nav {
    width: 950px;
    height: 50px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }

/***** Hightlight Section *****/
#highlight {
    width: 950px;
    height: 300px;
    margin: 10px auto;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }

/***** Content Section *****/
#content {
    display: table;
    margin: 0 auto;
    width: 950px;
    }

/***** Left Aside *****/
#left-side {
    display: table-cell;
    float: left;
    width: 450px;
    height: 250px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }

/***** Right Aside *****/
#right-side {
    display: table-cell;
    float: right;
    width: 450px;
    height: 250px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }

/***** Footer *****/
footer {
    width: 950px;
    height: 50px;
    margin: 10px auto;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }
</style>
Done. You can fill the web layout with your content

Write by Arafa Daming
Labels:

[Basic Web Design] Part 2 - Constructing web layout

The basic markup :
<!DOCTYPE html>
<html>
<head>
<title>Basic Web Design</title>
<head>
<body>
</body>
</html>
Save it as index.html and we already create HTML 5 document. Now, create the web main section into <body> tag :

<header>
<!--Page title-->
</header>

<nav>
<!--Navigation-->
</nav>

<section id='highlight'>
<!--Highlight-->
</section>

<section id='content'>
   <aside id='left-side'>
   <!--Left side content-->
   </aside>

   <aside id='right-side'>
   <!--Right side content-->
   </aside>
</section

<footer>
<!--Footer here-->
</footer>
Next, we will applying style(section width, height, border etc) to this section using CSS3.

Write by Arafa Daming
Labels:

Defination of Web 1.0, Web 2.0 and Web 3.0

Web 1.0
  1. The first generation of the World Wide Web, characterized by separate static websites rather than continually-updated weblogs and social networking tools.
  2.  One-way broadcasting, meaning only the owner of the site can publish information.
  3.  Web 1.0 (1991-2003) is a retronym which refers to the state of the World Wide Web, and any website design style used before the advent of the Web 2.0 phenomenon.
  4.  Refers to the first stage of the World Wide Web linking web pages with hyperlinks.
Example : Static Page


Web 2.0
  1. The term Web 2.0 is associated with web applications that facilitate participatory information sharing, interoperability, user-centered design, and collaboration on the World Wide Web.
  2. The second generation of the World Wide Web, especially the movement away from static web pages to dynamic and shareable content and social networking
  3. Web 2.0 does not refer to any specific change in the technology of the Internet, but rather the behavior of how people use the Internet.
  4. Web 2.0 (or Web 2) is the popular term for advanced Internet technology and applications including blogs, wikis, RSS and social bookmarking.
  5. user interaction / behaviour
Example :You-Tube and it user, Facebook

Web 3.0
  1. The predicted third generation of the World Wide Web, usually conjectured to include semantic tagging of content.
  2. The creation of high-quality content and services produced by gifted individuals using Web 2.0 technology as an enabling platform.
  3. Access internet any time, any where, any device.
Example : Surfing Web 3.0 at your smart phone.


Please note that :
  • Don't "use", "build" or "design" web 3.0. They do not represent any look and feel. 
  • Web 2.0 & 3.0 are terms that cater for those who don't have clear understanding about the internet. 
  • If someone says "I want a web 3.0 website", "I want to make my site design looks like web 2.0" will only make people laugh, especially those who are internet savvy.

Have a nice day!

Write by Arafa Daming
Labels:

Hide and show floating button or box

Just now, i made a floating box for advertisement in my blog. My friends ask me how to that, and now, I'll write a tutorial for that.

Actually, it's use same concept as floating site button that i do before. Using jQuery and fixed position for div. With jQuery, we can hide and show the floating box(div). You can see the example at the bottom right corner of my blog.

Go to your Blogger Dashboard, Choose Design and Edit HTML.


1. First, the most important is jQuery, add jQuery to your site by add this code :

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

paste this code below "//]]>"


2. Second, add the floating box to your page. Paste this code before </body> tag :

<div id='show-ads'><a class='show_ads' href='#'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_AbBoFj0pw7NyOjCUbjbDfquq71KCNALO0aIxUGiaEEW4h3Y5Sm_H2zVc_35LrfHSWFu54MaImb4FaJca9cY9nO2djOuuUVR9C2zOfPZLrNj4Kx_ZhBqt9zsp3oHRptnkl5JyBTrYJy3-/s1600/back_blue_button.png'/></a>
</div>
<div id='float-right'>
<a class='close_ads' href='#' style='font-size:large;' title='Close this ads'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3aJ9BxojWlLG_-4pwEgkMMd-V2xWwhxlYTNTpA5MJAeirTY_uy2LchMkB8FWDCd2P04E4xddz_0EiD2KFQhHMwpcGycyYoqx4Zhz4euJ55eBcozc-kwtaWc3JNVq1YOhJ2av5guULFJ8x/s1600/button_blue_close.png'/></a><br/>
Your script here.(I copy and paste my Nuffnang ads script here)
</div>



Write by Arafa Daming
Arafa Daming - Read More
Labels:

Page navigation by numbers on Blogger

By default, your blog will use Older posts, Newer Posts links at the bottom of the page. This is the main navigation for your blog post.

So, lets make it more fancy and more interesting. You can view at this blog footer for example.

Please back-up your template before editing.

1. Go to your blog dashboard then :
Setting >> Formatting
Arafa Daming - Page navigation by numbers on Blogger
Choose number of post you want to view on every page.

2. Go to Design >> Edit HTML
 Tick

Find this code : </body>
You can find it by press Alt + F and type the word.

Paste this code above the </body>



Write by Arafa Daming
Arafa Daming - Read More
Labels: