4 Top Widget Tombol Follow Social Media Untuk Blogger
HTML/JavaScriptVersi Vrestcreative™
Pada kesempatan kali ini vrc ingin berbagi pengetahuan tentang social media widget, pasti anda sudah tahu tentang widget, karena pastinya buat para blogging ingin sekali memasang sosail media ini di bagian text bar pada layout di bagian sidebar.
Banyak versi tentang widget maksudnya logo atau ikon widget social media, ada yang transfarant dan ada juga yang berupa logo original dari soscial media tersebut, baik itu facebook, instagram, youtube, blogger dan sejenisnya.
Nah di sini vrc memberikan script berupa html yang sudah siap teman-teman pasang di bagian sidebar atau di bagian layout tertentu, sesuai anda posisikan di bagian mana setelah
memasuki blogger layout.
- 1. Widget tombol follow dengan 6 ikon kotak transparant
Pada bagian background atau latar belakangnya tidak berwarna alias transparant
cocok untuk temen-temen yang mempunyai template transfarant.
<style>
ul.techornate-follow-buttons a:hover{color:#03c9a9}.techornate-follow-buttons.b-title li{text-align:center;background-color:#fff;width:31.5%;border:1px solid #eee}.techornate-follow-buttons.b-title a{text-transform:uppercase;text-decoration:none;margin:20px auto 0;font-size:10px}.techornate-follow-buttons li{display:inline-block;padding:0 0 7px;margin-bottom:3px!important}.techornate-follow-buttons li:last-child{border-bottom:1px solid #eee!important;padding-bottom:7px!important}.techornate-follow-buttons.b-title i{margin:0 auto 10px;display:block}.techornate-follow-buttons.style-1 i{height:32px;width:32px;line-height:32px;font-size:20px;margin:10px auto 0;text-align:center;color:#333}
</style>
<ul class='techornate-follow-buttons style-1 b-title'>
<li><a href='#'><i class="fa fa-facebook"></i>facebook</a></li>
<li><a href='#'><i class="fa fa-twitter"></i>twitter</a></li>
<li><a href='#'><i class="fa fa-google"></i>google +</a></li>
<li><a href='#'><i class="fa fa-pinterest"></i>pinterest</a></li>
<li><a href='#'><i class="fa fa-linkedin"></i>linkedin</a></li>
<li><a href='#'><i class="fa fa-instagram"></i>instagram</a></li>
</ul>
Copy semua scrip di atas, pada bagian tanda pagar # ganti dengan url akun social media kamu, jika facebook ambil url akun facebook kamu dan jika twitter ambil copy pastekan di tanda pagar nama twitter tersebut dan seterusnya.
- 2. Widget tombol follow dengan 5 ikon berbentuk balok berwarna / vertical
Pada ikon berbentul vertical ini, cocok di pasang di bagian sidebar box bagian sisi kanan
karena berbentuk panjang datar.
<style>
.techornate-social-buttons ul{padding-left:0;list-style:none}.techornate-social-buttons li a{text-transform:uppercase;text-decoration:none;padding:10px 1px 10px 10px;letter-spacing:2px;font-size:10px;color:#fff;display:block;border-radius:3px}.techornate-social-buttons ul li{margin-bottom:10px;width:100%}.techornate-social-buttons li a i{width:35px;height:14px;float:right;padding:0 0 0 10px;margin:0;font-size:14px;line-height:14px;border-left:1px solid #B1B1B1}.techornate-social-buttons li a.social-btn-facebook{background:#3b5998}.techornate-social-buttons li a.social-btn-twitter{background:#1da1f2}.techornate-social-buttons li a.social-btn-youtube{background:#cd201f}.techornate-social-buttons li a.social-btn-instagram{background:#405de6}.techornate-social-buttons li a.social-btn-google{background:#dd4b39}
</style>
<div class="techornate-social-buttons">
<ul class="sidebar-social clearfix">
<li><a href="#" class="social-btn-facebook">Like on Facebook <i class="fa fa-facebook"></i> </a></li>
<li><a href="#" class="social-btn-twitter">Follow on Twitter <i class="fa fa-twitter"></i> </a></li>
<li><a href="#" class="social-btn-google">Follow on Google+ <i class="fa fa-google"></i> </a></li>
<li><a href="#" class="social-btn-instagram">Follow on Instagram <i class="fa fa-instagram"></i> </a></li>
<li><a href="#" class="social-btn-youtube">Subscribe on Youtube <i class="fa fa-youtube"></i> </a></li>
</ul>
</div>
- 3. Widget tombol follow dengan 3 ikon vertical besar
Logo tombol follow 3 ikon ini memiliki kesamaan dengan logo baris 5, tapi logo tombol follow ini terlihat lebih besar atau tebal dan memiliki jumlah followersnya, cocok di pasang di bagian bawah side bar.
<style>
.s-text strong,.social-counter{font-weight:900}.techornate-socials a{display:block;color:#fff;padding:12px 15px;position:relative;margin-bottom:5px;text-decoration:none}.techornate-socials a span,.techornate-socials a:before{z-index:2;position:relative}.social-counter{position:absolute;font-size:14px;line-height:1;padding-top:4px}.s-text{float:right}.techornate-socials a:after{content:" ";height:100%;width:0;top:0;left:0;position:absolute;background:#252b42;z-index:1}.fa-facebook:before,.fa-subscribe:before,.fa-twitter:before{display:inline-block;width:16px;font-family:FontAwesome;margin-right:10px;padding-right:10px;font-size:18px;border-right:1px solid rgba(255,255,255,.3)}.fa-facebook{background:#1c3e67}.fa-facebook:before{content:"\f09a"}.fa-twitter{background:#28a6c5}.fa-twitter:before{content:"\f099"}.fa-subscribe{background:#d2002c}.fa-subscribe:before{content:"\f167"}
</style>
<div class="techornate-socials">
<a target="_blank" href="#" class="fa-facebook"><span class="social-counter">146,200</span><span class="s-text">Follow us on <strong>Facebook</strong></span></a>
<a target="_blank" href="#" class="fa-twitter"><span class="social-counter">50,748</span><span class="s-text">Follow us on <strong>Twitter</strong></span></a>
<a target="_blank" href="#" class="fa-subscribe"><span class="social-counter">33,175</span><span class="s-text">Subscribe us on <strong>YouTube</strong></span></a>
<div class="clear"></div>
</div>
Copy semua scrip di atas, pada bagian tanda pagar # ganti dengan url akun social media kamu, jika facebook ambil url akun facebook kamu dan jika twitter ambil copy pastekan di tanda pagar nama twitter tersebut dan seterusnya, tapi di bagian angka atau jumlah follower dan subscribe ubah sesuai jumlah akun sosial media kamu berapa jumlahnya, karena ini secara tidak otomatis di angka followers.
- 4. Widget dengan tombol follow 4 ikon dengan latar belakang
Pada jenis ke 4 ini memiliki kesamaan dengan widget nomor 3, namun pada jenis widget ini berbeda di bagian latar belakang atau mengkesampingkan warna latar belakang di bagian jumlah follower nya, untuk widget yang ini coock juga di pasang di bagian layout kanan atau side bar box.
<style>
ul.techornate-social-share{padding:0;margin:0;overflow:hidden}ul.techornate-social-share li{list-style:none;float:left;margin-right:4%;width:48%;margin-bottom:10px;background:#fafafa;overflow:hidden}ul.techornate-social-share li a{text-decoration:none;display:inline-block;float:left;color:#fff;height:40px;width:40px;text-align:center;font-size:14px;line-height:40px;margin-right:16px;position:relative;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out}ul.techornate-social-share li a:after{height:0;width:0;top:50%;left:100%;content:'';margin-top:-4px;position:absolute}ul.techornate-social-share li a.facebook{background:#436feb}ul.techornate-social-share li a.facebook:after{border:4px solid #436feb;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.techornate-social-share li a.twitter{background:#43c9eb}ul.techornate-social-share li a.twitter:after{border:4px solid #43c9eb;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.techornate-social-share li a.google{background:#f14133}ul.techornate-social-share li a.google:after{border:4px solid #f14133;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.techornate-social-share li a.youtube{background:#b00}ul.techornate-social-share li a.youtube:after{border:4px solid #b00;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.techornate-social-share li a:hover{opacity:.7}ul.techornate-social-share li span{font-size:12px;margin:0;line-height:15px;color:#999;font-weight:700;display:block}ul.techornate-social-share li span.scount-number{margin-top:5px;color:#333}ul.techornate-social-share li:nth-child(2n){margin-right:0}
</style>
<ul class="techornate-social-share">
<li> <a href="#" class="facebook"><i class="fa fa-facebook"></i></a> <span class="scount-number">44,143</span> <span>Fans</span></li>
<li> <a href="#" class="twitter"><i class="fa fa-twitter"></i></a> <span class="scount-number">39,505</span> <span>Followers</span></li>
<li> <a href="#" class="google"><i class="fa fa-google-plus"></i></a> <span class="scount-number">25,203</span> <span>Followers</span></li>
<li> <a href="#" class="youtube"><i class="fa fa-youtube"></i></a><span class="scount-number">7,456</span> <span>Subscribers</span></li>
</ul>
Nah temen-temen di sini sudah di jelaskan secara detail, jika temen-temen kebingungan cara memasang nya, langkah pertama:
Cara Memasang Widget Tombol Follow Media Sosial di Blogger
- Pertama, login ke akun blogger kalian.
- Lalu, kalian klik opsi Tema => klik Edit HTML.
- Setelah itu, kalian diwajibkan untuk memasang font awesome di blog tersebut. Dengan cara, pastekan kode dibawah ini sebelum kode </head>
- Kemudian, simpan perubahan.
Blogger Layout / Blogger Tata Letak
Add a Widget / Tambahkan Widget
Baik temen-temen sekian dari vrc tentang Top 4 Jenis Ikon Sosmed Untuk Blogger Html di tahun 2019 ini, jangan lupa Subscribe Channel YouTube V'RESTCREATIVE .
Jika ada kendalan saat penerapan script silakan tinggalkan komentar atau pesan melalui email yang sudah tersedia, demi kenyamanan anda di dalam situs vrestcreative.
Post a Comment