Cardeo » plugin http://www.cardeo.ca Ramblings on web design and social media Thu, 02 Sep 2010 16:07:10 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Envato Birthday Bundle: Over $400 in Envato Files for $20! http://www.cardeo.ca/2010/envato-birthday-bundle-400-in-envato-files-for-20 http://www.cardeo.ca/2010/envato-birthday-bundle-400-in-envato-files-for-20#comments Thu, 19 Aug 2010 18:15:06 +0000 admin http://www.cardeo.ca/?p=3412 If you like a good deal, then I have a doozie for you. The good people over at Envato are celebrating their 4th birthday, by offering an Envato Birthday Bundle of files from all of their stock websites. You get over $400 worth of files for only $20!. Now that is a pretty sweet deal. There’s only once catch, the offer is only good until Tuesday August 24th. Make sure you head over there now and download the bundle.

$400 in files for only $20! | Buy Now

What’s Included?

Here’s a list of everything included in the bundle:

ThemeForest.net Files
WordPress Themes, Website Templates, Photoshop Templates

CodeCanyon.net Files
Javascript, PHP, Plugins, .NET, CSS

GraphicRiver.net Files
Graphics, Templates, Textures, Backgrounds, Vectors, Icons, Fonts

$400 in files for only $20! | Buy Now

VideoHive.Net Files
Video Project Files, Motion Graphics, Stock Footage

3DOcean.net Files
3D Models, Textures, 2D Concepts

ActiveDen.net Files
Flash Files

AudioJungle.net Files
Music & Sound Files

Net.Tutplus.com
Premium Tutorials

Extras

On top of all those files, there are a couple additional extras thrown in:

$400 in files for only $20! | Buy Now

]]> http://www.cardeo.ca/2010/envato-birthday-bundle-400-in-envato-files-for-20/feed 0 Adding A Facebook Like Button To Your WordPress Blog http://www.cardeo.ca/2010/adding-a-facebook-like-button-to-your-wordpress-blog http://www.cardeo.ca/2010/adding-a-facebook-like-button-to-your-wordpress-blog#comments Mon, 02 Aug 2010 21:35:37 +0000 admin http://www.cardeo.ca/?p=3312 Ever wondered how to add a Facebook “Like” button to your WordPress blog? It’s actually quite simple using the Facebook Like Button For WordPress Plugin.

Facebook Like Button Plugin | Download The Plugin

Further Instructions

Simply download the plugin and install it on your server. Activate it from the WordPress Admin, then configure it under the Settings tab. If you have any questions on how to configure the plugin, please leave a comment.

]]> http://www.cardeo.ca/2010/adding-a-facebook-like-button-to-your-wordpress-blog/feed 0 Coding an animated news ticker with jquery and CSS http://www.cardeo.ca/2010/coding-an-animated-news-ticker-with-jquery-and-css http://www.cardeo.ca/2010/coding-an-animated-news-ticker-with-jquery-and-css#comments Wed, 20 Jan 2010 21:35:33 +0000 admin http://www.cardeo.ca/?p=2331 Alright, about time that I’m back with a new post! For this tutorial, I’m going to breakdown creating an animated news ticker using a little jquery and CSS. The tutorial is based on a jquery plugin developed by textotela.co.uk, and I recently built it into the homepage of recork.org. If you head over to textotela.co.uk, you’ll notice there are some instructions on installing this plugin. The problem is (being a beginner at jquery), I had a hard time filling in all the blanks that are not described on his website. Therefore, I thought I would break it down for beginners to make it easier to understand and install.

View Demo

What you’ll need

Download the jquery source files from github.com. Once you’ve downloaded the javascript file (jquery.newsticker.pack.js), upload it to your server. For the purposes of this demo, let’s just upload the file to your root folder and keep everyting in the same directory. Also, if you don’t have jquery on your server, you’ll need to download it from jquery.com. Once you download the file, rename it it jquery.js and place it in your root directory.

Setting up the HTML

Once you’ve uploaded your files, let’s create a new HTML file called index.html. Inside that file, paste the following code into the <head> of your file:

<html>
<head>
 <title>ticker</title>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="jquery.newsticker.pack.js"></script>
 <script type="text/javascript">
    $(document).ready(function() {
      $("#news").newsticker();
    });
  </script>
</head>

Now head down to the <body> of your file and insert the following code:

<body>
<div id="ticker">
<ul id="news">
 <li>News item 1</li>
 <li class="loud">News item 2</li>
 <li>News item 3</li>
</ul>
</div>
</body>
</html>

HTML explained

These are the main points to keep in mind with the HTML:

  • The wrapping <div id="ticker"> can be used if you’d like to give your ticker a background, margin, dimensions. The ticker will still work without this <div>, but you’ll most likely want to leave it in for layout reasons.
  • Each <li></li> refers to one news item. Within the <li></li> you can add text, links, etc… They’ll appear in the order you enter them, and you can have as many as you like. The one I setup for recork.org uses 23 different lines.
  • Once the last item on the list is displayed, it will loop around and start over with the first item.

Adding the CSS

There are a number of ways you can choose to style your ticker. I’ve setup a few basic layout styles here, but please feel free to play around with it. I’m going to keep it simple and do all my backgrounds with css. You might want to try using an image for a background, or perhaps add an icon to the left of your ticker. Also, make sure you paste this code into the <head> of ticker.html, after the javascript links. 

<style type="text/css">
#ticker {
 background-color: #ebebeb;
 border: 1px solid #ccc;
 padding: 20px;
}

ul#news {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul#news li {
 margin: 0;
}

ul#news li.loud {
 font-weight: bold;
}
</style>

CSS explained

I’ve tried to keep the CSS here pretty simple. Here’s a few notes on what I’ve got going on:

  • #ticker is the wrapper for the ticker which has a grey background, grey border and is padded 20 pixels.
  • ul#news is the unordered list for the ticker. You’ll want to leave those styles as they are, so there is no unwanted margin or bullet points. If you want bullet points, simply change up the list-style: selector to a different value.
  • ul#news li are the styles for each individual bullet point. You might want to add some color, or other font styles here.
  • ul#news li.loud is a class I setup for news items that you want to stand out more. Adding the class loud to your <li> will currently make that item bold.

Summary

Once you have all your code setup in index.html, upload the file to your root directory. At this point, it would also be a good idea to move the CSS to your external stylesheet. I wanted to keep this tutorial straight forward, for beginners, so I left everything in one HTML file. That’s it. I’ve shown you how to put together an animated news ticker with a little bit of jquery and CSS. If you have any questions about customizing the ticker further, please feel free to leave them in the comments. Once again, I’d like to thank textotela.co.uk for designing a great plugin. The source files for this tutorial are available from the link below.

Download Source Files

]]> http://www.cardeo.ca/2010/coding-an-animated-news-ticker-with-jquery-and-css/feed 14