How do i get this (Screenshot inside)

Is it possible to find out How he did it with this addon?
HTML:
<div id="rightContentArea" class="pageWidth">
	<div id="rightContentBox">
		<a href="https://twitter.com/#!/HerocraftOnline" target="_blank" class="NoOverlay Tooltip" title="Follow us on Twitter" data-cacheOverlay="true"> <img src="/main/styles/herocraft/xenforo/img/twitter.png" width="32px" height="32px" border="none" alt="Twitter"></a>
		<a href="https://www.facebook.com/HerocraftOnline" target="_blank" class="NoOverlay Tooltip" title="Like us on Facebook" data-cacheOverlay="true"> <img src="/main/styles/herocraft/xenforo/img/facebook.png" width="32px" height="32px" border="none" alt="Facebook"></a>
		<a href="https://plus.google.com/117499098655126203280/posts" target="_blank" class="NoOverlay Tooltip" title="Circle us on Google+" data-cacheOverlay="true"> <img src="/main/styles/herocraft/xenforo/img/plus.png" width="32px" height="32px" border="none" alt="Google+"></a>
		<a href="http://www.youtube.com/user/HerocraftonlineDH" target="_blank" class="NoOverlay Tooltip" title="Subscribe to our videos" data-cacheOverlay="true"> <img src="/main/styles/herocraft/xenforo/img/youtube.png" width="32px" height="32px" border="none" alt="YouTube"></a>
		<a href="http://steamcommunity.com/groups/areyoudisposable" target="_blank" class="NoOverlay Tooltip" title="Game with us on Steam" data-cacheOverlay="true"> <img src="/main/styles/herocraft/xenforo/img/steam.png" width="32px" height="32px" border="none" alt="Steam"></a>
		<a href="http://herocraftonline.com/vote" target="_blank" class="NoOverlay Tooltip" title="Vote for us and earn free exp and coin!" data-cacheOverlay="true"> <img src="/main/styles/herocraft/xenforo/img/vote1.png" width="32px" height="32px" border="none" alt="Vote for us and earn exp and coins!"></a>
	</div>
</div>

Code:
#rightContentArea {
    position: relative;
}
#rightContentBox {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.13);
    border-radius: 6px 6px 6px 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    color: #F0F0F0;
    font-style: italic;
    max-width: 410px;
    padding: 12px;
    position: absolute;
    right: 0;
    text-shadow: 0 0 0 transparent, 1px 1px 0 #2B485C;
    top: 30px;
}
#rightContentArea #rightContentBox a:link, #rightContentArea #rightContentBox a:visited {
    color: #6CB2E4;
    font-weight: bold;
}
 
HTML:
<div id="rightContentArea" class="pageWidth">
<div id="rightContentBox">
<a href="https://twitter.com/#!/HerocraftOnline" target="_blank" class="NoOverlay Tooltip" title="Follow us on Twitter" data-cacheOverlay="true"> <img src="/main/styles/herocraft/xenforo/img/twitter.png" width="32px" height="32px" border="none" alt="Twitter"></a>
<a href="https://www.facebook.com/HerocraftOnline" target="_blank" class="NoOverlay Tooltip" title="Like us on Facebook" data-cacheOverlay="true"> <img src="/main/styles/herocraft/xenforo/img/facebook.png" width="32px" height="32px" border="none" alt="Facebook"></a>
<a href="https://plus.google.com/117499098655126203280/posts" target="_blank" class="NoOverlay Tooltip" title="Circle us on Google+" data-cacheOverlay="true"> <img src="/main/styles/herocraft/xenforo/img/plus.png" width="32px" height="32px" border="none" alt="Google+"></a>
<a href="http://www.youtube.com/user/HerocraftonlineDH" target="_blank" class="NoOverlay Tooltip" title="Subscribe to our videos" data-cacheOverlay="true"> <img src="/main/styles/herocraft/xenforo/img/youtube.png" width="32px" height="32px" border="none" alt="YouTube"></a>
<a href="http://steamcommunity.com/groups/areyoudisposable" target="_blank" class="NoOverlay Tooltip" title="Game with us on Steam" data-cacheOverlay="true"> <img src="/main/styles/herocraft/xenforo/img/steam.png" width="32px" height="32px" border="none" alt="Steam"></a>
<a href="http://herocraftonline.com/vote" target="_blank" class="NoOverlay Tooltip" title="Vote for us and earn free exp and coin!" data-cacheOverlay="true"> <img src="/main/styles/herocraft/xenforo/img/vote1.png" width="32px" height="32px" border="none" alt="Vote for us and earn exp and coins!"></a>
</div>
</div>

Code:
#rightContentArea {
    position: relative;
}
#rightContentBox {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.13);
    border-radius: 6px 6px 6px 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    color: #F0F0F0;
    font-style: italic;
    max-width: 410px;
    padding: 12px;
    position: absolute;
    right: 0;
    text-shadow: 0 0 0 transparent, 1px 1px 0 #2B485C;
    top: 30px;
}
#rightContentArea #rightContentBox a:link, #rightContentArea #rightContentBox a:visited {
    color: #6CB2E4;
    font-weight: bold;
}


Thank you so much! 1 more thing, Where do i put the html?
 
Top Bottom