ChatGPT  PROMPT TEMPLATE
PERFECTING PROMPT INSTRUCTION TEMPLATE!
UPDATE as March 1st, 2026

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 following content into HTML source code that complies with Blogger formatting rules.

Option 2 (More Technical):

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

Option 3 (More Formal):

Please rewrite the following 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 Heigth/Full Length TABLE:

<div style="overflow-x: auto; overflow-y: hidden; width: 100%;"> <table style="border-collapse: collapse; white-space: nowrap; min-width: 100%;"> </table> </div>


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>




SOURCE CODE

<style>
  .post-body { font-family: sans-serif; line-height: 1.6; color: #333; max-width: 800px; margin: auto; }
  .btn-green { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; margin-bottom: 20px; display: inline-block; }
 
  .section-group, .section-box { border-bottom: 2px solid #eee; padding-bottom: 30px; margin-bottom: 30px; }
  .label { font-weight: bold; text-transform: uppercase; text-decoration: none; display: block; margin-bottom: 10px; color: #1a73e8; }
  h1, h3 { margin-top: 0; }

  /* Container for Code + Button */
  .code-container { position: relative; margin-top: 10px; border-radius: 5px; overflow: hidden; }
 
  .code-display {
    background: #fdfdfd; border: 1px solid #ddd; padding: 45px 15px 15px 15px;
    font-family: 'Courier New', Courier, monospace; display: block; white-space: pre-wrap; font-size: 14px;
    color: #444; border-radius: 5px;
  }

  /* Revised Copy Button - NO ICONS */
  .copy-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    /* background: #333;
    */
    BACKGROUND: LIME;
    border: none;
    /* color: #fff;
    */
    COLOR: RED;
    padding: 8px 0;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 0.2s ease;
    border-bottom-right-radius: 8px;
    z-index: 10;
  }
  .copy-btn:hover { background: #1a73e8; }
  .copy-btn.success { background: #4CAF50; }
</style>

<div class="post-body">

  <div class="section-group">
    <button class="btn-green" onclick="location.reload();">Refresh Page</button>
    <h2>From RAW to MORE PROPER</h2>
    <h1><span style="color: #04ff00;">CLICK AVAILABLE COPY BUTTON at TOP-LEFT CORNER to COPY the PROMPT TEMPLATE</span></h1>
  </div>

<br />
<div style="background-color: dodgerblue; height: 0.1cm;"></div><br />  
  <div class="section-group">
    <div class="section-box">
      <span class="label">REWRITE INTO BLOGGER-ACCEPTED HTML SOURCE CODE</span>
     
      <p><strong>Option 1 (Clear and Direct):</strong></p>
      <div class="code-container">
        <button class="copy-btn" onclick="copyCode(this)">Copy</button>
        <code class="code-display">Rewrite the following content into HTML source code that complies with Blogger formatting rules.</code>
      </div>

      <p><strong>Option 2 (More Technical):</strong></p>
      <div class="code-container">
        <button class="copy-btn" onclick="copyCode(this)">Copy</button>
        <code class="code-display">Convert the following text into HTML source code that is fully compatible with Blogger (Blogspot) HTML standards.</code>
      </div>

      <p><strong>Option 3 (More Formal):</strong></p>
      <div class="code-container">
        <button class="copy-btn" onclick="copyCode(this)">Copy</button>
        <code class="code-display">Please rewrite the following content into properly structured HTML source code that adheres to Blogger code acceptance rules.</code>
      </div>
    </div>

<br />
<div style="background-color: dodgerblue; height: 0.1cm;"></div><br />  
    <div class="section-box">
      <span class="label">CONVERT/ENCAPSULATE INTO RESPONSIVE FULL-WIDTH WITH SCROLLABLE WIDTH (BOOTSTRAP MOBILE)</span>
     
      <p><strong>Option 1 (Clear and Structured):</strong></p>
      <div class="code-container">
        <button class="copy-btn" onclick="copyCode(this)">Copy</button>
        <code class="code-display">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.</code>
      </div>

      <p><strong>Option 2 (More Technical and Specific):</strong></p>
      <div class="code-container">
        <button class="copy-btn" onclick="copyCode(this)">Copy</button>
        <code class="code-display">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.</code>
      </div>

      <p><strong>Option 3 (Highly Formal / Developer-Oriented):</strong></p>
      <div class="code-container">
        <button class="copy-btn" onclick="copyCode(this)">Copy</button>
        <code class="code-display">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.</code>
      </div>
    </div>
  </div>

<br />
<div style="background-color: dodgerblue; height: 0.1cm;"></div><br />  
  <div class="section-group">
    <h3>Make/Convert (ORDINARY) Table into Scrollable Width but NOT Scrollable Heigth/Full Length TABLE:</h3>
    <div class="code-container">
      <button class="copy-btn" onclick="copyCode(this)">Copy</button>
      <code class="code-display">&lt;div style="overflow-x: auto; overflow-y: hidden; width: 100%;"&gt;
  &lt;table style="border-collapse: collapse; white-space: nowrap; min-width: 100%;"&gt;
  &lt;/table&gt;
&lt;/div&gt;</code>
    </div>
  </div>

<br />
<div style="background-color: dodgerblue; height: 0.1cm;"></div><br />  
  <div class="section-group">
    <button class="btn-green" onclick="location.reload();">Refresh Page</button>
    <h3>REFRESH "Current Page" BUTTON</h3>
    <p>&lt;!-- Refresh Button in a Post itself --&gt;</p>
    <div class="code-container">
      <button class="copy-btn" onclick="copyCode(this)">Copy</button>
      <code class="code-display">&lt;div style="margin-bottom:15px;"&gt;
  &lt;button onclick="location.reload();" style="background-color:#4CAF50; color:white; padding:10px 20px; border:none; border-radius:5px; cursor:pointer; font-size:16px;"&gt;
    Refresh Page
  &lt;/button&gt;
&lt;/div&gt;</code>
    </div>
  </div>

<br />  
<div style="background-color: dodgerblue; height: 0.1cm;"></div><br />  
  <div class="section-group">
    <h3>Make "THICK" Border of TAG hr:</h3>
    <p><em>(Visual divider achieved via CSS background-color instead of HR tag)</em></p>
    <div class="code-container">
      <button class="copy-btn" onclick="copyCode(this)">Copy</button>
      <code class="code-display">&lt;div style="background-color:dodgerblue; height:0.2cm;"&gt;&lt;/div&gt;</code>
    </div>
  </div>

<br />  
<div style="background-color: dodgerblue; height: 0.1cm;"></div><br />  
  <div class="section-group" style="border-bottom: none;">
    <h3>Inline CSS to set-up Elements'</h3>
    <div class="code-container">
      <button class="copy-btn" onclick="copyCode(this)">Copy</button>
      <code class="code-display">&lt;span style="font-size:200%;"&gt;
  &lt;!-- 1st text-sentence here --&gt;
  &lt;!-- 2nd text-sentence here --&gt;
&lt;/span&gt;</code>
    </div>
  </div>

</div>

<script>
  function copyCode(button) {
    var codeBlock = button.nextElementSibling;
    var text = codeBlock.innerText;
   
    navigator.clipboard.writeText(text).then(function() {
      button.innerText = "COPIED";
      button.classList.add('success');
      setTimeout(function() {
        button.innerText = "COPY";
        button.classList.remove('success');
      }, 2000);
    }, function() {
      button.innerText = "ERROR";
    });
  }
</script>

Comments

Post a Comment