Social Icons for Blogger / Blogspot Website Sidebar

This is simple social icon list with more than 30 brands. We don’t use jQuery in this widget, all animation effects are CSS3.

Details Comments (9)

Social Icons for Blogger / Blogspot Website Sidebar Feature Image

This is simple social icon list with more than 30 brands. We don’t use jQuery in this widget, all animation effects are CSS3.

Features

Change background, icon color, border width / radius / color

Original Icons

After changed background, icon color, icon size, border width/radius/color. And also changed those things for mouse hover event.

CSS3 Animation Effects Ready

Spin animation

Jump

Zoom

Opacity

Support Up To 30 Social Brands and Continue Updating…

Notes

See below image to know what you need to change in widget options

Social Icons for Blogger / Blogspot Website Sidebar Widget Tutorial

#bcd_141017_hook.spin a:hover {
	-webkit-transform: rotate(360deg);  /* Chrome, Safari 3.1+ */
	-moz-transform: rotate(360deg);  /* Firefox 3.5-15 */
	-ms-transform: rotate(360deg);  /* IE 9 */
	-o-transform: rotate(360deg);  /* Opera 10.50-12.00 */
	transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera 12.50+ */
}
#bcd_141017_hook.jump a:hover {
	-webkit-transform:translateY(-25%);
	-moz-transform:translateY(-25%);
	-ms-transform:translateY(-25%);
	-o-transform:translateY(-25%);
	transform:translateY(-25%);
}
#bcd_141017_hook.zoom a:hover {
	-webkit-transform:scale(1.5, 1.5);
	-moz-transform:scale(1.5, 1.5);
	-ms-transform: scale(1.5, 1.5);
	-o-transform:scale(1.5, 1.5);
	transform:scale(1.5, 1.5);
}
#bcd_141017_hook.opacity a{
	opacity: 0.5;
    filter: alpha(opacity=70);
}
#bcd_141017_hook.opacity a:hover {
	opacity: 1;
    filter: alpha(opacity=100);
}
</style>
<div id="bcd_141017_hook"></div>
<script type="text/javascript">
/*
Name: Social Icons List for Blogger / Blogspot website sidebar
Author: Tien Nguyen
Site: http://sneeit.com/
Version: 1.1
License GNU
*/
/*USER SETTING*/
var SOCIAL_LINKS = new Array(
/*twitter*/'',/*twitter*/
/*facebook*/'',/*facebook*/
/*google-plus*/'',/*google*/
/*youtube*/'',/*youtube*/
/*behance*/'',/*behance*/
/*linkedin*/'',/*linkedin*/
/*codepen*/'',/*codepen*/
/*delicious*/'',/*delicious*/
/*deviantart*/'',/*deviantart*/
/*dribbble*/'',/*dribbble*/
/*dropbox*/'',/*dropbox*/
/*drupal*/'',/*drupal*/
/*flickr*/'',/*flickr*/
/*foursquare*/'',/*foursquare*/
/*github*/'',/*github*/
/*instagram*/'',/*instagram*/
/*joomla*/'',/*joomla*/
/*lastfm*/'',/*lastfm*/
/*pinterest*/'',/*pinterest*/
/*reddit*/'',/*reddit*/
/*skype*/'',/*skype*/
/*slideshare*/'',/*slideshare*/
/*soundcloud*/'',/*soundcloud*/
/*stack-exchange*/'',/*stack-exchange*/
/*stack-overflow*/'',/*stack-overflow*/
/*steam*/'',/*steam*/
/*tumblr*/'',/*tumblr*/
/*twitch*/'',/*twitch*/
/*wordpress*/'',/*wordpress*/
/*yelp*/''/*yelp*/
);
var SOCIAL_ICONS = new Array(
'twitter',
'facebook',
'google-plus',
'youtube',
'behance',
'linkedin',
'codepen',
'delicious',
'deviantart',
'dribbble',
'dropbox',
'drupal',
'flickr',
'foursquare',
'github',
'instagram',
'joomla',
'lastfm',
'pinterest',
'reddit',
'skype',
'slideshare',
'soundcloud',
'stack-exchange',
'stack-overflow',
'steam',
'tumblr',
'twitch',
'wordpress',
'yelp'
);
// spin, jump, zoom, opacity, leave blank for none effect
var HOVER_EFFECT = 'spin';/*HOVER_EFFECT*/
var SHOW_TITLE = true;/*SHOW_TITLE*/

// load font awesome
var ss = document.getElementsByTagName('link');
for (var i = 0, max = ss.length; i < max; i++) {
	var href = ss[i].getAttribute('href');
	if (href && href != null && href.indexOf("font-awesome") != -1) {
        break;
	}
}
if (i >= ss.length) {
	var link = document.createElement("link");
	link.rel = "stylesheet";
	link.href = "http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css";
	document.getElementsByTagName("head")[0].appendChild(link);	
}

// make social list
var html = '';
for (var i = 0; i < SOCIAL_LINKS.length; i++) {
	var href = SOCIAL_LINKS[i];
	var title = '';
	if (SHOW_TITLE) {
		title = ' title="'+SOCIAL_ICONS[i]+'" ';
	}
	if (href && href.indexOf('://') != -1 && href.indexOf('http') != -1 && href.indexOf('.') != -1) {
		html += '<a href="'+href+'" target="_blank"'+title+'><i class="fa fa-'+SOCIAL_ICONS[i]+'"></i></a>';
	}
}
if (html) {
	hook = document.getElementById('bcd_141017_hook');
	hook.innerHTML = html;
	hook.removeAttribute('style');
	hook.setAttribute('class', HOVER_EFFECT);
}
</script>

<!-- 
BLOGGER-WIDGET-OPTIONS
"Twitter" : { "icon" : "twitter" , "start" : "/*twitter*/'", "end" : "',/*twitter*/"},
"Facebook" : { "icon" : "facebook" , "start" : "/*facebook*/'", "end" : "',/*facebook*/"},
"Google" : { "icon" : "google" , "start" : "/*goo", "end" : "gle-plus*/'',/*google*/"},
"Youtube" : { "icon" : "youtube" , "start" : "/*youtube*/'", "end" : "',/*youtube*/"},
"Behance" : { "icon" : "behance" , "start" : "/*behance*/'", "end" : "',/*behance*/"},
"Linkedin" : { "icon" : "linkedin" , "start" : "/*linkedin*/'", "end" : "',/*linkedin*/"},
"Codepen" : { "icon" : "codepen" , "start" : "/*codepen*/'", "end" : "',/*codepen*/"},
"Delicious" : { "icon" : "delicious" , "start" : "/*delicious*/'", "end" : "',/*delicious*/"},
"Deviantart" : { "icon" : "deviantart" , "start" : "/*deviantart*/'", "end" : "',/*deviantart*/"},
"Dribbble" : { "icon" : "dribbble" , "start" : "/*dribbble*/'", "end" : "',/*dribbble*/"},
"Dropbox" : { "icon" : "dropbox" , "start" : "/*dropbox*/'", "end" : "',/*dropbox*/"},
"Drupal" : { "icon" : "drupal" , "start" : "/*drupal*/'", "end" : "',/*drupal*/"},
"Flickr" : { "icon" : "flickr" , "start" : "/*flickr*/'", "end" : "',/*flickr*/"},
"Foursquare" : { "icon" : "foursquare" , "start" : "/*foursquare*/'", "end" : "',/*foursquare*/"},
"Github" : { "icon" : "github" , "start" : "/*github*/'", "end" : "',/*github*/"},
"Instagram" : { "icon" : "instagram" , "start" : "/*instagram*/'", "end" : "',/*instagram*/"},
"Joomla" : { "icon" : "joomla" , "start" : "/*joomla*/'", "end" : "',/*joomla*/"},
"Lastfm" : { "icon" : "lastfm" , "start" : "/*lastfm*/'", "end" : "',/*lastfm*/"},
"Pinterest" : { "icon" : "pinterest" , "start" : "/*pinterest*/'", "end" : "',/*pinterest*/"},
"Reddit" : { "icon" : "reddit" , "start" : "/*reddit*/'", "end" : "',/*reddit*/"},
"Skype" : { "icon" : "skype" , "start" : "/*skype*/'", "end" : "',/*skype*/"},
"Slideshare" : { "icon" : "slideshare" , "start" : "/*slideshare*/'", "end" : "',/*slideshare*/"},
"Soundcloud" : { "icon" : "soundcloud" , "start" : "/*soundcloud*/'", "end" : "',/*soundcloud*/"},
"Stack-exchange" : { "icon" : "stack-exchange" , "start" : "/*stack-exchange*/'", "end" : "',/*stack-exchange*/"},
"Stack-overflow" : { "icon" : "stack-overflow" , "start" : "/*stack-overflow*/'", "end" : "',/*stack-overflow*/"},
"Steam" : { "icon" : "steam" , "start" : "/*steam*/'", "end" : "',/*steam*/"},
"Tumblr" : { "icon" : "tumblr" , "start" : "/*tumblr*/'", "end" : "',/*tumblr*/"},
"Twitch" : { "icon" : "twitch" , "start" : "/*twitch*/'", "end" : "',/*twitch*/"},
"Wordpress" : { "icon" : "wordpress" , "start" : "/*wordpress*/'", "end" : "',/*wordpress*/"},
"Yelp" : { "icon" : "yelp" , "start" : "/*yelp*/'", "end" : "'/*yelp*/"},
"Hover Animation": {
	"start": "var HOVER_EFFECT = '",
	"end": "';/*HOVER_EFFECT*/",
	"default": "spin",
	"type": "select",
	"choice": {
		"spin" : "Spin",
		"jump" : "Jump",
		"zoom" : "Zoom",
		"opacity" : "Opacity",
		"" : "None"
	},
	"desc": "Style of animation when mouse hover"
},
"Show Title": {
	"start": "var SHOW_TITLE = ",
	"end": ";/*SHOW_TITLE*/",
	"default": true,
	"check": true,
	"uncheck": false,
	"type": "checkbox",	
	"desc": "Show icon title when mouse hover"
},
"Animation Speed": {
	"start": "/*Animation_Speed_Start*/",
	"end": "ms ease-in-out;/*Animation_Speed_End*/",
	"default": "200",
	"desc": "Icon Animation Speed in Miliseconds. Allow Integer Number Only."
},
"Border Width": {
	"start": "/*Border_Width_Start*/",
	"end": "px;/*Border_Width_End*/",
	"default": "1",
	"desc": "Icon Border Width in Pixel. Allow Integer Number Only."
},
"Border Color": {
	"start": "/*Border_Color_Start*/",
	"end": ";/*Border_Color_End*/",
	"default": "#000000",
	"type" : "color",
	"desc": "Icon Border Color"
},
"Border Radius": {
	"start": "/*Border_Radius_Start*/",
	"end": "px;/*Border_Radius_End*/",
	"default": "5",
	"desc": "Icon Corner Radius in Pixel. Allow Integer Number Only"
},
"Background Color": {
	"start": "/*background_color_start*/",
	"end": ";/*background_color_end*/",
	"default": "#000000",
	"type" : "color",
	"desc": "Icon Background Color"
},
"Icon Color": {
	"start": "/*text-color-start*/",
	"end": ";/*text-color-end*/",
	"default": "#ffffff",
	"type" : "color",
	"desc": "Icon Text Color"
},
"Icon Font Size": {
	"start": "/*font-size-start*/",
	"end": "px;/*font-size-end*/",
	"default": "20",
	"type" : "number",
	"desc": "Icon Font Size"
},
"Margin": {
	"start": "/*margin-start*/",
	"end": "px;/*margin-end*/",
	"default": "2",
	"desc": "Icon Margin in Pixel. Allow Integer Number Only"
},
"Hover Border Color": {
	"start": "/*hover-border-color-start*/",
	"end": ";/*hover-border-color-end*/",
	"default": "#990000",
	"type" : "color",
	"desc": "Icon Border Color When Mouse Hover"
},
"Hover Border Radius": {
	"start": "/*hover-border-radius-start*/",
	"end": "px;/*hover-boder-radius-end*/",
	"default": "5",
	"desc": "Icon Corner Radius in Pixel WHen Mouse Hover. Allow Integer Number Only"
},
"Hover Background Color": {
	"start": "/*hv-bg-color*/",
	"end": ";/*hv-bg-color*/",
	"default": "#990000",
	"type" : "color",
	"desc": "Icon Background Color When Mouse Hover"
},
"Hover Icon Color": {
	"start": "/*hv-color*/",
	"end": ";/*hv-color*/",
	"default": "#ffffff",
	"type" : "color",
	"desc": "Icon Text Color When Mouse Hover"
}

BLOGGER-WIDGET-OPTIONS
-->

Load Comments (9)

Flexible Recent Comment Widget for Blogger

Recent Comment widget help you and your visitors easy follow new discussions on your blog. Let’s add Flexible Recent Comments widget ... READ MORE

Premium Flexible Related Post Widget for Blogger – Blogspot

bRelated is a free premium related post widget for Blogger and Blogspot website. This widget will help visitor discover your content more ... READ MORE

Social Icons for Blogger / Blogspot Website Sidebar

Features

Change background, icon color, border width / radius / color

CSS3 Animation Effects Ready

Support Up To 30 Social Brands and Continue Updating…

Notes

Widget Options

YOU WILL ALSO LIKE

Flexible Recent Comment Widget for Blogger

Premium Flexible Related Post Widget for Blogger – Blogspot

Tien Nguyen

SUBSCRIBE NEWSLETTERS