Hey sob? kali ini saya akan memberikan sebuah cara bagaimana caranya untuk membuat sebuah widget follow social media pada blog yang anda miliki. Mungkin bagi sebagian orang pernah melihat sebuah blog yang memiliki sebuah widget follow subscribe blog yang melayang di kanan atau kiri pada halaman blog, hal itu bukan hanya sekedar untuk mempermudah para pengunjung untuk memfollow atau mensubscribe blog yang kita milik namun dengan tampilan yang dinamis pastinya menambahkan sebuah gadget follow ini akan juga dapat mempercantik tampilan blog anda.
Untuk memasangkan sebuah gadget follow akun sosmed atau social media seperti facebook, twitter, google+ dan RSS yang melayang di halaman blog sebenarnya cukup mudah, anda hanya membutuhkan beberapa kode dan memasangkan ke blog anda. Oke bagi anda yang penasaran dengan bagaimana caranya untuk memasang gadget follow yang keren bisa simak pemahasan berikut ini.
Cara Mudah Memasang Widget Follow Sosmed di Blog
1. Pertama anda login ke akun blogger anda,
2. Lalu anda masuk ke menu "Tata Letak" dan klik "Tambah gadget".
3. Setelah itu anda pilih "HTML/JavaScript".
4. Lalu anda masukan kode di bawah ini kedalam halaman HTML/JavaScript tadi.
<style>
.staticbar {position: fixed;right: 0;top: 35%;width: 25px;animation:static-bar .8s;-moz-animation:static-bar .8s; -webkit-animation:static-bar .8s;}
.staticbar:hover {z-index: 1000;}
.bsu-social-buttons a, .loginbtn {background: none repeat scroll 0 0 #0e0e0e;background-repeat: no-repeat;display: block;height: 20px;margin-bottom: 3px;padding: 4px 0 4px 4px;right: 0px;width: 140px;position: relative;-moz-border-radius: 3px 0px 0px 3px;-webkit-border-radius: 3px 0px 0px 3px;-khtml-border-radius: 3px 0px 0px 3px;border-radius: 3px 0px 0px 3px;background-position: 4px 4px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;border:1px solid rgb(51, 51, 51)}
.bsu-social-buttons span, .loginbtn span {background-repeat: no-repeat;color: #FFFFFF;display: block;font-size: 10px;height: 18px;letter-spacing: -1px;line-height: 1.9em;padding-left: 20px;text-transform: uppercase;text-shadow:0px 1px 1px rgba(0, 0, 0, 0.2);}
.bsu-social-buttons a:hover, .loginbtn:hover {background: none repeat scroll 0 0 #4bb847;border:1px solid rgb(70, 0, 0);
right: 119px;}
.bsu-social-buttons a#rt-buzz-btn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1uprC4D6qfKu8YpcBmTAoAckXB8iaLsvqVUbPKQjnY3uHMmu3eZIFUbJvO1bSRve0eMoBBL4nM3CCwxhfwx3NYxgj_NWZW0XOVJYXj9FxP0jzqPVGSzO0K1zbo6KZDQS8L0M_i2z5an0/s1600/bsu-social-widget.png);background-position:-2px -68px;}
.bsu-social-buttons a#rt-twitter-btn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1uprC4D6qfKu8YpcBmTAoAckXB8iaLsvqVUbPKQjnY3uHMmu3eZIFUbJvO1bSRve0eMoBBL4nM3CCwxhfwx3NYxgj_NWZW0XOVJYXj9FxP0jzqPVGSzO0K1zbo6KZDQS8L0M_i2z5an0/s1600/bsu-social-widget.png);background-position:-2px -24px;}
.bsu-social-buttons a#rt-facebook-btn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1uprC4D6qfKu8YpcBmTAoAckXB8iaLsvqVUbPKQjnY3uHMmu3eZIFUbJvO1bSRve0eMoBBL4nM3CCwxhfwx3NYxgj_NWZW0XOVJYXj9FxP0jzqPVGSzO0K1zbo6KZDQS8L0M_i2z5an0/s1600/bsu-social-widget.png);background-position:-2px -46px;}
.bsu-social-buttons a#rt-rss-btn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1uprC4D6qfKu8YpcBmTAoAckXB8iaLsvqVUbPKQjnY3uHMmu3eZIFUbJvO1bSRve0eMoBBL4nM3CCwxhfwx3NYxgj_NWZW0XOVJYXj9FxP0jzqPVGSzO0K1zbo6KZDQS8L0M_i2z5an0/s1600/bsu-social-widget.png);background-position:-2px -89px;}
a.loginbtn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1uprC4D6qfKu8YpcBmTAoAckXB8iaLsvqVUbPKQjnY3uHMmu3eZIFUbJvO1bSRve0eMoBBL4nM3CCwxhfwx3NYxgj_NWZW0XOVJYXj9FxP0jzqPVGSzO0K1zbo6KZDQS8L0M_i2z5an0/s1600/bsu-social-widget.png);background-position:-2px 0px;}
@keyframes static-bar{0% {right:-25px;} 100% {right:0px;}}
@-moz-keyframes static-bar{0% {right:-25px;} 100% {right:0px;}}
@-webkit-keyframes static-bar{0% {right:-25px;} 100% {right:0px;}}
</style>
<div class="staticbar">
<div class="login">
<div id="rt-login-button">
<a class="loginbtn buttontext" href="http://blogger.com" rel="nofollow" target="_blank" title="Login Blogger">
<span class="desc">Blogger Login</span></a>
</div>
<div class="clear"></div>
</div>
<div class="bsu-social-buttons">
<a class="lightbox" data-options="{"width":300, "height":430, "iframe": true}" href="https://www.facebook.com/username" id="rt-facebook-btn" rel="nofollow" title="Facebook">
<span> Facebook Fanspage</span></a>
<a class="lightbox" data-options="{"width":420, "height":405, "iframe": true}" href="https://twitter.com/bsu_blog" id="rt-twitter-btn" rel="nofollow" title="Twitter">
<span>Follow Me On Twitter</span></a>
<a href="https://plus.google.com/106179174142964711027" id="rt-buzz-btn" rel="nofollow" target="_blank" title="Google Plus">
<span>Circle Me On Google Plus</span></a>
<a href="http://www.heysob.my.id/" id="rt-rss-btn" rel="nofollow" target="_blank" title="RSS Yondarkness">
<span>Subscribe To RSS Feed</span></a>
</div>
</div>
5. Terakhir anda bisa "Simpan" dan lihat hasilnya.
Oke mungkin itu saja yang bisa kita berikan mengenai artikel "Cara Membuat Widget Follow Melayang Keren" ini, semoga dengan apa yang sudah kita berikan ini dapat bermanfaat bagi Kalian. Jika ada Kesalahan atau ada Pertanyaan serta Tambahan bisa isi pada kolom komentar. Terimakasih.
Posting Komentar