<!-- Start: The Lounge Widget-->
<div id="thelounge">
<div class="title"><b>[Terbaru] The Lounge</b></div>
<ul>
<li class="li1"><a href="#"><i class="fa fa-star-o"></i>Judul 1</a></li>
<li class="li2"><a href="#"><i class="fa fa-star-o"></i>Judul 2</a></li>
<li class="li3"><a href="#"><i class="fa fa-star-o"></i>Judul 3</a></li>
<li class="li4"><a href="#"><i class="fa fa-star-o"></i>Judul 4</a></li>
<li class="li5"><a href="#"><i class="fa fa-star-o"></i>Judul 5</a></li>
</ul>
<div class="auth"><a href="http://trikis-zone.blogspot.com/2014/11/share-widget-lounge-ala-kaskus.html" title="Widget by TRIKIS-ZONE">Widget by TZ</a></div>
</div>
<style type="text/css">
#thelounge {width:300px;height:290px;margin-top:11px;background:#F1F5F9;box-shadow:0px 3px 0px 0px #5498c8;border-bottom-left-radius:3px;border-bottom-right-radius:3px;font-family:"Lato", "Myriad Pro", "Arial", sans-serif;font-size:14px
}
#thelounge .title {height: 30px;background:#5498c8;font-size: 16px;padding: 10px 5px 5px 20px;color:#fff;border-top-left-radius:3px;border-top-right-radius:3px
}
#thelounge .auth {text-align:right;padding:10px
}
#thelounge .auth a {font-style:italic;font-size:10px;font-weight:bold;color:#444;text-decoration:none
}
#thelounge ul {margin:0px;padding:0px
}
#thelounge ul li {list-style:none;height:40px;padding:0px 0px 0px 10px!important;border-bottom:1px dashed #ddd;transition: all 0.17s ease-in-out
}
.li1:hover {background:#E06254}
.li2:hover {background:#0DD24B}
.li3:hover {background:#fdd203}
.li4:hover {background:#ce52bb}
.li5:hover {background:#4190a8}
#thelounge ul li a {text-decoration:none;display:block;height:100%;padding-top:10px;color:#444
}
#thelounge ul li a:hover {color:#fff!important
}
#thelounge ul li a i {font-weight:bold;padding-right:5px
}
<!--End: The Lounge Widget-->
