Cara Menampilkan Featured Image di Halaman Depan Blog

Baca Juga

Cara Menampilkan Featured Image di Halaman Depan Blog. Featured Image Widget for Blogger.

Featured Image adalah widget yang menampilkan gambar. Penampakannya sebagai berikut:

Kode Featured Image ini fast loading, ringan, karena manual. Anda pilih sendiri gambar yang akan ditampilkan.

Cara Menampilkan Featured Image 

1. Add a Gadget > pilih HTML/Javascript
2. Masukkan kode berikut ini:

<div class="slider">
<input type="radio" name="slide_switch" id="id1"/>
<label for="id1">
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
</label>
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/>
<input type="radio" name="slide_switch" id="id2" checked="checked"/>
<label for="id2">
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
</label>
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/>
<input type="radio" name="slide_switch" id="id3"/>
<label for="id3">
<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
</label>
<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/>
<input type="radio" name="slide_switch" id="id4"/>
<label for="id4">
<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
</label>
<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/>
<input type="radio" name="slide_switch" id="id5"/>
<label for="id5">
<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
</label>
<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/>
</div>
<script type="text/javascript">
// StyleFix 1.0.2 + PrefixFree 1.0.6 / Lea Verou / MIT license
(function(){function h(a,b){return[].slice.call((b||document).querySelectorAll(a))}if(window.addEventListener){var e=window.StyleFix={link:function(a){try{if("stylesheet"!==a.rel||a.hasAttribute("data-noprefix"))return}catch(b){return}var c=a.href||a.getAttribute("data-href"),f=c.replace(/[^/]+$/,""),i=a.parentNode,d=new XMLHttpRequest,g;d.onreadystatechange=function(){4===d.readyState&&g()};g=function(){var b=d.responseText;if(b&&a.parentNode&&(!d.status||400>d.status||600<d.status)){b=e.fix(b,
!0,a);f&&(b=b.replace(/url(s*?((?:"|')?)(.+?)1s*?)/gi,function(b,a,c){return!/^([a-z]{3,10}:|/|#)/i.test(c)?'url("'+f+c+'")':b}),b=b.replace(RegExp("\b(behavior:\s*?url\('?"?)"+f,"gi"),"$1"));var c=document.createElement("style");c.textContent=b;c.media=a.media;c.disabled=a.disabled;c.setAttribute("data-href",a.getAttribute("href"));i.insertBefore(c,a);i.removeChild(a)}};try{d.open("GET",c),d.send(null)}catch(k){"undefined"!=typeof XDomainRequest&&(d=new XDomainRequest,d.onerror=d.onprogress=
function(){},d.onload=g,d.open("GET",c),d.send(null))}a.setAttribute("data-inprogress","")},styleElement:function(a){var b=a.disabled;a.textContent=e.fix(a.textContent,!0,a);a.disabled=b},styleAttribute:function(a){var b=a.getAttribute("style"),b=e.fix(b,!1,a);a.setAttribute("style",b)},process:function(){h('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link);h("style").forEach(StyleFix.styleElement);h("[style]").forEach(StyleFix.styleAttribute)},register:function(a,b){(e.fixers=
e.fixers||[]).splice(void 0===b?e.fixers.length:b,0,a)},fix:function(a,b){for(var c=0;c<e.fixers.length;c++)a=e.fixers[c](a,b)||a;return a},camelCase:function(a){return a.replace(/-([a-z])/g,function(b,a){return a.toUpperCase()}).replace("-","")},deCamelCase:function(a){return a.replace(/[A-Z]/g,function(a){return"-"+a.toLowerCase()})}};(function(){setTimeout(function(){h('link[rel="stylesheet"]').forEach(StyleFix.link)},10);document.addEventListener("DOMContentLoaded",StyleFix.process,!1)})()}})();
(function(h){function e(b,c,f,i,d){b=a[b];b.length&&(b=RegExp(c+"("+b.join("|")+")"+f,"gi"),d=d.replace(b,i));return d}if(window.StyleFix&&window.getComputedStyle){var a=window.PrefixFree={prefixCSS:function(b,c){var f=a.prefix,b=e("functions","(\s|:|,)","\s*\(","$1"+f+"$2(",b),b=e("keywords","(\s|:)","(\s|;|\}|$)","$1"+f+"$2$3",b),b=e("properties","(^|\{|\s|;)","\s*:","$1"+f+"$2:",b);if(a.properties.length)var i=RegExp("\b("+a.properties.join("|")+")(?!:)","gi"),b=e("valueProperties","\b",
":(.+?);",function(a){return a.replace(i,f+"$1")},b);c&&(b=e("selectors","","\b",a.prefixSelector,b),b=e("atrules","@","\b","@"+f+"$1",b));return b=b.replace(RegExp("-"+f,"g"),"-")},property:function(b){return(a.properties.indexOf(b)?a.prefix:"")+b},value:function(b){b=e("functions","(^|\s|,)","\s*\(","$1"+a.prefix+"$2(",b);return b=e("keywords","(^|\s)","(\s|$)","$1"+a.prefix+"$2$3",b)},prefixSelector:function(b){return b.replace(/^:{1,2}/,function(b){return b+a.prefix})},prefixProperty:function(b,
c){var f=a.prefix+b;return c?StyleFix.camelCase(f):f}};(function(){var b={},c=[],f=getComputedStyle(document.documentElement,null),i=document.createElement("div").style,d=function(a){if("-"===a.charAt(0)){c.push(a);var a=a.split("-"),d=a[1];for(b[d]=++b[d]||1;3<a.length;)a.pop(),d=a.join("-"),StyleFix.camelCase(d)in i&&-1===c.indexOf(d)&&c.push(d)}};if(0<f.length)for(var g=0;g<f.length;g++)d(f[g]);else for(var e in f)d(StyleFix.deCamelCase(e));var g=0,j,h;for(h in b)f=b[h],g<f&&(j=h,g=f);a.prefix=
"-"+j+"-";a.Prefix=StyleFix.camelCase(a.prefix);a.properties=[];for(g=0;g<c.length;g++)e=c[g],0===e.indexOf(a.prefix)&&(j=e.slice(a.prefix.length),StyleFix.camelCase(j)in i||a.properties.push(j));"Ms"==a.Prefix&&!("transform"in i)&&!("MsTransform"in i)&&"msTransform"in i&&a.properties.push("transform","transform-origin");a.properties.sort()})();(function(){function b(a,b){e[b]="";e[b]=a;return!!e[b]}var c={"linear-gradient":{property:"backgroundImage",params:"red, teal"},calc:{property:"width",params:"1px + 5%"},
element:{property:"backgroundImage",params:"#foo"},"cross-fade":{property:"backgroundImage",params:"url(a.png), url(b.png), 50%"}};c["repeating-linear-gradient"]=c["repeating-radial-gradient"]=c["radial-gradient"]=c["linear-gradient"];var f={initial:"color","zoom-in":"cursor","zoom-out":"cursor",box:"display",flexbox:"display","inline-flexbox":"display"};a.functions=[];a.keywords=[];var e=document.createElement("div").style,d;for(d in c){var g=c[d],h=g.property,g=d+"("+g.params+")";!b(g,h)&&b(a.prefix+
g,h)&&a.functions.push(d)}for(var j in f)h=f[j],!b(j,h)&&b(a.prefix+j,h)&&a.keywords.push(j)})();(function(){function b(a){e.textContent=a+"{}";return!!e.sheet.cssRules.length}var c={":read-only":null,":read-write":null,":any-link":null,"::selection":null},f={keyframes:"name",viewport:null,document:'regexp(".")'};a.selectors=[];a.atrules=[];var e=h.appendChild(document.createElement("style")),d;for(d in c){var g=d+(c[d]?"("+c[d]+")":"");!b(g)&&b(a.prefixSelector(g))&&a.selectors.push(d)}for(var k in f)g=
k+" "+(f[k]||""),!b("@"+g)&&b("@"+a.prefix+g)&&a.atrules.push(k);h.removeChild(e)})();a.valueProperties=["transition","transition-property"];h.className+=" "+a.prefix;StyleFix.register(a.prefixCSS)}})(document.documentElement);
</script>
<style>
.slider {
    width: 560px;
    position: relative;
    padding-top: 300px;
    margin: 10px 0;}
.slider>img{
position: absolute;
left: 0; top: 0;
transition: all 0.5s;
}
.slider input[name='slide_switch'] {
display: none;
}
.slider label {
    margin: 5px 10px 15px 0;
    border: 1px solid #999;
    float: left;
    cursor: pointer;
    transition: all 0.5s;
    opacity: 0.6;
}
.slider label img{
display: block;
}
.slider input[name='slide_switch']:checked+label {
border-color: #666;
opacity: 1;
}
.slider input[name='slide_switch'] ~ img {
    opacity: 0;
    transform: scale(1.1);
    width: 100%;
    height: 300px;
}
.slider input[name='slide_switch']:checked+label+img {
opacity: 1;
transform: scale(1);
}
</style>

3. Ganti URL Gambar yang diawali dengan kode img src
4. Save!

Sumber

Demikian cara Menampilkan Featured Image di Blog Anda. Good Luck & Happy Blogging! (www.contohblog.com).*