Recent Post Lists with Image Hover

Admin August 04, 2025
Recent Post Lists with Image Hover Admin 5 of 5
This is a Recent Post List with Image Hover effect, similar to what you'd see on a fansub site like Doronime. However, this version has ...

This is a Recent Post List with Image Hover effect, similar to what you'd see on a fansub site like Doronime. However, this version has been specifically adapted for Blogger, as shown in the screenshot:

Recent Post Lists dengan Image Hover

This feature supports using labels and can display a maximum of 10 recent posts. To use it, simply save the following HTML and JavaScript within a Widget > HTML/JavaScript:

<!-- 
blog-id="XXXXXXXXX" // UBAH BLOG ID
max-results="10" // maksimal post
fetch-delay="2000" // delay sebelum muncul
label="Comedy" // Bisa kosong tanpa Label post 
-->
<blogger-posts-list 
  blog-id="XXXXXXXXX"
  max-results="10"
  fetch-delay="2000"
  label="Comedy"
></blogger-posts-list>

<style>
  .hover-preview-img {
    position: fixed;
    display: none;
    pointer-events: none;
    border: 3px solid #2196f3;
    box-shadow: 5px 5px 5px 0 hsl(0deg 0% 0% / 60%);
    max-width: 170px;
    z-index: 9999;
    transition: transform 0.2s ease;
  }
</style>

<script type="text/javascript">
eval(function(p,a,c,k,e,d){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[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}('u J(){d t=["B","3q","2U-2T","2S","W-T C","-2R","19$1c","2Q","2P","2O","2N","2M","2L","2K","y","2J","2H","2u","1R","2G","2F","2E","2D","&2C=1p","2B","1k","S://1e.R.1s/1q/","1o","H","2A","2z","/y/1d","2y","1K","2x","F","1r","R-y-2w","2v","2V","13","2I","2W","3c","3o","1L","3n","3m","14","3l","3k","3j","1E","?3i=3h-1A-14&D-Z=","3g","3f","3e","3d","17","12","3b","1n","2Y","C","3a","1b","D-Z","39","38","37","2s","36","35","34","1p","33","/y/1d/-/","32","1N","31"];j(J=u(){j t})()}d t=w;!u(t,e){d s=w,o=J();1l(;;)30{2Z(2X===-f(s(2t))/1+f(s(25))/2*(f(s(2a))/3)+-f(s(24))/4*(-f(s(29))/5)+-f(s(2h))/6*(-f(s(2r))/7)+-f(s(2p))/8*(f(s(2e))/9)+f(s(2b))/10+-f(s(2q))/11)2o;o.1h(o.1f())}2k(n){o.1h(o.1f())}}();d e=2i 2g;u w(t,e){d s=J();j(w=u(t,e){j s[t-=1H]})(t,e)}e[t(26)]("\\n.W-T{L:23;2m-x:#22;q-1Z:2c;V-X:1S;2d:1O 1.2j 2n 2l-1A-2f}.W-T.C{Q:21%;L:27}@20 1O{0{P:1}28%{P:.5}3p%{P:1}}.l-h-r{F:1z;3r-3L:4H;V-X:4N;1W:4B}.l-h-r::1x{1N:\'\';F:4j-1L;Q:0;L:0;q-1K:E G 1J;q-X:E G 1J;q-Y:E G #4l;V-4s:4v}.l-h-r a{4K-4p:A;x:4x;1z-4w:1}.l-h-r:h::1x{q-Y-x:#1P}.l-h-r:h a{x:#1P}.h-1C-13{1W:4u;F:A;D-Q:4t;L:4r;q:1S G #4q;4o-4g:1v 1v E 4f(0,0,0,0.2);z-4k:4i;4h-4y:A}\\n");4z 1u 4A 4Q{4P[t(4O)]=[t(16),t(4M),"1Q-1a","1n"];4L(){d s=t;4J(),b[s(4I)]({4G:"4F"}),b[s(1U)][s(4E)]=[e],b[s(v)]=k[s(I)](s(1V)),b[s(1U)][s(p)](b[s(v)]),b[s(N)]=[],b[s(m)]=4D}[t(4C)](){d e=t;b[e(1i)]();d s=f(b[e(K)]("1Q-1a")||"4n",10);b[e(18)](b[e(1g)][e(1j)](b),s)()}l[t(O)](){d e=t;j b[e(K)](e(16))||""}l 12(){j f(b[t(K)]("D-Z")||"10",10)}l[t(M)](){d e=t;j b[e(K)](e(M))?.[e(3Q)]()||""}[t(18)](t,e){1m s;j u(...o){d n=w;4d(s),s=3N((()=>t[n(3M)](b,o)),e)}}[t(1i)](){d e=t;b[e(v)][e(1T)]="";1l(1m t=0;t{d e=s;j{C:t[e(1y)].$t,1b:t[e(1G)][e(3w)]((t=>t[e(3v)]===e(3u)))[e(1Y)],17:t[e(3t)]?.[e(1t)]?t.19$1c[e(1t)][e(3O)](/3D-c/,"3P")+e(42):(t[e(4c)]?.$t[e(4b)](/S?:\\/\\/[^\'" >]+\\.(4a?g|49|48|47)/i)||[])[0]||""}})),b[s(1X)]()}[t(1X)](){d e=t;b.1R[e(1T)]="",b[e(N)][e(46)]((t=>{d s=e,o=k.B(s(1V));o[s(1B)]="l-h-r";d n=k[s(I)]("a");n[s(1Y)]=t[s(1G)],n[s(45)]="44";d i=k[s(I)](s(43));i[s(41)]=t[s(1y)],n[s(p)](i),o[s(p)](n),b[s(v)][s(p)](o),t[s(1F)]&&(!b[s(m)]&&(b[s(m)]=k[s(I)](s(3R)),b[s(m)][s(1B)]="h-1C-13",k[s(1D)][s(p)](b[s(m)])),n[s(U)]("40",(()=>{d e=s;b.1E[e(1w)]=t[e(1F)],b[e(m)].H[e(1I)]=e(1H)})),n[s(U)](s(3Z),(()=>{d t=s;b[t(m)].H[t(1I)]="A"})),n[s(U)](s(3Y),(t=>{d e=s;b[e(m)][e(3X)][e(3W)]=t[e(3V)]+15+"1M",b[e(m)].H.Y=t[e(3U)]+15+"1M"})))}))}}3T[t(3S)](t(4m),1u);',62,301,'|||||||||||this||const||parseInt||hover||return|document|get|406|||477|border|post|||function|452|_0x39b8|color|posts||none|createElement|title|max|5px|display|solid|style|434|_0x5e3f|441|height|415|448|444|opacity|width|blogger|https|line|433|margin|skeleton|bottom|left|results|||maxResults|img|script||436|imgUrl|446|media|delay|link|thumbnail|default|www|shift|401|push|405|409|handleResponse|for|let|label|div|__handleBloggerResponse|feeds|className|com|466|BloggerPostsList|2px|473|before|417|flex|in|470|preview|449|hoverImg|412|419|399|469|transparent|top|block|px|content|pulse|007bff|fetch|wrapper|1px|414|475|461|position|429|472|radius|keyframes|70|e0e0e0|15px|437|400|411|20px|50|442|443|451|4px|animation|426|out|CSSStyleSheet|421|new|5s|catch|ease|background|infinite|break|463|476|464|attachShadow|456|11953790oAXlCW|href|list|span|url|7UexqHO|8jpRaZF|clientY|callback|662524iDfkIc|match|mouseleave|replace|feed|shadowRoot|body|textContent|debounce|define|blogId|280173kBiGSc|335765VmoCVz|getAttribute|rw|48OXIjvj|id|blog|src|15058395pZhvUq|605352|trim|if|try|addEventListener|rel|renderPosts|clientX|8650890kTsxMS|connectedCallback|entry|observedAttributes|6779166HdIKYR|mousemove|innerHTML|appendChild|replaceSync|target|bind|apply|json|alt|showSkeleton|alternate|forEach|fetchPosts|10MqoqiF|adoptedStyleSheets|100|find|align|428|440|404|431|435|map|423|450|459|402|window|s72|457|413|407|465|460|encodeURIComponent|430|items|408|setTimeout|453|s1600|416|474|445|customElements|427|458|467|462|418|454|mouseenter|447|439|468|_blank|410|403|png|gif|webp|jpe|455|432|clearTimeout|438|rgba|shadow|pointer|1000|inline|index|333|471|2000|box|decoration|ccc|auto|right|200px|fixed|8px|grow|inherit|events|class|extends|relative|425|null|478|open|mode|center|424|super|text|constructor|420|6px|422|static|HTMLElement'.split('|'),0,{}));
</script>

- Yuu

Comments Section.