Naeem's blog - Web designing stuff

How To Make a Drop Shadow Changer With jQuery and CSS3

Ahmed Hussein — Wed, 24 Feb 2010 14:19:37 +0000

This is a Guest post by Ahmed Hussein, If you want to contribute feel free to contact me.

Today we have a very cool and step-by-step tutorial on how to make a CSS3 drop shadow changer using Ajax and little bit of PHP/MySQL. You may ask yourself why I’m using PHP/MySQL in a CSS3 tutorial? and the answer is simple, to save the settings and fetch again.

Demo
The Animation will only be viewable on Google Chrome and Safari 4+ because its based on WebKit.

What’s WebKit?

WebKit is an impressive open source web browser engine. WebKit is also the name of the Mac OS X system framework version of the engine that’s used by Safari, Dashboard, Mail, and many other OS X applications. WebKit’s HTML and JavaScript code began as a branch of the KHML and KJS libraries from KDE. And it is currently supported by Google Chrome and Safari4+.

Here’s an image about what we will have at the end of this tutorial:

Now let’s begin by building the main layout:

The Body Styling

body{ margin:0; padding:0; }

We did nothing except, set the padding as zero as well as the margin.

The Success Message Styling

#success{ background: #c8ffb4; width:500px; height:50px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; font-weight:bold; padding-left:50px; font-family:Arial, Helvetica, sans-serif; color:#333; padding-top:25px; text-align:left; }

What we did up there is first, change the background to light green then, the width and the height next, the border radius and this is only available in CSS3, and basically what it does, that it’s making rounded corners, so if you’re going to increase the value of the radius, you will get more rounded corners. after that, nothing too fancy just basic stuff like font and padding.

The Saving Button

#save{ background: url(../images/save.png) no-repeat; height:60px; width: 171px; border:none; cursor:pointer; cursor:hand; outline:none; }

First, We set the background, height, width and border Then, we set the cursor to pointer to let the mouse change when it’s over the button, next set the cursor again to hand to change the mouse to hand icon. After that, change the outline to none, because a lot of browsers shows outlines on buttons.

The HTML5 Work

Drop Shadow Changer
























Posission: 

  


Blur: 

  
















Saving...

Here’s the funny part, First i start the HTML page as HTML5 page by adding the !DOCTYPE html tag, then inside the head you will see two scripts tags, one of them is for including the jQuery and the other one is for including the main JavaScirpt file that we will made. And I included the style file we’ve made earlier.

Now take a look inside the body tag, Fist thing you will see is the success message div and we will hide this using jQuery, Next take a break line and you will see the image div that we will do all the work on just give it image as id to apply the style also we will need the id in the jQuery work. after that, take a break line and you will see a normal table but look closer you will find the magic.

First, we will ad a little td with one word inside Position underneath it you going to find normal html input but the type is different this time and it called Range and that gives you a slider controller with numeric value from -0 to 100 as default. So we will give this range input an id as slide because we will need this id in the JavaScript work. Now make another td and put a little div inside it and give it “nums” as id actually i don’t know why i called it like that but it’s okay, and inside this div we will but the numeric value of the position range input, then close the first TR.

Next, start another TR and make couple of TDs and inside the first one you going to see Blur because the CSS3 drop shadow is very customizable so you can adjust the position, blur and even the color. After that, make another td and inside it we will make another “Range/Slider” input and give it blure as id and i know it’s blur not “blure” . Then, do the same as the last time by making a little div and give it an id of blures. Close the TR and The whole table and let’s do something new.

Now make a little div and give it load as id inside this div we will add loading image that i created at http://www.ajaxload.info , and “saving” word. and we will hide this div using jQuery and will show it when we press save.

Now just add normal button input but give it save as id to apply the style and we will need this in the JavaScript, too.
Now after doing all of this you’re done with the main layout. Now Let’s do the JavaScript work

The JavaScript Work

//----------------------------------------+ //Code by Ahmed Hussein For CssReflex.com | //Follow on Tiwtter @Valodes | //Check Blog @ http://www.zingyso.com/b | //----------------------------------------+ $(document).ready(function(){ var pos = $("#slide").val(); var blu = $("#blure").val(); $('#load').hide(); $("div#nums").html(pos); $("div#blures").html(blu); $("#success").hide(); $("#image").css({'-webkit-box-shadow': pos+"px "+pos+"px "+blu+"px "+"#666"}); $("#slide").change(function(){ var num = $("#slide").val(); var blu = $("#blure").val(); $("div#nums").html(num); $("#image").css({'-webkit-box-shadow': num+"px "+num+"px "+blu+"px "+"#666"}); }); $("#blure").change(function(){ var num = $("#slide").val(); var blu = $("#blure").val(); $("div#blures").html(blu); $("#image").css({'-webkit-box-shadow': num+"px "+num+"px "+blu+"px "+"#666"}); }); $('#save').click(function(){ var num = $("#slide").val(); var blu = $("#blure").val(); $.ajax({ url: "action.php", type: "POST", data: {pos: $("#slide").val(), blu: blu = $("#blure").val()}, success: function(data){ $("#success").html(data); $("#success").slideDown(400).delay(2000).slideUp(400); } }); }); $("#load").ajaxStart(function(){ $(this).show(); }); $("#load").ajaxSuccess(function(){ $(this).hide(); }); });

Let me explain what we are doing here, first of all this is jQuery not pure JavaScirpt. Now to start jQuery code you may do this inside “script” or inside normal .js page and this’s what i’m doing here.
At the start of any jQuery code you have to put the following code:

$(document).ready(function(){//Your code here });

replace “//your code here” with your own code, now:

var pos = $("#slide").val(); var blu = $("#blure").val();

Here we made two variables the first one “pos” = to the slide value, “#slide” is like document.getElementById but we replace all of this with just a little hash tag “#”. the second variable blu = to the blure val. just to know “.val()” is returning the value of an element.
$("div#nums").html(pos); $("div#blures").html(blu);

Now the first line here we changing what’s inside the div nums to html contents using the .html() function which is showing html elements normal without changing them to text. But you can show the contents as text by using .text() function.

$("#success").hide();

Now we just hid the success message using .hide() function.

$("#image").css({'-webkit-box-shadow': pos+"px "+pos+"px "+blu+"px "+"#666"});

Now i’m applying a css3 styling using .css function, and here’s how it works:
.css({“attributes”:”value”, “attributes2″:”value”, …}); so it’s just normal css but inside jQuery. But what i’m actually doing is i’m applying CSS3 drop shadow to the image using the default pos and blu values and they’re 50, so to do that i’m using the variables inside the function and i can do that just like that:
The normal css will be ‘-webkit-box-shadow’:'50px’, but we want to use the variables’ values so we will do it by adding plus signs between the words to separate them, i mean to make this work you have to write it like that:

css({'-webkit-box-shadow': variable+"normal text"+variable+"normal text"+variable+"normal text"})

So we put the normal text inside quote and separate between the different words and variables by plus sign.

The following code will be executed once you move the position slider:

$("#slide").change(function(){ var num = $("#slide").val(); var blu = $("#blure").val(); $("div#nums").html(num); $("#image").css({'-webkit-box-shadow': num+"px "+num+"px "+blu+"px "+"#666"}); });

Now by using .change() we saying if the value of this element changed do the following, so if the value of slide changed the code inside .change() will be executed.
inside the .change() we redefining the variables again, then, changeing the nums div content to make it change when you move the slider.
After that we apply css3 drop shadow to the image with the new positioning,

num+"px "+num+"px "+blu+"px "+"#666"

the first num+”px” and the second one just repositioning the shadow and the blu+”px ” is still the same and it points to the blur value and finally the #666 is the shadow color.

The following code will be executed once you move the blur slider:

$("#blure").change(function(){ var num = $("#slide").val(); var blu = $("#blure").val(); $("div#blures").html(blu); $("#image").css({'-webkit-box-shadow': num+"px "+num+"px "+blu+"px "+"#666"}); });

As you can see i’m doing the same thing but this time with the blure slider and the blures div.

The following code will be executed once you hit the save button:

$('#save').click(function(){ var num = $("#slide").val(); var blu = $("#blure").val(); $.ajax({ url: "action.php", type: "POST", data: {pos: $("#slide").val(), blu: blu = $("#blure").val()}, success: function(data){ $("#success").html(data); $("#success").slideDown(400).delay(2000).slideUp(400); } }); });

First, the .click() function is very simple it says, if you click on the element the following code will be executed.
Inside the .click() we redefining the variables again, then, starting ajax request using $.ajax({}) so let me explain this:
using $.ajax() you will be able to send HTTP request without reloading the page, you can send both POST or GET requests to any type is files PHP, ASP, etc…

And it work just like this:

url: “your action file”,

type: “post or get”,

data: {name: variable or "text value", name2: variable or "text value", name3: variable or "text value"},

success: could be function or alert or whatever you want, this will be shown in case the request is succeeded.

function(data){ $("#success").html(data); $("#success").slideDown(400).delay(2000).slideUp(400);}

This function shows the success message by slideDown then delay 2 seconds after that slideUp.

$("#load").ajaxStart(function(){ $(this).show(); }); $("#load").ajaxSuccess(function(){ $(this).hide(); });

Now we will show the load div once we send the request then hide it again once the request is done, using the $.ajaxStart() we will say when the request is sent show $(this) while $(this) stand for $(“load”). and using the $.ajaxSuccess() we will say when the request is send success message hide $(this) while $(this) stand for $(“load”).
And that’s it this is everything JavaScript

The PHP Work

The full code:
//---------------------------------------- //Code by Ahmed Hussein For CssReflex.com | //Follow on Tiwtter @Valodes | //Check Blog @ http://www.zingyso.com/b | //---------------------------------------- //Database connect $connect = mysql_connect("localhost", "root", "") or die(mysql_error()); //Connection user and pass $select = mysql_select_db("shadow", $connect); //Selecting the Database //Set Variables $pos = $_POST['pos']; //Position Value $blu = $_POST['blu']; //Blur Value //Insert data into database $Query = "INSERT INTO shad_set (`position`,`blur`) VALUES('".$pos."', '".$blu."')"; //The SQL Query $Insert= mysql_query($Query) or die(mysql_error()); //Insert to database echo "The new settings are saved!"; ?>

Explanation

First anything starts with “//” is a comment , and anything starts with “$” is a variable.
//Database connect $connect = mysql_connect("localhost", "root", "") or die(mysql_error()); //Connection user and pass $select = mysql_select_db("shadow", $connect); //Selecting the Database

mysql_connect is the database connection function and it’s separated to 3 parts and sometimes 4, (“Your Host — Usually localhost”, “Database UserName”, “Database Password”, “Database Port”)

mysql_select_db is the the database selector function and it’s separated to 2 parts, (“Database Name”, “Database Connection Link And this is the connecting variable”)

Now before i continue explaining the rest of the code let me show you how to make MySQL Database.

The MySQL Database

Go to your phpmyadmin and do the follow the instructions below:

Click save and you done, but let me explain, something the AUTO_INCREMENT for the id is to let it increase by itself without having to insert a value for it everytime.

Let’s continue:
$pos = $_POST['pos']; //Position Value $blu = $_POST['blu']; //Blur Value inside
Here you can see two variables first one $pos = to the post pos from the ajax request and the other one is $blu = to the post blu from the ajax request.
$Query = "INSERT INTO shad_set (`position`,`blur`) VALUES('".$pos."', '".$blu."')"; //The SQL Query $Insert= mysql_query($Query) or die(mysql_error()); //Insert to database echo "The new settings are saved!";
Here you can see two variables, too. the first one $Query = to the SQL query and inside it we saying ” insert the following data inside shade_set table into fields `position` and `blur` and the actual values are the variables $pos for position and $blu for blur”

Then using mysql_query() function we execute the $Query… Next after all of this print or echo message and this is the success message “The new settings are saved!”…

but to fetch the saved settings from the database you can do it this way:
//---------------------------------------- //Code by Ahmed Hussein For CssReflex.com | //Follow on Tiwtter @Valodes | //Check Blog @ http://www.zingyso.com/b | //---------------------------------------- //Database connect $connect = mysql_connect("localhost", "root", "") or die(mysql_error()); //Connection user and pass $select = mysql_select_db("shadow", $connect); //Selecting the Database //Insert data into database $Query = "SELECT * FROM shad_set WHERE id = '1'"; //The SQL Query $Insert= mysql_query($Query) or die(mysql_error()); //Insert to database $res = mysql_fetch_array($insert); $Pos = $res['pos']; $Blu = $res['blu']; mysql_close($connect); ?>
It’s the same thing about database connect, but the query is changed now and we are saying select all data from shad_set where the id field = 1 or whatever id you want to fetch.
Then $res = mysql_fetch_array($insert) which transform data from database to array.
$res['pos'] = the pos from the database and same for $res['blu'];

Now we’ve done everything… So now you have the drop down shadow changer with php/mysql saving option . Hope you enjoyed the tutorial. If you you have any questions, feel free to ask by commenting below.

10+ Rare WordPress Theme Options Page Tutorials To Get You Started

Naeem Noor — Mon, 15 Feb 2010 15:08:59 +0000

In this post I am going to present you roundup of Rare WordPress Theme Options Page Tutorials. Theme Options Page have become a necessity in every WordPress themes free and premium, and are very user friendly and self explanatory to set up. With the presence of the Options Page the user don’t have to edit the code manually. These are the only tutorials I could find. I hope you find these tutorials valuable. Subscribe to the feed if you would like to be informed for the latest posts.

You may also be interested in one of these older posts
Awesome And Free Fonts For Web Designers
13 Magnificent Free Wordpress Portfolio Themes
13 Free Professional Looking Wordpress Magazine Style/CMS Themes
25 Essential Tutorials And Resources For Learning CSS3

1. Create An Options Page For Your WordPress Theme

2. How To Create A Theme Options Page For Your Wordpress Theme

3a. Create An Awesome Wordpress Theme Options Page Part 1

3b. Create An Awesome Wordpress Theme Options Page Part 2

4. Create A Settings Page for WordPress Theme

5. How To Add Options Page To Hybrid News Theme

6. Wordpress Theme Design with Options Adminstration

7. How To Make A Control Panel For Your Wordpress Theme

8. Add An Options Page To Your WordPress Theme

9. Create An Advanced Options Page in WordPress

10. Adding Theme Options To WordPress Child Themes

11. A Video Tutorial by AMPtutorials

12. Thematic Theme Options Panel

13. How to Create a Better WordPress Options Panel

Theme Options Page Frameworks

1. WordPress Theme Options Framework

2. WordPress Theme Toolkit Admin

If i’ve missed any of the tutorials, please inform me by commenting below.

25 Essential Tutorials And Resources For Learning CSS3

Naeem Noor — Tue, 09 Feb 2010 02:25:33 +0000

There are many tutorials and resources for the CSS3. Most of the browsers such as Firefox, Safari already support some of the CSS3 properties. It is essential for a web designer to know about CSS3. Today, I will share the best tutorials and resources for learning about CSS3. These are the best tutorials I could find on CSS3. Hope you enjoy them.

1. 5 Techniques to Acquaint You With CSS 3

2. Get Started with CSS 3

3. Six Questions: Eric Meyer on CSS3

4. Take Your Design To The Next Level With CSS3

5. HTML 5 And CSS3 The Techniques You’ll Soon Be Using

6. Introduction To CSS3: Part 1 What is it?

7. CSS3 Selectors Explained

8. Progeressive Enhancement With Css3

9. Liquid Faux With Background Size

10. Structural CSS

11. CSS3 Borders

12. 11 Classic CSS Techniques Made Simple With CSS3

13. CSS @ Ten: The Next Big Thing

14. Introduction to CSS3 By W3C

15. The CSS3 ‘box-sizing’ concept

16. Tooltips with CSS3

17. CSS3 Links Creation and Usage

18. CSS3 Visual Cheat Sheet

19. Multiple Backgrounds (CSS3)

20. CSS3 Multiple Coloumns

21. Semantic Code: Put More In Get More Out

22. Stay on: target

23. CSS Text Shadows And Background Sizing

24. A Mock-up Interface Using CSS3 Colour

25. The fundamental problems with CSS3

I hope you find these resources valuable. If i’ve missed any of the links, please don’t hesitate to comment.

13 Free Professional Looking Wordpress Magazine Style/CMS Themes You Wish You Knew Earlier

Naeem Noor — Tue, 02 Feb 2010 15:56:40 +0000

Hello There! I’m finally back in action after the exams and Holidays with a whole new design. As you know, the WordPress is a semantic personal publishing platform with a focus on aesthetics, web standards, and usability. But some websites use this great blogging platform as a CMS. With its flexibility and power, WordPress can be customized into a full fledged CMS, and many people are already doing just that. Here you will find a collection with themes aimed for use as CMS. It comes with 13 completely FREE and unique professional Magazine Style/CMS themes.

You may also be interested in one of these older posts
Awesome And Free Fonts For Web Designers
13 Magnificent Free Wordpress Portfolio Themes

Ashford CMS Theme

The Ashford for WordPress theme framework is free. And can be used as a CMS theme. Thousands of online professionals and developers have downloaded Ashford to empower remarkable WordPress web sites

Download | Demo

Paintbox CMS

Paintbox-CMS is a grid based CMS theme layered on my actual theme-canvas Paintbox (Check it out here). It comes with a smooth 960 grid layout plus some creative jQuery effects for content loading.

Download | Demo

MIMBO WordPress Magazine Theme

It is a clean, customizable magazine-style theme for WordPress. It’s also a simple framework which can be modified with child themes, discussed further down in the documentation. It can also be used as a CMS for sure.

Download | Demo

The Morning After

The Morning After is a magazine-style theme for WordPress created by Arun Kale. The theme was created based on a brief survey on the WordPress forums about what people would want to see in a unique magazine-style theme.

Download | Demo

Linoluna: Magazine-style Theme for Wordpress

The Linoluno is a great looking wordpress cms theme where the content is presented in a very pleasing way. You have a featured post column in the front and other posts below it, carrying a description and a picture alongwith. The theme use the Wordpress’ template tags quite extensively but still, it is very easy to use.

Download | Demo

Corporate Life free wordpress theme

Corporate Life is a magazine-style theme for WordPress with 3 skins for your blog to make it match your taste to the maximum. It is a free Wordpress theme created within the frames of Getacustomdesign.com project. It is perfect for small corporate websites

Download | Demo

Channel – Free WordPress theme

Download | Demo

Wordpress Magazine theme

Wordpress Magazine theme is a 3-column WordPress theme features a tableless and unique design, improved widget support (3 sidebars), dropdown navigation, valid CSS & valid XHTML.

Download | Demo

Magiting

Magiting is a featured-packed and multi-colored free WordPress theme with TweetMeme retweet button. It has 2 columns, with an easy Options page for customization.

Download | Demo

IsoTherm News

Download | Demo

Radioactive Free Premium Worpress Theme

This theme has custom settings for the home page and a dynamic menu for categories. The sidebar has 3 regions for widgets. Radioactive is a Premium Wordpress Magazine Theme that can meet all your needs.

Download | Demo

Blue Rooster

he theme is a two column layout with a extra templates that can convert your blog into a CMS. The sidebar and footer are both widgetized, author and category templates included, as well as social buttons already intact. The theme style is a mix of rounded corners, flat edges and wooden elements with a schema of muted, dark colors on a plain white surface.

Download | Demo

Wordousel Lite

Download | Demo

This is it! if u liked the post, please share it.

20+ Awesome and Free Fonts For Web Designers

Naeem Noor — Mon, 09 Nov 2009 08:46:05 +0000

Typography is the art and technique of arranging type, type design, and modifying type glyphs. Below you’ll find some of the best free fonts collection for Web Designers by which you can save money and focus on make websites look good. I hope you will like the list and will use it in a good way. Feel free to Subscribe if you would like to be informed for the latest posts.

You may also be interested in one of these older posts
25 Hand Picked Best jQuery based Wordpress Plugins
15 Free Awesome Social Bookmark Icons Sets
16 Wordpress Plugins Everyone Must Install
5 Essential Google Cheat Sheets Which Surely Will Come in Handy
13 Magnificent Free Wordpress Portfolio Themes

1. Junction

2. Delicious

3. Calluna

4. Fertigo Script

5. Aller sans

6. Luxi Serif

7. Fontin

8. 28 Days Later

9. Sansation

10. Medio

11. Zag

12. Circled Font

13. Baja California

14. Neighbourhood

15. Ferrum

16. Miso

17. Museo Sans

18. Grunge Serifa

19. LT Oksana Font V3.0

20. Tenby

21. Flaminia Type System

25 Hand Picked Best jQuery based Wordpress Plugins

Naeem Noor — Wed, 21 Oct 2009 17:29:01 +0000

In this post you’ll find out about amazing WordPress plugins based on jQuery UI. jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. Below is a list of 25 surprisingly amazing best jQuery based WordPress plugins. I hope you will like the list and will use one of these plugins on your blog . Feel free to Subscribe if you would like to be informed for the latest posts.

You may be interested in these older posts
15 Free Awesome Social Bookmark Icons Sets
5 Essential Google Cheat Sheets Which Surely Will Come in Handy
16 Wordpress Plugins Everyone Must Install

1. Wordpress jQuery Lightbox Plugin

Used to overlay images on the current page. You can check for more information and samples here.

2. WP-Slimbox2 Plugin

A WordPress implementation of the stellar Slimbox2 script by Christophe Beyls (an enhanced clone of the Lightbox script) which utilizes the jQuery library to create an impressive image overlay with slide-out effects.

3. Carousel Gallery (jQuery)

This plugin tweaks the gallery tag in Wordpress 2.6 thusly by replacing it with a javascript carousel.

4. jQuery lazy load plugin

Lazy loader delays loading of images in (long) pages. Images below the fold (far down in the page) wont be loaded before user scrolls down. This is opposite of image preloading. Using lazy load on long pages containing heavy image content makes page feels snappier. Browser is in ready state after loading visible images. No need to wait for unknown amount of pictures to load.

5. jQuery Comment Preview

Live comment preview without page reboot. Works on jQuery.

Features:

Live comment preview, which does not take that extra space on the page.
Simple HTML-editor (instruction on using the editor are on the plugin options page).
You can customize comment preview block as you wish. You can display: comment author name, avatar (static or dinamic using gravatar.com), comment date and time, comment text. All this can be designed with CSS.
You may don’t connect plugin’s CSS file (optional) if you wish to reduce number of queries to your server.
Plugin’s JS and CSS files are connected only on the pages with comment form.

6. WordPress post information plugin

If real estate is a priority in your theme then this plugin can help by showing post metadata information on demand by using a JavaScript toggle function.

7. Snazzy Archives

Snazzy Archives is a visualization plugin for your WordPress site featuring an unique way to display all your posts. Your archive page will never be boring again!

8. µAudio Player

µAudio is a slim (450 Bytes!), fast plugin to create a flash mp3 player when mp3 links are clicked. In order to reduce clutter and file transfer, the links are unmodified until they are clicked, at which point a div with the player is faded in after the link. A second click on the link fades the player back out.

9. µMint Plugin

µMint is a slim plugin to integrate statistics from Shaun Inman’s Mint statistics package into Wordpress*.

µMint does require a valid Mint installation to function.

10. jQuery Reply to Comment

Add “reply” and “quote” features on each comment list. If you have jQuery installed on you blog, this Plugin add two link in each comments list (on single page). This plugin can auto include “jQuery from Google Ajax API repository”. You can also choose to use only “jQuery only” (only Javascript) or a mix of “jQuery/PHP”. Thanks to Cristiano Fino’s Plugin for original idea. If you doesn’t use jQuery please visit Cristiano Fino’s Plugin

11. GD Star Rating

GD Star Rating plugin allows you to set up rating and review system for posts, pages and comments in your blog. You can set many options for displaying the rating stars, and also add widgets into the sidebars for displaying top ratings and other statistics generated by the plugin.

12. jQuery-Pagebar

jQuery-Pagebar show instead of the next and prev links a jQuery slider as a modern pagebar. So it’s easy to navigate through many pages.

13. jQuery Lightbox For Native Galleries

Makes the native WordPress galleries use a lightbox to display the fullsize images. The lightbox used in this plugin is currently the jQuery lightBox plugin by Leandro Vieira Pinho.

14. TinyMCE Advanced

This plugin adds 15 plugins to TinyMCE: Advanced hr, Advanced Image, Advanced Link, Context Menu, Emotions (Smilies), Date and Time, IESpell, Layer, Nonbreaking, Print, Search and Replace, Style, Table, Visual Characters and XHTML Extras.

15. WP-Imagefit

Rather than relying on a CSS or HTML-driven approach to resize large or wide images, WP-Imagefit relies on Javascript to proportionately resize images based on the width of the containing column.

This plugin is currently compatible with an hAtom-based theme like K2 or Sandbox.

Original jQuery Imagefit plugin written by Oliver Boermans.

16. WP-CodeBox

WP-CodeBox provides clean syntax highlighting and AJAX advanced features for embedding source code within pages or posts. It support wide range of popular languages highlighting with line numbers, code download, Copy to clipboard, collapse codebox,automatic keywords link to API manual and maintains formatting while copying snippets of code from the browser.

17. Advanced Spoiler

New version of Ajax Spoiler plugin renamed to ‘Advanced Spoiler’.

Show or hide contents(text, image etc.) with animated effects wrapped by spoiler markup tag([spoiler][/spoiler]).

18. PixoPoint Menu Plugin

Adds an SEO friendly, accessible regular or dropdown menu to your WordPress blog. Visit the PixoPoint Menu Plugin page for more information about the plugin, or the PixoPoint forum for help with adding the menu to your theme.

19. Google AJAX Translation

The Google AJAX Translation WordPress plugin provides a quick, simple, and light way to add translation to your blog.

20. Quick Search

Quick Search add AJAX Search to your site sorting results by Posts, Page and Comments. You can easly customize the popup menu style by modifying the file quick-search.css. You can find some option through the ‘Plugins’ menu in WordPress.

21. Highlight Search Terms

Highlights search terms using jQuery when referer is a Google, Yahoo or Lycos search engine or within WordPress generated search results. This plugin is a light weight, low resource demanding and very simple fusion between How to Highlight Search Terms with jQuery – theme hack by Thaya Kareeson and Search Hilite by Ryan Boren.

22. Image Drop Shadow

Image Drop Shadow wordpress plugin adds stylish drop shadow to images posted on your blog using jQuery. Just install it and all your posted images will automatically have a drop shadow. The plugin uses the method described by Brian Williams in the article “Onion Skinned Drop Shadows” -

23. Accordion Image Menu Plugin

This is a different menu that uses your post images as a background. You can insert the menu wherever you want: content, php files or widget if your theme allows it. Visit the plugin page for demo and details.

24. Flexible Lightbox

This plugin allows to use the Lightbox features for images and wordpress galleries without touching the html code. It includes an option ‘Open using lightbox’ on the Setting Panel to be used before inserting the single images on your post.

25. Comment Validation

Ever got annoyed when submitting a comment on a wordpress blog and just getting a blank page with a error message like “please fill out required fields” and nothing else? This plugin aims to help by adding validation to the comment form. When a user submits the form and something is missing, an appropiate message is displayed and individual fields are highlighted. When the email or url is in an incorrect format, a message is displayed accordingly.

http://wordpress.org/extend/plugins/micromint/

16 Wordpress Plugins Everyone Must Install

Naeem Noor — Mon, 05 Oct 2009 11:44:04 +0000

Hello there! as i have already published a few posts about wordpress themes and code snippets. This time i’ve decided to write about the wordpress plugins, There are hundreds of wordpress plugins available on the internet, but some of the wordpress plugins are most essential to run a successful blog. below is a list of 16 essential Wordpress Plugins I cannot blog without.

I hope you will like the list and will use one of these plugins on your blog which i recommend. Feel free to Subscribe if you would like to be informed for the latest posts.

You may be interested in these older posts
13 Magnificent Free Wordpress Portfolio Themes
15 Free Awesome Social Bookmark Icons Sets
5 Essential Google Cheat Sheets Which Surely Will Come in Handy

Akismet

Akismet checks your comments against the Akismet web service to see if they look like spam or not and lets you review the spam it catches under your blog’s “Comments” admin screen.

Code Keeper

CodeKeeper plugin retains the formatting of blocks and converts any characters to HTML entities when necessary. It is useful for small snippets of code that do not require colour-coding, line numbering, or the other effects offered by more powerful syntax highlighters.

FD Feedburner Plugin

It Redirects the main feed and optionally the comments feed to Feedburner.com. It does this seamlessly without the need to modify templates, setup new hidden feeds, modify .htaccess files, or asking users to migrate to a new feed. All existing feeds simply become Feedburner feeds seamlessly and transparently for all users.

Google XML Sitemaps

This plugin will create a Google sitemaps compliant XML-Sitemap of your WordPress blog. It supports all of the WordPress generated pages as well as custom ones. Everytime you edit or create a post, your sitemap is updated and all major search engines that support the sitemap protocol, like ASK.com, Google, MSN Search and YAHOO, are notified about the update.

jQuery lazy load plugin

Login Lockdown

This plugin records the IP address and timestamp of every failed login attempt. If more than a certain number of attempts are detected within a short period of time from the same IP range, then the login function is disabled for all requests from that range.

WP Super Cache

This plugin generates static html files from your dynamic WordPress blog. After a html file is generated your webserver will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts. 99% of your visitors will be served static html files.

Stealth Login

This plugin allows you to create custom URLs for logging in, logging out, administration and registering for your WordPress blog. Instead of advertising your login url on your homepage, you can create a url of your choice that can be easier to remember than wp-login.php, for example you could set your login url to http://www.myblog.com/login for an easy way to login to your website.

Platinum SEO Pack

This Plugin is the ultimate wordpress SEO solution .Platinum SEO Plugin offers all the features of All in One SEO plugin plus more.

Yet Another Related Posts Plugin

(YARPP) gives you a list of posts and/or pages related to the current entry, introducing the reader to other relevant content on your site. This plugin requires that your database run on MySQL 4.1 or greater.

Contact Form 7

Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.

Wordpress Database Backup

WP-DB-Backup allows you easily to backup your core WordPress database tables. You may also backup other tables in the same database.

Add to Any: Share/Bookmark/Email Button

Help readers share, save, bookmark, and email your posts and pages using any service, such as Facebook, Twitter, Digg, Delicious, and over 100 more social bookmarking and sharing sites. The button comes with AddToAny’s customizable Smart Menu, which places the services visitors use at the top of the menu, based on each visitor’s browsing history.

WP-PageNavi

Adds a more advanced paging navigation your WordPress blog.

WordPress.com Stats

This Plugin collects information about your pageviews, which posts and pages are the most popular, where your traffic is coming from, and what people click on when they leave. It’ll also add a link to your dashboard which allows you to see all your stats on a single page. Less is more.

Google Analytics for WordPress

The Google Analytics for WordPress plugin automatically tracks and segments all outbound links from within posts, comment author links, links within comments, blogroll links and downloads. It also allows you to track AdSense clicks, add extra search engines, track image search queries and it will even work together with Urchin.

SexyBookmarks v2 For Blogger

Naeem Noor — Fri, 21 Aug 2009 18:57:59 +0000

Sexybookmarks for Blogger v2

I being a blogger user for quite a long time, still love to give back to the community one way or other. This time again, I have tried to give back to the community by making the new version of Sexy Bookmarks compatible with blogger. The Sexy Bookmarks V1 was a huge hit and many folks are still using it. I feel really happy and thankful to all who supported me last time. Looking forward for same support this time also. Hope you like this new version.

Update: 27/Jan/2010

Preview

See the Demo Here

Now, Lets begin.

NOTE: !Before changing your template, don’t forget to backup your template and your widgets!

1. First, of course go to your template editor and tick the “Expand Widget Template”.
2. Put the following code before

And this one too,

3. Now Put the below code after





Share this on del.icio.us


Digg this!


Stumble upon something good? Share it on StumbleUpon


Share this on Reddit


Add this to Google Bookmarks


Tweet This!


Share this on Facebook


Share this on Mixx


Subscribe


Buzz up!


Share this on Linkedin


Submit this to DesignFloat


Share this on Technorati


Submit this to Script & Style


Post this to MySpace


Share this on Blinklist


Share this on FriendFeed


Seed this on Newsvine








 Widget by Css Reflex | TutZone

I no longer host the images on my server due to limited bandwidth please kindly upload the images on your own server and replace the links.
SexyBookmarks Images (97)

For any query please reply here

Top 10 Wordpress Codes Every Designer Should Know

Naeem Noor — Fri, 07 Aug 2009 05:00:22 +0000

Hello there! Here I collected a very great collection of 10 Wordpress codes that I consider the most commonly used by any Wordpress developer. The content was reformatted for quick reference from the Template Tag section of the WordPress.org Codex, a relative encyclopedia to WordPress themeing, and great reference for your WordPress questions.

Here are the list of most commonly used Wordpress code snippets by designers. If I’ve missed any Wordpress code, please comment below.

Display Recent Posts

foreach ($recentposts as $post) : setup_postdata($post); ?>

Display Categories

`Categories`

Display Archives

`Archives`

Display WordPress Tags Cloud

Display Blogroll

Display WordPress Tags

Display a Pages Menu

`Pages`

Display Recent Comments

global $wpdb; $sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID, comment_post_ID, comment_author, comment_date_gmt, comment_approved, comment_type,comment_author_url, SUBSTRING(comment_content,1,30) AS com_excerpt FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID = $wpdb->posts.ID) WHERE comment_approved = '1' AND comment_type = '' AND post_password = '' ORDER BY comment_date_gmt DESC LIMIT 10"; $comments = $wpdb->get_results($sql); $output = $pre_HTML; $output .= "\n

";

foreach ($comments as $comment) {

$output .= "\n".strip_tags($comment->comment_author)

.":" . "ID) .

"#comment-" . $comment->comment_ID . "\" title=\"on " .

$comment->post_title . "\">" . strip_tags($comment->com_excerpt)

."
";

}

$output .= "\n

";

$output .= $post_HTML;

echo $output;?>

Display Admin Section







WordPress




XHTML

Display Top Comments

get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 10"); foreach ($result as $topten) { $postid = $topten->ID; $title = $topten->post_title; $commentcount = $topten->comment_count; if ($commentcount != 0) { ?>


title="">
?>

Interview – DZone.com CEO – Rick Ross

Naeem Noor — Tue, 28 Jul 2009 13:26:44 +0000

As a web developer, there are several sites I check out for updates almost every day.

But the most important, from my point of view, is DZone. It’s the best place for developers. A social media hub for developers, Dzone has more than 400,000 registered members and a zero-spam tolerance policy, which really brings the best of what’s the on web in the field to one spot.

With more than 45 different categories, DZone has a large collection of tutorials, resources for web developers and features on new trends. A few days ago we had the pleasure of interviewing Rick Ross, DZone’s CEO.

Thanks, Rick for taking the time to let CssReflex readers get to know DZone.

1.) As the founder of D-Zone, one would assume that you program yourself or are at least very interested in the topic. What languages do you specialize in and did you build D-zone.com yourself?

In fact, I am a programmer. For the most part, I work primarily with Java, HTML, and CSS; however, I’m a generalist and can program in several languages.

No, I am not the sole builder of DZone. A team of DZone developers, including myself, built and launched our site a little over three years ago. We loved the concept of “collaborative filtering” in social bookmarking sites like Digg and Delicious, and saw in it an opportunity to serve the specific needs of technology developers.

2.) Most of the articles on D-Zone seem to revolve around more complex languages compared to the now oversaturated design/xhtml/css area. While the word developer obviously encompasses all types of environments, one would think that your site would have fallen into that trap due to the large amount of people wanting it. Was it a conscious effort to not focus on css/xhtml too much or was it the community that made the decision for you?

DZone is nonpartisan and we see it as our mission to provide useful resources to all developers regardless of their language or platform of preference. We try to be both fair and balanced, while staying on top of what’s going on in the industry. You never know if a trendy topic is a buzzword or the “next big thing.”

3.) A quick glance at your incoming section shows you are getting quite a few submissions a day. The bigger you get, the harder it becomes to get the truly high quality articles into view due to the volume. Digg struggles with this big time as their upcoming section is a wasteland. Do you see this as an issue you may have to be concerned about?

The best spam, is the spam you never see. Most people are not aware that DZone actively blocks nearly 200 links per day and more broadly blocks thousands of spam domains. We go to great lengths to prevent our community members from having to endure what so-called link builders and SEO experts would like them to see.

Thanks to our awesome moderator team and some innovative technology, we’re proud to say DZone is, largely, a spam-free site.

4.) D-Zone has definitely claimed its corner in the social media landscape and would be considered part of the web 2.0 (yeah I said it) explosion. Where do you think social media and the web in general is heading?

Over time, I believe people will gravitate toward more tightly focused social media groups where they share a common interest. Social media sites may become more useful for keeping in touch and staying up-to-date rather than for meeting new people. I think most relationships will still get their start in more traditional ways, like meeting in person.

But, DZone is more than just a social media site; we also power content zones where we publish news, announcements, feature articles, tutorials, and more. One of our key assets to our community is our DZone Refcardz, free cheat sheets for Developers. A new issue comes out every Monday, check them out at Refcardz.com.