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 Recent Comment Widget for Blogger / Blogspot

Simple, clean and minimal design of recent comments widget for Blogger / Blogspot website with RTL compatible. ... READ MORE

Floating Bubble Counter Social Share Plugin

Social network is the important channel to increase your blog traffic. To help you visitors easy sharing your content, do not forget add a ... READ MORE

Simple Flickr Badge with CSS3 Effects for Blogger / Blogspot

Features

How to get Flickr ID?

Widget Options

YOU WILL ALSO LIKE

Simple Recent Comment Widget for Blogger / Blogspot

Floating Bubble Counter Social Share Plugin

Tien Nguyen

SUBSCRIBE NEWSLETTERS