Tombol Share Artikel Mirip Windows Dock

Blogger tutorial - Hari ini enak-enak jalan-jalan saya menemukan hal yang menarik yang kayaknya pantas saya publish ulang di blog ini. Ya saya menemukan tombol berbagi yang biasanya berada dibawah artikel bisa di modifikasi layaknya tombol widget dock di windows.

Ikuti langkah-langkah pemasangannya dibawah ini:
1. Seperti biasa masuk atau login ke blogger "dashboard" sobat
2. Klik menu "rancangan"
3. Pada elemen halaman, tambahkan "gadget baru"
4. Copy dan paste scrypt di bawah ini

<style type="text/css">
#sharedock { position: fixed; bottom: 0; left: 0; width: 100%; height: 90px; z-index: 999; }
#dock { position: relative; bottom: 0; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; }
.dock-container { position: relative; background:url(http://2.bp.blogspot.com/_JwD5r652h00/S9t-pmEipgI/AAAAAAAAAVs/iDkLHdkeSNk/widget-bg-allblogtools-com.gif) no-repeat bottom center; height: 50px; padding: 20px 0 20px 0; }
.dock-container .custom_images a { display: block; position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; cursor: pointer; }
.dock-container .custom_images span { background: rgba(0,0,0,.75); display: none; padding: 2px 8px; margin-left: 17px; font-size: 11px; color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.dock-container .custom_images img { border: 0; margin: 5px 0px 10px 0px; width: 100%; }
</style>

<div id="sharedock">
<div id="dock">
<div class="dock-container">

<div class="addthis_toolbox">

<div class="custom_images">

<a class="addthis_button_facebook"><span>Facebook</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_facebook.png" alt="Share to Facebook" /></a>
<a class="addthis_button_twitter"><span>Twitter</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_twitter.png" alt="Share to Twitter" /></a>
<a class="addthis_button_myspace"><span>MySpace</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_myspace.png" alt="Share to MySpace" /></a>
<a class="addthis_button_stumbleupon"><span>Stumble</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_stumbleupon.png" alt="Stumble It" /></a>
<a class="addthis_button_reddit"><span>Reddit</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_reddit.png" alt="Share to Reddit" /></a>
<a class="addthis_button_delicious"><span>Delicious</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_delicious.png" alt="Share to Delicious" /></a>
<a class="addthis_button_more"><span>More...</span><img src="http://addthis.com/cms-content/images/gallery/addthis_64.png" alt="More..." /></a>
</div>
</div>
</div>

Ganti code yang berwarna hijau dengan gambar sobat. Code hijau merupakan baground belakang widget semoga bermanfaat
Source:masdoyok.com

Ditulis Oleh : ARIF'S ~ Arif Wong Ndeso

Anda sedang membaca sebuah artikel yang berjudul