Custom Tag Buttons Widget For WordPress Using CSS

I’ll be sharing the code for custom tag buttons which you can use as a widget in your WordPress Blog. I have designed these buttons using CSS.

So in order to implement these, you’ll need to add two part of codes. One is CSS and other is HTML. You’ll need to put the CSS code at the bottom of style.css file of your WordPress theme. And you’ll have to add the HTML code inside a text widget.

Below is the screenshot of how the custom tag buttons look like. These are very simple buttons with round border. Also when you move your cursor over the button, the color of the button changes into a darker shade.

Custom Tags

CSS Code


a.tagbutton {
background: #333;
text-transform: uppercase;
color: #fff;
font-size: 10px;
font-family: arial,sans-serif;
text-decoration: none;
opacity: .9;
padding: 4px 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-transition: background 200ms linear;
-moz-transition: background 200ms linear;
transition: background 200ms linear;
-webkit-backface-visibility: hidden;
margin: 0 5px 5px 0;
display: block;
float: left;
}

a.tagbutton:hover {
background: #000;
}

You can use the CSS code as it is. But if you want to make any changes, feel free to experiment with it. If you are not sure about how to use it, then follow these steps –

  1. Open WordPress Administrators Dashboard
  2. Go to Appearance > Editor
  3. This should open the Stylesheet (style.css)
  4. Go to the bottom of this file and paste the CSS code given above.
  5. Save the file.

HTML Code

The HTML code which i use to display the buttons in the screenshot is given below. Note that, these buttons link to my blog categories.


<a class="tagbutton" style="color:#fff" href="http://www.codefap.com/category/how-to/">How-to </a>
<a class="tagbutton" style="color:#fff" href="http://www.codefap.com/category/google/">Google</a>
<a class="tagbutton" style="color:#fff" href="http://www.codefap.com/category/android/">Android</a>
<a class="tagbutton" style="color:#fff" href="http://www.codefap.com/category/windows/">Windows</a>
<a class="tagbutton" style="color:#fff" href="http://www.codefap.com/category/wordpresstricks/">WordPress</a>
<a class="tagbutton" style="color:#fff" href="http://www.codefap.com/category/bloggertricks/">Blogger</a>
<a class="tagbutton" style="color:#fff" href="http://www.codefap.com/category/optimize/">Optimize</a>
<a class="tagbutton" style="color:#fff" href="http://www.codefap.com/category/monetize/">Monetize</a>
<a class="tagbutton" style="color:#fff" href="http://www.codefap.com/category/gaming/">Gaming</a>
<a class="tagbutton" style="color:#fff" href="http://www.codefap.com/tag/windows-8/">Windows 8</a>
<a class="tagbutton" style="color:#fff" href="http://www.codefap.com/category/web-hosting/">Web Hosting</a>
<a class="tagbutton" style="color:#fff" href="http://www.codefap.com/category/photoshop-elements-10/">Photoshop Elements 10</a>

You cannot use this code as it is. You’ll need to change it according to your need. For example, if you need a custom tag button to link to google.com then the format for that is given below –


<a style="color:#fff" href="http://www.google.com/">Google</a>

In this way you can write a html code for a button with desired link. And then just copy the html code and use it inside a text widget. If you are unsure about how to use the code then follow these steps –

  1. Open WordPress Administrators Dashboard
  2. Go to Appearance > Widgets
  3. Drag the text widget into your desired Widget Area
  4. Paste the html code inside the content area of Widget. (leave the title empty)
  5. Save the widget.
  6. Go to your blog’s home page and you’ll find the custom tag button in the widget area of your choice.

Thanks for reading and do subscribe to blog feed for more amazing posts. You can find the subscription box below.

Adding Shadow To The Text In Photoshop Elements 10

In this post, I’ll show you guys about how to Add Shadow or Drop Shadow to the text in Photoshop Elements 10. This is very easy but there’s some difference as compared to other versions of Photoshop (like Creative Suite).

First of all create new blank file and write some text in the canvas. I’ll write something like ‘Hello’ inside the canvas in green color. Then i’ll just right click on this text and select ‘Edit Layer Style‘.

Edit Layer Style Photoshop Elements 10

Once you click on ‘Edit layer style’, Style settings dialog box shows up. Here we have to just select ‘Drop shadow‘ option. And some more settings appear on screen like size, distance, opacity, lighting angle.

You can experiment with the sliders and check the results to learn more about it. Check the animation below to understand how drop shadow works in Photoshop Elements 10.

Drop Shadow - Photoshop Elements 10

The GIF above explains the usage of size, distance and lighting angle option. But one option remains, which is the opacity. Opacity will determine the opaqueness of layer. When Opacity is 100 percent, layer is totally visible. But as opacity is decreased, the layer starts to fade and becomes transparent.

This is how you can add shadow or more precisely drop shadow to the text layer in Photoshop Elements 10. This is not just limited to text layers but its going to work for every type of layer(images, shapes, etc).

Thanks for reading and do subscribe to blog feed for more amazing posts. You can find the subscription box below.

How To Add Gaussian Blur In Photoshop Elements 10

Gaussian Blur is simply a way to blur a part of image using the Gaussian function. Gaussian Blur can also be used to get a smooth image out of a pixelated sharp image.

In this post, I’ll write about how to use Gaussian Blur in Photoshop Elements 10. You can use this feature to blur a certain part of image within a minute.

STEP 1 – First of all open the image in Photoshop Elements 10. Lets consider the following image (marked 1). And in this image, I would like to blur out the sign.txt text using Gaussian Blur.

STEP 2 – The next thing you need to do is select the part using Rectangular Marquee Tool (simply press M on keyboard to select this tool).

In this case, I will just click on top left corner of sign.txt and drag it to the bottom right corner to select the sign.txt part from the image.

Gaussian Blur Photoshop Elements 10

STEP 3 – After selection, Click on Filter Menu > Select Blur > Select Gaussian Blur. Now you’ll be asked to enter radius, enter different values to check what you prefer. I would enter 2.5 radius in this case and click on OK button.

STEP 4 – Now the selected part will be blurred out. This is the result of Gaussian Blur.