Minggu, 15 April 2018

Cara Membuat Butang Kongsi Dengan JQuery Effect Nudging, cara memasang widget butang saham bookmark sosial telah diminta oleh salah seorang pelawat Blogger Peer yang kebetulan tertarik dengan widget butang berkongsi sama dengan menggunakan kesan jQuery yang ada di blog saya, kini saya mempunyai peluang untuk meninjau dan saya akan berkongsi dengan anda semua

Tombol Sharing Widget Button
Butang widget Kongsi menggunakan jQuery nudging sebenarnya adalah pelaksanaan apa yang saya nyatakan dalam artikel saya sebelum ini iaitu cara membuat link link - nudging link, tetapi di sini saya menggunakan imej / icon supaya kelihatan menarik dan unik. Widget perkongsian ikon di bloggerpeer.blogspot.com terdiri daripada beberapa laman media sosial yang biasa digunakan oleh orang untuk berkongsi artikel yang berguna untuk saudara-mara mereka. Ramai pengunjung bertanya kepada saya jika skrip jQuery tidak berat apabila dimuatkan? jawapannya TIDAK, skrip jQuery sangat ringan dan saya juga menggunakan skrip ini untuk berkongsi widget pada blog ini dan juga pada butang belakang ke atas yang ada di bawah halaman, jadi jangan risau untuk memasang skrip jQuery di blog anda.

Sebelum kita memasang ikon perkongsian widget adalah idea yang baik untuk membuat cadangan templat terlebih dahulu sekiranya berlaku ralat 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='http://2.bp.blogspot.com/-Bjxivdx4Azg/TsneN3ItsTI/AAAAAAAAAMI/ygYBWbfORxI/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='http://4.bp.blogspot.com/-gB18pm9OzGE/TsneK8uZtlI/AAAAAAAAALw/_Rnw2bHcpcY/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='http://2.bp.blogspot.com/-xZtyneGyu4s/TsneLtxn3hI/AAAAAAAAAL8/FIuGjncowpI/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='http://2.bp.blogspot.com/-jrRw0qsa12Y/TsneM2mbsCI/AAAAAAAAAME/OGBU5r59U-M/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='http://4.bp.blogspot.com/-DtdQdECw9z8/TsneKJjDJcI/AAAAAAAAALs/2Fc7sT6ZeXk/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='http://2.bp.blogspot.com/-6NV19GxLpiQ/TsneJm8LY9I/AAAAAAAAALk/Tx0g38kRsUQ/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='http://3.bp.blogspot.com/-6FEtH2vQ280/Tsnn-YMSTII/AAAAAAAAAM0/33gA7rF0FyE/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='http://3.bp.blogspot.com/-K6BEmvygn7o/Tsno3TTMdBI/AAAAAAAAAM8/XZi8ZaROhp0/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='http://1.bp.blogspot.com/-EZGUZe7eo1o/TsnmvhkihKI/AAAAAAAAAMs/fF9jkv9gUbE/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='http://3.bp.blogspot.com/-oA0JsIPtAjM/Tsnk_1krq-I/AAAAAAAAAMk/0vVdloHf_xY/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='http://4.bp.blogspot.com/-K9epinfY_UI/TsnsoQq9zAI/AAAAAAAAANM/JVK8ZmwRJeI/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='http://3.bp.blogspot.com/-O-6Kv8TfxS4/UCIcaSSXpqI/AAAAAAAAATY/j9Yt46RLm1M/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: SELEPAS LEMBARAN GOOGLE CHROME MEMBUAT UPDATE, BUTIRAN SEMAK DENGAN KESAN PENYIMPANAN INI TIDAK KERJA SELESAIKAN DIBUKA MENGGUNAKAN MENGGUNAKAN BROWSER GOOGLE CHROME. ADAKAH SAYA, LEBIH MENGGUNAKAN SAHAM INI TETAPI TANPA KESAN MUDAH UNTUK MENYEDIAKAN KOMUNIKASI MEMBACA BLOG ANDA.

BAGAIMANA: Jangan pasang kod skrip di bawah kod]]> </ b: skin> atau langkau kod, kemudian lanjutkan dengan templat save second dan last code.

0 komentar:

Posting Komentar

Trik Cara Sadis Merebut Pacar Orang Tanpa Ketahuan

hallo selamat malam kawan-kawan kali ini saya akan membagikan tips dan trik dalam dunia percintaan, apalagi anda seorang jomblo sangat tepa...

Postingan Populer

Arsip Blog