The Ultimate DNN Blog Module – SunBlogNuke supports the social bookmark feature from the beginning, with which your readers easily share your blog post on the famous social bookmark services around the world. But you may heard of sexy bookmark plugin of Wordpress and really like the way it pop up the icons on hover so that you want to use the popular and cool SexyBoomarks plugin in your dnn blog post. Actually that was the request raised by some our customers. Now I would like to teach you how to convert the original bookmark into SexyBoomarks like effect with beautiful design & icons (If you still don’t know about SexyBoomarks or you want to learn more, please go to its homepage). The extend way is super easy and is a pure css version with css sprites technique, which inspired by the great post [Sexy bookmark like effect using pure css : re-cleaned].
Minimal Requirement
SunBlogNuke v4.2.5+ (If it is older version you may need to encounter some incompatible issues and modify it yourself)
How to apply
1) Download the package and unzip it in your local machine.
2) With ftp, upload the icons 'sexy-trans.png' and 'share-sprite.png' into the images folder of the blog theme, basing on which you want to apply those changes. For example, your customized theme named 'Sample', then the images folder should be like '/DesktopModules/SunBlog/Themes/Sample/images'.
3) Also in the customized theme, find out the file 'style.css' and open up it with your favorite html or CSS editor. I am using Visual Studio 2008 in this example.
4) Find the style part refer to 'Social Bookmarks' and replace them with the following code:
/* SOCIAL BOOKMARK */
.share-block{padding:40px 0 0 10px;}
.bookmarks-bg-enjoy{background:url(images/sexy-trans.png) no-repeat scroll 0 0;}
.share-block h3{display:none;}
.share-buttons{overflow:hidden;margin:0;padding:0;}
.share-buttons li{list-style:none;display:inline;}
.share-buttons a{
overflow:hidden;
width:75px;
height:30px;
float:left;
margin-right:5px;
text-indent:-200px;
background: transparent url(images/share-sprite.png) no-repeat scroll 0 0;
}
.share-buttons a:hover{text-decoration: none;}
.share-buttons .delicious a:hover{background-position: -624px 1px;}
.share-buttons .delicious a{background-position: -624px -40px;}
.share-buttons .digg a:hover{background-position: -486px 1px;}
.share-buttons .digg a{background-position: -486px -40px;}
.share-buttons .technorati a:hover{background-position: -208px 1px;}
.share-buttons .technorati a{background-position: -208px -40px;}
.share-buttons .reddit a:hover{background-position: -414px -47px;}
.share-buttons .reddit a{background-position: -414px 0;}
.share-buttons .stumbleupon a:hover{background-position: -276px 1px;}
.share-buttons .stumbleupon a{background-position: -276px -40px;}
.share-buttons .myspace a:hover{background-position: -416px 1px;}
.share-buttons .myspace a{background-position: -416px -40px;}
.share-buttons .facebook a:hover{background-position: -558px 1px;}
.share-buttons .facebook a{background-position: -558px -40px;}
.share-buttons .google a:hover{background-position: -70px 1px;}
.share-buttons .google a{background-position: -70px -40px;}
.share-buttons .twitter a:hover{background-position: -136px 1px;}
.share-buttons .twitter a{background-position: -136px -40px;}
.share-buttons .sharethis a:hover{background-position: 2px 0px;}
.share-buttons .sharethis a{background-position: 2px -40px;}
.share-block a{
text-indent:0;
height:auto;
text-align:center;
font-size:11px;
padding-top:35px;
color:#999;
text-decoration:none;
}
5) Save it for these changes. Then make sure to enable the option "Social Bookmark" in the reading settings. If not, just check it to active it.
6) Your sexy bookmarks will work like a charm.
Possible to extend
1) Include more social site icons, you’ll able to change/update those social websites easily by editing the js file 'jquery.shareit.js', which is placed in the folder '/DesktopModules/SunBlog/js'.
2) Modify the slogan of SexyBookmarks: Sharing is Caring, Sharing is Sexy, Share the Love, Share the Wealth, Share and Enjoy. Just edit the CSS style with new slogan icon.
Hope you like this post and find some helpful things in this. Feel free to ask anything about the article in comments section.
ps: I have to say that Sexy bookmarks is using javascript to accomplish the same effect and soon we will provide a javascript version for our community and hope it helps.