Cara Memasang Featured Post Image User Friendly di Blogger
April 18, 2016
Cara Memasang Featured Post Image User Friendly di Blogger
FEATURED Post berikut ini bisa dikatakan user friendly karena bukan slider, bukan animasi, sehingga tidak menyilaukan mata pengunjung.
Demonya bisa dilihat di sumber kode, yakni Avoid Blogger Template, dengan penampakan (screen shot) sebagai berikut:
Widget Featured Post Image User Friendly yang pas dipasang halaman depan di atas widget Blog Post atau di bawah Navigasi Menu ini dibangun dengan kode-kode sebagai berikut:
KODE CSS:
Dipasang di atas kode ]]></b:skin> atau </style>
Kode HTML
Dipasang di atas kode <div id='main-wraper> atau <div class='main-wraper> atau yang serupa dengannya.
KODE JAVASCRIPT:
Pasang di atas kode </head> atau </body>
Bisa juga gunakan kode yang di-encoded/encrypted berikut ini:
Save Template!
Saatnya memasang Featured Posts user friendly ini.
Klik "Layout" dan Refresh (F5) sehingga muncul widget baru bernama blodblogpostset seperti ini:
1. Klik "Add a Gadget" > Pilih "HTML/Javascript"
2. Masukkan kode berikut ini di kolom "Content"
3. Ubah Label dengan nama label posting yang akan dimunculkan
4. Save!
PENTING!!!
Pastikan sudah ada kode jQuery di dalam template blog Anda:
Jika belum ada, copas kode jQuery tersebut di atas kode </head>
:: Cek Juga Widget Featured Post Lainnya
Demikian Cara Memasang Featured Post Image User Friendly di Blogger. Good Luck and Happy Blogging! (http://www.contohblog.com).*
FEATURED Post berikut ini bisa dikatakan user friendly karena bukan slider, bukan animasi, sehingga tidak menyilaukan mata pengunjung.
Demonya bisa dilihat di sumber kode, yakni Avoid Blogger Template, dengan penampakan (screen shot) sebagai berikut:
Widget Featured Post Image User Friendly yang pas dipasang halaman depan di atas widget Blog Post atau di bawah Navigasi Menu ini dibangun dengan kode-kode sebagai berikut:
KODE CSS:
Dipasang di atas kode ]]></b:skin> atau </style>
.blodblogpost .widget {
padding: 20px 0 0px 0px;
}
#modblofpostset .cbttaglistco.h li.a0 {
float: left;
height: 400px;
padding: 0;
overflow: hidden;
width: 60%;
}
#modblofpostset .cbttaglistco.h li {
border: 0 none;
float: right;
height: 200px;
overflow: hidden;
padding: 0;
width: 40%;
}
#modblofpostset .cbttaglistco.h li a {
overflow: hidden;
}
#modblofpostset .cbttaglistco.h li img {
-webkit-transition: all 0.35s;
-moz-transition: all 0.35s;
-o-transition: all 0.35s;
transition: all 0.35s;
}
#modblofpostset .cbttaglistco.h li:hover img {
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
opacity: 1;
}
.cbtthenepor:hover .thumbx img {
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
opacity: 1;
}
#modblofpostset ul.cbrnewponew .inner{
padding: 0;
}
#modblofpostset .cbrnewponew a.imagethubnailwithtagin {
border: 0 none;
height: 200px;
position: absolute;
padding: 0;
width: 290px;
}
#modblofpostset .cbttaglistco .cbrnewponew .a0 img {
height: 515px;
width: 515px;
}
#modblofpostset .cbttaglistco.h li.a0 .info {
margin-top: -115px;
}
#modblofpostset .cbrnewponew .a1 p, #modblofpostset .cbrnewponew .a2 p {
color: #FFFFFF;
display: block;
height: 70px;
margin: 120px 0 0;
overflow: hidden;
padding: 15px;
position: absolute;
width: 282px;
}
#modblofpostset #dayclass {
display: none;
}
#modblofpostset .cbttaglistco.h .a0 a.imagethubnailwithtagin {
border: 0 none;
height: 516px;
padding: 0;
width: 545px;
}
#modblofpostset .cbttaglistco.h .cbrnewponew strong {
color: #FFFFFF;
font-size: 22px;
line-height: 36px;
overflow: hidden;
padding: 69px 15px;
position: absolute;
text-transform: uppercase;
width: 290px;
}
#modblofpostset .cbttaglistco.h .cbrnewponew .a1 strong {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcykYl_eG24WC4f_T0CD5k2yfNVZPixm6y95k9jEVHwh38mVnANeh2lOt9t5tlknSoa8txMNUEOcyvRjQWOtlJjCGtovqAXh8fCrtK4D-wASazmnsAT3gk0-DRZtyVp0dSePUMknz-qVue/s1600/ovlay.png") repeat-x scroll 0 39px rgba(0, 0, 0, 0);
margin-top: -5px;
}
#modblofpostset .cbttaglistco.h .cbrnewponew .a2 strong {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcykYl_eG24WC4f_T0CD5k2yfNVZPixm6y95k9jEVHwh38mVnANeh2lOt9t5tlknSoa8txMNUEOcyvRjQWOtlJjCGtovqAXh8fCrtK4D-wASazmnsAT3gk0-DRZtyVp0dSePUMknz-qVue/s1600/ovlay.png") repeat-x scroll 0 10px rgba(0, 0, 0, 0);
margin-top: 26px;
}
#modblofpostset .cbttaglistco.h .cbrnewponew strong a{
color: #FFFFFF;
}
#modblofpostset {
overflow: hidden;
position: relative;
}
#modblofpostset .cbttaglistco.h li.a0 strong {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcykYl_eG24WC4f_T0CD5k2yfNVZPixm6y95k9jEVHwh38mVnANeh2lOt9t5tlknSoa8txMNUEOcyvRjQWOtlJjCGtovqAXh8fCrtK4D-wASazmnsAT3gk0-DRZtyVp0dSePUMknz-qVue/s1600/ovlay.png") repeat-x scroll 0 234px rgba(0, 0, 0, 0);
font-size: 47px;
height: 400px;
line-height: 60px;
padding: 210px 20px 0;
position: absolute;
top: 0;
width: 432px;
}
#modblofpostset .cbttaglistco.h li.a0 strong a{
color:#fff;
}
#modblofpostset .cbttaglistco.v .a0 p, .cbttaglistco.h .a0 p {
color: #FFFFFF;
display: block;
margin-top: -10px;
padding: 5px 20px;
position: relative;
}
padding: 20px 0 0px 0px;
}
#modblofpostset .cbttaglistco.h li.a0 {
float: left;
height: 400px;
padding: 0;
overflow: hidden;
width: 60%;
}
#modblofpostset .cbttaglistco.h li {
border: 0 none;
float: right;
height: 200px;
overflow: hidden;
padding: 0;
width: 40%;
}
#modblofpostset .cbttaglistco.h li a {
overflow: hidden;
}
#modblofpostset .cbttaglistco.h li img {
-webkit-transition: all 0.35s;
-moz-transition: all 0.35s;
-o-transition: all 0.35s;
transition: all 0.35s;
}
#modblofpostset .cbttaglistco.h li:hover img {
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
opacity: 1;
}
.cbtthenepor:hover .thumbx img {
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
opacity: 1;
}
#modblofpostset ul.cbrnewponew .inner{
padding: 0;
}
#modblofpostset .cbrnewponew a.imagethubnailwithtagin {
border: 0 none;
height: 200px;
position: absolute;
padding: 0;
width: 290px;
}
#modblofpostset .cbttaglistco .cbrnewponew .a0 img {
height: 515px;
width: 515px;
}
#modblofpostset .cbttaglistco.h li.a0 .info {
margin-top: -115px;
}
#modblofpostset .cbrnewponew .a1 p, #modblofpostset .cbrnewponew .a2 p {
color: #FFFFFF;
display: block;
height: 70px;
margin: 120px 0 0;
overflow: hidden;
padding: 15px;
position: absolute;
width: 282px;
}
#modblofpostset #dayclass {
display: none;
}
#modblofpostset .cbttaglistco.h .a0 a.imagethubnailwithtagin {
border: 0 none;
height: 516px;
padding: 0;
width: 545px;
}
#modblofpostset .cbttaglistco.h .cbrnewponew strong {
color: #FFFFFF;
font-size: 22px;
line-height: 36px;
overflow: hidden;
padding: 69px 15px;
position: absolute;
text-transform: uppercase;
width: 290px;
}
#modblofpostset .cbttaglistco.h .cbrnewponew .a1 strong {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcykYl_eG24WC4f_T0CD5k2yfNVZPixm6y95k9jEVHwh38mVnANeh2lOt9t5tlknSoa8txMNUEOcyvRjQWOtlJjCGtovqAXh8fCrtK4D-wASazmnsAT3gk0-DRZtyVp0dSePUMknz-qVue/s1600/ovlay.png") repeat-x scroll 0 39px rgba(0, 0, 0, 0);
margin-top: -5px;
}
#modblofpostset .cbttaglistco.h .cbrnewponew .a2 strong {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcykYl_eG24WC4f_T0CD5k2yfNVZPixm6y95k9jEVHwh38mVnANeh2lOt9t5tlknSoa8txMNUEOcyvRjQWOtlJjCGtovqAXh8fCrtK4D-wASazmnsAT3gk0-DRZtyVp0dSePUMknz-qVue/s1600/ovlay.png") repeat-x scroll 0 10px rgba(0, 0, 0, 0);
margin-top: 26px;
}
#modblofpostset .cbttaglistco.h .cbrnewponew strong a{
color: #FFFFFF;
}
#modblofpostset {
overflow: hidden;
position: relative;
}
#modblofpostset .cbttaglistco.h li.a0 strong {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcykYl_eG24WC4f_T0CD5k2yfNVZPixm6y95k9jEVHwh38mVnANeh2lOt9t5tlknSoa8txMNUEOcyvRjQWOtlJjCGtovqAXh8fCrtK4D-wASazmnsAT3gk0-DRZtyVp0dSePUMknz-qVue/s1600/ovlay.png") repeat-x scroll 0 234px rgba(0, 0, 0, 0);
font-size: 47px;
height: 400px;
line-height: 60px;
padding: 210px 20px 0;
position: absolute;
top: 0;
width: 432px;
}
#modblofpostset .cbttaglistco.h li.a0 strong a{
color:#fff;
}
#modblofpostset .cbttaglistco.v .a0 p, .cbttaglistco.h .a0 p {
color: #FFFFFF;
display: block;
margin-top: -10px;
padding: 5px 20px;
position: relative;
}
Kode HTML
Dipasang di atas kode <div id='main-wraper> atau <div class='main-wraper> atau yang serupa dengannya.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='blodblogpost'>
<b:section class='sidebar' id='blodblogpostset' showaddelement='yes'>
</b:section>
</div>
</b:if>
<div class='blodblogpost'>
<b:section class='sidebar' id='blodblogpostset' showaddelement='yes'>
</b:section>
</div>
</b:if>
KODE JAVASCRIPT:
Pasang di atas kode </head> atau </body>
<script type='text/javascript'>
//<![CDATA[
(function (a) {
a.cbrnewpost = function (c, b) {
var d = this;
d.$el = a(c);
d.init = function () {
d.options = a.extend({},
a.cbrnewpost.defaultOptions, b);
d.$el.html('<div class="cbttaglistco ' + d.options.postType + '"><ul class="cbrnewponew"></ul></div>').addClass(d.options.loadingClass);
a.get((d.options.blogURL === "" ? window.location.protocol + "//" + window.location.host: d.options.blogURL) + "/feeds/posts/default" + (d.options.tagName === false ? "": "/-/" + d.options.tagName) + "?max-results=" + d.options.MaxPost + "&orderby=published&alt=json-in-script", function (B) {
var E, h, D, r, H, t, G, s, q, w, F, y, C, n = "",
f = B.feed.entry;
if (f !== undefined) {
for (var z = 0, p = f.length; z < p; z++) {
for (var x = 0, v = f[z].link.length; x < v; x++) {
if (f[z].link[x].rel == "alternate") {
E = f[z].link[x].href;
break
}
}
for (var u = 0, A = f[z].link.length; u < A; u++) {
if (f[z].link[u].rel == "replies" && f[z].link[u].type == "text/html") {
H = f[z].link[u].title.split(" ")[0];
break
}
}
D = ("content" in f[z]) ? f[z].content.$t: ("summary" in f[z]) ? f[z].summary.$t: "";
var e = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;
t = a("<div></div>").append(D.replace(e, ""));
G = t.find("img");
if ("media$thumbnail" in f[z]) {
s = f[z].media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "/" + d.options.ImageSize);
if (f[z] === f[0] && d.options.postType !== "s") {
s = f[z].media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "/" + d.options.FirstImageSize)
} else {
if (f[z].media$thumbnail.url.indexOf("img.youtube.com") != -1) {
s = f[z].media$thumbnail.url.replace("default", "0")
}
}
} else {
if (G.length != 0) {
s = G[0].src
} else {
s = d.options.pBlank
}
}
D = D.replace(/<\S[^>]*>/g, "");
if (D.length > d.options.Summarylength) {
D = D.substring(0, d.options.Summarylength) + "..."
}
h = f[z].title.$t;
C = f[z].published.$t.substring(0, 10);
q = C.substring(0, 4);
w = C.substring(5, 7);
F = C.substring(8, 10);
y = d.options.MonthNames[parseInt(w, 10) - 1];
n += '<li class="a' + z + '"><div class="inner" ><a title="' + h + '" class="imagethubnailwithtagin" href="' + E + '"><img src="' + s + '"/></a><strong><a href="' + E + '">' + h + '</a></strong><div class="info">' + (d.options.ShowDate === true ? '<span id="dayclass">' + y + " " + F + ", " + q + "</span>": "") + (d.options.ShowComment === true ? '<span id="comclass"><a href="' + E + '#comment-form">' + H + "</a> Comment(s)</span>": "") + "</div><p " + (d.options.ShowDesc === false ? "": 'style="display:block"') + ">" + D + "</p></div></li>"
}
a("ul", d.$el).append(n);
if (d.options.postType === "s") {
var o = a(c).parents(".widget");
var I = o.children("h2");
if (d.options.tagName != false) {
I.wrapInner('<a href="/search/label/' + encodeURIComponent(d.options.tagName) + '"/>')
}
var m, g;
var k = d.$el.width();
if (a(window).width() < 479) {
g = 1;
m = k / g
} else {
if (a(window).width() < 979) {
g = 2;
m = k / g
} else {
if (a(window).width() < 1025) {
g = 3;
m = k / g
} else {
g = 4;
m = k / g
}
}
}
a(".cbttaglistco", d.$el).flexslider({
animation: "slide",
selector: ".cbrnewponew > li",
animationLoop: true,
itemWidth: m,
minItems: 1,
move: g,
mousewheel: true,
maxItems: 4
});
d.$el.removeClass(d.options.loadingClass)
} else {
if (d.options.tagName != false) {
d.$el.append('<div class="morepostag"><a title="View All About ' + d.options.tagName + '" href="/search/label/' + encodeURIComponent(d.options.tagName) + '"><span>View All</span></a></div>').removeClass(d.options.loadingClass)
}
}
d.$el.removeClass(d.options.loadingClass)
} else {
d.$el.html("<span>No result! Or Error Loading Feed</span>")
}
},
"jsonp")
};
d.init()
};
a.cbrnewpost.defaultOptions = {
blogURL: "",
MaxPost: 6,
FirstImageSize: "s360-p",
ImageSize: "s100-p",
ShowDesc: false,
ShowDate: true,
ShowComment: true,
Summarylength: 170,
postType: "v",
loadingClass: "loadingxxnewcontent",
pBlank: "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif",
MonthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
tagName: false
};
a.fn.cbrnewpost = function (b) {
return this.each(function () { (new a.cbrnewpost(this, b))
})
}
})(jQuery);
//]]>
</script>
//<![CDATA[
(function (a) {
a.cbrnewpost = function (c, b) {
var d = this;
d.$el = a(c);
d.init = function () {
d.options = a.extend({},
a.cbrnewpost.defaultOptions, b);
d.$el.html('<div class="cbttaglistco ' + d.options.postType + '"><ul class="cbrnewponew"></ul></div>').addClass(d.options.loadingClass);
a.get((d.options.blogURL === "" ? window.location.protocol + "//" + window.location.host: d.options.blogURL) + "/feeds/posts/default" + (d.options.tagName === false ? "": "/-/" + d.options.tagName) + "?max-results=" + d.options.MaxPost + "&orderby=published&alt=json-in-script", function (B) {
var E, h, D, r, H, t, G, s, q, w, F, y, C, n = "",
f = B.feed.entry;
if (f !== undefined) {
for (var z = 0, p = f.length; z < p; z++) {
for (var x = 0, v = f[z].link.length; x < v; x++) {
if (f[z].link[x].rel == "alternate") {
E = f[z].link[x].href;
break
}
}
for (var u = 0, A = f[z].link.length; u < A; u++) {
if (f[z].link[u].rel == "replies" && f[z].link[u].type == "text/html") {
H = f[z].link[u].title.split(" ")[0];
break
}
}
D = ("content" in f[z]) ? f[z].content.$t: ("summary" in f[z]) ? f[z].summary.$t: "";
var e = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;
t = a("<div></div>").append(D.replace(e, ""));
G = t.find("img");
if ("media$thumbnail" in f[z]) {
s = f[z].media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "/" + d.options.ImageSize);
if (f[z] === f[0] && d.options.postType !== "s") {
s = f[z].media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "/" + d.options.FirstImageSize)
} else {
if (f[z].media$thumbnail.url.indexOf("img.youtube.com") != -1) {
s = f[z].media$thumbnail.url.replace("default", "0")
}
}
} else {
if (G.length != 0) {
s = G[0].src
} else {
s = d.options.pBlank
}
}
D = D.replace(/<\S[^>]*>/g, "");
if (D.length > d.options.Summarylength) {
D = D.substring(0, d.options.Summarylength) + "..."
}
h = f[z].title.$t;
C = f[z].published.$t.substring(0, 10);
q = C.substring(0, 4);
w = C.substring(5, 7);
F = C.substring(8, 10);
y = d.options.MonthNames[parseInt(w, 10) - 1];
n += '<li class="a' + z + '"><div class="inner" ><a title="' + h + '" class="imagethubnailwithtagin" href="' + E + '"><img src="' + s + '"/></a><strong><a href="' + E + '">' + h + '</a></strong><div class="info">' + (d.options.ShowDate === true ? '<span id="dayclass">' + y + " " + F + ", " + q + "</span>": "") + (d.options.ShowComment === true ? '<span id="comclass"><a href="' + E + '#comment-form">' + H + "</a> Comment(s)</span>": "") + "</div><p " + (d.options.ShowDesc === false ? "": 'style="display:block"') + ">" + D + "</p></div></li>"
}
a("ul", d.$el).append(n);
if (d.options.postType === "s") {
var o = a(c).parents(".widget");
var I = o.children("h2");
if (d.options.tagName != false) {
I.wrapInner('<a href="/search/label/' + encodeURIComponent(d.options.tagName) + '"/>')
}
var m, g;
var k = d.$el.width();
if (a(window).width() < 479) {
g = 1;
m = k / g
} else {
if (a(window).width() < 979) {
g = 2;
m = k / g
} else {
if (a(window).width() < 1025) {
g = 3;
m = k / g
} else {
g = 4;
m = k / g
}
}
}
a(".cbttaglistco", d.$el).flexslider({
animation: "slide",
selector: ".cbrnewponew > li",
animationLoop: true,
itemWidth: m,
minItems: 1,
move: g,
mousewheel: true,
maxItems: 4
});
d.$el.removeClass(d.options.loadingClass)
} else {
if (d.options.tagName != false) {
d.$el.append('<div class="morepostag"><a title="View All About ' + d.options.tagName + '" href="/search/label/' + encodeURIComponent(d.options.tagName) + '"><span>View All</span></a></div>').removeClass(d.options.loadingClass)
}
}
d.$el.removeClass(d.options.loadingClass)
} else {
d.$el.html("<span>No result! Or Error Loading Feed</span>")
}
},
"jsonp")
};
d.init()
};
a.cbrnewpost.defaultOptions = {
blogURL: "",
MaxPost: 6,
FirstImageSize: "s360-p",
ImageSize: "s100-p",
ShowDesc: false,
ShowDate: true,
ShowComment: true,
Summarylength: 170,
postType: "v",
loadingClass: "loadingxxnewcontent",
pBlank: "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif",
MonthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
tagName: false
};
a.fn.cbrnewpost = function (b) {
return this.each(function () { (new a.cbrnewpost(this, b))
})
}
})(jQuery);
//]]>
</script>
Bisa juga gunakan kode yang di-encoded/encrypted berikut ini:
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(T(a){a.Y=T(c,b){l d=1j;d.$K=a(c);d.1G=T(){d.i=a.2E({},a.Y.1C,b);d.$K.1h(\'<J O="1B \'+d.i.19+\'"><1g O="1H"></1g></J>\').2D(d.i.11);a.2B((d.i.1d===""?V.1D.2o+"//"+V.1D.2n:d.i.1d)+"/2m/2l/1l"+(d.i.M===U?"":"/-/"+d.i.M)+"?2k-2j="+d.i.1v+"&2f=1y&2c=28-15-14",T(B){l E,h,D,r,H,t,G,s,q,w,F,y,C,n="",f=B.22.21;j(f!==20){1b(l z=0,p=f.X;z<p;z++){1b(l x=0,v=f[z].P.X;x<v;x++){j(f[z].P[x].1m=="1Z"){E=f[z].P[x].Q;1p}}1b(l u=0,A=f[z].P.X;u<A;u++){j(f[z].P[u].1m=="1X"&&f[z].P[u].1U=="1S/1h"){H=f[z].P[u].16.1R(" ")[0];1p}}D=("1w"15 f[z])?f[z].1w.$t:("1x"15 f[z])?f[z].1x.$t:"";l e=/<14\\b[^<]*(?:(?!<\\/14>)<[^<]*)*<\\/14>/1Q;t=a("<J></J>").1c(D.W(e,""));G=t.1P("1e");j("12$Z"15 f[z]){s=f[z].12$Z.18.W(/\\/s[0-9]+\\-c/g,"/"+d.i.1E);j(f[z]===f[0]&&d.i.19!=="s"){s=f[z].12$Z.18.W(/\\/s[0-9]+\\-c/g,"/"+d.i.1F)}N{j(f[z].12$Z.18.1O("1e.1N.1J")!=-1){s=f[z].12$Z.18.W("1l","0")}}}N{j(G.X!=0){s=G[0].1L}N{s=d.i.1o}}D=D.W(/<\\S[^>]*>/g,"");j(D.X>d.i.1i){D=D.13(0,d.i.1i)+"..."}h=f[z].16.$t;C=f[z].1y.$t.13(0,10);q=C.13(0,4);w=C.13(5,7);F=C.13(8,10);y=d.i.1t[1T(w,10)-1];n+=\'<1a O="a\'+z+\'"><J O="1V" ><a 16="\'+h+\'" O="1W" Q="\'+E+\'"><1e 1L="\'+s+\'"/></a><1r><a Q="\'+E+\'">\'+h+\'</a></1r><J O="1Y">\'+(d.i.1n===R?\'<L 1z="23">\'+y+" "+F+", "+q+"</L>":"")+(d.i.1I===R?\'<L 1z="24"><a Q="\'+E+\'#25-26">\'+H+"</a> 27(s)</L>":"")+"</J><p "+(d.i.1A===U?"":\'29="2a:2b"\')+">"+D+"</p></J></1a>"}a("1g",d.$K).1c(n);j(d.i.19==="s"){l o=a(c).2d(".2e");l I=o.2g("2h");j(d.i.M!=U){I.2i(\'<a Q="/1u/1s/\'+1k(d.i.M)+\'"/>\')}l m,g;l k=d.$K.17();j(a(V).17()<2p){g=1;m=k/g}N{j(a(V).17()<2q){g=2;m=k/g}N{j(a(V).17()<2r){g=3;m=k/g}N{g=4;m=k/g}}}a(".1B",d.$K).2s({2t:"2u",1M:".1H > 1a",2v:R,2w:m,2x:1,2y:g,2z:R,2A:4});d.$K.1f(d.i.11)}N{j(d.i.M!=U){d.$K.1c(\'<J O="2C"><a 16="1K 1q 2F \'+d.i.M+\'" Q="/1u/1s/\'+1k(d.i.M)+\'"><L>1K 1q</L></a></J>\').1f(d.i.11)}}d.$K.1f(d.i.11)}N{d.$K.1h("<L>2G 2H! 2I 2J 2K 2L</L>")}},"2M")};d.1G()};a.Y.1C={1d:"",1v:6,1F:"2N-p",1E:"2O-p",1A:U,1n:R,1I:R,1i:2P,19:"v",11:"2Q",1o:"2R://1.2S.2T.1J/-2U/2V/2W/2X/2Y-c/2Z.30",1t:["31","32","33","34","35","36","37","38","39","3a","3b","3c"],M:U};a.3d.Y=T(b){3e 1j.3f(T(){(3g a.Y(1j,b))})}})(3h);',62,204,'||||||||||||||||||options|if||var||||||||||||||||||||||||div|el|span|tagName|else|class|link|href|true||function|false|window|replace|length|cbrnewpost|thumbnail||loadingClass|media|substring|script|in|title|width|url|postType|li|for|append|blogURL|img|removeClass|ul|html|Summarylength|this|encodeURIComponent|default|rel|ShowDate|pBlank|break|All|strong|label|MonthNames|search|MaxPost|content|summary|published|id|ShowDesc|cbttaglistco|defaultOptions|location|ImageSize|FirstImageSize|init|cbrnewponew|ShowComment|com|View|src|selector|youtube|indexOf|find|gi|split|text|parseInt|type|inner|imagethubnailwithtagin|replies|info|alternate|undefined|entry|feed|dayclass|comclass|comment|form|Comment|json|style|display|block|alt|parents|widget|orderby|children|h2|wrapInner|results|max|posts|feeds|host|protocol|479|979|1025|flexslider|animation|slide|animationLoop|itemWidth|minItems|move|mousewheel|maxItems|get|morepostag|addClass|extend|About|No|result|Or|Error|Loading|Feed|jsonp|s360|s100|170|loadingxxnewcontent|http|bp|blogspot|htG7vy9vIAA|Tp0KrMUdoWI|AAAAAAAABAU|e7XkFtErqsU|s72|grey|gif|Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec|fn|return|each|new|jQuery'.split('|'),0,{}))
//]]>
</script>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(T(a){a.Y=T(c,b){l d=1j;d.$K=a(c);d.1G=T(){d.i=a.2E({},a.Y.1C,b);d.$K.1h(\'<J O="1B \'+d.i.19+\'"><1g O="1H"></1g></J>\').2D(d.i.11);a.2B((d.i.1d===""?V.1D.2o+"//"+V.1D.2n:d.i.1d)+"/2m/2l/1l"+(d.i.M===U?"":"/-/"+d.i.M)+"?2k-2j="+d.i.1v+"&2f=1y&2c=28-15-14",T(B){l E,h,D,r,H,t,G,s,q,w,F,y,C,n="",f=B.22.21;j(f!==20){1b(l z=0,p=f.X;z<p;z++){1b(l x=0,v=f[z].P.X;x<v;x++){j(f[z].P[x].1m=="1Z"){E=f[z].P[x].Q;1p}}1b(l u=0,A=f[z].P.X;u<A;u++){j(f[z].P[u].1m=="1X"&&f[z].P[u].1U=="1S/1h"){H=f[z].P[u].16.1R(" ")[0];1p}}D=("1w"15 f[z])?f[z].1w.$t:("1x"15 f[z])?f[z].1x.$t:"";l e=/<14\\b[^<]*(?:(?!<\\/14>)<[^<]*)*<\\/14>/1Q;t=a("<J></J>").1c(D.W(e,""));G=t.1P("1e");j("12$Z"15 f[z]){s=f[z].12$Z.18.W(/\\/s[0-9]+\\-c/g,"/"+d.i.1E);j(f[z]===f[0]&&d.i.19!=="s"){s=f[z].12$Z.18.W(/\\/s[0-9]+\\-c/g,"/"+d.i.1F)}N{j(f[z].12$Z.18.1O("1e.1N.1J")!=-1){s=f[z].12$Z.18.W("1l","0")}}}N{j(G.X!=0){s=G[0].1L}N{s=d.i.1o}}D=D.W(/<\\S[^>]*>/g,"");j(D.X>d.i.1i){D=D.13(0,d.i.1i)+"..."}h=f[z].16.$t;C=f[z].1y.$t.13(0,10);q=C.13(0,4);w=C.13(5,7);F=C.13(8,10);y=d.i.1t[1T(w,10)-1];n+=\'<1a O="a\'+z+\'"><J O="1V" ><a 16="\'+h+\'" O="1W" Q="\'+E+\'"><1e 1L="\'+s+\'"/></a><1r><a Q="\'+E+\'">\'+h+\'</a></1r><J O="1Y">\'+(d.i.1n===R?\'<L 1z="23">\'+y+" "+F+", "+q+"</L>":"")+(d.i.1I===R?\'<L 1z="24"><a Q="\'+E+\'#25-26">\'+H+"</a> 27(s)</L>":"")+"</J><p "+(d.i.1A===U?"":\'29="2a:2b"\')+">"+D+"</p></J></1a>"}a("1g",d.$K).1c(n);j(d.i.19==="s"){l o=a(c).2d(".2e");l I=o.2g("2h");j(d.i.M!=U){I.2i(\'<a Q="/1u/1s/\'+1k(d.i.M)+\'"/>\')}l m,g;l k=d.$K.17();j(a(V).17()<2p){g=1;m=k/g}N{j(a(V).17()<2q){g=2;m=k/g}N{j(a(V).17()<2r){g=3;m=k/g}N{g=4;m=k/g}}}a(".1B",d.$K).2s({2t:"2u",1M:".1H > 1a",2v:R,2w:m,2x:1,2y:g,2z:R,2A:4});d.$K.1f(d.i.11)}N{j(d.i.M!=U){d.$K.1c(\'<J O="2C"><a 16="1K 1q 2F \'+d.i.M+\'" Q="/1u/1s/\'+1k(d.i.M)+\'"><L>1K 1q</L></a></J>\').1f(d.i.11)}}d.$K.1f(d.i.11)}N{d.$K.1h("<L>2G 2H! 2I 2J 2K 2L</L>")}},"2M")};d.1G()};a.Y.1C={1d:"",1v:6,1F:"2N-p",1E:"2O-p",1A:U,1n:R,1I:R,1i:2P,19:"v",11:"2Q",1o:"2R://1.2S.2T.1J/-2U/2V/2W/2X/2Y-c/2Z.30",1t:["31","32","33","34","35","36","37","38","39","3a","3b","3c"],M:U};a.3d.Y=T(b){3e 1j.3f(T(){(3g a.Y(1j,b))})}})(3h);',62,204,'||||||||||||||||||options|if||var||||||||||||||||||||||||div|el|span|tagName|else|class|link|href|true||function|false|window|replace|length|cbrnewpost|thumbnail||loadingClass|media|substring|script|in|title|width|url|postType|li|for|append|blogURL|img|removeClass|ul|html|Summarylength|this|encodeURIComponent|default|rel|ShowDate|pBlank|break|All|strong|label|MonthNames|search|MaxPost|content|summary|published|id|ShowDesc|cbttaglistco|defaultOptions|location|ImageSize|FirstImageSize|init|cbrnewponew|ShowComment|com|View|src|selector|youtube|indexOf|find|gi|split|text|parseInt|type|inner|imagethubnailwithtagin|replies|info|alternate|undefined|entry|feed|dayclass|comclass|comment|form|Comment|json|style|display|block|alt|parents|widget|orderby|children|h2|wrapInner|results|max|posts|feeds|host|protocol|479|979|1025|flexslider|animation|slide|animationLoop|itemWidth|minItems|move|mousewheel|maxItems|get|morepostag|addClass|extend|About|No|result|Or|Error|Loading|Feed|jsonp|s360|s100|170|loadingxxnewcontent|http|bp|blogspot|htG7vy9vIAA|Tp0KrMUdoWI|AAAAAAAABAU|e7XkFtErqsU|s72|grey|gif|Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec|fn|return|each|new|jQuery'.split('|'),0,{}))
//]]>
</script>
Save Template!
Saatnya memasang Featured Posts user friendly ini.
Klik "Layout" dan Refresh (F5) sehingga muncul widget baru bernama blodblogpostset seperti ini:
1. Klik "Add a Gadget" > Pilih "HTML/Javascript"
2. Masukkan kode berikut ini di kolom "Content"
<div id="modblofpostset"></div>
<script type='text/javascript'>
$('#modblofpostset').cbrnewpost({
postType:"h",
MaxPost:3,
FirstImageSize: "s660-p",
Summarylength: 150,
ImageSize: "s500-p",
tagName:"Label"
});
</script>
<script type='text/javascript'>
$('#modblofpostset').cbrnewpost({
postType:"h",
MaxPost:3,
FirstImageSize: "s660-p",
Summarylength: 150,
ImageSize: "s500-p",
tagName:"Label"
});
</script>
3. Ubah Label dengan nama label posting yang akan dimunculkan
4. Save!
PENTING!!!
Pastikan sudah ada kode jQuery di dalam template blog Anda:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
Jika belum ada, copas kode jQuery tersebut di atas kode </head>
:: Cek Juga Widget Featured Post Lainnya
Demikian Cara Memasang Featured Post Image User Friendly di Blogger. Good Luck and Happy Blogging! (http://www.contohblog.com).*
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
kok gak muncul ya gan, padahal saya sudah mengikuti tutornya dengan baik dan benar, apakah mas ada solusi ?
ReplyDelete