cara pasang likebox beken

moonroemoort

widget

5 December 2013

Belum ada komentar

bosan dengan like box yang biasa 22 aja ????

sebenarnya moonroemoort juga pernah share like box bergerak dengan jquery itu like box yang cukup untuk membuat penampilan blog kita jadi menarik ..

tapi like box ini juga tidak kalah kerennya braderr ...

cara memasangnya memang sama saja seperti memasang CSS3 flying out menu





ikuti langkahnya

• masuk blogger
• klik tata letak
• add gadget
• pilih html/javascript
• paste kode di bawah ini

<style>
.wrapper {padding:5px;
  width: 276px;
  height: 362px;
  border-radius: 0px;
  position: relative;
  z-index: 90;
background:#eee;background-image:-moz-linear-gradient(top, #fff, #eee);background-image:-ms-linear-gradient(top, #fff, #eee);background-image:-o-linear-gradient( top, #fff, #eee);background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));background-image:-webkit-linear-gradient(top, #fff, #eee);background-image:linear-gradient(top, #fff, #eee);border:1px
solid #ddd;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0 1px 0 #9a9a9a;-webkit-box-shadow:0 1px 0 #9a9a9a;box-shadow:0 1px 0 #9a9a9a;padding:10px;
}
.inner  {border:1px dashed #ccc;padding:0.5em;-moz-box-shadow:0 0 0 1px #fff;-webkit-box-shadow:0 0 0 1px #fff;box-shadow:0 0 0 1px #fff}
.ribbon-wrapper-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}
.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #306EFF;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#306EFF), to(#3BB9FF));
  background-image: -webkit-linear-gradient(top, #306EFF, #3BB9FF);
  background-image:    -moz-linear-gradient(top, #306EFF, #3BB9FF);
  background-image:     -ms-linear-gradient(top, #306EFF, #3BB9FF);
  background-image:      -o-linear-gradient(top, #306EFF, #3BB9FF);
  color: #fff;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}
.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}​
</style>
<div class="wrapper">
<div class="inner">
<div class="ribbon-wrapper-green">
<div class="ribbon-green">
Facebook</div>
</div>
<center><iframe allowtransparency="false" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=LINK FANS PAGE ANDA&amp;width=240&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23eeeeee&amp;stream=false&amp;header=false&amp;height=345" style="background: trasparent; border: 0px solid #222; height: 345px; overflow: hidden; width: 240px;"></iframe></center>
  </div> 

• klik simpan

keterangan : ganti yang berwarna merah dengan url fanspage anda