Hey sob? kali ini saya akan menawarkan sebuah cara bagaimana caranya untuk menciptakan sebuah widget follow social media pada blog yang anda miliki. Mungkin bagi sebagian orang pernah melihat sebuah blog yang mempunyai 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 sanggup mempercantik tampilan blog anda.
Untuk memasangkan sebuah gadget follow akun sosmed atau social media ibarat facebook, twitter, google+ dan RSS yang melayang di halaman blog gotong royong cukup mudah, anda hanya membutuhkan beberapa aba-aba dan memasangkan ke blog anda. Oke bagi anda yang ingin tau dengan bagaimana caranya untuk memasang gadget follow yang keren sanggup simak pemahasan berikut ini.
Cara Praktis Memasang Widget Follow Sosmed di Blog
1. Pertama anda login ke akun blogger anda,
2. Lalu anda masuk ke sajian "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/AVvXsEjGl2D6UGh3_rZq9w5MhWmUq_-wGLpb6eIKzK0vXGLRp1sEy4ZiExyuFj0ZyJ8LgRuUZ7Jy8fYADl-3biv57i9HeqQjnuLkcOst6Vkdkm9qtG2iV-SGTqpgHos8RmsrOsh2xdH8pf9pMvA/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/AVvXsEjGl2D6UGh3_rZq9w5MhWmUq_-wGLpb6eIKzK0vXGLRp1sEy4ZiExyuFj0ZyJ8LgRuUZ7Jy8fYADl-3biv57i9HeqQjnuLkcOst6Vkdkm9qtG2iV-SGTqpgHos8RmsrOsh2xdH8pf9pMvA/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/AVvXsEjGl2D6UGh3_rZq9w5MhWmUq_-wGLpb6eIKzK0vXGLRp1sEy4ZiExyuFj0ZyJ8LgRuUZ7Jy8fYADl-3biv57i9HeqQjnuLkcOst6Vkdkm9qtG2iV-SGTqpgHos8RmsrOsh2xdH8pf9pMvA/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/AVvXsEjGl2D6UGh3_rZq9w5MhWmUq_-wGLpb6eIKzK0vXGLRp1sEy4ZiExyuFj0ZyJ8LgRuUZ7Jy8fYADl-3biv57i9HeqQjnuLkcOst6Vkdkm9qtG2iV-SGTqpgHos8RmsrOsh2xdH8pf9pMvA/s1600/bsu-social-widget.png);background-position:-2px -89px;}
a.loginbtn span {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGl2D6UGh3_rZq9w5MhWmUq_-wGLpb6eIKzK0vXGLRp1sEy4ZiExyuFj0ZyJ8LgRuUZ7Jy8fYADl-3biv57i9HeqQjnuLkcOst6Vkdkm9qtG2iV-SGTqpgHos8RmsrOsh2xdH8pf9pMvA/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="√ Cara Membuat Widget Follow Melayang Keren">
<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/blogsejutaumat" id="rt-facebook-btn" rel="nofollow" title="√ Cara Membuat Widget Follow Melayang Keren">
<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="√ Cara Membuat Widget Follow Melayang Keren">
<span>Follow Me On Twitter</span></a>
<a href="https://plus.google.com/106179174142964711027" id="rt-buzz-btn" rel="nofollow" target="_blank" title="√ Cara Membuat Widget Follow Melayang Keren">
<span>Circle Me On Google Plus</span></a>
<a href="aciknadzirah.blogspot.com" id="rt-rss-btn" rel="nofollow" target="_blank" title="RSS Yondarkness">
<span>Subscribe To RSS Feed</span></a>
</div>
</div>
5. Terakhir anda sanggup "Simpan" dan lihat hasilnya.
Oke mungkin itu saja yang sanggup saya berikan mengenai "Cara Praktis Membuat Widget Follow Melayang Keren" ini, biar dengan apa yang sudah saya berikan ini sanggup bermanfaat bagi Anda. Jangan lupa untuk like dan follow akun kami untuk mendapat isu serta update terbaru dari kami. Jika ada Kesalahan atau ada Pertanyaan serta Tambahan sanggup isi pada kolom komentar anda. Terimakasih.
Sumber http://www.blogsejutaumat.com/
