Membuat Kotak "Click to Tweet" Quote di Blogger

Cara memasang kotak widget Click to Tweet quote box plugin untuk Blogger (Blogspot) agar kutipan bisa langsung dibagikan ke Twitter. Tampilan keren dan loading sangat ringan.
Cara Membuat Plugin Kotak Click to Tweet di Blogger

Widget "Click to Tweet" adalah sebuah kotak yang berisi kutipan menarik yang biasanya menjadi sorotan utama dalam paragraf. Banyak sekali website terkenal menggunakan plugin ini setiap mereka menyelipkan sepenggal kalimat keren agar bisa langsung dibagikan ke Twitter oleh pembacanya.

Awalnya saya tidak sengaja melihat box keren ini di salah satu blog berbasis WordPress. Akhirnya kepikiran mau buat versi Bloggernya. Kebetulan Twitter adalah media sosial dengan format micro blogging, jadi pas sekali dijadikan tempat berbagi quote dan kalimat-kalimat agak panjang menggunakan plugin kotak click to tweet di Blogger ini.

Click to tweet quote box Blogspot cocok digunakan untuk blog yang memiliki artikel tentang:

  1. Profil orang terkenal. Biasanya mereka mempunyai quote atau kutipan keren yang inspiratif.
  2. Berita. Untuk menyoroti headline utama.
  3. Kalimat bijak tokoh dunia.
  4. Kata-kata mutiara.
  5. Pantun.
  6. Majas.
  7. dan sebagainya. Quote box click to tweet untuk Blogger ini sangat multifungsi.

Selain untuk Blogger, ini juga bisa dipakai di WordPress. Iya, disana memang tinggal install plugin. Tapi siapa tahu ada yang malas dan mau langsung pakai tanpa ribet install apapun.

Cara Memasang Plugin "Click to Tweet" Versi Blogspot

  1. Percantik dulu tampilannya dengan menambahkan kode CSS ini DI ATAS </style> atau ]]></b:skin>. Disini saya pakai warna putih sebagai background kotaknya. Kalau kamu kurang suka bisa ganti sesuai selera masing-masing.
    /* 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;
    }
  2. Simpan dulu templatenya agar pengaturan tidak hilang.
  3. Selanjutnya tambahkan kode HTML berikut di dalam artikel. Ingat ya, ketika menulis wajib memilih mode HTML, BUKAN Compose.
    <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>
    1. Ganti tulisan yang diberi warna dengan kalimat kamu sendiri. 2. Ganti @igniel dengan username Twitter masing-masing. 3. Sebaiknya jangan pisahkan tag HTML diatas dengan diberi Enter / line baru demi mencegah ketidaksesuaian hasil akhir dengan contoh di artikel ini.

Selesai. Hasilnya akan seperti ini, coba klik kotaknya. Nanti akan otomatis muncul sebuah jendela pop-up dari box quote yang bisa dibagikan langsung ke Twitter.

Kamu bebas menggunakan dan menyalin tutorial widget box click to share Twitter versi Blogger di atas dengan syarat harus mencantumkan blog Igniel sebagai sumbernya.

9
Membuat Kotak "Click to Tweet" Quote di Blogger
Membuat Kotak "Click to Tweet" Quote di Blogger
Cara memasang kotak widget Click to Tweet quote box plugin untuk Blogger (Blogspot) agar kutipan bisa langsung dibagikan ke Twitter. Tampilan keren dan loading sangat ringan.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • X (Twitter)
  • Pinterest
  • LinkedIn

Artikel Terkait

9 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Budi Talent
    08 Juli, 2022
    Profil: https://www.blogger.com/profile/11868901239223083612
    kak, minta scriptnya untuk yg "share to facebook", yg disini kan twitter
  • bangmintauang
    14 Juni, 2020
    Profil: https://www.blogger.com/profile/00893493761651803470
    Wow kerren bang...
  • Unknown
    18 Mei, 2020
    Profil: https://www.blogger.com/profile/17826333807203196807
    Assalamualaikum,
    Kak Niel, buat tutorial dunk bagaimana cara membuat kontak fom dengan captcha dan komen yg harus masukkan captcha.
    Nyari² di blog sebelah pada gk berapa jelas tutorialnya. Beda sama disini, disini mah semua jelas.
  • Eman Mendrofa
    03 Mei, 2020
    Profil: https://www.blogger.com/profile/06704183129269603679
    Sudah dicoba dan hasilnya memuaskan,,

    btw, ganti warna tulisannya gmn y??
    • Igniel
      11 Mei, 2021
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ganti yang ini:
      color: #666666;
  • Jagoan AdSense
    01 April, 2020
    Profil: https://www.blogger.com/profile/00090329864097954389
    Sudah saya coba dan berhasil... keren mba! makasih tutorialnya :-)
  • nganu
    05 April, 2019
    Profil: https://www.blogger.com/profile/05728176809464695502
    clik to post facebook ada apa ndak mbak..,.. kalo ada pasti bakal pakai
  • feryefend
    30 Maret, 2019
    Profil: https://www.blogger.com/profile/13411138414037980398
    Bagus, wajib dicoba nih
  • Chapteria
    05 September, 2018
    Profil: https://www.blogger.com/profile/09838961540189264270
    Bookmark dulu, besok sy terapin :3