Cara Membuat Ikon Sosial Media di Sidebar Blog

Posted by | Follow @romeltea

Cara Membuat Ikon Sosial Media di Sidebar Blog
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 :)

» Thanks for reading Cara Membuat Ikon Sosial Media di Sidebar Blog

0 Komentar untuk "Cara Membuat Ikon Sosial Media di Sidebar Blog"

No Spam, Please!

Back To Top