Widget Social Media Menarik untuk Blogger

Dalam tutorial ini im akan menjelaskan bagaimana menambahkan Widget Social Media Menarik untuk Blogger. Dengan menggunakan widget ini Anda dapat menghubungkan sosial media Anda profil Facebook, Twitter dan Google Rss ditambah, linkedin dan YouTube. Anda dapat menghubungkan dengan ikon sosial Anda.

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/AVvXsEjI4HOlctiPHaBhDoZ3UXtVIBD9o58mQu41sxcFDaR0g3RvnvEpJ3OOnQ9fLM9I-X4GCfD0SV4hqaulviPEC5SRNT5K-fu1fI26V8NYx90UQrGgKI85fHADOSB5hnBy3zDy-jvv6HMc6YM/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/AVvXsEiM2cKI28vrom06vRbyZZnAm9Cyle0MJxhk5HLfgG6tg8PxWiM4dSrCq-e1hnOZWN1YrW8Hik14wRA88JxIiOLQYVk1mmhvUocwbpF75SIKUJQrCejrZvjT3Cpl0a1KKK5uaG9PCjtZEEs/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/AVvXsEie9S4CTuZ0lAeOqOGRPJVebiXgE3IPHxzytGmCmXdnGTsDRx3ic-eGdjI0RbbAkjNUTvatX3mV9XyGdwJlGL_-34Uc61DN1xsiV959AcN7m8Wy2k4fZ5jGxZnvG9u9cVcTEJ9PnNp6q-Y/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/AVvXsEh_c7-drKgCZi6chxaLJqe4WVzXfJ2cHLBL6MKkdpG-Uj5bfBMVHjJV7CNJb-GoJ5LpQ9VVMFOqmJZXyCU3bei99YdeZ-_2763Kk7lBdko8BvRvolQMtDBblqkMv_BLHNv11L_gwjOe21I/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/AVvXsEhhSdFrZJTzq3fn4-jKjm8G-NRYGHlUu6nTOE1hruD-42Btqe1W87TIjvuznlUtvejPf8tJEU5UqppQSr6Tvv7BfUkWzBHKF5K7bJcZPGw7MyKuX1ctAkLC7i6rQ3EMEg3BASg5Zbwtmik/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/AVvXsEjWG0ne7kbdikkKDLVBod4MptTFpR9zvmMQEjSmeeTwL8JZ2l-qHG7q1ANCaVKdFk4i_W7SqP6sDGOI2wy66sjmt86EDuNmg-xPMJFFOsyuhJErM7Hel3z-9BtiXfbxDZpYBcoOkMS4LDI/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/TempatBlogging">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/TempatBlogging">Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/TempatBlogging">Find me on Facebook</a></li>
<li><a class="google" href="https://plus.google.com/117086455111922412846" rel="author">Join me on Google+</a></li>
<li><a class="linkedin" href="http://linkedin.com/Username">Connect on LinkedIn</a></li>
<li><a class="youtube" href="http://www.youtube.com/Nama">Watch me on YouTube</a></li>
</ul>
</div>

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

Ganti TempatBlogging dengan Feedburner ID
Ganti TempatBlogging dengan nama pengguna Facebook Anda
Ganti TempatBlogging dengan Twitter Nama
Ganti 117086455111922412846 dengan Google Anda ditambah ID
Ganti Username dengan linkedin Username
Ganti Nama dengan Username Youtube Anda

5. Sekarang menyimpan HTML / Javascript '.

     Anda telah selesai ... 

Share this post