Siam Communications

Create a Simple Accordion Slider

ErBuc — Thu, 15 Dec 2011 11:51:38 +0000

One of the greatest challenges facing web site owners is information overload. This cannot always be avoided but can result in a very long web page or a cluttered web page, which can ruin the experience for your visitors.

So we are going to introduce you to the simple accordion slider. Because you know all of the information on your web page is relevant. It just needs to be presented in a fashion that is much more user friendly and appealing to the visitor.

There is a real world example of how we used an accordion tab slider at Bangkok Condo Finder.

I will walk you through some very basic steps to create and implement an accordion content slider on your web pages. But first, have a look at the demo:

Simple Accordion Slider Demo

Item 1 – Content (image and text) with a border

This is content wrapped in a border.

This area also includes an image. Although you could also add other items like a video or a Google map. I have avoided using the standard Lorem Ipsum text because it just doesn’t add any value to the content of a WordPress blog post.

But we did JUSTIFY this text and added padding around it by adding another class to the class statement like so:

We then declared the styles for “acc_wrapper” in our style sheet.

Pretty cool huh?

Item 2 – Just text but no border

This is content with no border.

Again, not very exciting, but we could put any type of web page content in here that we wanted. Even a photo gallery if we wanted.

Item 3 – Just some text in a border

Ok, I gave in … here is some standard Lorem Ipsum text for you.

Proin non nibh non felis rhoncus facilisis. Sed porta aliquet odio ut fermentum. Nullam non ante sem. Nulla facilisi. Donec porttitor tempor diam ac dapibus. Nullam eu fringilla ipsum. Integer suscipit euismod sem id vulputate. Aenean volutpat mattis dolor. Nunc elit nulla, fringilla id aliquam eget, bibendum vel ante. Vestibulum dignissim vehicula ante vitae venenatis. Praesent sit amet justo nisi. Donec vehicula dictum enim, id tincidunt mauris blandit eget. Maecenas lacinia tincidunt lacus nec varius. Aenean nulla sapien, lobortis id tincidunt sit amet, consequat sit amet diam.

From this example, you can see we can offer up any kind of content within each accordion section. The demo does not show video content or a Google Map, but this type of content can be inserted too if you want.

So let’s get started.

Let’s start a new HTML page and include the latest jQuery library in the head section.
You can get the latest jQuery library here. To include it, type the following just before the closing tag:

Now let’s create the template for our accordion. We will keep it to three sections for now:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Item 1 - Heading text

Item 2 - Heading text

Item 3 - Heading text

Each Accordion Content tab is wrapped in a DIV with a class or “acc_content”. The heading is identified with the class of “acc_head”. You can change this if you wish. In fact, for SEO purposes, it might make better sense to use an H@ or similar heading tag instead with a class of “acc_head”.

The content, which we will hide later when the page loads, goes inside the DIV tag with the class of “acc_content”.

The entire Accordion is wrapped in an ID tag here as “accordion” just to distinguish this accordion from others we may want to place on a page. If you wanted another section of content to have an accordion, you should give it a different ID tag to make sure the browser can distinguish between them.

If you need more than three accordion tabs, simply add another DIV section with a class of “acc_content” and the other stuff inside, and you are good to go.

Before we add our content, let do a little styling in anticipation. This is a bit backwards by some standards but I like to see my product taking shape to my style settings early on.

So in your style sheet (you did include one yes?), put in the code below. (If you haven’t already you should link your style sheet in the HTML file.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/* Clear our floats and set margins to '0' */
#accordion { clear:both; margin:0; }

/* Styles each box of content for the accordion */
.acc_content {
margin:0 0 5px 0; /* Separate each accordion tab by 5px on the bottom */
clear:both;
}

/* Styles the header text and adds the 'plus' image in the accordion */
.acc_head {
font-size:12px;
font-weight:bold;
padding:10px 0 10px 25px; /* make sure to indent the text to make room for the image below */
background:#cce3f6 url('images/plus-sign-blue.png') no-repeat 10px center; /* Set background color and the image */
cursor:pointer; /* Change the cursor so visitors know to click it */
}

.acc_body { margin-bottom:10px; }

Good!

Now you can add some content to your content areas (inside the DIV with a class of “acc_body”). Feel free to use the content from the demo above if you want.

After you add the content, we can add “the Magic”! So let’s do that now.

Somewhere after the opening BODY tag, add the following code:

1
2
3
4
5
6
7
8
9
10
11

Just after the BODY tag is usually ok. This will hide all of the content under each accordion heading. It then tells the browser to show the content just after the heading that has been clicked.

Save your file and test it out in your browser to make sure everything is working.

This is a great way to add content to a web page, that isn’t visible at first, still allowing it to be indexed by the Search Engines.

Best of all, if a visitor doesn’t have JavaScript enabled on their browser, they still get to see all of your valuable content.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Drag and Drop WordPress Theme Development

ErBuc — Mon, 01 Aug 2011 11:00:39 +0000

The WordPress platform is very powerful when it comes to managing web site content and being able to add functionality for web site owners. But if you are not a web developer, the options are limited as to how much you can customize WordPress to your specific needs. And this can prove frustrating for most of us.

I am going to introduce you to some new “Drag-and-Drop” development tools that are easy for users of all skill levels to work with.

When I first started researching this topic, I was concerned it might be damaging for WordPress developers. I was pleased to find that these tools have been developed with users of all skill levels kept in mind. They remove many of the mundane development tasks while still allowing developers to concentrate on extending functionality.

I found three tools (listed alphabetically) that provide a well rounded offering of various costs and features:

Headway Themes

I normally do not start with the best of the lot (in my opinion), but it does come first alphabetically.

From the website, it was very easy for me to get a real feel of how the product worked and how the features were used in a real world installation. All this without having to download or install anything. Headway did this through the use of succinct videos throughout the site.

Headway impressed me for several reasons:

The online pre-sales presentation of the product
The online documentataion
The “value added” features available

The pre-sales presentation was fabulous I thought.

Available on video, was an overview of the documentation with a link to the full product documentation online. This is one of the biggest problems developers face is with well documented tools. Headway have addressed this as a priority.

But Headway did not stop at building a drag-and-drop development tool. They built a fully functioning development tool that offers WordPress hooks, search engine optimization, web site design elements, and an API interface called “Leafs” that work similar to the WordPress plugin concept.

Needless to say, I was very impressed with the Headway offering. This should be your first stop if you are considering purchasing a WordPress development tool.

PageLines – Drag and Drop Framework

Pagelines was next up and the product is also very impressive. But, I found the pre-sales presentation a bit more difficult to work through. I wanted more interaction and documentation.

In short, I wanted more information.

The only video I found was a sales video that provided a minimum of insight into what the product actually does. And the demo wasn’t really a demo. It seemed to be a sight built with the development tool so I could see what was created. As a developer, I knew what was required to develop the demo sight. But if I was new, my appreciation for the product would have easily been diluted or lost all together.

However, the product seems to provide almost as much as the Headway product as far as “ease of use”, and value added features. The integration of WordPress hooks, search engine optimization and other elements weren’t as obvious to me. But after much searching around I determined that these do exist.

Pagelines develops some very professional themes. It is because of their experience in the WordPress environment that I would recommend this product as well.

PressWork – HTML 5 Drag and Drop Framework

I felt a need to include this product in the review for one simple reason:

It is a free, open source product – unlike Headway and Pagelines

Presswork doesn’t even begin to match up to Headway or Pagelines in terms of features or power. But it has a lot of potential as an open source product.

I found it to be more of a drag and drop “Design” tool as opposed to a development tool. But it is a great way for beginners to get a feel for the layout possibilities with WordPress. Someone with a good eye for design could easily use the product for design some very nice web site layouts. And the cost is unbeatable.

Conclusion

This seems to be a fairly new area for WordPress development. But the early players seem to be doing things right in what they have to offer. Some of the other frameworks are also beginning to offer some drag and drop functionality such as Carrington, which offers a drag and drop template builder as a part of their framework.

I am wondering how this might effect some of the other frameworks like Hybrid, Thesis or Genesis in the coming months.

But I will continue to keep an eye on this area.

Related posts brought to you by Yet Another Related Posts Plugin.

Easily Customize WordPress with a Child Theme

ErBuc — Tue, 26 Jul 2011 07:55:53 +0000

Many of us run our own WordPress blogs but still want to customize the look of our WordPress web site. However, getting into WordPress customization seems a daunting and scary task.

In this tutorial, I will show you how you can easily customize WordPress using a method known as “creating a Child Theme“.

What You Will Need

A web site or access to a web server (Setup a Personal web server or How to Setup a Web Server in 3 Easy Steps)
A basic understanding of CSS (Cascading Style Sheets)
A text editor (Windows Notepad, NotedPad++ or similar)
FTP Access to your Web Site
An FTP program (Here is a list of 5 FTP Clients to help you out)
A Parent theme that you want to use as your starting template

I will be using the WordPress Twenty Eleven theme as my starting template in this tutorial.

Step 1 – Create a Theme Directory

By default, WordPress installs all themes in a sub-directory of wp-content called “themes”. So, an example would be http://www.mydomain.com/wp-content/themes/. It is here in this “themes” directory that we will create our directory.

I will call it “my-child” so that I have a directory like this – http://www.mydoman.com/wp-content/themes/my-child/

Also notice the name of the directory for my parent, the Twenty Eleven theme. It is called “twentyeleven”. Make a note of this because we will use this in the next step.

Step 2 – Create the StyleSheet

This is one of the most important parts. WordPress uses the style sheet to identify some key attributes of our new theme.

Create a file named “style.css” with the following content:

/*
Theme Name: My Child
Theme URI: http://www.siamcomm.com/
Description: Child Theme based on the Twenty Eleven Theme
Author: Eric
Author URI: http://www.siamcomm.com/
Template: twentyeleven
Version: 0.1
*/
@import url("../twentyeleven/style.css");

Let me walk you through each line of code here. I started out my file with a comment. This tells WordPress that the elements that follow will provide it with the details of the theme.

/*
... my Child Theme settings here
*/

Because it is a comment, a web browser will not do anything with the information between the starting and ending comment tags. I added in my settings and then closed out the comment field.

Each of my settings goes on its own line. It is started with a setting, followed by a colon and then the value of that particular setting. So the first line after starting the comment was:

Theme Name: My Child

This is an important setting because it tells WordPress the name of our theme.

The lines that follow also provide some information to be displayed in the Dashboard when a user views the themes available. But the most important line that follows the Theme name is the Template setting.

This tells WordPress the name of the Theme that will be used as the parent. This value needs to exactly match the directory name of the Theme as we noted in the previous step.

After we closed out the comment, the next line is the import tag. This line is required and should be located as the first line after the closing comment. It imports the style sheet from the parent to be used as a base.

Now let’s get on with the fun stuff!

Step 3 – Customize the Theme

I don’t like the large alternating image that shows up with Twenty Eleven. So the first thing I want to do is remove it. But if I am not a programmer, I don’t want to delete a bunch of code in case I want it later. So, I will just hide the picture.

Immediately following the import line in my CSS file, I will add this line:

header#branding a img { display:none; }

I am using this because I had a look at the HTML that was generated by Twenty Eleven by viewing the page’s source code. The web page source code looks like this when using Twenty Eleven.

id="branding" role="banner">

<h1 id="site-title"><span><a href="http://www.mydomain.com/" title="WordPress Sandbox" rel="home">WordPress Sandbox</a></span></h1>
<h2 id="site-description">Just another WordPress site</h2>
</hgroup>
<a href="http://www.mydomain.com/">
<img src="http://www.mydomain.com/wp-content/themes/twentyeleven/images/headers/hanoi.jpg" width="1000" height="288" alt="" />
</a>

I can see that there is a section called “header with an id of branding. so the correct CSS code to reference this section is header#branding. I then want to reference the link and the image that is wrapped with in the “a”, or link tag. So I reference their HTML tags in the same line at my header#branding tag. So this is how I came up with my new line in the CSS file.

As you know in CSS, the styling command is then written between the curly brackets “{” and “}”. And the style attribute and value to hide an element is display:none;

Now I can save my style.css file and upload it to my new child theme directory.

Now lets go into the dashboard and have a look at the themes:

WordPress has automatically added some additional information to my theme’s description. It says it is based on Twenty Eleven. It also provides links to the directories where the files are located. Very smart!

Now let’s activate my new child theme and view the site.

Step 4 – Activate the New Theme

Click on “activate” under the description of the child theme. Then click on the name of your blog at the very top of the page.

Horns please!

No more rotating image.

Now you can add all of the styling you want to the “style.css” file in the my-child directory to continue to customize it more.

Try it yourself. Change the font style on the body tag, or the color of all the links on the web site.

Your theme will maintain all of the functionality of Twenty Eleven (minus the rotating banner) but with all of the style and flare you can add to it.

Have fun!

Related posts brought to you by Yet Another Related Posts Plugin.

Twiends discontinues Support for Facebook

ErBuc — Sat, 18 Jun 2011 07:59:13 +0000

One of the most difficult challenges facing users of Social networks like Twitter and Facebook has been in the ability to understand how to gain lots of followers or (so-called) friends. It took me a long time to understand the value of my own website to an “interested” follower, versus just a follower.

The Twiends online tool has been extremely helpful in this respect. It has allowed me to connect with Twitter followers, and Facebook pages where I actually had a genuine interest.

However, in what seems to be a pattern that is quickly spreading on the Internet, Twiends has discontinued support for the Facebook portion of their service.

Before I began using Twiends, I would follow people on Twitter, or like their Facebook pages, in the hopes that the owners might reciprocate and also follow me on Twitter and like my Facebook Fan Page, and in turn, read my content. Sorry folks, it just doesn’t work that way.

With Twiends, I enter “my interests” and Twiends provides me with a list of people that have similar interests that I could follow. After I examine the users information, I have a choice to follow or not. And guess what? Because of the reward system that Twiends uses, many people with similar interests actually follow you back. Many people even follow you before you follow, or without you ever following them, because they have identified a topic that you have also entered as a common interest.

The current system of matching up like interests is far from perfect. But it is certainly an added benefit to me in weeding out the fly-by-night online marketers and SEO sales people. I also found it beneficial in finding useful Facebook content to follow as well. I truly began to visit those websites and interact with website owners who have a common interest.

Because I made a point to stick with people that had similar interests, I feel I am connected to people that are providing content to me that is useful. As such, it made me think about my message to those following me in order to ensure that I could keep my stuff beneficial and NOT spammy.

The Twitter service is still very much operational. Twiends also has a Youtube service that I have not yet tried. But as of Friday, 17 June, they have discontinued all Facebook activity. The full post and announcement can be found here.

I suppose that, as with any technology company that develops a planet sized ego that they are not worthy to be associated with, we all must deal with minor set backs. Perhaps I may look back at this as a good thing in weeks to come. But until then, I find this another disturbing development based on the stupidity of a large organization with very little genuine human interest … Facebook.

Adding Custom Sharing Buttons for Facebook, Twitter and LinkedIn in WordPress

Related posts brought to you by Yet Another Related Posts Plugin.

Number of IE6 Users Nearing 10% Mark

ErBuc — Sun, 12 Jun 2011 05:37:17 +0000

One of the biggest problems in the web development world is getting things to work in older versions of Microsoft’s buggy browser, Internet Explorer.

But even Microsoft is looking anxiously at reducing the usage of the oldest version still pretty common on the Internet, version IE6. Microsoft is so concerned that they have dedicated a full website to counting down the number of IE6 users around the world, and are encouraging them to update their browsers.

Check out Microsoft’s Internet Explorer Countdown web site.

Internet Explorer version 6 (IE6) was released in 2001. That makes it 10 years old. An in Internet years, that is a VERY long time.

As of May 2011, 10.9 percent of Internet users around the world were still using the outdated browser. Many of these users are in Asian and Arab countries. China has the the biggest user base with roughly 33% of Internet users accessing the Internet using IE6, and South Korea in second place with about 22%.

If you are operating a website or blog, you can support the cause and put up a banner, supported by Microsoft, to direct people to upgrade to the new browser. You can Join the cause here.

If you are still using an outdated version of IE, please upgrade now. Check out the other, easy to use browsers listed below in alphabetical order. When visiting the sites below, they will usually determine your computers operating system and model and direct you to the correct version to download.

Chrome
Firefox
Internet Explorer (newer version)

Related posts brought to you by Yet Another Related Posts Plugin.

A Positive Online, Social Experience

ErBuc — Mon, 23 May 2011 12:36:48 +0000

We frequently hear the nightmare stories about someone’s online social tragedy. It is enough to make you nervous about even registering for a Facebook account with all of these stories.

So I wanted to balance the scales out a bit and tell you about a very positive Social experience that I had just about a week ago.

Perhaps some of you are repeating the word “boring” at this particular moment after having read the first couple of sentences. But, I wanted to tell this story because it happens so infrequently. So here it goes …

I often subscribe to mailing lists for people that claim to be SEO/Web/Internet experts, or that can “Increase my web site visitors by x%”. However, I have learned my lesson about spam and I use an email address where I don’t mind getting spam.

I have subscribed to some very useless web sites. But there are a very small handful I find to be very valuable websites:

CopyBlogger – http://www.copyblogger.com
Chris Brogan – http://www.chrisbrogan.com

Notice, Seth Godin’s website is NOT listed above … sorry Seth.

Anyway, I subscribe to these blogs, with the expectation of receiving some useful, and thought provoking articles from time to time … but not every day. The two sites listed above seem to provide a good, useful stream of information at a rate “higher than average” than most of the other sites out there … including my own.

And thanks to being a member of Chris Brogan’s site, I received an invitation to join Social Triggers.

After reading the invite, I was expecting a mediocre, or average quality of information to begin filling my inbox from this website in a few days after I subscribed. But, much to my surprise, I was greeted with a welcome message that suggested I send the web site owner a personal email, stating what I wanted my website to do that it wasn’t doing already.

No catch. No cost. Just a simple request and NOT a requirement.

So I did. I sent an email and stated exactly what I wanted thinking, “What have I got to loose”. After all, I’m not saying anything that isn’t obvious anyway.

Surprise! I received a personal email back from the web site owner Derek Halpern.

And the exchange didn’t stop there. We had an lengthy exchange of emails that lasted a few hours. At the end of it all I came away with some very pointed, and simple advice from Derek that has caused me to re-evaluate my web site as well as my approach to marketing it online. It was USEFUL feedback!

I was … and still am … amazed and very pleased with my new found contact.

When you visit Derek’s website you will find the same simple, straight to the point advice that I got on a variety of topics. He doesn’t accept a lot of subscribers and he doesn’t fill up your inbox with emails on a daily basis.

The experience has made me feel like this whole Internet experience doesn’t have to be so over whelming and fast paced. I can provide value at my pace and with my limited knowledge and still grow my business online.

I encourage you to have a look at Derek’s web site, Social Triggers.

I really hope that we see more of this kind of personal interaction by people to helps others learn how to use the Internet to their advantage, without detriment to others. I also hope I can add value to Derek’s online efforts in some way.

Related posts brought to you by Yet Another Related Posts Plugin.

Hosting Review: Network Solutions

ErBuc — Sun, 22 May 2011 06:13:47 +0000

Web site hosting is a necessary service for anyone who has a web site. The service has become more of a commodity in recent years with prices dropping significantly, much to the advantage of web site owners.

However, the level of service provided by some web hosting companies has also dropped significantly in recent years. Network Solutions is the oldest provider of domain names and web hosting on the Internet today. This review is based on personal experience over the last few months and provides some insights as to what to expect from this “experienced” web services provider.

I going to start right put with the first word that comes to mind here:

“Frustration”

Foolish me! I actually expected an experienced web services provider to “provide good web service”. In the immortal words of Captain Hector Barbosa, “I won’t be making that mistake again”.

One of my friends, and good customers, hosts 2 accounts with the aforementioned web hosting company. Recently, in a phone call, he became so frustrated in speaking with their so-called “support staff” he said something similar to, “I’d be better off just deleting my accounts and starting over again”.

He then hung up the phone.

The next morning, I received a panicked call from him. Network Solutions had in fact deleted both his accounts. Two fully functional, customized WordPress driven websites. They deleted everything, files, photos, and yes, the databases along with all information contained therein.

He had already spent nearly an hour with them on the phone getting them to recover his web sites, but neither web site was working. So enter “me”!

NS did in fact find a backup of the files, and they restored these. However, they also reinstalled WordPress in another directory in the same hosting account. I had just as much success as he did unfortunately. But the frustrating part with in this piece of dialog from an actual conversation with a Network Solutions support technician.

….
Me – I think the problem stems from the fact that the databases were also deleted and have not been restored. Can you restore the data as well please?
NS – Can you hold a minute sir? Let me check on something.
Me – Ok?
…
NS – I must apologize sir, but we don’t have a backup of the databases.
Me – But you had a backup of the files?
NS – Yes.
Me – Last month, when your database server went down, you had a backup that you were able to restore. Can you use that one.
NS – No sir.
Me – Why?
NS – We don’t have a backup sir.
Me – You must be kidding.
NS – If you want a backup of your database, you customer must turn this feature on from his “Manage Account” screen.
Me – He did. But you turned it off when you deleted his account.
NS – Sorry sir, we don’t have a backup.
Me – OK, well I would like to setup a new database, but when I access the database configuration area, your system tells me that my session has timed out.
NS – Did you clear the cache in your browser.
Me – Yes. I also tried this in Chrome, FF, IE 8 and IE 8 in compatibility mode.
NS – Hmmm, works fine for me in IE 7. You should know that our system is not compatible yet with Firefox, Chrome or the newer versions of IE.
Me – Newer versions!? These have been available for years.
NS – Our staff is constantly working to improve our system sir. Is there anything else I can do for you?
Me – *Hang up* … Yeah you can drop dead you idiot!

Several points stick in my mind with this experience that should cause all who are considering using Network Solutions as a web hosting provider to think twice:
1.) Network Solutions could care less that my customer had invested money and trust in them to host his web sites on their system
2.) Network Solutions did not have my clients best interests at heart.
3.) Network Solutions is STILL using technology that is outdated and unreliable … but that is not their problem.

I wonder where these NS technicians are that “are constantly working to improve their system”. Perhaps they quit but forgot to mention it to the support folks.

In conclusion, the service provided by Network Solutions is exactly what I warn my friends and clients to avoid.

If you want to spend premium prices for hosting, Media Temple and RackSpace have much better options with superb support.

If your looking for dependable, low-cost host with good support, try Liquid Net, SCG Domains, HostGator or a few others commonly advertised on the Internet. (I apologize if I have left anyone off the list here).

But, avoid Network Solutions if you value your online assets … and your sanity.

Help Us Build a Social Network

Related posts brought to you by Yet Another Related Posts Plugin.

Remember the dude that gave up? Neither does anyone else.

ErBuc — Sun, 15 May 2011 06:12:48 +0000

One of the most frustrating parts of web development is finding a problem that seems unsolvable.

As a freelance web developer, I run in to this problem occasionally. Here are a few tips that may help you to solve some of the seemingly unsolvable problems.

Try Searching between a specific Time Period

Many of us use Google when looking for solutions or answers to questions. It is very easy to just accept the results presented and click away on the results to look for the answer.

Try selecting “More Search Options” from the left hand side of the search results. From there you can select from several predetermined time ranges (Last month, Last 3 Month, Last Year) or you can select your own ranges of dates to search between. Doing this usually alters the results displayed.

I have found that when I am trying to accomplish something I haven’t seen before, searching for results indexed during the last 1 to 3 months produces some very constructive answers.

There is nothing worse that trying to do something new with WordPress and getting results from a blog post from 2008. While it may still have some value, it is most likely out of date and you may find yourself getting frustrated while trying to implement the solution because it won’t work now.

Alter Your Search Terms

Another choice on the left of Google’s search results under “More Search Tools” is “Related searches“.

This tool breaks down your search and combines it with other terms to offer a list of possible related search terms. Sometimes, in solving a problem, we may use one term for the solution. While someone else may have posted a resolution using slightly different keywords.

Again, the refreshed results may offer a more production solution.

Try a different search engine

While Google is probably the most common search engine we use, there are others that have been around a little longer.

Yahoo! for example started out as a Web Directory. Using the Yahoo! search engine often produces different results that could lead to a solution.

Take a Break

Sometime, if all else fails, walk away from the problem for awhile.

I find this has proven one of the best solutions towards solving a problem. While it doesn’t present a solution, walking away from the computer, perhaps going for a walk outside, allows me to rethink my approach to resolving the problem.

Giving up is a “Fail”

What ever you do, don’t give up. A solution will present itself with the proper approach.

As my good friend Martin says, “Failure is not falling down. It is not getting back up.”

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

How-to: Using Your Own Fonts in a Web Site

ErBuc — Wed, 11 May 2011 10:05:31 +0000

Do you have a great design idea for web site that uses a very nice looking or special font face?

For Web Designers, this has been a problem because the only way a visitor can view your work of art is if they have the same font installed on their computer. If they don’t your beautiful web design is ruined with a standard looking font face.

Well now you can force your font face styles to be loaded with a web page so the visitor can appreciate your design skills to the fullest. There are currently two methods for providing custom fonts on your web site:

1.) Using Google’s Web Fonts
2.) Using the @font-face attribute in your CSS file

There is a very well written, simple and concise tutorial by Laura at Web Courses Bangkok site on How To Put a Custom Font on Your Web Site using Google Web Fonts.

If you wish to use Google Web Fonts, I recommend you read Laura’s post. It works for most browsers as well.

The other method to embed fonts also works with most browsers, except for the oldest of IE releases (if you use TrueType fonts).
Here is how to use method 2:

Step 1:
Find the TrueType font file or other font file that you need and save it to a directory on your web server.

Step 2:
Edit the CSS file and add the following lines to the very top of the file:

@font-face {
font-family: "Century Gothic";
src: local("Century Gothic"), url("http://yourdomainname.com/images/GOTHIC.TTF") format("truetype");
font-weight: normal;
font-style: normal;
}

Modify the items to match your domain name, directory, font file name and any associated settings.

You should also modify the styles that you wish to use the new font, with a fallback to a more common font, just in case.

font-family:"Century Gothic", Helvetica, sans-serif;

That’s it!

The above process displays the Century Gothic font correct in Chrome, Firefox, IE7 and IE8.

Leave us a comment and let us know how this process worked for you.

IE Displays larger, low quality fonts & images

Related posts brought to you by Yet Another Related Posts Plugin.

Adding Custom Sharing Buttons for Facebook, Twitter and LinkedIn in WordPress

ErBuc — Tue, 10 May 2011 14:07:55 +0000

In this article you will learn how to easily create customized share buttons for Facebook, Twitter and LinkedIn that can be used in your WordPress blog. It is important to make it easy for visitors to share your content because that will increase your website’s popularity.

Where should you put share links?

The most common place to put the links, and the code you are about to view, is in the Sidebar of your WordPress blog.

You can edit this file from your Dashboard from the Appearance menu item, and then clicking on Editor.

The resulting screen will show a list of files down the right hand side with an editor window in the center of the screen. Select, by clicking the file named “sidebar.php” (in most themes) and it’s contents will be displayed in the editor box. If you need help with an exact location in the sidebar, leave us a comment and we can guide you further.

In the instructions found here, you can link to the sharing services using your own image or text.

Start with a Facebook Share button

This button is actually a sharing button.

Go ahead and click on it. It’s ok, nothing is actually shared until you have a chance to review the information.

Clicking on this link takes you to a Facebook page in a new browser window. In this window you will be presented with the familiar options for sharing a link on your wall in Facebook.

Here is the code:

Notice the “href” value?

http://www.facebook.com/sharer.php?u=&t=

It uses two very common WordPress scripts to pass information to Facebook about the URL and Title of the Post you are sharing.

The link, of “anchor” tag wraps around an image I have uploaded to my web site. This can be replaced with text is I wanted to so that the code would look like this:

Share this on Facebook

If you want to use this in a non-WordPress website, simply replace the script calls with actual values like so:

Share this on Facebook

Simple isn’t it?

Now let’s try a Share button for Twitter

UPDATE: It seems as though Twitter has recently changed the format of their submit URL. It is actually a bit easier to implement now.

Clicking on this share button takes you to your Twitter home page. The box where you type in your tweets will be populated with the information provided in the link. This gives you the option to review the tweet before submitting it.

Examine the code below and notice again the WordPress based scripts. Just like the Facebook button, you can replace the values with static one if you’re not using WordPress.

Here are the code examples for WordPress (Updated 2011 May 23):

/images//twitter.png" alt="twitter share button" title="twitter share button" />

Example for non-WordPress (Updated 2011 May 23):

More information can be found on the Twitter Developers site at http://dev.twitter.com/pages/tweet_button

A Share button for LinkedIn

This one was hard to locate. But thanks to some enterprising web developers, I located it on a couple of forums. It seems that LinkedIn has a share button generator that forces you to use their button or graphics. This is fine unless you want to use your own icon to match your web sites design.

Clicking on this share button takes you to LinkedIn’s sharing window allowing you to review all information before submitting it to your profile.

Here is the share button code we used for LinkedIn on WordPress:

… and here is the code for a non-WordPress website:

That’s all there is to it.

If you are going to use images, it is a good idea to download a set of Social icons for a consistent look on your website.

We hope you found this information useful.

Let us know your comments and ideas for sharing on other social networks.

Related posts brought to you by Yet Another Related Posts Plugin.