How to Add a Click to Tweet Box in Blogger

  <style>
     .tweet-box {
      border: 2px solid #1da1f2;
      background-color: #ffffff;
      border-radius: 8px;
      font-family: System-ui;
      padding: 16px;
      margin: 20px auto;
      max-width: 500px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .tweet-box p {
      margin: 0 0 10px;
      font-size: 16px;
      line-height: 1.5;
    }

    .tweet-box .tweet-button {
      display: inline-block;
      background-color: #1da1f2;
      color: #fff;
      text-decoration: none;
      padding: 10px 20px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: bold;
      transition: background-color 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .tweet-box .tweet-button:hover {
      background-color: #0d8bf0;
    }
  </style>


<div class="tweet-box">
  <p id="tweet-content">"Learning web development is fun! Check out this tutorial and get started on your coding journey. #WebDevelopment #Coding"</p>
  <a href="#" class="tweet-button" id="tweet-btn" target="_blank">Click to Tweet</a>
</div>

<script>
  document.getElementById('tweet-btn').addEventListener('click', function () {
    const tweetContent = document.getElementById('tweet-content').textContent;
    const tweetURL = `https://twitter.com/intent/tweet?text=${encodeURIComponent(tweetContent)}`;
    window.open(tweetURL, '_blank');
  });
</script>

 <style>
        #tweetBox {
            font-family: System-ui;
            Font-weight: 500;
            Font-size: 1.2em;
            text-align: center;
            margin: 50px auto;
            max-width: 400px;
            padding: 20px;
            background: white;
            border: 3px solid black;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            position: relative; 
        }
        #tweetText {
            font-size: 19px;
            margin-bottom: 10px;
        }
        #tweetBox button {
            background-color: #1DA1F2; 
            color: white;
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 20px;
            transition: background-color 0.3s;
        }
        #tweetBox button:hover {
            background-color: #0c85d0;
        }
        .x-icon {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 20px;
            height: 20px;
        }
        .x-icon svg {
            width: 100%;
            height: 100%;
            fill: black;
        }
    </style>

<div id="tweetBox">
    <div class="x-icon">
        <svg viewBox="0 0 24 24" aria-hidden="true">
            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
        </svg>
    </div>
    <!-- The tweet content -->
    <p id="tweetText">Check out this amazing feature! #Tech #Innovation</p>
    <button onclick="clickToTweet()">Click to Tweet</button>
</div>

<script>
function clickToTweet() {
    var tweet = document.getElementById('tweetText').innerText;
    var encodedTweet = encodeURIComponent(tweet);
    var twitterUrl = 'https://twitter.com/intent/tweet?text=' + encodedTweet;
    window.open(twitterUrl, 'twitter-share-dialog', 'width=626,height=436');
}
</script>