Featured Post with Thumbnail Image for Blogger

Baca Juga

Featured Post with Thumbnail Image for Blogger. Widget untuk menampilkan tiga posting unggulan plus gambar image di halaman depan blog. Responsive. Demonya di halaman depan blog ini atau gambar berikut ini:

KODE CSS:
Di atas ]]></b:skin> atau </style>


.heading{display:block; font-family: Tahoma,Geneva,sans-serif; font-size: 12px; line-height: 11px; margin: 7px 0 10px; text-transform: uppercase;}
#sub-left { padding-left:6px;}
#sub-left .linked { border: 1px solid #ECEDE8;width: 290px;margin-bottom: 15px;cursor: auto; float:right;}
#sub-left .linked form { margin:0; padding:0;}
.car-box { overflow: hidden; width: 100%; margin:0 0 25px 15px;}
.car-box .box-content { height: 198px !important; overflow: hidden; width: 100%;}
.car-box li {float: left; height: 200px; margin-right: 8px; width: 175px; list-style:none;}
.car-box li .uj_thumb { float: left; height: 200px; margin-bottom: 10px; overflow: hidden;  width: 175px;}
.car-box li .uj_thumb img {float: left; height: auto; width: 100%;}
.car-box li p, .car-tube li p {display: none;}
.car-box h2{display:none;}
li a.more-link, .inde-uj li a.more-link, .car-box li a.more-link, .car-tube li a.more-link { display: none;}
.car-tube li .nb_slide_icon, .car-box li .nb_slide_icon, .uj-box li .nb_slide_icon, .uj-box li .uj-vid { display: none;}
.uj-box .widget, .car-box .widget, .car-tube .widget, .pix_uj .widget{overflow: hidden; position: relative;}
.car-box li h3, .car-box li:first-child h3 {background: none repeat scroll 0 0 #111111; border: 0 none; color: #FFFFFF; font-size: 14px; line-height: 18px; opacity: 0.78; padding: 10px; width:155px; position: absolute; bottom:0;}
.car-box li h3 a{color:#fff; font-weight:bold;}
@media only screen and (max-width:768px) {
.car-box li,.car-box li .uj_thumb,.car-box li h3, .car-box li:first-child h3{width:100%}}

KODE HTML:
Di bawah <div id='main-wrapper'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:section class='car-box' id='slim' preferred='yes'>
   <b:widget id='HTML18' locked='true' mobile='yes' title='FEATURED' type='HTML'>
     <b:includable id='main'>
 <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
   <h2 class='title'><span><data:title/></span></h2>
  </b:if>
  <div class='widget-content'>

<div id='postshow1'/>
<script type='text/javascript'>
ShowPost1({
idcontaint:&quot;#postshow1&quot;,
MaxPost:3,
ImageSize:200,
FirstImageSize:200,
tagName:&quot;<data:content/>&quot;
});
</script>
<div class='clear'/>
</div>
      
</b:includable>
   </b:widget>
 </b:section>
<div class='clear'/>
</b:if>

KODE JAVASCRIPT:
Di atas </head>

<script type='text/javascript'>//<![CDATA[
function ShowPost1(a){!function(n){var s={blogURL:"",MaxPost:3,idcontaint:"",FirstImageSize:200,ImageSize:200,Summarylength:155,animated:!1,loadingClass:"loadingz",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAJy1hDL8pn8_ivZ7MPkvgqhRDLARNm6SJVVO3U1_LVBeTqWyY-Ms0AayqEWj067A2z5bK_Attu8g2uYjUo5W4NKaWeZCfgE37d5pq7yZ1d_mIZPUh5FSUxytsZXnIlcQ52JifXWcfhoM/s1600/noimgs.jpg",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:!1};s=n.extend({},s,a);var t=n(s.idcontaint);t.html('<div class="box-content"><ul></ul></div>').addClass(s.loadingClass),n.get((""===s.blogURL?window.location.protocol+"//"+window.location.host:s.blogURL)+"/feeds/posts/summary"+(s.tagName===!1?"":"/-/"+s.tagName)+"?max-results="+s.MaxPost+"&orderby=published&alt=json-in-script",function(a){for(var e,i,l,o,r,c,m,p,d,u,g,h,b,f,v="",x=a.feed.entry,y=0;y<x.length;y++){for(var k=0;k<x[y].link.length;k++)if("alternate"==x[y].link[k].rel){e=x[y].link[k].href;break}for(var h=0;k>h;h++)if("replies"==x[y].link[h].rel&&"text/html"==x[y].link[h].type){o=x[y].link[h].title.split(" ")[0];break}r="media$thumbnail"in x[y]?x[y].media$thumbnail.url:s.pBlank,l="content"in x[y]?x[y].content.$t:"summary"in x[y]?x[y].summary.$t:"",l=l.replace(/<\S[^>]*>/g,""),l.length>s.Summarylength&&(l=l.substring(0,s.Summarylength)+"..."),x[y]===x[0]?(r=r.replace(/\/s[0-9]+\-c/g,"/s"+s.FirstImageSize+"-p"),-1!=r.indexOf("i.ytimg.com/vi/")&&(r=r.replace("default","0")),m="<p>"+l+"</p>"):(r=r.replace(/\/s[0-9]+\-c/g,"/s"+s.ImageSize+"-p"),m=""),i=x[y].title.$t,b=x[y].author[0].name.$t,f=x[y].author[0].gd$image.src,h=x[y].published.$t.substring(0,10),p=h.substring(0,4),d=h.substring(5,7),u=h.substring(8,10),g=s.MonthNames[parseInt(d,10)-1],c='<div class="uj_thumb"><a title="'+i+'" class=" " href="'+e+'"><img src="'+r+'"/></a></div>',j='<a class="more-link" href="'+e+'"></a>',v+='<li><div class="inner-content" >'+c+'<h3><a href="'+e+'">'+i+'</a></h3><span class="post-meta"><span class="comt"><i class="icon-time"></i>'+o+' comment</span> <span class="auth">'+b+"</span></span>"+m+" "+j+"</div></li>"}n("ul",t).append(v),n(s.idcontaint+"  li:first-child .uj_thumb").tagName&&t.append('<h2 class="uj-box-title"><a href="/search/label/'+encodeURIComponent(s.tagName)+'?&max-results=7"></a></h2>'),t.removeClass(s.loadingClass)},"jsonp")}(jQuery)}
//]]>
</script>

CARA MENAMPILKANNYA
Untuk menampilkan Featured Post with Thumbnail Image for Blogger, beri label Featured minimal tiga posting yang akan ditampilkan.

Setelah itu, klik "Edit" Widget "Slim" dan masukkan nama label: Featured (http://blogromeltea.blogspot.com).*