How to Add a Click to Tweet Box in Blogger
In this video, You’ll Learn How to Add a Click to Tweet Box in your Blogger website.
Style 1
<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 2
<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>