Simple Flickr Badge with CSS3 Effects for Blogger / Blogspot

This widget will help you adding Flickr Badget to your Blogger / Blogspot with simple CSS3 animation effects. Features Fully customize

Details Comments (0)

This widget will help you adding Flickr Badget to your Blogger / Blogspot with simple CSS3 animation effects.

Features

Fully customize background, border, size, count, …
CSS3 Effect Ready: spin, zoom, jump, opacity
Responsive

How to get Flickr ID?

You will see your Flickr ID on browser address bar similar (which high light with light red color in below figure)

#bcd_141020_flickr .flickr_badge_image a img {
	transition: all /*Animation_Speed_Start*/200ms ease-in-out;/*Animation_Speed_End*/
	-webkit-transition: all /*Animation_Speed_Start*/200ms ease-in-out;/*Animation_Speed_End*/
	-moz-transition: all /*Animation_Speed_Start*/200ms ease-in-out;/*Animation_Speed_End*/
	-o-transition: all /*Animation_Speed_Start*/200ms ease-in-out;/*Animation_Speed_End*/
	display: inline-block;
	border-style: solid;
	line-height: 0;
	
	border-width: /*Border_Width_Start*/0px;/*Border_Width_End*/
	border-color: /*Border_Color_Start*/#000000;/*Border_Color_End*/
	-webkit-border-radius: /*Border_Radius_Start*/0px;/*Border_Radius_End*/
	-moz-border-radius: /*Border_Radius_Start*/0px;/*Border_Radius_End*/
	-ms-border-radius: /*Border_Radius_Start*/0px;/*Border_Radius_End*/
	-o-border-radius: /*Border_Radius_Start*/0px;/*Border_Radius_End*/
	border-radius: /*Border_Radius_Start*/0px;/*Border_Radius_End*/
	background-color: /*Background_Color_Start*/#000000;/*Background_Color_End*/
	margin: /*Margin_Start*/0px;/*Margin_End*/
	padding: /*Padding_Start*/0px;/*Padding_End*/
	
	
	*display: inline;
	zoom: 1;
}
#bcd_141020_flickr .flickr_badge_image a img:hover{
	border-color: /*Hover_Border_Color_Start*/#990000;/*Hover_Border_Color_End*/
	-webkit-border-radius: /*Hover_Border_Radius_Start*/0px;/*Hover_Border_Radius_End*/
	-moz-border-radius: /*Hover_Border_Radius_Start*/0px;/*Hover_Border_Radius_End*/
	-ms-border-radius: /*Hover_Border_Radius_Start*/0px;/*Hover_Border_Radius_End*/
	-o-border-radius: /*Hover_Border_Radius_Start*/0px;/*Hover_Border_Radius_End*/
	border-radius: /*Hover_Border_Radius_Start*/0px;/*Hover_Border_Radius_End*/
	background-color: /*Hover_Background_Color_Start*/#990000;/*Hover_Background_Color_End*/
}
#bcd_141020_flickr.spin .flickr_badge_image a img: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_141020_flickr.jump .flickr_badge_image a img:hover {
	-webkit-transform:translateY(-25%);
	-moz-transform:translateY(-25%);
	-ms-transform:translateY(-25%);
	-o-transform:translateY(-25%);
	transform:translateY(-25%);
}
#bcd_141020_flickr.zoom .flickr_badge_image a img:hover {
	-webkit-transform:scale(1.2, 1.2);
	-moz-transform:scale(1.2, 1.2);
	-ms-transform: scale(1.2, 1.2);
	-o-transform:scale(1.2, 1.2);
	transform:scale(1.2, 1.2);
}
#bcd_141020_flickr.opacity .flickr_badge_image a img{
	opacity: 0.5;
    filter: alpha(opacity=70);
}
#bcd_141020_flickr.opacity .flickr_badge_image a img:hover {
	opacity: 1;
    filter: alpha(opacity=100);
}
#bcd_141020_flickr .bcd_141020_copyright {
	font-size: 10px;
	opacity: 0.5;
	filter: alpha(opacity=50);
	clear: both;
	margin: 10px 0 0 0;
}
#bcd_141020_flickr .bcd_141020_copyright:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}
</style>

var copy_right = '';
if (BCD_141020_SHOW_COPYRIGHT) {
	copy_right = '<p class="bcd_141020_copyright">By <a href="http://sneeit.com/2014/10/simple-flickr-badge-with-css3-effects-for-blogger-blogspot.html" target="_blank">Sneeit</a></p>';
}
document.write('<div id="bcd_141020_flickr" class="'+BCD_141020_EFFECT+'"><script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count='+BCD_141020_COUNT+'&display='+BCD_141020_DISPLAY+'&size='+BCD_141020_SIZE+'&layout=x&source=user&user='+BCD_141020_USER_ID+'"><\/script>'+copy_right+'</div>');

</script>

Post Your Comment