kazuhirosaji/coderwall_badge_markup.html

## coderwall_badge_markup.html
<html>
<!-- Add these tags to the HEAD section of your page. -->
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'> </script>
<link href="http://coderwall.com/stylesheets/jquery.coderwall.css" media="all" rel="stylesheet" type="text/css">
<script src="http://coderwall.com/javascripts/jquery.coderwall.js"></script>
<style type="text/css">
/* Add style about badge's badge_description */
#badge_description {
  display:none;
  position:absolute;
  padding:5px; margin-left:10px;
  color:white;background-color:#505050;
}
</style>
<script type="text/javascript">
/* Display descripton when you hover badge */
function set_description() {
  var msg_box;
  $("img").hover(function(){
    if ( $(this).hasClass("coderwall-badge")) {
      var text = $(this).attr("alt");
      var offset = $(this).offset();
      msg_box = $("#badge_description").get(0);
      msg_box.style.display = "inline";
      msg_box.innerText = text;
      msg_box.textContent = text;
      msg_box.style.left = offset.left;
      msg_box.style.top = offset.top + 60;
    }
  }, function() {
    msg_box = $("#badge_description").get(0);
    msg_box.style.display = "none";
  });
};
</script>
</head>

<body onload="set_description()">
<!-- You also need to place a container where you'd like the Coderwall badges to render. -->
<section class="coderwall" data-coderwall-username="kazuhirosaji" data-coderwall-orientation="vertical"></section>
<span id="badge_description">badge_description about badge's</span>
</body>
</html>

## coderwall_badge_style.css
section.main {
  position: relative;
}

section.coderwall {
  position: absolute;
  top: 0px;
  left: 800px;
}
	<html>
	<!-- Add these tags to the HEAD section of your page. -->
	<head>
	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'> </script>
	<link href="http://coderwall.com/stylesheets/jquery.coderwall.css" media="all" rel="stylesheet" type="text/css">
	<script src="http://coderwall.com/javascripts/jquery.coderwall.js"></script>
	<style type="text/css">
	/* Add style about badge's badge_description */
	#badge_description {
	display:none;
	position:absolute;
	padding:5px; margin-left:10px;
	color:white;background-color:#505050;
	}
	</style>
	<script type="text/javascript">
	/* Display descripton when you hover badge */
	function set_description() {
	var msg_box;
	$("img").hover(function(){
	if ( $(this).hasClass("coderwall-badge")) {
	var text = $(this).attr("alt");
	var offset = $(this).offset();
	msg_box = $("#badge_description").get(0);
	msg_box.style.display = "inline";
	msg_box.innerText = text;
	msg_box.textContent = text;
	msg_box.style.left = offset.left;
	msg_box.style.top = offset.top + 60;
	}
	}, function() {
	msg_box = $("#badge_description").get(0);
	msg_box.style.display = "none";
	});
	};
	</script>
	</head>

	<body onload="set_description()">
	<!-- You also need to place a container where you'd like the Coderwall badges to render. -->
	<section class="coderwall" data-coderwall-username="kazuhirosaji" data-coderwall-orientation="vertical"></section>
	<span id="badge_description">badge_description about badge's</span>
	</body>
	</html>
	section.main {
	position: relative;
	}

	section.coderwall {
	position: absolute;
	top: 0px;
	left: 800px;
	}