Archive for Tutorial

Tutorial: How to add an image gallery to your Wordpress post

// October 4th, 2009 // 1 Comment » // Blogging, Design, Design Resources, Tutorial, Useful, Video Tutorials, Videos, Website Templates, Wordpress, Wordpress Themes, Wp Themes, blog, web tools, webdesign, webmaster, wordpress tutorials


A gallery will display a set of thumbnail images attached to that post or page. If you upload images using the Add an Image icon, they will get attached automatically. If you upload images using the media library, you will need to attach it to a post or page before it will appear in a gallery.

Here is a video tutorial on how to add an image gallery to your blog post:

30 Wordpress Video Tutorials




Don’t Miss Out on Local SEO Opportunities

// July 21st, 2009 // 2 Comments » // Affiliate Networking, Blogging, Code, Design, Featured, For Geeks, Geeks, SEO, Tutorial, free


Don’t Miss Out on Local SEO Opportunities

Local search engine optimization is a great way to charge up your search rankings. It’s a faster method for making sure you’re on the right track, and if optimized properly you can really take advantage of some targeted traffic that will only help your business in the future.

It doesn’t matter if you’re developing websites for a mom and pop local plumber or a multi-million dollar agency that will have thousands of dynamic pages, the same 13 steps to on-site SEO will need to be applied to each.

How to Write Blog Posts to Increase Search Engine Traffic – Here’s an easy formula to follow:

  • In your blog, write a post with keyword A in your title something catchy, more info on that over here at seomoz or copyblogger
  • Write in-depth and informative content related to keyword A
  • Target keyword A in a link from your post to page2.html
  • When appropriate, link out to other authorities that can offer more information about your keyword topic (Use this tip with caution. While you are trying to give the user more info and get the attention of the other site – thus possibly getting a link back to your site – you should try to strike a balance so that the effectiveness of your post is maximized without excessive links out from your site)
  • Remember to vary the way you link keyword A to page2.html (did you target long-tail keywords? Those are very easy to alter)
  • Repeat this process on each post for all pertinent keywords throughout your site

The nice thing about this formula is that you actually tackle quite a few of the common marketing questions that challenge many business owners.

Read this full article at alibiproductions.com

Also check out this blog –  Why No One Links to Your Best Posts (And What to Do About It) – Visit http://www.copyblogger.com/ for some really useful tips on Blogging and getting the attention you need to be successful blogger.




15 Useful Wordpress Tricks to Make Your Theme Even Better

// July 13th, 2009 // 1 Comment » // Blogging, Code, Design, Design Resources, For Geeks, Geeks, I recommend, Tutorial, Wordpress, Wordpress Plugins, Wordpress Themes, Wp Themes, web tools, webmaster, wordpress tutorials


Wordpress is a very powerful CMS (Content Management System). It has tons of capability and can be extremely powerful. There’s only one thing in the way from all of this power and you as the blog owner – your theme. See, no matter how many awesome features such as threaded comments or breadcrumb navigation or even an “edit” link beside each post are added, you’re limited by your theme that you are using. If you theme isn’t “smart” enough to use these features, well, quite frankly, you can’t use them.
This is a post for all the Wordpress theme developers out there. Here are only a few of the many great snippets of code that will take your current theme creation and make it that much better. Please, use them.

Read the rest of this post..




Tutorial – Design a Beautiful Website From Scratch

// July 4th, 2009 // No Comments » // Design, Design Resources, Featured, For Geeks, Graphic Design, I recommend, Tutorial, Useful, Website Templates, Wordpress Themes, free, webmaster, wordpress tutorials


Have you ever wanted to design a beautiful website but just didn’t know how? To be honest, a few years ago, that happened to me too. While browsing the web, I saw so many nice looking websites and wished I had the skills to create such designs. Today I can and I’m going to teach you how to do so too! Essentially, it requires a few Photoshop skills and an eye for detail. Through this tutorial, I will point out these tiny details which make a website design look beautiful. Fire up Photoshop and let’s get going!

Author: Marko Prljic

Design a Beautiful Website From Scratch

The final PSD designs are, of course, on sale at ThemeForest.net.




Web design build questions to ask (yourself) or new clients

// June 11th, 2009 // 1 Comment » // Blogging, Code, Design, Design Resources, For Geeks, Geeks, Tutorial, Useful, webdesign, webmaster


Working Girl

If your a webmaster or web designer I highly recommend you read the rest of this post at www.simonday.com

This is a great resource for anyone who does freelance design or builds websites.

Web design build questions to ask (yourself) or new clients

What do you want the web site to do for your company?
(is it to just promote brand awareness and for people who hear about them and then go to their site, will people be finding them through search engines, is it existing clients looking for support or news, are you selling online, are you offering downloads, company reports etc)

Who is your target audience (age / level of internet experience etc)?
(Do they require a modern, fast paced, highly graphical site to target the younger generation or a more user friendly site for the less experienced or older internet users. )

What image do you want to portray (Professional / Casual / cutting edge etc)?
(Some sites use white space and limited text to give a relaxed feel while others use lots of images and text to give the site a busy feel. Define the feel of the site)

If you have branding what colours, fonts, styles do you use?
(See business cards, letterheads etc). More often that not the sole trader will have no graphics, no logo and no identity so in these cases you need to ask the client for colour schemes they think fit with the ideas but also do market research on the competition because the client may not be right.

CORE QUESTIONS:

What do you absolutely definitely want on the site?
(This list could include blog, shopping cart, members log in, private areas, RSS feeds. Gallery newsletter, contact forms, advertising space, different languages, search facility, etc)

What would you like if possible/within budget?

What absolutely must be on the homepage and what is the order of priority?
(This is a core question and you should allow the client time to ponder and discuss this with you. Their answers here should define the position of the building blocks. The answers could be phone number, email, help icon, downloads, cart total, core product links etc.)

What must be visible at all times?
(Every page has a fold. A fold is below the visual part of the page and requires you to scroll down to see it. I have a height I use but you should decide for yourself where it should be. The client must understand this and agree what can go above and below).

How many links will be needed and how many levels of navigation will there be?
(You need to understand the journey paths and decide how far down the link structure will go (level one, level two, level three etc)




30 Tutorials On Converting A PSD To XHTML And CSS

// May 25th, 2009 // No Comments » // Artists Shoutouts, Blogging, Cool Links, Cool Websites, Design, Design Resources, For Geeks, Geeks, Graphic Design, I recommend, The Best of.., Tutorial, Website Templates, web tools, webdesign, webmaster


30 of the best tutorials on web for converting A PSD to a XHTML & CSS layout. These tutorials you will learn the process on how to create a Photoshop web layout and be able to convert it into a valid XHTML & CSS web page. The tutorials are a step by step process which are easy to follow and keep up with.

Cool Design Links:




Best Wordpress Podcasts

// May 21st, 2009 // No Comments » // Blogging, Design, For Geeks, Geeks, Ipod, Tutorial, Useful, Wordpress, Wordpress Plugins, Wordpress Themes, web tools, webdesign, webmaster, wordpress tutorials


 Here is a short list of some Podcasts about Wordpress. Some of them do a pretty good job at being entertaining and geeky at the same time. :) I can dig it.

WordCast Podcast

Join Beth Skinner, Kym Huynh and Dave Moyer each week to hear all about the latest in WordPress and the blogging world! You’ll be incredbly informed with all the coolest plugins, the best looking themes, awesome interviews, the latest news, and much, much more

WordPress Weekly Podcast

WordPress Weekly is a podcast hosted by Jeff Chandler and co host David Peralty from WP Tavern and Jeffro2pt0. The show is produced live every Friday evening at 8 P.M. EST (USA). Discussed are a wide range of topics around the WordPress community.

The WordPress Community Podcast

Great podcast delivery by Charles Stricklin and Jonathan Bailey gives lots of information on anything happening in the WordPress world. Unfortuantely shows are not weekly, more monthly.

WordPress Plugins Podcast

Almost every week Angelo Mandato covers one WordPress plugin with occasional interviews of plugin developers for around 15 minutes.

The Theme Playground WordPress Podcast

The Theme Playground Podcast is a podcast for WordPress developers. Created and run by Ryan Imel and joined by J. D. Bentley.

 




How To Be A Rockstar WordPress Designer

// May 18th, 2009 // No Comments » // Admin Tools, Affiliate Networking, Blogging, Code, Design, Design Resources, I recommend, Premium Wordpress Themes, Tutorial, Useful, Website Templates, Wordpress, Wordpress Themes, Wp Themes, web tools, webdesign, webmaster, wordpress tutorials


How To Be A Rockstar WordPress Designer

Managing web content has always been tricky, but with WordPress, any web designer can have a flexible, free and powerful CMS to use not just on blogging projects, but on all sorts of websites. In How To Be a Rockstar WordPress Designer you will learn step by step how to take a straight HTML site and power it with WordPress.During the course of the book you’ll build THREE WordPress themes, a blog, a portfolio site and a general site with menus and submenus. Each theme demonstrates different aspects of WordPress theming and all three are packaged with the book so you’ll have Photoshop, HTML, CSS and WordPress PHP files to refer to..

The book is aimed at anyone with a solid understanding of HTML/CSS. You don’t need to know PHP, you don’t need to have ever even touched WordPress before. The examples begin from scratch and build on each other, while basic PHP principles that are used are explained in an easy to understand manner.If you’ve ever wanted to get started with WordPress theming, or you’re looking to take your skills to the next level with advanced theming concepts, this is the book for you!

Price: 29.00 USD

You are buying this product directly from Rockable Press. Please contact Rockable Press for ANY questions related to this product or purchase.

212 Pages of Expert
Freelancing Advice

Covering everything from getting started to expanding your business, How to Be a Rockstar Freelancer is the official Freelance Switch book. Written by Collis & Cyan Ta’eed – the founders of the site – it’s packed with new information, advice and insights not covered on the blog.

If you want to start your freelance career the right way, then How to Be a Rockstar Freelancer will give you everything you need to become the best freelancer in town!




30 Excellent WordPress Video Tutorials

// May 16th, 2009 // No Comments » // Blogging, Code, Cool Links, Design, Design Resources, For Geeks, Tutorial, Useful, Video Tutorials, Videos, Wordpress, Wordpress Plugins, webdesign, webmaster


WordPress is one of the most popular publishing platforms currently out on the market. It’s free, highly-customizable, and very easy to install and use. Because of its popularity, you’ll find a wide array of resources that discuss WordPress development, administration, as well as plenty of user guides to help you get started quickly.

In this article, we take advantage of the merits of learning by way of watching video tutorials and screencasts. Video tutorials allow you to learn by following along with the instructor in real-time – a format that’s very effective for many people.

You can use these video tutorials a couple of ways: to learn about WordPress yourself or to send to your not-so-technology-inclined clients as a reference to help them get started. You’ll find the tutorials organized into several topics that include theme development and customization, site administration, beginner’s tutorials, and using some WordPress tools.

Read the rest of this post




The Most Awesome Resource List – 4 Webmasters

// March 3rd, 2009 // No Comments » // Admin Tools, Blogging, Cool Links, Cool Websites, Design, Design Resources, Featured, Fonts, For Geeks, Free Logo Templates, Geeks, Graphic Design, Graphics, I recommend, Icons, Rss Feed Icons, The Best of.., Tutorial, Useful, Wordpress, free, icon sets, web tools, webdesign, webmaster


BADGES

Web 2.0 Badges – A set of free badges to download and use in your own designs.

Fresh Badge – Quickly generate your own badge.

adClustr – Starburst badges.

Deziner Folio – A collection of different badges.

BittBox – Free vector badges.

Official Seal Generator – An alternative to the typical badge.

Photoshop Tutorial – A quick lesson on making your own badge.

Glossy Photoshop Tutorial – Create a glossy badge with this tutorial.

BUTTONS

mycoolbutton.com

My Cool Button – A nice online tool that will help you to quickly create the button that you want.

Adam Kalsey’s Button Maker – Simple tool to make your own buttons.

Button Maker from Blog Flux – Create your own custom button.

Brilliant Button Maker – A similar button maker to the previous 2.

CSS Buttons – Choose the text, border, and background.

Buttonator – A paid option for creating buttons.

RSS Button Maker – The name pretty much says it all.  

Button Boost – A little bit different than some of the other button generators.

ButtonGenerator.com – Create buttons for navigation menus.

Crystal Button – Slick web buttons made easy.

Chicklet Creator – Create buttons that allow visitors to subscribe in their feed reader of choice.

elegantthemes.com

ROUNDED CORNERS

Rounded corners are a staple in web 2.0 design. Here are some tools and scripts that will help you to quickly create your own rounded corners.

2009-03-03_142329

RoundedCornr

Corner Shop

Spiffy Box

Canvas Corner

Spanky Corners

Sliding Doors Text Box

Smart Rounded Corners

Rounded Corners in CSS

News List

LOGOS

Each of these tools will create a simple web 2.0 style logo.

Logo Creatr

Web 2.0 Logo Creator

Web 2.0 Logo Creatr

Web 2.0 Logo Creator

Web 2.0 Stylr

ICONS

A web 2.0 site can’t ignore icons. Here are some free collections of icons to use in your own projects.

Web 2.0 icons

UtomBox – A great collection of web 2.0 icons.

Feed Icons – The standard RSS icon.

Map Icon Factory – Create your own map icon.

Perishable Press – A nice collection of RSS icons.

Glass Style RSS Icons

Snap2Objects – Vector RSS icons.

31 Sources of Quality, Free Icons

GRADIENT IMAGES

Another common element of web 2.0 is gradient images. Here are a few tools to help you.

Gradient Image Maker

grsites.com

GRSites Gradient Generator – use this generator to create a gradient background, the possibilities are endless and it’s super easy to use.

Online Gradient Image Maker (OGIM)

SPEECH BUBBLES

Speech bubbles are commonly used for styling comments or blockquotes.

Speech Bubbles from Will Mayo

Will Mayo

Bubblesnaps

CSS Play

XHTML Speech Bubbles

WigFlip

Fluid CSS Speech Bubbles

MySpace Speech Bubble Generator

Photoshop Tutorial

BACKGROUND IMAGES

Background Image Maker – Create background images with choices like transparency and gradients.

Stripe Generator 2.0 – If you’re looking to add a striped background to an element on your page, you can use this tool to customize the look you want.

Stripe Designer – Easily create striped images.

Tartan Maker – Create a tartan background image.

Texture Generator – Creates textured images that you can use as a background.

All Free Backgrounds – Choose the background you want.

COLORS

The Colors of Web 2.0 – Are you looking to match the color of a popular web 2.0 site?

Web 2.0 Color Pallete – Popular web 2.o colors.

Color Schemer Gallery – Having problems choosing a color scheme? Find one you like in this gallery.

COLOURlovers – More samples of color combinations.

Website Color Picker – Test color combinations quickly.

I Like Your Colors – Get the colors used by a particular site.

NAVIGATION

CSS Menu Generator – Easily create attractive CSS menus.

Listamatic – Collection of CSS menus.

List-O-Matic – Create your own CSS menus.

List-U-Like – Another tool to create your own navigation bars.

Tabs Generator – Create tabbed images for navigation.

Flash Buttons – Create navigation menus with flash buttons

CSS Play – An extensive collection of CSS menus.

Exploding Boy – Tabbed CSS navigation menus.

CSS Navigation Menu Generator – A tool to help you create your own menu.

FAVICONS

Favicon Generator – Create your own favicon from an image on your computer.

Favicon from Pics – Create a favicon from a photo.

Favicon Editor – Upload a photo, create a favicon.

Favicon.cc – Another option for favicons.

Photoshop Tutorial – Creating a favicon with Photoshop.

CHARTS

PHP/SWF Charts – Create attractive charts.

amCharts – Flash charts.

elegantthemes.com

OTHER

Avatar Maker – Create and edit an avatar.

Shrink Pictures – Create an avatar from your photo.

ScaleNine – Collection of skins and themes created for Flex and Adobe AIR.

VectorMagic – Converts bitmap images to vector art.

Templatr – Create a layout.

PsycHo – Blog template generator.

Web 2.0 Generator – Creates layouts.

Typetester – Compare fonts on-screen.

BlogPoll – Create a free poll for your blog.

RSSxl – Convert an HTML page to RSS.

Meta Tag Generator – Easily create meta tags for your pages.

URL Rewrite – Create search engine-friendly URLs for dynamic pages.

.htacces generator – Quickly create an .htaccess file.

Thumbnail Generator – Create thumbnails for a large amount of images.

Reflection.js – Adds reflections to your photos.

Drop Shadow – Improve your images with a drop shadow.

CSS Sprite Generator – From Website Performance.

Vecteezy – Stupid name. Cool vectors.

Brusheezy – Photoshop brushes.

PSBrushes.net – More Photoshop brushes.

deviantART – Photoshop brushes at deviantART

WooThemes - Finally a themes club that is here to stay

Free PSD Resources- Site List

photoshopfiles.com

officialpsds.com

psgalaxy.com

freepsd.com

designbum.net

deviantart.com

psdfreebee.com

toptut.com

downloadpsd.com

photoshopcandy.com


Sketchbook Scribble Brushes by ~InvisibleSnow on deviantART


cool brushes by ~XxMortanixX on deviantART


Urban Scrawl Photoshop Brushes by ~InvisibleSnow on deviantART




iPod ~ Download YouTube videos as MP4

// March 2nd, 2009 // No Comments » // Applications, Browsers, For Geeks, Geeks, Ipod, Mobile, Movies, Tutorial, Useful, Videos, google, web tools


youtube1videos-altyoutube-altyoutubemxtubeyoutube3

An interesting side-effect of YouTube’s recent push for higher quality videos is that most videos can be downloaded as MP4 files directly from YouTube. Until now, you could only get FLV files from your browser’s cache or using one of the many websites that let you download YouTube videos. In fact, to download the MP4 files, you need to use the same URL like for FLV files and append “&fmt=18″:

http://www.youtube.com/get_video?video_id=ID&t=SIGNATURE&fmt=18

ID is the video’s identification value, SIGNATURE is a value that prevents you from downloading the file just by knowing the ID. You could create this URL by looking at the source code of a YouTube page, but it’s much easier to automatically generate it.

Add the bookmarklet, this post has more detailed instructions

When you want to download a YouTube video, just click on the bookmarklet.

After clicking on the download link, YouTube will try to save the video as “video.mp4″. You should enter a more appropriate name if you want to find the video later.


Having to click on the bookmarklet is annoying, so this Greasemonkey script is a better alternative because it adds the download link automatically. It requires the Greasemonkey extension for Firefox or a similar plug-in for userscripts. Opera has built-in support for userscripts, so you only need to go to Tools > Preferences > Advanced > Content > JavaScript options, select the directory where you will put your script and copy the script to that directory.

YouTube’s MP4 files have a higher resolution, stereo sound and can be played with applications like VLC, MPlayer, iTunes, QuickTime. Not all YouTube videos can be downloaded as MP4 files and the fallback format is FLV.

Note that YouTube’s terms of use require you “not to access User Submissions or YouTube Content through any technology or means other than the video playback pages of the Website itself, the YouTube Embeddable Player, or other explicitly authorized means YouTube may designate,” so these scripts could break YouTube’s policies. The scripts only download files that are used by YouTube’s player, so you may also find the videos in your browser’s cache.

Update: You no longer have to right-click and select “save link as” because YouTube sends the right MIME type. Just click on the download link.

Update 2: If the video is available in HD, the bookmarklet and the script download the HD version. Thanks, pepemosca!

google

Useful Google Tips




How to Customize your Feedburner Headline Animator

// February 16th, 2009 // 1 Comment » // Admin Tools, Blogging, Design, For Geeks, Geeks, I recommend, RSS Feeds, Tutorial, Useful, Wordpress, Wordpress Themes, free, web tools, webmaster, wordpress tutorials


A good way to promote your site is by using Feedburner for your RSS Feeds. One of their cooler features is their Headline Animator widget and if your anything like me and you love to design graphics then this can be a fun little project for you to add to your site.
For those of you who are not familiar with Feedburner..First you will have to register at Feedburner and burn your blog.
Once you’ve done that,  log into your account,  select your feed,  click on the “Publicize” tab and look for the Headline Animator service which is listed in the left-hand side bar.
Under “Theme” select “provide your own background” from the drop down list. Required (GIF only).

Create your graphic in Photoshop. I created a .gif that was 243px × 110px pixels and a 468×60px .gif.  (view them below)

Your Headline Animator will be the same size (height and width) as the background image. Play around with different shapes and sizes. Once you’ve uploaded the new graphic, feedburner allows you to drag and drop the animated text where it needs to be on the graphic and the length of the animated text box. You can also choose the text color of your font and the size. You don’t have a lot of control but you can play with it to make it look pretty cool if your creative. If you decide to make one..make sure to post your link here so we can all check out your creation.

If you have any questions or if you get stuck feel free to leave your questions here or check out Feedburner’s FAQ.

Design Resources for Bloggers

Free Design Resources

Divageekdesigns.com - Free Design Resources for Bloggers




Creating a Wordpress Theme From Scratch – Screencast Series…

// February 16th, 2009 // No Comments » // Admin Tools, Blogging, Code, Design, Design Resources, For Geeks, I recommend, Tutorial, Useful, Video Tutorials, Videos, Wordpress, Wordpress Themes, free, web tools, webdesign, webmaster, wordpress tutorials


wordpressweek

Check out this Wordpress for Designers screencast series by In the Woods Blog by Themeforest.net

The following screencast is day #3 which is explained below:

WordPress for Designers: Day 3

Moving right along into day three of our Wordpress for Designers series; today we will start creating our own theme from scratch. We will have a close look at how exactly to go about setting up your themes stylesheet and information, as well as creating the index.php page. In addition, we will examine wordpress template tags, what they are, and how to use them properly.




Wordpress TV

// January 25th, 2009 // No Comments » // Blogging, Tutorial, Video Tutorials, Videos, Wordpress, webmaster


WordPress TV launched earlier last week (go to http://WordPress.tv to view it). The concept of WordPress TV is similar to Adobe TV — it’s a multimedia site loaded with a ton of video tutorials and other video content, only WordPress TV is more user generated. Here’s a video introducing WordPress TV:

wordpress-logo1




Rockstar WordPress Designer On Sale Today!

// January 17th, 2009 // No Comments » // Blogging, Code, Featured, For Geeks, Geeks, Headline, Tutorial, Useful, Wordpress, Wordpress Themes, Wp Themes, webdesign, webmaster


wp_300x250

How to be a Rockstar Wordpress Designer was put together by two of the brightest minds online and Wordpress gurus.

In the last few years WordPress has been growing as an essential tool in the web designer toolkit. Between regular blog themes and the increasing number of themes that turn WordPress into anything from a portfolio site to a shop, its use as a general purpose CMS has made it a staple of web design tutorials and galleries.

Rockable Press book is on sale - How to Be a Rockstar WordPress Designer, co-authored by Collis Ta’eed and Harley Alexander – whom you of course know from tutorials on NETTUTS!

Purchase It Online Now!


Purchase a PDF copy of the book online and pay via PayPal.