I have created a sleek share-widget which can be added to any webpage.
You can see the outcome in my blog's sidebar.
The designing part wasn't hard at all. I've just downloaded the ready-made icons for facebook, twitter and rss, so no graphic-tutorial today.
How to use:
There are only 3 steps for making this to work :) :
1)Add this to your css file:
.share-widget img{
float: left;
border:none;
margin:5px 5px 5px 5px;
position:relative;
}
.share-widget{
position:relative;
margin:5px auto 5px auto;
width:185px;
height:60px;
}
#share-alt{
display:none;
position:absolute;
font-size:18px;
color:white;
background-color:#0a0a0a;
padding: 5px 2px 5px 2px;
z-index:5;
}
.share-widget .over{
position:absolute;
left:-7px;
top:20px;
}2)In every page containg the widget you must include the jQuery library and the jQuery script of the widget.
<script src='http://code.jquery.com/jquery-1.8.2.min.js'></script> <script src='http://files.tips4design.com/js/share.js'></script>This code goes between the <head> <head/> tags :D
3)Insert the code below where you want your widget to be:
<div class="share-widget" > <div class="icons"> <div ><a href="#"><img src="http://files.tips4design.com/images/facebook.png" alt="Be a fan on Facebook"/></a></div> <div ><a href="https://twitter.com/tips4designcom" target="_blank"><img src="http://files.tips4design.com/images/twitter.png" alt="Follow us on twitter"/></a></div> <div ><a href="http://feeds.feedburner.com/tips4design" target="_blank"><img src="http://files.tips4design.com/images/rss.png" alt="Subscribe to RSS"/></a></div> </div> <div class="over"><img src="http://files.tips4design.com/images/over.png"/></div> </div> <div id="share-alt"></div> </div>
MAKE SURE YOU REPLACE THE a href (links) WITH YOUR OWNS!
You can change the alt-text to anything, but remember you must put & nbsp; (without the gap between & and nbsp;) insteat of " " (space), otherwise the alt may be shown on 2 lines.
NOTE!: You may want to upload the image files (facebook,rss,twitter,and over ".png"'s) to your website so that the widget would load faster. You can also upload the jQuery library & "scriptulmeu.js" to your website host. Make sure you change the "src" for the scripts&images after uploading.
Now, for the coding, you can see here the source code of the jQuery used.
This is my first jQuery script, just let me know if you find any "bugs" in it :D.
If there are any questions or suggestions feel free to ask in the comment section below.
Self-hosted analytics
I absolutely love it!
ReplyDeleteLook awesome, and is very easy to implement, thanks :)
Thanks, but I did wrong one thing:
ReplyDeleteIt says "Share widget" but it's actually a follow-widget :D . Hope that doesn't bother you guys :">.
Sorry again about that :D
Very cool tutorial, thanks. If you want to see menus, web site trends, galleries, extension etc, visit http://www.1artmedia.com , you have online demo and free download. Bye!
ReplyDeleteNice websited, I've tweeted it :D
ReplyDelete