Colocar Posts Relacionados como estes estilos ?

Hola compañeros de forobeta, quiero que me ayuden como puedo poner los articulos o post relacionados como estos estilos. Ejemplo:

1: Baseball MLB 14 - VideoTube


2:ElectroShock -EMA | Tube Mag Responsive Blogger Template


yo eh intentado sacarlo los codigos por f12 pero no pude lograrlo haber si ustedes me ayudan, no importa si para agregar manualmente las url y img de cada post relacionado.

Y esto donde quieres que vaya:

NadaPersonal disse:

Inserir CODE, HTML ou PHP:

/* MAIN CONTAINER
----------------------------------------------- */
h3.post-title.entry-title, #blog-pager, .blog-feeds {
display: none;
}
.section-header {
overflow: hidden;
margin-bottom: 20px;
}
.section-header h3 {
color: #888;
font-size: 20px;
letter-spacing: 0;
margin: 0;
font-weight: 300;
font-family: Lato, sens-serif;
float: left;
margin-top: 3px;
}
.section-header h3 i {
font-size: 13px;
background: #E73737;
color: #fff;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
border-radius: 50%;
letter-spacing: 0;
margin-right: 2px;
vertical-align: middle;
margin-top: -3px;
}
.section-header h3 i.fa-play {
font-size: 9px;
}
.section-header .section-nav {
float: right;
position: static;
width: auto;
margin: 0;
}
.section-header .section-nav .bullet {
background: #ddd;
width: 13px;
height: 13px;
display: inline-block;
border-radius: 50px;
border: 0;
margin: 0;
}
.section-header .section-nav .bullet.active {
background: #e73737;
}
.post-labels, .post-comment-link {
display: none;
}
.post.hentry {
float: left;
margin-bottom: 30px;
padding: 0 14px;
}
.post-home-title {
font-size: 13px;
color: #000;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
}
.post-home-title:hover {
text-decoration: underline;
}
.post-timestamp, .post-timestamp a {
color: #AAA;
font-size: 12px;
}
.post-timestamp i {
font-size: 14px;
color: #C5C5C5;
margin-right: 3px;
}
.home-widgets {
margin-bottom: 30px;
}
#related-posts .title h4 {
color: #888;
font-size: 20px;
letter-spacing: 0;
margin: 25px 14px 10px;
font-weight: 300;
font-family: Lato, sens-serif;
}
.carousel_related h3 {
margin: 0 0 4px;
line-height: 21px;
overflow: hidden;
}
.carousel_related h3 a {
font-size: 13px;
color: #000;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
}
.ads-here {
max-width: 100%;
margin: 30px 0 10px;
}
.ads-here img, .ads-here div, .ads-here iframe, .ads-here embed {
max-width: 100%;
}
.post-feeds {
display: none;
}

Y esto donde quieres que vaya:

Inserir CODE, HTML ou PHP:

<div class='related_posts row'>
<script type='text/javascript'>
                      var defaultnoimage="http://3.bp.blogspot.com/-H3EZ0LhM0Og/UZ8s_cbYLMI/AAAAAAAABis/r6YgFYWrO-U/s1600/no_image.jpg";
                      var maxresults=9;
                      var splittercolor="";
                      var relatedpoststitle="Related Videos";
                    </script>
<div id='related-posts'>
<script src='http://forobeta.com//feeds/posts/default/-/Real Life Movies?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6' type='text/javascript'></script>
<script src='http://forobeta.com//feeds/posts/default/-/sports?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6' type='text/javascript'></script>
<script type='text/javascript'>
                          removeRelatedDuplicates_thumbs();
                          printRelatedLabels_thumbs("http://videotube-sora.blogspot.pe/2014/06/baseball-mlb-14.html");
                        </script>
</div><div style='clear:both'></div>
</div>

Clique para expandir...

no me funcionó .