Web Design Tips and Tricks

On a 2560-pixel monitor, the text column of my blog was 867 pixels wide. Not 33%. Not the result of a media query. Eight hundred and sixty-seven pixels, at every window size, forever. Here is how I found the number, and what a fourteen-year-old Blogger template teaches about how layouts get stuck. The template is Awesome Inc. , designed by Tina Chen and shipped with Blogger since around 2011. If your blog is more than a few years old there is a decent chance you are running it, or one of its siblings, and a decent chance you have already tried to widen it from the Template Designer and failed. The reason you failed is interesting, so let's do the archaeology properly. Finding the number Start by not opening dev tools. Open the template XML and search it for every declaration that sets a width. You are looking for one specific thing: a length that is not a percentage. A fluid layout that feels cramped is a padding problem. A layout that is exactly as wide on a ...

Yes.. thank you chat.. Click Me Click Me    Not good enough? Use what Josh Comeau has come up with :  https://www.joshwcomeau.com/animation/3d-button/

To create a continuous Glowing Text animation using HTML and CSS, follow these steps: Add the following HTML code wherever you want the text to appear: <span class="glow-effect">Glowing Text</span> Add the following CSS code within a <style> tag or in your CSS file: (NOTE: click on code to select) .glow-effect { font-size: 24px; animation: glow 2s infinite; } @keyframes glow { 0% { text-shadow: 0 0 5px #ff0000; } 50% { text-shadow: 0 0 20px #ff0000; } 100% { text-shadow: 0 0 5px #ff0000; } } That's it! The text with the class "glow-effect" will now have a continuous glowing animation, with the glow effect fading in and out every 2 seconds.

Per the great bloggers, it helps your cause to put your message in a box But, how? I mean, easily? :) Do it once (use these steps, which I got from chatGPT) and, once you have a blog that you can look at in edit mode, you can always cut and paste. Go into Edit HTML mode. If necessary, use a tool like freeformatter.com to make the HTML that your blogging platform creates for you readable (with indentation, etc). Now, locate the text you want to enclose in a box and surround it with : <div style="border: 2px solid COLOR_OF_CHOICE; padding: 10px;"><p><span style="font-family: FONT_OF_CHOICE;"> and </span></p> </div> NOTE : With very little text, you may benefit from adding : display: inline-block; max-width: max-content; //within the style setting For chatGPT: (click to select) When I say 'FORMAT,COLOR,WIDTH,PAD:', followed by some text, please generate HTML tags that ...

Thank you Upwork and Md. Sumon :  The GUI for tweaking the template has no option for adjusting Page Body Container size. Only custom CSS code in the HTML of the template can do it. Look for (this is after you've gone into Theme > Edit HTML) : ]]></b:skin> And, just above that, add this code : body.item-view .Blog .post-body { margin-bottom: 0; margin-right: 0; } body.item-view .Blog .post-body-container { padding-right: 0; position: relative; margin-left: 0; margin-top: 20px; margin-bottom: 32px; } This now takes up all the available space. If you want to tweak further : body.item-view .Blog .post-body-container { padding-right: 0; position: relative; margin-left: auto; margin-top: 20px; margin-bottom: 32px; margin-right: auto; max-width: 1100px; } How do you find this out? You go into Chrome's Developer Tools and then start tweaking elements.