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

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

Simple Flickr Badge with CSS3 Effects for Blogger / Blogspot

Features

How to get Flickr ID?

Widget Options

YOU WILL ALSO LIKE

Flexible Recent Comment Widget for Blogger

Premium Flexible Related Post Widget for Blogger – Blogspot

Tien Nguyen

SUBSCRIBE NEWSLETTERS