These are PNG24 format with transparency in two sizes, 100 and 250 pixels.

License

• Released under Creative Commons Attribution 2.5 License.
• Personal or commercial use is allowed but not selling.
• When distributing, please link to this article and not to the file or to another post or server.

Download

PaperCut Icons

Download

Blogger: Download | Demo
WordPress: Download | Demo

Installation

You can read our FAQ section to see how to install a blogger template.

Settings

Menu

To add links to the menu simply create a new static page from the Dashboard.

The last item contains a drop down menu, you can edit this looking for the next code in the template:

<!-- Drop down menu -->
					<li class='page_item'><a href='#' title='Parent Page'>More</a>
						<ul class='children'>
							<li class='page_item'><a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>
							<li class='page_item'><a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>
							<li class='page_item'><a href='http://blogger.com'>Login</a></li>
							<li class='page_item'><a href='#'>Edit</a></li>
						</ul>
					</li>
					<!-- Drop down menu -->

License

This work is licensed under GPL. This means you may use it, and make any changes you like. Just, please, leave the credits on footer to respect the designer’s work.

Download

Blogger: Download | Demo
WordPress: Download | Demo

Installation

You can read our FAQ section to see how to install a blogger template.

Settings

Menu

To add links to the menu simply create a new static page from the Dashboard.

Date

Change the format of Date Header Format (Dashboard → Settings → Formatting → Date Header Format) for the penultimate option.

Features

• Drop down menu made only ​​with CSS.
• Custom font via Google Web Fonts.
• Faithful adaptation from WordPress.
• Color settings from the panel.
• Static pages menu.

Download

Blogger: Download | Demo
WordPress: Download | Demo

Installation

You can read our FAQ section to see how to install a blogger template.

Settings

Menu

To add links to the menu simply create a new static page from the Dashboard.

The last item contains a drop down menu, you can edit this looking for the next code in the template:

<!-- Drop down menu -->
<li class='menu-item'><a href='#'>More</a>
<ul class='sub-menu'>
	<li class='menu-item'><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>
	<li class='menu-item'><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>
	<li class='menu-item'><a href='http://blogger.com'>Login &amp;rarr;</a></li>
	<li class='menu-item'><a href='#'>Edit</a></li>
</ul>
</li>
<!-- /Drop down menu -->

License

This work is licensed under GNU. This means you may use it, and make any changes you like. Just, please, leave the credits on footer to respect the designer’s work.

Features

• HTML5 Code.
• Random header.
• Faithful adaptation from WordPress.
• Color settings from the panel.
• Static pages menu.
• Compatible with modern browsers and IE8 and higher.

Download

Blogger: Download | Demo
WordPress: Download | Demo

Installation

You can read our FAQ section to see how to install a blogger template.

Settings

1. Random headers.

You can add / change the images in the following template code:

images = new Array(3);
images[0] = "<img alt='' src='http://4.bp.blogspot.com/_Zuzii37VUO4/TYgALoaiH3I/AAAAAAAAFiQ/k9sEBPYHcqk/s000/stushow1.jpg'/>";
images[1] = "<img alt='' src='https://lh6.googleusercontent.com/_Zuzii37VUO4/TYhA6myzoaI/AAAAAAAAFio/vG-tPIJhIAw/s000/stushow2%5B1%5D.jpg'/>";
images[2] = "<img alt='' src='https://lh4.googleusercontent.com/_Zuzii37VUO4/TYhBGCd7LvI/AAAAAAAAFis/EpH53jaE5NY/s000/stushow3%5B1%5D.jpg'/>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);

Menu

To add links to the menu simply create a new static page from the Dashboard.

License

This work is licensed under GPL. This means you may use it, and make any changes you like. Just, please, leave the credits on footer to respect the designer’s work.

In the words of its author:

The theme features an elegant design that uses a dark (brown) content area against a light page background accented by a spiffy floral pattern reminiscent perhaps of libraries of old estate manors in the movies (or if you own one),

Features

• 1 and 2 Columns.
• Menu with static pages.
• Color Settings from the panel.
• Social menu.

Download

Blogger: Download | Demo
WordPress: Download | Demo

Installation

You can read our FAQ section to see how to install a blogger template.

Settings

Social menu

In the template code (Home → Design → Edit HTML) seeks the following code:

<div class='social'>
  <ul>
   <li><a class='s1' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='RSS'><em>RSS Feed</em></a></li>
   <li><a class='s3' href='http://twitter.com/username' title='Twitter'><em>Twitter</em></a></li>
   <li><a class='s4' href='http://facebook.com/username' title='FaceBook'><em>FaceBook</em></a></li>
   <li><a class='s2' href='#' title='Share'><em>Share</em></a></li>
  </ul>
</div>

And replace each url with yours.

Menu

To add links to the menu simply create a new static page from the Dashboard.

Date

Change the format of Date Header Format (Dashboard → Settings → Formatting → Date Header Format) for the penultimate option.

License

This work is licensed Creative Commons Attribution-Share Alike 3.0 License. This means you may use it, and make any changes you like. Just leave the credits on footer to respect the designer’s work.

The web services included are Facebook, Twitter, Feed RSS, YouTube, Vimeo, Flickr, MSN, and Skype.

These are in three different sizes: 64×64, 100×100 y 200×200 in PNG with good quality to scale them easily. Have transparent background to match any design.

License

• Released under Creative Commons Attribution 2.5 License.
• Personal or commercial use is allowed but not selling.
• When distributing, please link to this article and not to the file or to another post or server.

Download

Download Apple Icon Pack.

The vector file (source) has been also included for you to make your own Rubik Cubes or whatever you want.

License

• Released under Creative Commons Attribution 2.5 License.
• Personal or commercial use is allowed but not selling.
• When distributing, please link to this article and not to the file or to another post or server.

Download

Download Rubik Social Icons

This time we will make an exercise to create a small character from the paper, through Adobe Illustrator, to its implementation on HTML and CSS. At the bottom of the page we leave a file with the images and the code for you, so you can implement it on your web if you want. (See demo)

Vectors and picture

Vectors have great advantages and latest versions of Illustrator are amazing, our designs will be more than colored spots.

I won’t deny the fact that knowing some drawing basics is helpful, but definitely the web is a summary with images to take ideas from, to see different techniques. To begin on making our projects, drawing helps, but good ideas are always better.

From sketch to Illustrator

Let’s begin sketching our character. This will help us to have an clearer idea on how to start. As I said before, you can take ideas from images you have seen before and you think they are interesting.

I can say I like to making it this way, sketching. I usually trace on Illustrator directly but at least I can get a clearer idea and I know what to do. A while ago I spent a lot of time in front of computer without having a clear idea on what to draw and because of that I lost time. Some sketches finished that.

We will start with basic shapes for head and ears, we’ll draw three circles together and then apply Pathfinder (Shift+Ctrl+F9 or Window → Pathfinder) and apply Unite.

We’ll trace eyes, two black, little circles will be enough, we’ll put them and center them, and then we’ll make hair.

Now we’ll just color it and unite shapes.

This is merely a guide. You should be able to create any character you want. I’m just showing you a boy.

Now the interesting thing: the smile which will change. At first, we’ll make a simple smile (closed mouth); a half a circle will be enough, then we’ll make a bright smile. We duplicate our layer with the simple smile character and in the duplicated layer we do the following;

RSS icon and strokes

We’ll make our feed RSS icon which is the main reason for doing this illustration.  We’re going to put it behind the character and in the final image the button will be released, so it will create a movement effect.

Now let’s make the final touches to our button, select the character, unite all the shapes using Pathfinder, fill it with any color and apply a thick stroke to the shape. Do the same to the RSS icon.

We’re going to make a sparkle that comes from behind the character. Draw a vertical stripe and apply Transform effect (Effects → Distor & Transform).

Expand the shape (Object → Expand Appearance) and apply Unite. Adjust some ends and add a gradient.

We’re finally add some text to make more obvious the rollover image, so we have now two images like these:

Implementing the button

From Illustrator export both images. The result, two images in web format like PNG8, in example. To make possible use them in a hover, both images must be the same size and be perfectly aligned, vertically and horizontally, and then join them together. In other words, if you put one over the other, their shapes should match.

We have put both images one above the other to use them as a CSS sprite.

For the HTML this code is enough:

<a href='https://btemplates.com/feed/' class='botonrss'>Feed RSS</a>

The CSS will give the ‘hover’ effect, so when you pass the mouse pointer over the image, it will show the second image, giving the appearance of animation.

a.botonrss {
    width:166px;
    height:180px; /* Image size */
    text-indent:-9999px;
    overflow:hidden; /* Hiding the link text */
    display:block;
    background:url(images/rss-boton.png) no-repeat 0 0; /* Setting the image as a background */
}
a.botonrss:hover {
    background: url(images/rss-boton.png) no-repeat 0 -180px; /* When passing the mouse over, the image will be 'raised' */
}

Now, we just need to see the demo working.

Implement it on Blooger or WordPress

It’s really easy to implement it on Blogger or WordPress. The HTML code can be added to any widget on the sidebar. On WordPress, the CSS code is added to the style.css file and on Blogger after this code:

]]></b:skin>

Don’t forget to change the URL for the one of your feed and the image routh in the CSS.

Download

Download HTML code and images.

Conclusion

In this tutorial we learned how to create an ‘animated’ button starting from the paper. Although tt may require some work, the final thing worth the effort.

In the same way, if you liked this button to use it on your website, download it and implement it. We released it under Creative Commons License, and if you want to link us giving proper credit, we will appreciate it in advance. 😀

By the way: this is the first tutorial we Ulises and Francisco make together, -mainly Ulises. We hope you have enjoy it like we did!

Download

Download Converse Social Icons.

License

• Released under Creative Commons Attribution 2.5 License.
• You may use these icons in personal or commercial projects, but you can’t sell them.