52WebDesign.com

Free Under Construction Template

Admin — Sat, 06 Aug 2011 12:08:58 +0000

I designed this Under Construction template for my friend website, but I will love to share this template for free.

Preview

I have used a free icon by VistaICO.

Demo and Download Under Construction Template

Demo || Download

How to check backlinks in Bing

Admin — Fri, 29 Apr 2011 07:42:27 +0000

What are Backlinks: Backlinks are incoming links to a website or web page from other websites. Its important for a website considering SEO. Good number of backlinks to your website can give your site better search position in search engines like Google / Bing.

If you want to check backlinks of your website in Bing.com here is how you can do.
Open Bing.com
In search box type inbody:52webdesign.com
Change url of your site in above line

The search result will show all backlinks to your site indexed by bing.com

How to add fixed Twitter and Facebook icon

Admin — Thu, 28 Apr 2011 18:57:34 +0000

You have seen many sites having fixed social icons in left or right side of the website. If you scroll the webpage up / down, social icons will remain at a fixed position. This is a good practice if you want to give more exposure to your social profile links like Twitter profile, Facebook profile etc.

This is possible using CSS. In this tutorial I will show you how to add fixed Twitter and Facebook icon on a website. So, first get Twitter and Facebook icon. Save the icons as twitter.png and facebook.png in images folder.
Step 1
Let’s first do the HTML part. Copy paste below code just after

In above code, you should change twitter and facebook link to your own profile link.

Step 2
Now we will do CSS part. To make social icons at fixed position, we will add fixed position property to IDs used for these icons.

img{
border: 0;
}
#twitter { position: fixed;  top: 200px; left:0;}
#facebook { position: fixed;  top: 290px; left:0;}

Done!!!

Check Live Demo

This method can also be used for WordPress, Drupal etc.

10 Best free code editor for Windows

Admin — Wed, 27 Apr 2011 19:03:58 +0000

An code editor is a text editor similar like notepad, but more advanced and have many good features. It makes the editing of codes like HTML, CSS, PHP etc. much simpler. Code editor display code syntax in a separate color to make coding / editing work lots easier.

Below I have listed few very good and free code editor that support Windows platform (XP / Vista / Windows 7).

Notepad ++
Notepad++ is a free (as in “free speech” and also as in “free beer”) source code editor and Notepad replacement that supports several languages. Running in the MS Windows environment, its use is governed by GPL License.
Download
Komodo Edit

Komodo Edit is a fast, smart, free and open-source code editor. Switching your trusty code editor is hard, but give Komodo Edit (or its big brother Komodo IDE) a try: it’ll be worth your while.
Download
HTML-Kit

The best of the Web starts with a HTML page. HTML-Kit Tools provides tools for creating great web pages and scripts, but also stays out of your way so that you have full control over your code.
Download
scriptly
Webocton – Scriptly is an extensive freeware code editor for Windows for writing HTML and programming with PHP.
In addition to the comprehensive search and replace facility, the program features syntax highlighting for several script languages and file types. Code snippets and complex tables can be added quickly and easily.
Download
HateML
HateML Pro is freeware product and a powerful PHP IDE with support for XHTML and CSS for both professional and novice users alike. Designed to help accelerate the process of editing,debugging web applications, php scripts and simple XHTML sites as well.
Download
PSPad
PSPad is a freeware programmer’s editor for Microsoft Windows operating systems. work with plain text – the editor has a wealth of formatting functions, including a spell checker. PSPad is ready to work immediately without requiring customization. The editor supports many file types and languages, with syntax highlighting. There are macros, clip files and templates to automate repetative tasks. Integrated HEX Editor, Project support, FTP Client, Macro Recorder, File Search/Replace, Code Explorer, Code page conversion… these are just some of the many features that PSPad offers.
Download
Caditor
Caditor is a portable tabbed text editor featuring encryption, syntax highlighting, autocomplete, line numbering and a functional plugin system.
Download
GNU Emacs
GNU Emacs is an extensible, customizable text editor. It support Content-sensitive editing modes, including syntax coloring, for a variety of file types including plain text, source code, and HTML. Highly customizable, using Emacs Lisp code or a graphical interface.
Download
Crimson Editor
Crimson Editor is a professional source code editor for Windows. While it can serve as a good replacement for Notepad, it also offers many powerful features for programming languages such as HTML, C/C++, Perl and Java.
Download
ConTEXT
ConTEXT is a small, fast and powerful freeware text editor, developed to serve as a secondary tool for software developers.
Download

WordPress 3.1.2 released with security update

Admin — Wed, 27 Apr 2011 17:36:41 +0000

All WordPress must update their WordPress to version 3.1.2 as earlier version have some vulnerability. According to WordPress:

We suggest you update to 3.1.2 promptly, especially if you allow users to register as contributors or if you have untrusted users. This release also fixes a few bugs that missed the boat for version 3.1.1

Upgrading WordPress is very easy and should take only 2-5 minutes. Login in WordPress admin panel and Click Updates. Now Click Update Automatically.

Please make a backup before you upgrade to be on safe side.

Tooltip effect with CSS3

Admin — Sun, 24 Apr 2011 18:40:31 +0000

What is tool tip: Tooltip is a small popup box which opens when you hover any element. This popup box gives some brief information about that element. Thus ToolTip improves user interface of the website.

There are many good jQuery and Ajax based Tooltip effects, but let’s do same thing with the help of CSS3.

In this tutorial, I will add ToolTip effect to Twitter and Facebook social icons.

Step 1: HTML part

First let’s do HTML part. Get Twitter and Facebook icon, save the icon in images folder. Now use below code.

Step 2: CSS part

a{
text-decoration: none;
}
img{
border: none;
}

.tooltip{
float:left;
margin-right:10px;
width: 64px;
}

.tooltip:hover{

}

.tooltip:before{

}

.tooltip:hover::before{
content:attr(title);
width:180px;
display:block;
position:relative;
background:#747474;
border:1px solid #000000;
padding:6px;
margin: -33px 0 0 -7px;
border-radius: 6px;
color: #fff;
}

We are done !!

Demo

Check Live Demo

Embossed button in CSS3

Admin — Sun, 24 Apr 2011 17:03:18 +0000

This is a simple CSS tutorial for making embossed button. No image is required.
First let’s do HTML part.

Click Me

Now let’s do CSS part.

#button{
background: #838383;
border: 1px solid #565656;
border-radius: 10px;
cursor: pointer;
height: 35px;
text-align:center;
width: 150px;
}

.text{
font: bold 22px arial;
color: #000;
text-shadow: 1px 1px 1px #d9d8d8;
margin-top: 4px;
}

And our button will look like this.

Make Stylish Buttons with CSS3

Admin — Sun, 24 Apr 2011 15:06:30 +0000

Lets make some cool stylish buttons in CSS3.
So, before we come to CSS part, let’s code a simple button in html.

Now we let’s add some CSS styles to make this button modern.
Button one: Simple rectangle button

.button{
font-size: 16px;
background-color:#d7d7d7;
border:1px solid #b8b8b8;
padding:5px 10px;
}