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

Blogger Random – Recent – Specific Label Posts Widget – All in One Post Feed Widget

Recent posts or random posts widget from all labels or specific label is now available for you Blogger Blogspot. Just check your favorite ... READ MORE

Simple Social Image Hover Sharing Plugin for Blogger – Blogspot

Simple Social Image Hover Sharing Plugin allows visitors can share your image direct to their social networks when they are hover on an ... READ MORE

Simple Flickr Badge with CSS3 Effects for Blogger / Blogspot

Features

How to get Flickr ID?

Widget Options

YOU WILL ALSO LIKE

Blogger Random – Recent – Specific Label Posts Widget – All in One Post Feed Widget

Simple Social Image Hover Sharing Plugin for Blogger – Blogspot

Tien Nguyen

SUBSCRIBE NEWSLETTERS