Featured Post with Thumbnail Image for Blogger

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:"http://2.bp.blogspot.com/-RFdFqW5Klsc/UitLuFMcVxI/AAAAAAAADpM/y5UnpsxUSrc/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).*

Thanks for reading Featured Post with Thumbnail Image for Blogger | Tags:

Next Article
« Prev Post
Previous Article
Next Post »

Related Posts

Your Comments

9 komentar

Tulis komentar
Wednesday, November 25, 2015 delete

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

Reply
avatar
Romel Tea
AUTHOR
Wednesday, December 02, 2015 delete

Gak mungkin gak ada, pasti ada

Reply
avatar
Wednesday, December 09, 2015 delete

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

Reply
avatar
Romel Tea
AUTHOR
Wednesday, December 09, 2015 delete

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

Reply
avatar
Wednesday, December 16, 2015 delete

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

Reply
avatar
Wednesday, December 16, 2015 delete

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.

Reply
avatar
Romel Tea
AUTHOR
Thursday, December 17, 2015 delete

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

Reply
avatar
Saturday, December 19, 2015 delete

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

Reply
avatar

No Spam, Please!