Featured Post with Thumbnail Image for Blogger

Romeltea | Follow @romel_tea

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:

Featured Post with Thumbnail Image for Blogger

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).*

Previous
« Prev Post
Author Image

Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Praktisi Media, Blogger, Trainer Komunikasi from Bandung, Indonesia. Follow me: facebook twitter instagram linkedin youtube

Recommended Posts

Related Posts

Show comments
Hide comments

9 comments on Featured Post with Thumbnail Image for Blogger

  1. Min saya mau nanya?saya tidak bisa menemukan kode "div id='main-wrapper'>" tolong sarannya saya sangat suka dengan tampilan blog anda,jd ane bookmark aja :D

    ReplyDelete
  2. Replies
    1. Gak mungkin gak ada, pasti ada

      Delete
    2. Betul min gak ada template saya dar blog mimin yg my notes

      Delete
  3. O... itu memang template special, kodenya < aside id = ' article ' >

    ReplyDelete
    Replies
    1. Makasih min atas petunjuknya akhirnya kelar juga.
      Terimakasih semoga kebaikannya berbalas,Amin.

      Delete
  4. Min mau nanya lg,kalo ngebuat kotak about contact disclaimer sama sosmed gimana ya?saya uda obok-obok blog ini tp gk jumpa juga,saya pengen banget yg begitu karna simpel dan soft.
    Terimakasih dan semoga ditanggapi.

    ReplyDelete
    Replies
    1. udah obok-obok? gimana nyarinya sih :)
      http://blogromeltea.blogspot.co.id/2015/10/top-navigasi-menu-blog-responsive.html

      Delete
  5. Sumpah min ane uda obok-obok,mungkin karna ada judul Dropdownnya jadi saya tidak ngebuka.
    Terimakasih sudah ngerepotin,Hahaa.

    ReplyDelete

No Spam, Please!