All Stories

Friday, October 4, 2013


Hey Guys! We are really happy to announce that we’re serving you today with a newly created CSS3 video tutorials series in Urdu and Hindi. This course was from our premium DVDs courses, but I thought, why not to give you a small test of the videos for free?, so here I’m with a lot of free CSS3 video tutorials. We already have given you a countless number of video tutorials on web designing for free and which were in your own mother tongue Urdu. So we are here again, to pop up a new series.
css3 in Urdu
During this new course, we’ll let you know that how you can easily create a mobile friendly template for both desktop users and mobile users using some easy properties of CSS3. While this course is somehow more well-organized than our previous complete CSS web designing course in Urdu which we previously published on this blog.

Learning CSS3 with Videos in Urdu

We are always here to help you out with our simple video tutorials in Urdu and Hindi languages, so far, we’ve served you with a lot of freebies which we could do in our best. A website layout in CSS3 and HTML5 was already shared with you guys on this blog, and now if you want to go from basic to Advance in CSS3 than here is the video tutorials series for you which you can watch step by step to learn it more closely. I hope you’ll love the new course.
The tutorials which are shared with you here were uploaded to our sister website www.tuts2learn.com, so we’ll include some of the videos here and for the rest videos we’ll give you links with a good order. So you can watch all 30 video tutorials included in this new course. Here we go:
CSS3 Video Tutorials in Urdu part 1

CSS3 Video Tutorials in Urdu part 2
CSS3 Video Tutorials in Urdu part 3
CSS3 Video Tutorials in Urdu part 4
CSS3 Video Tutorials in Urdu part 5
CSS3 Video Tutorials in Urdu part 6
CSS3 Video Tutorials in Urdu part 7
CSS3 Video Tutorials in Urdu part 8
CSS3 Video Tutorials in Urdu part 10
So after watching above 10 video tutorials come here and watch the next tutorials one by one using below links:
I hope you’ve watched all 30 parts of this new CSS3 training series in Urdu language and I hopefully can say that you have learned something amazing today. However, as I already mentioned in the starting of this article that this course is from our complete premium DVDs courses, so we shared the 50% of that course with you here for free, so you may also consider purchasing this full course in DVDs for just Rs.1500 or $15 which will have advance projects and many more videos. This way you can help us for creating more videos for you in the future and we can pay our bills and hosting expenses of our blogs.

Buy This complete Course in DVD now

Moreover, if you got any questions either about this training series or our previous training series, then I’d always recommend you to use our comment form and post your question, I’ll be happy to answer your questions here. And if you have a long question then you may use our email address to send us your queries, it is humbly requested that never use our mobile no for such questions. Thanks and Happy Web Designing.

CSS3 New Video Tutorials in Urdu/Hindi


Hey Guys! We are really happy to announce that we’re serving you today with a newly created CSS3 video tutorials series in Urdu and Hindi. This course was from our premium DVDs courses, but I thought, why not to give you a small test of the videos for free?, so here I’m with a lot of free CSS3 video tutorials. We already have given you a countless number of video tutorials on web designing for free and which were in your own mother tongue Urdu. So we are here again, to pop up a new series.
css3 in Urdu
During this new course, we’ll let you know that how you can easily create a mobile friendly template for both desktop users and mobile users using some easy properties of CSS3. While this course is somehow more well-organized than our previous complete CSS web designing course in Urdu which we previously published on this blog.

Learning CSS3 with Videos in Urdu

We are always here to help you out with our simple video tutorials in Urdu and Hindi languages, so far, we’ve served you with a lot of freebies which we could do in our best. A website layout in CSS3 and HTML5 was already shared with you guys on this blog, and now if you want to go from basic to Advance in CSS3 than here is the video tutorials series for you which you can watch step by step to learn it more closely. I hope you’ll love the new course.
The tutorials which are shared with you here were uploaded to our sister website www.tuts2learn.com, so we’ll include some of the videos here and for the rest videos we’ll give you links with a good order. So you can watch all 30 video tutorials included in this new course. Here we go:
CSS3 Video Tutorials in Urdu part 1

CSS3 Video Tutorials in Urdu part 2
CSS3 Video Tutorials in Urdu part 3
CSS3 Video Tutorials in Urdu part 4
CSS3 Video Tutorials in Urdu part 5
CSS3 Video Tutorials in Urdu part 6
CSS3 Video Tutorials in Urdu part 7
CSS3 Video Tutorials in Urdu part 8
CSS3 Video Tutorials in Urdu part 10
So after watching above 10 video tutorials come here and watch the next tutorials one by one using below links:
I hope you’ve watched all 30 parts of this new CSS3 training series in Urdu language and I hopefully can say that you have learned something amazing today. However, as I already mentioned in the starting of this article that this course is from our complete premium DVDs courses, so we shared the 50% of that course with you here for free, so you may also consider purchasing this full course in DVDs for just Rs.1500 or $15 which will have advance projects and many more videos. This way you can help us for creating more videos for you in the future and we can pay our bills and hosting expenses of our blogs.

Buy This complete Course in DVD now

Moreover, if you got any questions either about this training series or our previous training series, then I’d always recommend you to use our comment form and post your question, I’ll be happy to answer your questions here. And if you have a long question then you may use our email address to send us your queries, it is humbly requested that never use our mobile no for such questions. Thanks and Happy Web Designing.

No comments
Posted at October 04, 2013 |  by Online Ustaad

This is a very small tip for those who want to change their website or blog’s mouse cursor. I came across many websites and blogs who have changed their cursors either to different styles or to images. So simply they use CSS property to change the mouse cursor. It is easier to change the cursor for the entire website or for a part of the website. So here in this tutorial I’m going to teach you about this.
Mouse cursor in css
As you know CSS is the most beautiful web language to style websites and any kind of webpage. And CSS3 new properties has changed the entire concept of web designing. Now you’ll no more need of using Flash for your websites, because CSS3 does the job for you.

Changing Mouse Cursor with CSS

The default mouse cursor is something like an arrow which many newbies want to change to something else. So here is the CSS code which you can use to change the pointer of the mouse, there are some values defined in CSS3 standard, however by using the URL property you can add an image, see below example.
<!DOCTYPE html>
<html>
<head>
<title> Changing Cursor</title>
<style type=”text/css”>
body {
cursor:url(http://www.123cursors.com/freecursors/1055.gif);
}
</style>
</head>
<body>
</body>
</html>
The example above will be replacing the default arrow with an image which is stored online in a website 123cursors.com. So if you copy the above code and paste inside notepad and save it with .html extension then visiting the page on your browser, so the cursor will be replaced with an image.

CSS core values for changing mouse cursor

Here is the list of the all values which has been defined in CSS core programming. You can use one of the below listed values to change the pointer/cursor of your website:
  • cursor:crosshair;
  • cursor:e-resize;
  • cursor:help;
  • cursor:move;
  • cursor:n-resize;
  • cursor:ne-resize;
  • cursor:nw-resize;
  • cursor:pointer;
  • cursor:progress;
  • cursor:s-resize;
  • cursor:se-resize;
  • cursor:text;
  • cursor:wait;
  • cursor:url(image.png);
All of the above values are the part of the CSS. You can use any of them to see the effect on your webpage.
Now here is the live example of changing the mouse pointer by using CSS, just hover your mouse over below green bordered area to see the effect:
Hover your mouse here on this area to see how the pointer is changed with css!
Hover your mouse here on this area to see how the pointer is changed with css!
Hover your mouse here on this area to see how the pointer is changed with css!
Hover your mouse here on this area to see how the pointer is changed with css!
Hover your mouse here on this area to see how the pointer is changed with css!
The example above shows how the pointer is changed. We just used this CSS property in an HTML DIV:
<div style=”cursor:url(http://www.123cursors.com/freecursors/6890.gif); border:4px solid green; padding:15px;”> Content Goes Here</div>
You can also copy the above code to check it by yourself. However, if you want to change the cursor of your entire blog or website then you must add the CSS cursor property inside <body> tag.
You can download a numerous number of free mouse pointers by visiting below websites:
You can use any image for the pointer as you want, but the smaller sizes are pretty much better than larger images. So do implement today’s trick and let me know if you have something to say.

How to Change The Mouse Cursor of a Website?


This is a very small tip for those who want to change their website or blog’s mouse cursor. I came across many websites and blogs who have changed their cursors either to different styles or to images. So simply they use CSS property to change the mouse cursor. It is easier to change the cursor for the entire website or for a part of the website. So here in this tutorial I’m going to teach you about this.
Mouse cursor in css
As you know CSS is the most beautiful web language to style websites and any kind of webpage. And CSS3 new properties has changed the entire concept of web designing. Now you’ll no more need of using Flash for your websites, because CSS3 does the job for you.

Changing Mouse Cursor with CSS

The default mouse cursor is something like an arrow which many newbies want to change to something else. So here is the CSS code which you can use to change the pointer of the mouse, there are some values defined in CSS3 standard, however by using the URL property you can add an image, see below example.
<!DOCTYPE html>
<html>
<head>
<title> Changing Cursor</title>
<style type=”text/css”>
body {
cursor:url(http://www.123cursors.com/freecursors/1055.gif);
}
</style>
</head>
<body>
</body>
</html>
The example above will be replacing the default arrow with an image which is stored online in a website 123cursors.com. So if you copy the above code and paste inside notepad and save it with .html extension then visiting the page on your browser, so the cursor will be replaced with an image.

CSS core values for changing mouse cursor

Here is the list of the all values which has been defined in CSS core programming. You can use one of the below listed values to change the pointer/cursor of your website:
  • cursor:crosshair;
  • cursor:e-resize;
  • cursor:help;
  • cursor:move;
  • cursor:n-resize;
  • cursor:ne-resize;
  • cursor:nw-resize;
  • cursor:pointer;
  • cursor:progress;
  • cursor:s-resize;
  • cursor:se-resize;
  • cursor:text;
  • cursor:wait;
  • cursor:url(image.png);
All of the above values are the part of the CSS. You can use any of them to see the effect on your webpage.
Now here is the live example of changing the mouse pointer by using CSS, just hover your mouse over below green bordered area to see the effect:
Hover your mouse here on this area to see how the pointer is changed with css!
Hover your mouse here on this area to see how the pointer is changed with css!
Hover your mouse here on this area to see how the pointer is changed with css!
Hover your mouse here on this area to see how the pointer is changed with css!
Hover your mouse here on this area to see how the pointer is changed with css!
The example above shows how the pointer is changed. We just used this CSS property in an HTML DIV:
<div style=”cursor:url(http://www.123cursors.com/freecursors/6890.gif); border:4px solid green; padding:15px;”> Content Goes Here</div>
You can also copy the above code to check it by yourself. However, if you want to change the cursor of your entire blog or website then you must add the CSS cursor property inside <body> tag.
You can download a numerous number of free mouse pointers by visiting below websites:
You can use any image for the pointer as you want, but the smaller sizes are pretty much better than larger images. So do implement today’s trick and let me know if you have something to say.

No comments
Posted at October 04, 2013 |  by Online Ustaad

In previous tutorial we learned about CSS3 Rounded Borders, but here is a another simple tutorial in which you’ll learn about box shadow in CSS, box shadow is a new property, which can add a beautiful shadow to a box model. You can easily implement it on any platform. So the video tutorial will practically guide you how to use this property.
CSS3 box shadow
Watch the video below to Learn CSS3 box shadow in Urdu

Here is the simple syntax of using this property in HTML web pages, you need to first specify a box model in CSS and then you can use the box shadow property, here is the syntx:
<style type=”text/css”>
#div1 {
width:200px;
height:200px;
background-color:gray;
box-shadow:5px 5px 5px orange;
}
</style>
Now the above code will add a box shadow of orange color to an HTML element where this id “div1″ will be called. So this is very very easy and you can make your website/blog more beautiful by using this simple css property.
However, you can always watch our complete CSS video tutorials series to learn CSS complete from basic to advance, and also if you find any issues while implementing our tutorials then kindly use our comment form to ask your questions, we try to respond to every comment when we get time.
Have a great time with CSS. 

CSS3 Box Shadow Tutorial in Urdu & Hindi


In previous tutorial we learned about CSS3 Rounded Borders, but here is a another simple tutorial in which you’ll learn about box shadow in CSS, box shadow is a new property, which can add a beautiful shadow to a box model. You can easily implement it on any platform. So the video tutorial will practically guide you how to use this property.
CSS3 box shadow
Watch the video below to Learn CSS3 box shadow in Urdu

Here is the simple syntax of using this property in HTML web pages, you need to first specify a box model in CSS and then you can use the box shadow property, here is the syntx:
<style type=”text/css”>
#div1 {
width:200px;
height:200px;
background-color:gray;
box-shadow:5px 5px 5px orange;
}
</style>
Now the above code will add a box shadow of orange color to an HTML element where this id “div1″ will be called. So this is very very easy and you can make your website/blog more beautiful by using this simple css property.
However, you can always watch our complete CSS video tutorials series to learn CSS complete from basic to advance, and also if you find any issues while implementing our tutorials then kindly use our comment form to ask your questions, we try to respond to every comment when we get time.
Have a great time with CSS. 

No comments
Posted at October 04, 2013 |  by Online Ustaad

CSS3 has a lot more for web designers to explore, things are now pretty much easier to do with CSS3 along. One of the most used property is rounded borders, which is now mostly used by everyone in their websites and blogs. So here is a video tutorial for learning border radius property in CSS. There are 2 video tutorials, in which you can learn this property easily in Urdu language.
border-radius in css
Watch the video tutorials here and I’ll later explain these properties in text as well:
Border Radius tutorial video # 1

Border Radius tutorial video # 2


Hopefully you’ve understood the properties, but the syntax is also given here for more clearance:
<style type=”text/css”>
border:4px solid green;
border-radius:10px 10px 10px 10px; or just border-radius:10px;
-moz-border-radius:10px 10px 10px 10px; or just -moz-border-radius:10px;
-webkit-border-radius:10px 10px 10px 10px; or just -webkit-border-radius:10px;
</style>
The above one is the simplest syntax of using Border radius property, you can use it with one declaration like: border-radius:10px  or you can also define the alignments such as left-radius,right-radius, top-radius and bottom-radius, and that is done by shorten property like this: border-radius:10px 10px 10px 10px. The first value is for top, second is for left, third is for bottom and last one is for right.
And the -moz- extra property is for displaying the rounded borders in Mozila Firefox web browser, because this property is currently not supported by all browsers, so you need to add extra attributes for Mozila and chrome such as -moz- and -webkit-.
If things are not explained pretty much easier then let me know in comment section, also give a great favor by sharing this with your beloved guys.

CSS3 Rounded Borders in Urdu & Hindi


CSS3 has a lot more for web designers to explore, things are now pretty much easier to do with CSS3 along. One of the most used property is rounded borders, which is now mostly used by everyone in their websites and blogs. So here is a video tutorial for learning border radius property in CSS. There are 2 video tutorials, in which you can learn this property easily in Urdu language.
border-radius in css
Watch the video tutorials here and I’ll later explain these properties in text as well:
Border Radius tutorial video # 1

Border Radius tutorial video # 2


Hopefully you’ve understood the properties, but the syntax is also given here for more clearance:
<style type=”text/css”>
border:4px solid green;
border-radius:10px 10px 10px 10px; or just border-radius:10px;
-moz-border-radius:10px 10px 10px 10px; or just -moz-border-radius:10px;
-webkit-border-radius:10px 10px 10px 10px; or just -webkit-border-radius:10px;
</style>
The above one is the simplest syntax of using Border radius property, you can use it with one declaration like: border-radius:10px  or you can also define the alignments such as left-radius,right-radius, top-radius and bottom-radius, and that is done by shorten property like this: border-radius:10px 10px 10px 10px. The first value is for top, second is for left, third is for bottom and last one is for right.
And the -moz- extra property is for displaying the rounded borders in Mozila Firefox web browser, because this property is currently not supported by all browsers, so you need to add extra attributes for Mozila and chrome such as -moz- and -webkit-.
If things are not explained pretty much easier then let me know in comment section, also give a great favor by sharing this with your beloved guys.

No comments
Posted at October 04, 2013 |  by Online Ustaad

As I earlier published a number of CSS tutorials for blogs, websites and separate web pages. But the world of web designing is still to be discovered We will further work with CSS in details in coming days. I have another Advance CSS course in Urdu that contains all new enhancements of CSS3. CSS3 is a powerful version of CSS. We will discuss the rounded border properties, newly added shadow effect, mouse effects, transitions and so many more. But Today, I will share some beautiful CSS horizontal menus that are entirely built within CSS and HTML. These menus are awesome and can be included in both websites and blogs. You can add them into your blogger blogs too. Below is the list of menus along with CSS and HTML codes. Just love them.
css menus

How to Add CSS menus to blog?

These menus can be included into any kind of website or blog. If you’re using blogger platform for blogging then simply copy the codes from below boxes and paste it inside an HTML/JavaScript widget and save that widget. You can drag the widget anywhere you want to show the menu on your blog; mostly people keep it below the header.
Now here is the list of menus I’m going to share, the codes are in block quote for each menu, so you can use them for websites and blogs. The customization will be taught below the codes.
CSS Menu # 1 Code:
CSS menu1
<style> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivl3h8I_NPStE8BqaKUWy7eDPk8BL9CgirB9YrAfxbfKQqfDnQcp5hKQmZ_M21HVyj_GEoKxO4zaJTG2xNGupgV1ZvNOB2rQVDSIjO_8GpdB1UOx7OOSkN7COOczRJ-CzIPvYa55JgA_w/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2-SrKcsDYk_qxXtMthEBODUEtqDDMl5CZbTUSHMhijGcvSBIne5oEzC3eZO5OdyeIEfSADAziTCVSA_Ms2QPRwUM-f0ULWeesm_ln-gIMTyYmDGvZt8BBpDPc-KFaUD7xFN7WKH-LFz0/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } </style> <div id=”tabsE”> <ul><li><a href=”#”><span>Link 1</span></a></li><li><a href=”#”><span>Link 2</span></a></li><li><a href=”#”><span>Link 3</span></a></li><li><a href=”#”><span>Link 4</span></a></li><li><a href=”#”><span>Link 5</span></a></li><li><a href=”#”><span>Link 6</span></a></li><li><a href=”#”><span>Link 7</span></a></li></ul></div>
CSS Menu # 2 Code:
CSS menu2
<style> #tabs9 img { border: none; } #tabs9 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #F45551; line-height:normal; } #tabs9 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs9 li { display:inline; margin:0; padding:0; } #tabs9 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqPbOzfFbORFsvZDQ_N7S0DeItHtOA80Aaz_w6sgp4ECa0JX_Ifh6eWJXlSRiOrd5B6BeDzpef9qNOAT2fr3bH80Glsou45gtEHaSdoWKaNx912HAKLc10GmfKzBw8YskSqWP4eJv5zKA/s1600/tableft9.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs9 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU7Ox_vH7g0KVTe6n_TYTpciDvFic9tY9FymtjkQYchIsF0ZbMJ4raP5bXUs5LBLHp8lk9GUFsS2MJ9LL-jhCaivTRnf0prpAfpvaTwCJUxCplmI4OQ_LGt8GJEn-wR326E2lh4TNGfGA/s1600/tabright9.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs9 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs9 a:hover { background-position:0% -42px; } #tabs9 a:hover span { background-position:100% -42px; } #tabs9 #current a { background-position:0% -42px; } #tabs9 #current a span { background-position:100% -42px; } </style> <div id=”tabs9″> <ul><li><a href=”#”><span>Link 1</span></a></li><li><a href=”#”><span>Link 2</span></a></li><li><a href=”#”><span>Link 3</span></a></li><li><a href=”#”><span>Link 4</span></a></li><li><a href=”#”><span>Link 5</span></a></li><li><a href=”#”><span>Link 6</span></a></li><li><a href=”#”><span>Link 7</span></a></li></ul></div>
CSS Menu # 3 Code: 
css menu3
<style> #tabs5 img { border: none; } #tabs5 { float:left; width:100%; background:#E3ECF3; font: bold 7.5pt Verdana; line-height:normal; } #tabs5 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs5 li { display:inline; margin:0; padding:0; } #tabs5 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPD0UFhj3HiTpjZ3kERXS32gQqthuyJ2IpZ8tCC8MaFCkLvI_PXuhuT-NaBNm52MFcH1wHNsjNf6KXaH9XufDiMEYXo1kq0bZr8XQadFu1A_k33bJoOBUVpY5qYBYIODM6VX_Rm20Kgrg/s1600/tableft5.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs5 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqD9J5tRdva7-TpLrtMsdd0LOxyngDAmOPZk5N-vkR_meSfnSQRZ5-ZyEXwYSzw5AkzM-arKcJ3UtEDgfhlG2g4rgCH7RBreopQcFwdnBZqNrkOeZ8AL_2CXaAT906aQQxm2tt_o8tlG4/s1600/tabright5.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs5 a span {float:none;} /* End IE5-Mac hack */ #tabs5 a:hover span { color:#FFF; } #tabs5 a:hover { background-position:0% -42px; } #tabs5 a:hover span { background-position:100% -42px; } #tabs5 #current a { background-position:0% -42px; } #tabs5 #current a span { background-position:100% -42px; } </style> <div id=”tabs5″> <ul><li><a href=”#”><span>Link 1</span></a></li><li><a href=”#”><span>Link 2</span></a></li><li><a href=”#”><span>Link 3</span></a></li><li><a href=”#”><span>Link 4</span></a></li><li><a href=”#”><span>Link 5</span></a></li><li><a href=”#”><span>Link 6</span></a></li><li><a href=”#”><span>Link 7</span></a></li></ul></div>
CSS Menu # 4 Code: 
css menu4
 #menu123{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCpZtGh4-8Dr8yRf6doqUaRf0dAmnccwPLHgZ03TubRaKIYVP-BJDGFzzFNFI0af22y5ckFpMBbLidtz9rLSCpot52NfOIEr6kIVze7KVrskGDDLuLZ9OymS2IBIoJuZ_2f94UegrBCFRm/s1600/tabright9.gif’) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;} #menu123 ul{margin:0px;padding:0;list-style-type:none;width:auto;} #menu123 ul li{display:block;float:left;margin:0 1px 0 0;} #menu123 ul li a{display:block;float:left;color:#FECCC3;text-decoration:none;padding:14px 22px 0 22px;height:28px;} #menu123 ul li a:hover,#menu123 ul li a.current{color:#fff;background:transparent url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV30vALfC2Bb-zuNwZ9DmU21_d6Zvh3dSQviiVxulav_0EAj9GKJ12Oy1YHgkO6ZsC38mH7MdMklI5jnork5AqNv4ZQVSl2pYbKNdIQxhzfbWOHjyF87UOPLl_p_zYMAegdxACHKQTNjTa/s1600/tableft9.gif’) no-repeat top center;} <div id=”menu123″> <ul><li><a href=”#” title=”css menus”>Home</a></li><li><a href=”#” title=”css menus”>About Us</a></li><li><a href=”#” title=”css menus”>Services</a></li><li><a href=”#” title=”css menus”>Our Work</a></li><li><a href=”#” title=”css menus”>Contact Us</a></li></ul></div>
CSS Menu # 4 Code: 
CSS menu5
#menu555{position:relative;display:block;height:39px;font-size:11px;font-weight:bold;background:transparent url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMoICh294bhwqM9Z3BPCFvMZH59bWZhoIKGK-2eVvNyU3jLFZFmVNxWkbqYFCGb3ueXUGk-hNKjhHdhBXwfVMcduIOAL1Pzu7rDbJu2wuzj0i8wWeFQWD3AyF3zmZ7WCorJ_xTIvriIaoP/s1600/bgOFF1.gif’) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;border-top:4px solid #B30000;} #menu555 ul{margin:0;padding:0;list-style-type:none;width:auto;} #menu555 ul li{display:block;float:left;margin:0;} #menu555 ul li a{display:block;float:left;color:#666;text-decoration:none;padding:11px 20px 0 20px;height:23px;background:transparent url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifc_l73TvRwdRQrgMhoKxESXGHaD7VD5TgLB1oVoE5UC4-0edrhdqb_Es_mzqHVvCujiHP2zJUAWydSqFnpk8h6Dm14FfTAMCyp6wy7OMAYHUwo9CYYjXdg3G6y0NFHC5J2RD-nYhpN54c/s1600/bgDIVIDER1.gif’) no-repeat top right;} #menu555 ul li a:hover,#menu555 ul li a.current{color:#B30000;background:#fff url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJTQsOCPVNGghOfxSoaDvvLCirZ1CpV9lAcQAhevXeEUABSsDdoNslW_0vP0cQGZCSB3pd5HmbeUZA_SVOAX0qaFHKT6GJ4ljdQXMjLnPpWlEXpErrUjloTIesV5DYeCBSvod7N3tt4vyy/s1600/bgON1.gif’) no-repeat top right;} <div id=”menu555″> <ul><li><a href=”#” title=”"><span>Home</span></a></li><li><a href=”#” title=”"><span>About Us</span></a></li><li><a href=”#” title=”"><span>Services</span></a></li><li><a href=”#” title=”"><span>Our Work</span></a></li><li><a href=”#” title=”"><span>Contact Us</span></a></li></ul></div>

Customization

Now when you liked any menu from the above list, copy the code from the box and paste it inside an HTML/JavaScript widget in Blogger and then drag that widget right below the header; see the example image below:
menu-in-header
I added one of the above menus into an HTML/JavaScript widget and dragged that below the header as showing in above image and that menu is looking like below image on my blog:
menu-css
Now if you want to replace your links and anchor texts with the default ones then simply find lines like below one in the above code:
<ul><li><a href=”#”><span>About Us</span></a></li></ul>
All the li tags are within ul tag, and the <a href=”#”> is the link; so you can replace the (#) sign with your link and the default text (About Us, Services, Our Work etc) with your anchor text.
Your Turn:
These were some horizontal CSS menus for blogger and other websites, if you’ve questions or facing difficulties while adding them to your blog then do ask me in comment section. We will also share more collection of Vertical CSS menus and CSS drop down menus very soon. Stay connected with us.

CSS Horizontal Menus


As I earlier published a number of CSS tutorials for blogs, websites and separate web pages. But the world of web designing is still to be discovered We will further work with CSS in details in coming days. I have another Advance CSS course in Urdu that contains all new enhancements of CSS3. CSS3 is a powerful version of CSS. We will discuss the rounded border properties, newly added shadow effect, mouse effects, transitions and so many more. But Today, I will share some beautiful CSS horizontal menus that are entirely built within CSS and HTML. These menus are awesome and can be included in both websites and blogs. You can add them into your blogger blogs too. Below is the list of menus along with CSS and HTML codes. Just love them.
css menus

How to Add CSS menus to blog?

These menus can be included into any kind of website or blog. If you’re using blogger platform for blogging then simply copy the codes from below boxes and paste it inside an HTML/JavaScript widget and save that widget. You can drag the widget anywhere you want to show the menu on your blog; mostly people keep it below the header.
Now here is the list of menus I’m going to share, the codes are in block quote for each menu, so you can use them for websites and blogs. The customization will be taught below the codes.
CSS Menu # 1 Code:
CSS menu1
<style> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivl3h8I_NPStE8BqaKUWy7eDPk8BL9CgirB9YrAfxbfKQqfDnQcp5hKQmZ_M21HVyj_GEoKxO4zaJTG2xNGupgV1ZvNOB2rQVDSIjO_8GpdB1UOx7OOSkN7COOczRJ-CzIPvYa55JgA_w/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2-SrKcsDYk_qxXtMthEBODUEtqDDMl5CZbTUSHMhijGcvSBIne5oEzC3eZO5OdyeIEfSADAziTCVSA_Ms2QPRwUM-f0ULWeesm_ln-gIMTyYmDGvZt8BBpDPc-KFaUD7xFN7WKH-LFz0/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } </style> <div id=”tabsE”> <ul><li><a href=”#”><span>Link 1</span></a></li><li><a href=”#”><span>Link 2</span></a></li><li><a href=”#”><span>Link 3</span></a></li><li><a href=”#”><span>Link 4</span></a></li><li><a href=”#”><span>Link 5</span></a></li><li><a href=”#”><span>Link 6</span></a></li><li><a href=”#”><span>Link 7</span></a></li></ul></div>
CSS Menu # 2 Code:
CSS menu2
<style> #tabs9 img { border: none; } #tabs9 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #F45551; line-height:normal; } #tabs9 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs9 li { display:inline; margin:0; padding:0; } #tabs9 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqPbOzfFbORFsvZDQ_N7S0DeItHtOA80Aaz_w6sgp4ECa0JX_Ifh6eWJXlSRiOrd5B6BeDzpef9qNOAT2fr3bH80Glsou45gtEHaSdoWKaNx912HAKLc10GmfKzBw8YskSqWP4eJv5zKA/s1600/tableft9.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs9 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU7Ox_vH7g0KVTe6n_TYTpciDvFic9tY9FymtjkQYchIsF0ZbMJ4raP5bXUs5LBLHp8lk9GUFsS2MJ9LL-jhCaivTRnf0prpAfpvaTwCJUxCplmI4OQ_LGt8GJEn-wR326E2lh4TNGfGA/s1600/tabright9.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs9 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs9 a:hover { background-position:0% -42px; } #tabs9 a:hover span { background-position:100% -42px; } #tabs9 #current a { background-position:0% -42px; } #tabs9 #current a span { background-position:100% -42px; } </style> <div id=”tabs9″> <ul><li><a href=”#”><span>Link 1</span></a></li><li><a href=”#”><span>Link 2</span></a></li><li><a href=”#”><span>Link 3</span></a></li><li><a href=”#”><span>Link 4</span></a></li><li><a href=”#”><span>Link 5</span></a></li><li><a href=”#”><span>Link 6</span></a></li><li><a href=”#”><span>Link 7</span></a></li></ul></div>
CSS Menu # 3 Code: 
css menu3
<style> #tabs5 img { border: none; } #tabs5 { float:left; width:100%; background:#E3ECF3; font: bold 7.5pt Verdana; line-height:normal; } #tabs5 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs5 li { display:inline; margin:0; padding:0; } #tabs5 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPD0UFhj3HiTpjZ3kERXS32gQqthuyJ2IpZ8tCC8MaFCkLvI_PXuhuT-NaBNm52MFcH1wHNsjNf6KXaH9XufDiMEYXo1kq0bZr8XQadFu1A_k33bJoOBUVpY5qYBYIODM6VX_Rm20Kgrg/s1600/tableft5.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs5 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqD9J5tRdva7-TpLrtMsdd0LOxyngDAmOPZk5N-vkR_meSfnSQRZ5-ZyEXwYSzw5AkzM-arKcJ3UtEDgfhlG2g4rgCH7RBreopQcFwdnBZqNrkOeZ8AL_2CXaAT906aQQxm2tt_o8tlG4/s1600/tabright5.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs5 a span {float:none;} /* End IE5-Mac hack */ #tabs5 a:hover span { color:#FFF; } #tabs5 a:hover { background-position:0% -42px; } #tabs5 a:hover span { background-position:100% -42px; } #tabs5 #current a { background-position:0% -42px; } #tabs5 #current a span { background-position:100% -42px; } </style> <div id=”tabs5″> <ul><li><a href=”#”><span>Link 1</span></a></li><li><a href=”#”><span>Link 2</span></a></li><li><a href=”#”><span>Link 3</span></a></li><li><a href=”#”><span>Link 4</span></a></li><li><a href=”#”><span>Link 5</span></a></li><li><a href=”#”><span>Link 6</span></a></li><li><a href=”#”><span>Link 7</span></a></li></ul></div>
CSS Menu # 4 Code: 
css menu4
 #menu123{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCpZtGh4-8Dr8yRf6doqUaRf0dAmnccwPLHgZ03TubRaKIYVP-BJDGFzzFNFI0af22y5ckFpMBbLidtz9rLSCpot52NfOIEr6kIVze7KVrskGDDLuLZ9OymS2IBIoJuZ_2f94UegrBCFRm/s1600/tabright9.gif’) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;} #menu123 ul{margin:0px;padding:0;list-style-type:none;width:auto;} #menu123 ul li{display:block;float:left;margin:0 1px 0 0;} #menu123 ul li a{display:block;float:left;color:#FECCC3;text-decoration:none;padding:14px 22px 0 22px;height:28px;} #menu123 ul li a:hover,#menu123 ul li a.current{color:#fff;background:transparent url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV30vALfC2Bb-zuNwZ9DmU21_d6Zvh3dSQviiVxulav_0EAj9GKJ12Oy1YHgkO6ZsC38mH7MdMklI5jnork5AqNv4ZQVSl2pYbKNdIQxhzfbWOHjyF87UOPLl_p_zYMAegdxACHKQTNjTa/s1600/tableft9.gif’) no-repeat top center;} <div id=”menu123″> <ul><li><a href=”#” title=”css menus”>Home</a></li><li><a href=”#” title=”css menus”>About Us</a></li><li><a href=”#” title=”css menus”>Services</a></li><li><a href=”#” title=”css menus”>Our Work</a></li><li><a href=”#” title=”css menus”>Contact Us</a></li></ul></div>
CSS Menu # 4 Code: 
CSS menu5
#menu555{position:relative;display:block;height:39px;font-size:11px;font-weight:bold;background:transparent url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMoICh294bhwqM9Z3BPCFvMZH59bWZhoIKGK-2eVvNyU3jLFZFmVNxWkbqYFCGb3ueXUGk-hNKjhHdhBXwfVMcduIOAL1Pzu7rDbJu2wuzj0i8wWeFQWD3AyF3zmZ7WCorJ_xTIvriIaoP/s1600/bgOFF1.gif’) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;border-top:4px solid #B30000;} #menu555 ul{margin:0;padding:0;list-style-type:none;width:auto;} #menu555 ul li{display:block;float:left;margin:0;} #menu555 ul li a{display:block;float:left;color:#666;text-decoration:none;padding:11px 20px 0 20px;height:23px;background:transparent url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifc_l73TvRwdRQrgMhoKxESXGHaD7VD5TgLB1oVoE5UC4-0edrhdqb_Es_mzqHVvCujiHP2zJUAWydSqFnpk8h6Dm14FfTAMCyp6wy7OMAYHUwo9CYYjXdg3G6y0NFHC5J2RD-nYhpN54c/s1600/bgDIVIDER1.gif’) no-repeat top right;} #menu555 ul li a:hover,#menu555 ul li a.current{color:#B30000;background:#fff url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJTQsOCPVNGghOfxSoaDvvLCirZ1CpV9lAcQAhevXeEUABSsDdoNslW_0vP0cQGZCSB3pd5HmbeUZA_SVOAX0qaFHKT6GJ4ljdQXMjLnPpWlEXpErrUjloTIesV5DYeCBSvod7N3tt4vyy/s1600/bgON1.gif’) no-repeat top right;} <div id=”menu555″> <ul><li><a href=”#” title=”"><span>Home</span></a></li><li><a href=”#” title=”"><span>About Us</span></a></li><li><a href=”#” title=”"><span>Services</span></a></li><li><a href=”#” title=”"><span>Our Work</span></a></li><li><a href=”#” title=”"><span>Contact Us</span></a></li></ul></div>

Customization

Now when you liked any menu from the above list, copy the code from the box and paste it inside an HTML/JavaScript widget in Blogger and then drag that widget right below the header; see the example image below:
menu-in-header
I added one of the above menus into an HTML/JavaScript widget and dragged that below the header as showing in above image and that menu is looking like below image on my blog:
menu-css
Now if you want to replace your links and anchor texts with the default ones then simply find lines like below one in the above code:
<ul><li><a href=”#”><span>About Us</span></a></li></ul>
All the li tags are within ul tag, and the <a href=”#”> is the link; so you can replace the (#) sign with your link and the default text (About Us, Services, Our Work etc) with your anchor text.
Your Turn:
These were some horizontal CSS menus for blogger and other websites, if you’ve questions or facing difficulties while adding them to your blog then do ask me in comment section. We will also share more collection of Vertical CSS menus and CSS drop down menus very soon. Stay connected with us.

No comments
Posted at October 04, 2013 |  by Online Ustaad

Today, I would like to share CSS vertical menus collection with you. As you might know, CSS menus look great in a website. There are many benefits of using menus in a blog or website; the first benefit of using a CSS menu is: it attracts the visitors to click on the links inside the menu and the second benefit is: the menus are faster in loading, they don’t take much time to load in all browsers, Because with css you make the menus more readable for the browser. The css codes are just called in HTML page by a class or an ID selector. So, within just one word you can call them to be appeared on your blog. We will keep sharing CSS menus with you because there are thousands of stylish menus are there with different looks. We will also share a collection of drop down menus with you in our coming posts.
cool css menus

How to add CSS vertical menus to blog or website?

The procedure of adding any css menu to your blogger blog or website is quite simple and can be done within few steps. The menus we are sharing today are created with CSS and HTML. You can copy the entire code from the text box below in the list. And then go to your Blogger dashboard >> Layout >> Add a Gadget and paste the code inside that. Save the widget and view your blog to see the new added menu.
Remember:
These menus are vertical menus, therefore, they are mostly used in sidebar of your blog. Make sure you add them in sidebar for better result. The codes are with example pictures can be found below. Customization will be taught below the menu codes.

CSS vertical Menu # 1

CSS vertical Menu
<style>#menu1 { width: 200px; margin: 10px; } #menu1 li a { height: 32px; voice-family: “\”}\”"; voice-family: inherit; height: 22px; text-decoration: none; } #menu1 li a:link, #menu1 li a:visited { color: #666; display: block; background: url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsJp1O2tvOXFRwEmvZVAjkd-kl1KVuwwpclqZmfgj78kTLj1zBqaoRUfvFjvQsywRGvL6Ag1oy5yRXTv3UWj1mfPuaFc6NCl69hX4R9WOm6YVt4JA8-2sFvfcKxwT9jj6-P3rTy3njCfXO/s1600/menu-1.gif’); padding: 10px 0 0 35px; } #menu1 li a:hover { color: #000; background: url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsJp1O2tvOXFRwEmvZVAjkd-kl1KVuwwpclqZmfgj78kTLj1zBqaoRUfvFjvQsywRGvL6Ag1oy5yRXTv3UWj1mfPuaFc6NCl69hX4R9WOm6YVt4JA8-2sFvfcKxwT9jj6-P3rTy3njCfXO/s1600/menu-1.gif’) 0 -32px; padding: 10px 0 0 35px; } #menu1 ul { list-style: none; margin: 0; padding: 0; } </style><div id=”menu1″>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
<li><a href=”#”>Link 4</a></li>
<li><a href=”#”>Link 5</a></li>
</ul>
</div>

CSS vertical Menu # 2

CSS menus
#menu2 { width: 200px; margin: 10px; } #menu2 li a { height: 32px; voice-family: “\”}\”"; voice-family: inherit; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #FFF; display: block; background: url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxjc6WG6El7pQHF3hWrDzutDv0WFo4YTpYmEdDkxRFzJEJmyTH8P4oAHkdUNp61LDy2BpveINbdA5vIUsly4ZrNTW5nHprJMJ3bNa4vb78heBlDNwbqMwY1ca9dJ0eaFRM86HX5ZwYPteM/s1600/menu-2.gif’); padding: 8px 0 0 10px; } #menu2 li a:hover { color: #FFF; background: url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxjc6WG6El7pQHF3hWrDzutDv0WFo4YTpYmEdDkxRFzJEJmyTH8P4oAHkdUNp61LDy2BpveINbdA5vIUsly4ZrNTW5nHprJMJ3bNa4vb78heBlDNwbqMwY1ca9dJ0eaFRM86HX5ZwYPteM/s1600/menu-2.gif’) 0 -32px; padding: 8px 0 0 10px; } #menu2 ul { list-style: none; margin: 0; padding: 0; } <div id=”menu2″>
<ul>
<li><a href=”#1″ title=”Link 1″>Link 1</a></li>
<li><a href=”#2″ title=”Link 2″>Link 2</a></li>
<li><a href=”#3″ title=”Link 3″>Link 3</a></li>
<li><a href=”#4″ title=”Link 4″>Link 4</a></li>
<li><a href=”#5″ title=”Link 5″>Link 5</a></li>
</ul>
</div>

CSS vertical Menu # 3

CSS vertical menus
<style>#menu3 { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px; margin: 10px; } #menu3 li a { height: 32px; voice-family: “\”}\”"; voice-family: inherit; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #5E7830; display: block; background: url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjREjId8sW-0_xoRFV9sPHOJk6EKsM68VMLxgIiYPvARQcV0ntNdAUPv_oSEMU_m5eQpyNAv47tAEdPwjQCl1WLjL1hypskXph8UXjGWBietUGV64ClhTWm4eXCvcB15prEvFTpfhEWud5/s1600/menu-3.gif’); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #26370A; background: url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjREjId8sW-0_xoRFV9sPHOJk6EKsM68VMLxgIiYPvARQcV0ntNdAUPv_oSEMU_m5eQpyNAv47tAEdPwjQCl1WLjL1hypskXph8UXjGWBietUGV64ClhTWm4eXCvcB15prEvFTpfhEWud5/s1600/menu-3.gif’) 0 -32px; padding: 8px 0 0 10px; } #menu3 li a:active { color: #26370A; background: url(images/menu1.gif) 0 -64px; padding: 8px 0 0 10px; } #menu3 ul { list-style: none; margin: 0; padding: 0; } </style><div id=”menu3″>
<ul>
<li><a href=”#1″ title=”Home”>Home</a></li>
<li><a href=”#2″ title=”About”>About</a></li>
<li><a href=”#3″ title=”Services”>Services</a></li>
<li><a href=”#4″ title=”Portfolio”>Portfolio</a></li>
<li><a href=”#5″ title=”Store”>Store</a></li>
<li><a href=”#6″ title=”Download”>Download Menu</a></li>
</ul>
</div>

CSS vertical Menu #4

Cool CSS menu
<style>#menu4 { width: 200px; margin-top: 10px; } #menu4 li a { text-decoration: none; height: 32px; voice-family: “\”}\”"; voice-family: inherit; height: 24px; } #menu4 li a:link, #menu4 li a:visited { color: #777; display: block; background: url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF9EN8LYvS0lX3H-ZHsfZJ2DQ5VNK9O9rbzjp9UNtTwHO_08iRROdKMCULTJvTR0k4_T3lq7iQ12DCgvyuVKlsCfUtHKLnm0WNxvyDbnz290oAJw9cFAz92VJfsqvMdc26QjcQSokjMNJt/s1600/menu-4.gif’); padding: 8px 0 0 20px; } #menu4 li a:hover { color: #257EB7; background: url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF9EN8LYvS0lX3H-ZHsfZJ2DQ5VNK9O9rbzjp9UNtTwHO_08iRROdKMCULTJvTR0k4_T3lq7iQ12DCgvyuVKlsCfUtHKLnm0WNxvyDbnz290oAJw9cFAz92VJfsqvMdc26QjcQSokjMNJt/s1600/menu-4.gif’) 0 -32px; padding: 8px 0 0 25px; } #menu4 li a:active { color: #fff; background: url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF9EN8LYvS0lX3H-ZHsfZJ2DQ5VNK9O9rbzjp9UNtTwHO_08iRROdKMCULTJvTR0k4_T3lq7iQ12DCgvyuVKlsCfUtHKLnm0WNxvyDbnz290oAJw9cFAz92VJfsqvMdc26QjcQSokjMNJt/s1600/menu-4.gif’) 0 -64px; padding: 8px 0 0 25px; } #menu4 ul { list-style: none; margin: 0; padding: 0; } </style><div id=”menu4″>
<ul>
<li><a href=”#1″>Home</a></li>
<li><a href=”#2″>About</a></li>
<li><a href=”#3″>Services</a></li>
<li><a href=”#4″>Portfolio</a></li>
<li><a href=”#5″>Store</a></li>
<li><a href=”#6″>Download Menu</a></li>
</ul>
</div>

Customization:

After adding the code into an HTML/JavaScript in blogger you can customize the menu by yourself; for changing the links and anchor texts to your own just find below piece of code in the menu:
<ul><li><a href=”#”>About</a></li></ul>
All the links are inside the ul tag, so replace each (#) sign with your link and the text i.e About, Home, Services etc with your own anchor text. Save the widget and check the result by viewing your blog. All the CSS properties and values can also be customized according to your needs.  You can add these menus to any website as well.
Note: The images which have been used in these menus are saved in my Picasa photo album, so you don’t need to do any extra work. Just use them and enjoy!

CSS cool Vertical Menus


Today, I would like to share CSS vertical menus collection with you. As you might know, CSS menus look great in a website. There are many benefits of using menus in a blog or website; the first benefit of using a CSS menu is: it attracts the visitors to click on the links inside the menu and the second benefit is: the menus are faster in loading, they don’t take much time to load in all browsers, Because with css you make the menus more readable for the browser. The css codes are just called in HTML page by a class or an ID selector. So, within just one word you can call them to be appeared on your blog. We will keep sharing CSS menus with you because there are thousands of stylish menus are there with different looks. We will also share a collection of drop down menus with you in our coming posts.
cool css menus

How to add CSS vertical menus to blog or website?

The procedure of adding any css menu to your blogger blog or website is quite simple and can be done within few steps. The menus we are sharing today are created with CSS and HTML. You can copy the entire code from the text box below in the list. And then go to your Blogger dashboard >> Layout >> Add a Gadget and paste the code inside that. Save the widget and view your blog to see the new added menu.
Remember:
These menus are vertical menus, therefore, they are mostly used in sidebar of your blog. Make sure you add them in sidebar for better result. The codes are with example pictures can be found below. Customization will be taught below the menu codes.

CSS vertical Menu # 1

CSS vertical Menu
<style>#menu1 { width: 200px; margin: 10px; } #menu1 li a { height: 32px; voice-family: “\”}\”"; voice-family: inherit; height: 22px; text-decoration: none; } #menu1 li a:link, #menu1 li a:visited { color: #666; display: block; background: url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsJp1O2tvOXFRwEmvZVAjkd-kl1KVuwwpclqZmfgj78kTLj1zBqaoRUfvFjvQsywRGvL6Ag1oy5yRXTv3UWj1mfPuaFc6NCl69hX4R9WOm6YVt4JA8-2sFvfcKxwT9jj6-P3rTy3njCfXO/s1600/menu-1.gif’); padding: 10px 0 0 35px; } #menu1 li a:hover { color: #000; background: url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsJp1O2tvOXFRwEmvZVAjkd-kl1KVuwwpclqZmfgj78kTLj1zBqaoRUfvFjvQsywRGvL6Ag1oy5yRXTv3UWj1mfPuaFc6NCl69hX4R9WOm6YVt4JA8-2sFvfcKxwT9jj6-P3rTy3njCfXO/s1600/menu-1.gif’) 0 -32px; padding: 10px 0 0 35px; } #menu1 ul { list-style: none; margin: 0; padding: 0; } </style><div id=”menu1″>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
<li><a href=”#”>Link 4</a></li>
<li><a href=”#”>Link 5</a></li>
</ul>
</div>

CSS vertical Menu # 2

CSS menus
#menu2 { width: 200px; margin: 10px; } #menu2 li a { height: 32px; voice-family: “\”}\”"; voice-family: inherit; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #FFF; display: block; background: url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxjc6WG6El7pQHF3hWrDzutDv0WFo4YTpYmEdDkxRFzJEJmyTH8P4oAHkdUNp61LDy2BpveINbdA5vIUsly4ZrNTW5nHprJMJ3bNa4vb78heBlDNwbqMwY1ca9dJ0eaFRM86HX5ZwYPteM/s1600/menu-2.gif’); padding: 8px 0 0 10px; } #menu2 li a:hover { color: #FFF; background: url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxjc6WG6El7pQHF3hWrDzutDv0WFo4YTpYmEdDkxRFzJEJmyTH8P4oAHkdUNp61LDy2BpveINbdA5vIUsly4ZrNTW5nHprJMJ3bNa4vb78heBlDNwbqMwY1ca9dJ0eaFRM86HX5ZwYPteM/s1600/menu-2.gif’) 0 -32px; padding: 8px 0 0 10px; } #menu2 ul { list-style: none; margin: 0; padding: 0; } <div id=”menu2″>
<ul>
<li><a href=”#1″ title=”Link 1″>Link 1</a></li>
<li><a href=”#2″ title=”Link 2″>Link 2</a></li>
<li><a href=”#3″ title=”Link 3″>Link 3</a></li>
<li><a href=”#4″ title=”Link 4″>Link 4</a></li>
<li><a href=”#5″ title=”Link 5″>Link 5</a></li>
</ul>
</div>

CSS vertical Menu # 3

CSS vertical menus
<style>#menu3 { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px; margin: 10px; } #menu3 li a { height: 32px; voice-family: “\”}\”"; voice-family: inherit; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #5E7830; display: block; background: url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjREjId8sW-0_xoRFV9sPHOJk6EKsM68VMLxgIiYPvARQcV0ntNdAUPv_oSEMU_m5eQpyNAv47tAEdPwjQCl1WLjL1hypskXph8UXjGWBietUGV64ClhTWm4eXCvcB15prEvFTpfhEWud5/s1600/menu-3.gif’); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #26370A; background: url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjREjId8sW-0_xoRFV9sPHOJk6EKsM68VMLxgIiYPvARQcV0ntNdAUPv_oSEMU_m5eQpyNAv47tAEdPwjQCl1WLjL1hypskXph8UXjGWBietUGV64ClhTWm4eXCvcB15prEvFTpfhEWud5/s1600/menu-3.gif’) 0 -32px; padding: 8px 0 0 10px; } #menu3 li a:active { color: #26370A; background: url(images/menu1.gif) 0 -64px; padding: 8px 0 0 10px; } #menu3 ul { list-style: none; margin: 0; padding: 0; } </style><div id=”menu3″>
<ul>
<li><a href=”#1″ title=”Home”>Home</a></li>
<li><a href=”#2″ title=”About”>About</a></li>
<li><a href=”#3″ title=”Services”>Services</a></li>
<li><a href=”#4″ title=”Portfolio”>Portfolio</a></li>
<li><a href=”#5″ title=”Store”>Store</a></li>
<li><a href=”#6″ title=”Download”>Download Menu</a></li>
</ul>
</div>

CSS vertical Menu #4

Cool CSS menu
<style>#menu4 { width: 200px; margin-top: 10px; } #menu4 li a { text-decoration: none; height: 32px; voice-family: “\”}\”"; voice-family: inherit; height: 24px; } #menu4 li a:link, #menu4 li a:visited { color: #777; display: block; background: url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF9EN8LYvS0lX3H-ZHsfZJ2DQ5VNK9O9rbzjp9UNtTwHO_08iRROdKMCULTJvTR0k4_T3lq7iQ12DCgvyuVKlsCfUtHKLnm0WNxvyDbnz290oAJw9cFAz92VJfsqvMdc26QjcQSokjMNJt/s1600/menu-4.gif’); padding: 8px 0 0 20px; } #menu4 li a:hover { color: #257EB7; background: url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF9EN8LYvS0lX3H-ZHsfZJ2DQ5VNK9O9rbzjp9UNtTwHO_08iRROdKMCULTJvTR0k4_T3lq7iQ12DCgvyuVKlsCfUtHKLnm0WNxvyDbnz290oAJw9cFAz92VJfsqvMdc26QjcQSokjMNJt/s1600/menu-4.gif’) 0 -32px; padding: 8px 0 0 25px; } #menu4 li a:active { color: #fff; background: url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF9EN8LYvS0lX3H-ZHsfZJ2DQ5VNK9O9rbzjp9UNtTwHO_08iRROdKMCULTJvTR0k4_T3lq7iQ12DCgvyuVKlsCfUtHKLnm0WNxvyDbnz290oAJw9cFAz92VJfsqvMdc26QjcQSokjMNJt/s1600/menu-4.gif’) 0 -64px; padding: 8px 0 0 25px; } #menu4 ul { list-style: none; margin: 0; padding: 0; } </style><div id=”menu4″>
<ul>
<li><a href=”#1″>Home</a></li>
<li><a href=”#2″>About</a></li>
<li><a href=”#3″>Services</a></li>
<li><a href=”#4″>Portfolio</a></li>
<li><a href=”#5″>Store</a></li>
<li><a href=”#6″>Download Menu</a></li>
</ul>
</div>

Customization:

After adding the code into an HTML/JavaScript in blogger you can customize the menu by yourself; for changing the links and anchor texts to your own just find below piece of code in the menu:
<ul><li><a href=”#”>About</a></li></ul>
All the links are inside the ul tag, so replace each (#) sign with your link and the text i.e About, Home, Services etc with your own anchor text. Save the widget and check the result by viewing your blog. All the CSS properties and values can also be customized according to your needs.  You can add these menus to any website as well.
Note: The images which have been used in these menus are saved in my Picasa photo album, so you don’t need to do any extra work. Just use them and enjoy!

No comments
Posted at October 04, 2013 |  by Online Ustaad

CSS3 should be the first priority for web designers to learn in order to get in touch with the fancy website layouts. I’ve previously shared complete CSS tutorials with you and also I shared some drop down menus in CSS3. However, now this is time for taking some steps to learn the latest properties included in CSS. So we can learn as many properties as we want, there is no limit for this. In today’s video tutorial, you’ll learn how to use the column property in CSS. Here is a video tutorial in which you can easily learn this thing in Urdu language and also in Hindi.
CSS3 columns
Let’s start watching the video first and then I’ll explain it further.

So having watched the video you’ve come to know about this new property in CSS, however, columns are mostly used in newspapers and books. so you may have seen them in books or magazines. But here in websites we used to create columns in HTML div tags, but now you don’t need that old traditional practice, you can now create columns by just using CSS property. Here is the syntax of using this property in web pages.
<style type=”text/css”>
column-count:3;
-webkit-column-count:3;
-moz-column-count:3;
</style>
the above one is the simple syntax of using columns in a web page or separating the content into columns in CSS. However, you can also add more attributes of column property itself, observe below examples:
<style type=”text/css”>
column-count:3;
-webkit-column-count:3;
-moz-column-count:3;
column-rule:5px solid green;
-webkit-column-rule:5px solid green;
-moz-column-rule:5px solid green;
column-gap:5px;
-webkit-column-gap:5px;
-moz-column-gap:5px;
</style>
In the above example we used the rule for the column which adds a border between columns, you can increase the column values from 3 to any value you want for example 2, 5, 8 , 10 etc. And the column-gap property is for creating the gap between two columns or the specified columns. And keep in mind that the -webkit- extra attribute is used for displaying the property in chrome browser and the -moz- is for Mozila firefox, because this property is not supported directly by all major browsers, so you nee do add the attributes for displaying it by your choice.
Share your thoughts in comment section about this great property and also share this post with all of your friends.

CSS3 Column Property in Urdu & Hindi Video Tutorials


CSS3 should be the first priority for web designers to learn in order to get in touch with the fancy website layouts. I’ve previously shared complete CSS tutorials with you and also I shared some drop down menus in CSS3. However, now this is time for taking some steps to learn the latest properties included in CSS. So we can learn as many properties as we want, there is no limit for this. In today’s video tutorial, you’ll learn how to use the column property in CSS. Here is a video tutorial in which you can easily learn this thing in Urdu language and also in Hindi.
CSS3 columns
Let’s start watching the video first and then I’ll explain it further.

So having watched the video you’ve come to know about this new property in CSS, however, columns are mostly used in newspapers and books. so you may have seen them in books or magazines. But here in websites we used to create columns in HTML div tags, but now you don’t need that old traditional practice, you can now create columns by just using CSS property. Here is the syntax of using this property in web pages.
<style type=”text/css”>
column-count:3;
-webkit-column-count:3;
-moz-column-count:3;
</style>
the above one is the simple syntax of using columns in a web page or separating the content into columns in CSS. However, you can also add more attributes of column property itself, observe below examples:
<style type=”text/css”>
column-count:3;
-webkit-column-count:3;
-moz-column-count:3;
column-rule:5px solid green;
-webkit-column-rule:5px solid green;
-moz-column-rule:5px solid green;
column-gap:5px;
-webkit-column-gap:5px;
-moz-column-gap:5px;
</style>
In the above example we used the rule for the column which adds a border between columns, you can increase the column values from 3 to any value you want for example 2, 5, 8 , 10 etc. And the column-gap property is for creating the gap between two columns or the specified columns. And keep in mind that the -webkit- extra attribute is used for displaying the property in chrome browser and the -moz- is for Mozila firefox, because this property is not supported directly by all major browsers, so you nee do add the attributes for displaying it by your choice.
Share your thoughts in comment section about this great property and also share this post with all of your friends.

No comments
Posted at October 04, 2013 |  by Online Ustaad

CSS is a colorful fancy environment for web designers since its releasing day. However, the latest changes in CSS are so awesome and powerful. Some years back, creating A drop down menu was not possible without jQuery and CSS. CSS used to design the Menu and jQuery used to functioning the menu. Now it is alone possible with CSS3. So today I will give you a complete solution for CSS Drop Down Menu for your website or blog. I have given complete HTML and CSS codes for this menu. You can simply copy them and paste into your webpage or website. You can latter on change the design, colors, links according to your needs.
CSS drop down menus

The menu that I’ve created will look like this image: 
drop down menu in css3

How to add drop down menu to Blogger?

You can easily add this beautiful drop down menu to any blogger template, just follow below steps to do so:
  • Login to your blogger account
  • Go to Template >> HTML >> Proceed
  • Find this piece of Code ]]></b:skin>
  • Just above/before that code paste below CSS code
#mymenu {
margin:0;
width:auto;
}
#mymenu ul {
margin:0;
padding:0;
line-height:30px;
}
#mymenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:
#F512E2;
}
#mymenu ul li a {
text-align:center;
height:30px;
width:150px;
display:block;
color:#000;
font-family:”Comic Sans MS”, cursive;
text-decoration:none;
color:#FFF;
border:1px solid #FFF;
text-shadow:1px 1px 1px #000;
}
#mymenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
#mymenu ul li:hover ul {
visibility:visible;
z-index:9999;
}
/*Menu hover color can be changed*/
#mymenu li:hover {
background:
#F98A1B;
}
/*the color & Background Color of Links within menu*/
#mymenu ul li:hover ul li a:hover {
color:#000;
background:#13B20D;
}
/* You can change the color for main menu*/
#mymenu a:hover {
color:
#000;
}
.clearFloat {
clear:both;
margin:0;
padding:0;
}
#mymenu ul li {
display: inline;
}
Save your template and you’ve added the CSS3 part of the drop down menu to your blog.
Now add an HTML/JavaScript widget from your blog’s Layout section and paste below code inside that widget:
<div id=”mymenu”>
<ul>
<li> <a href=”#”>Web Designing</a>
<ul>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>JavaScript</a></li>
<li><a href=”#”>Dreamweaver</a></li>
<li><a href=”#”>Blogger</a></li>
<li><a href=”#”>WordPress</a></li>
</ul>
</li>
</ul>
<br class=”clearFloat” />
</div>
Save the widget and keep it in the head section of the Layout page, so that it can be displayed on the top. See your blog to view the beautiful menu.
CSS Customization for this menu
You can do some customization in above CSS as you want, to change the color of a link simply replace any of your choice color name/code with first
this code. To change the background of any link replace second
this color code with yours. To change the background color of a:hover simply replace the third
this codewith your own color.
HTML Customization for this menu 
You can change the anchor text with your own text and the link sign “#” with your own link address. Also this is a single drop down menu. If you want to make more menus then simply copy the code from <ul> to </ul> and paste it as far as you want. But you should paste the code within the <div> tag and before <br class=”clearFloat”>.
This menu can also be added to any website you want, you can just insert all the code at once wherever you want this menu to appear, copy below code and insert it anywhere you want in your website:
<style type=”text/css”>
#mymenu {
margin:0;
width:auto;
}
#mymenu ul {
margin:0;
padding:0;
line-height:30px;
}
#mymenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#F512E2;
}
#mymenu ul li a {
text-align:center;
height:30px;
width:150px;
display:block;
color:#000;
font-family:”Comic Sans MS”, cursive;
text-decoration:none;
color:#FFF;
border:1px solid #FFF;
text-shadow:1px 1px 1px #000;
}
#mymenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
#mymenu ul li:hover ul {
visibility:visible;
z-index:9999;
}
/*Menu hover color can be changed*/
#mymenu li:hover {
background:#F98A1B;
}
/*the color & Background Color of Links within menu*/
#mymenu ul li:hover ul li a:hover {
color:#000;
background:#13B20D;
}
/* You can change the color for main menu*/
#mymenu a:hover {
color:#000;
}
.clearFloat {
clear:both;
margin:0;
padding:0;
}
#mymenu ul li {
display: inline;
}
</style>
<div id=”mymenu”>
<ul>
<li> <a href=”#”>Web Designing</a>
<ul>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>JavaScript</a></li>
<li><a href=”#”>Dreamweaver</a></li>
<li><a href=”#”>Blogger</a></li>
<li><a href=”#”>WordPress</a></li>
</ul>
</li>
</ul>
<br class=”clearFloat” />
</div>
Just replace the “#” sign with your links and this is a single menu so you need to copy the entire <ul></ul> tag and paste again and again as far as you want, but insert it inside the <div id=”mymenu”></div> tag and before the <br class=”clearFloat” />. 
Over to you: 
I’m continuously working to produce more web designing projects and freebies for you, however, let me know how was this menu and if you liked this then kindly share it with your friends, and do comment if you have questions. Take care.

CSS3 Pure Drop Down Menu with Source Code


CSS is a colorful fancy environment for web designers since its releasing day. However, the latest changes in CSS are so awesome and powerful. Some years back, creating A drop down menu was not possible without jQuery and CSS. CSS used to design the Menu and jQuery used to functioning the menu. Now it is alone possible with CSS3. So today I will give you a complete solution for CSS Drop Down Menu for your website or blog. I have given complete HTML and CSS codes for this menu. You can simply copy them and paste into your webpage or website. You can latter on change the design, colors, links according to your needs.
CSS drop down menus

The menu that I’ve created will look like this image: 
drop down menu in css3

How to add drop down menu to Blogger?

You can easily add this beautiful drop down menu to any blogger template, just follow below steps to do so:
  • Login to your blogger account
  • Go to Template >> HTML >> Proceed
  • Find this piece of Code ]]></b:skin>
  • Just above/before that code paste below CSS code
#mymenu {
margin:0;
width:auto;
}
#mymenu ul {
margin:0;
padding:0;
line-height:30px;
}
#mymenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:
#F512E2;
}
#mymenu ul li a {
text-align:center;
height:30px;
width:150px;
display:block;
color:#000;
font-family:”Comic Sans MS”, cursive;
text-decoration:none;
color:#FFF;
border:1px solid #FFF;
text-shadow:1px 1px 1px #000;
}
#mymenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
#mymenu ul li:hover ul {
visibility:visible;
z-index:9999;
}
/*Menu hover color can be changed*/
#mymenu li:hover {
background:
#F98A1B;
}
/*the color & Background Color of Links within menu*/
#mymenu ul li:hover ul li a:hover {
color:#000;
background:#13B20D;
}
/* You can change the color for main menu*/
#mymenu a:hover {
color:
#000;
}
.clearFloat {
clear:both;
margin:0;
padding:0;
}
#mymenu ul li {
display: inline;
}
Save your template and you’ve added the CSS3 part of the drop down menu to your blog.
Now add an HTML/JavaScript widget from your blog’s Layout section and paste below code inside that widget:
<div id=”mymenu”>
<ul>
<li> <a href=”#”>Web Designing</a>
<ul>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>JavaScript</a></li>
<li><a href=”#”>Dreamweaver</a></li>
<li><a href=”#”>Blogger</a></li>
<li><a href=”#”>WordPress</a></li>
</ul>
</li>
</ul>
<br class=”clearFloat” />
</div>
Save the widget and keep it in the head section of the Layout page, so that it can be displayed on the top. See your blog to view the beautiful menu.
CSS Customization for this menu
You can do some customization in above CSS as you want, to change the color of a link simply replace any of your choice color name/code with first
this code. To change the background of any link replace second
this color code with yours. To change the background color of a:hover simply replace the third
this codewith your own color.
HTML Customization for this menu 
You can change the anchor text with your own text and the link sign “#” with your own link address. Also this is a single drop down menu. If you want to make more menus then simply copy the code from <ul> to </ul> and paste it as far as you want. But you should paste the code within the <div> tag and before <br class=”clearFloat”>.
This menu can also be added to any website you want, you can just insert all the code at once wherever you want this menu to appear, copy below code and insert it anywhere you want in your website:
<style type=”text/css”>
#mymenu {
margin:0;
width:auto;
}
#mymenu ul {
margin:0;
padding:0;
line-height:30px;
}
#mymenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#F512E2;
}
#mymenu ul li a {
text-align:center;
height:30px;
width:150px;
display:block;
color:#000;
font-family:”Comic Sans MS”, cursive;
text-decoration:none;
color:#FFF;
border:1px solid #FFF;
text-shadow:1px 1px 1px #000;
}
#mymenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
#mymenu ul li:hover ul {
visibility:visible;
z-index:9999;
}
/*Menu hover color can be changed*/
#mymenu li:hover {
background:#F98A1B;
}
/*the color & Background Color of Links within menu*/
#mymenu ul li:hover ul li a:hover {
color:#000;
background:#13B20D;
}
/* You can change the color for main menu*/
#mymenu a:hover {
color:#000;
}
.clearFloat {
clear:both;
margin:0;
padding:0;
}
#mymenu ul li {
display: inline;
}
</style>
<div id=”mymenu”>
<ul>
<li> <a href=”#”>Web Designing</a>
<ul>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>JavaScript</a></li>
<li><a href=”#”>Dreamweaver</a></li>
<li><a href=”#”>Blogger</a></li>
<li><a href=”#”>WordPress</a></li>
</ul>
</li>
</ul>
<br class=”clearFloat” />
</div>
Just replace the “#” sign with your links and this is a single menu so you need to copy the entire <ul></ul> tag and paste again and again as far as you want, but insert it inside the <div id=”mymenu”></div> tag and before the <br class=”clearFloat” />. 
Over to you: 
I’m continuously working to produce more web designing projects and freebies for you, however, let me know how was this menu and if you liked this then kindly share it with your friends, and do comment if you have questions. Take care.

No comments
Posted at October 04, 2013 |  by Online Ustaad

CSS is one of my Favourite activities I am doing and researching these days. CSS3 has more powers to use and to interact with static web pages. Now creating a professional looking website without using CSS is just a dream. So, we have been learning CSS on this blog since its creation. And time to time I taught you CSS from basic to Advance level. However, now it is the time to take our web designing expertise to the next level and make some real projects. Having kept that in mind, I have recorded the most awaiting tutorial for my readers. This tutorial is all about creating A CSS drop down menu in Urdu language. So I have used pure CSS3 while creating this cute CSS Menu. No image is used and no script is used.
CSS drop down menus

How to Create CSS Drop Down menu in Urdu?

This is not so difficult, you need just to do some practice on basics of CSS. Below video tutorials which are in Urdu language will show you how to create drop down menu in CSS. These tutorials are taking your CSS skills to the next level.
The Source code of this tutorials is also available below the video tutorials, and the menu will be looking like this image:
CSS Drop Down menu
Watch Part 1 first and then Part 2.
CSS Drop Down menu Part 1
CSS Drop Down menu Part 2
Now here is the source code for this drop down menu which was created in video tuotirals:
<html>
<head>
<style type=”text/css”>
.menubar {padding:0px;}
.menubar ul {padding:0px; margin:0px; line-height:30px;}
.menubar li {background-color:teal; list-style:none; float:left; position:relative;}
.menubar a {width:120px; height:30px; display:block; text-decoration:none; color:white; border:1px solid white; text-align:center; text-shadow:1px 1px 1px orange;}
.menubar ul ul {position:absolute; top:33px; visibility:hidden;}
.menubar ul li:hover ul {visibility:visible;}
.menubar a:hover {background-color:brown;}
.menubar ul li:hover ul li a:hover {background-color:blue;}
.menubar ul li {display:inline;}
.clear {
clear:both;
margin:0;
padding:0;
}
.menubar ul ul ul {margin-left:120px; margin-top:-30px; padding-left:5px;}
.menubar ul ul ul li {visibility:hidden;}
.menubar ul li:hover ul ul ul{visibility:visible;}
</style>
</head>
<body>
<div class=”menubar”>
<ul>
<li><a href=”#”>Web Designing</a>
<ul>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>JavaScript</a></li>
<li><a href=”#”>Dream Weaver >></a>
<ul>
<li><a href=”#”>Basic</a></li>
<li><a href=”#”>Basic</a></li>
<li><a href=”#”>Basic</a></li>
<li><a href=”#”>Basic</a></li>
<li><a href=”#”>Basic</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><a href=”#”>Web Designing</a>
<ul>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>JavaScript</a></li>
<li><a href=”#”>Dream Weaver</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href=”#”>Web Designing</a>
<ul>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>JavaScript</a></li>
<li><a href=”#”>Dream Weaver</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href=”#”>Web Designing</a>
<ul>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>JavaScript</a></li>
<li><a href=”#”>Dream Weaver</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
You can simply copy the code and insert into a blank notepad file and save it with HTML extension, and view the file in your browser, so you’ll be able to see a beautiful drop down menu as showing in a picture above.
Let me know how was this menu and did you learn it completely or not? and what do you want to learn more in the future about web designing. Stay Tuned and Sharing is caring.

How to Create CSS3 Drop Down Menu in Urdu & Hindi?


CSS is one of my Favourite activities I am doing and researching these days. CSS3 has more powers to use and to interact with static web pages. Now creating a professional looking website without using CSS is just a dream. So, we have been learning CSS on this blog since its creation. And time to time I taught you CSS from basic to Advance level. However, now it is the time to take our web designing expertise to the next level and make some real projects. Having kept that in mind, I have recorded the most awaiting tutorial for my readers. This tutorial is all about creating A CSS drop down menu in Urdu language. So I have used pure CSS3 while creating this cute CSS Menu. No image is used and no script is used.
CSS drop down menus

How to Create CSS Drop Down menu in Urdu?

This is not so difficult, you need just to do some practice on basics of CSS. Below video tutorials which are in Urdu language will show you how to create drop down menu in CSS. These tutorials are taking your CSS skills to the next level.
The Source code of this tutorials is also available below the video tutorials, and the menu will be looking like this image:
CSS Drop Down menu
Watch Part 1 first and then Part 2.
CSS Drop Down menu Part 1
CSS Drop Down menu Part 2
Now here is the source code for this drop down menu which was created in video tuotirals:
<html>
<head>
<style type=”text/css”>
.menubar {padding:0px;}
.menubar ul {padding:0px; margin:0px; line-height:30px;}
.menubar li {background-color:teal; list-style:none; float:left; position:relative;}
.menubar a {width:120px; height:30px; display:block; text-decoration:none; color:white; border:1px solid white; text-align:center; text-shadow:1px 1px 1px orange;}
.menubar ul ul {position:absolute; top:33px; visibility:hidden;}
.menubar ul li:hover ul {visibility:visible;}
.menubar a:hover {background-color:brown;}
.menubar ul li:hover ul li a:hover {background-color:blue;}
.menubar ul li {display:inline;}
.clear {
clear:both;
margin:0;
padding:0;
}
.menubar ul ul ul {margin-left:120px; margin-top:-30px; padding-left:5px;}
.menubar ul ul ul li {visibility:hidden;}
.menubar ul li:hover ul ul ul{visibility:visible;}
</style>
</head>
<body>
<div class=”menubar”>
<ul>
<li><a href=”#”>Web Designing</a>
<ul>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>JavaScript</a></li>
<li><a href=”#”>Dream Weaver >></a>
<ul>
<li><a href=”#”>Basic</a></li>
<li><a href=”#”>Basic</a></li>
<li><a href=”#”>Basic</a></li>
<li><a href=”#”>Basic</a></li>
<li><a href=”#”>Basic</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><a href=”#”>Web Designing</a>
<ul>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>JavaScript</a></li>
<li><a href=”#”>Dream Weaver</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href=”#”>Web Designing</a>
<ul>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>JavaScript</a></li>
<li><a href=”#”>Dream Weaver</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href=”#”>Web Designing</a>
<ul>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>JavaScript</a></li>
<li><a href=”#”>Dream Weaver</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
You can simply copy the code and insert into a blank notepad file and save it with HTML extension, and view the file in your browser, so you’ll be able to see a beautiful drop down menu as showing in a picture above.
Let me know how was this menu and did you learn it completely or not? and what do you want to learn more in the future about web designing. Stay Tuned and Sharing is caring.

No comments
Posted at October 04, 2013 |  by Online Ustaad

As you may have noticed that now I am publishing complete tutorials at once. Today I am going to share complete CSS Video Training in Urdu language. CSS is totally a colorful language for styling websites and web pages. You can set a beautiful style for your website and then apply it on entire HTML document or a specified page.  CSS3 is something amazing, this is the latest standard for CSS globally, and is having a lot stuff to play with. CSS3 has changed the entire concept of web designing. Now JavaScript and Flash’s usage will be reduced as much as possible, because CSS3 gives you power to create animations, transitions and make an object visible or invisible when you want. So here you’ll learn it completely in Urdu and Hindi languages in the shape of video tutorials.
css in urdu

CSS Style Sheet Complete Video Training in Urdu

A playlist below is containing all the video tutorials we recorded for CSS, so you just need to play one video the another one will play automatically, and this course contains more than 30 videos at the moment, but this list will be updated time by time when new videos are uploaded. For now enjoy learning CSS.

What are coming in the future?

Actually I’ve planned to create some professional layouts using CSS3 and HTML, so if time allowed I’ll be coming up with a lot of fancy stuff in CSS including website layouts and templates. You just need to stay with us here. And if you liked this course then do share it with your friends.

CSS Web Designing Tutorials in Urdu & Hindi


As you may have noticed that now I am publishing complete tutorials at once. Today I am going to share complete CSS Video Training in Urdu language. CSS is totally a colorful language for styling websites and web pages. You can set a beautiful style for your website and then apply it on entire HTML document or a specified page.  CSS3 is something amazing, this is the latest standard for CSS globally, and is having a lot stuff to play with. CSS3 has changed the entire concept of web designing. Now JavaScript and Flash’s usage will be reduced as much as possible, because CSS3 gives you power to create animations, transitions and make an object visible or invisible when you want. So here you’ll learn it completely in Urdu and Hindi languages in the shape of video tutorials.
css in urdu

CSS Style Sheet Complete Video Training in Urdu

A playlist below is containing all the video tutorials we recorded for CSS, so you just need to play one video the another one will play automatically, and this course contains more than 30 videos at the moment, but this list will be updated time by time when new videos are uploaded. For now enjoy learning CSS.

What are coming in the future?

Actually I’ve planned to create some professional layouts using CSS3 and HTML, so if time allowed I’ll be coming up with a lot of fancy stuff in CSS including website layouts and templates. You just need to stay with us here. And if you liked this course then do share it with your friends.

No comments
Posted at October 04, 2013 |  by Online Ustaad

HTML is a hyper text mark up language which is definitely used to create the basic structure of a website or web page. We’ve already shared a detailed HTML video training in Urdu on this blog. Actually our previous training of HTML was uploaded to YouTube and YT is not accessible in Pakistan these days, so I uploaded the 30% videos of my new HTML course to my new website www.Tuts2Learn.com, and via this post I’ll be sharing those videos with you. So you can now easily learn HTML with more useful videos. This complete course is actually available in DVDs, which has more than 50 video tutorials including projects, but I just uploaded the 30% videos because to let you know the basics of HTML in a new way. And also I want you to learn something new. You can also take it an example before buying our complete Courses in DVDs.
HTML in Urdu
I uploaded these videos because of the Ban on YouTube, so you can now somehow learn HTML with these video tutorials.  I’ll give you some videos live here and the rest of the videos will be shared with you via links.

Learning HTML by watching video tutorials in Urdu

You must learn HTML if you want to become a web designer, learning HTML is the first step to become a web designer, it is the basic language of web designing and web development. And without having sufficient knowledge of it, you can not go ahead. Every new application or web project needs to be first structured in HTML. All other web languages are embedded into HTML documents. So in this course you’ll learn the basics of HTML and also some mostly used elements/tags of HTML. Now let’s watch the videos one by one to starting up:
HTML Tutorials in Urdu part 1 
HTML Tutorials in Urdu part 2
HTML Tutorials in Urdu part 3
HTML Tutorials in Urdu part 4
HTML Tutorials in Urdu part 5
HTML Tutorials in Urdu part 6
If we added all tutorials to this page then the page would be over loaded, therefore the rest tutorials will be in links, just click the link and you’ll watch that part on Tuts2learn.com:
So you can easily watch all these videos to learn the Basics of HTML, however, as I already told you in the starting of this article that this training series is from our premium DVDs courses, I just uploaded the 30% videos because I wanted to give you some insights of this new course and also many of you can not watch our previous HTML course due to those are hosted on YouTube, and YT is not accessible within Pakistan.
Therefore, You may get this course any time in DVDs with complete step by step more than 50+ video tuts having a lot of projects using HTML & CSS. But you can still learn the basics from my this awesome course which I’ve only uploaded for you.
Kindly Take Few Seconds to Share this Post on social media!
Let us know if you have further questions or queries in comment section, I’ll always be happy to answer your questions and also to motivate you for the future. Stay Blessed..!

New HTML Video Tutorials Course in Urdu & Hindi


HTML is a hyper text mark up language which is definitely used to create the basic structure of a website or web page. We’ve already shared a detailed HTML video training in Urdu on this blog. Actually our previous training of HTML was uploaded to YouTube and YT is not accessible in Pakistan these days, so I uploaded the 30% videos of my new HTML course to my new website www.Tuts2Learn.com, and via this post I’ll be sharing those videos with you. So you can now easily learn HTML with more useful videos. This complete course is actually available in DVDs, which has more than 50 video tutorials including projects, but I just uploaded the 30% videos because to let you know the basics of HTML in a new way. And also I want you to learn something new. You can also take it an example before buying our complete Courses in DVDs.
HTML in Urdu
I uploaded these videos because of the Ban on YouTube, so you can now somehow learn HTML with these video tutorials.  I’ll give you some videos live here and the rest of the videos will be shared with you via links.

Learning HTML by watching video tutorials in Urdu

You must learn HTML if you want to become a web designer, learning HTML is the first step to become a web designer, it is the basic language of web designing and web development. And without having sufficient knowledge of it, you can not go ahead. Every new application or web project needs to be first structured in HTML. All other web languages are embedded into HTML documents. So in this course you’ll learn the basics of HTML and also some mostly used elements/tags of HTML. Now let’s watch the videos one by one to starting up:
HTML Tutorials in Urdu part 1 
HTML Tutorials in Urdu part 2
HTML Tutorials in Urdu part 3
HTML Tutorials in Urdu part 4
HTML Tutorials in Urdu part 5
HTML Tutorials in Urdu part 6
If we added all tutorials to this page then the page would be over loaded, therefore the rest tutorials will be in links, just click the link and you’ll watch that part on Tuts2learn.com:
So you can easily watch all these videos to learn the Basics of HTML, however, as I already told you in the starting of this article that this training series is from our premium DVDs courses, I just uploaded the 30% videos because I wanted to give you some insights of this new course and also many of you can not watch our previous HTML course due to those are hosted on YouTube, and YT is not accessible within Pakistan.
Therefore, You may get this course any time in DVDs with complete step by step more than 50+ video tuts having a lot of projects using HTML & CSS. But you can still learn the basics from my this awesome course which I’ve only uploaded for you.
Kindly Take Few Seconds to Share this Post on social media!
Let us know if you have further questions or queries in comment section, I’ll always be happy to answer your questions and also to motivate you for the future. Stay Blessed..!

No comments
Posted at October 04, 2013 |  by Online Ustaad
Few days back, we learnt creating a complete website layout by using HTML and CSS. And Thus today, we are going to upload that site to our online web server. Video tutorial below in Urdu will help you better understanding of FileZilla FTP (File Transfer Protocol) software and the Cpanel along with the basic knowledge of web hosting. We had been learning HTML, CSS, JavaScript, PHP and other web designing tools on this blog. Now it is time to take a step ahead and learn uploading websites to web server. So here is a complete tutorial in Urdu language where you will come to know about the procedure.
FileZilla FTP in Urdu

Uploading Local site to Online Web Server

This is a very simple and complete video tutorial in Urdu language, by watching this video you will learn how to upload a website to online web server by using FileZilla software FileZilla is one of the most prominent software mostly used for this purpose. It is super easy to use.

How to Download & Use FileZilla

You can just write “FileZilla Downlaod” on Google and hit search, so the downloading link will appear, just click that and download the windows/installer version, after downloading just install it, it takes few seconds to install on your local computer. When it is installed, an icon is created on your desktop, Now you can use it as your FTP client. Just open it and enter your domain name “yourname.com”, the user name for your cpanel and the password of your cpanel. It will connect your computer to the website. Now you can easily copy your files and paste to your online web server.
Now here is the video tutorial for learning this thing practically in Urdu:
By watching the video, I hope you’ll understand it and learn it. However, sharing this post with your friends is must in order spread our knowledge with others. Take care and ask questions in comment section if you have then.

How to Upload HTML website to Online Server in Urdu

Few days back, we learnt creating a complete website layout by using HTML and CSS. And Thus today, we are going to upload that site to our online web server. Video tutorial below in Urdu will help you better understanding of FileZilla FTP (File Transfer Protocol) software and the Cpanel along with the basic knowledge of web hosting. We had been learning HTML, CSS, JavaScript, PHP and other web designing tools on this blog. Now it is time to take a step ahead and learn uploading websites to web server. So here is a complete tutorial in Urdu language where you will come to know about the procedure.
FileZilla FTP in Urdu

Uploading Local site to Online Web Server

This is a very simple and complete video tutorial in Urdu language, by watching this video you will learn how to upload a website to online web server by using FileZilla software FileZilla is one of the most prominent software mostly used for this purpose. It is super easy to use.

How to Download & Use FileZilla

You can just write “FileZilla Downlaod” on Google and hit search, so the downloading link will appear, just click that and download the windows/installer version, after downloading just install it, it takes few seconds to install on your local computer. When it is installed, an icon is created on your desktop, Now you can use it as your FTP client. Just open it and enter your domain name “yourname.com”, the user name for your cpanel and the password of your cpanel. It will connect your computer to the website. Now you can easily copy your files and paste to your online web server.
Now here is the video tutorial for learning this thing practically in Urdu:
By watching the video, I hope you’ll understand it and learn it. However, sharing this post with your friends is must in order spread our knowledge with others. Take care and ask questions in comment section if you have then.

No comments
Posted at October 04, 2013 |  by Online Ustaad
I have published CSS video tutorials and also HTML video tutorials on this website, however, I’m further interested to publish about web designing, because I’m myself a web designer. I actually want to publish some projects in CSS and HTML, because this very import that you know how can you practically create something in web languages. So here I”m a very simple CSS and HTML project which can help you creating a basic layout in these web designing languages.
designing websites in CSS & HTML
I’ve created video tutorials for doing so, so you can watch them and learn how to create a complete website layout in CSS and HTML. This is not a great layout, but you can take out the idea how work with CSS and HTML.
Let’s watch the videos now and learn this thing easily in Urdu & Hindi languages:

HTML & CSS Layout Video 1


HTML & CSS Layout Video 2


So having watched above video tutorials, I hope you have learned the basic idea of creating a website layout in CSS and HTML, however, I’m right now working on some professional and advance responsive website layouts, which will be soon shared with all of you guys, Inshallah.
And creating layouts in CSS and HTML is now very very easy, because CSS3 has the power to function a website now, and you can use it for designing the website as you like.
Let me know if you want to include more designing resources in this website, or just as your question.

CSS3 & HTML5 Website Layout in Urdu & Hindi

I have published CSS video tutorials and also HTML video tutorials on this website, however, I’m further interested to publish about web designing, because I’m myself a web designer. I actually want to publish some projects in CSS and HTML, because this very import that you know how can you practically create something in web languages. So here I”m a very simple CSS and HTML project which can help you creating a basic layout in these web designing languages.
designing websites in CSS & HTML
I’ve created video tutorials for doing so, so you can watch them and learn how to create a complete website layout in CSS and HTML. This is not a great layout, but you can take out the idea how work with CSS and HTML.
Let’s watch the videos now and learn this thing easily in Urdu & Hindi languages:

HTML & CSS Layout Video 1


HTML & CSS Layout Video 2


So having watched above video tutorials, I hope you have learned the basic idea of creating a website layout in CSS and HTML, however, I’m right now working on some professional and advance responsive website layouts, which will be soon shared with all of you guys, Inshallah.
And creating layouts in CSS and HTML is now very very easy, because CSS3 has the power to function a website now, and you can use it for designing the website as you like.
Let me know if you want to include more designing resources in this website, or just as your question.

No comments
Posted at October 04, 2013 |  by Online Ustaad
Subscribe to: Posts (Atom)
© 2013 OU Free Video Tutorials. All rights reserved
back to top