Newbie-Sederhana

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 bloggerpeer.blogspot.com 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() {
$('a.nudge, .#Label2 ul li a').hover(function() { //mouse in
$(this).animate({ marginLeft: '12px' }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script>

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;'/> </div>
Copy code dibawah ini dan paste tepat diatas kode <div style='clear: both;'/> </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='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Share to Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWCTC8NedFPo6aCLzQdqUQ8E65Z2imDr2bUU0VDtxZBOCVKNgJEfRmoIdlL5DdVIWMHqMnHou0JTRbaPlRCWqNKmaVDImjoKo6lRDmz7GCj_4_mBo1SwZBq57OkgsfvJw1WYqJzUCxUX0/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='"https://twitter.com/intent/tweet?text=" + data:post.title + "&amp;url=" + data:post.url ' rel='nofollow' target='_blank'><img alt='Share this post on twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLg5r3kLznpC0KjIw2V-2vsP8R6So7pkYw3gOSeMPUiNaUgr8VEXvkSMlMBHk24_OE6ypzIlHUzQYQ6F3jZ1cI3OgvSP271AHPiPp4uQn2hNzGFcYY8OWFWjTboRivAoIQ8y-mKuTehG4/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='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Bookmark Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghR68jGAUxufjBSw3NDcQae0HHSHIZT0t6MccJ4-RTnnbg4Y8GkeGxmKFsom7Icl457Aoz22-Jd2p-U5CSkE9wGVAfAr6lJRJbWvw6-iMQEGQVWuNxHSr_3gRhI4qwSQeqmBtK5zb2fLU/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='" http://digg.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Digg This' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEhqYrYnc4g1c2asjEi-Zu8ZGb-gAZZUFQafeNP7AICKx-_axvO1bd-sRjaGBYMWehnKnItY5wfCRnAhMEvGaOOwoDJdYqGVO7uf17gp2Dd16wZK9BljUZDPVPfjWLWgTzDIPt6Y0yFos/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='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Stumbleupon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinQaWA7wHOu3reHKvHb3V6enTld32431_R0sMqIGHRY7sX7U_hVOKjq993DWJus75fhfKoFg7iFpo_D6XVGITdnhtpOts58CXlBKCY7r1OAa2H_QGgPCUVQn55e4idOi4YIsEhyphenhyphenLUR_po/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='" http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvpYEk1aC6q1xo20BOVsbXJVk_qbSJwgCYKQhgCUe4iwjj8Jle6z-NTzY1cdLl-rphFjfeVnzN7bUW0cOSyL34HMhkChaxDBh5cUOagwCseMzdleV3-LFSyRt2wsr-vJenVlJAK2I34xk/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='" http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Yahoo Bookmark' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIuOXZnpmk1nw4GClWBqS5LiXiz7xJseL_N-8JClWGiuXOdniq_II89t4mzJ6ipc64AMZgG-KUvweaR7uHeTSnpEvb6nfaaxxIl45Yb4CnKKyqfcTKwRI7MUJvHN8buC6nnSY8HVA_-28/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='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Furl-Diigo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIYzq78zx7ufdDUeAApM-BE3hGnG12L3N0t2ERQ7vbvTLD85RKddwgxEYkeYDLjRTPaWlgwsZPerl5iM1wH1EjQAu2uRxcbFYWGAVZavxCvkIXnYuXVPEpmVCR_f8ZONHYel9pukpIQDw/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='" http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Google Bookmark' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxIX11PNeCOUq77h5mvrZ8qCDMkc9z7q_FsK7UIGABG7Jy7WP0SygKevKP8qEctB4ejrPFlgtcD-d7mX3U3lcrkrLTW5x3Afv6Rq21mi67ok2-wDhUzT9jzaIJ1fz8B8-qrcrfybB77WE/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='" http://technorati.com/faves?add=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihWRKJooB24jZXeARKce7OAsw9tkwCLIl3JP-DDUPZlFEoQfCJZ6tbUpUI752fngN-DUt5aOkeS5rIGOceYeKyC5GT-lVbw8-_cnsSTMRi8EqYIfBRwN_nijoTTrsK83j04HbL8fkqrFg/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='" http://www.newsvine.com/_tools/seed&amp;save?u=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Newsvine' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCcLit-ydlnBig2cI0fJL4omk3_86TNPTe8pbOfOBo4aOoo6FQHKVx_8KZkJZO2gPCjXhuuwZhHev5tZaoDJ55IXqzCBQ8af3Yu_2jt7cGPT09j5u4diyLc3KK75MEFyt5aE7S2SJU2ZQ/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://bloggerpeer.blogspot.com' target='_blank'><img alt='Tips Triks Blogger, Tutorial SEO, Info' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDA2xNhM-vmZabMPMVsFnY2ERXtzRNgR2pb_Yqq38oOSqoPkCfSCwjb7-4BUrmHIBuAqfjEBzXiQYy2CwQpINJPNRYlCymEthOLuLMAUWLM-iOq5wHUtnH1HWe984eD9fSh3H9Rt0s8Tk/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.

Google pagerank update agustus 2012, setelah menunggu kurang lebih 3 bulan semenjak update Google pagerank terakhir pada mei 2012, akhirnya tepatnya pada tanggal 2 bulan agustus 2012 kemarin Google toolbar pagerank update lagi

Banyak Pakar SEO, webmaster bahkan blogger seperti kita ini menunggu hasil dari update Google pagerank ini, saya ingat kira-kira seminggu yang lalu Master SEO Matt Cutts pada akun Twitter nya menyebutkan bahwa Google Panda akan melakukan perubahan dan dampaknya akan terasa kurang lebih 1% pada Google search, bagi anda yang teliti dengan perubahan ini mungkin bisa merasakan efeknya seperti peringkat blog/web anda di mesin pencari sedikit naik turun (Google Dance) mungkin ini adalah rentetan perubahan(update) pada algoritma Google pagerank sebelum melakukan update dan kemudian tepat pada tanggal 2 agustus 2012 kemarin Google pagerank resmi di update, bagi anda yang masih sangat newbie dan ingin tahu pengertian pagerank silahkan baca artikel saya tentang Apa Itu Google Pagerank?

Update Google pagerank pada agustus 2012 ini belum terasa pada situs bloggerpeer.blogspot.com dan masih jalan ditempat (PR 1), mungkin karena saya tidak sempat untuk mencari backlink dofollow yang relevan dan saya meng-update konten pada blog ini tidak teratur, satu bulan bisa 3 kali atau tidak sama sekali. Bagi anda yang sudah dapat hadiah pagerank dari Om Google saya ucapkan selamat dan semangat untuk terus menulis dan berkarya demi kemajuan blogger Indonesia

Newbie-Sederhana

Rabu, 08 Agustus 2012

Cara Buat Tombol Share Dengan Efek jQuery Nudging

Jumat, 03 Agustus 2012

Google PageRank Update Agustus 2012

Blog Archive

Labels

Popular Posts

About Me

Partner

Iklan