Cara Memasang Click To Tweet Box di Blog

Cara Memasang Click To Tweet Box di Blog - Saat membaca artikel di internet, mungkin Anda pernah melihat kotak yang berisi kutipan menarik dari Twitter dengan fungsi click to tweet. Fungsi tersebut berguna untuk mengalihkan pembaca untuk melakukan retweet.

Plugin ini banyak digunakan oleh website besar nasional maupun internasional untuk memberikan kesan menarik pada tulisan. Pengguna bisa menyisipkan quote yang sekiranya menarik dan bisa menghibur orang lain. Nah bagi yang penasaran dengan tampilannya, silahkan menekan tombol demo berikut:

Demo

Untuk cara penggunaannya, yang dibutuhkan hanyalah akun Twitter dan juga script pendukung. Tapi tenang saja, script yang digunakan hanyalah HTML dan CSS agar tidak terlalu memberatkan loading blog.

Cara Memasang Click To Tweet Box di Blog

• Masuk ke BLOGGER
• Pilih menu TEMA
• Pilih EDIT HTML
• Tempel di atas ]]></b:skin>:

/* Click To Tweet by www.ferisp.com */
.twitterQuote{display:block;position:relative;background:#fcfcfc;font-family:"Noto Sans",sans-serif;margin:15px 0;padding:15px 30px;border:1px solid #ddd;border-radius:6px;cursor:pointer}
.twitterQuote a.twitterLink{display:block;color:#666;font-size:24px;letter-spacing:.8px;line-height:140%;text-decoration:none}
.twitterQuote a.twitterLink:hover,.twitterQuote:hover a:after{color:#666;text-decoration:none}
.twitterQuote a.twitterLink:after{content:"CLICK TO TWEET";display:block;position:relative;color:#999;margin-top:20px;padding-right:25px;font-size:12px;text-align:right;text-decoration:none;line-height:20px;transition:all 0.5s ease;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}
/* Dark Mode */
.drK .twitterQuote{background:#252526;border-color:#252526}
.drK .twitterQuote a{color:#fffeff}

• Pilih SIMPAN
• Silahkan memilih tulisan yang ingin disisipkan widget. Setelah itu, tempel ke dalamnya (mode HTML):

<div class="twitterQuote">
  <a class="twitterLink" onclick="window.open(&quot;https://twitter.com/intent/tweet?text=&quot;+encodeURIComponent(this.innerText)+&quot; - by @ferisprayuda &quot;,&quot;toolbar=0,status=0,width=626,height=436&quot;);return false" rel="nofollow noopener noreferrer">The key to success is effort, hard work, and prayer. Avoid being lazy.</a>
</div>

• Pilih PUBLIKASIKAN / PERBARUI
• Selesai.

Penutup

Pada dasarnya, widget ini merupakan blockquote yang ditambahi fitur tweet langsung. Secara tidak langsung, tweet box ini dapat meningkatkan visitor blog khususnya dari pengguna Twitter.

Rekomendasi:

• Cara Memasang Tools Parse Script di Blog
• Cara Memasang Tools Word Counter di Blog
• 14 Langkah Membuat Blog di Blogger (Wajib Tahu)

Cukup sekian artikel tentang Cara Memasang Click To Tweet Box di Blog ini, Terima kasih.