Make a "Click to Tweet" Quote Box on Blogger (BlogSpot)

How to install the widget box Click to Tweet quote box plugin for Blogger (Blogspot) so that quotes can be directly shared to Twitter. Cool appearance and very light loading.

The "Click to Tweet" widget is a box that contains interesting quotes that are usually the highlight of the paragraph. Lots of well-known websites use this plugin every time they slip a piece of cool sentences so they can be directly shared on Twitter by their readers.

Initially, I accidentally saw this cool box on one of the WordPress-based blogs. Finally, I thought about wanting to create the Blogger version. Incidentally, Twitter is a social media with a microblogging format, so it is a fitting place to share quotes and sentences rather long using the click to tweet plugin box on Blogger.

Click to tweet the Blogspot quote box suitable for blogs that have articles about:

1. Profile of famous people. Usually, they have cool inspirational quotes.
2. News. To highlight the main headlines.
3. Wise words of world figures.
4. Words of wisdom.
5. Pantun
6. The figure of speech.
7. etc. The click to tweet quote box for Blogger is very multifunctional.

How to Install the "Click to Tweet" Plugin of Blogspot Version

Beautify the appearance by adding this CSS code "BEFORE / ABOVE" </style>. Here I use white as the background box. If you don't like it, you can change it according to each taste.

[/* Click to Tweet Quote Box for Blogger by tipricks.com */
.tipricksQuoteTwitter {
  background-color: #fff; /* Background color */
  display: block;
  position: relative;
  border: 1px solid #dddddd;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 15px 30px;
  margin: 15px 0px;
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  text-align: left;
}
.tipricksQuoteTwitter a {
  display: block;
  text-decoration: none;
  text-transform: none;
  color: #666666;
  cursor: pointer;
  font-size: 24px;
  line-height: 140%;
  letter-spacing: 0.05em;
}
.tipricksQuoteTwitter a:hover, .tipricksQuoteTwitter:hover a:after{
  text-decoration: none;
  color: #666666;
}
.tipricksQuoteTwitter a:before {
  content: '';
  display: inline-block;
  width: 50px;
  height: 50px;
  vertical-align: bottom;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,7L8,11H11V17H5V11L7,7H10M18,7L16,11H19V17H13V11L15,7H18Z' fill='%23666'/%3E%3C/svg%3E") no-repeat right center;
}
.tipricksQuoteTwitter a:after {
  content: 'Click to Tweet';
  color: #999999;
  font-size: 12px;
  margin-top: 20px;
  padding-right: 25px;
  position: relative;
  display: block;
  text-transform: uppercase;
  text-align: right;
  text-decoration: none;
  transition: all 0.5s ease;
  line-height: 20px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z' fill='%2300abf0'/%3E%3C/svg%3E") no-repeat right center;
}]

Save the template first so the settings don't disappear.

Next, add the following HTML code in the article. Remember, when writing must choose the mode HTML, NOT Compose.

[<div class="tipricksQuoteTwitter"><a onclick="window.open(&quot;https://twitter.com/share?url=&quot; +document.querySelector(&quot;link[rel='canonical']&quot;).href +&quot;&amp;text=&quot; + encodeURIComponent(this.innerText) + &quot; - by: @tipricks &quot;, &quot;sharer&quot;, &quot; toolbar=0, status=0, width=626, height=436&quot;); return false;" rel="nofollow" title="Share to Twitter">The only thing you need to become successful is the Determination - Muhammad Tahir Habib</a></div>]

1. Change the text that is colored with your own sentence.

2. Change @tipricks to the respective Twitter username. 

3. We recommend that you do not separate the HTML tags above with a new Enter/line in order to prevent the incompatibility of the final results with the example in this article.

Also Read: How to Change Background Color of Author Comment in Blogger

Done. The result will be like this, try clicking the box. A pop-up window from the quote box will automatically appear that can be shared directly on Twitter.

[##eye## View on Codepen]

The only thing you need to become successful is the determination - Muhammad Tahir Habib

You are free to use and copy the Blogger click-box widget tutorial box above with the condition that you must include the TipRicks blog as the source.

This article "Make a "Click to Tweet" Quote Box on Blogger (BlogSpot)" is protected by