February 28, 2016

Featured Post Posting Terbaru Per Label dengan Gambar Thumbnail

February 28, 2016

Cara membuat atau menampilkan Featured Post berupa Posting Terbaru (Recent Posts) berdasarkan Label (Kategori) dengan Gambar Thumbnail besar dan kecil.

MENJAWAB pertanyaan seorang pengunjung tentang Recent Post by Label yang biasa dipasang di template blog magazine style, berikut ini CB share kode-kode dan cara pemasangan Featured Post Posting Terbaru Per Label dengan Gambar Thumbnail.

Ini penampakannya:

Featured Post Posting Terbaru Per Label dengan Gambar Thumbnail


Berikut ini kode-kode recent post by label with thumbnail image yang biasa dipasang di beberapa template Bloggertheme9 dan cara memasangnya.

Ada tiga kode yang harus dicopas dai dalam template blog Anda, yakni kode CSS, HTML/XML, dan Javascript. Karenanya, pastikan di template Anda ada kode Javascript.


KODE HTML
Disimpan di bawah kode <div class='main-wrapper'> atau <div id='main-wrapper'> dan semisalnya.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='board1 tob-contid1' id='lists' preferred='yes'>
  <b:widget id='HTML14' locked='false' mobile='yes' title='News' type='HTML'>
    <b:includable id='main'>
<script>
document.write(&#39;&lt;div class=&quot;pigment&quot;&gt;&lt;h4&gt;&lt;a href=&quot;/search/label/<data:content/>?max-results=7&quot;&gt;&lt;i class=&quot;fa fa-list-ul&quot;&gt;&lt;/i&gt; <data:title/>&lt;/a&gt;&lt;/h4&gt;&lt;/div&gt;&#39;);
</script>
  <div class='widget-content'>
<div id='call-1'/>
<script type='text/javascript'>
ShowPost1({
idcontaint:&quot;#call-1&quot;,
MaxPost:5,
ImageSize:70,
FirstImageSize:330,
tagName:&quot;<data:content/>&quot;
});
</script>
<div class='clear'/>
  </div>
       <div class='clear'/>
</b:includable>
  </b:widget>
</b:section>
<div class='clear'/>
</b:if>


KODE CSS
Disimpan di atas kode ]]></b:skin> atau </style>


.pigment {margin-bottom:15px; padding:0; position:relative; border-bottom: 2px solid #eee;}
div.pigment:after, .sidebar h2 span:after, h4.kate span:after {content: no-close-quote; position: absolute; width: 0px; height: 0px; bottom: -6px; left: 22px; border-left: 6px solid rgba(0, 0, 0, 0); border-right: 6px solid rgba(0, 0, 0, 0); border-top: 6px solid #4D9FDA;}
.pigment h4 {font:normal bold 15px Arial, sans-serif; text-transform:uppercase; line-height:25px; margin:0 0 -2px; padding:0 10px; display:inline-block; border-bottom: 2px solid #4D9FDA; bottom: -2px; }
.pigment h4 a, .inner-content h2 a {color:#555;}
.pigment h4 a:hover, .inner-content h2 a:hover {color:#4775A3;}
.board1 li:first-child {border-bottom: 0; padding:0; float: left; width: 48%; position:relative;}
.board1 li {border-bottom: 1px solid #eee; float: right; margin: 0 0 8px; padding: 0 0 8px; width: 50%; overflow: hidden;}
.board1 li img {float: left; height: 70px; margin: 0 10px 0 0; overflow: hidden; width: 80px;}
.board1 li:last-child {border-bottom:0;}
.board1 li:first-child img {height: 330px; overflow: hidden; width: 100%;}
li:first-child .inner-content .denz, .dover li .inner-content .denz{background:rgba(0, 0, 0, 0.5); bottom:0; padding:15px; position:absolute;}
li:first-child .inner-content .denz span, .dover li .inner-content .denz, li:first-child .inner-content .denz a, .dover li .inner-content .denz a{color:#fff;}
.inner-content h2{font-family:Roboto,Helvetica,Arial,sans-serif;font-size:16px; line-height:1.3em;color:#555}
.inner-content p{display:none;}
span.post-meta {color: #aaa; font-size: 11px; padding: 10px 0;}
.uj_thumb img:hover, .bukshan img:hover{opacity:0.7; }
.uj_thumb img {width:100%; height:auto; transition:all .3s ease-out;}


KODE JAVASCRIPT
Disimpan di atas kode </head> atau </body>

<script type='text/javascript'>
//<![CDATA[
var classicMode = false ;
var summary = 44;
var indent = 3;
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function stripHtmlTags(e, r) {
return e.replace(/<.*?>/gi, "").split(/\s+/).slice(0, r - 1).join(" ")
}
function getSummaryLikeWP(e) {
return document.getElementById(e).innerHTML.split(/<!--\s*more\s*-->/)[0]
}
function getSummaryImproved(e, r) {
var t = /<.*?>/gi,
a = /<br.*?>/gi,
s = /(<\/{1}p>)|(<\/{1}div>)/gi,
i = /(<style.*?\/{1}style>)|(<script.*?\/{1}script>)|(<table.*?\/{1}table>)|(<form.*?\/{1}form>)|(<code.*?\/{1}code>)|(<pre.*?\/{1}pre>)/gi;
e = e.replace(i, ""),
e = e.replace(s, "<br /> ").split(a);
for (var n = 0; n < e.length; n++) e[n] = e[n].replace(t, "");
var l = new Array;
for (var n in e) / [a - zA - Z0 - 9] / .test(e[n]) && l.push(e[n]);
for (var m = "", c = "", n = 0; n < indent; n++) c += " ";
if (l.join("<br/>").split(" ").length < r - 1) m = l.join(c + " <br/>");
else for (var n = 0; m.split(" ").length < r;) m += c + " " + l[n] + "<br/>",
n++;
return m
}
function createSummaryAndThumb(e, r, t, a, s, i) {
var n = t,
r = r,
a = a,
l = document.getElementById(e),
m = l.innerHTML;
if (/<!--\s*more\s*-->/.test(m)) l.innerHTML = getSummaryLikeWP(e),
l.style.display = "block";
else {
{
var c = "",
p = l.getElementsByTagName("img");
summary
}
p.length >= 1 && (c = '<a href="' + n + '" title="' + r + '"><img class="entry-thumb" alt="' + r + '" src="' + p[0].src + '"></a>');
var o = '<div class="bukshan">' + c + '<div class="blog-cent">' + a + "</span></div><p>" + stripHtmlTags(m, summary) + '... </p></div></div>';
l.innerHTML = o,
l.style.display = "block"
}
}
function related_results_labels_thumbs(e) {
for (var t = 0; t < e.feed.entry.length; t++) {
var l = e.feed.entry[t];
relatedTitles[relatedTitlesNum] = l.title.$t;
try {
thumburl[relatedTitlesNum] = l.gform_foot.url
} catch(r) {
s = l.content.$t,
a = s.indexOf("<img"),
b = s.indexOf('src="', a),
c = s.indexOf('"', b + 5),
d = s.substr(b + 5, c - b - 5),
thumburl[relatedTitlesNum] = -1 != a && -1 != b && -1 != c && "" != d ? d: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJUpE20W5kVVsVcOYCiMkASIB3pa9PQV_2upUMQ36MeVR2Ubbkj0C-x1VmRZ8FBUsVC79CahUsJmR5IObNr_zorPN36eTsHSfe9_MHSt2hgqJ3RdIzjMwARt-5zBhHKJiImqpZYKlJcD7R/s1600/no-video.gif"
}
relatedTitles[relatedTitlesNum].length > 80 && (relatedTitles[relatedTitlesNum] = relatedTitles[relatedTitlesNum].substring(0, 80) + "...");
for (var i = 0; i < l.link.length; i++)"alternate" == l.link[i].rel && (relatedUrls[relatedTitlesNum] = l.link[i].href, relatedTitlesNum++)
}
}
function removeRelatedDuplicates_thumbs() {
for (var e = new Array(0), t = new Array(0), l = new Array(0), r = 0; r < relatedUrls.length; r++) contains_thumbs(e, relatedUrls[r]) || (e.length += 1, e[e.length - 1] = relatedUrls[r], t.length += 1, l.length += 1, t[t.length - 1] = relatedTitles[r], l[l.length - 1] = thumburl[r]);
relatedTitles = t,
relatedUrls = e,
thumburl = l
}
function contains_thumbs(e, t) {
for (var l = 0; l < e.length; l++) if (e[l] == t) return ! 0;
return ! 1
}
function printRelatedLabels_thumbs() {
for (var e = 0; e < relatedUrls.length; e++) relatedUrls[e] != currentposturl && relatedTitles[e] || (relatedUrls.splice(e, 1), relatedTitles.splice(e, 1), thumburl.splice(e, 1), e--);
var t = Math.floor((relatedTitles.length - 1) * Math.random()),
e = 0;
for (relatedTitles.length > 0 && document.write('<h4 class="kate"><span>' + relatedpoststitle + "</span></h4>"), document.write('<div class="delate"/>'); e < relatedTitles.length && 20 > e && e < maxresults;) document.write('<a class="related-post'),
document.write(0 != e ? '"': '"'),
document.write(' href="' + relatedUrls[t] + '"><img src="' + thumburl[t] + '"/><div class="related-title">' + relatedTitles[t] + "</div></a>"),
t < relatedTitles.length - 1 ? t++:t = 0,
e++;
document.write("</div>"),
relatedUrls.splice(0, relatedUrls.length),
thumburl.splice(0, thumburl.length),
relatedTitles.splice(0, relatedTitles.length)
}
waShBtn = function () {
this.isIos === !0 && this.cntLdd(window, this.crBtn)
},
waShBtn.prototype.isIos = navigator.userAgent.match(/Android|iPhone/i) && !navigator.userAgent.match(/iPod/i) ? !0 : !1,
waShBtn.prototype.cntLdd = function (t, e) {
var n = !1,
a = !0,
i = t.document,
r = i.documentElement,
o = i.addEventListener ? "addEventListener": "attachEvent",
d = i.addEventListener ? "removeEventListener": "detachEvent",
c = i.addEventListener ? "": "on",
h = function (a) { ("readystatechange" != a.type || "complete" == i.readyState) && (("load" == a.type ? t: i)[d](c + a.type, h, !1), !n && (n = !0) && e.call(t, a.type || a))
},
l = function () {
try {
r.doScroll("left")
} catch(t) {
return void setTimeout(l, 50)
}
h("poll")
};
if ("complete" == i.readyState) e.call(t, "lazy");
else {
if (i.createEventObject && r.doScroll) {
try {
a = !t.frameElement
} catch(s) {}
a && l()
}
i[o](c + "DOMContentLoaded", h, !1),
i[o](c + "readystatechange", h, !1),
t[o](c + "load", h, !1)
}
},
waShBtn.prototype.addStyling = function () {
var t = document.createElement("style"),
e = "body,html{}.blis{height:38px; width:40px; background-image:url(http://1.bp.blogspot.com/-g7uv2Nu_5BY/VYXosU88eCI/AAAAAAAADY4/512ILDT3GdA/s1600/weez.PNG); display:inline-block!important;}.tist{margin:0}";
return t.type = "text/css",
t.styleSheet ? t.styleSheet.cssText = e: t.appendChild(document.createTextNode(e)),
t
},
waShBtn.prototype.crBtn = function () {
var t = [].slice.call(document.querySelectorAll(".blis"));
iframe = new Array;
for (var e = 0; e < t.length; e++) {
var n = t[e].parentNode,
a = t[e].getAttribute("data-text"),
i = t[e].getAttribute("data-href"),
r = t[e].getAttribute("href"),
o = "?text=" + a;
a && (o += " "),
o += i ? i: document.URL,
t[e].setAttribute("href", r + o),
t[e].setAttribute("target", "_top"),
iframe[e] = document.createElement("iframe"),
iframe[e].width = 1,
iframe[e].height = 1,
iframe[e].button = t[e],
iframe[e].style.border = 0,
iframe[e].style.overflow = "hidden",
iframe[e].border = 0,
iframe[e].setAttribute("scrolling", "no"),
iframe[e].addEventListener("load", function () {
this.contentDocument.body.appendChild(this.button),
this.contentDocument.getElementsByTagName("head")[0].appendChild(theWaShBtn.addStyling());
var t = document.createElement("meta");
t.setAttribute("charset", "utf-8"),
this.contentDocument.getElementsByTagName("head")[0].appendChild(t),
this.width = Math.ceil(this.contentDocument.getElementsByTagName("a")[0].getBoundingClientRect().width),
this.height = Math.ceil(this.contentDocument.getElementsByTagName("a")[0].getBoundingClientRect().height)
},
!1),
n.insertBefore(iframe[e], t[e])
}
};
$(".popular-posts ul li .item-snippet").each(function () {
var t = $(this).text().substr(0, 120),
s = t.lastIndexOf(" ");
s > 10 && $(this).text(t.substr(0, s).replace(/[?,!\.-:;]*$/, "..."))
});
function ShowPost1(_19) { (function (_4) {
var _0 = {
blogURL: "",
MaxPost: 5,
idcontaint: "",
FirstImageSize: 300,
ImageSize: 300,
Summarylength: 90,
animated: false,
loadingClass: "loadingz",
pBlank: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjwbsyLVD-EC3vAEkwPUi3836WBAog-LNNm2GcV8jz10LaLAOztCvWfPzunPVvmOsV6tySucFx2Pkl_JTCk_DGizgUNTRm5Tw6-dEmTtoen6Jnk2HRN3SfK8iXVyp44niwr332OHYTQ64/s1600/noimgs.jpg",
MonthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
tagName: false
};
_0 = _4["extend"]({},
_0, _19);
var _8 = _4(_0["idcontaint"]);
_8["html"]("<div class=\"box-content\"><ul></ul></div>")["addClass"](_0["loadingClass"]);
_4["get"]((_0["blogURL"] === "" ? window["location"]["protocol"] + "//" + window["location"]["host"] : _0["blogURL"]) + "/feeds/posts/summary" + (_0["tagName"] === false ? "": "/-/" + _0["tagName"]) + "?max-results=" + _0["MaxPost"] + "&orderby=published&alt=json-in-script", function (_21) {
var _9, _10, _6, _20, _3, _14, _7, _15, _17, _11, _16, _5, _22, _18, _13 = "",
_2 = _21["feed"]["entry"];
for (var _1 = 0; _1 < _2["length"]; _1++) {
for (var _12 = 0; _12 < _2[_1]["link"]["length"]; _12++) {
if (_2[_1]["link"][_12]["rel"] == "alternate") {
_9 = _2[_1]["link"][_12]["href"];
break
}
};
for (var _5 = 0; _5 < _12; _5++) {
if (_2[_1]["link"][_5]["rel"] == "replies" && _2[_1]["link"][_5]["type"] == "text/html") {
_20 = _2[_1]["link"][_5]["title"]["split"](" ")[0];
break
}
};
if ("media$thumbnail" in _2[_1]) {
_3 = _2[_1]["media$thumbnail"]["url"]
} else {
_3 = _0["pBlank"]
};
if ("content" in _2[_1]) {
_6 = _2[_1]["content"]["$t"]
} else {
if ("summary" in _2[_1]) {
_6 = _2[_1]["summary"]["$t"]
} else {
_6 = ""
}
};
_6 = _6["replace"](/<\S[^>]*>/g, "");
if (_6["length"] > _0["Summarylength"]) {
_6 = _6["substring"](0, _0.Summarylength) + "..."
};
if (_2[_1] === _2[0]) {
_3 = _3["replace"](/\/s[0-9]+\-c/g, "/s" + _0["FirstImageSize"] + "-p");
if (_3["indexOf"]("i.ytimg.com/vi/") != -1) {
_3 = _3["replace"]("default", "0")
};
_7 = "<p>" + _6 + "</p>"
} else {
_3 = _3["replace"](/\/s[0-9]+\-c/g, "/s" + _0["ImageSize"] + "-p");
_7 = ""
};
_10 = _2[_1]["title"]["$t"];
_18 = _2[_1]["author"][0]["gd$image"]["src"];
_5 = _2[_1]["published"]["$t"]["substring"](0, 10);
_15 = _5["substring"](0, 4);
_17 = _5["substring"](5, 7);
_11 = _5["substring"](8, 10);
_16 = _0["MonthNames"][parseInt(_17, 10) - 1];
_14 = "<div class=\"uj_thumb\"><a title=\"" + _10 + "\" class=\" \" href=\"" + _9 + "\"><img src=\"" + _3 + "\"/></span></a></div>";
j = "<a class=\"more-link\" href=\"" + _9 + "\">Read More</a>";
_13 += "<li><div class=\"inner-content\" >" + _14 + "<div class=\"denz\"><h2><a href=\"" + _9 + "\">" + _10 + "</a></h2><span class=\"post-meta\"> <span class=\"dd\"> <i class=\"fa fa-calendar-o\"></i> " + _11 + "</span> <span class=\"dm\">" + _16 + "</span> <span class=\"dy\">" + _15 + "  - </span>  <span class=\"comt\"> <i class=\"fa fa-comment-o\"></i> " + _20 + " comment</span>  </span></div>" + _7 + "</div></li>"
};
_4("ul", _8)["append"](_13);
_4(_0["idcontaint"] + "  li:first-child .uj_thumb")["hover"](function () {
_4(_0["idcontaint"])["find"](".nb_slide_icon ")["stop"]()["animate"]({
top: 0
},
{
queue: false,
duration: 300
})
},
function () {
_4(_0["idcontaint"])["find"](".nb_slide_icon ")["stop"]()["animate"]({
top: "-60px"
},
{
queue: false,
duration: 300
})
});
_8["removeClass"](_0["loadingClass"])
},
"jsonp")
})(jQuery)
};
//]]>
</script>


Save Template!
Akan muncul widget baru di Layout (Tata Letak), yakni di atas widget "Blog Post". Jika belum muncul, refresh dengan menekan F5.

Cara Memasang Featured Post berupa Latest Post per Label
Kini saatnya memunculkan posting terbaru per label yang akan dijadikan featured post tersebut.

1. Layout > Edit widget "lists" > Masukkan Nama Label
2. Save!

memasang label featured post

Bisa juga dengan menambahkan label Featured pada posting-posting yang akan dimunculkan di sana, lalu masukkan Featured di kolom konten widgetnya seperti gambar di atas.

Good Luck and Happy Blogging! (http://www.contohblog.com).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

9 comments on Featured Post Posting Terbaru Per Label dengan Gambar Thumbnail

  1. web demonya keren gan, redesign dari template bloggertheme9... antri link downloadnya gan :D

    ReplyDelete
    Replies
    1. http://cbonlinemagz.blogspot.co.id/ itu modif pesanan orang, keren ya? lebih seo dan fast loading lho!

      Delete
    2. ngantri nungguin post link download theme redesign :D

      Delete
  2. ane nyoba tp postingan di Featured post gag muncul gan, munculinnya gimana caranya gan?

    ReplyDelete
  3. kalo NJW featured post di bikin kek gini bisa gag gan???

    ReplyDelete
  4. Terimakasih atas postingannya.
    bagaimana cara untuk menghilngkan keterangan TANGGAL dan keterangan KOMENTAR pada Featured posnya? terimakasih

    ReplyDelete
    Replies
    1. tambahkan kode span.post-meta {display: none;} di atas kode ]]></b:skin>

      Delete
  5. Makasih gan tutorialnya, ini yang ana cari

    ReplyDelete

Contact Form

Name

Email *

Message *