Untitled

dabblet.css

@import url(http://weloveiconfonts.com/api/?family=entypo);

[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

html {
  margin:0;
  padding:50px 0;
  background: #161616 url(http://i43.tinypic.com/sfgmc3.gif);
}

#postsocialsharewrapper {
  text-align:center;
  position:relative;
  left:0;
  right:0;
  margin: 40px auto;
  width:300px;
}

input[type="checkbox"]{display:none;}

.cbox:checked + .label {
  color:#fff;
  opacity: 0.8;
}

.cbox:checked ~ .postsocialshare {
  transform:scale(1) translateY(20px);
}

.label {
  font-family: 'entypo';
  font-size:22px;
  cursor:pointer;
  margin:0;
  padding:5px 10px;
  border-radius:10%;
  color:#fff;
  opacity: 0.4;
}

.postsocialshare {
  transform-origin:50% 0%;
  transform:scale(0) translateY(-190px);
  transition:.5s;
}
.postsocialshare ulss {
  position:relative;
  left:0;
  right:0;
  margin:-5px auto 0;
  height:46px;
  width:300px;
  padding:0;
  list-style:none;
}

.postsocialshare ulss liss {
  font-size:17px;
  font-family: 'entypo-social';
  cursor:pointer;
  width:60px;
  margin:0;
  padding:12px 0;
  text-align:center;
  float:left;
  color:#FFF;
  height:22px;
  opacity:0.4;
}

.postsocialshare ulss liss:hover {opacity:1 !important;color:#FFF !important;}

.postsocialshare liss[class*="twitter"] {}
.postsocialshare liss[class*="gplus"] {}
.postsocialshare liss[class*="stumbleupon"] {}
.postsocialshare liss[class*="tumblr"] {}
.postsocialshare liss[class*="facebook"] {}

.postsocialshare ulss liss.entypo-tumblr:before {
  font-family: 'entypo';
  content:'\F315';
}

.postsocialshare ulss liss.entypo-facebook:before {
  font-family: 'entypo';
  content:'\F30C';
}

.postsocialshare ulss liss.entypo-gplus:before {
  font-family: 'entypo';
  content:'\F30F';
}

.postsocialshare ulss liss.entypo-stumbleupon:before {
  font-family: 'entypo';
  content:'\F31E';
}

.postsocialshare ulss liss.entypo-twitter:before {
  font-family: 'entypo';
  content:'\F309';
}

.label.entypo-share:before {
  font-family: 'entypo';
  content:'\E715';
  color: #fff;
}

dabblet.html

<div id="postsocialsharewrapper">
  <input type="checkbox" class="cbox" id="share" unchecked />
  <label for="share" class="label entypo-share"></label>
  <div class="postsocialshare">
    <ulss>
      <a target="_blank" href="http://twitter.com/share?text=<?php the_title(); ?>&url=<?php the_permalink();?>" ><liss class="entypo-twitter"></liss></a>
      <a target="_blank" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>" ><liss class="entypo-facebook"></liss></a>
      <a href="https://plus.google.com/share?hl=en&url=<?php if(is_home()){echo home_url();}else{the_permalink();} ?>" ><liss class="entypo-gplus"></liss></a>
      <a target="_blank" href="http://tumblr.com/share/link?url=<?php the_permalink(); ?>&media=<?php echo $image->guid;?>&description=<?php echo rawurlencode(get_the_title()); ?>" ><liss class="entypo-tumblr"></liss></a>
      <a target="_blank" href="http://stumbleupon.com/submit?url=<?php the_permalink(); ?>&media=<?php echo $image->guid;?>&description=<?php echo rawurlencode(get_the_title()); ?>" ><liss class="entypo-stumbleupon"></liss></a>
    </ulss>
  </div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}