Archive for category Tutorials
Coming Soon - Premium WordPress Theme Giveaway To All Our Email Subscribers
Wishing everyone a Merry Christmas and A Happy New Year 2013
Posted by Praveen Gowda I V in General, Others on December 25, 2012
Just a quick post to wish you all a Merry Christmas and A Happy New Year 2013.
I would like to thank you all for visiting our Web Development Tutorial blog and we hope you enjoyed each of the tutorials we have published in the last year.
Thanks for making this year great and we wish you all have a great year ahead in 2013.
We all are having a great time over the holidays and we hope you all are having a great one too!!.
This new year we are coming back with lots of new tutorials and with a completely different look!
May your holidays be blessed and the year 2013 be plentiful.
So please go and have a wonderful time 
New updates coming soon for all tutorials
Posted by Praveen Gowda I V in Articles, General, Web Design on July 13, 2012
It has been quite some time since we announced that we will be back with a redesign for our blog, but the reason that it is so much long is because we are not only redesigning but also updating each and every tutorial, adding new features.
New Updates for all tutorials
So we thought we will let you know what is coming up in a few days, so here is the list of changelog for all the tutorial updates which will be released soon:
- Google Top bar with Drop down menu
- Multi level drop down menu support
- Fixing the issues with arrow and other elements when used on dark backgrounds
- Gmail like Fixed CSS3 Menu
- Using jQuery instead of CSS for dropdown menu
- Compatibility in old browsers
- Facebook like notification box
- Rewriting the jQuery code to support multiple notifications to be displayed at the same time
- Clean the HTML code to make it much lighter
- New feature to display notifications whenever there is a addition to database
- and Much more …
- HTML5 & Ajax Contact Form
- We will not update this tutorial but a complete new contact form tutorial will be made which we promise to be one of the best HTML5 and CSS3 forms tutorials you would have ever come across
- New tutorial will be completely HTML5 with more fields like detecting location and file upload and a lot more coming soon.
- PHP login script with advanced features
- We have some huge plans for this one but immediately we will publish an update which will fix the php short tag problem as well as the depreciated function errors which many of our users are facing.This update has arrived and the download link has been updated, we request everyone who had problems with the previous version to download the new files
- The next major update will include
- User registration and log in using Facebook and Twitter (others will be coming soon)
- Email confirmation for newly registered users
- Support for the Admin to Activate newly registered users
- New look and feel to the login system using HTML5 and CSS3
- and much more coming soon
Hope you all will find the updates to be useful, the updates are getting delayed due to some personal projects, hence I request your patience and I will make sure that I start rolling updates as soon as possible & also we have a huge range of new useful tutorials in the draft which will be published soon.
We are also working on lot more educational sites and we will let you know as soon as we are ready to launch, until then have a great time.
Thanks,
Praveen
Business Cards Giveaway from Print Runner
Posted by Praveen Gowda I V in Giveaways, Web Design on June 14, 2012
We are back with another giveaway, and this time it is 250 business cards giveaway from PrintRunner.
PrintRunner.com was established with little more than a small press and a dream. Ten years later the company became one of the foremost quality printers in Southern California. Their commitment to provide the best value and high quality full color printing at affordable price made the company grow. PrintRunner is a full service high quality printing company located in Chatsworth, California.
Business Cards Giveaway
Details of the giveaway:
Business Card Size and Style Business Cards: 2×3.5 (Standard)
Quantity: 250 Colors: 4/4 Color Both Sides
Paper: 14 pt. UV Coating on Front, 14 pt. UV Coating on both sides,
Proof: NONE
Rounded Corners: NO
Ready To Ship In: 3 Business Days
*Giveaway is open Worldwide but free shipping is only available for US citizens and outside US winners must shoulder the shipping charges.
Ages: 18 years old and above.
PrintRunner is one of the best online printing companies and we definitely recommend to try their online business card printing through their online printing services.
The giveaway has ended and the winners are announced in the widget below.
If you were not the lucky one, don’t worry, since we will be back with more giveaways very soon
a Rafflecopter giveaway
Thank you to PrintRunner for providing us this giveaway, I will receive a set of business cards for hosting this.
3 Copies Of Standard WordPress Theme Giveaway From Themefuse
Posted by Praveen Gowda I V in Articles, General, Giveaways, Web Design on March 6, 2012
Themefuse who are known for their Stunning Original WordPress Themes have agreed to giveaway 3 copies of their Standard WordPress Themes to three lucky readers of our blog.
Themefuse offers stunning WordPress themes which would suit everyone’s need and If lucky you could go away with a standard theme license and you will have the option to choose any of their theme from their theme shop.
Below are a some of our favorites from each category, visit themefuse to browse through all of their themes.
VIDEOGRID
Showcase your lifetime work or blog like you never blogged before with this insanely great multimedia WordPress theme.
Sportedge
The versatile SportEdge Magazine is the best Sport WordPress theme we could have come up with, that’s a given! See for yourself.
Medica
Probably the best WordPress theme when it comes to Doctor’s websites, Health Clinics, Dentist’s Offices or anything medical related.
Writer
Writer has all it takes to be a really great option for bloggers that want a stylish and premium look for their personal WordPress blog.
Brand Crafters
The ultimate corporate WordPress theme that will guarantee to make your business website stand out from the crowd.
MobilityApp
A theme best suited for smartphone developers that need to promote their iPad, iPhone or Android mobile applications.
Qlassik
Be it your corporate business website or your personal web design portfolio, Qlassik will definitely deliver in both situations and more.
Lifestyle
An online magazine oriented WP theme that also fits perfectly as a news, fashion or even a celebrity & gossip blog.
Welcome Inn
If you need a hotel oriented wp theme, you have to try our latest project. It comes in 2 additional flavors: ski resort and spa. Enjoy!
Freshfolio
An original, awesome and efficient way for showcasing photography, design, illustration portfolios’ or even paintings and art.
Envision
Try our most complex wp theme to date. It has shortcodes, 5 different sliders and a bunch of awesome features. You name it, we’ve got it!
WebStudio
This theme can be used to showcase photography, illustration, design, paintings or art, in a simple, awesome and efficient way.
Exquisite Works
WP theme designed for someone who needs a classy and stylish presence on the web for their corporate website.
Clean Classy Corporate
Be it web products, cloud computing or SaaS, C3 has a clean corporate feel to it which caters to the new breed of web entrepreneurs.
Art Gallery
Showcase your art, photography, design work or even print. If you think of your work as art, this is the wp theme for you.
Creative Juice
We’ve crafted this wp theme with a showcase portfolio in mind. It can be easily used by web agencies / studios or small design firms.
SiliconApp
We’ve built this wp theme with a software application wordpress template in mind, be it a mobile or a standard desktop product.
Bon Apetit
This wp theme is destined for a restaurant or coffee shop website but it can be also used for a pastry, catering or recipes portal.
WINNERS
The Giveaway is now over and the winners are announced below in the widget.
Thanks for everyone who particiapted.
If you didn’t win , don’t worry we will be back very soon with some more awesome giveaways.
Do subscribe to your web development tutorials and more …
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.
Recent Comments