Menambahkan Social Bookmark ke Blogger Dengan Jquery

Lagi-lagi social bookmark, memang jika berbicara tentang widget yang satu ini tidak ada habisnya. Saya juga pernah memberikan beberapa widget tentang ini dan bisa kamu lihat disini dan disini. Saya rasa, blog yang kamu punya arus punya fitur ini karena pengunjung dapat berbagi artikel/postingan yang ada di blog kamu ke berbagai macam situs sosial, seperti Facebook Twitter, Linked In, Google Plus dan lain sebagainya sehingga dapat meningkatkan trafik pengujung blog kamu. Lihat langkah-langkahnya dibawah ini :

1. Sign in Blogger, jika belum punya ya daftar dong :p

2. Klik Rancangan --> Edit HTML --> Centang Expand Template Widget dan jangan lupa back up template kamu terlebih dahulu.

3. Cari kode </head> dan letkan kode dibawah ini sebelum/diatas kode </head>.

<style type="text/css">
    /* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */
    ul.way2blogging-social { list-style:none; margin:15px auto;display:inline-block; }
    ul.way2blogging-social li { display:inline; float:left; background-repeat:no-repeat; }
    ul.way2blogging-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
    ul.way2blogging-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
    ul.way2blogging-social li.way2blogging-facebook { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAa84wlE5KqY-Dq5bYQBQnyjRD11g0aNbZKfbZSs6Kdcfk_65lW1zFB492O53wwQQA4TjvEIu8htaHBOCFInOWHY1pNOqNtS-PEwAsbUEbZl7vlHffSPYg5_c4j63uwR9nfWeg581fL5rl/s1600/way2blogging-facebook.png"); }
    ul.way2blogging-social li.way2blogging-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsNdtEBEq-dLS3g7mxgRoZGpmJVLKuTKehtfHz-h1oUsIbGyWCSDGbQWcQBZGWStma0FSTyWFtBw8FNrsxx-JYADk9qkeL74r5AbeGjQDHHCVnDw7bH3aYtKkCwiLfehAFLBAZJmqfKmd4/s1600/way2blogging-twitter.png"); }
    ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbAlXwTXxgX2CDEn3PBHKeSn_8Q0ironQXs9yNBxF3q6CCIoiN8490sg8dPHvtU1mYVJaa6crhPG4l0J7n8V0fZaneHcK3Fp_OcrxWDrjPVMB46t-Fu0fw6dpwWGaANjeGPWIz09t0QRuL/s1600/way2blogging-googlebuzz.png"); }
    ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgIgPrvcZYGPWx_jzX5fPKTGP8XfuvqjSSNHYXE0eTUMVyu2PCCezVAP45cERzrkasvAPcwRf6SnZrBQy6yY0Hil0EGVOibU8gupJJtfEHUlU3MkV69-NeAS4IGKYQ02zCqdvkRL70cT26/s1600/way2blogging-stumbleupon.png"); }
    ul.way2blogging-social li.way2blogging-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCoUL1QuPnqRhUcHWbTSyKAdDecrw33q9VuLtJqlbm8-_LJ9cAioHZG4lZ5UPBzSA3JUgBUPfeMrCdUF7MkuxGPvY9YK_OAhI50iMSNP-EDxiFBSuDqiDg3EV8er8lcKFA2i6V081F_C7C/s1600/way2blogging-digg.png"); }
    ul.way2blogging-social li.way2blogging-delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjetZz5Fq5uPs3e8vt0-4lWS0TuwXQ27sC9gC-FdRT1OSaJzl0_KyGfxS2OzU_wnTNZvjKiCnPYW2JLWVXfGj96MNrpOf96o2zwCV58-7-_hTtn1-87dYgzNii-saLnNMOviTSW-yRs7ZZz/s1600/way2blogging-delicious.png"); }
    ul.way2blogging-social li.way2blogging-linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWPgeU5I25W6131dS4oXRQk7XUKZQCA7z4NBdncZdRJh34E3M-xurDjjTrfXkAo-hXGa1DcSCm_BeVAfj296zmOQHay0QjcSaAMqx31H2SnChERbzMAuFYvYzObD6IhDijZ6bImIVn7arR/s1600/way2blogging-linkedin.png"); }
    ul.way2blogging-social li.way2blogging-reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwMQ4ImRGam3f6AYeiQJ1HvYBjER5prGPjw_sHQ6_2PzB-QPqCAyIuffWeyeFTKHUcMZMLVLH5dqWF4sTR2RsP0qPu_mHrKLPY1qaKgd_MB95X2xWKN__fIA-gFJQhxNTHn-Wr1donfG6c/s1600/way2blogging-reddit.png"); }
    ul.way2blogging-social li.way2blogging-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaR6pVre7pupaHcWYT1yoOkW1ngaTw1wMHxLFbidcJueqXWOtlbZjhAlTKS09UdjQtAAxtvkcV8lZFO0apwRYfWCIq46n_tY5w_gSWObpUvJ2R_NKykFx3-4N9KMEXwUqrstDozbaR0iPr/s1600/way2blogging-technorati.png"); }
    #way2blogging-cssanime:hover li { opacity:0.2; }
    #way2blogging-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
    #way2blogging-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
    #way2blogging-cssanime li:hover { opacity:1; }
    #way2blogging-cssanime li:hover a strong { opacity:1; top:-10px; }
    /* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */
    </style>

5. Kamu cari lagi kode <data:post.body/> dan letakan kode dibawah ini setelah/dibawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <ul class='way2blogging-social' id='way2blogging-cssanime'>
    <li class='way2blogging-facebook'>
    <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='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a>
    </li>
    <li class='way2blogging-twitter'>
    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>
    </li>
    <li class='way2blogging-googlebuzz'>
    <a expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a>
    </li>
    <li class='way2blogging-stumbleupon'>
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a>
    </li>
    <li class='way2blogging-digg'>
    <a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a>
    </li>
    <li class='way2blogging-delicious'>
    <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>
    </li>
    <li class='way2blogging-linkedin'>
    <a 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' title='Share this on LinkedIn'><strong>LinkedIn</strong></a>
    </li>
    <li class='way2blogging-reddit'>
    <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>
    </li>
    <li class='way2blogging-technorati'>
    <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a>
    </li>
    </ul>
    </b:if>

6. Selesai dan Simpan template kamu dan jika ada pertanyaan tinggal berikan komentar kamu dibawah ini.

Thanks to : way2blogging.org for the code.

Postingan Terkait:

Posted in: Blogger,Social Sharing