Birthday

July 14, 2012 is TipRicks's Birthday, Please Prepare and Send Good Wishes to its team!

UnderStood
TipRicks is under maintenance! If you found any error please let us know. Contact Us ×

Hello!

Click one of our representatives below to chat on WhatsApp

Support Customer Service Center
+923084774257
You can also send us an email to support@tipricks.com
Hello! What can I do for you?
×
How can I help you?

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

SHARE:

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.

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




Was this article helpful?

Thanks! Your feedback will help us to improve our Services.

COMMENTS

BLOGGER: 2
  1. An outstanding share! I have just forwarded this onto
    a 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.

    ReplyDelete
  2. Excellent blog you have here but I was curious if you knew of any community forums
    that 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!

    ReplyDelete

Need help? Contact to our support center at +92 308 477 4257
Name

Agriculture PPT Templates,2,AI Tools,1,Amazon,1,AskTipRicks,9,Blogger,48,Blogger-SEO,6,Blogger-Templates,1,Blogger-Tutorials,32,Blogger-Widgets,11,Blogging-Tips,7,Books,1,Business,1,Computer PPT Templates,1,Computer-Tutorials,1,Creative-PowerPoint-Templates,2,Digital Marketing,1,Domain,1,Ecommerce,1,Facebook,4,Free-Mobile-Data,1,Freenom,1,General,7,Google-Adsense,4,Google-Analytics,2,Google-Classroom,3,Instagram,2,Internet,1,Interviews,1,Islamic PPT Templates,1,jQuery,1,Marketing,1,Medical PPT Templates,1,Microsoft-Word,3,Mobile-Marketing,1,Motivation,1,MS Word,1,News,25,News-Updates,26,Oppo-Mobile-Features,1,PDF,1,PowerPoint-Templates,7,Resume-Templates,2,Reviews,3,SEO,8,Social-Media,6,Tech-News,15,TrueCaller,1,Twitter,1,Videos,24,Vlogging,1,Web-Hosting,1,Whatsapp,3,WordPress,8,WordPress-SEO,1,WordPress-Themes,1,WordPress-Tutorials,4,Youtube,5,
ltr
item
TipRicks Blog: Make a "Click to Tweet" Quote Box on Blogger (BlogSpot)
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.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzEHudCdJVqGNurbpCiEfllWcLxY5BAXzIh9BqAGyryKckE0GkzMTilc32QI5_VwYU8WfPd-qS25rFB9btavFPlr4d8IdUAcwQtDXRkGoo-QkUvrDJaNhO3lNw6G6oWAUyET51ifgocEdJ/s320/make-a-click-to-tweet-quote-box-on-blogger.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzEHudCdJVqGNurbpCiEfllWcLxY5BAXzIh9BqAGyryKckE0GkzMTilc32QI5_VwYU8WfPd-qS25rFB9btavFPlr4d8IdUAcwQtDXRkGoo-QkUvrDJaNhO3lNw6G6oWAUyET51ifgocEdJ/s72-c/make-a-click-to-tweet-quote-box-on-blogger.jpg
TipRicks Blog
https://blog.tipricks.com/2020/05/make-click-to-tweet-quote-box-on-blogger-blogspot.html
https://blog.tipricks.com/
https://blog.tipricks.com/
https://blog.tipricks.com/2020/05/make-click-to-tweet-quote-box-on-blogger-blogspot.html
true
7070217950916442682
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy