Cara Menciptakan Widget Sosial Media Counter Keren Di Blog
Kesimpulannya ialah tugas sosial media ini bisa meghapus batasan-batasan insan untuk bersosialisasi dengan sesamanya. Nah kali ini saya akan memperlihatkan tutorial bagaimana cara memasang widget sosial counter di blog, dimana widget ini nantinya akan memudahkan pengunjung untuk menfollow, subscribe, like, atau mengikuti sosial media Anda, sehingga dengan ini bisa meningkatkan jumlah visitor blog, karna pengunjung akan eksklusif tau artikel terbaru Anda saat mereka bermain sosial media, jadi pastikan fanspage Anda tetap up-to-date. Disini Anda bisa memasang beberapa sosial media ibarat facebook, twitter, whatsapp, instagram, bbm, dan lain-lainnya. Menariknya lagi Anda bisa mengecoh pengunjung dengan meningkatkan angka likes, sehingga dengan begitu pengunjung akan tertarik mengikutinya, karna dikira fanspage Anda rame. Kaprikornus untuk pemasangannya bisa eksklusif simak caranya berikut ini.
Cara Membuat Sosial Counter di Blog
1. Pertama silahkan Anda login dulu ke Blogger
2. Klik Template → Edit HTML
3. Cari kode ]]></b:skin> atau </style>
4. Kemudian Copy kode CSS dibawah ini, lalu Paste diatas atau sebelum kode ]]></b:skin> atau </style>
/* Sosial Counter */ body{ background: #e0e0e0; font-family: 'Montserrat', sans-serif; } .wrapper{ width: 330px; background: #ffffff; margin: auto; } .demo{ padding-top: 50px; } .demo > h3{ text-align: center; color: #333333; font-size: 24px; } .demo > h6{ text-align: center; color: #999999; font-size: 14px; margin: 0; } footer{ text-align:center; font-size: 12px; color: #666; padding-top: 25px; } /*== DEMO STYLING END ==*/ .social-counter{ padding: 10px; display: block; } .count{ display: block; padding: 7px 5px; text-align: left; transition: all 0.5s ease; } .count:hover{ background: rgba(0,0,0,0.033); transform: scale(1.065); } .count .icon{ background: #aaa; display: inline-block; float: left; color: white; font-size: 22px; margin-left: 5px; text-align: center; width: 45px; height: 45px; border-radius: 50%; text-shadow: 0 0 3px rgba(0,0,0,0.2); display: table; } .count .icon i{ display: table-cell; vertical-align: middle; } .count p{ display: inline-block; font-size: 13px; color: #888; margin: 11px; } .count p span{ color: black; font-size: 18px; font-weight: bold; padding-right: 2px; } .count .action-btn{ float: right; display: inline-block; background: #aaa; color: white; padding: 3px 6px; border-radius: 3px; font-size: 14px; margin: 11px; } /* COLORS */ .facebook .icon{background:#3b5999;} .facebook .action-btn{background:#3b5999;} .facebook .icon i{padding-top:2px;} .twitter .icon{background:#55acee;} .twitter .action-btn{background:#55acee;} .twitter .icon i{padding-top:2px;} .youtube .icon{background:#cd201f;} .youtube .action-btn{background:#cd201f;} .youtube .icon i{font-size:24px} .google-plus .icon{background:#dd4b39;} .google-plus .action-btn{background:#dd4b39;} .google-plus .icon i{font-size: 18px; padding-top: 1px;} .instagram .icon{background:#e4405f;} .instagram .action-btn{background:#e4405f;} .rss .icon{background:#f57d00;} .rss .action-btn{background:#f57d00;} .social-counter-2 .linkedin, .linkedin .icon,.linkedin .action-btn{background:#0077B5} .social-counter-2 .vimeo, .vimeo .icon,.vimeo .action-btn{background:#1ab7ea} .social-counter-2 .vk, .vk .icon,.vk .action-btn{background:#4c75a3} .social-counter-2 .tumblr, .tumblr .icon,.tumblr .action-btn{background:#34465d} .social-counter-2 .pinterest, .pinterest .icon,.pinterest .action-btn{background:#bd081c} .social-counter-2 .stumbleupon, .stumbleupon .icon,.stumbleupon .action-btn{background:#eb4924} .social-counter-2 .reddit, .reddit .icon,.reddit .action-btn{background:#ff5700} .social-counter-2 .yelp, .yelp .icon,.yelp .action-btn{background:#af0606} .social-counter-2 .weibo, .weibo .icon,.weibo .action-btn{background:#df2029} .social-counter-2 .producthunt, .producthunt .icon,.producthunt .action-btn{background:#da552f} .social-counter-2 .whatsapp, .whatsapp .icon,.whatsapp .action-btn{background:#25D366} .social-counter-2 .vine, .vine .icon,.vine .action-btn{background:#00b489} .social-counter-2 .slack, .slack .icon,.slack .action-btn{background:#3aaf85} .social-counter-2 .dribbble, .dribbble .icon,.dribbble .action-btn{background:#ea4c89} .social-counter-2 .flickr, .flickr .icon,.flickr .action-btn{background:#ff0084} .social-counter-2 .behance, .behance .icon,.behance .action-btn{background:#131418} .behance .icon i{font-size:18px;} .social-counter-2 .foursquare, .foursquare .icon,.foursquare .action-btn{background:#f94877} .social-counter-2 .snapchat, .snapchat .icon,.snapchat .action-btn{background:#FFFC00} .snapchat .icon i{font-size:24px;text-shadow: -1px 0 black,0 -1px black, 1px 0 black, 0 1px black} .snapchat .action-btn{text-shadow: 0 0 1px black} 5. Setelah Simpan atau Save Templatenya
6. Selanjutnya silahkan Anda pergi ke sajian "Tata Letak atau Layout" kemudian pilih Add a Gadget/ Tambahkan Gadget, kemudian pasang di mana saja yang Anda suka.
6. Nanti akan muncul pop-up browser, sesudah itu pilih HTML/Javascript
7. Setelah itu masukan instruksi dibawah ini di kolom HTML/Javascript.
<!-- SOCIAL COUNTER START --> <div class="social-counter"> <a class="count facebook" href="#"> <div class="icon"><i class="fa fa-facebook"></i></div> <p><span>34.2k</span> likes</p> <p class="action-btn">Like</p> </a> <a class="count linkedin" href="#"> <div class="icon"><i class="fa fa-linkedin"></i></div> <p><span>34.2k</span> likes</p> <p class="action-btn">Like</p> </a> <a class="count vimeo" href="#"> <div class="icon"><i class="fa fa-vimeo"></i></div> <p><span>34.2k</span> likes</p> <p class="action-btn">Like</p> </a> <a class="count vk" href="#"> <div class="icon"><i class="fa fa-vk"></i></div> <p><span>34.2k</span> likes</p> <p class="action-btn">Like</p> </a> <a class="count tumblr" href="#"> <div class="icon"><i class="fa fa-tumblr"></i></div> <p><span>34.2k</span> likes</p> <p class="action-btn">Like</p> </a> <a class="count pinterest" href="#"> <div class="icon"><i class="fa fa-pinterest"></i></div> <p><span>34.2k</span> likes</p> <p class="action-btn">Like</p> </a> <a class="count stumbleupon" href="#"> <div class="icon"><i class="fa fa-stumbleupon"></i></div> <p><span>34.2k</span> likes</p> <p class="action-btn">Like</p> </a> <a class="count reddit" href="#"> <div class="icon"><i class="fa fa-reddit"></i></div> <p><span>34.2k</span> likes</p> <p class="action-btn">Like</p> </a> <a class="count yelp" href="#"> <div class="icon"><i class="fa fa-yelp"></i></div> <p><span>34.2k</span> likes</p> <p class="action-btn">Like</p> </a> <a class="count weibo" href="#"> <div class="icon"><i class="fa fa-weibo"></i></div> <p><span>34.2k</span> likes</p> <p class="action-btn">Like</p> </a> <a class="count producthunt" href="#"> <div class="icon"><i class="fa fa-product-hunt"></i></div> <p><span>34.2k</span> likes</p> <p class="action-btn">Like</p> </a> <a class="count whatsapp" href="#"> <div class="icon"><i class="fa fa-whatsapp"></i></div> <p><span>34.2k</span> likes</p> <p class="action-btn">Like</p> </a> <a class="count vine" href="#"> <div class="icon"><i class="fa fa-vine"></i></div> <p><span>34.2k</span> likes</p> <p class="action-btn">Like</p> </a> <a class="count slack" href="#"> <div class="icon"><i class="fa fa-slack"></i></div> <p><span>34.2k</span> likes</p> <p class="action-btn">Like</p> </a> <a class="count dribbble" href="#"> <div class="icon"><i class="fa fa-dribbble"></i></div> <p><span>34.2k</span> likes</p> <p class="action-btn">Like</p> </a> <a class="count flickr" href="#"> <div class="icon"><i class="fa fa-flickr"></i></div> <p><span>34.2k</span> likes</p> <p class="action-btn">Like</p> </a> <a class="count foursquare" href="#"> <div class="icon"><i class="fa fa-foursquare"></i></div> <p><span>34.2k</span> likes</p> <p class="action-btn">Like</p> </a> <a class="count behance" href="#"> <div class="icon"><i class="fa fa-behance"></i></div> <p><span>34.2k</span> likes</p> <p class="action-btn">Like</p> </a> <a class="count snapchat" href="#"> <div class="icon"><i class="fa fa-snapchat-ghost"></i></div> <p><span>34.2k</span> likes</p> <p class="action-btn">Like</p> </a> <!-- TWITTER --> <a class="count twitter" href="#"> <div class="icon"><i class="fa fa-twitter"></i></div> <p><span>28.6k</span> followers</p> <p class="action-btn">Follow</p> </a> <!-- YOUTUBE --> <a class="count youtube" href="#"> <div class="icon"><i class="fa fa-youtube"></i></div> <p><span>8.6k</span> subscribers</p> <p class="action-btn">Subscribe</p> </a> <!-- GOOGLE PLUS --> <a class="count google-plus" href="#"> <div class="icon"><i class="fa fa-google-plus"></i></div> <p><span>17.3k</span> followers</p> <p class="action-btn">+1</p> </a> <!-- INSTAGRAM --> <a class="count instagram" href="#"> <div class="icon"><i class="fa fa-instagram"></i></div> <p><span>23.8k</span> followers</p> <p class="action-btn">Follow</p> </a> <!-- RSS FEED --> <a class="count rss" href="#"> <div class="icon"><i class="fa fa-rss"></i></div> <p><span>7.13k</span> subs</p> <p class="action-btn">Subscribe</p> </a> </div> <!-- SOCIAL COUNTER END --> - [message]
- ##check## Perhatian!!!
- Setelah itu ganti simbol # ini dengan link sosial media Anda, pastikan sesuai dengan instruksi sosial counternya, selain itu Anda juga bisa mengganti Angka jumlah like yang ditandai warna kuning sesuka hati. Dan kalau ada sosial counter yang tidak ingin Anda pasang silahkan saja hapus dari kode <a sampai kode </a>
8. Setelah itu Simpan/Save widgetnya, dan lihat hasilnya.
Nah itulah langkah singkat pemasangan counter sosial media di blog, dimana dengan pembuatan ini, bisa meningkatkan jumlah like fanspage Anda. Sekian dulu dari artikel kali ini kalau ada yang ingin Anda tanyakan atau tidak di mengerti silahkan komentar dibawah ini terima kasih.
