Cara Membuat Widget Recent Post Berwarna di Blog Part 1 -
Viham Blog - Hallo guys! bertemu lagi nih sama ane hehehe, seperti biasanya ya. Di postingan yang beberapa kali ini, saya akan membahas cara mudah memasang dan membuat widget recent post berwarna atau bisa Sobat sebut juga dengan widget recent post warna-warni nan unik lagi.
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
