Pengen blog kamuseprti gambar di atas
ikuti cara di bawah 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 != ""'>
<h2 class='title'><span><data:title/></span></h2>
</b:if>
<div class='widget-content'>
<div id='postshow1'/>
<script type='text/javascript'>
ShowPost1({
idcontaint:"#postshow1",
MaxPost:3,
ImageSize:200,
FirstImageSize:200,
tagName:"<data:content/>"
});
</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/AVvXsEgfDZrOwOuKLnve3inKZvHwneeU7XME74ZkjlK6j9grfVAvCJjIHeyxDvj8LlRSOH3Xm-i7qAPDCNgiYCEgEQzvTpBiS4_7_hs0hrw0B9U1_Eu2WIib-Ch0_L1JACleB48VR-zYweivIQU/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.
No comments:
Post a Comment