Cara Membuat Tombol Sosial Melayang

Slick Social Buttons Share merupakan Plugin Wordpress yang ditambahkan untuk blog anda dengan tampilan melayang. Kode script dari plugin tesebut telah dirubah oleh beberapa blog dan diantaranya adalah stylifyyourblog.com agar dengan mudah diintegrasikan dengan blogger. Seperti halnya Widget Social lainnya, anda dapat juga menambahkan berbagai jenis tombol sosial lainnya. Fitur ini sangat menyenangkan karena mempunyai fitur geser yang menunjukkan tombol-tombol ini hanya bila pengguna ingin menggunakan dan menyembunyikan tombol ketika tidak diperlukan. Disini saya akan membahasnya secara umum yang sering digunakan.

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/AVvXsEg4hpIzyhVeEzJ_h81Qp79AAi9RrNwlu_jZ0D2r6vFt15mdqS0oBJ0v3gq207_DdPWJxuYQ3l0ju_Aff-u4I0zVTHTzLySD-TqMWHg_ZwOXbggKHSKQkbZdEjzja16Keg8kkjb0OEOvxTQ/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>

Demikianlah artikel tentang Cara Membuat Tombol Sosial Melayang yang saya buat ditengah-tengah kesibukan saya dalam menjalani aktivitas sehari-hari di dunia advertising dan semoga bermanfaat buat rekan-rekan blogger lainnya.

Best regards,

Candrameda Al Ghozali

Depot Seni Grafis - Digital Printing Indoor and Outdoor Service
Large Format Printing
Banner Specialist
Hp.: 0821 41 335123
candrameda@gmail.com
http://depotsenigrafis.blogspot.com/