28 Maret 2011

Membuat Floating Social Network di Blogspot

Bingung, saya mau ngasih judul apa buat postingan ini. Saya juga gak tau namanya itu apaan. Yang saya tau itu floating sejenis widget yang bisa melayang di blogspot kita. Kalau salah mohon di maklum, namanya juga Blogger Newbie. Cuma itu sih yang saya tahu.
Sebelumnya saya mencari-cari di google, bagaimana caranya untuk membuat widget seperti ini, karena yang kebanyakan adalah widget seperti Guest Book/Buku Tamu, namun yang saya ingin kan adalah yang bisa memerintahkan bila di klik maka akan mengarah ke Facebook, Twitter atau Jejaring sosial lainnya.
Widget yang saya maksud adalah widget yang ada di blog saya ini, anda lihat di pojok kiri atas, ada Add And Follow Me, bila di klik maka akan muncul beberapa icon yang akan mengarahkan anda ke suatu link.
Baiklah, ini tutorial blogger pertama saya, bila salah mohon di maklum yah :D
1. Masuk ke Dashboard blog anda dan klik di tab Rancangan, terus pilih Elemen Laman, tambahkan gadget HTML/Java Script.
2. Tambahkan kode di bawah ini

<!-- Begin Show Hide Floating - http://fachriceg.blogspot.com --> <style type="text/css"> #juliocaesarFX{ position:fixed; top:30px; z-index:+1000; } * html #juliocaesarFX{position:relative;} .juliocaesarFXtab{ height:108px; width:37px; float:right; cursor:pointer; background:url('LINK FOTO BACKGROUND') no-repeat; } .juliocaesarFXcontent{ float:right; border:2px solid #4c4444; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; background:#ffffff; padding:10px; } </style> <script type="text/javascript"> function showHidejuliocaesarFX(){ var juliocaesarFX = document.getElementById("juliocaesarFX"); var w = juliocaesarFX.offsetWidth; juliocaesarFX.opened ? movejuliocaesarFX(0, 40-w) : movejuliocaesarFX(40-w, 0); juliocaesarFX.opened = !juliocaesarFX.opened; } function movejuliocaesarFX(x0, xf){ var juliocaesarFX = document.getElementById("juliocaesarFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; juliocaesarFX.style.left = x.toString() + "px"; if(x0!=xf){setTimeout("movejuliocaesarFX("+x+", "+xf+")", 10);} } </script> <div id="juliocaesarFX"><div class="juliocaesarFXtab" onclick="showHidejuliocaesarFX()"> </div> <div class="juliocaesarFXcontent">
<div style="text-align:center;"><b><span>Add and Follow Me</span></b></div>
<div style="text-align:center;">
<div style="text-align:center;">
<center><a href="LINK SOCIAL NETWORK YANG MAU DI SHARE (MISAL FACEBOOK)" title="Add Me"><img src="LINK MINI ICON" /></a></center>
<div style="text-align:right"> <a href="javascript:showHidejuliocaesarFX()"> [close] </a> </div> </div> </div> <script type="text/javascript"> var juliocaesarFX = document.getElementById("juliocaesarFX"); juliocaesarFX.style.left = (40-juliocaesarFX.offsetWidth).toString() + "px"; </script> <!-- End Show Hide Floating - http://fachriceg.blogspot.com -->
3. Save dan refresh Blog Anda.
 NB :
1. Untuk yang berwarna merah, adalah icon/gambar floating nya, icon/gambar yang akan terus melayang. Sesuaikan dengan kreasi anda sendiri. Upload ke situs penyedia penyimpanan file foto, seperti phobucket. Terus Copy dan Paste kan link gambarnya.
2. Untuk yang berwarna biru, adalah link jejaring sosial yang mau anda masukan, seperti profile facebook anda. Tinggal copy dan paste kan link profile facebook anda disitu.
3. Untuk yang berwarna hijau, adalah link foto yang mau anda tampilkan sebagai icon/gambar dari link jejaring sosial no 2 di atas.
Maaf apabila bahasa dan tutorial nya masih membingungkan, namanya juga sedang belajar, mohon dimaklum.
Posting Komentar