Cara Membuat Ikon Sosial Media di Sidebar Blog

Baca Juga

CARA memunculkan, menampilkan, memasang, atau membuat ikon Sosial Media horizontal di sidebar blog sangat mudah. Banyak blogger yang sudah menyediakan kodenya. Kita tinggal Copas dan pasang di sidebar blog.

Fungsi ikon atau menu Sosial Media di sidebar blog tentu saja untuk meningkatkan liker & follower Facebook dan Twitter serta akun media sosial lainnya.

Cara memasangnya, siapkan dulu link/url akun medsos Anda untuk dimasukkan ke kode berikut ini (gambar pagar/ganti gambar # dengan url link sosmed Anda).

Ada 6 Akun Media Sosial:
1. Twitter
2. Facebook
3. Google Plus
4. Pinterest
5. LinkedIn
6. RSS Feedburner

Cara Pasang:
1. Layout > Add a Gadget
2. Copas kode berikut ini di bagian "Content" (Isi)

<style>
a.tooltip{font-family:arial;font-weight:700}a.tooltip span{position:absolute;width:120px;color:#FFF;background:#111;height:30px;line-height:30px;text-align:center;visibility:hidden;border-radius:6px;top:-40px;margin-left:-60px!important}a.tooltip span:after{content:'';position:absolute;top:100%;left:50%;margin-left:-8px;width:0;height:0;border-top:8px solid #111;border-right:8px solid transparent;border-left:8px solid transparent}a:hover.tooltip span{visibility:visible;bottom:30px;left:50%;margin-left:-76px;z-index:999}.social-tooltip a{display:inline-block;position:relative}.social-tooltip a:hover{opacity:.8}.facebooktip{background:url(https://googledrive.com/host/0B8D3MQmcZTyva00xallLc2JoUTQ/) no-repeat;height:50px;width:50px}.twittertip{background:url(https://googledrive.com/host/0B8D3MQmcZTyvdTF5MURZQVd1Ykk/) no-repeat;height:50px;width:50px}.google_tip{background:url(https://googledrive.com/host/0B8D3MQmcZTyvbUxQT0gtUV9aSVE/) no-repeat;height:50px;width:50px}.linkedin_tip{background:url(https://googledrive.com/host/0B8D3MQmcZTyvdUROT0NwNkFLaU0/) no-repeat;height:50px;width:50px}.pinterest_tip{background:url(https://googledrive.com/host/0B8D3MQmcZTyvaWZ1T0FGLW9RNDA/) no-repeat;height:50px;width:50px}.rss_tip{background:url(https://googledrive.com/host/0B8D3MQmcZTyvNDhEbnRfczVydnM/) no-repeat;height:50px;width:50px}
</style>
<div class="social-tooltip">
<a class="tooltip facebooktip" href="#">
<span>Facebook</span></a>
<a class="tooltip twittertip" href="#">
<span>Twitter</span></a>
<a class="tooltip google_tip" href="#">
<span>Google+</span></a>
<a class="tooltip pinterest_tip" href="#">
<span>Pinterest</span></a>
<a class="tooltip linkedin_tip" href="#">
<span>Linkedin</span></a>
<a class="tooltip rss_tip" href="#">
<span>RSS</span></a>
</div>

Sumber Kode

Kalau punya saya mah, beda dikit. Saya edit dulu, minus RSS Feed. Ini kodenya. Demonya bisa dilihat di sidebar blog.

<style>
a.tooltip{font-family:arial;font-weight:700}a.tooltip span{position:absolute;width:120px;color:#FFF;background:#111;height:30px;line-height:30px;text-align:center;visibility:hidden;border-radius:6px;top:-40px;margin-left:-60px!important}a.tooltip span:after{content:'';position:absolute;top:100%;left:50%;margin-left:-8px;width:0;height:0;border-top:8px solid #111;border-right:8px solid transparent;border-left:8px solid transparent}a:hover.tooltip span{visibility:visible;bottom:30px;left:50%;margin-left:-76px;z-index:999}.social-tooltip a{display:inline-block;position:relative}.social-tooltip a:hover{opacity:.8}.facebooktip{background:url(https://googledrive.com/host/0B8D3MQmcZTyva00xallLc2JoUTQ/) no-repeat;height:50px;width:56px}.twittertip{background:url(https://googledrive.com/host/0B8D3MQmcZTyvdTF5MURZQVd1Ykk/) no-repeat;height:50px;width:56px}.google_tip{background:url(https://googledrive.com/host/0B8D3MQmcZTyvbUxQT0gtUV9aSVE/) no-repeat;height:50px;width:56px}.linkedin_tip{background:url(https://googledrive.com/host/0B8D3MQmcZTyvdUROT0NwNkFLaU0/) no-repeat;height:50px;width:56px}.pinterest_tip{background:url(https://googledrive.com/host/0B8D3MQmcZTyvaWZ1T0FGLW9RNDA/) no-repeat;height:50px;width:56px}
</style>
<div class="social-tooltip">
<a class="tooltip facebooktip" href="http://www.facebook.com/romelteamedia/" target="_blank">
<span>Facebook</span></a>
<a class="tooltip twittertip" href="http://www.twitter.com/romeltea/" target="_blank">
<span>Twitter</span></a>
<a class="tooltip google_tip" href="http://plus.google.com/103329103950948291283/" target="_blank">
<span>Google+</span></a>
<a class="tooltip pinterest_tip" href="http://www.pinterest.com/romeltea/" target="_blank">
<span>Pinterest</span></a>
<a class="tooltip linkedin_tip" href="http://www.linkedin.com/in/romeltea" target="_blank">
<span>Linkedin</span></a>
</div>

Itu dia Cara Membuat Ikon Sosial Media di Sidebar Blog versi blog ini. Banyak cara lain, silakan Googling :)