Cara Membuat Plugin Kotak Click to Tweet di Postingan Blogger Cara Buat Blog- Membuat Kotak Click to Tweet Quote di Dalam Postingan Blogger

Widget "Click to Tweet" yaitu sebuah kotak yang berisi kutipan menarik yang biasanya menjadi sorotan utama dalam paragraf. Banyak sekali website populer memakai plugin ini setiap mereka menyelipkan sepenggal kalimat keren semoga dapat pribadi dibagikan ke Twitter oleh pembacanya.

Awalya saya tidak sengaja melihat box keren ini di salah satu blog berbasis WordPress. Akhirnya kepikiran mau buat versi Bloggernya. Kebetulan Twitter yaitu media umum dengan format micro blogging, jadi pas sekali dijadikan daerah membuatkan quote dan kalimat-kalimat agak panjang memakai plugin kotak click to tweet di Blogger ini.

Click to tweet quote box cocok digunakan untuk blog yang mempunyai 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 dapat digunakan di WordPress. Iya, disana memang tinggal install plugin. Tapi siapa tahu ada yang malas dan mau pribadi pakai tanpa ribet install apapun.

Cara Memasang Plugin Kotak Click to Tweet di Blogger

1. Percantik dulu tampilannya dengan menambahkan arahan CSS ini "SEBELUM / DI ATAS" </style>. Disini saya pakai warna putih sebagai background kotaknya. Kalau kau kurang suka dapat 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 semoga pengaturan tidak hilang.
3. Selanjutnya tambahkan arahan HTML berikut di dalam artikel. Ingat ya, dikala menulis wajib menentukan 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="Cara Buat Blog- Membuat Kotak Click to Tweet Quote di Dalam Postingan Blogger">Social media marketing, social media optimization, blogger tutorial for beginners. Stimulate your passion! #Nganggurpreneur</a></div>

1. Ganti goresan pena yang diberi warna dengan kalimat kau sendiri.
2. Ganti @igniel dengan username Twitter masing-masing.
3. Sebaiknya jangan pisahkan tag HTML diatas dengan diberi Enter / line gres demi mencegah ketidaksesuaian hasil final dengan pola di artikel ini.


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



Selesai. Kamu bebas memakai dan menyalin tutorial widget box click to share Twitter di dalam postingan Blogger diatas dengan syarat harus mencantumkan blog Carabuatblogitu sebagai sumbernya.
Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours