Cara Buat Tombol Share Dengan Efek jQuery Nudging

Cara Membuat Tombol Share Dengan Efek jQuery Nudging, cara memasang social bookmarking share button widget ini telah di request oleh salah satu pengunjung Blogger Peer yang kebetulan tertarik sama tombol share widget nudging menggunakan efek jQuery yang ada di blog saya ini, nah kebetulan sekarang saya sempat mengulasnya dan akan saya bagikan kepada anda semua

Tombol Share widget menggunakan jQuery nudging ini sebenarnya penerapan dari apa yang saya jelaskan pada artikel saya yang sebelumnya yaitu cara membuat link bergerak - link nudging, tetapi disini saya menggunakan gambar/ikon sehingga terlihat menarik dan unik. Icon sharing widget yang ada di blooger.co.id ini terdiri dari beberapa situs social media yang umum dipakai oleh orang untuk membagikan artikel yang bermanfaat bagi kerabat mereka. Banyak dari para pengunjung bertanya kepada saya apakah script jQuery tidak berat ketika di load? jawabannya adalah TIDAK, script jQuery ini sangat ringan dan saya pun memakai script ini pada sharing widget di blog ini dan juga pada tombol back to top yang ada pada bagian bawah halaman, jadi jangan khawatir untuk memasang script jQuery pada blog anda.

Sebelum kita memasang ikon sharing widget ini ada baiknya anda back up template terlebih dahulu untuk jaga-jaga kalau ada kesalahan pemasangan

• Login di Blogger
• Masuk ke Template > Edit Html
• Centang pada Expand Widget Templates
• Cari kode ]]></b:skin>
• Copy kode dibawah ini dan paste tepat dibawah kode  ]]></b:skin>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;a.nudge, .#Label2 ul li a&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script><!-- end LinkNudging --><!-- end LinkNudging -->

• Gunakan CTRL+F kemudian cari kode <b:if cond='data:post.hasJumpLink'> setelah ketemu kemudian diatas kode tersebut akan ada kode <div style='clear: both;'/> <!-- clear for photos floats --></div>
• Copy code dibawah ini dan paste tepat diatas kode <div style='clear: both;'/> <!-- clear for photos floats --></div>

<br/>
<b:if cond='data:blog.pageType == "item"'><b>Share it to your friends..!</b><br />
<br />
<table border='0'>
<tr> <td><script type='text/javascript'>
window.___gcfg = {lang: 'en'};
(function()
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();</script><g:plusone size="standard"></g:plusone></td>
<td><div class='bookmarks'>
<a class='nudge' expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Share to Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOukK0GPlvL3kxRXc7eMoYMawRnSGnfRtTrBPbYDpCzp_i4XfRKOb64W3aDlkU-WvY7qZrthx3d8I99B8t9sZUKlLwdEkvJQyjuHmOSBqw6mJmgwTD6ujI4BDG4GZ7Kh08VOuXEW9xVpM/s1600/facebook.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Share to Facebook'/></a>
<a class='nudge' expr:href='&quot;https://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;amp;url=&quot; + data:post.url ' rel='nofollow' target='_blank'><img alt='Share this post on twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJT1qHbdOMhaRQxz2FIUlbrikdgaQx5PxqOxq73gPkpsggTEHMq8B6nb9UVdt09zXWMqMkAjMtLyiD5F6r2W1onYT2NZfrVtKe4uOCNTOIOM8qk-jTF51BnG-1tENh-pHiyS3jg3EwP04/s1600/twitter.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Share this post on twitter'/></a>
<a class='nudge' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Bookmark Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY4ub1q6jY78SbkXQIcXJPvaPltgraa0vTJG6KAbuqIAEK2ohh9DxX_sKh_rUUr2fGPsRhfBCME6QCZ_i67Kxw5FPWsWvBy5EJOwnXhM5YeUaZijs_46RMgmvNgfY63-BInDF6nAmyTk4/s1600/delicious.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Bookmark on Delicious'/></a>
<a class='nudge' expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Digg This' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgctvausiDtWh3tV5loWIvBeVH5ocohvVDQEcIblPrRYlrpSBWHE6rhm_UU_UTa6JB70d0i1vCLDqqkLjTVvG_t090yiz2xz-8YSZV89agKLh5u0JxS8QGkABrL3b07K5AFMYsn8gDLamI/s1600/digg.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Digg This'/></a>
<a class='nudge' expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Stumbleupon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT8PsqwrzUswP8StrQCDUW6t55zhn3Fn1iM0NN7jA-20Gv1PUfaT37pTHNQq7a2XZw4IP2oRH9hZtcQRBalmqB2gT6yU-LRfkB90JdjuGFS82xiZ9QtonaY6UQeM5e-Sh91BP4-Ze5kDI/s1600/stumbleupon.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Stumble This'/></a>
<a class='nudge' expr:href='&quot; http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-SrhhIHLZ34DTPtTIahQ2HniL1daiAeUU-ko188s5HC4TuGQ3DWignThpEPYoTGOBZxerN1Voc5d7shJP3_S-9e8rRfFR1E0gkgWh287gTZAtDbviwz5eHdMgOpde8kRoMIgw2RtF9mg/s1600/reddit.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Share to Reddit'/></a>
<a class='nudge' expr:href='&quot; http://myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Yahoo Bookmark' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOrb8cMu022ShZC5aMiNnqdtsLxPSFy_QHkHEf8JY-6ixADMBU0MVxbgb7RfG9Ye-ud9HyaFZP2w3sAZ2joAH49Ftxq7T-lYF2taFf5C1IgXc3qOjZbhl9c1lSvZF_0ymccSuVBWfr2IA/s1600/yahoo.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Add to Yahoo Bookmark'/></a>
<a class='nudge' expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Furl-Diigo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNt9UjY0atxMcTN6LZQyAxXhw-vetUrD96rdmGvI3vtq0VxzdPRCFR-beqn0K36ZKi4Ne3cxb54W73vBB2p5KZs1ifbC3SBH4Un2z64OWkSiXBnA1aCFswG-3aWRB3sRFIOzxyZ_nBLeQ/s1600/furl.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Send to Furl/Diigo'/></a>
<a class='nudge' expr:href='&quot; http://www.google.com/bookmarks/mark?op=edit&amp;amp;output=popup&amp;amp;bkmk=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Google Bookmark' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs7fSsgWd1sH-OwM_2n2p2yJy7vcMd2-mV3sdTWrZ3dLxQfgVGrRVf_5t0D6d2qD1PQ7ootxRTeqSwVPDaJz9HJvlhfReYzwNiB1_pMcFj2HF0MhgbavfvDJYSSTjdtcoqo4avsszqMNM/s1600/google.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Add to Google Bookmark'/></a>
<a class='nudge' expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ZVvCSrWttae-jgMIlYmSYlzUsCIRIkYEMN2RyFC0ViRljg25_6aA92f1s5vZuOldC5I5DZU7AQx5I1xid1ry8UawFrn4eCAMOxcowMVp8-mUOlnIFJy2tmbxWt94cDrqRlMo4uDsleQ/s1600/technorati.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Add to Technorati'/></a>
<a class='nudge' expr:href='&quot; http://www.newsvine.com/_tools/seed&amp;amp;save?u=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Newsvine' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZoiNHjPYDmen13ucsSpbZpanageibqhGLmm4TcD0rhSvID0bmnV_EhQMAxYYvVKPEeJAzcdGi1_mmGuhhDR7FGPEKbULmo8xTF2hGNIp1RMZkb5HvGztUrxgFJfn2mWKDsf0JAxnOulc/s1600/newsvine.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Save to Newsvine'/></a>
<a class='nudge' href='http://blooger.co.id' target='_blank'><img alt='Tips Triks Blogger, Tutorial SEO, Info' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzAFQvDcARe5uoRKWu2QOrRYTpqd_DESBpvchAMzNFs5rD_ThMWSWb178qjQRliLLhTbBfsg5Oe2nqBWLYWa2CwawK1ky85FFcoD9ZWydKc0G40EBsQF7GB9FQ1LNct2DelUDpCbPhQZA/s1600/blogger-peer.gif' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;'/></a></div>
</td></tr>
</table>
</b:if>

• Terakhir simpan template

PENTING: SETELAH KEMARIN GOOGLE CHROME MELAKUKAN UPDATE, TOMBOL SHARE DENGAN EFEK NUDGING INI TIDAK DAPAT BEKERJA DENGAN BAIK KALAU DIBUKA MENGGUNAKAN BROWSER GOOGLE CHROME. SARAN SAYA, LEBIH BAIK GUNAKAN TOMBOL SHARE INI TANPA EFEK NUDGING DEMI KENYAMANAN PEMBACA BLOG ANDA.

CARANYA: Jangan memasang kode script yang dibawah kode ]]></b:skin> atau skip saja kode itu, kemudian lanjutkan dengan kode yang kedua dan terakhir simpan template.

Cara Membuat Link Bergerak Bergoyang / Nudging di Blog

Cara membuat link bergerak/bergoyang di blog, Link Nudging adalah suatu efek yang bergerak atau bergoyang dari sebuah/beberapa links yang ditimbulkan dari penerapan jQuery pada template di sebuah website ataupun blog. Mungkin dari kita biasa menyebutnya dengan Link Bergoyang/Bergerak atau menari, selain itu efek jQuery ini juga bisa diterapkan pada sebuah gambar (image)

Untuk sobat blogger yang gemar utak atik blog mungkin bisa mencoba trik link bergerak yang satu ini dan saya rasa bisa membuat blog sobat unik dan menarik. Sebagai contoh sobat bisa melihat link bergoyang/nudging pada label yang ada di sidebar blog saya ini, efek ini menggunakan script jQuery yang menurut saya sangat ringan ketika di-load dan penerapannya juga lumayan gampang, sama halnya seperti tombol back to top yang beberapa waktu lalu saya jelaskan yang sama-sama menggunakan jQuery.

Cara Pasang Efek jQuery Link Nudging/Bergoyang pada Label Blog

• Login di Blogger
• Masuk ke bagian Edit HTML pada template
• Centang pada bagian Expand Widget Template
• Cari kode </head>
• Copy paste script dibawah ini dan letakkan tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;a.nudge, .#Label1 ul li a&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script><!-- end LinkNudging -->

Kalau kode yang berwarna merah tersebut sudah ada di template sobat, kode itu tidak usah di pasang lagi jadi sobat hanya perlu memasang kode dibawahnya saja, Kemudian huruf yang berwarna biru diatas adalah widget id pada label, sobat bisa sesuaikan pada label id di blog sobat. Dibawah ini adalah contoh widget id label dari template blog saya.

<b:widget id='Label2' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>

Kemudian untuk membuat Link Nudging manual pada setiap link apakah itu didalam postingan ataupun widget sobat bisa menambahkan class="nudge" seperti dibawah ini

<a href="http://blooger.co.id" class="nudge">Blogger Peer</a>

Dan untuk membuat gambar bergoyang / Image nudging sobat bisa membuatnya seperti dibawah ini

<a href=http://blooger.co.id" class="nudge"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4sH8yOpKroOsAfnCMsCzA7VPZgXRM_v2oWv9qfSvrusLVQ7N2mxHQ0R7O08mOsB0ou9uYLDA-1BWo3NzQdGJbby9WXIWs5xa8PwTuZs59C4BvMpn4NxjnYCn2U87OcVCA-yIQqCFJCgw/s400/Tips-Trik-Blogger-Tutorial-SEO-Info-BloggerPeer-Blogspot.jpg"/></a>

Cara Buat Tombol Back To Top di Blogspot

Cara membuat/memasang tombol back to top/go top di blogger, tombol back to top adalah sebuah tombol yang berfungsi untuk membuat/mempercepat scrolling dari bawah keatas di sebuah web page ataupun blog page sehingga akan mempermudah reader ataupun visitor untuk kembali´pada bagian atas dari blog/website dengan cepat ketika berada dibagian bawah halaman dengan hanya sekali klik pada tombol back to top tersebut. Sebagai contoh sobat bisa melihat pada bagian kanan bawah dari blog saya ini

Fitur back to top yang kita buat/bahas sekarang ini adalah fitur tombol back to top menggunakan jQuery. Efek jQuery ini sedikit lebih lembut dan smooth daripada efek javascript lainnya seperti pada animasi bintang jatuh dari kursor yang menggunakan javascript biasa. Kelebihan nya juga adalah efek back to top ini sangat ringan ketika di loading dan sangat cocok digunakan didalam blog tentunya bagi yang suka me-modifikasi blog-nya dengan sesuatu yang unik, indah dan bermanfaat. Untuk membuat nya silahkan ikuti tips & tricks blogger berikut.

 

Cara Membuat/Memasang Tombol Back To Top Dengan jQuery di Blogger

• Silahkan login di Blogger
• Pilih Template > Edit HTML > klik Expand Widget Template
• Cari kode </body>  (gunakan CTRL+F)
• Copy kode dibawah ini dan Paste tepat diatas kode </body>  (jika kode dibawah sudah ada di template sobat, kode dibawah tidak usah dipasang lagi)

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

• Kemudian Copy lagi kode dibawah ini dan kemudian Paste tepat dibawah kode diatas

<script src='https://googledrive.com/host/0B7X69YyzZu-IZjFKQ19VVi10RlE/backtotop.js' type='text/javascript'/>
<!-- Back to top designed by Blogger Peer - blooger.co.id -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUicopLllTuuEXYcnmuMMgpa4mB5GFHlNB5qrn0w6wFaEC031vKM-IDvt8crls-7K3MqvdmSZUP0ldKEviY29o52Fc74jHxkO7lea7ZLRgr4ys8eHgDhEdZrjKADvDamyjiozs2gSaZyE/s1600/back-to-top.gif'/></a>

• Terakhir simpan template sobat dan tombol back to top sudah bisa dipakai