Photobucket

Minggu, 18 Desember 2011

Cara Buat Kotak Share Sosial Melayang di Blog - Part II

NBnews -  Seperti di pembahasan pertama NB akan membuat dua bagian bagaimana cara membuat Kotak Share Sosial dengan dua bagian yakni Box Part I dan Box Part II, dan ini adalah bagian ke II,  nanti Sobat tinggal pilih yang mana di suka... klo NB sendiri pasang yang Part II sepertinya lebih menarik walau  tombol2 sosialnya terpasang sedikit, sobat sendiri bisa menambahkan nanti... ada petunjuknya di  Part I


Langung ke TKP


Caranya sama :
- Login dulu ( semua di awali Log in) heheh
- Masuk ke Rancangan
- Tambahkan Gadget
- Klik kode HTM/Script
- Copy Paste kode berikut:

<style type="text/css">
*{margin:0;padding:0;}

* html #z33sHare{
position: absolute;
}

#z33sHare{
left:6%;width: 70px;background:transparant;border:0px solid #E7E7E7;-moz-border-radius:3px;-webkit-border-radius:3px;
position:fixed;
bottom: 20%;
}

#z33sHare div{
padding:6px 6px 6px 5px;
}

#stw{
margin-left:-2px;
}

#sfs{
margin-left:-5px;
}

</style>
<div id="z33sHare">
<div id="ssl-box">
<div id="stw">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
<div><a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count"></a><script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
</div>
<div>
<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class="DiggThisButton DiggMedium"></a>
</div>
</div>
<div><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><div style="clear:both;"></div></div>


- Simpan
- Selesai dan lihat hasilnya.


NB: Sobat bisa ganti warna background kotak sosial ini dengan cara cari  kode"background:transparant" lalu transparant silahkan sobat ganti dengan kode warna yang di inginkan, dan untuk posisi yang di inginkan kiri atau kanan sobat bisa cari kode ini left:6% deretan dari kode background tadi, lalu ganti sesuai keinginan sobat, untuk pengaturan ke suka posisi atas atau di bawah cari kode ini   bottom: 20%; ganti berapa persen yang di hendaki, klo NB sendiri Ganti Backroud dari Transparan ke warna Orange, dari Posisi kiri jadi ke kanan dan Bottom tadi dari 20% Menjadi 10 %.

Beres! Semoga bermanfaat



Apakah Anda Suka? Please Share.

Youk! Baca Artikel Terkait Dibawah Ini:

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites