Widget Melayang Dikanan
Tutorial berikut adalah membuat sebuah widget follow social media pada blog. 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, 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.
Cara Mudah Memasang Widget Sosmed di Blog
- Pertama anda login ke akun blogger anda,
- Lalu anda masuk ke menu "Tata Letak" dan klik "Tambah gadget".
- Setelah itu anda pilih "HTML/JavaScript".
- 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:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6XPDUJfK30TZ2Uq4z54Q7326pHLiD2kOXuXFdOM8zIum3rdXx8geu2Dcge6Uyc19SIQ9pE3qRtSUdyr4LUgWeu8BWw5Jzue37VbrPtbbGqOLkXK4sRamlfnq-RkyI7fRrlsJ7H5u1lgQ/s1600/bsu-social-widget.png);background-position:-2px -68px;}
.bsu-social-buttons a#rt-twitter-btn span {background-image: url(https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6XPDUJfK30TZ2Uq4z54Q7326pHLiD2kOXuXFdOM8zIum3rdXx8geu2Dcge6Uyc19SIQ9pE3qRtSUdyr4LUgWeu8BWw5Jzue37VbrPtbbGqOLkXK4sRamlfnq-RkyI7fRrlsJ7H5u1lgQ/s1600/bsu-social-widget.png);background-position:-2px -24px;}
.bsu-social-buttons a#rt-facebook-btn span {background-image: url(https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6XPDUJfK30TZ2Uq4z54Q7326pHLiD2kOXuXFdOM8zIum3rdXx8geu2Dcge6Uyc19SIQ9pE3qRtSUdyr4LUgWeu8BWw5Jzue37VbrPtbbGqOLkXK4sRamlfnq-RkyI7fRrlsJ7H5u1lgQ/s1600/bsu-social-widget.png);background-position:-2px -46px;}
.bsu-social-buttons a#rt-rss-btn span {background-image: url(https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6XPDUJfK30TZ2Uq4z54Q7326pHLiD2kOXuXFdOM8zIum3rdXx8geu2Dcge6Uyc19SIQ9pE3qRtSUdyr4LUgWeu8BWw5Jzue37VbrPtbbGqOLkXK4sRamlfnq-RkyI7fRrlsJ7H5u1lgQ/s1600/bsu-social-widget.png);background-position:-2px -89px;}
a.loginbtn span {background-image: url(https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6XPDUJfK30TZ2Uq4z54Q7326pHLiD2kOXuXFdOM8zIum3rdXx8geu2Dcge6Uyc19SIQ9pE3qRtSUdyr4LUgWeu8BWw5Jzue37VbrPtbbGqOLkXK4sRamlfnq-RkyI7fRrlsJ7H5u1lgQ/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="ALAMAT LINK DISESUAIKAN" id="rt-facebook-btn" rel="nofollow" title="DISESUAIKAN">
<span> Facebook Fanspage</span></a>Facebook Blog ANDA
<a class="lightbox" data-options="{"width":420, "height":405, "iframe": true}" href="ALAMAT LINK DISESUAIKAN" id="rt-twitter-btn" rel="nofollow" title="DISESUAIKAN">
<span>Follow Me On Twitter</span></a>
<a href="ALAMAT LINK DISESUAIKAN" id="rt-buzz-btn" rel="nofollow" target="_blank" title="DISESUAIKAN">
<span>Circle Me On Google Plus</span></a>
<a href="ALAMAT LINK DISESUAIKAN" id="rt-rss-btn" rel="nofollow" target="_blank" title="DISESUAIKAN">
<span>Subscribe To RSS Feed</span></a>
</div>
Dibawah ini adalah potongan kode diatas. Teks yang berwarna merah, ganti dengan alamat link sosmed Anda dan tentukan judul yang akan ditampilkan.
<div class="bsu-social-buttons">
<a class="lightbox" data-options="{"width":300, "height":430, "iframe": true}" href="ALAMAT LINK DISESUAIKAN" id="rt-facebook-btn" rel="nofollow" title="DISESUAIKAN">
<span> Facebook Fanspage</span></a>Facebook Blog ANDA
<a class="lightbox" data-options="{"width":420, "height":405, "iframe": true}" href="ALAMAT LINK DISESUAIKAN" id="rt-twitter-btn" rel="nofollow" title="DISESUAIKAN">
<span>Follow Me On Twitter</span></a>
<a href="ALAMAT LINK DISESUAIKAN" id="rt-buzz-btn" rel="nofollow" target="_blank" title="DISESUAIKAN">
<span>Circle Me On Google Plus</span></a>
<a href="ALAMAT LINK DISESUAIKAN" id="rt-rss-btn" rel="nofollow" target="_blank" title="DISESUAIKAN">
<span>Subscribe To RSS Feed</span></a>
</div>
- Terakhir klik ikon simpan > lalu lihat hasilnya.
Semoga sukses dan bermanfaat. Terimakasih.
Published: Seno Adjie
0 Komentar