Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogspot / Widget

Cara Memasang Widget Sosial Counter Di Blog

Sebelumnya saya sudah menunjukkan tutorial menciptakan Sosial Media Counter Keren di Blog, hanya saja kali ini widgetnya counter medianya lebih menarik karna akan berbentuk 2 kolom dan tidak terlalu panjang kebawah. Manusia di zaman modern ini kebanyakan tidak sanggup lepas akan peran sosial media, hal ini terjadi karna  media online memakai teknologi berbasis web yang mengubah komunikasi menjadi obrolan interaktif  sehingga memungkinkan orang-orang sanggup melakukan interaksi sosial tanpa batasan dan waktu. Peran sosial media terhadap situs atau website sendiri sangat penting sekali, karna banyak dari mereka memanfaatkan trafik situs webnya dari platform sosial media yang ada dikala ini. Nah untuk Anda yang mempunyai fanspage (fp) namun masih sepi jumlah like, sanggup memanfaatkan widget Counter Strike ini untuk meningkatkan jumlah like fp Anda, dimana ini nantinya berfungsi juga untuk meningkatkan visitor blog atau situs Anda, karna dengan fanspage Anda sanggup memberitahukan kepada pengikut wacana artikel atau postingan terbaru Anda. Karna menyerupai yang telah kita ketahui bahwasanya widget sosial counter mempunyai fungsi memudahkan pengunjung untuk menfollow, subscribe, like, atau mengikuti sosial media Anda. Lantas bagaimana pembuatannya, yuk simak aja tutorialnya berikut.

Cara Membuat Widget Sosial Counter di Blog
1. Untuk langkah pertama silahkan Anda terlebih dahulu Log in ke Blogger
2. Kemudian klik Template → Edit HTML
3. Setelah itu cari kode ]]></b:skin> atau </style>
4.  Lalu Copy kode CSS berikut lalu Paste diatas atau sebelum kode ]]></b:skin> atau </style>

 /* Social Counter*/ li.social_item-wrapper { float: left; width: 48%; text-align: center; margin-right: 4% !important; margin-bottom: 10px !important; color: #fff; } #sidebar .widget { margin-bottom: 35px; } a.social_item { position: relative; display: block; height: 60px; line-height: 60px; overflow: hidden; } .social_item-wrapper:nth-child(2n+2) { margin-right: 0 !important; } .social_icon { float: left; line-height: 60px; width: 41px; font-size: 1.3rem; } a.social_item.social_facebook { background: #3F5B9B; } .fa-facebook.social_icon { background: #2E4372; } li.social_item-wrapper:hover .fa-facebook.social_icon { background: #3F5B9B; } li.social_item-wrapper:hover .social_facebook { background: #2E4372; } a.social_item.social_twitter { background: #1C97DE; } .fa-twitter.social_icon { background: #1571A5; } li.social_item-wrapper:hover .fa-twitter.social_icon { background: #1C97DE; } li.social_item-wrapper:hover .social_twitter { background: #1571A5; } a.social_item.social_youtube { background: #E22020; } .fa-youtube.social_icon { background: #B31919; } li.social_item-wrapper:hover .fa-youtube.social_icon { background: #E22020; } li.social_item-wrapper:hover .social_youtube { background: #B31919; } a.social_item.social_dribbble { background: #E82159; } .fa-dribbble.social_icon { background: #B51A45; } li.social_item-wrapper:hover .fa-dribbble.social_icon { background: #E82159; } li.social_item-wrapper:hover .social_dribbble { background: #B51A45; } a.social_item.social_rss { background: #E86321; } .fa-rss.social_icon { background: #C2521B; } li.social_item-wrapper:hover .fa-rss.social_icon { background: #E86321; } li.social_item-wrapper:hover .social_rss { background: #C2521B; } a.social_item.social_google-plus { background: #E82C2C; } .fa-google-plus.social_icon { background: #BF2424; } li.social_item-wrapper:hover .fa-google-plus.social_icon { background: #E82C2C; } li.social_item-wrapper:hover .social_google-plus { background: #BF2424; } a.social_item.social_linkedin { background: #0275B6; } .fa-linkedin.social_icon { background: #02669E; } li.social_item-wrapper:hover .fa-linkedin.social_icon { background: #0275B6; } li.social_item-wrapper:hover .social_linkedin { background: #02669E; } a.social_item.social_instagram { background: #8E714D; } .fa-instagram.social_icon { background: #6F583C; } li.social_item-wrapper:hover .fa-instagram.social_icon { background: #8E714D; } li.social_item-wrapper:hover .social_instagram { background: #6F583C; } a.social_item.social_pinterest { background: #CA2027; } .fa-pinterest.social_icon { background: #AB1B21; } li.social_item-wrapper:hover .fa-pinterest.social_icon { background: #CA2027; } li.social_item-wrapper:hover social_pinterest { background: #AB1B21; } ul.social-counter a { color: #fff; }

5. Selanjutnya silahkan Anda Simpan atau Save Templatenya
6. Langkah berikutnya, pergi ke sajian "Tata Letak atau Layout" kemudian pilih Add a Gadget/ Tambahkan Gadget, silahkan Anda pasang di daerah mana saja yang Anda sukai.
6. Nah nanti akan muncul pop-up di browser, kemudian pilih saja HTML/Javascript
7. Setelah itu letakan isyarat berikut ini di kolom HTML/Javascript yang tersedia.

 <div class="socialcounter"> <ul class="social-counter"> <li class="social_item-wrapper"> <a href="#" class="social_item social_facebook"><i class="fa fa-facebook social_icon"></i><span class="social_num">230,000</span></a></li><li class="social_item-wrapper"> <a href="#" class="social_item social_twitter"><i class="fa fa-twitter social_icon"></i><span class="social_num">230,000</span></a></li> <li class="social_item-wrapper"> <a href="#" class="social_item social_youtube"><i class="fa fa-youtube social_icon"></i><span class="social_num">230,000</span></a></li> <li class="social_item-wrapper"> <a href="#" class="social_item social_dribbble"><i class="fa fa-dribbble social_icon"></i><span class="social_num">230,000</span></a></li> <li class="social_item-wrapper"> <a href="#" class="social_item social_rss"><i class="fa fa-rss social_icon"></i><span class="social_num">230,000</span></a></li> <li class="social_item-wrapper"> <a href="#" class="social_item social_google-plus"><i class="fa fa-google-plus social_icon"></i><span class="social_num">230,000</span></a></li> <li class="social_item-wrapper"> <a href="#" class="social_item social_linkedin"><i class="fa fa-linkedin social_icon"></i><span class="social_num">230,000</span></a></li> <li class="social_item-wrapper"> <a href="#" class="social_item social_instagram"><i class="fa fa-instagram social_icon"></i><span class="social_num">230,000</span></a></li></ul></div>
Jangan lupa silahkan Anda ganti simbol # ini dengan link sosial media yang Anda miliki, pastikan link sesuai dengan isyarat sosial media yang tertera. Selain itu disini Anda juga mengubah Angka jumlah like yang ditandai warna merah sesuai cita-cita dan selera Anda.  
8. Langkah terakhir Simpan/Save widgetnya, dan cek hasilnya.
[Preview ##eye##]

Nah itulah langkah singkat memasang widget social counter di blog, dimana counter sosial ini juga mempunyai tampilan yang menarik, keren, 2 kolom, dan sanggup Anda atur jumlah likenya untuk memanipulasi pengunjung. Sekian dulu artikel kali ini kalau ada yang ingin Anda tanyakan atau ingin menambahkan silahkan komentar dibawah ini terima kasih.