Cara Pasang Tombol Share Responsive Keren dan Unik (RRSSB) untuk Blogger

Cara Pasang Tombol Share Responsive Keren dan Unik  (RRSSB) untuk Blogger - Sebuah blog atau website tidak terlepas dengan adanya dukungan media sosial untuk berbagi artikel atau postingan blog sekaligus sebagai media promosi untuk mendapatkan trafik dari pengunjung blog website kita. Untuk itu kali ini saya memberikan tutorial cara memasang tombol share Facebook, Twitter, Google Plus, Linkedin, Pinterest yang responsive, keren dan unik atau lebih dikenal dengan nama Ridiculously Responsive Social Sharing Buttons (RRSSB) versi blogger yang diadaptasi dari kni-labs dan untuk pengguna wordpress langsung saja ke official webnya di github.

Tombol share ini sudah saya adaptasikan ke blogger template sehingga anda dengan mudah memasangnya di blog anda. Untuk demo nya bisa dilihat pada tombol share di akhir artikel ini.Ya langsung saja, ini dia cara pasang tombol share responsive untuk blogger

RRSSB Buttons for Blogger

How to make Ridiculously Responsive Social Sharing Buttons (RRSSB) for Blogger template

Agar tidak memberatkan saat loading blog maka saya menempatkan kode CSS dan Javascript di google drive.

Login ke Blogger yang ingin dipasangin widget tombol sharing responsive lalu pilih template kemudian Edit HTML
1. Langkah pertama, cari kode <b:skin><![CDATA[ dengan cara Ctrl+F lalu pasang kode berikut ini tepat di atas kode <b:skin><![CDATA[

<!-- RRSSB Share Button Responsive -->
<link href='https://googledrive.com/host/0B7SWsATT3DgsUUZOQVBvdW5saGs' rel='stylesheet' type='text/css'/>

2. Langkah kedua, cari lagi kode penutup </body> dan simpan kode berikut diatasnya

<!-- RRSSB Share Button Responsive -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/> <script>window.jQuery || document.write(&#39;&lt;script src=&quot;js/vendor/jquery.1.10.2.min.js&quot;&gt;&lt;\/script&gt;&#39;)</script> <script src='https://googledrive.com/host/0B7SWsATT3DgsN2RSaGljUG5CWmc' type='text/javascript'/>

3. Langkah terakhir adalah widget social button yang akan ditempatkan dibawah judul atau diakhir postingan anda. Cari kode <data:post.body/> lalu pasang script berikut ini sesuai keinginan anda, jika ingin pasang tombol share button dibawah judul, maka pasanglah kode berikut diatas <data:post.body/>, namun jika anda ingin menaruh tombol share nya di akhir artikel, maka pasang kodenya di bawah <data:post.body/>

<!-- RRSSB Buttons START -->
      <ul class='rrssb-buttons clearfix'>
        <li class='rrssb-facebook'>
          <a class='popup' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title ' title='Share on Facebook'>
            <span class='rrssb-icon'>
              <svg height='29' preserveAspectRatio='xMidYMid' viewBox='0 0 29 29' width='29' xmlns='http://www.w3.org/2000/svg'>
                <path class='cls-2' d='M26.4 0H2.6C1.714 0 0 1.715 0 2.6v23.8c0 .884 1.715 2.6 2.6 2.6h12.393V17.988h-3.996v-3.98h3.997v-3.062c0-3.746 2.835-5.97 6.177-5.97 1.6 0 2.444.173 2.845.226v3.792H21.18c-1.817 0-2.156.9-2.156 2.168v2.847h5.045l-.66 3.978h-4.386V29H26.4c.884 0 2.6-1.716 2.6-2.6V2.6c0-.885-1.716-2.6-2.6-2.6z' fill-rule='evenodd'/>
              </svg>
            </span>
            <span class='rrssb-text'>facebook</span>
          </a>
        </li>
        <li class='rrssb-linkedin'>
          <a class='popup' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.canonicalUrl + &quot;&amp;title=&quot; + data:post.title ' title='Share on Linkedin'>
            <span class='rrssb-icon'>
              <svg height='28' viewBox='0 0 28 28' width='28' xmlns='http://www.w3.org/2000/svg'>
                <path d='M25.424 15.887v8.447h-4.896v-7.882c0-1.98-.71-3.33-2.48-3.33-1.354 0-2.158.91-2.514 1.802-.13.315-.162.753-.162 1.194v8.216h-4.9s.067-13.35 0-14.73h4.9v2.087c-.01.017-.023.033-.033.05h.032v-.05c.65-1.002 1.812-2.435 4.414-2.435 3.222 0 5.638 2.106 5.638 6.632zM5.348 2.5c-1.676 0-2.772 1.093-2.772 2.54 0 1.42 1.066 2.538 2.717 2.546h.032c1.71 0 2.77-1.132 2.77-2.546C8.056 3.593 7.02 2.5 5.344 2.5h.005zm-2.48 21.834h4.896V9.604H2.867v14.73z'/>
              </svg>
            </span>
            <span class='rrssb-text'>linkedin</span>
          </a>
        </li>
        <li class='rrssb-twitter'>
          <a class='popup' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.canonicalUrl ' title='Share on Twitter'>
            <span class='rrssb-icon'>
              <svg height='28' viewBox='0 0 28 28' width='28' xmlns='http://www.w3.org/2000/svg'>
                <path d='M24.253 8.756C24.69 17.08 18.297 24.182 9.97 24.62c-3.122.162-6.22-.646-8.86-2.32 2.702.18 5.375-.648 7.507-2.32-2.072-.248-3.818-1.662-4.49-3.64.802.13 1.62.077 2.4-.154-2.482-.466-4.312-2.586-4.412-5.11.688.276 1.426.408 2.168.387-2.135-1.65-2.73-4.62-1.394-6.965C5.574 7.816 9.54 9.84 13.802 10.07c-.842-2.738.694-5.64 3.434-6.48 2.018-.624 4.212.043 5.546 1.682 1.186-.213 2.318-.662 3.33-1.317-.386 1.256-1.248 2.312-2.4 2.942 1.048-.106 2.07-.394 3.02-.85-.458 1.182-1.343 2.15-2.48 2.71z'/>
              </svg>
            </span>
            <span class='rrssb-text'>twitter</span>
          </a>
        </li>
        <li class='rrssb-googleplus'>
          <a class='popup' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl ' title='Share on Google Plus'>
            <span class='rrssb-icon'>
              <svg height='28' viewBox='0 0 28 28' width='28' xmlns='http://www.w3.org/2000/svg'>
                <path d='M14.703 15.854l-1.22-.948c-.37-.308-.88-.715-.88-1.46 0-.747.51-1.222.95-1.662 1.42-1.12 2.84-2.31 2.84-4.817 0-2.58-1.62-3.937-2.4-4.58h2.098l2.203-1.384h-6.67c-1.83 0-4.467.433-6.398 2.027C3.768 4.287 3.06 6.018 3.06 7.576c0 2.634 2.02 5.328 5.603 5.328.34 0 .71-.033 1.083-.068-.167.408-.336.748-.336 1.324 0 1.04.55 1.685 1.01 2.297-1.523.104-4.37.273-6.466 1.562-1.998 1.187-2.605 2.915-2.605 4.136 0 2.512 2.357 4.84 7.288 4.84 5.822 0 8.904-3.223 8.904-6.41.008-2.327-1.36-3.49-2.83-4.73h-.01zM10.27 11.95c-2.913 0-4.232-3.764-4.232-6.036 0-.884.168-1.797.744-2.51.543-.68 1.49-1.12 2.372-1.12 2.807 0 4.256 3.797 4.256 6.24 0 .613-.067 1.695-.845 2.48-.537.55-1.438.947-2.295.95v-.003zm.032 13.66c-3.62 0-5.957-1.733-5.957-4.143 0-2.408 2.165-3.223 2.91-3.492 1.422-.48 3.25-.545 3.556-.545.34 0 .52 0 .767.034 2.574 1.838 3.706 2.757 3.706 4.48-.002 2.072-1.736 3.664-4.982 3.648l.002.017zM23.254 11.89V8.52H21.57v3.37H18.2v1.714h3.367v3.4h1.684v-3.4h3.4V11.89'/>
              </svg>
            </span>
            <span class='rrssb-text'>google+</span>
          </a>
        </li>
        <li class='rrssb-pinterest'>
          <a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());' title='Share on Pinterest'>
            <span class='rrssb-icon'>
              <svg height='28' viewBox='0 0 28 28' width='28' xmlns='http://www.w3.org/2000/svg'>
                <path d='M14.02 1.57c-7.06 0-12.784 5.723-12.784 12.785S6.96 27.14 14.02 27.14c7.062 0 12.786-5.725 12.786-12.785 0-7.06-5.724-12.785-12.785-12.785zm1.24 17.085c-1.16-.09-1.648-.666-2.558-1.22-.5 2.627-1.113 5.146-2.925 6.46-.56-3.972.822-6.952 1.462-10.117-1.094-1.84.13-5.545 2.437-4.632 2.837 1.123-2.458 6.842 1.1 7.557 3.71.744 5.226-6.44 2.924-8.775-3.324-3.374-9.677-.077-8.896 4.754.19 1.178 1.408 1.538.49 3.168-2.13-.472-2.764-2.15-2.683-4.388.132-3.662 3.292-6.227 6.46-6.582 4.008-.448 7.772 1.474 8.29 5.24.58 4.254-1.815 8.864-6.1 8.532v.003z'/>
              </svg>
            </span>
            <span class='rrssb-text'>pinterest</span>
          </a>
        </li>
      </ul>
<!-- RRSSB Buttons END -->

4. Simpan template dan lihat hasilnya.

Dengan demikian widget share button sudah selesai kita buat. Jika berhasil, widget tombol share Facebook, Twitter, Google Plus, Linkedin dan Pinterest akan terlihat seperti tombol berbagi yang ada di blog mainbom yang contohnya di bawah ini. Terimakasih sudah membaca artikel Cara Pasang Tombol Share Responsive Keren dan Unik  (RRSSB) untuk Blogger. Semoga tutorial ini dapat bermanfaat bagi pembaca semua.

• facebook
• linkedin
• twitter
• google+
• pinterest