Redesigned Blog Cards for Space Meta Buttons

S David Prince Posted: July 08, 2024 Updated: December 27, 2024 SiteLog

Also View :Comic Feature is Back with a More Manually Approach!

I had to redesign the blog card for post meta buttons.

It used to be like this

Also View :Redesigned Blog Cards for Space Meta Buttons

How it became when the buttons where added

Also View :New Footer Look

How the blog card is been designed to look like now

Also View :Added Post BreadCrumbs

Also View :Added ShareThis to the Site

The share and bookmark buttons are now floated on the blog card image and looks nicer. What do I know about UI

Please write your comments or send a webmention

Comments Webmentions/ping

Webmention Notice

This site accepts Webmentions via webmention.io/www.sdavidprince.space/webmention. You can also reply to syndicated posts, and your responses may be backfed (posted back here) via brid.gy.

What does all these mean? Read more about it. Respect this and keep mentions relevant.

Responses

⚙️

Best Personal Blogs About Life - OnToplist.com

TOC

Explore: Navigation

body,html{overflow:hidden}#JsEnable{display:none}#sdpnoscript{background:rgb(0 0 0 / .85);padding:0;position:fixed;bottom:0;left:0;top:-100px;right:0;z-index:1000;opacity:1;visibility:visible;height:auto}#sdpnoscript svg{width:100px;height:100px}#sdpnoscript svg path{fill:#fff}#sdpnoscript .isiNoscript{background-color:#34495E;color:#fff;position:absolute;text-align:center;padding:0 30px 30px 30px;margin:auto;top:30%;left:0;right:0;font-size:1.5rem;font-weight:400;line-height:1.5em;max-width:670px;box-shadow:0 20px 10px -10px rgb(0 0 0 / .15);border:15px solid rgb(0 0 0 / .07);overflow:hidden;transition:all .6s cubic-bezier(.25,.8,.25,1);-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:visible;transition:all .2s ease-in-out,visibility 0s;transform-origin:bottom center;pointer-events:auto;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);opacity:1;animation:sdpWobble .5s;-moz-animation:sdpWobble .5s;-webkit-animation:sdpWobble .5s;-o-animation:sdpWobble .5s}#sdpnoscript .isiNoscript:hover{box-shadow:0 20px 10px -10px rgb(0 0 0 / .2)}#sdpnoscript .isiNoscript h4,#sdpnoscript .isiNoscript .JSEnable{display:inline-block;background:rgb(0 0 0 / .07);padding:5px 25px 15px 25px;font-size:2.2rem;font-weight:500;margin-bottom:20px}

Enable Javascript

Javascript is disabled on your Browser. To use S David Prince Space turn on Javascript in the browser settings.

Responses

Generate Link

Explore: Navigation