Membuat Widget Social Media Vertikal di Blog

Membuat Widget Social Media Vertikal di Blog - Social Media atau jejaring sosial adalah salah satu alat yang dapat kita gunakan untuk memaksimalkan sumber trafik blog kita, mungkin suatu saat nanti tidak lagi bisa kita pungkiri bahwasanya Social Media akan menajadi salah satu sumber kunjungan terbesar menyaingi Search Engine yang kini merupakan sumber utamanya.

Selain kita dapat mendulang traffik yang lebih banyak, kita juga dapat memanfaatkan jejaring sosial sebagai sarana mempermudah hubungan antara kita dan para pengunjung, karena tentunya menjalin silaturahim yang baik akan dengan pemilik blog akan membawa kesan tersendiri bagi para pengunjung setianya.

Seperti yang sudah saya bahas pada postingan sebelumnya tentang widget share button warna warni, social media juga dapat mempermudah pengunjung untuk dapat merefrensikan blog kita kepada rekan-rekan mereka yang mungkin akan membutuhkan berbagai macam konten yang terkait dengan bidang yang mereka geluti.

Widget ini sendiri berisikan beberapa jejaring sosial ternama seperti twitter, facebook, google+, linkedin, youtube, dan feedburner. Jika kita lihat pada gambar diatas, dapat saya simpulkan bahwa widget ini bertemakan warna abu-abu dan mengangkat tema simple dan minimalis, jadi rasanya cocok sekali untuk berada di blog anda, karena tentunya akan menambah kecantikan dan menjadi daya tarik tersendiri bagi pengunjung.

Cara Membuat Widget Social Media Vertikal

1. Login ke Blogger.

2. Pilih Tata Letak.

3. Klik Add Gadget.

4. Pilih HTML/JavaScript.

5. Letakkan kode dibawah ini kedalamnya.

<style type="text/css">
.btrix_socialwidget { width: 300px; }
.btrix_socialwidget ul { border: 1px solid #CCCCCC; margin: 0; padding: 0; }
.btrix_socialwidget ul li { list-style:none; padding: 0; text-transform: none; border-bottom: 1px solid #CCCCCC; border-top: 1px solid #FFFFFF; }
.btrix_socialwidget ul li:first-child { border-top: 0 none; }
.btrix_socialwidget ul li:last-child { border-bottom: 0 none; }
.btrix_socialwidget ul li a { background-color: #F2F2F2 !important; color: #404040; display:block; }
.btrix_socialwidget ul li a:hover { background-color: #949494 !important;color: #0d0354; }
.btrix_socialwidget ul li .rss { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigGJf6x04eJrJ82PPtoflD4hSiCNk6Wl0TCiKAjm19lDA66xdDk-7b5UAcTqa10g5BtmdSc4xF4oKNewgQ8MWbCJ_nIEFWoUF83Rx6v8ugpnySX6_mP658YoCYTI2UTpbQiPJ_ZGZ5WXo/s1600/bt-RSS.png") no-repeat scroll 10px center #F87E12; padding: 17.5px 60px; }
.btrix_socialwidget ul li .twitter { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO7G4HYuFwLjCuIf1T5HRgJuKsM4QVOEmQaR6LMbo56GVFTMx2Bc4arWv_JKzo7WJ39E2a1RJosvve0uhygWg8ETCGTaVPkrS79L331NcAaquHSevmEFqQnGwE8Y20h4eXUfvXkxYY2kk/s1600/bt-Twitter.png") no-repeat scroll 10px center #4CACEE; padding: 17.5px 60px;}
.btrix_socialwidget ul li .facebook { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4QQqsRlScJhH9Q2pMPlqp60rOUjhAObhBq6F3Oi7iG-4tzwX_1-hQEma4PDqEzj9_gQlRt7eGhv2fqVI6tQXNJmoP6NFgWoUYLjkN-xTyiCPcFOE5Bhk0seoohi1l9c6mro_x0AggjS8/s1600/bt-Facebook.png") no-repeat scroll 10px center #3B5998; padding: 17.5px 60px; }
.btrix_socialwidget ul li .google { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5CQGbOyrcg4kurlU5tNgsTOVvNsPOBuxlYxA7CyNTnafb762azxtI0tCGlONPWzyElcH1s_z8XKELtVOrugviJh0S2d3U2bTCZ-o0eA1DvN3oOUmGGXqQBsPdKaOsft7Do6dX6hXYMr0/s1600/bt-google.png") no-repeat scroll 10px center #D44937; padding: 17.5px 60px; }
.btrix_socialwidget ul li .linkedin { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHqS64C60izaa4VjFaQJkISiIgEnkJPxes6ykqvewFHCwh2pC6bFWu9hWoOLedGzp3UI5rsdUYDugQeO11fPZRey-nUCPZM03fjmLV35TlXMOsVhAmBNWDahN7qhruYaeqnU0d562ocjM/s1600/bt-LinkedIn.png") no-repeat scroll 10px center #3692C3; padding: 17.5px 60px; }
.btrix_socialwidget ul li .youtube { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilzum3aqiDMSG2wo1qxIghSplOVXOkQ4ALdBRMLMq1aYsS1OXbZMUOuepxeiZcXDU9WhrG7GeKq5h_gkBSRKyjKC25r85ts63tTeJM44OTtZuTdb3dgUyziF2QaeIltvdO5m48eJR1Aa4/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/IDFeedburner">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/UsernameTwitter">Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/Facebook ID/Fan Page">Find me on Facebook</a></li>
<li><a class="google" href="https://plus.google.com/ID Google+" rel="author">Join me on Google+</a></li>
<li><a class="linkedin" href="http://linkedin.com/UsernameLinkedin">Connect on LinkedIn</a></li>
<li><a class="youtube" href="http://www.youtube.com/UsernameYoutube">Watch me on YouTube</a></li>
</ul>
</div> 

Keterangan:

• Ganti kode yang berwarna oranye dengan ID Feedburner anda.
• Ganti kode yang berwarna biru muda dengan Username Twitter anda.
• Ganti kode yang berwarna biru tua dengan ID/FanPage Facebook anda.
• Ganti kode yang berwarna merah dengan ID Google+ anda.
• Ganti kode yang berwarna hijau dengan Username Linkedin anda.
• Ganti kode yang berwarna hitam dengan Username Youtube anda.

Untuk Live Demo dari widget ini dapat anda lihat disini. Demikian informasi terbaru seputar tutorial blog tentang membuat widget social media vertikal di blog, semoga bermanfaat, dan selamat mencoba.

Sumber Referensi : Bloggertrix

Share this

Author : Admin

Related Posts