Archive for the ‘Recent Posts’ Category
03/08/09 by admin | Recent Posts, Web Design | No Comments »
20 +ways
Blog
TO PLAY IN YOUR
The joy of CSS. Here we are using font sizes, margins, floats, and line height to position the text exactly where we want it.
…if you want to
spice up your webpage or blog,
then using these little
CSS code snippets will do the trick…
Looking for ways to spice up your blog posts? Even if you are new to blogging, you can use these little CSS techniques to give your page some variety and attract the attention of your reader.
Mandarin Design has a ton of code snippets you can grab and paste directly into your post quickly and easily.
Here are just a few of the examples they share:
1. Text Overlays using CSS
2. Centered Border Box
3. CSS Magazine Style Pullquotes
4. Opacity Blending Effects
5. CSS Background Images
6. Overlay Text on an Image
Not to mention the two I’ve included here. The top is an example of a magazine style header, while the pullquote on the right side would be perfect for adding testimonials or even emphasizing your topic to get your reader interested.
And this is all done by using inline CSS styles! Visit Mandarin Design to see all of the examples and then try a few in your next post.
01/27/09 by admin | HTML Tips, Recent Posts | 1 Comment »
I think we’ve all been in this position where we want to show our images yet when hyperlinked (or because of the css code), we end up with ugly borders (usually blue). I’ve noticed it on this theme and will now have to make the changes…grrr.
In wordpress, the image properties has a section called “border” in the advanced tab of the image settings area. By simply putting a 0 (zero) in the box and saving it you’ll remove the border, sometimes, and depending on your theme. Personally, I’m not a fan of WordPress’s image features, infact, besides what I’m showing you here, you should also check out my post on How to Wrap Text Around an Image so you can nicely position your images without many of the hassles I’ve come across by using the wordpress image settings.
So, if you’re in a situation where you need to physically change the html code, here’s what you do:
Below is a typical image code:
<a href="http://www.yoursite.com"><img src="http://www.creativedesignworx.com/images/remove_blue_border_sample.gif" alt="" width="250" height="250" /></a>
Which would produce this:
This is your image (summer_flower.jpg) hyperlinked to www.yoursite.com, and leaving it this way will likely create a blue border around your image.
Now, by simply adding this little snippet into your image code, you’ll be able to remove the border:
style="border: 0pt none;"
<a href="http://www.yoursite.com"><img alt="" /><strong>style="border: 0pt none;"</strong> src="http://www.creativedesignworx.com/images/remove_blue_border_sample.gif" alt="" width="250" height="250" /></a>
Now you see…no border!
That’s it! Easy as pie:)
Update - I’ve created a really quick video to explain the wordpress image properties as I talk about in the beginning of this post
(Note, it’s not the greatest as I’m just learning a new video software, but as I go along my videos should get better:)
01/21/09 by admin | Recent Posts, Web Design | 7 Comments »
Just recently a very interesting thing happen to a friend of mine. I’m not going to mention any names but the story is one that everyone and anyone looking to get their business, hobby or group site online should hear.
Most people will depend on their web designers to tell them what they need and will trust them when they suggest what is needed and to provide the best possible price. So if a designer says you need this, this and this to get your site up and running, you believe them. You don’t know any different.
In this case, the designer took advantage of this lack of knowledge to make more money.
To start this off, let’s say we are talking about a community of friends who use a specific application to get together and hang out. This “application” is one they pay for every month.
Now, when they started they hired a web designer to help them put the whole site together. They were told they would need to pay $30 each month for hosting on top of their monthly “application” charge as well as a certain amount for any updates they wanted made to their site. But first, of course, they had to pay to have the site developed.
Fine, they agreed and had their site created using a content management system with the application data built into the site. All they had to do was log in as members to use the site with their friends. Any updates or maintenance were taken care of by their designer.
In essence they were held captive. They had absolutely no control over the their own site. They didn’t know anything about their own ability to update and maintain their site using the cms administration panel and they had no idea where or how to access their site files. For a long while, they were ok with that because they trusted their designer and well, they didn’t know any better.
Anyway, my friend came to me a few months back and asked me what they should do. They needed the site updated and couldn’t get their designer to do it. In a sense they were lost because they didn’t know anything about their own site other than how to access it as regular members. So, I told them to ask for the proper access to both the administrative side of the CMS and the control panel where their files were. After some time they were given access to the CMS admin with only limited abilities. Their designer would not give them any further control. It was like pulling teeth to gain control of their own site!
Then, just recently he came to me again and said, they didn’t know what to do. They still couldn’t get the guy to update the site, they didn’t know how themselves even with the access and they wanted him out.
So I stepped in. Now you have to understand that I was going by the information my friend gave me and he did not understand the concept of hosting vs the CMS admin, nor about the site files vs the application they were using. I was walking in blind. Initially I told him he would have to change the hosting and re-create the site because we didn’t have any access to the original files. From what he was saying, I thought their hosting was on a completely different server with the application files being embedded into their existing pages.
Based on the information provided, I began the process of examining the set up of their site so I could re-create it on my own servers for them. Then it hit me! I immediately contacted the host of the application they were using to ask if they also provided regular hosting. The reply, yes and it was included in the monthly application cost! Hmmm, so what was the $30 hosting charge for?
Anyway, I figured this was great news. This would save them the monthly hosting fee they were paying their designer! I would simply set up their site using the hosting they were already paying for each month. Great news, right?
Wrong, because after gaining access to the control panel I realized that all of their site files were already there. It turns out, they were paying for the application each month PLUS an additional hosting charge to their designer to host their site files! I was outraged, what a scam.
So I talked to my friend and explained what was happening, needless to say he was angry. They had been severely taken advantage of without knowing it. He gave me the go ahead to re-gain control and lock their designer out. As for the CMS admin, we still didn’t have top control and the guy was not going to give us the passwords. So, with access to the database, I managed to change things around, lock the guy out and grant top administration access to my friend and his partner.
Now, I need to spend a little time showing them how to actually use and update the site. Being a content management system, it will be easy for them once they understand. They are now saving $30 each month from hosting and any addition charges for updates and maintenance.
The moral of this story…beware! Your designer should be willing to give you complete access to your entire site. Do some investigative work to make sure you understand the entire process from getting the domain name to hosting to the platform your site is designed in. Even if you would prefer to pay someone to maintain your site, you should always be the one in charge of every bit of that site.
If there is any part of the process you don’t understand, you designer should be more than willing to explain it all in detail. You could also confirm what you are being told by either searching online or asking other professionals in one of the millions of web design forums online.
Bottom line, don’t go into your project blind. A little research now could save you tons of money.
Have you or someone you know had a similar experience? Share it with us by leaving a comment to help others avoid similar scams.
12/17/08 by admin | Recent Posts, Wordpress | No Comments »
Do you want to increase the search engine ranking of your WordPress blog? Check out these 9 SEO WordPress plugins that Shawn Jooste from Elite Blogger has pulled together for us.
The best place by far to find traffic is from search engines. The art of Search Engine Optimization is often very daunting for new bloggers. Even some experienced bloggers just see SEO as a cloudy puddle of mud they would rather not play in.
WordPress by default is pretty decent at letting search engines see what’s going on. But there are a whole bunch of other things that can be done to make your blog rank better. Fortunately there are plugins available to help you get better rankings for your blog, so you don’t have to go digging into the code of your blog to get some results from search engines.
I’m not going to explain the validity or effects of each of these SEO tactics in detail. There is more than enough of that on the Internet already if you want to do some research. I’ll mention briefly what the benefits of each plugin is, and why you need it.
1. All in One SEO Pack
This allows you to set the basic SEO stuff for your blog. You need page titles, meta tags, keywords, and descriptions. This plugin allows you to configure them for either your entire blog or on a post by post basis.
2. Redirection
From time to time you make changes on your blog. Sometimes these changes end up breaking your Permalink structure. This often happens when you make a change to an old post, or do an upgrade to WordPress and make some changes to the permalinks. It’s very very common if you move your blog from one host to another.
Basically what happens is that each post has a unique URL, called a permalink. When this changes, visitors who go to that blog post won’t find it. The redirection plugin helps you fix these problems by redirecting the visitor to the new permalink. This reduces the amount of traffic you get to pages that don’t exist.
3. Robots Meta
By default search engines crawl and index ALL the pages on your blog. This isn’t ideal, because it creates duplicate content and you can get yourself punished by search engines without knowing it. What the Robots Meta plugin allows you to do is tell the search engines which sections of your blog to crawl. This means that you’ll get more respect from search engines, and likely more traffic.
4. SEO Smart Links
One of the key issues with SEO is your internal linking structure. The more you link to a certain page on your blog, the more important it is to your overall content. Search engines treat your internal links as an indication of how well structured your site is. The problem with this is that if you had to manually go and create links to relevant and important posts you’ll spend hours and hours doing it.
SEO Smart links allows you to specify a word, like ‘SEO’ and then link it to a post on your site. Then each time the word SEO appears on your site, it’s automatically turned into a link you specified.
5. SEO Friendly Images
Images also play an important role in your SEO strategy. So it’s important that you tag them correctly. SEO Friendly images allows you to do this, and saves you hours and hours of work. If, like most bloggers you use images in your posts, then this plugin is essential.
6. Google Positioner
It’s important to know your keywords. And this handy plugin allows you to track the keywords you’re getting searches for. It’s pointless selecting a few keywords, then writing some content for those keywords and hoping that the rest goes well. SEO is about being proactive and tracing what works and what doesn’t.
7. Permalinks Moved Permanently
A common mistake bloggers make is choosing the wrong permalink structure. When you start your blog you think you know which is best, and as time goes buy you want to change your permalink structure. The problem with changing your permalink structure is that your traffic will come to a standstill until your site is reindexed, and that could take months.
This plugin is similar to redirect but is an easier and better way to manage permanent permalink changes.
8. Nofollow Case by Case
The nofollow attribute over the last year or two has had a fairly large impact on the blogosphere. All comments in WordPress by default are nofollow links. This means that no Page Rank (PR) is being given via the link. This plugin changes that and makes comment links valuable again. There are a number of reasons you would want to give away link juice. It’s often used to attract people and encourage them to comment. It can be very useful for new blogs who need some exposure.
9. SEO Slugs
Stop words are ignored by search engines. So most of your post titles have them in, but they are meaningless to search engines. So when you have a post title like this: “What You Can Do Immediately For Higher Rankings” you have a permalink like this: ‘/what-you-can-do-immediately-for-higher-rankings’ but what you really want is for your permalink to look like this: /immediately-higher-rankings.
This plugin automatically removes stop words from the permalink, helping you to rank better.
Conclusion:
Getting better traffic from search engines will help you boost your blog. You’ll get better income, rank better, and be able to build a better brand.
Courtesy of problogger.net
12/08/08 by admin | Recent Posts, Social Marketing | 1 Comment »
Creating a blog is nothing that you need to be afraid of. There is no elaborate planning required either. However, there are a few things you would need to decide. Since these blogging service providers give you a lot of choice in terms of template and color themes, would be require to take those decisions yourself.
The following is a quick guide of what to think over before creating your blog:
• Theme: Determine what you would be writing about or the nature of the content that you would be sharing with your readers. This depends mainly on your interest. Topics blogging to the field of politics, poetry, arts, current affairs, or almost anything under the sun can be chosen. You can stick to one theme or you can choose to write about whatever concerns you on a day to day basis. Since it is your very own web journal, you can make it as flexible as possible in all aspects.
• Blogging Provider: Next you need to decide upon which blogging service provider you would like to use. This depends on the kind of reviews that you get about them from friends and acquaintances, or something about them that you may have read online. Otherwise, you can always try out something and find out if you like it. You can try out one of these popular sites: Blogger.com, WordPress.com, Typepad, Blogagotchi.com, Livejournal.com, JournalHome.com, TheDiary.org, Mindsay.com, Blog.com, Diaryland.com, Blogdrive.com, or Xanga.com.
• Templates: A wide range of templates will be made available on any blogging service you decide to start you blog. Select the one you most prefer or like.
• Freebies: The advantage with these blogging service providers is that they make your blogging experience as dynamic and interactive as possible. They enable you to install add-on features that include button, pictures, blog chalks, imoods, tagboards such as myshoutbox.com, guest maps, guestbooks, comment boxes for readers’ thoughts and views, etc.
• Additional Features: These interesting ones may not be free. By paying a price you can avail of them.
• Nature of Blog: You must determine who should read your blog-whether you want it to be read only by a select circle, or must it be open to all. This will depend upon the content, mainly.
• Layout: Again, there will be a wide range to choose from in terms of layout and color schemes.
• Content: You could pick up a specific theme and write about it consistently, or merely decide on any random topic as and when it interests you. You could try putting up content for a while and see the kind of response you get, and alter or modify it accordingly.
• Blogging Circle: Blogging is a great way to come in touch with people from across the globe. You can surf and visit other people’s blogs. Do not spam in their comment section, but write a genuine comment if you have something to say about a particular post.
• Skins: You can customize and personalize your blog as much as you want. Using software like Photoshop you can create your own skins and make your blog attractive as well as make it reflect you own personality.
• Publish: Finally when you are done selecting the setting and preferences, selecting a content to put up, you need to publish the content. Do not, however, forget to send the link to your blog to your friends and acquaintances so that they may come visit you.
____________________________________________________________________________
Once you have started your blog, you will have noticed that it hardly takes fifteen minutes to do so. Maintain the blog is even easier. Here are a few tips that would help you successfully keep your blog going:
• Update: Update frequently otherwise visitors may stop coming to your blog. It will also give you more confidence to churn out more well worded posts in the future.
• Personalize: Even though you might be discussing general and universal themes, add your own personal touch to make things lighter and interesting.
• Theme: If you have a theme blog you can Google for other blogs of a similar kind and build you network.
• Spelling and Grammar: Make sure you proof read your posts. Spelling and grammatical errors can be a major put-off for many readers.
• Advertisements: You could play host to sites like Google AdSense and earn revenue by placing their links on your blog.
Courtesy for this article is unknown, if you are the author please please let me know:)
12/03/08 by admin | Recent Posts, Web Design | 10 Comments »
A CSS or “Cascading Style Sheet” file allows you to separate your websites content from it’s style or appearance. While you would create the layout of your websites content using your (X)HTML file, the CSS stylesheet would control the way in which that content appears (fonts, colours, borders, backgrounds, margins, etc.).
There are 3 methods you can use to implement the css into your design, but which one is better is dependant on what you are doing, or where you are using it.
Let’s first see what each one involves, then we can decided on the ultimate CSS method for
your project.
We aren’t going to go into details on the styles themselves, rather we’ll just go over the three methods in general.
Internal Stylesheets
This method places the CSS code itself inside the tags of your page. With this method each page is separate, therefore, the code must be placed inside each page in order for the styles to work their magic on every page of your website.
Example:
<!--
p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000;
h1 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000099; }
-->
I’m sure you can imagine how tedious it would be to update every page of your website one-by-one, so let’s examine this option…
External Stylesheets
The external stylesheet is a file all on it’s own that can be created using something as simple as notepad. This file contains no html code. When you save it, give it the .css extension and you have yourself an external stylesheet.
The styles would be the same as those listed about, but with the external stylesheet, you would link to it from within your “head” tags.
Example:
You would then place this code in your html document as shown below:
Using this method would give you far more flexibilty and of course save you time. By simply updating your external stylesheet, every page on your site would be updated at once, rather than using the internal stylesheet where you would have to update and change each individual page.
And finally, the Inline Styles
I don’t use this too often, but I do find it handy when I’m putting together a quick blog post or adding adsense to a page or even on websites where I am posting but don’t have any control over the css files.
An example would be one I explained in my article “How to Wrap Text Around an Image“.
Then type your text here.
This code is an example of using inline css to wrap your text around an image or ad. You could add the style to your internal or external css, but if you are working on the fly, or simply can’t, this is one solution you could use.
So again, which one is better?
- If you are creating a multi-paged website, an external css file would be the better choice. It would save you time and make updating your pages almost an instant process.
- If you are creating a single page, you could use an internal stylesheet simply because you only have to update the one page.
- And if you are working on content to be placed somewhere that you don’t have access to css or just want a quick style change, inline will do.
Some would say using the external method is the best choice and I would tend to agree. But there are situations where you could use either the internal or the inline stylesheets as I mentioned above.
Consider the project you are working on, then decide which option you feel would be your best option.
11/23/08 by admin | HTML Tips, Recent Posts, Web Design | 3 Comments »
I am often asked how to wrap text around an image or, simply put, how to place the image to the left or right of your text. You can see an example to the left of this paragraph.
You can use this little snippet of code just about anywhere. It’s perfect for adding images to your blog post or adding Adsense or banners into your text.
Below is the generic code you can use, just copy and paste. I’ll also give you a few examples with changes to the code for different layouts.
Generic Code
——————————————————————-
Then type your text here.
——————————————————————-
If you want to place the image to the right of your text, change the “float:left” to “float:right”.
float:right;
——————————————————————
——————————————————————
You can change the distance between the text and the image by changing the margins. You’ll need to know the order of the margins, so here’s a tip…
margin: 0px 10px 0px 0px;
Think of a clock…1st is top, 2nd is right, 3rd is bottom and 4th is left.
Play with the 4 different margins to get your text where you think it looks best.
Examples:
margin: 0px 200px 0px 0px;
Notice how close the image is now to the text…
margin: 0px 20px 0px 0px;
Notice how far the image is now from the text…
In the above examples you see how you can adjust the right margin as close or as far from the text as you wish simply by changing the 2nd (right) margin.
Now, let’s try it with the image to the left of the text.
margin: 0px 200px 0px 0px;
Notice how far the image is now to the text…
margin: 0px 20px 0px 0px;
Notice how close the image is now to the text…
Adjusting the “other” margins…
Top Margin
——————————————————————
——————————————————————
This is just some text to show you how it looks when the 1st or top margin is changed from 0px to 50px…..notice how the image is way below the start of our text.
dfjsdkflasdjfkasldfjkasdlfjkasldjfas;ldfkjas;ldkf
asldkfjaskdlfjas
asdlkfjaksdlfjasldkfj
dfjsdkflasdjfkasldfjkasdlfjkasldjfas;ldfkjas;ldkf
asldkfjaskdlfjas
asdlkfjaksdlfjasldkfj
dfjsdkflasdjfkasldfjkasdlfjkasldjfas;ldfkjas;ldkf
asldkfjaskdlfjas
asdlkfjaksdlfjasldkfj
Bottom Margin
——————————————————————
——————————————————————
This is just some text to show you how it looks when the 3rd or bottom margin is changed from 0px to 50px…..notice how far the text falls below the image when it wraps around the image.
dfjsdkflasdjfkasldfjkasdlfjkasldjfas;ldfkjas;ldkf
asldkfjaskdlfjas
asdlkfjaksdlfjasldkfj
dfjsdkflasdjfkasldfjkasdlfjkasldjfas;ldfkjas;ldkf
asldkfjaskdlfjas
asdlkfjaksdlfjasldkfj
dfjsdkflasdjfkasldfjkasdlfjkasldjfas;ldfkjas;ldkf
asldkfjaskdlfjas
asdlkfjaksdlfjasldkfj
These are just a few examples of how you can use this snippet of code to change the layout of your page, now you can copy and paste the generic code and play with it.
Toresa:)
ps. Was this helpful? Let me know by leaving a comment below…
