Cara Memasang Featured Post Image User Friendly di Blogger

Baca Juga

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>

.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;
}

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>

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>

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>

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>

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