Cara Membuat Satu Widget Untuk Banyak Sosial Media

Memperhatikan kepuasan pengunjung adalah salah satu kewajiban bagi pengelola sebuah situs web atau blog. Cara membuat banyak tombol sosmed di satu widget pada blog. Jika kita ingin mendapatkan banyak pengunjung ke blog, salah satu cara adalah membagikan artikel yang baru kita publikasi ke media sosial seperti Facebook, twitter, google plus dan lain-lain. Penempatan tombol-tombol sosmed di blog ini juga sangat penting, agar pengunjung dapat langsung menemukan dan bergabung dengan kita. Namun, saya peribadi menyukai jika widget nya di gabung satu widget saja, agar mereka langsung dapat mengikuti semua sosmed kita.

Widget yang saya buat ini sangatlah sederhana, namun sobat juga dapat mendesainnya kembali jika memang ingin menyesuaikan dengan template masing-masing, dapat sobat lihat pada gambar diatas, saya menggabungkan semua sosial media yang saya gunakan kedalam satu widget.

1. Memasang JavaScript Ke Template

Baiknya, yang pertama sobat lakukan adalah memasang JavaScript Facebook, Twitter dan Google ke template. Copy semua kode dibawah ini di atas </body> . Perlu diperhatikan jika sudah ada JavaScript nya di template masing-masing, sobat tidak perlu lagi meng-copy kode ini.

Letakkan diatas </body>

1. <!--JavaScript Facebook -->  
2. <div id="fb-root"></div>    
3. <script>//<![CDATA[   
4. (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v2.8&appId=345654185818007"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));//]]></script>   
5.   
6. <!--JavaScript Twitter -->  
7. <script>window.twttr = (function(d, s, id) {    
8.   var js, fjs = d.getElementsByTagName(s)[0],    
9.     t = window.twttr || {};    
10.   if (d.getElementById(id)) return t;    
11.   js = d.createElement(s);    
12.   js.id = id;    
13.   js.src = "https://platform.twitter.com/widgets.js";    
14.   fjs.parentNode.insertBefore(js, fjs);    
15.     
16.   t._e = [];    
17.   t.ready = function(f) {    
18.     t._e.push(f);    
19.   };    
20.     
21.   return t;    
22. }(document, "script", "twitter-wjs"));</script>    
23.   
24. <!--JavaScript Google-->  
25. <script src="https://apis.google.com/js/platform.js">  
26.   {lang: 'id'}  
27. </script>  
28. <script type="text/javascript" src="https://apis.google.com/js/plusone.js">  
29. {lang: 'id'}  
30. </script>  

2. Membuat CSS Untuk Box Widget Blog

Kita akan membuat CSS sederhana untuk menempatkan semua sosmed nantinya. Silahkan masuk ke Blogger dan cari ]]></b:skin> Letakkan kode dibawah ini sebelum ]]></b:skin>.

CSS Widget Sosmed

1. <!--created by Doni Juliansa www.info4you.my.id-->  
2. <!--start widget box semua sosmed-->  
3. .box-smed {  
4. width:100%;  
5. border: 1px solid #ccc;  
6. background: none;  
7. }  
8. .smed-fb {  
9. border-bottom: 1px dotted #ccc;  
10. padding-bottom: 6px;  
11. }  
12. .smed-tw {  
13. border-bottom: 1px dotted #ccc;  
14. padding: 8px 0 8px 4px;  
15. display:block;  
16. }  
17. .smed-rgplus {  
18. padding: 8px 0 8px 4px;  
19. display:block;  
20.   
21. }  
22. .smed-gplus {  
23. padding: 8px 0 6px 4px;  
24. display:block;  
25. background: #fdfdfd;  
26. border-bottom: 1px dotted #ccc;  
27. }  
28. <!--End widget box semua sosmed-->  

Keterangan: class box-smed adalah box yang menampung semua sosmed, silahkan hapus border jika tidak widget template sobat tidak menggunakan border (garis pembatas widget).

Class smed-fb adalah box untuk menampung Widget Fanspage, class smed-tw adalah untuk Twitter, class smed-rgplus adalah untuk tombol Rekomendasi ke Google, class smed-gplus adalah tombol follow Google Plus.

Jika sobat merasa latar belakang nya terlalu sederhana dan ingin mengubah dengan warna lain, silahkan ganti pada background atau ditambahkan sendiri properti background pada class yang tidak memiliki warna latar seperti class smed-rgplus dan smed-tw. Garis pembatas bawah (border-bottom) saya menggunakan style dotted (garis putus-putus), jika ingin garis normal silahkan di ganti menjadi solid.

Masih bingung dengan properti-properti CSS?
Silahkan jalan-jalan ke artikel

Mengenal Properti CSS Margin,Padding,Color,Background,Border Dan Penerapanya

3. Membuat HTML

Selanjutnya, kita akan membuat HTML untuk menampilkan widget nya di blog.
#1 Masuk ke Blogger
#2 Pada Tata Letak, silahkan Tambahkan Gadget dan pilih gadget HTML/JavaScript
#3 Silahkan berikan judul widget atau kosongkan saja. Paste kode dibawah ini di dalam kotak di bawahnya, lalu Simpan.

1. <div class="box-smed">  
2.   
3. <div class="fb-page smed-fb"    
4.  data-href="https://www.facebook.com/info4youmyid"    
5.  data-small-header="true"    
6.  data-adapt-container-width="true"    
7.  data-hide-cover="false"    
8.  data-show-facepile="true">     
9. </div>  
10.   
11. <div class="smed-tw">  
12. <a class="twitter-follow-button"    
13.    href="https://twitter.com/info4youmyid">    
14. </a><br />  
15. <a href="https://twitter.com/messages/compose    
16.    ?recipient_id=2322338384"    
17.    class="twitter-dm-button"    
18.    data-screen-name="@info4youmyid">    
19. Message @info4youmyid</a>  
20. </div>  
21.   
22. <div class="smed-gplus">  
23. <div class="g-follow" data-annotation="bubble" data-height="24" data-href="//plus.google.com/116240272219366125714" data-rel="author"></div>  
24. </div>  
25.   
26. <div class="smed-rgplus">  
27. <div class="g-plusone" data-size="tall" data-annotation="inline" data-width="450"></div>  
28. </div>  
29.   
30. </div>  

Silahkan ganti yang berlatar belakang warna kuning tersebut dengan Url atau ID sosmed masing-masing. Cara mengetahui ID Google Plus, silahkan sobat ketikkan di browser masing-masing atau langsung klik link ini plus.google.com/me di akhir Url nantinya akan berubah ke ID Google Plus masing-masing (harus login akun Google terlebih dahulu)

Untuk Mengetahui ID Twitter Silahkan Baca
Cara Mudah Membuat Tombol Follow, Messages dan Tweet Twitter Tampil Di Blog

Ketahui Juga Properti-Properti Widget Facebook Pada Artikel
Memasang Widget Fanspage Facebook Ke Blog

Sobat juga bisa menambahkan tombol subscribe youtube dengan menambahkan HTML nya, menggunakan CSS yang sudah ada juga tidak masalah. Jadi, sekian artikel kita kali ini, semoga dapat bermanfaat dan membantu sobat sekalian. Sampai jumpa.

Info4You Info4You Update Pada: February 28, 2017