Cara Pasang Tombol Follow Social Media di Blog
Terima kasih sudah bersedia mampir di blog yang sederhana ini. Di sini kembali dengan kebiasaan lama Saya, yaitu saling berbagi antar sesama. Pada postingan kali ini, Saya ingin berbagi dengan Sobat tentang cara membuat tombol follow dari situs-situs jejaring sosial, seperti Facebook, Twitter, Google plus dan lainnya. Cara kerja widget ini menurut Saya cukup keren, hanya dengan mengarahkan kursor ke salah satu tombol tersebut, maka dengan secara otomatis tombol yang tadinya berwarna kabur akan berubah dengan warna yang sudah ditentukan.
Caranya cukup mudah, hanya dengan meletakkan kode script di bawah ini pada gadget HTML/JavaScript pada Blogger. Untuk lebih jelasnya, simak ulasan di bawah ini:
1. Masuk ke akun Blogger
2. Di halaman dasbor, pilih Tata Letak
3. Seterusnya, Tambahkan Gadget dan pilih HTML/JavaScript
4. Copy kode di bawah ini dan letakkan pada widget HTML/JavaScript
<style>
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipANaGTX7Fc05EViWsYbOjcdUe5-3g0E3Im34q2fwFNmpXxnVmlAcP1NW4FX7qJyLXFcQyyY0b1igAMGvDUSn-f2PS36NfbC1Yl7y7ffgep0AaaZwwxzQxFhUnkDCH1fhbltoX8RWGYkg/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#tbisose .icon{overflow:hidden; color:#fafafa;}
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:210px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id="tbisose">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li>
</ul>
<small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://se-cara.blogspot.com/2013/06/cara-pasang-tombol-follow-social-media.html" target="_blank" title="Klik di sini untuk memasang widget di blog Anda">Pasang Widget</a></div></small>
Keterangan: Untuk yang berwarna biru ganti dengan URL jejaring sosial Sobat
Yang berwarna merah bisa Sobat ganti dengan kalimat lain
5. Terakhir klik simpan dan lihat hasilnya
Cukup sekian cara membuat widget tombol jejaring sosial di blog. Terima kasih sudah meluangkna waktunya untuk membaca artikel ini, dan jangan lupan komentarnya...! :)
Caranya cukup mudah, hanya dengan meletakkan kode script di bawah ini pada gadget HTML/JavaScript pada Blogger. Untuk lebih jelasnya, simak ulasan di bawah ini:
1. Masuk ke akun Blogger
2. Di halaman dasbor, pilih Tata Letak
3. Seterusnya, Tambahkan Gadget dan pilih HTML/JavaScript
4. Copy kode di bawah ini dan letakkan pada widget HTML/JavaScript
<style>
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipANaGTX7Fc05EViWsYbOjcdUe5-3g0E3Im34q2fwFNmpXxnVmlAcP1NW4FX7qJyLXFcQyyY0b1igAMGvDUSn-f2PS36NfbC1Yl7y7ffgep0AaaZwwxzQxFhUnkDCH1fhbltoX8RWGYkg/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#tbisose .icon{overflow:hidden; color:#fafafa;}
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:210px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id="tbisose">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li>
</ul>
<small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://se-cara.blogspot.com/2013/06/cara-pasang-tombol-follow-social-media.html" target="_blank" title="Klik di sini untuk memasang widget di blog Anda">Pasang Widget</a></div></small>
Keterangan: Untuk yang berwarna biru ganti dengan URL jejaring sosial Sobat
Yang berwarna merah bisa Sobat ganti dengan kalimat lain
5. Terakhir klik simpan dan lihat hasilnya
Cukup sekian cara membuat widget tombol jejaring sosial di blog. Terima kasih sudah meluangkna waktunya untuk membaca artikel ini, dan jangan lupan komentarnya...! :)
Comments
Post a Comment
-Berkomentarlah yang baik dan rapi.
-Menggunakan link aktif akan dihapus.