Sudahkan Sobat klik DEMO di atas? gimana, apakah Sobat tertarik untuk memasang widget recent post ini di blog Sobat? Kalau iya, Sobat cukup ikuti saja alur-alur dibawah ini.
Cara Memasang Widget Recent Post Berwarna
Login ke akun Blogger Sobat - pilih Tema - lalu Edit HTML, setelah terbuka code, salin semua kode dibawah ini tepat sebelum code </style> atau ]]></b:skin>
/* Widget Recent Post Versi 1 */
.recentpostkerenfeatured{display:flex;margin:0 auto 20px auto;width:100%;overflow:hidden;max-width:970px}
.rpkerenfeatureditem{background:rgba(0,0,0,0.02);display:block;position:relative;float:left;overflow:hidden;height:220px;width:25%}
.rpkerenfeatureditem .gracontent{background:#3498db;display:block;position:absolute;z-index:6;bottom:0;left:0;right:0;transform:translate(0,60px);opacity:0;visibility:hidden;transition:all .3s}
.rpkerenfeatureditem:hover .gracontent{opacity:1;visibility:visible;transform:translate(0,0)}
.rpkerenfeatureditem .gracontent h3{font-size:14px;color:#fff;padding:15px;margin:0;text-align:center}
.rpkerenfeatureditem .feat-img{width:100%;height:100%;background-size:cover;background-position:50%}
.rpkerenfeatureditem a{display:block;color:rgba(255,255,255,1);position:relative;vertical-align:bottom;z-index:5;height:100%;transition:all .3s}
.rpkerenfeatureditem a:before{content:'';background:#3498db;width:100%;height:100%;position:absolute;z-index:3;top:0;opacity:0.9;transition:background 0.3s linear,opacity 0.3s linear}
.rpkerenfeatureditem.first a:before,.rpkerenfeatureditem.first .gracontent{background:#56a8df}
.rpkerenfeatureditem.second a:before,.rpkerenfeatureditem.second .gracontent{background:#e49148}
.rpkerenfeatureditem.third a:before,.rpkerenfeatureditem.third .gracontent{background:#5bccb6}
.rpkerenfeatureditem.fourth a:before,.rpkerenfeatureditem.fourth .gracontent{background:#f5b44c}
.rpkerenfeatureditem a:hover:before{opacity:0.1;}
.rpkerenfeatureditem a:after{content:'textsms';font-family:Material Icons;position:absolute;z-index:3;font-size:3rem;top:32%;left:0;right:0;bottom:0;color:#fff;text-align:center;transform:translate(0,0);animation:jellyrpkeren .6s linear;opacity:1;visibility:visible;transition:all .3s}
.rpkerenfeatureditem:hover a:after{opacity:0;visibility:hidden;transform:translate(0,-60px)}
@media screen and (max-width:826px){
.rpkerenfeatureditem{width:50%}
.rpkerenfeatureditem.third,.rpkerenfeatureditem.fourth{display:none}}
@media screen and (max-width:641px){
.rpkerenfeatureditem{width:100%}
.rpkerenfeatureditem.second,.rpkerenfeatureditem.third,.rpkerenfeatureditem.fourth{display:none}}/* Widget Recent Post Versi 2 */
.recentpostkerenfeatured{display:flex;margin:0 auto 20px auto;width:100%;overflow:hidden;max-width:970px}
.rpkerenfeatureditem{background:rgba(0,0,0,0.02);display:block;position:relative;float:left;overflow:hidden;height:220px;width:25%}
.rpkerenfeatureditem .gracontent{background:#3498db;display:block;position:absolute;z-index:6;bottom:0;left:0;right:0;transform:translate(0,0);opacity:1;visibility:visible;transition:all .3s}
.rpkerenfeatureditem:hover .gracontent{opacity:0;visibility:hidden;transform:translate(0,60px)}
.rpkerenfeatureditem .gracontent h3{font-size:14px;color:#fff;padding:15px;margin:0;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.rpkerenfeatureditem .feat-img{width:100%;height:100%;background-size:cover;background-position:50%}
.rpkerenfeatureditem a{display:block;color:rgba(255,255,255,1);position:relative;vertical-align:bottom;z-index:5;height:100%;transition:all .3s}
.rpkerenfeatureditem a:before{content:'';background:#3498db;width:100%;height:100%;position:absolute;z-index:3;top:0;opacity:0;transition:background 0.3s linear,opacity 0.3s linear}
.rpkerenfeatureditem.first a:before,.rpkerenfeatureditem.first .gracontent{background:#56a8df}
.rpkerenfeatureditem.second a:before,.rpkerenfeatureditem.second .gracontent{background:#e49148}
.rpkerenfeatureditem.third a:before,.rpkerenfeatureditem.third .gracontent{background:#5bccb6}
.rpkerenfeatureditem.fourth a:before,.rpkerenfeatureditem.fourth .gracontent{background:#f5b44c}
.rpkerenfeatureditem a:hover:before{opacity:0.9;}
.rpkerenfeatureditem a:after{content:'textsms';font-family:Material Icons;position:absolute;z-index:3;font-size:3rem;top:32%;left:0;right:0;bottom:0;color:#fff;text-align:center;transform:translate(0,-60px);animation:jellyrpkeren .6s linear;opacity:0;visibility:hidden;transition:all .3s}
.rpkerenfeatureditem:hover a:after{opacity:1;visibility:visible;transform:translate(0,0)}
@media screen and (max-width:826px){
.rpkerenfeatureditem{width:50%}
.rpkerenfeatureditem.third,.rpkerenfeatureditem.fourth{display:none}}
@media screen and (max-width:641px){
.rpkerenfeatureditem{width:100%}
.rpkerenfeatureditem.second,.rpkerenfeatureditem.third,.rpkerenfeatureditem.fourth{display:none}}Tambahkan juga code CSS libary material icons ini sebelum </head>
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet' type='text/css'/>Widget Recent Post ini menggunakan Libary Material Icons, jadi jika Sobat memakai FontAwesome, silakan ganti dengan code dibawah ini.
.rpkerenfeatureditem a:after{content:'textsms';font-family:Material Icons;position:absolute;z-index:3;font-size:3rem;top:32%;left:0;right:0;bottom:0;color:#fff;text-align:center;transform:translate(0,0);animation:jellygrav .6s linear;opacity:1;visibility:visible;transition:all .3s}Lanjut, tambahkan code dibawah ini tepat sebelum </body>
<script type='text/javascript'>
//<![CDATA[
// Recent Post
function getPostUrl(a){for(var b=0;b<a.link.length;b++)if("alternate"==a.link[b].rel){var c=a.link[b].href;return c}}function getPostPublishDate(a){var b=a.published.$t,c=b.split("-")[2].substring(0,2),d=b.split("-")[1],e=b.split("-")[0],f=["January","February","March","April","May","June","July","August","September","Octobor","November","December"],g=f[d-1],h=g+" "+c+", "+e;return b?h:""}function getPostCategory(a){var b=a.category;b&&(b=a.category[0].term);var c='<div class="category-wrapper"><a class="category" href="/search/label/'+b+'?max-results=10">'+b+"</a></div>";return b?c:""}function Slider(a){for(var c=(new Array,""),d=a.feed.entry.length,e=0;e<d;e++){var f=a.feed.entry[e],g=f.title.$t,h=getPostUrl(f),l=(f.author[0].name.$t,getPostPublishDate(f),getPostCategory(f),f.category[0].term),m=a.feed.entry[e].content.$t,n=$("<div>").html(m);if(m.indexOf("//www.youtube.com/embed/")>-1)var o=a.feed.entry[e].media$thumbnail.url,p=o;else if(m.indexOf("<img")>-1)var q=n.find("img:first").attr("src"),p=q;else var p=no_image;0==e&&(c=c+'<div class="gravfeatureditem first"><div class="gracontent"><h3>'+g+'</h3></div><a href="'+h+'"><div class="feat-img" style="background-image:url('+p+');"></div></a></div>'),1==e&&(c=c+'<div class="gravfeatureditem second"><div class="gracontent"><h3>'+g+'</h3></div><a href="'+h+'"><div class="feat-img" style="background-image:url('+p+');"></div></a></div>'),2==e&&(c=c+'<div class="gravfeatureditem third"><div class="gracontent"><h3>'+g+'</h3></div><a href="'+h+'"><div class="feat-img" style="background-image:url('+p+');"></div></a></div>'),3==e&&(c=c+'<div class="gravfeatureditem fourth"><div class="gracontent"><h3>'+g+'</h3></div><a href="'+h+'"><div class="feat-img" style="background-image:url('+p+');"></div></a></div>')}slider.html('<div class="gravityfeatured">'+c+"</div>"),$(".gravityfeatured").find(".feat-img").each(function(){$(this).attr("style",function(a,b){return b.replace("/default.jpg","/mqdefault.jpg")}).attr("style",function(a,b){return b.replace("s72-c","s1600")}).attr("style",function(a,b){return b.replace("s320","s1600")}).attr("style",function(a,b){return b.replace("s400","s1600")}).attr("style",function(a,b){return b.replace("s640","s1600")})})}var slider=$("#gravityfeatured .widget-content"),sliderContent=slider.text().trim();"no"!==sliderContent.toLowerCase().trim()&&'"no"'!==sliderContent.toLowerCase()&&""!==sliderContent?"[recent]"!==sliderContent?$.ajax({url:"/feeds/posts/default/-/"+sliderContent+"?alt=json-in-script&max-results=4",type:"get",dataType:"jsonp",success:function(a){Slider(a)}}):$.ajax({url:"/feeds/posts/default?alt=json-in-script&max-results=4",type:"get",dataType:"jsonp",success:function(a){Slider(a)}}):$("#slider").remove();
//]]>
</script>Terakhir, tambahkan code dibawah ini dimana saja, yang penting diantara <body> dan </body>
<b:section class='recentpostkerenfeaturedz' id='recentpostkerenfeatured' showaddelement='yes'>
<b:widget id='HTML94' locked='false' title='RecentPostKeren' type='HTML' version='1'>
<b:includable id='main'>
<div class='widget-content'>
<data:content/>
</div>
<div class='clear'/>
</b:includable>
</b:widget>
</b:section>Simpan Template lalu pilih menu Tata Letak, kemudian tambahkan code pemanggil dibawah ini pada widget yang ditambahkan
[recent]Simpan widget dan cek hasilnya pada blog Sobat.
Baca juga: Cara Memasang Share Button Telegram di Blog
Gak sulit-sulit amat kan? baiklah mungkin cukup sekian tutorial blogger Cara Membuat Widget Recent Post Berwarna di Blog Part 1, Silakan berkunjung kembali.
#Sumber
0 komentar