Memuat Halaman
"Sharing Bookmark Dock OS X Dengan jQuery dan CSS3"
Koneksi lambat? | Gunakan blog dalam versi mobile.
Tetap berusaha terhubung dengan Adityas Blog
Coba gunakan blog dalam versi mobile atau tekan F5 untuk memuat ulang halaman.

Sharing Bookmark Dock OS X Dengan jQuery dan CSS3

Sharing Bookmarks Dock OS X jQuery CSS3
Kali ini saya akan membagikan sebuah widget sharing bookmark keren untuk para blogger. Sharing bookmark ini saya buat hampir seperti Dock pada OS dan tentunya sangat menarik jika widget ini ikut nimbrung di blog anda.

Dengan memasang sharing bookmark ini blog anda akan lebih mudah lagi untuk mendapatkan traffic, karena mungkin saja salah satu artikel anda dibagikan oleh pengunjung ke beberapa situs social media seperti facebook, twitter dsb.

Berikut penampakan dari widget sharing bookmarks ini

  • Stumbleupon


  • Delicious

  • Digg

  • facebook

  • Google

  • Linkedin

  • Technorati

  • Twitter

  • RSS
Widget ini tidak dalam posisi static seperti contoh di atas, tetapi widget sharing bookmarks ini akan berada pada posisi floating atau berpindah-pindah mengikuti perpindahan posisi pada bagian bawah halaman.

Memasang Widget Sharing Bookmarks

Untuk pemasangannya anda cukup mengikuti tahap-tahap sederhana seperti di bawah ini.
Pertama kali temukan kode ]]></b:skin> lalu copy paste CSS di bawah ini tepat di atas kode tersebut
div#adityasBlogContainer {
 position: fixed;
 bottom: 113px;
 height: 0px;
 text-align: center;
 left:0;
 width:100%;
 line-height: 1;
 z-index: 100;
}

ul.adityasBlog-dock li span{
 font-weight: normal;
 font-style: normal;
 font-size: 100%;
 line-height: 1;
 font-family: inherit;
 text-align: left;
}

div.cap.left {
 position: absolute;
 bottom: 0px;
 left: 0px;
}

div.auth{
font-size:9px;
margin:-6px 0 0;
width:98%;
position:absolute;
}

div.cap {
 display: block;
 height: 100px;
 width: 40px;
 background: url(https://lh6.googleusercontent.com/-Bh5rPsfrrhQ/T6P8IEPGTHI/AAAAAAAABDE/5ag9gxVUEFA/s1000/adityasBlogDock.png) bottom left no-repeat;
}

div#adityasBlogwrapper:hover {
 bottom:0;
}

div#adityasBlogwrapper {
 width: auto;
 display: inline-block;
 position: relative;
 border-bottom: solid 2px rgba(255, 255, 255, .35);
 line-height: 0;
 bottom:-40px;
 -webkit-transition:all 0.2s ease-in;
 -moz-transition:all 0.2s ease-in;
 -o-transition:all 0.2s ease-in;
}

Inherited from div#adityasBlogContainer
div#adityasBlogContainer {
text-align: center;
line-height: 1;
}

ul.adityasBlog-dock { 
 display: inline-block; 
 height: 110px; 
 padding: 0 40px 0 0; 
 background: url(https://lh6.googleusercontent.com/-Bh5rPsfrrhQ/T6P8IEPGTHI/AAAAAAAABDE/5ag9gxVUEFA/s1000/adityasBlogDock.png) no-repeat right bottom; 
 overflow: hidden; 
 margin: 0 0 0 40px; 
}

ul.adityasBlog-dock li {
 display: block;
 position: relative;
 float: left;
 width: 40px;
 height: 60px;
 margin: 53px 0 0 0;
 -webkit-transition: 0.175s linear;
 -webkit-transition-property: -webkit-transform margin;
 -moz-transition: 0.175s linear;
 -moz-transition-property: -moz-transform margin;
 -o-transition: 0.175s linear;
 -o-transition-property: -o-transform margin;
 text-align: center;
}
  
ul.adityasBlog-dock li a {
 display: block;
 height: 29px;
 padding: 0 1px;
 -webkit-transition: 0.15s linear;-moz-transition: 0.15s linear;
 -webkit-transition-property: -webkit-transform margin;
 -moz-transition-property: -moz-transform margin;
 -o-transition-property: -o-transform margin;
 margin: 0;
 -webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.45, transparent), to(rgba(255, 255, 255, 0.25)));
}

ul.adityasBlog-dock li a img { 
 width: 35px; 
width: 35px;
padding: 0;
border: 0;
background: transparent;
}
  
ul.adityasBlog-dock li:hover { 
 margin-left: 9px; margin-right: 9px;
 z-index: 200;
}

ul.adityasBlog-dock li:hover a { 
 -webkit-transform-origin: center bottom;
 -webkit-transform: scale(1.6);
 -moz-transform-origin: center bottom;
 -moz-transform: scale(1.6);
 -o-transform-origin: center bottom;
 -o-transform: scale(1.6);
}

ul.adityasBlog-dock li.nearby { 
 margin-left: 6px; margin-right: 6px;
 z-index: 100;
}

ul.adityasBlog-dock li.nearby a { 
 -webkit-transform-origin: center bottom;
 -webkit-transform: scale(1.35);
 -moz-transform-origin: center bottom;
 -moz-transform: scale(1.35);
 -o-transform-origin: center bottom;
 -o-transform: scale(1.35);
}

ul.adityasBlog-dock li span { 
 background: rgba(0,0,0,0.75); 
 position: absolute; 
 bottom: 80px; 
 margin: 0 auto; 
 display: none; 
 width: auto; 
 font-size: 11px; 
 font-weight: bold; 
 padding: 3px 6px; 
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 border-radius: 6px; 
 color: #fff; 
}

ul.adityasBlog-dock li:hover span { 
 display: block; 
}

Selanjutnya copy paste jQuery di bawah ini di atas kode </head>
Jika ditemplate anda sudah terpasang jQuery, bagian yang dihighlight anda abaikan saja.
[hg]<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'></script>[/hg]
<script type='text/javascript' src='https://sites.google.com/site/adityameilaz/file-adityas-blog/adityasBlogTipsy.js'></script>
<script type='text/javascript'>
  $(document).ready(function(){
   $("a[rel=tipsy]").tipsy({fade: true, gravity: "s"});

    $("ul.adityasBlog-dock li").each(function (type) {
        $(this).hover(function () {
          $(this).prev("li").addClass("nearby");
          $(this).next("li").addClass("nearby");
        },
        function () {
          $(this).prev("li").removeClass("nearby");
          $(this).next("li").removeClass("nearby");
        });
      });
  });
</script>

Langkah terakhir, temukan kode seperti di bawah ini
<b:if cond='data:blog.pageType == &quot;item&quot;'>
         <data:post.body/>

lalu letakkan code di bawah ini setelah tag <data:post.body/> dari kode yang anda cari tersebut
<div id='adityasBlogContainer'>
 <div id='adityasBlogwrapper'>
  <div class='cap left'></div>
   <ul class='adityasBlog-dock'>
    <li class='active'>
     <span>Stumbleupon</span>
     <a target='_blank' rel='nofollow' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title '><img src='https://lh6.googleusercontent.com/-FAxgPuexrl8/T6PBICnaJ9I/AAAAAAAABCc/0MxCQ2PTCMM/s64/stumbleupon.png'/></a>
    </li>
    <li>
     <span>Delicious</span>
     <a target='_blank' rel='nofollow' expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title '><img src='https://lh3.googleusercontent.com/-jy7YmNk-XWk/T6PBEj1BQ8I/AAAAAAAABBw/LKBgadKc8c8/s64/delicious.png'/></a></li>
    <li>
     <span>Digg</span>
     <a target='_blank'  expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow'><img src='https://lh4.googleusercontent.com/-KJJQosOJ1nA/T6PBFBpQdaI/AAAAAAAABB0/qwAjfNU1x2E/s64/digg.png'/></a></li>
    <li>
     <span>facebook</span>
     <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='javascript:window.open(this.href,&apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&apos;);return false;' rel='nofollow'><img src='https://lh6.googleusercontent.com/-ZVkbzYCMbJM/T6PBFQEtfhI/AAAAAAAABCA/hfET4MK-g5Y/s64/facebook.png'/></a></li>
    <li>
     <span>Google</span>
     <a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,&apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&apos;);return false;' rel='nofollow'><img src='https://lh3.googleusercontent.com/-_0U5JepAjrc/T6PBGfUCGgI/AAAAAAAABCE/ilh410_fo5o/s64/google.png'/></a></li>
    <li>
     <span>Linkedin</span>
     <a target='_blank'  expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow'><img src='https://lh4.googleusercontent.com/-joK50DBKGh0/T6PBG4NlocI/AAAAAAAABCM/3TeBX-exTNs/s64/linkedin.png'/></a></li>
    <li>
     <span>Technorati</span>
     <a target='_blank'  expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow'><img src='https://lh5.googleusercontent.com/-Tstl-feeBfA/T6PBJAs5fCI/AAAAAAAABCg/hrAJA23tisw/s64/technorati.png'/></a></li>
    <li>
     <span>Twitter</span>
     <a target='_blank'  expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow'><img src='https://lh3.googleusercontent.com/-pt7TokaVluM/T6PBJ2R08dI/AAAAAAAABCs/TBwcGDFV1hQ/s64/twitter.png'/></a></li>
    <li>
     <span>RSS</span>
     <a target='_blank'  expr:href='data:blog.homepageURL + &quot;/feeds/posts/default&quot;'><img src='https://lh4.googleusercontent.com/-h6CXSXo-rvM/T6PBHQEfJBI/AAAAAAAABCY/jud8_XJ_e4c/s64/rss.png'/></a></li>
   </ul>
 </div>
</div>
Simpan dan selesai!
Kalau ada masalah jangan sungkan-sungkan untuk bertanya, saya siap membantu

Gabung ke group:

Artikel Terkait

1 Respon Komentar

nono juarno, said...
December 31, 2012 at 8:44 PM

ga ketemu....

Tinggalkan Komentar Anda?

Komentar anda akan dihapus jika :
1. SPAM atau meninggalkan komentar mengandung unsur SARA
2. Berkata kasar atau kata-kata negatif lainnya
3. Meninggalkan komentar dengan link hidup
4. Komentar tidak berhubungan dengan tema
5. Jika anda ingin berlangganan "komentar" dari artikel ini, pilih link "Subscribe by email" pada bagian bawah form komentar

:a: :b: :c: :d: :e: :f:
:g: :h: :i: :j:

Emotion lainnya?