Test Case Boilerplate

Fork this way...

HTML

<div id="lbp2blog_space">
<span id="lbp2blog_logo_feed_<?=lang?>"></span>
<span class="feed_break"></span>
<div id="entrys_lbp2blog">
<div id="entrys_lbp2blog_story">

</div>
</div>
<div class="keep_reading" id="lbp2blog_read_link" align="center"></div>
<div id="lbp2blog_load" align="center">
<div class="load"></div>
LOADING
</div>
</div>

CSS

#lbp2blog_space {
    width:23%;
    min-width:150px;
    height:300px;
    padding-left:1%;
    padding-right:1%;
    
    float:left;
    
    border-radius:12px 0px 0px 12px;
    -moz-border-radius:12px 0px 0px 12px;
    -webkit-border-radius:12px 0px 0px 12px;
    
    background: #3792d7;
    background: rgb(55,146,215);
    background: rgba(55,146,215, 0.95);
    
    background:url(gradients.png);
    background-position:0px 0px;
    background-repeat:repeat-x;
    
    background: gradient(linear,left bottom,left top,color-stop(0, rgba(29,220,204, 0.95)),color-stop(0.40, rgba(55,146,215, 0.9)));
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgba(29,220,204, 0.95)),color-stop(0.40, rgba(55,146,215, 0.9)));
    background: -moz-linear-gradient(center bottom,rgba(29,220,204, 0.95) 0%,rgba(55,146,215, 0.9) 40%);
    background: -o-linear-gradient(bottom,rgba(29,220,204, 0.95) 0%,rgba(55,146,215, 0.9) 40%);
    
}
#lbp2blog_logo_feed_EN {
    background:url(sprites.png);
    background-position:0px -46px;
    width:140px;
    height:24px;
    display:block;
    margin-left:auto;
    margin-right:auto;
}
#entrys_lbp2blog {
    margin-top:5px;
    margin-bottom:5px;
    background:#FFF;
    background:rgb(255,255,255);
    background:rgba(255,255,255,.5);
    width:98%;
    height:225px;
    padding:1% 5px 1% 5px;
    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;
    overflow:hidden;
    
    font-family: 'ArialRoundedMT';
    color:#FFFFFF;
    
}
#lbp2blog_load {
    width:110%;
    height:300px;
    
    font-family: 'CrikeySquat';
    color:#FFFFFF;
    font-size:36px;
    
    margin-top:-383px;
    margin-left:-10px;
    
    border-radius:12px 0px 0px 12px;
    -moz-border-radius:12px 0px 0px 12px;
    -webkit-border-radius:12px 0px 0px 12px;
    
    background:#666666;
    background:rgba(0,0,0,.75);
}

JavaScript

var LBP2Blog_feed = 'http://lbp2blog.com/blog/?feed=json&jsonp=?';

$.getJSON(LBP2Blog_feed, function(data) {
  
    $('#lbp2blog_load').fadeOut(500);
    
    $('#entrys_lbp2blog_story').append(data[0].excerpt);
    $('#lbp2blog_read_link').append('<a href="' + data[0].shortlink + '">Continue Reading!</a>');
    return false;
});

$('#opt1_media').click(function() {
    
    $('#add_media').fadeOut(500);
    
    $('#add_video').fadeIn(500);
    
});