Share
Home » » Widget Social Media Menarik untuk Blogger

Widget Social Media Menarik untuk Blogger

Written By Yuga irgi on Kamis, 01 Agustus 2013 | 15.06



1. Masuk ke akun blogger dan klik drop down.



2. Sekarang pilih "Layout" Seperti bawah.




3. Klik Tambah Gadget dan pilih 'HTML / Javascript

4. Paste di bawah salah satu kode di bawah ini.


<style type="text/css">
.tb_socialwidget { width: 280px; }
.tb_socialwidget ul { border: 1px solid #CCCCCC; margin: 0; padding: 0; }
.tb_socialwidget ul li { list-style:none; padding: 0; text-transform: none; border-bottom: 1px solid #CCCCCC; border-top: 1px solid #FFFFFF; }
.tb_socialwidget ul li:first-child { border-top: 0 none; }
.tb_socialwidget ul li:last-child { border-bottom: 0 none; }
.tb_socialwidget ul li a { background-color: #F2F2F2 !important; color: #404040; display:block; }
.tb_socialwidget ul li a:hover { background-color: #949494 !important;color: #0d0354; }
.tb_socialwidget ul li .rss { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7wa0ZGiBstBGCowW3Qbt6lPz-biTlheqQ9WDgysQS2R93wfhsQXgqgzik46iWrUNA9E3RpO85y0zyh4n05lMleQjM6Rnysfk5zMjjoOv0338exnTx3MZcN-ndk43gtrEfaSowlQjKrCo/s1600/bt-RSS.png") no-repeat scroll 10px center #F87E12; padding: 17.5px 60px; }
.tb_socialwidget ul li .twitter { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAcyZ2ttmDy47-xRMi7qrXsIFOYcQx16xmIkS101YXagSmuAJG_VNckLx9vRs2-pFD-dZC3yy-Y5O2f1rIEJqAIk573-x7EPlObsQwZ-lR48h1OlO4sNjtwQFmxwL42aAgwiV3Hbyc54M/s1600/bt-Twitter.png") no-repeat scroll 10px center #4CACEE; padding: 17.5px 60px;}
.tb_socialwidget ul li .facebook { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggCNaeXUCECgszECnfivWqy_C8I2xllwWqxorAmNji2dC6pQasnCeMsk9v-GUvmsYjHr_CikqTS6PIYQWy5sXgLxRu370mgJvGJKAR9mA3SRYTeq9aS3H9-6xV6R0EwZqRPAeHBpw4vSU/s1600/bt-Facebook.png") no-repeat scroll 10px center #3B5998; padding: 17.5px 60px; }
.tb_socialwidget ul li .google { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyXEh0GifWhmqmhxR2squuh2mrpsoMCURRWruyqBEy4pdE9voo2NIP_E1abZrufxfk4R9XleeijxbApAfEk6GmJgfZDICClA7l48wo1LkGHj8rOyyjIjJtXKsOhXIc3E2J8u0BYhk8qk0/s1600/bt-google.png") no-repeat scroll 10px center #D44937; padding: 17.5px 60px; }
.tb_socialwidget ul li .linkedin { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS8UDWSvsHxZiW8iBwWpyBRLhwgx78wWKMjYIn4CE0j2JPFjUXJ049aiCJ5_Oi4ldIY5OaMasAihDGVY_iLMHVXVbRwusMfl4R3rWxBh1rz8lTIqlTBaJwjHSVhwmnvKBcdozv1bqFsD4/s1600/bt-LinkedIn.png") no-repeat scroll 10px center #3692C3; padding: 17.5px 60px; }
.tb_socialwidget ul li .youtube { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipWnOonkcn7l6cPqFB6JKkzbMpxCMZunUzNeAPPUqeqP_Tt_tjDL3o6Wj6WWP1YWme8EFC4U7CNoqnYtuDaRK5l9Dw4jUeFE8DIKLsh8Alu97HN2u3Fuzb91bkbSs86xF9UHN24CrsiSM/s1600/bt-Youtube.png") no-repeat scroll 10px center #C6312B; padding: 17.5px 60px; }
.social-about { display: none; }
</style>
<div class="btrix_socialwidget">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/capoenk">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/lindamarlina40">Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/arieadie30">Find me on Facebook</a></li>
<li><a class="google" href="https://plus.google.com/102921613865056852662" rel="author">Join me on Google+</a></li>
<li><a class="linkedin" href="http://linkedin.com/arieadie30">Connect on LinkedIn</a></li>
<li><a class="youtube" href="http://www.youtube.com/arieadie821">Watch me on YouTube</a></li>
</ul>
</div>

Anda harus mengubah counter manual, hanya mengubah nomor warna merah sesuai dengan profil.

Ganti capoenk dengan Feedburner ID
Ganti arieadie30 dengan nama pengguna Facebook Anda
Ganti lindamarlina40 dengan Twitter Nama
Ganti 117086455111922412846 dengan Google Anda ditambah ID
Ganti arieadie30 dengan linkedin Username
Ganti arieadie821 dengan Username Youtube Anda

5. Sekarang menyimpan HTML / Javascript '.

0 komentar:

Posting Komentar