Wordpress is a term you definitely knew or at least have heard about a lot and there’s no need to talk about its important role in today web design.  As a web designer, whether you like or not, you cannot neglect it if you want to continue your business. In this post we have put together a list of some of the best Video Tutorials on Wordpress (including designing and coding for wordpress). Here’s your chance to learn Wordpress if your time is limited and don’t have much time to spend on books.  The video tuts featured here are for both beginner and advanced users.

1- Designing for Wordpress

In this three parts series Chris Coyier’s goes to walk through designing for WordPress:

Part one:

• Running time: 16 minutes
• This part is about downloading and installing Wordpress and installing the ‘starkers’ theme.

Visit it

Part two:

• Running time: 53 minutes
• In this part you will go over the theory behind designing for WordPress.

Visit it

Part three:

• Running time: 59:38
• In this part you will learn how to finish up the design and start in with some more advanced functionality.

Visit it

2- Hodgepodge of Wordpress Tricks

The running time of this Wordpress video tutorial is 43 minutes and it covers:

• Listing categories with a built-in function and building a tabbed navigation from them with “current tab” functionality
• Numbering comments with a simple incremented PHP variable.
• Improving WordPress search with a plugin and making better design choices.
• Live comment previews with JavaScript and/or plugin.
• Setting better titles for all pages.
• Setting different backgrounds based on URL.
• Setting different styling based on the post ID.

Visit it

3- 10 Tips To Make WordPress Hack-Proof

What a fantastic Wordpress video tutorial is really is! It would be perfect to learn some security tips to avoid getting hacked and keeping your Wordpress secure.

Visit it

4- Add a twitter field to your form (Wordpress) wp-twitip-id

A five minutes Wordpress video tutorial that is about installing and configuring the wp-twitip-id plugin for Wordpress blogs.

Visit it

5- All in One SEO Pack – WordPress Plugin

‘All in One Seo pack’. Yes, it’s the name of one of the recommended Wordpress plugins and this Wordpress video tutorial shows you how to use it for Wordpress.

Visit it

6- Configuring Wordpress

Here you can access 8 series Wordpress video tutorials that all of them are about configuring Wordpress:

Part 1:

Visit it

Part 2:

Visit it

Part 3:

Visit it

Part 4:

Visit it

Part 5:

Visit it

Part 6:

Visit it

Part 7:

Visit it

Part 8:

Visit it

7- Creating a Wordpress Template

In this 3 series Wordpress video tutorials you will learn how to create a simple Wordpress template:

Part 1:

Visit it

Part 2:

Visit it

Part 3:

Visit it

8- Using CSS and Blockquote

It’s really recommended to watch this video to see how you can use the blockquote icon (the indent icon) and CSS formatting to make an otherwise normally-formatted paragraph change color, change position, and italicize. In this way, any time you needed to use that particular formatting on a page, you would just use the blockquote icon.

Visit it

9 – Lost Password, Update User Info

Have you ever lost your password? Don’t miss this video tutorial to learn what to do after losting password and learn how to update user info on Wordpress.

Visit it

10 – Sharing Your Content for Traffic – Tutorial

This video tutorial helps you to Learn how to share your blog content and improve traffic while knowing exactly where your traffic is coming from and which articles generate it.

Visit it

11 – 10 Advanced Wordpress Video Tutorials

While I was searching, encountered with 10 perfect advanced Wordpress video tutorials that are avalilable for direct downloading in .zip format. In the list below you can see the tittle of all of them:

1. How to Upgrade WordPress Using cPanel
2. Upgrading WordPress Automatically Via The Dashboard
3. How to Install and Set-up Windows Live Writer
4. How to Use Windows Live Writer to Write Content
5. Installing New Plugins in Windows Live Writer
6. How to Create Backups for Your WordPress Blog
7. How to Edit WordPress Theme CSS Styles
8. How to Create a Static Front Page in WordPress
9. Introduction to Getting a FeedBurner Account
10. . Redirecting Your Default RSS Feed to Feedburner

Visit it

12 – WordPress Tutorial Custom Post Background

This video tutorial can answers one of the common question of many Wordpress users, which says: “Can I have different backgrounds on different pages?”

Visit it

13 – Advanced Wordpress Thumbnail Generation

The title says all about this video tutorial. Yes! in this tutorial you will learn how to have thumbnail on your Wordpress blog.

Visit it

14 – New Features of WordPress 2.9

This tech video from Kentucky Classroom teaches you all about Wordpress 2.9’s new features.

Visit it

15 – How to Run WordPress on Your Windows Computer Using XAMPP

This video tutorials includes two parts to learn you how to simply run Wordpress on your Windows Computer.

Visit it

Related Posts

In today blogging world getting high rankings for any valuable niche is really hard and without paying some $$ or even some $$$ you’re not going to see your blog/website on first page of lovely google (usually).  But along with purchasing relevant back-links you must consider some essential tips to not annoy Google’s robots. Your Wordpress powered blog/website should be attractive for those robots looking for pretty websites!. As you use Wordpress, there are some SEO pitfalls you may not know. So in this post, we’ve put together all you need to get your website a better ranking on search engines. Let’s enjoy!

1. The Definitive Guide To Higher Rankings For Your Blog

If you are looking for a fantastic comprehensive guide with a good categorized table of content at the first to learn more about SEO for Wordpress, this tutorial would be yours!

This tutorial will also be useful to start learning about SEO for Wordpress from scratch.

Visit it

2. 10 Important Tips to Optimize Wordpress for Search Engines

Although many publishers think that Wordpress doesn’t require any Search Engine Optimization (SEO), but in this tutorial, Ayaz Malik has made a list of 10 necessary changes for getting max out of search engines.

Visit it

3. 20 Practical SEO Tips to Super-Charge Your WordPress Blog!

This tutorial covers some useful subjects including: pinging, sitemaps, canonicalization, link juice, header tags, slugs, tags, timestamping, social media, permalinks, and a whole lot more!

Visit it

4. Brilliant Wordpress SEO Tips for Bloggers and Webmasters

This Wordpress SEO tutorial is simply about some common Wordpress SEO tips. It’s really recommended for all Wordpress users to use all tips in it.

Visit it

5. SEO for Wordpress

This tutorial includes some tips and video tutorials which are all about SEO for Wordpress.

Visit it

6. Setting Up Wordpress for SEO

In this tutorial there are a number of  advanced tweaks and WordPress plugins you can install to help with URL structuring, search engine crawling, handling duplicate content, optimizing title and meta tags, images and internal linking.

Visit it

7. 9 Must-do WordPress SEO Tips that you might have missed

This tutorial is a different one! It’s not about some repeated tips in some other related tutorials. But it’s just about some short and useful tips that may some users miss them.

Visit it

Related Posts

If you’re a designer and still outsource your designs to be coded into HTML, here’s a turning-point for you to boost your clients and accordingly your income as a web designer. Web standard front-end coding isn’t so easy and it needs to learn and test a lot to be known as an advanced coder, but all professional and experienced coders started from coding simple pages and then improved their coding skills day by day.

In this post, we’ve put together all you may need to start learning how to convert psd to html. A complete package of 16 awesome psd to html tutorials that teach you how to code professional designs step by step.

If you don’t have the time to get into coding, or want to focus on design only , or just hate CSS/XHTML, we strongly recommend psdhtmler & psdWordpresser for PSD to HTML/Wordpress. They do quality code at very low prices.

before enjoying, why don’t you subscribe to our rss feed or follow us on twitter.

1. Converting Photoshop Web Template File To HTML/XHTML/CSS Web Page

In these videos tutorial, you will learn how to convert a photoshop web template (PSD) to an HTML document.

These videos are form “css-tricks.com”.

Video tutorial 1 (10:10 minute)

Video tutorial 2 (17:10 minute)

Video tutorial 3 (31:53 minute)

2. Converting Photoshop PSD To XHTML/CSS Video Tutorial

In these 3-part videos tutorial, you will be starting  from a designed web layout , then you will learn how to slice it through PS and code it into a valid web page. The videos are in good quality and you can learn from these videos easily.

Video tutorial episode 1 (22.03 minutes)

Video tutorial episode 2 (25.45 minutes)

Video tutorial episode 3 (23.48 minutes)

3. Build a Sleek Portfolio Site from Scratch

This covers both design and code of a great portfolio template.

Sleek Portfolio Site (Photoshop Tutorial)

Sleek Portfolio Site (PSD File to CSS and HTML)

Sleek Portfolio Site (Demo)

4. How to Convert a PSD to XHTML

This article features screencasts that show you exactly how to convert a PSD into perfect XHTML/CSS.

View Tutorial

Demo

5. Converting a PSD to XHTML/CSS

First step is about creating a layout in Photoshop.

Nighttime Layout (Photoshop Tutorial)

The second is about creating  a XHTML/CSS webiste by slicing the PSD.

Nighttime Layout (PSD To XHTML/CSS)

6. Create a Sleek Web 2.0 Style Website Layout

There are two tutorials on Designing and Coding a Sleek Web 2.0 Style Website Layout.

Sleek Web 2.0 (Part 1)

Sleek Web 2.0 (Part 2)

Sleek Web 2.0 (Demo)

7. Encoding a Photoshop Mockup into XHTML & CSS

Design a vibrant and colorful modern blog layout in Adobe Photoshop.

Design in Photoshop

Convert vibrant and colorful modern blog layout to CSS/XHTML.

XHTML & CSS

Check out the completed webpage.

Demo

8. How to Code a Grunge Web Design from Scratch

In this step-by-step web development tutorial, you will learn how to convert a beautiful and eye-grabbing grunge theme web layout–created from Photoshop in a previous tutorial–into a working HTML and CSS template.

Grunge-themed web layout using Photoshop

Convert PSD To HTML and CSS

Live Demonstration

9. How to Code a Clean Portfolio Design

In the part one, it will cover design a clean portfolio layout in the Photoshop then in part 2 you will convert the PSD file to CSS.

Clean Portfolio Site in Photoshop

Clean Portfolio Design (PSD to CSS)

Live Demo

10. Coding a Clean & Illustrative Web Design from Scratch

In this comprehensive and step-by-step tutorial, you will learn how to convert a Photoshop mockup of a professional web layout design that features an illustrative landscape header into a standards-compliant XHTML/CSS template.

Illustrative Web Design (Photoshop Tutorial)

Illustrative Web Design (PSD File To XHTL/CSS)

Illustrative Web Design (Demo)

11. Coding a Clean Web 2.0 Style Web Design from Photoshop

In this  tutorial, you’ll learn how to build a web page template from a Photoshop mock-up using HTML/CSS and the jQuery library.

Clean Web 2.0 Style Web Design  (Photoshop Tutorial)

Clean Web 2.0 Style Web Design  (PSD File To XHTL/CSS)

Clean Web 2.0 Style Web Design  (Demo)

12. How to Create a Dark and Sleek Web Design from Photoshop

In this web development tutorial, you will learn, step-by-step, how to create a beautiful dark and sleek web layout using standards-based HTML and CSS. Along the way, you will witness how to use CSS Sprites and CSS Text Image Replacement.

Dark and Sleek Web Design   (Photoshop Tutorial)

Dark and Sleek Web Design   (PSD File To XHTL/CSS)

Dark and Sleek Web Design   (Demo)

13. How to Convert a Photoshop Mockup to XHTML/CSS

In this Photoshop tutorial you’ll learn how to Build a complete website design mockup for a fictional design studio.

Photoshop Tutorial

In this part you’ll convert the Photoshop mockup to XHTML\CSS.

PSD File To XHTL/CSS

14. From PSD to HTML, Building a Set of Website Designs Step by Step

An excellent tutorial by the popular nettuts on designing and coding an elegant template.

Photoshop Tutorial

PSD To XHTL/CSS

Demo

15. Converting a Design From PSD to HTML

This is an screencast by nettuts on conversion of PSD to CSS.

View Video Tutorial

16. Slice and Dice that PSD

You will learn slicing up a PSD, dicing it for the web, and serving it on a warm hot plate

View Video Tutorial

Related Posts

Christmas is a holiday season and it’s the time you should do something not related to your daily work. You know exactly how to spend your holidays and I’m not going to talk about it here anymore. The purpose of this post is to prepare a (somehow) Christmas gift for those who love learning new things ever on holidays. Of course this post will help designers that don’t know a lot about Adobe Illustrator power and have been looking for some great tutorials to learn on their spare time of Christmas holidays to start the new work-year more strongly!

These tutorials are hand-picked under the following categories:

• 1- Character and Cartoon Design Tutorials
• 2- 3D Tutorials
• 3- Logo Design Tutorials
• 4- Text Effect Tutorials
• 5- Patterns

1- Character/Cartoon Design Tutorials

Creating vector characters in Illustrator

This tutorial let you know how to go from sketch to the finished product to design a perfect character like above.

Visit it

How to Illustrate a Cute Emo Kid

In this tutorial you will learn how to create a funny looking cartoon style just as like as the final image preview above.

Visit it

How to Create a Vector Illustration and Prepare it for Micro-Stock Sale

In this tutorial you will encounter with 16 steps to learn:

• How to create a vector illustration from sketch to finish in Adobe Illustrator according to the demands of micro-stock websites.
• How to clean up your Adobe Illustrator file before saving it in EPS format.
• How to find and close all open paths.
• How to save EPS and JPEG files correctly for micro-stock sale.

Visit it

Create a Cute Panda Bear Face Icon

This tutorial shows you how to spend 22 short steps to create a cute panda bear face icon all from ellipses (well, actually there is one rectangle for the background). The great part about this tutorial, is that you can easily apply the techniques to other icons, illustrations, logos, or other projects.

Visit it

Create a Cute Furry Vector Monster in Illustrator

As you can see the final image above, this illustrator tutorial gives you some steps to create a nice funny monster as your character. You will be working with the basic shapes to start, then use a variety of gradients to add depth.

Visit it

Create A Vector Art Twitter Bird Character Icon In Adobe Illustrator

Since twitter is one of the most common social medias, this tutorial would be really useful to create a nice twitter character for your own projects. This tutorial contains 31 really short steps.

Visit it

How to Create a Cute Bunny Vector Character

This illustrator tutorial will show you how to create a cute bunny character. It uses simple shapes and gradients that are easy to apply to other character illustrations. The great thing about his tutorial is you don’t have to be an amazing artist to create it!

Visit it

Create a Super Happy Octopus Character

As an amazing illustrator tutorial, this let to follow 21 steps to create a great happy octopus character.

Visit it

Vectorial character design with Illustrator

This illustrator tutorial would be really helpful to design a cartoon monkey character for horror films.

Visit it

How to Create a Web Site Mascot

This tutorial is going to give you an overview of how developed a character from the initial brief through to the final site mascot.

Visit it

How to Create a Cartoon Character with Expressive Lines

In this illustrator tutorial you will learn how to create an amazing cartoon character like above using 19 steps.

Visit it

2- 3D Tutorials

How to Create an Open Book with Illustrator’s 3D Extrude & Bevel Tool

In this illustrator tutorial you will learn how to create an open book mostly with Illustrator’s 3D Extrude & Bevel Tool. You will learn how to create open pages with graphics and add a wavy background. Also the book can be customized by applying your own graphics to the pages.

Visit it

Create a Can of Beans by Mapping Vectors to a 3D Object

Illustrator has offered a range of 3D tools for some time and this tutorial aims to get you started familiarizing yourself with them over 12 steps. In this tutorial you will learn how to create a can of beans, built entirely from vectors, using the Symbols palette, the Extrude tool and Illustrator’s Image Mapping.

Visit it

Let’s Make a Playful Yet Robust 3D Letter Design

This tutorial is perfect for the advanced beginner who wants to take her skills to the next level. In this tutorial you will learn how to create 3D text and use depth-of-field to enhance a design.

Visit it

3D Blue LCD Alarm Clock – Illustrator Tutorial

Another 3D illustrator tutorial that is about designing a 3D Blue LCD alarm clock. This tutorial contains 16 steps to cover using some 3D techniques on illustrator.

Visit it

3D Charts in Adobe Illustrator CS

This illustrator tutorial is about adding depth to graphs to create a 3D scene. It is really recommended to take a look at this tutorial to have more effective and eye catching graphs.

Visit it

Create a Checkered 3D Chess Figure Scene

As a perfect illustrator tutorial explains how to create a 3D chess scene with the help of the 3D Revolve Tool and gradient masks. This is a great introduction to the 3D Tool in Illustrator, and shows you how to pose your creations within an illustrative checkered environment.

Visit it

Make a Handy 3D Vector Calendar Icon

Learn to make a handy calendar icon to use on your blog, website, or print projects. We’ll use Illustrators Path and 3D tools to create this design. Also, a simple page curl effect will be demonstrated as well. Let’s jump into this tutorial.

Visit it

3- Logo Design Tutorials

Logo Design Process and Walkthrough for Vivid Ways

In this perfect illustrator tutorial you will learn how to design a logo just as like as the final image above step by step.

Visit it

Creating an Environmentally Friendly Green Type Treatment

This great illustrator tutorial contains 25 steps and help you to learn how to design a logo that requires a Green style applied to the design. Also you will learn how to create a green type treatment.

Visit it

How to Create a Trendy Retro Type Treatment

In this Illustrator tutorial, you’ll see how to create a trendy retro type treatment with a free font, gradients, blends, and some scatter brushes. It’s a relative easy tutorial containing techniques that can be quickly applied to many other type treatments and various graphic elements.

Visit it

Creating a crazy cool logo

This illustrator tutorial is all about designing a really beautiful logo just as like as above using 10 steps.

Visit it

Design a Grungy Circular Logo

Another illustrator tutorial about designing logos. It simply help you to learn how to design a logo like above using 10 steps.

Visit it

4- Text Effect Tutorials

Create a Swirly Type Treatment

This Illustrator tutorial contains 26 steps and will show you how to create a swirly type treatment. With a free font, some brushes, and gradients you can easily create this type treatment.

Visit it

Bling Bling Text Effect

In this tutorial you will learn how to create the eye catching bling bling effect above using illustrator. You will learn how to create the texture and apply it to any text.

Visit it

Blueprint-Style Text in Adobe Illustrator

In this tutorial you would learn a blueprint technique. This is a quick demo using a blend of live effects, filters, and even a little gradient mesh to create a seemingly complex logo treatment.

Visit it

Ornate lettering

This tutorial shows you how to create ornate lettering from sketches and vectors in Illustrator, make it three-dimensional in 3ds Max and fine-tune the final result in Photoshop.

Visit it

Adding Gradients to Text

As you may know, In Illustrator, you can’t apply a gradient to text the way you normally add gradients to other objects. But this tutorial teaches you how to do it.

Visit it

Create a cool water effect

In this great illustrator tutorial you will learn how to use mesh tool to create water droplets , use the symbol sprayer tool using symbol of water droplets and dispersing them.

Visit it

Quickly Add Grunge To Text

As a quick illustrator tutorial it would be really useful to learn about adding grunge effect to a text.

Visit it

5- Creating illustrator Patterns

How to Create a Pop Design Element

This tutorial is for beginner to advanced users. During this tutorial you will learn how to use brushes , create your own brushes , learning how to speed up your work process by using brushes.

Visit it

How to Create a Seamless pattern in 10 steps

As the author of this tutorial says, since he has seen that many illustrator tutorials which have been written about creating patterns, are confusing and limited to basics, has decided to write his own tutorial. So, hopefully his step by step tutorial would be useful for you.

Visit it

Create a Themed Repeating Pattern in Illustrator

It is really recommended to follow this Adobe Illustrator tutorial to create a range of simple vector objects based around the theme of a designer’s lifestyle, then tile them together into a cool looking repeating pattern.

Visit it

Creating seamless patterns in Illustrator

In this tutorial you can find the answer of one of the most common users’ questions. Yes! you will find out how to create seamless patterns in Illustrator.

Visit it

Creating geometric patterns in Illustrator

Another illustrator tutorial for creating patterns that is a bit different than the others. In fact this tutorial gives you some new ideas and techniques to create your own illustrator patterns.

Visit it

Intricate Patterns in Illustrator

This illustrator tutorial would be a bit harder that other ones. It contains 17 steps to create intricate pattern in illustrator.

Visit it

Related Posts

Tweaking Firefox to have a better performance is an exciting experience. I know you may have added a lot of extensions to your Firefox (your internet OS!) and can’t live without them. So if I say disable them to have a faster Firefox, you would ignore this article entirely! But wait a minute, there are more effective ways to improve Firefox performance that don’t need to talk about your add-ons only!

In this article, I’ve introduced lots of tips, tweaks and plugins which will affect on your Firefox memory usage, startup time, and its general performance. Here are what we’ve covered:

• Before getting started
• Make Firefox faster
• Reduce Firefox memory usage
• Speedup Firefox startup time (to make your Firefox as speedy as Chrome)
• Set Firefox to have more screen space

Please don’t forget to subscribe to our RSS feed and Follow us on twitter

Before getting started

Make a backup about:config

Before getting started it’s always recommended to make a backup of your Firefox settings (about:config) in case you need to revert to the default:

In Windows XP:

Documents and Settings\<username>\Application Data\Mozilla\Firefox\Profiles\<profile ID>.default\

In Windows Vista:

Users\<username>\AppData\Roaming\Mozilla\Firefox\Profiles\<profile ID>.default\

Create new profile to examine

To test the suggestions it’s really recommended to create a new profile to experiment on. Then if the results were great you can set it as your default profile.

Make Firefox Faster

1. Optimizing Firefox for Broadband

In default, Firefox is optimized for dialup connections. If you are interested in optimizing Firefox for DSL or cable or Broadband connections, you need to edit config file in Firefox:

1. Type about:config into the Firefox address bar and press Enter
2. Then if Firefox shows a warning massage, press the button ‘I’ll be careful, I promise!’
3. Type network.http.pipelining into the filter bar to find it under preference name column. Then double click on it to change its value to True to enable HTTP pipelining.
4. Into the filter bar type network.http.proxy.pipelining to find it. Then change its value to True.
5. Then find network.http.pipelining.maxrequests. Right click on it and click Modify. The default value is 4. Change it to 15 as an ideal value.
6. Next make a new integer value (to do this right click on a blank space and click: New –> Integer) name it nglayout.initialpaint.delay and press OK. Finally set its value to 0 and click OK.
7. Finally create a Boolean value (to do this right click on a blank space and click: New –> Boolean) name it network.http.pipelining.firstrequest and click OK. Then set its value to True.

Also these are some advanced network settings for broadband user with at least a 2 Mbps (256 kB/s) connection. To use these tips just type about:config into the Firefox address bar and hit Enter. Then find them using the filter bar, next right click on them and select Modify, and change the value and click OK:

• Find network.dnsCacheEntries and change its value to from 20 to 512.
• Find network.dnsCacheExpiration and change its value from 60 to 3600.
• If your ISP doesn’t support IPv6, you can disable it. To do this just find network.dns.disableIPv6 and change it default value to True.
• Find network.http.max-connections and increase maximum number of simultaneous connections to 48 or 96.
• Find network.http.max-persistent-connections-per-server and increase maximum persistent connections per server from default 6 to 12
• Find network.http.max-connections-per-server and increase maximum connections per server from default 15 to 24

2. Loading large pages faster

Large and intricate web pages can take a while to download. Although Firefox doesn’t have any delay here but since in default it should shows you what it’s received every 0.12 seconds and this causes to increase loading the web pages. Well, to avoid this:

• Make an integer value (go to about:config screen, right click on a blank space and select: new –> Integer) then name it content.notify.interval and set its value to 500000. (It is five hundred thousand and not fifty hundreds)
• Make a Boolean value (go to about:config screen, right click on a blank space and select: new –> Boolean) then name it content.notify.ontimer and set its value to True.

3. Set Firefox to ignore some interrupts before loading pages

If you haven’t moved your mouse or touched the keyboard for 0.75 seconds then Firefox enters a low frequency interrupt mode, that means its interface becomes less responsive. To reduce the content switch:

• Make another Integer value (go to about:config screen, right click on a blank space and select: new –> Integer). Name it content.switch.threshold click OK and set its value to 250000 (one fourth of a second) then click OK to finish.
• To extend our tip to user interface create another Boolean value (go to about:config screen, right click on a blank space and select: new –> Boolen), name it called content.interrupt.parsing and set its value to False.

4. Set Cache

While you are browsing Firefox stores some scripts and images of the web pages in a local memory cache. And they can be retrieved faster if you open the same page. If you have plenty of Ram:

• Make an Integer value (go to about:config screen, right click on a blank space and select: new –> Integer), name it browser.cache.memory.capacity and set its value to 65536.
• Restart Firefox

5. Disable Delay Time While Installing Add-ons

Every time you want to install a Firefox add-on, you will have to wait for some seconds before the installation starts. To avoid this delay time:

• Type about:config into the Firefox address bar
• Then type security.dialog_enable_delay into the filter bar to find it
• Right click on it and select Modify. Then change the value to 0.

6. Optimize download options

On Firefox go to Tools –> Options –> Main. Then set your Firefox to:

• Close download window automatically
• Choose a folder to save your downloaded files
• Go to privacy tab and turn off download history.

7. Control animations

This would be one of the easiest configuration to limit animated images. Just follow the steps below:

• Type about:config into the Firefox address bar and press Enter.
• Type image.animation_mode into the Filter bar to find it.
• The default value is Normal. Right click on it and select Modify. Then change the default value to None and press Enter to stop all animated images.

8. Use Blank Homepage, Default Theme and  Minimal Extensions

• Set your Homepage to about:blank
• Use default theme
• Just install most-have Firefox extensions

9. Use Fasterfox add-on

Fasterfox in a helpful extension that allows you to tweak many network and rendering settings such as pipelining, DNS, simultaneous connections, cache and initial paint delay.

This extension works with Firefox 3.0.4 (doesn’t work with Firefox 3.5 right now)

Visit it

10. 4 Firefox download managers for Faster Downloads

Here I’m going to introduce four Firefox add-ons that help you to have faster downloads using Firefox. They also allow you to manage your downloads:

1. DownThemAll

I really recommend this download manager. It has almost all features that you can desire from a download manager. You can increase your download speed up to 400% using this Firefox add-on.

To add it to your Firefox, and see more screenshots click below:

Visit it

2. Download Statusbar

Another Firefox add-on that works as a download manager and let you view and manage downloads from a tidy status bar.

To see more interesting snapshot and to add it to your Firefox click below:

Visit it

3. Custom Download Manager

This is another Firefox download manager that you can show it on the side bar, tab or window. Also it’s compatible with Windows, Linux, MacOSX and support some different languages.

To see more features visit the page:

Visit it

4. Downloads in Tab

Another Firefox download manager that opens “Downloads” manager in tab from Tools menu or automatically when a download starts (default). It also let you have some more options.

Download

11. Block Flash

As you know there are many unwelcome flash files on many web pages. Since loading them causes reducing your Firefox speed it’s really recommended to use a Firefox add-on to block them all. FlashBlock causes that Firefox doesn’t load flash files automatically. But after loading web pages it gives you a play button to let you load every flash file you want.

To add the plugin to your Firefox click below:

Visit it

12. Use SpeedyFox

SpeedyFox is a small Firefox tool that optimize Firefox speed. Although you may not feel any difference if you try SpeedyFox on a fresh Firefox install, but it works great after you have been using Firefox for some time.

Top features:

• Boost Firefox startup
• Speedup browsing history
• Quicker operation with cookies

To us SpeedyFox just close Firefox. Then run SpeedyFox and point it to the profile you want to optimize. For more information and downloading SpeedyFox click below:

Visit it

13. Use an optimized build of Firefox

1) There is an optimized build of Firefox for both Windows and Linux users that is called Swiftfox. Swiftfox has builds for both AMD and Intel processors and is based on the most cutting edge Firefox source code available. To speedup Firefox speed and reduce Firefox memory usage that would be really recommended to use Swiftfox.

Download for Windows Download for Linux

2) There is another optimized build of Firefox called Pale Moon. Pale Moon is the customize built and optimized Firefox browser for Windows operating System.

Main Features:

• Highly optimized for current processors
• 100% Firefox sourced: As safe as the browser that has seen years of development.
• Uses less memory because of disabled redundant and optional code
• Significant speed increases for page drawing and script processing
• Support for SVG and Canvas
• Support for Firefox extensions and themes

To see more information and get download link, visit their page:

Visit it

14. Block unwanted banners

As you know loading unwanted elements reduce Firefox speed. There is a Firefox add-on that help you to block unwelcome banners, advertisements and pictures which is called Adblock plus.

To see more features and add it to your Firefox click below:

Visit it

15. Clean up bookmarks, avoid Live Bookmarks

To clean up bookmarks to avoid having duplicated or dead links use the CheckPlaces Firefox extension, and uninstall it after you’re done:

Download it

Firefox checks Live Bookmarks every hour for updates. Also it’s recommended to use a dedicated RSS reader.

16. Use Tweak Network

This is a Firefox add-on called Tweak Network. It will speed up the loading of web pages and increase the maximum number of simultaneous downloads from a site.

To add it to your Firefox click below:

Download it

Reduce Firefox memory usage

1. Restart Firefox

Sometimes Firefox memory usages grows up more and more and you need to free some memory to avoid Firefox using abnormal memory. Well, sometimes it would be useful to restart Firefox to free some memory.

2. Clear Firefox download history

Open Firefox and go to Tools –> Options –> Privacy then just leave Remember what I’ve downloaded unchecked and press OK.

3. Optimize content type handling

Opening files into Firefox needs big mount of memory. To avoid this go to:

Tools –> Options –> Applications

• Then set your files (like: pdf, zip, rar and etc…) to be saved instead of being open into Firefox. Finally press OK.
• Change Web Feed from Preview in Firefox to your favorite RSS reader.
• Set mailto to use your favorite desktop email client

4. Keep your Firefox up to date

It is really recommended to use newer versions of all Firefox extensions, Themes\skins, Plugins and … That is because of improving newer extensions, plugins and themes. Don’t forget to keep these plugins up to date forever: Adobe reader, Shockwave, Java, Flash.

5. Set Firefox to use less memory upon minimize

In default almost all software need less memory when you minimize them. But to set Firefox to work like this we should follow these steps:

• Type about:config Into the Firefox address bar and hit Enter.
• Then make a Boolean value (Right click and select New –> Boolean) and name it config.trim_on_minimize and set its value to True.
• Restart Firefox

Now you would be able to minimize Firefox to free some memory. In fact when you minimize Firefox its memory usage come down to about 8MB. But when you return it to desktop its memory usage grows slowly.

6. Set Firefox to have fixed size of memory usage

In default Firefox uses a percentage of memory on your computer. I mean if you had more memory, Firefox will use more memory. To avoid this in order to having a fixed size of memory usage for Firefox:

• Type about:config into the Firefox address bar.
• Then type browser.cache.memory.enable into the filter bar to find it. Then right click on it and select Modify. Next change its value to True.
• Then make an Integer value (Right click on a blank space and select New –> Integer) then name it browser.cache.memory.capacity. To set its value you should work according to mount of installed memory on your computer just as like as below:

7. Use RamBack Plugin

This is a helpful Firefox plugin that is called RamBack. RAMBack will causes Firefox to issue an internal notification to free up memory that is otherwise held for performance purposes.

Download it

8. Use Portable Firefox

If having free memory is a critical problem for you it is recommended to use Portable Firefox. Because of less memory usage of portable Firefox.

9. Disable “Back-Forward” cache

Firefox has a special “Back-Forward cache” for recently visited pages that works differently than the regular browser cache. In default Firefox saves up to 8 pages. To disable “Back-Forwarding”:

• Type about:config into the Firefox address bar.
• On about:config screen, type browser.sessionhistory.max_total_viewers into the filter bar to find it.
• Its default its value is “-1”. Change its value to 0 (Right click on it and select Modify then set its value to 0 and click OK to save more memory.

10. Increase Cache & Reduce History Size

• On Firefox go to Options –> Advanced –> Network and increase size of space for the cache under offline storage section.
• On Firefox go to Options->Privacy, use Custom settings for history, and reduce length of remembered history.

11. Remove unused search engines

Open Firefox and drop down in the search box. Then select manage search engines. Then simply remove every search engine that you never use.

Speedup Firefox startup time

One of disadvantages of Firefox is its startup time. It takes 5 to 30 second to start depending on your Firefox settings. Here we have put together some tricks to speedup your Firefox startup time:

1. Using Firefox Preloader

Firefox Preloader is an open source utility that is designed to load parts of Mozilla Firefox into memory before it is used to improve the its startup time. To see different version and get download like click below:

Visit it

2. Don’t let Firefox to check some options before startup

1. When Firefox starts, it usually checks for Firefox updates. Updates for all add-ons, search engines and its core. To turn them off go to Tools –> Options –> Advanced –> Update then uncheck all the Automatic Update checkboxes.
2. On Firefox go to Options->Advanced->General->Accessibility and Uncheck Always check to see if Firefox is the default browser on startup.

3. Set Firefox to start as fast as Google Chrome

I’ve tried this trick personally on XP and have seen that it really works. To apply this amazing trick just follow the steps below:

• Right click on Firefox shortcut
• Select Properties
• Switch to Shortcut tab
• In the target box add “ /Prefetch:1” to the end of the line (don’t forget to put a space before \Prefetch) and click OK.

• Finally open Firefox and enjoy!!!
• What does Prefetch do? Prefetch basically keeps apps “on hold” so they load faster

Set Firefox to have more screen space

There are some elements on Firefox that reduce the space for reading web pages and this would be a problem specially for small screen netebooks. So, these useful tricks maybe solve this problem.

1. Use Meerkat

Meerkat is a Firefox add-on that Optimizes the Firefox user interface to be more suitable to Netebook devices.

What Meerkat does:

• Hides the status bar when there is no activity
• Removes the menu bar, rebuilt into a drop down button placed on the navigation bar
• Adds downloads and bookmarks buttons to the right of the location bar, followed by above mentioned menu bar button
• Reduces the navigation bar icon size to the small setting

Typically Meerkat delivers about 60 pixels of vertical screen real-estate back to the user.

Visit their website to see more information and get download link.

Visit it

2. Hide Tabs

There is a Firefox add-on that allows to use two keyboard shortcuts to hide or unhide tabs and is called HideTab. It simply let you hide all of your current tabs using ALT+Q shortcut and also let you restore them again using CTRL+ALT+Q.

To add it to your Firefox click below:

Visit it

3. Maximize Firefox 3.5’s Viewing Area for Your Notebook

Whether you want to maximize Firefox viewing area for your notebook or your PC you should read this tutorial:

Your notebook’s screen is tiny and processor less than mighty, so you want to maximize the web page viewing area without any performance-killing Firefox extensions. Here’s how to consolidate Firefox 3.5’s chrome for your Windows or Linux-based notebook.

Even if you don’t have a notebook, these modifications still work if you want to consolidate Firefox 3.5’s chrome on your regular PC.

Continue reading from original source

Related Posts

The title is a bit funny! Making JavaScript angry! but truthfully we’re not going to make JavaScript angry. We just would like to introduce you some effects or solutions which you may think are made using Javascript (or his friends) but after reading this post, you would be proud of CSS! All of them are made using Pure CSS.

P.S. Some of the featured articles below are suitable for learning purposes and there are better solutions out there using jQuery or Javascript.

1. CSS Hover Effect

Learn how to use CSS to make hover effects for your content boxes.

Visit Article

2. CSS Gradient Text Effect

Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash).

Visit Article

3. Blurry Background Effect

Utilizing two images and CSS background-attachment property you can make a great CSS effect easily.

Visit Article

4. The CSS letterpress effect

This effect is getting so popular in today web design. With the help of the text-shadow CSS property you can easily implement this effect in your website/blog.

Visit Article

5. 3-state Button using CSS

Learn how to create a 3-state button using pure CSS image sprites.

Visit Article

6. Pure CSS Polaroid Photo Gallery

Make the beautiful photo gallery above just using CSS properties.

Visit Article

7. Pure CSS Animated Progress Bar

Here’s a simple demonstration of how you can create animated progress bar using pure css.

Visit Article

8. CSS Text Gradient

Improve your site appearance by using this technique by CSSG which uses a transparent PNG and some lines of pure CSS!

Visit Article

9. 4 Uber Cool CSS Techniques For Links

Including Pure CSS Tooltip, Pure CSS Image Gallery, Pure CSS Image Resizer, and 3d Button Effect.

Visit Article

10. Bubble Effect with CSS

In this tutorial you will learn how to make bubble effect with CSS something like apple dock.

Visit Article

11. Create Resizing Thumbnails Using CSS

“This tutorial is aimed at controlling the size of the thumbnails appearing on your page. Sometimes we don’t have enough space to spare to fit in large thumbnails and yet we would like to avoid small and barely recognizable images. Using this trick we limit the default dimensions of the thumb, and show it in full size when user mouse-overs it.”

Visit Article

12. Pure Css Line Graph

Learn how to make line graphs with CSS and definition list elements (DL).

Visit Article

13. Pure CSS Data Chart

Data visualization is mostly achieved with flash applications or with help of some programming languages. But this tutorial will teach you create one by pure CSS.

Visit Article

14. CSS for Bar Graphs

In this tutorial, you will use CSS & XHTML to make beautiful bar graphs both vertical and horizontal. Another CSS Graph.

Visit Article

15. CSS Image Maps

Above is a sample image map that’s built entirely using CSS and XHTML

Visit Article

16. Pure CSS Lightbox

Yes, it’s a CSS-only lightbox effect right click on the demo page and view it’s source.

Visit Article

17. Change Text Selection Color With CSS

Learn how to override the default text selection color using CSS.

Visit Article

18. CSS Bubble Tooltips

Avoid cross-browser javascript when you can use css to make tooltips with less code. More Pure CSS Tooltips: 1 , 2 , 3

Visit Article

19. CSS Hover Effect

Multi-level drop-down menu that’s built entirely with CSS (without any JS).
More:

• Drop-Down Menus, Horizontal Style
• Elegant Drop Menu with CSS only
• GRC’s Script-Free Pure-CSS Menuing System
• Tutorial: CSS Multilevel Dropdown Menu

Visit Article

20. How to Create CSS Menu using Image Sprites

The number 19 was for multi-level CSS Menu, here you will learn how to create on-level image-based CSS menu with hover effect.

Visit Article

21. CSS Tabs

DOM tabs which will still work for javascript-disabled browsers

Visit Article

22. The CSS-Only Accordion Effect

Most JavaScript frameworks make such an effect fairly easy to pull off – heck, MooTools even built their reputation on it in the early days. So what makes this accordion effect special? It doesn’t require a single line of JavaScript.

Visit Article

23. Cross-browser drop shadows using pure CSS

This tutorial tries to provide a solution to make a cross-browser drop shadows using CSS. There are some advantages and disadvantages using the technique.

Visit Article

Related Posts

Nowadays, using jQuery effects is getting  increasingly popular within web templates and if you check some of new designed themes on themeforest , you probably can’t find a popular theme without any kind of jQuery effects. One of those effects that designers use it widely is jQuery image slideshow or image gallery which can be implemented easily by lots of free jQuery slideshow plugins and tutorials featured here.

In this post,  I’ve tried to cover both available tutorials and plugins to let learn how to create simple jQuery image sliders as well as simply use ready-to-use plugins.

Please don’t forget to subscribe to our RSS Feed or Follow us on twitter for more resources.

jQuery Slideshow/Slider Tutorials

1. A Simple jQuery Slideshow

As the first tutorial, you can take a look at this one to create a simple slideshow using jQuery, JavaScript and a bit of CSS.

Visit it

2. Create a Slick and Accessible Slideshow Using jQuery

This is an in-depth tutorial that help you to learn how to create a usable and web accessible slideshow widget for your websites using jQuery, HTML and CSS.

Visit it

3. Building a jQuery Image Scroller

In this tutorial you will learn how to create an image scroller using jQuery and its great animation features. Although creating an image scroller is not something new, but this scroller would be different because it would be completely autonomous and will begin scrolling one the page loads.

Visit it

4. Sliding Boxes and Captions with jQuery

In this jQuery tutorial you will learn how to create some sliding box animations that are based on the same basic idea. There is a div tag that essentially acts as a window where two other items of your choosing “peek” through.

Visit it

5. Creating an Image Slider

In this jQuery tutorial the author is going to explain how to create a jQuery effect. When a holder is hovered over the top image slides down to reveal the image underneath. The author also explains how to use position absolute to float an image in the top right to show the image in new.

Visit it

6. Create Beautiful jQuery slider tutorial

As a jQuery tutorial, this item would be really helpful when you need to create a beautiful jQuery sliders with image description and names.

Visit it

7. Simple JQuery Image Slide Show with Semi-Transparent Caption

This jQuery tutorial would help you a simple image slide show with a semi-transparent caption. This would be really suitable to display news headlines.

Visit it

8. Create a Simple Image Slide Show using jQuery

This jQuery tutorial is about creating slideshow that the number of image tags are not fixed.

Visit it

9. Slide and hide section with jquery

To create a perfect jQuery effect (just as like as you are seeing in the picture above) just visit their website to read that jQuery tutorial.

Visit it

10. Making a Slideshow with jQuery

This would be another jQuery tutorial to create a slideshow. The preview above says all about itself.

Visit it

11. jQuery – Creating a Slideshow

Learning this jQuery tutorial helps you to create a slideshow. Also you would be able to use the slideshow to display everything you like putting in HTML.

Visit it

12. Simple jQuery slideshows

Just another jQuery tutorial to create a simple jQuery slideshow.

Visit it

13. Creating a Slick Auto-Playing Featured Content Slider

Amazing tutorial that allows you to have kinds of fun way to show many content in a small area.

Visit it

14. How to add Slideshow to jQuery lightbox plugin

In this jQuery tutorial you will learn how to extend a jQuery lightbox plugin to have a slideshow.

Visit it

15. jQuery Slideshow Explained

Learn how to implement a jQuert slideshow from scratch.

Visit it

jQuery Slideshow/Slider Plugins

1. Supersized jQuery Plugin

The preview above can describe the plugin’s function completely.

Visit itDemo

2. The Easiest jQuery Plugin For Sliding Images and Content

This is an easy to use jQuery plugin for sliding contents and images. The features of this jQuery plugin are listed below:

• auto slide
• continuous sliding
• “go to first” and “go to last” button
• hiding controls
• optional wrapping markup for control buttons
• vertical sliding
• multiple sliders on one page

Visit it

3. GalleryView: A jQuery Content Gallery Plugin

This jQuery plugin is called GalleryView. It aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize.

Visit it

4. Image Flow

In fact Image Flow is inspired by Apple’s cover flow. The javascript renders the cover flow effect without any noticeable flaw. Keyboard navigation (arrow keys), mouse scroll and dragging is supported. Very cool script to use.

Visit it

5. S3Slider jQuery plugin

s3Slider is a free plugin built in jQuery for cross-fading slideshow.

Visit it

6. Spacegallery – jQuery plugin

This jQuery plugin is called SpaceGallery which provides a great new visual effect for your images.

Visit it

7. A ‘pro’ jQuery image slider built on a single unordered list

slideViewerPro is a fully customizable jQuery image gallery engine wich allows you to create outstanding sliding image galleries for your projects and/or interactive galleries within blog posts.

Visit it

8. EOGallery

EOGallery is a web animated slideshow gallery made with jQuery. It only uses basic jQuery functions.

Visit it

9. Smooth Div Scroll

This is a jQuery plugin that scrolls content horizontally left and right. This jQuery plugin is called Smotth Div Scroll. As the name of the plugin hints, scrolling is smooth. There are no visible buttons or links since the scrolling is done using hot spots within the scrollable area or via autoscrolling.

Visit it

10. jQuery virtual tour

This jQuery plugin would be really amazing to have some great effects to create a virtual tour.

Visit it

11. Ultimate Fade-in slideshow

Another jQuery slideshow plugin in our list. I have just listed the features below:

• Sleek fade in effect that has the current image fading over the previous one.
• Ability to display images either as an automatic or manual slideshow. In manual mode you define your own “prev/next” controls to let the user go through the slides.
• In automatic mode, slideshow can be set to stop rotating after x cycles.
• Each slide can be optionally hyperlinked.
• Each slide can have an optional description associated with it. Descriptions can either be set to show on demand (when the mouse rolls over the slide), or be always visible until explicitly dismissed.
• Persistence of last viewed slide supported, so when the user reloads the page, the slideshow resumes from the last slide.
• Slideshow automatically pauses on Mouseover.

Visit it

12. homejQuery Cycle Plugin

A lightweight slideshow plugin that is called jQuery Cycle. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects.

Visit it

13. Open Source Flickr Photo Gallery Using jQuery

Here I’m going to introduce to you another jQuery plugin called FlickrPhotoGallery. This is an open-source photo gallery for jQuery that allows you to dynamically pull images from a photoset in Flickr.

The main functionalities of this gallery are listed below:

a) Pulling images in from a Flickr Gallery

b) Growing or shrinking the gallery area depending on the size of the images

c) Offering a lightbox effect for small images

d) All features above can be turned off

Visit it

14. A jQuery image slider built on a single unordered list

slideViewer is a lightweight (1.5Kb) jQuery plugin which allows you to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images

Visit it

15. Pirobox

This is another jQuery plugin we are going to feature. All features are listed below:

• The script weight has decreased by 40%, now weighs only 15KB, (9KB Minified)
• There is a choice between three different styles (shadow,white or black)
• Slideshow option
• Multiple image set option
• PngFix for Internet Explorer 6
• Keyboard navigation: Right arrow [next], Left arrow [prev], ESC [close]
• Previoue and Next buttons outside or inside the imageBox.
• Broken Link Check
• Automatic repositioning of the image in the browser window
• Browser compatibility = FireFox 2+, Opera9.5+, Chrome, Safari (Mac/Windows),IE 6+

Visit it

16. Dynamic Image Gallery and Slideshow

This extremely lightweight JavaScript image gallery and slideshow script clocks in under 3kb packed and includes a number of cool features. You can also imagine that a full-featured slideshow gallery under 4kb.

Visit it

17. Supersized – Full Screen Background/Slideshow jQuery Plugin

Supersized is a full screen background/slideshow jQuery plugin with these features:

• Resizes images to fill browser while maintaining image dimension ratio
• No extra whitespace, no scrollbars – the entire browser window is always filled
• Compatible in Firefox, Safari, Opera, IE7, and IE6
• Ability to cycle through images/backgrounds via slideshow

Visit it

18. Slideshow

This jQuery plugin simply creates an image slideshow. The slideshow can autoplay slides, each image can have caption, navigation links: next, prev, each slide.

Visit it

19. Accessible News Slider

As the author has described this jQuery plugin, Accessible News Slider is a JavaScript plugin built for the jQuery library.

Visit it

20. Moving Boxes

Although this is another jQuery plugin in our list, but it has a big difference. The big difference here is that there are buttons to change panels and the panels zoom in and out. Fun!

Visit it

21. jQuery.slideShow

Although the preview above describes all about this jQuery plugin, but to make it more clear we can say: “this is a very simple and very easy to use slideshow plugin for jquery. It will automatically create a slideshow with navigation out of your image list. “

Visit it

22. Simple Controls Gallery

This jQuery plugin would be really useful for who wants to display images as an automatic slideshow that can be also explicitly played or paused by the user. More features are listed below:

• Displays images either as an automatic or manual slideshow, with the image faded into view over the previous. A Navigational Panel slides up when the mouse rolls over the gallery to play, pause, or step through to a specific image within the gallery.
• In automatic mode, set the number of cycles before the script stops rotating. New in v1.3
• Each slide consists of an image that can be hyperlinked.
• Each slide can have a description associated with it. When defined, a Description Panel slides down from the top of the gallery showing the description. New in v1.3
• The gallery supports persistence of the last viewed image via session cookies, so going away then coming back to the gallery calls up the last viewed image within a browser session.

Visit it

23. YMslider plugin

It is a simple dynamic, light-weight (2,1K) and non-intrusive content slider jQuery plugin, fully CSS customisable (theme support) with respect of accessibility and W3C standard rules (strict xHTML valid) …

Demo

Download

Related Posts