Sharing Dock Ala Mac OS

Sharing Dock Ala Mac OS dibawah Posting

Sharing Dock Ala Mac OS ini sama halnya dengan widget Sharing yang lain,

Hanya saja Style nya ala Mac OS, Sobat semua tw kan Mac OS???

Sobat bisa liat contoh nya :

Demo Sharing Dock Ala Mac OSKlik disini untuk melihat demo Sharing Dock Ala Mac OS

Juga kali ini ane kasih dua Opsi untuk penempatan Sharing Dock Ala Mac OS ini..

1. Pertama ditempatkan di bawah posting pada halaman posting saja

2. Fixed di semat di sebelah bawah page.

Ok langsung saja..

Ini dia langkah-langkahnya :

Langkah ini untuk ditempatkan dibawah postingan di halaman postingan.

1. Seperti biasa login dulu ke blogger.com
2. Cari menu LAYOUT ->> Edit HTML, centang kotak kecil disamping teks Expand Template Widget
3. Cari kode <div class='post-footer-line post-footer-line-1'>

Dan taruh kode berikut di bawah kode <div class='post-footer-line post-footer-line-1'>

(Oy jangan asal copas, klik View Source nya dulu baru di copas, Ok)

+ lihat kode copy code print ?

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#sharedock { 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKJAjcR4chjAjwMPHxNkjG3uEAZ7vQ_FNwe-_vEyFKO5BqZWLyOJnVXcUM6cCbENtNvz4-VekFaSxWKePJm4cuZLPVd_es8at6btoCJv6kJd0lg2q6uTWtHTFq42FqR_DcviX8CcNgryo/) 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>
</div>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://addthis.com//cms-content/images/gallery/fisheye-iutil.min.js"></script>
<script type="text/javascript">
$(function () {
// Dock initialize
$('#dock').Fisheye(
{
maxWidth: 30,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 50,
proximity: 60,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
);
});
</script>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
  #sharedock { 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKJAjcR4chjAjwMPHxNkjG3uEAZ7vQ_FNwe-_vEyFKO5BqZWLyOJnVXcUM6cCbENtNvz4-VekFaSxWKePJm4cuZLPVd_es8at6btoCJv6kJd0lg2q6uTWtHTFq42FqR_DcviX8CcNgryo/) 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>
  </div>
  </div>
  <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://addthis.com//cms-content/images/gallery/fisheye-iutil.min.js"></script>
  <script type="text/javascript">
  $(function () { 
  // Dock initialize
  $('#dock').Fisheye(
  {
  maxWidth: 30,
  items: 'a',
  itemsText: 'span',
  container: '.dock-container',
  itemWidth: 50,
  proximity: 60,
  alignment : 'left',
  valign: 'bottom',
  halign : 'center'
  }
  );
  });
  </script>
</b:if>

4. Simpan Template, dan amankan hehe..

Sampai disini selesai untuk memasang Sharing Dock Ala Mac OS dibawah posting dihalaman postingan saja.

Lalu Langkah dibawah ini adalah untuk disematkan Fixed di bawah pada page.

1. Tambahkan elemen gadget HTML/Java script pada template anda dengan berisikan kode dibawah ini :
(Oy lagi, jangan asal copas, klik View Source nya dulu baru di copas, Ok)

+ lihat kode copy code print ?

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKJAjcR4chjAjwMPHxNkjG3uEAZ7vQ_FNwe-_vEyFKO5BqZWLyOJnVXcUM6cCbENtNvz4-VekFaSxWKePJm4cuZLPVd_es8at6btoCJv6kJd0lg2q6uTWtHTFq42FqR_DcviX8CcNgryo/) 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>
</div>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://addthis.com//cms-content/images/gallery/fisheye-iutil.min.js"></script>
<script type="text/javascript">
$(function () {
// Dock initialize
$('#dock').Fisheye(
{
maxWidth: 30,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 50,
proximity: 60,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
);
});
</script>

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKJAjcR4chjAjwMPHxNkjG3uEAZ7vQ_FNwe-_vEyFKO5BqZWLyOJnVXcUM6cCbENtNvz4-VekFaSxWKePJm4cuZLPVd_es8at6btoCJv6kJd0lg2q6uTWtHTFq42FqR_DcviX8CcNgryo/) 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>
  </div>
  </div>
  <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://addthis.com//cms-content/images/gallery/fisheye-iutil.min.js"></script>
  <script type="text/javascript">
  $(function () { 
  // Dock initialize
  $('#dock').Fisheye(
  {
  maxWidth: 30,
  items: 'a',
  itemsText: 'span',
  container: '.dock-container',
  itemWidth: 50,
  proximity: 60,
  alignment : 'left',
  valign: 'bottom',
  halign : 'center'
  }
  );
  });
  </script>

2. Simpan
3. Lalu lihat blog sobat..
4. Selesai.

Source Code Sharing Dock Mac OSKlik disini untuk mengambil source code Sharing Dock Ala Mac OS

Semoga berhasil dan semoga bermanfaat.

10 Comments:

----------------- Ratasoe Say.. On Mei 05, 2010

Wah panjang jg ya sob kodex, tp tampilanx keren kreatif bgt ..bleh ane jdkn pertimbangan ny ;-)..trims ya

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@1612365570472812203.0
My first line Comments

@1612365570472812203.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Girant_31 Say.. On Mei 05, 2010

@Ratasoe sama-sama mas..

Please CoPas of the following lines : Example:

@8844208635035151714.0
My first line Comments

@8844208635035151714.0

----------------- elok langita Say.. On Mei 06, 2010

nice totur.. ^__^ nyoba aah..

Please CoPas of the following lines : Example:

@3940851099156164961.0
My first line Comments

@3940851099156164961.0

----------------- Girant_31 Say.. On Mei 06, 2010

@elok langita Silahkan mba..
Makasih buat kunjungan nya ya mba..

Please CoPas of the following lines : Example:

@5672956073848294949.0
My first line Comments

@5672956073848294949.0

----------------- ~Srex~ Say.. On Mei 06, 2010

tips yang canggih...tak coba deh di blog percobaanku hehe...moga2 sukses...tx u

Please CoPas of the following lines : Example:

@2465037263036761182.0
My first line Comments

@2465037263036761182.0

----------------- Anonim Say.. On Mei 06, 2010

wuih mantab
trims tuk artikelnya
salam hangat dari blue

Please CoPas of the following lines : Example:

@6366766290461942004.0
My first line Comments

@6366766290461942004.0

----------------- Regi_Adi Say.. On Mei 06, 2010

keren tutorialnya. tapi saya lagi ngga pengen pasang widget baru nih...

o iya, salam kenal, salam persahabatan...

Please CoPas of the following lines : Example:

@2246743776250738925.0
My first line Comments

@2246743776250738925.0

@~Srex~ Semoga ya mas..

Please CoPas of the following lines : Example:

@5733138815657572003.0
My first line Comments

@5733138815657572003.0

@bluethunderheart Terimakasih Sob sdh berkunjung kmari..

Ane harap ga kapok ya..
Salam Silaturrahmi jg dr ane..

Please CoPas of the following lines : Example:

@4541107890426003803.0
My first line Comments

@4541107890426003803.0

@Regi_Adi Terimakasih mas sdh berkunjung kemari..

Salam kenal dan salam persahabatan juga dari ane..

Jangan kapok ya tuk kmari lagi..

Please CoPas of the following lines : Example:

@6085151031520864359.0
My first line Comments

@6085151031520864359.0

Komentar Yuuuk..

Silahkan berkomentar di postingan ini. (Gratis)
Jika Sobat ingin membalas komentar seseorang,
Sobat bisa menggunakan fasilitas reply dengan cara mengawali komentar Sobat pada baris pertama dengan:
@Kode Angka Komentar

Contohnya Penulisan Komentar:
@7203927038009495854.0
My first line Comments