ChatGPT
PERFECTING PROMPT INSTRUCTION TEMPLATE! (CONVERTED TO APP)

on

From RAW to MORE PROPER

CLICK AVAILABLE COPY BUTTON at TOP-LEFT CORNER to COPY the PROMPT TEMPLATE



REWRITE INTO BLOGGER-ACCEPTED HTML SOURCE CODE

Option 1 (Clear and Direct):

Rewrite the answer-content into HTML source code that complies with Blogger formatting rules.

Option 2 (More Technical):

Convert the answer-text into HTML source code that is fully compatible with Blogger (Blogspot) HTML standards.

Option 3 (More Formal):

Please rewrite the answer-content into properly structured HTML source code that adheres to Blogger code acceptance rules.


CONVERT/ENCAPSULATE INTO RESPONSIVE FULL-WIDTH WITH SCROLLABLE WIDTH (BOOTSTRAP MOBILE)

Option 1 (Clear and Structured):

Redo this by converting and encapsulating it into a fully responsive, full-width layout with horizontal scrolling enabled (scrollable width only, non-scrollable height), including a Bootstrap-based mobile device version.

Option 2 (More Technical and Specific):

Rebuild this into a fully responsive, full-width container with horizontal overflow (scrollable width only, fixed/non-scrollable height), and include a Bootstrap-optimized mobile device layout.

Option 3 (Highly Formal / Developer-Oriented):

Please reconstruct this by encapsulating it within a fully responsive, full-width structure that supports horizontal scrolling only (no vertical overflow expansion), and integrate a Bootstrap-based mobile-responsive version.


Make/Convert (ORDINARY) Table into Scrollable Width but NOT Scrollable Height/Full Length TABLE:


<div style="overflow-x:auto; overflow-y:hidden; width:100%;">
  <table style="border-collapse:collapse; white-space:nowrap; min-width:100%; border:1px solid #000;">
    <style>
      table th, table td {
        border:1px solid #000;
        padding-left:0.6em;
        padding-right:0.6em;
      }
    </style>

REFRESH "Current Page" BUTTON

<!-- Refresh Button in a Post itself -->

<div style="margin-bottom:15px;"> <button onclick="location.reload();" style="background-color:#4CAF50; color:white; padding:10px 20px; border:none; border-radius:5px; cursor:pointer; font-size:16px;"> Refresh Page </button> </div>


Make "THICK" Border of TAG hr:

(Visual divider achieved via CSS background-color instead of HR tag)

<div style="background-color:dodgerblue; height:0.2cm;"></div>


Inline CSS to set-up Elements'

<span style="font-size:200%;"> <!-- 1st text-sentence here --> <!-- 2nd text-sentence here --> </span>



DISPLAY CODE SNIPPET WITH VS CODE STYLE SYNTAX HIGHLIGHTING

Prompt Template:

Generate the body content of an HTML page that displays a code snippet as text, with bright and visually appealing syntax highlighting similar to Visual Studio Code themes such as Monokai Bright or Night Owl. Use the <pre> and <code> tags for structure, and apply syntax coloring using <span> elements and CSS. The code snippet should only be displayed as text—do not execute it.

Comments

Post a Comment