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

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

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

Simple Flickr Badge with CSS3 Effects for Blogger / Blogspot

Features

How to get Flickr ID?

Widget Options

YOU WILL ALSO LIKE

Simple Social Image Hover Sharing Plugin for Blogger – Blogspot

Premium Flexible Related Post Widget for Blogger – Blogspot

Tien Nguyen

SUBSCRIBE NEWSLETTERS