Coming Soon - Premium WordPress Theme Giveaway To All Our Email Subscribers
Get Awesome Stickers at Stickermule
Posted by Praveen Gowda I V in Articles, General, Reviews on January 25, 2012
If you haven’t heard about Stickermule yet then you should definitely check them out today. Stickermule makes awesome custom vinyl stickers and the quality of stickers they make are just the best I have ever come across.
Stickermule have got thousands of people, startups, bloggers, artists and companies awesome stickers printed beautifully.
Also they ship worldwide and if you are in the United States then they provide free shipping and ship all orders in just 5 business days. They also provide an online proof of your custom design before getting it to print and they also fix your low quality artworks for free.
With brands like GitHub, Shopify, Quora, AppSumo and Reddit trusting Stickermule, there is no reason you shouldn’t try them once
So Go Ahead and check out the custom stickers and custom skins.
You can order for the sample pack to test the quality of stickers before ordering.
You also get $10 of free credits to start you with your sticker shopping by clicking the link below
You should also check out the different stores that Stickermule offers.
Our favorite is the DuckDuckGo Sticker Store
If you haven’t heard of DuckDuckGo, then
DuckDuckGo is a general purpose search engine like Google or Bing with an important difference. It does not track you. It also works harder to reduce spam and clutter
The DuckDuckGo store features 18 community designed stickers (more to come!), as well as official logo stickers and iPhone skins. There’s even a reddit-inspired sticker that also serves as the logo for the official DuckDuckGo subreddit.
Check Out DuckDuckGo Sticker Store
Vote For The Best Tutorial in 2011
Posted by Praveen Gowda I V in Articles, General on December 31, 2011
We would like to wish everyone a Happy New Year 2012, as we end the year 2011 and step in to 2012, we would like to have some feedback which would help us to provide you with better and useful web development tutorials in 2012.
So please take some time to vote for the best tuorial of 2011, and what tutorials you are expecting us to provide in 2012.
Survey has been closed, thanks for everyone who took the survey.
Thanks for taking the survey, we will be back in 2012 with some more great Web Development Tutorials, your feedback will definitely help us present the best tutorials for you.
Happy New Year 2012 and have a great year ahead.
Facebook like Beeper for Alerting Notifications Live
Posted by Praveen Gowda I V in Facebook, Jquery, Others, Tutorials, Web Design on December 11, 2011
Whenever you are online on Facebook and if there are any notifications then you would have noticed the small blue box on the left bottom alerting you the notification live, this is what Facebook calls as the beeper.
In this tutorial I am going to teach you to create such a beeper found on Facebook.
If you are still wondering on what beeper I am talking about, then look at the below image to know what we are going to create at the end of this tutorial
Bepper Found In Facebook
Notification Box In Facebook
We are going to use CSS and jQuery to create the notification box.
Check out the live demo or download the source code if you are in a hurry ( it is heavily commented) or else check how the code works below.
|
DOWNLOAD |
LIVE DEMO |
Now Let Us Look at the Source Code:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Live Demo Of Creating Facebook like Beeper Tutorial | http://blog.geotitles.com</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery.facebookBeeper.js" type="text/javascript"></script>
</head>
<body>
<div align="center" class="main">
<p>This is the live demo of creating <strong><a href="http://blog.geotitles.com/2011/12/facebook-like-beeper-for-alerting-notifications-live">Facebook like Beeper Box</a></strong><a href="http://blog.geotitles.com/2011/12/facebook-like-beeper-for-alerting-notifications-live"> for Alerting Notification</a> on <strong><a href="http://blog.geotitles.com">Geo Web Station</a></strong><br /><br />
Click <strong><a href="http://blog.geotitles.com/2011/12/facebook-like-beeper-for-alerting-notifications-live">Here</a></strong> For The <strong><a href="http://blog.geotitles.com/2011/12/facebook-like-beeper-for-alerting-notifications-live">Tutorial Link</a></strong> To Have A Look At The <a href="http://blog.geotitles.com/2011/12/facebook-like-beeper-for-alerting-notifications-live">Tutorial </a>And Download The Source Code </p>
<p>
Click Below To Display Beeper
</p>
<a href="#" class="control" id="control">DISPLAY BEEPER</a>
</div>
<div id="BeeperBox" class="UIBeeper">
<div class="UIBeeper_Full">
<div class="Beeps">
<div class="UIBeep UIBeep_Top UIBeep_Bottom UIBeep_Selected" style="opacity: 1; ">
<!-- Below Is The Link To Which Bepper Will Point To (replace # with the required link) -->
<a class="UIBeep_NonIntentional" href="#">
<div class="UIBeep_Icon">
<i class="beeper_icon image2"></i>
</div>
<span class="beeper_x"> </span>
<div class="UIBeep_Title">
<span class="blueName">Praveen Gowda</span> likes your comment on <span class="blueName">Hitherto Web Labs</span>.
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
@charset "utf-8";
body{
/* body*/
font-size: 11px;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
color: #333;
line-height: 1.28;
text-align: left;
direction: ltr;
}
.main{
/* style for the div with control button*/
font-size:15px;
width:670px;
margin:30px auto;
height:80%;
padding:15px;
font-weight:normal;
/*border-radius*/
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
background:white;
border:1px solid #E5E5E5;
/*box-shadow*/
-webkit-box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
-moz-box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
}
.control{
color:#666;
width:150px;
font:bold 75% arial,sans-serif;
text-decoration:none;
padding:10px 10px 10px 10px;
display:inline-block;
text-align:center;
/*Background*/
background:#f3f3f3;
background:-webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
/*linear-gradient*/
background:-webkit-gradient(linear,left top,left bottom,from(from(#F5F5F5)),to(to(#F1F1F1)));
/*@@prefixmycss->No equivalent*/
background:-webkit-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background: -o-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background: linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
border:solid 1px #dcdcdc;
/*border-radius*/
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
margin:25px auto;
}
.control:hover{
color:#333;
border-color:#999;
/*box-shadow*/
-webkit-box-shadow:0 2px 0 rgba(0,0,0,0.2) -webkit-box-shadow:0 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0 2px 0 rgba(0,0,0,0.2) -moz-box-shadow:0 2px 5px rgba(0,0,0,0.2);
box-shadow: 0 2px 0 rgba(0,0,0,0.2) box-shadow:0 2px 5px rgba(0,0,0,0.2);
}
.UIBeeper{
width:230px;
left:15px;
bottom:30px;
position:fixed;
z-index:99;
display:none;
}
.UIBeeper .UIBeeper_Full{
background-color:#E1E6EE;
border:1px solid #99A8C7;
/*border-radius*/
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:0;
padding:3px;
}
.UIBeeper .UIBeeper_Full:hover{
/* change background color on mouseover */
background-color:#CAD1DE;
}
.UIBeeper .UIBeep_Bottom{
border-bottom:none;
}
.UIBeeper .UIBeep_Selected{
background:#CAD1DE;
}
.UIBeeper .UIBeep_Top{
padding-top:0;
}
.UIBeeper .UIBeep_Bottom{
padding-bottom:0;
}
.UIBeep{
background:#E1E6EE;
border-bottom:1px solid #BFCADE;
overflow:hidden;
padding:3px 0;
clear:right;
}
a, a:hover{
cursor:pointer;
color:#3B5998;
text-decoration:none;
}
.UIBeep .UIBeep_NonIntentional .UIBeep_Icon{
float:left;
width:20px;
height:20px;
text-align:center;
margin:5px 5px;
}
.UIBeep_Selected .UIBeep_Icon{
margin-right:2px;
}
.image2{
/* icon within the beeper */
background-image:url(images/like.png);
background-repeat:no-repeat;
display:inline-block;
height:16px;
width:16px;
}
.UIBeeper .UIBeep .UIBeep_NonIntentional .beeper_x{
/* close button */
float:right;
height:16px;
width:16px;
margin-top:6px;
background:url(images/close.gif) no-repeat;
visibility:hidden;
}
.UIBeep .beeper_x:hover{
/* close button on mouseover */
background:url(images/closehover.gif) no-repeat !important;
}
.UIBeep_Selected .beeper_x{
display:block !important;
visibility:visible !important;
margin-left:4px;
}
.UIBeep .UIBeep_NonIntentional .UIBeep_Title{
margin:0 20px 0 30px;
}
.UIBeep .UIBeep_Title{
padding:5px 0;
}
JavaScript
We use jQuery to:
- display the beeper on clicking on the button
- hide the beeper after five seconds
- prevent the hiding of beeper on mouseover
- hide the beeper after five seconds of mouseout
$(document).ready(function () {
// set the time for the beeper to be displayed as 5000 milli seconds (5 seconds)
var timerId, delay = 5000;
var a = $("#BeeperBox"),
b = $("a.control");;
//function to destroy the timeout
function stopHide() {
clearTimeout(timerId);
}
//function to display the beeper and hide it after 5 seconds
function showTip() {
a.show();
timerId = setTimeout(function () {
a.hide();
}, delay);
}
//function to hide the beeper after five seconds
function startHide() {
timerId = setTimeout(function () {
a.hide();
}, delay);
}
//display the beeper on cliking the "show beeper" button
b.click(showTip);
//Clear timeout to hide beeper on mouseover
//start timeout to hide beeper on mouseout
a.mouseenter(stopHide).mouseleave(startHide);
$('.beeper_x').click(function () {
//hide the beeper when the close button on the beeper is clicked
$("#BeeperBox").hide();
});
});
I believe that the Facebook Beeper is one of the most effective way to grab the attention of visitors to your website, and everyone is free to use our script any of your projects. Do let us know in what way this tutorial has helped you by commenting below:
Next Week we will be back with another interesting tutorial in the meanwhile stay updated with all our tutorials by :
Subscribing to RSS feeds
Subscribing by email
Subscribing by SMS(currently limited to Indian Users)
Want to request a new tutorial, then please Contact me right-away or leave a comment below.
I promise to respond to everyone who asks for support or new tutorials.
Tutorial on creating Google Plus Brand pages
Posted by Praveen Gowda I V in Articles, Google, Google Plus, Tutorials, Web Design on November 8, 2011
Google plus has rolled out its brand pages for Businesses, Products, Brands, Companies, bands, etc., and creating a page brings you closer to your customers, fans and followers on Google+. In this tutorial we are going to teach you the steps involved in creating a Google Plus brand pages. So lets go ahead and go through the different steps involved.
In this tutorial we will alongside create our Hitherto Web Labs fan page.
Step 1: Filling Up the Basic Info
Visit this link below to start with creating your Google+ Page
Start Creating your Google+ Page
Then select what category of page you want to create in the left hand side of the page as shown in the below figure
Step 1: Select Category
then fill up the Information page with the details of Page Name, Website (optional), Category and Page Visibility and agree to terms and conditions and then click the CREATE PAGE button.
Step 1: Fill in the Google Plus Page Information
Step 2: Customize your page’s public profile
In this page you can add more details to help people find your page
Please enter the TAGLINE (The 10 words that describe your page best) and upload a Profile Photo
Step 2: Enter Tagline for Your Google+ Page
Now click on Change Profile Photo button to upload a profile photo for your Google+ Page
After uploading the photo you can do actions like Rotating The Image or Cropping The Image, for more customizing option like playing with playing with colors, exposure, sharpness and other effects click on Creative Kit button.
Step 2: Customize Profile Photo
You can observe that the profile photo we have used is the one we have used for Facebook Page(We are still in the construction of a creative a Facebook Page for our blog) Profile Photo, hence we used the crop tool to crop the image.
After getting the right affect with the profile picture click on Set As Profile Photo button.
Click Continue.
Step 3: Tell everyone about your new page
Now Your Google Plus Brand Page is ready, Yes, In just three steps!!
Now Go ahead and share with everyone about your Google Plus Brand Page.
Step 3: Share Your Google+ Brand Page
Now your Google+ Brand Page is ready for your customers, fans and everyone…..
Take a look at the Google+ Brand Page we created for our blog and do add our page to your circles
Visit hitherto Web Labs on Google+
Do create your own Google+ pages and let us know by posting your comments belowr.
You can also add a badge to your own blog or website to advertise your Google+ brand pages as given below:
After you create the Fan page you will get the link to creating this type of badges, it is also stated that other badge designs are also coming soon.
Hope this tutorial was useful for you, Stay updated with all the tutorials of our blog by:
- Subscribing to RSS feeds
- Subscribing by email
- Subscribing by SMS(currently limited to Indian Users)
Want to request a new tutorial, then please Contact me right-away or leave a comment below.
We promise to respond to all tutorial requests
Creating Top Fixed Menu Bar With CSS3 Buttons and Dropdown Found in Gmail
Posted by Praveen Gowda I V in Gmail, Google, Google Plus, Tutorials, Web Design on October 26, 2011
Our previous tutorial was on creating the top fixed black menu bar with CSS drop down menu found in Google products, and in this tutorial I would like to teach creating the fixed menu bar with CSS3 buttons found in Gmail along with the dropdown which contains buttons for common functions like Archive, Spam, Delete, Mark as Important, Mark as not Important, Move to, Labels, Refresh and many more functions which is displayed right above the message list.
If you haven’t observed the new CSS3 button designs on this menu bar then it is because you are still struck with an old theme which does not support the new buttons.
If you want to have a look at these new menu bar with the CSS3 buttons that we are going to design in this tutorial, please change your theme to Preview or Preview(Dense).
Or else the below image will give you a better idea what we are going to be left at the end of this tutorial.
Fixed bar with CSS buttons and dropdown found in Gmail
Gmail uses JavaScript for the dropdown which is displayed when the button is clicked but I am not using JavaScript instead CSS is used and the dropdown is displayed on hovering over the buttons, but if you want the actual JavaScript dropdown found in Gmail you can easily modify the source code.
Goals of this this tutorial:
- Make the bar static so it remains fixed even when the page is scrolled
- create the buttons exactly the way they look in Gmail
- getting the same style of dropdown menu as in Gmail
Go forward have a look at the live demo and download the source code and use it anyway you like it.
|
DOWNLOAD |
LIVE DEMO |
Source Code
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" href="style.css" type="text/css"/> <title>Live Demo Of Creating Top Fixed Menu Bar With CSS3 Buttons Found in Gmail | http://blog.geotitles.com</title> </head> <body> <div class="container"> <div id="content"> <div class="menu"> <ul> <li><a class="check dropdown" href="#"><input type="checkbox"/><span class="arrow"></span></a> <ul class="width-1"> <li><a href="#">All</a></li> <li><a href="#">None</a></li> <li><a href="#">Read</a></li> <li><a href="#">Unread</a></li> <li><a href="#">Starred</a></li> <li><a href="#">Unstarred</a></li> </ul> </li> <li><a class="left" href="#">Archive</a> </li> <li><a class="middle" href="#">Spam</a></li> <li><a class="right" href="#">Delete</a> </li> <li><a class="left dropdown" href="#">Move to<span class="arrow"></span></a> <ul class="width-2"> <li><a href="#">Personal</a></li> <li><a href="#">Work</a></li> <li><a href="#">Travel</a></li> <li><a href="#">Insurance</a></li> <li><a href="#">Insurance/Vehicle</a></li> <li><a href="#">Receipts</a></li> <li><a href="#">Educational</a></li> <li><a href="#">Spam</a></li> </ul> </li> <li><a class="right dropdown" href="#">Labels<span class="arrow"></span></a> <ul class="width-2"> <li><a href="#">Personal</a></li> <li><a href="#">Work</a></li> <li><a href="#">Travel</a></li> <li><a href="#">Insurance</a></li> <li><a href="#">Insurance/Vehicle</a></li> <li><a href="#">Receipts</a></li> <li><a href="#">Educational</a></li> </ul> </li> <li><a class="dropdown" href="#">More<span class="arrow"></span></a> <ul class="width-3"> <li><a href="#">Mark all as read</a></li> <li><a href="#">Mark as read</a></li> <li><a href="#">Mark as unread</a></li> <li><a href="#">Add to tasks</a></li> <li><a href="#">Add star</a></li> <li><a href="#">Remove star</a></li> <li><a href="#">Create event</a></li> <li><a href="#">Filter messages like these</a></li> <li><a href="#">Mute</a></li> <li><a href="#">Unmute</a></li> </ul> </li> <li><a class="refresh" href="#"> </a></li> <li><a class="num"><b>1</b>–<b>50</b> of <b>52</b></a></li> <li><a class="previous" href="#"> </a></li> <li><a class="next" href="#"> </a></li> </ul> </div> <!--end menu--> </div> <!--end content--> </div> <!--end container--> </div> </body> </html>
CSS
* {
margin:0;
padding:0;
}
.menu {
position:fixed;
height:30px;
font-size:14px;
color:#FFF;
margin:0 auto;
margin-top:20px;
margin-left:20px;
}
.menu ul {
list-style:none;
color:#FFF;
width:auto;
}
.menu ul li {
float:left;
position: relative;
}
.menu ul li a {
color:#666;
font:bold 75% arial,sans-serif;
text-decoration:none;
padding:7px 12px;
position:relative;
display:inline-block;
/*Background*/
background:#f3f3f3;
background:-webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
/*linear-gradient*/
background:-webkit-gradient(linear,left top,left bottom,from(from(#F5F5F5)),to(to(#F1F1F1)));
background:-webkit-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background:-moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background:-o-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background:linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
border:solid 1px #dcdcdc;
/*border-radius*/
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
margin-right:10px;
}
.menu ul li a:hover {
color:#333;
border-color:#999;
/*box-shadow*/
-webkit-box-shadow:0 2px 0 rgba(0,0,0,0.2) -webkit-box-shadow:0 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow:0 2px 0 rgba(0,0,0,0.2) -moz-box-shadow:0 2px 5px rgba(0,0,0,0.2);
box-shadow:0 2px 0 rgba(0,0,0,0.2) box-shadow:0 2px 5px rgba(0,0,0,0.2);
}
/* styling for the left buttons(buttons which are joined)*/
.menu ul li a.left {
-webkit-border-top-right-radius:0;
-moz-border-radius-topright:0;
border-top-right-radius:0;
-webkit-border-bottom-right-radius:0;
-moz-border-radius-bottomright:0;
border-bottom-right-radius:0;
margin: 0;
}
/* styling for the middle buttons(buttons which are joined)*/
.menu ul li a.middle {
/*border-radius*/
-webkit-border-radius:0;
-moz-border-radius:0;
border-radius:0;
border-left:solid 1px #f3f3f3;
margin:0;
border-left:solid 1px rgba(255,255,255,0);
}
.menu ul li a.middle:hover,.menu ul li a.right:hover {
border-left: solid 1px #999;
}
/* styling for the right buttons(buttons which are joined)*/
.menu ul li a.right {
-webkit-border-top-left-radius:0;
-moz-border-radius-topleft:0;
border-top-left-radius:0;
-webkit-border-bottom-left-radius:0;
-moz-border-radius-bottomleft:0;
border-bottom-left-radius:0;
border-left:solid 1px #f3f3f3;
border-left: solid 1px rgba(255,255,255,0);
}
/*style for the arrow pointing downward*/
.arrow {
border:thick;
border-color:#777777 transparent white;
border-style:solid dashed dashed;
margin-left:5px;
position:relative;
top: 10px;
}
/* button with checkbox*/
.menu ul li a.check {
padding:6px 6px 7px 12px;
position:relative;
display:inline-block;
margin-right: 10px;
}
/*refresh button*/
.menu ul li a.refresh {
background:url(images/refresh.png) 10px 4px no-repeat #f3f3f3;
width: 17px;
}
/* previous button*/
.menu ul li a.previous {
background:url(images/previous.png) 10px 4px no-repeat #f3f3f3;
width: 17px;
}
/*next button */
.menu ul li a.next {
background:url(images/next.png) 10px 4px no-repeat #f3f3f3;
width: 17px;
}
/*showing the number of emails in inbox(eg:1–50 of 52)*/
.menu ul li a.num {
color:#000;
font:normal 80% arial,sans-serif;
text-decoration:none;
padding:7px 12px;
position:relative;
display:inline-block;
text-shadow:none;
background:#FFF;
margin-right:10px;
border: none;
}
/* hide the dropdown*/
.menu ul li ul {
display: none;
}
/*changing the background of the button(which has a dropdown) to creyish gradient when we hover the mouse over it*/
.menu ul li:hover a.dropdown {
background:#888888;
/* Old browsers */
background:-moz-linear-gradient(top,#888888 0%,#8e8e8e 43%,#7a7a7a 45%,#989898 100%);
/* FF3.6+*/
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#888888),color-stop(43%,#8e8e8e),color-stop(45%,#7a7a7a),color-stop(100%,#989898));
/* Chrome,Safari4+*/
background:-webkit-linear-gradient(top,#888888 0%,#8e8e8e 43%,#7a7a7a 45%,#989898 100%);
/* Chrome10+,Safari5.1+*/
background:-o-linear-gradient(top,#888888 0%,#8e8e8e 43%,#7a7a7a 45%,#989898 100%);
/* Opera 11.10+*/
background:-ms-linear-gradient(top,#888888 0%,#8e8e8e 43%,#7a7a7a 45%,#989898 100%);
/* IE10+*/
background:linear-gradient(top,#888888 0%,#8e8e8e 43%,#7a7a7a 45%,#989898 100%);
/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888',endColorstr='#989898',GradientType=0 );
/* IE6-9 */ border:1px solid #989898;
color:#000;
}
.menu ul li:hover ul {
display:block;
position:absolute;
margin-left:0px;
margin-top:-1px;
-webkit-box-shadow:0 4px 10px #8b8b8b;
-moz-box-shadow:0 4px 10px #8b8b8b;
box-shadow:0 4px 10px #8b8b8b;
padding:1px;
}
.menu ul li:hover ul li a {
display:block;
color:#000000;
background:#ffffff;
border:none;
margin-right:1px;
}
.menu ul li:hover ul li a:hover {
background: #EEEEEE;
}
/*the first item in dropdown must not have a border on top */
.menu ul li ul li:first-child a {
border-top: none;
}
/* now let us define the widths of various dropdown*/
.width-1 li a {
width:55px;
}
.width-2 li a {
width: 125px;
}
.width-3 li a {
width: 165px;
}
Hope this tutorial was helpful for you and has helped you learning something new, next week I will be back with another interesting web design tutorial, until then please subscribe with our blog to remain updated with all the new tutorials and articles:
- Subscribing to RSS feeds
- Subscribing by email
- Subscribing by SMS(currently limited to Indian Users)
Want to request a new tutorial, then please Contact me right-away or leave a comment below.
promise to respond to everyone who asks for support or new tutorials.
Recent Comments