Recent Posts with Thumbnail Image Per Category (Label) for Blogger
Recent Posts Widget with Thumbnail Image Per Category (Label) for Blogger. For Blogger Homepage. Magazine Style. Three Types.WIDGET posting terbaru dengan gambar thumbnail untuk halaman depan Blogger. Tiga jenis tampilan atau variasi. Cool!
<link href='http://fonts.googleapis.com/css?family=Lora:400italic|Open+Sans:400,300' rel='stylesheet' type='text/css'/>
CSS CODES
<style>
.rthumbbox {width: 228px;margin-bottom:20px;margin-right:25px;float:left; background:white;-webkit-box-shadow: 1px 1px 2px 0 #ccc;-moz-box-shadow: 1px 1px 2px 0 #ccc;box-shadow: 1px 1px 2px 0 #ccc;}
.rthumbbox img {width:100%;height:121px;transition:all 1s;transition-timing-function: cubic-bezier(1,.28,.65,.91);}
.rthumbbox img:hover{-webkit-transform:scale(1.2);margin:auto auto;}
.firstka{width:338px;padding-bottom:10px;}
.firstka img {width:339px;height:255px;}
.firstka .imgbox {width:339px;height:245px;}
.imgbox{overflow:hidden;width:230px;height:111px;}
.rthumbbox h2 {font-size:16px;padding:10px;font-family: 'Lora';font-style: italic;font-weight: 400;}
.firstka h2 {font-size:28px;padding:20px;}
.rthumbbox h2 a {color:#000;text-decoration:none;}
#featuredpost {width: 567px;}
.headingfeature{font-family: 'Open Sans';font-style: normal;font-weight: 300;border:1px solid #fff;margin-bottom:15px;padding:10px;background:white;width: 575px;-webkit-box-shadow: 1px 1px 2px 0 #ccc;-moz-box-shadow: 1px 1px 2px 0 #ccc;box-shadow: 1px 1px 2px 0 #ccc;}
.headingfeature .linku{background:black;color:white;text-decoration:none;float:right;margin-top:-11px;margin-right:-11px;padding:11px;-webkit-box-shadow: 1px 1px 2px 0 #ccc;-moz-box-shadow: 1px 1px 2px 0 #ccc;box-shadow: 1px 1px 2px 0 #ccc;}
.rthumbbox2 img {width: 290px;height:182px;transition: all 1s;transition-timing-function: cubic-bezier(1,.28,.65,.91);}
.rthumbbox2 {width: 290px;margin-bottom: 20px;border: 1px solid #ddd;margin-right: 15px;float: left;background: white;-webkit-box-shadow: 1px 1px 2px 0 #ccc;-moz-box-shadow: 1px 1px 2px 0 #ccc;box-shadow: 1px 1px 2px 0 #ccc;}
.rthumbbox2 img:hover {-webkit-transform: scale(1.2);margin: auto auto;}
.imgbox2 {overflow: hidden;width: 290px;height: 182px;}
.rthumbbox2 h2 a {color: #000;text-decoration: none;}
.rthumbbox2 h2 {padding: 10px;font-family: 'Lora';font-style: italic;font-weight: 400;}
#buttons{margin: 5px auto;text-align: center;background:#333;width: 10%;}
#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
#buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #ddd transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
#buttons a#nextx::before{border-color:transparent transparent transparent #ddd;margin-left:-3px}
.rthumbbox3 img {float:left;width: 105px;height:80px;padding-right:10px;}
.rthumbbox3 {width: 290px;margin-bottom: 20px;margin-right: 15px;float: left;background: white;-webkit-box-shadow: 1px 1px 2px 0 #ccc;-moz-box-shadow: 1px 1px 2px 0 #ccc;box-shadow: 1px 1px 2px 0 #ccc;}
.rthumbbox3 h2 a {color: #000;text-decoration: none;}
.rthumbbox3 h2 {font-size:16px;font-family: 'Lora';font-style: italic;font-weight: 400;padding-top:5px;}
.firstka3 img{width:290px;height:200px;padding-bottom:10px;}
.firstka3 h2{padding:10px;padding-bottom:14px;font-size:22px;}
@media screen and (max-width: 680px) {
.headingfeature {width:400px;}
#featuredpost {width: 423px;}
.rthumbbox3 {width: 415px;}
.firstka3 img {width: 415px;margin-bottom: -10px;}
.rthumbbox2 {width: 419px;}
.rthumbbox2 img{width: 419px;height:auto;}
.imgbox2 {width: 419px;height:279px}
.rthumbbox, .firstka {width: 419px;}
.firstka img{height:auto;width:419px;}
.firstka .imgbox{width:419px;height:220px;}
.imgbox{width: 419px;height:210px}
.rthumbbox img {width:419px;height:auto;}
}
@media screen and (max-width: 481px) {
.headingfeature {width:250px;margin-bottom:80px;text-align:center;}
.headingfeature .linku {width:249px;margin-top:20px;float:left;margin-left:-10px;text-align:center;}
#featuredpost {width: 270px;}
.rthumbbox3 {width: 270px;}
.firstka3 img {margin-bottom: -10px;width:270px;}
.rthumbbox2 {width: 290px;}
.rthumbbox2 img{width: 290px;height:auto;}
.imgbox2 {width: 290px;height:180px;}
.rthumbbox, .firstka {width: 290px;}
.firstka img{height:auto;width:270px;}
.firstka .imgbox{width:270px;height:146px;}
.imgbox{width:290px;height:146px;}
.rthumbbox img {height:auto;width:270px;}
}
</style>
JAVASCRIPT CODES:
<script type='text/javascript'>
/*<![CDATA[*/
function recentthumbs(_0x1bd1x2) {
for (var _0x1bd1x3 = 0; _0x1bd1x3 < _0x1bd1x2['feed']['entry']['length']; _0x1bd1x3++) {
for (var _0x1bd1x4 = 0; _0x1bd1x4 < _0x1bd1x2['feed']['entry'][_0x1bd1x3]['link']['length']; _0x1bd1x4++) {
if (_0x1bd1x2['feed']['entry'][_0x1bd1x3]['link'][_0x1bd1x4]['rel'] == 'alternate') {
break;
};
};
var _0x1bd1x5 = _0x1bd1x2['feed']['entry'][_0x1bd1x3];
var _0x1bd1x6 = _0x1bd1x5['link'][_0x1bd1x4]['href'];
var _0x1bd1x7 = _0x1bd1x5['title']['$t'];
var _0x1bd1x8;
try {
_0x1bd1x8 = _0x1bd1x5['media$thumbnail']['url'];
_0x1bd1x8 = _0x1bd1x8['replace']('/s72-c/', '/s550-a/');
} catch (error) {
s = _0x1bd1x5['content']['$t'];
a = s['indexOf']('<img');
b = s['indexOf']('src="', a);
c = s['indexOf']('"', b + 5);
d = s['substr'](b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != '')) {
_0x1bd1x8 = d;
} else {
_0x1bd1x8 = 'http://2.bp.blogspot.com/-fvGHB8GLUjY/ThG-C3fXoMI/AAAAAAAAI34/N2s5uttNFfY/s400/noimg.jpg';
};
};
document['write']('<div class="featuredpostbig"><div class="rthumbbox"><strong></strong><a href="' + _0x1bd1x6 + '" title="' + _0x1bd1x7 + '"><div class="rthumbbig"><div class="imgbox"><img alt="thumbnail image" src="' + _0x1bd1x8 + '"/></div><h2><a href="' + _0x1bd1x6 + '" title="' + _0x1bd1x7 + '">' + _0x1bd1x7 + '</a></h2></div></a></div></div>');
};
};
/*]]>*/
</script>
<script type='text/javascript'>
/*<![CDATA[*/
function recentthumbs2(_0x1bd1x2) {
for (var _0x1bd1x3 = 0; _0x1bd1x3 < _0x1bd1x2['feed']['entry']['length']; _0x1bd1x3++) {
for (var _0x1bd1x4 = 0; _0x1bd1x4 < _0x1bd1x2['feed']['entry'][_0x1bd1x3]['link']['length']; _0x1bd1x4++) {
if (_0x1bd1x2['feed']['entry'][_0x1bd1x3]['link'][_0x1bd1x4]['rel'] == 'alternate') {
break;
};
};
var _0x1bd1x5 = _0x1bd1x2['feed']['entry'][_0x1bd1x3];
var _0x1bd1x6 = _0x1bd1x5['link'][_0x1bd1x4]['href'];
var _0x1bd1x7 = _0x1bd1x5['title']['$t'];
var _0x1bd1x8;
try {
_0x1bd1x8 = _0x1bd1x5['media$thumbnail']['url'];
_0x1bd1x8 = _0x1bd1x8['replace']('/s72-c/', '/s550-a/');
} catch (error) {
s = _0x1bd1x5['content']['$t'];
a = s['indexOf']('<img');
b = s['indexOf']('src="', a);
c = s['indexOf']('"', b + 5);
d = s['substr'](b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != '')) {
_0x1bd1x8 = d;
} else {
_0x1bd1x8 = 'http://2.bp.blogspot.com/-fvGHB8GLUjY/ThG-C3fXoMI/AAAAAAAAI34/N2s5uttNFfY/s400/noimg.jpg';
};
};
document['write']('<div class="featuredpostbig2"><div class="rthumbbox2"><strong></strong><a href="' + _0x1bd1x6 + '" title="' + _0x1bd1x7 + '"><div class="rthumbbig2"><div class="imgbox2"><img alt="thumbnail image" src="' + _0x1bd1x8 + '"/></div><h2><a href="' + _0x1bd1x6 + '" title="' + _0x1bd1x7 + '">' + _0x1bd1x7 + '</a></h2></div></a></div></div>');
};
};
/*]]>*/
</script>
<script type='text/javascript'>
/*<![CDATA[*/
function recentthumbs3(_0x1bd1x2) {
for (var _0x1bd1x3 = 0; _0x1bd1x3 < _0x1bd1x2['feed']['entry']['length']; _0x1bd1x3++) {
for (var _0x1bd1x4 = 0; _0x1bd1x4 < _0x1bd1x2['feed']['entry'][_0x1bd1x3]['link']['length']; _0x1bd1x4++) {
if (_0x1bd1x2['feed']['entry'][_0x1bd1x3]['link'][_0x1bd1x4]['rel'] == 'alternate') {
break;
};
};
var _0x1bd1x5 = _0x1bd1x2['feed']['entry'][_0x1bd1x3];
var _0x1bd1x6 = _0x1bd1x5['link'][_0x1bd1x4]['href'];
var _0x1bd1x7 = _0x1bd1x5['title']['$t'];
var _0x1bd1x8;
try {
_0x1bd1x8 = _0x1bd1x5['media$thumbnail']['url'];
_0x1bd1x8 = _0x1bd1x8['replace']('/s72-c/', '/s550-a/');
} catch (error) {
s = _0x1bd1x5['content']['$t'];
a = s['indexOf']('<img');
b = s['indexOf']('src="', a);
c = s['indexOf']('"', b + 5);
d = s['substr'](b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != '')) {
_0x1bd1x8 = d;
} else {
_0x1bd1x8 = 'http://2.bp.blogspot.com/-fvGHB8GLUjY/ThG-C3fXoMI/AAAAAAAAI34/N2s5uttNFfY/s400/noimg.jpg';
};
};
document['write']('<div class="featuredpostbig3"><div class="rthumbbox3"><strong></strong><a href="' + _0x1bd1x6 + '" title="' + _0x1bd1x7 + '"><div class="rthumbbig3"><img src="' + _0x1bd1x8 + '"/><h2><a href="' + _0x1bd1x6 + '" title="' + _0x1bd1x7 + '">' + _0x1bd1x7 + '</a></h2></div></a></div></div>');
};
};
/*]]>*/
</script>
<script>
$(document).ready(function(){
$(".rthumbbox:first").addClass("firstka");
$(".rthumbbox3:first").addClass("firstka3");
});
</script>
HTML CODES
LAYOUT > Add a Gadget > HTML/JavaScript
KODE1
<div id='featurebottom1'>
<h2 class='headingfeature'>
News <a class="linku" href="/search/label/News">Index</a>
</h2>
<div class='left-corner-canvas'/>
<script src='/feeds/posts/summary/-/News?max-results=3&orderby=published&alt=json-in-script&
callback=recentthumbs&' type='text/javascript'/>
</div>
<div style='clear:both;'/>
</script>
</div>
</div>
<div class='clear'></div>
KODE2
<div id='featurebottom1'>
<h2 class='headingfeature'>
Sport <a class="linku" href="/search/label/Sport">Index</a>
</h2>
<div class='left-corner-canvas'/>
<script src='/feeds/posts/summary/-/Sport?max-results=2&orderby=published&alt=json-in-script&
callback=recentthumbs2&' type='text/javascript'/>
</div>
<div style='clear:both;'/>
</script>
</div>
</div>
<div class='clear'></div>
KODE3
<div id='featurebottom1'>
<h2 class='headingfeature'>
Blogging <a class="linku" href="/search/label/Blogging">Index</a>
</h2>
<div class='left-corner-canvas'/>
<script src='/feeds/posts/summary/-/Blogging?max-results=5&orderby=published&alt=json-in-script&
callback=recentthumbs3&' type='text/javascript'/>
</div>
<div style='clear:both;'/>
</script>
</div>
</div>
<div class='clear'></div>
 for Blogger){kind=link}
Post a Comment for "Recent Posts with Thumbnail Image Per Category (Label) for Blogger"
No Spam, Please...!