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:
- Profile of famous people. Usually, they have cool inspirational quotes.
- News. To highlight the main headlines.
- Wise words of world figures.
- Words of wisdom.
- Pantun
- The figure of speech.
- 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("https://twitter.com/share?url=" +document.querySelector("link[rel='canonical']").href +"&text=" + encodeURIComponent(this.innerText) + " - by: @tipricks ", "sharer", " toolbar=0, status=0, width=626, height=436"); 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.
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.
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
An outstanding share! I have just forwarded this onto
ReplyDeletea friend who has been conducting a little homework on this.
And he actually ordered me breakfast due to the fact that I stumbled upon it for him...
lol. So allow me to reword this.... Thanks for the meal!!
But yeah, thanks for spending the time to talk about this subject here on your web page.
Excellent blog you have here but I was curious if you knew of any community forums
ReplyDeletethat cover the same topics talked about in this article?
I'd really like to be a part of group where I can get suggestions from other knowledgeable individuals
that share the same interest. If you have any recommendations, please let me know.
Many thanks!