Membuat widget “Click to Tweet” Quote di Postingan Blogger / blogspot

Jika kamu sudah biasa bermain twitter , mungkin tidak asing lagi dengan yang namanya kata-kata mutiara , kata-kata bijak , dll . ia sih tidak hanya di twitter saja hal tersebut bisa kita temukan , tapi banyak yang beranggapan twitter menjadi tempat yang baik untuk menggungkapkan kata-kata yang indah , tak lain dikarenakan jumlah character yang harus kita posting sangatlah terbatas atau sedikit , jadi tak heran kata-kata bijak yang singkat sering sekali di posting di twitter .

adakalahnya saat kita melihat tweet atau postingan di twitter yang cukup menarik , menjadi salah satu bahan yang baik untuk kita gunakan juga diblog kita dikalah kita saat menulis , kadang kata-kata tersebut kita gunakan untuk memotivasi pembaca atau bahkan sebagai sumber refrensi .

ada salah satu aplikasi atau fiture yang bisa kita gunakan untuk mempermudah kita menempatkan suatu tweet ke blog atau website kita yaitu dengan “click to tweet” widget ini pertama kali saya tau saat saya menggunakan wordpress dan saya juga baru tau dari postingan igniel tentang Click to tweet dan ternyata keren juga kalau digunakan di blogger atau blogspot , jadi sedikit berbagi saya mau memberikan tutorial ke teman-teman bagaimana cara Membuat widget “Click to Tweet” Quote di Postingan Blogger / blogspot .

Apa itu Click to Tweet ?

Click to Tweet adalah Fiture yang memungkinkan Anda untuk memilih apa yang Anda inginkan dan membuatnya sangat nyaman bagi orang untuk membagikannya dari twitter. Ketika Anda mengedit atau membuat posting blog menggunakan plugin Click to Tweet WordPress, Anda kemudian dapat memilih teks apa pun yang Anda inginkan sebagai pesan Twitter.

Bagaimana Pengunaan Click to Tweet ?

seperti admin idetips.com yang jelaskan sebelumnya bahwa Click to Tweet ini sangat cocok digunakan untuk kita menaruh kata-kata bijak atau motivasi di blog kita , ada beberapa hal yang bisa kita masukkan / gunakan :
Kalimat / kata bijak , motivasi , lucu .
Sumber refresi yang kita gunakan dalam post.
Pantun , majas , puisi singkat.
dan lain-lain.

Cara memasang widget Kotak Click to Tweet di Blogger

Cukup mudah menggunakanya , ikuti saja langkah dibawah .

1.saya menyarankan anda untuk menggunakan CSS dibawah ini , fungsinya yaitu untuk mempercantik tampilan dari box atau kotak “Click To Tweet” .
Copy dan paste CSS dibawah ini sebelum code </style> atau ]]></b:skin>

/* Click to Tweet Quote Box for Blogger by igniel.com */
.ignielQuoteTwitter {
  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;
}
.ignielQuoteTwitter a {
  display: block;
  text-decoration: none;
  text-transform: none;
  color: #666666;
  cursor: pointer;
  font-size: 24px;
  line-height: 140%;
  letter-spacing: 0.05em;
}
.ignielQuoteTwitter a:hover, .ignielQuoteTwitter:hover a:after{
  text-decoration: none;
  color: #666666;
}
.ignielQuoteTwitter 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;
}

.ignielQuoteTwitter 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;
}

langsung simpan / save.

2.selanjutnya kita masuk ke postingan yang akan anda masukkan kotak atau widget Click to tweet ,
copy dan paste code HTML dibawah ke dalam postingan anda .

<div class=”ignielQuoteTwitter”><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: @igniel &quot;, &quot;sharer&quot;, &quot; toolbar=0, status=0, width=626, height=436&quot;); return false;” rel=”nofollow” title=”Share to Twitter”>Social media marketing, social media optimization, blogger tutorial for beginners. Stimulate your passion! #Nganggurpreneur</a></div>

note : pastikan anda copy dan paste atau menulis postingan pada mode HTML bukan compose .

keterangan :
– Ganti “kata-kata anda disini” dengan kalimat atau kata-kata anda sendiri .
– ganti @idetips dengan username twitter.

3.terakhir , silahkan publikasikan postingan anda dan lihat hasilnya .

jadi begitulah tutorial bagaimana Membuat widget “Click to Tweet” Quote di Postingan Blogger / blogspot , silahkan kamu coba di blog kamu masing – masing .

RESULT / DEMO

Leave a Reply

Your email address will not be published. Required fields are marked *