Welcome to www.winkamaru.com

Cara Memasang Fitur 'Click To Tweet' di Blogger


Fitur Click to tweet adalah salah satu fitur menarik dan cukup keren untuk dipasang di blog dikarenakan fitur ini bermanfaat untuk membingkai quote menarik di dalam postingan blog. Kurang lebih kotak click to tweet ini akan tampak seperti gambar di bawah ini:

Widget ini sangat cocok digunakan pada blog yang membagikan:

  1. Informasi orang terkenal (biodata) biasanya ada quote menarik yang bisa dimasukkan dalam kotak click to tweet.
  2. Membingkai kalimat-kalimat bijak tokoh dunia
  3. kata-kata mutiara, dll.

So jika Anda tertarik memasang fitur click to tweet ini di blog Anda. Maka silakan ikuti ulasan saya di bawah ini:

Cara Memasang Click to Tweet di Blogger

Langkah 1
Pertama silakan simpan kode berikut ini, tepat di atas kode </style> di dalam template blog Anda.

 /* Click To Tweet */    
  .matahayaQuoteTwitter {    
  background-color: #fff; /* Warna background */    
  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;    
  }    
  .matahayaQuoteTwitter a {    
  display: block;    
  text-decoration: none;    
  text-transform: none;    
  color: #666666;    
  cursor: pointer;    
  font-size: 24px;    
  line-height: 140%;    
  letter-spacing: 0.05em;    
  }    
  .matahayaQuoteTwitter a:hover, .matahayaQuoteTwitter:hover a:after{    
  text-decoration: none;    
  color: #666666;    
  }    
  .matahayaQuoteTwitter a:before {    
  content: '';    
  display: inline-block;    
  width: 43px;    
  height: 43px;    
  vertical-align: bottom;    
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='https://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;    
  }    
  .matahayaQuoteTwitter 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;    
  }    

Langkah 2
Selanjutnya setiap kali akan memposting sebuah quote di dalam postingan blog Anda. Silakan menggunakan kode di bawah ini melalui posting mode HTML.

 <div class="matahayaQuoteTwitter"><a href="https://draft.blogger.com/null" 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: @username_twitter &quot;, &quot;sharer&quot;, &quot; toolbar=0, status=0, width=626, height=436&quot;); return false;" rel="nofollow" title="Share to Twitter">Ganti kutipan ini dengan kutipan yang Anda inginkan...</a></div>  

Penting!
  • Silakan ganti "@username_twitter" di dalam kode di atas dengan username akun twitter Anda.
  • Ganti Kalimat Kutipan di atas dengan kalimat yang anda inginkan.
  • Posting kode "Click to Tweet" di blogger harus melalui mode HTML bukan mode compose.

Sekian semoga bermanfaat.