How to create Custom Social Widget?


Custom Social WidgetEveryone wants to make his blog looks Good and Professional. Don’t you want to make your blog feel awesome and unique? Yes you want. But you don’t know How to do this, Right? Don’t worry I am here for you, lets do it together. In this post i will show you how you can create Custom Social Widgets for Websites. Well you required some skills to create such widgets

  • Basic Knowledge of Photoshop
  • Basic Knowledge of HTML /CSS

If you don’t know Photoshop, Html and CSS don’t worry you can find Pre Coded widgets below to use on your Blog.

How to Design Custom Social Widget?

First you have to Design your widget in Photoshop. Photoshop is not necessary, you can design your widget in any Image Editing Software. In this article I’m going to use Photoshop CS5.1 for designing my Widget. I will design the twitter widget I’m using in my Sidebar. After designing you have to code the widget, it is not that much hard just 5-6 coding lines required for that widget. If you know the basics of HTML/CSS you can easily do this job. So lets get started!

  • Design a Custom Widget in Photoshop
  • Code a Custom Widget in Html/CSS

Design a Custom Social Widget in Photoshop

Open Photoshop and Click on File >> New. create a New Document. Set the exact Width as your Sidebar (Mine is 300px) and Height 125px. Resolution should be 72 pixels/inch. Set the color mode as RGB Color 8 bit and White Background. You can have a look on the screenshot below. WordPress Custom Widgets Now Press Shift+F5 and choose Color #2289b2 Click on OK. Now choose Brush tool and increase the size to 400px. Color should be #53bae3. Now brush in the center of Background and it should be look like this. twitter wordpress custom widget Now choose the Text tool and font should be Open Sans. Write Follow us on. Find a text logo of twitter from Google and make sure it is in PNG. Simply write in google twitter png and download it. Drag it into photoshop, adjust the size of it, Open the blending options of the logo and choose the color as white. Drag it next to the text so it should be look like this. Custom Social Widget WordPress Now hold the CTrl button and click on the logo layer and text layer. Press CTrl + E and the both of the layers will be merge. Now open the blending options of the New Merged layer and click on Outer Glow. The properties of outer glown can be found in the screen shot below. WordPress Widgets Now choose the Rounded Rectangle Tool, Choose the Radius as 8px and color #005171. Now create a box below the text where the Twitter Follow Count button will be appear. It will be look like this. Custom Widgets So the designing work of the Widget in Photoshop is finish. Now lets Code the Widget.

Code a Custom Social Widget in Html/CSS

Now you have to code the widget using Basics of HTML and CSS. I can’t get into the depth tutorial of html/css. All You have to generate your Twitter Follower button code. You can get your twitter Follower button code by clicking here. Now you have to set the designed image as a background in css and paste the generated code above it in another class. Now you have to adjust the padding to fix the position of Widget button in CSS. If you don’t know HTML/CSS you can copy the code below which coded by me.

<style type="text/css">
.twitter-follow-box {
width: 300px;
height: 125px;
background: url( no-repeat;

.twitter-follow {
border: 0;
padding: 73px 0 0 50px;

<div class="twitter-follow-box">
<div class="twitter-follow">
<a href="" class="twitter-follow-button">Follow @YourTwitterID</a>
<script src="//" type="text/javascript"></script>

Paste this code into Text Widget, and Replace

YourTwitterID: Your Twitter Username


After replacing your Sidebar will have new Custom and unique Twitter Widget. You can also create some custom and unique WordPress Widgets just by learning Some HTML/CSS and Photoshop Basics.   Subscribe to the blog because I am going to share tons of WordPress Custom Widget in my upcoming posts. Share the post with your friends on Facebook, Twitter and Google Plus.


You can post comments in this post.

Post A Reply

CommentLuv badge