Membuat Widget Social Media Melayang di Samping Blog

11/29/2015
Membuat Widget Social Media Melayang di Samping Blog

Halo sobat Ingin Tahu, hari ini saya akan membagikan tutorial cara membuat widget sosial media melayang di samping blog - Mungkin anda sering membaca artikel yang mirip seperti ini, sudah tidak asing lagi bagi para blogger tentunya. Namun saya tertarik dengan widget yang akan saya bagikan oleh karena widget ini ringan dan tidak memakan tempat.

Widget Sosial Media sangatlah penting untuk para blogger, karena sosial media merupakan salah satu sumber dimana kita dapat membagikan hasil posting kita disitu. Baiklah saya rasa anda sudah sangat mengerti tentang sosial media, jadi kita langsung saja membahas caranya.

Tetapi Sebelumnya lebih baik anda melihat demo terlebih dahulu, supaya lebih yakin apakah anda akan menerapkan widget ini atau tidak.


Bagaimana sobat? keren kan? caranya cukup sederhana dan sangat mudah, hanya memerlukan waktu beberapa detik saja. Maka dari itu silahkan dicoba ya.

Cara Menambahkan Widget ke Blog Anda:

1. Login ke blogger > Layout > Tambahkan Gadget > Pilih Html/Javascript
2. Salin kode di bawah ini, lalu tambahkan ke gadget anda

<style type="text/css">
ul#social{position:fixed;margin:0;padding:0;top:10px;left:0;list-style:none;z-index:9999}ul#social li{width:100px}ul#social li a{display:block;margin-left:-2px;width:100px;height:70px;background-color:#fff;background-repeat:no-repeat;background-position:center center;border:1px solid #AFAFAF;-moz-border-radius:0 10px 10px 0;-webkit-border-bottom-right-radius:10px;-webkit-border-top-right-radius:10px;-khtml-border-bottom-right-radius:10px;-khtml-border-top-right-radius:10px;-moz-box-shadow:0 4px 3px #000;-webkit-box-shadow:0 4px 3px #000}ul#social .twitter a{background:#0F96C6 url(https://lh3.googleusercontent.com/-AvERBuMFRdY/VlzH9Y1VddI/AAAAAAAAASM/z7MKv8mYQvQ/h120/ingin-tahu-blogspot-com-sosial-media-twitter.png)no-repeat;background-position:center center}ul#social .googleplus a{background:#D73D27 url(https://lh3.googleusercontent.com/-dms-n861FLk/VlzHvLWE5WI/AAAAAAAAASE/U-pzfJ0i6D8/h120/ingin-tahu-blogspot-com-sosial-media-google-plus.png)no-repeat;background-position:center center}ul#social .facebook a{background:#1A4B97 url(https://lh3.googleusercontent.com/-gtx-6vy4Bc8/VlzIG7Jmu1I/AAAAAAAAASU/RwhBHlrOMmo/h120/ingin-tahu-blogspot-com-sosial-media-facebook.png)no-repeat;background-position:center center}ul#social .rss a{background:#FAAE17 url(https://lh3.googleusercontent.com/-N3deZ9LbTKU/VlzIcrwLvKI/AAAAAAAAASk/tCRpFuGc2tw/h120/ingin-tahu-blogspot-com-sosial-media-rss.png)no-repeat;background-position:center center}ul#social .pinterest a{background:#963336 url(https://lh3.googleusercontent.com/-4SSzKxQ2rY4/VlzISyHIJII/AAAAAAAAASc/zXwESoiXeAo/h120/ingin-tahu-blogspot-com-sosial-media-pinterest.png)no-repeat;background-position:center center}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function(){$("#social a").stop().animate({marginLeft:"-85px"},1e3),$("#social > li").hover(function(){$("a",$(this)).stop().animate({marginLeft:"-2px"},200)},function(){$("a",$(this)).stop().animate({marginLeft:"-85px"},200)})});
</script>
<ul id='social'>
 <li class='twitter'><a href='#' title='Twitter'></a></li>
 <li class='googleplus'><a href='#' title='Google Plus'></a></li>
 <li class='facebook'><a href='#' title='Facebook'></a></li>
 <li class='rss'><a href='#' title='Rss'></a></li>
 <li class='pinterest'><a href='#' title='Pinterest'></a></li>
</ul>
Catatan:
  • Jika di template kamu sudah memiliki kode jquery seperti <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> lebih baik di hapus kode tersebut.
  • Ganti tanda # dengan url media sosial anda
3. lalu Save dan lihat hasilnya. . . Selesai !!

Jika ada kesalahan dalam artikel ini saya berharap anda bisa berkomentar dan memberikan saran yang terbaik, demi kebaikan kita bersama, demikian pembahasan saya tentang membuat widget sosial melayang, dan nantikan tutorial selanjutnya, terima kasih.

Berlangganan via email

Artikel Terkait

Previous
Next Post »

8 Komentar

Write Komentar
11/30/2015 delete

wah sangat membantu gann (y)

Reply
avatar
Ingin Tahu
AUTHOR
11/30/2015 delete

Selamat Mencoba gan :)

Reply
avatar
Reza Fahlevi
AUTHOR
11/30/2015 delete

bermanfaat ane ijin coba vroh

Reply
avatar
Ingin Tahu
AUTHOR
11/30/2015 delete

Silahkan bro. semoga bermanfaat :)

Reply
avatar
Olivia Yuhana
AUTHOR
12/01/2015 delete

wah sip gan.. selama ini ane sll bertanya2. skrg terjawab sudah (y)

Reply
avatar
Ingin Tahu
AUTHOR
12/01/2015 delete

silahkan di coba widget melayang yang tidak memakan ruang plus ringan lagi ^_^

Reply
avatar
Akbar Yoppi
AUTHOR
12/01/2015 delete

Wah cucok nih gan yg blom tau psng widget sosmed.., nice info gan

Reply
avatar
Ingin Tahu
AUTHOR
12/01/2015 delete

coba aja gan semoga cocok di hati :)

Reply
avatar

1. Berkomentarlah dengan bijak
2. Mohon jangan menyisipkan link aktif
3. Dilarang untuk spam
4. Terima Kasih Telah berkomentar yang relevan
EmoticonEmoticon