Photobucket

Minggu, 18 Desember 2011

Cara Buat Tombol Share Box Sosial Melayang di Blog - Part I

NBnews -  Walau sudah bayak teman-teman blogger yang posting artikel Share Box Sosial secara melayang Parti I dan Part - II  namun tiada salahnya NB juga kembali  reposting di blog  karena sobat kebetulan mendapatkan artikel ini di blog NB...dan juga kebetulan NB sendiri baru mendapatkan ilmu ini... *___!


Tidak panjang lebar langsung saja ke TKP

Berikut adalah langkah-langkah cara membuatnya :

- Login ke akun Blogger Anda.
- Pergi ke Desain> Elemen Halaman. (Untuk Antarmuka New Blogger Ke Layouts)
- Klik Tambah Gadget.
- Dalam sebuah jendela Gadget, pilih HTML / Javascript.

Copy kode berikut dan paste di dalam kotak konten.



<style>
#nav-dcssb, #nav-dcssb li {
margin: 0;
padding: 0;
list-style: none;
}
#nav-dcssb {
}
#nav-dcssb li {
padding: 5px;
}
#nav-dcssb li.size-box {
text-align: center;
height: 60px;
}
#nav-dcssb li.size-small {
height: 30px;
}
/* Floater */
.dc-social-float .tab {
cursor: pointer;
height: 44px;
margin-left: -1px;
}
.dc-social-float .dc-social-float-content {
background: #fff;
border: 1px solid #bbb;
padding: 10px;
}
.dc-social-float .dc-social-float-content {
border-radius: 10px; -webkit-border-radius: 10px;
}

/* Slick */
.dc-social-slick .dc-social-slick-content {
padding: 10px;
background: #fff;
border: 1px solid #ccc;
}
.dc-social-slick.vertical .dc-social-slick-content {
width: 78px;
}
.dc-social-slick.horizontal.left #nav-dcssb li.size-small, .dc-social-slick.horizontal.right #nav-dcssb

li.size-small {
height: 60px;
}

.dc-social-slick.top {
top: 0;
}
.dc-social-slick.bottom {
bottom: 0;
}
.dc-social-slick.right {
right: 0;
}
.dc-social-slick.left {
left: 0;
}
.dc-social-slick.right, .dc-social-slick.left {
padding-top: 2px;
background: url(images/bg_slick_top.png) repeat-x 0 0;
}

.dc-social-slick.right .dc-social-slick-content {
border-top: none;
border-right: none;
border-radius: 0 0 0 10px; -webkit-border-radius: 0 0 0 10px;
padding: 10px 10px 20px 10px;
}
.dc-social-slick.left .dc-social-slick-content {
border-top: none;
border-left: none;
border-radius: 0 0 10px 0; -webkit-border-radius: 0 0 10px 0;
padding: 10px 10px 20px 10px;
}
.dc-social-slick.left.horizontal .dc-social-slick-content, .dc-social-slick.right.horizontal .dc-social-

slick-content {
border-radius: 0; -webkit-border-radius: 0;
padding: 10px 10px 18px 10px;
}
.dc-social-slick.top.vertical .dc-social-slick-content, .dc-social-slick.bottom.vertical .dc-social-

slick-content {
border-top: none;
border-bottom: none;
}

.dc-social-slick .tab {
cursor: pointer;
}
.dc-social-slick.top .tab, .dc-social-slick.bottom .tab {
height: 46px;
}
.dc-social-slick.left .tab, .dc-social-slick.right .tab {
width: 46px;
}

.dc-social-slick.bottom .tab {
top: 1px;
}
.dc-social-slick.top .tab {
bottom: 1px;
}
.dc-social-slick.align-left .tab {
margin-left: -1px;
}
.dc-social-slick.align-right .tab {
margin-right: -1px;
}

.dc-social-slick.bottom.align-right.horizontal .dc-social-slick-content {
border-radius: 10px 0 0 0;
-webkit-border-radius: 10px 0 0 0;
}
.dc-social-slick.bottom.align-left.horizontal .dc-social-slick-content {
border-radius: 0 10px 0 0;
-webkit-border-radius: 0 10px 0 0;
}

.dc-social-slick.top.align-right.horizontal .dc-social-slick-content {
border-radius: 0 0 0 10px;
-webkit-border-radius: 0 0 0 10px;
}
.dc-social-slick.top.align-left.horizontal .dc-social-slick-content {
border-radius: 0 0 10px 0;
-webkit-border-radius: 0 0 10px 0;
}

.dc-social-slick.right .tab, .dc-social-slick.left .tab {
margin-top: -2px;
}
.dc-social-slick.right .tab {
left: 1px;
}
.dc-social-slick.left .tab {
right: 1px;
}

.dc-social-slick.horizontal #nav-dcssb li {
float: left;
}
.clear {clear: both;}
</style>
<script type="text/javascript" src="

https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type='text/javascript'

src='http://stylifyyourblog1.googlecode.com/svn/trunk/easingplusslickfloat.js'></script>


<div id="dc-dcssb">
<ul id="nav-dcssb" >
<li id="dcssb-twitter" class="size-box"><script src="http://tweetmeme.com/i/scripts/button.js"

type='text/javascript'></script>
</li>
<li id="dcssb-facebook" class="size-box"><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>
</li>
<li id="dcssb-plusone" class="size-box"><script type="text/javascript"

src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</li>
<li id="dcssb-linkedin" class="size-box"><script src="http://platform.linkedin.com/in.js"

type="text/javascript"></script>
<script type="IN/Share" data-counter="top"></script></li>
<li id="dcssb-stumble" class="size-box">
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</li>
<li id="dcssb-digg" class="size-box">
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</li>
</ul>
</div>
<script type="text/javascript">
jQuery(window).load(function() {
jQuery('#dc-dcssb').dcSocialFloater({
idWrapper : 'dcssb-float',
width: '98',
location: 'bottom',
align: 'left',
offsetLocation: 50,
offsetAlign: 50,
center: false,
centerPx: 0,
speedContent: 600,
speedFloat: 1000,
tabText: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1KQBQDzD3vv4oUA45pxgfiL9Z7sAB3PFzaqX4_BuXodGG4FBbwa7FgDtFsNKpGN50SO4CpQ0-fsAj6JlWv4aWjOSYrjlRXWP6UNrAraoGhDa2IlaeCZejxpywrx4svqRJXtsAOqPA6Vk/s1600/tab_bottom_floating.png" alt="Share" />',
autoClose: false,
loadOpen: false,
tabClose: true,
classOpen: 'dcssb-open',
classClose: 'dcssb-close',
classToggle: 'dcssb-link'
});
});
</script>


Simpan gadget anda.

Untuk penyesuaiannya :

1. Alignment & Kecepatan
Untuk mengubah posisi widget, cek warna biru dengan setiap atribut memiliki arti yang biasa. Untuk mengubah atribut kecepatan yaitu pada speedContent dan speedFloat (satuan waktu adalah mikrodetik).

2. Tertutup atau Terbuka
Widget ini memiliki pilihan apakah anda ingin tombol-tombol ini akan terlihat ketika tombol ini diklik atau membiarkannya tetap dalam keadaan terbuka. Untuk perubahan ini pilihan pencariannya terdapat pada atribut "loadOpen" dalam kode berwarna merah.

3. Menambah / Menghapus Tombol
Tombol dapat ditambahkan atau dihapus dengan mudah. Untuk menghapus tombol hapus kode di antara tag-li. Sedangkan untuk menambahkan tombol cukup tambahkan tag-li dengan sesuatu kelas atribut seperti kode berikut :


<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;"><li class="size-box">

----The Button Code----

</li></span>

- Simpan lalu lihat hasilnya
- Selesai n beres.

Selamat mencoba n semoga bermanfaat.




Apakah Anda Suka? Please Share.

Youk! Baca Artikel Terkait Dibawah Ini:

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites