Membuat Widget Media Sosial Share Cantik

Setelah mempublikasikan artikel, menyebarkannya ke media sosial juga menjadi poin vital agar artikel sampai kepada khalayak yang membutuhkan. Anda dapat memanfaatkan jalan pintas tombol untuk menyebarkan artikel ke beragam media sosial seperti Facebook, Twitter, dan Google+ dengan hanya satu klik saja.

Anda dapat membuat tombol share ke media sosial seperti ini:

bagikan ke media sosial
Widget Sosial Media Share
Untuk membuat widget bagikan ke media sosial, seperti biasa masuk ke HTML edit terlebih dahulu, kemudian lakukan langkah dibawah:
  1. Tepat diatas kode </style>  tempel kode berikut (anda dapat memanfaatkan CTRL + F untuk memudahkan pencarian):
    .article-share-masalvi{width:100%;height:43px;margin-bottom:10px}
    .article-share-fb-cont,.article-share-other-cont{float:left;width:138px;width:114px;padding:0 7px;height:inherit}
    .article-share-tw-cont,.article-share-other-cont,.article-share-like-cont{float:left;width:114px;height:inherit;padding:0 7px;border-left:solid 1px #d8d8d8}
    .article-share-fb-cont,.article-share-other-cont{float:left;width:138px;width:114px;padding:0 7px;height:inherit}
    .article-share-fb,.article-share-tw,.article-share-gp,.article-share-li,.article-share-pi{float:left;display:block;background:url('http://3.bp.blogspot.com/-3ypydr9U3DI/U9DHOBQy-vI/AAAAAAAAAbs/hvhfDPIpevI/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}
    .article-share-fb-label{color:#2d609b}
    .article-share-fb-label,.article-share-tw-label,.article-share-gp-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}
    .article-share-tw{background-position:0 -43px}
    .article-share-tw-label{color:#00c3f3}
    .article-share-gp{background-position:0 -86px}
    .article-share-gp-label{color:#f00}
  2. Jika sudah ditempel, cari kode berikut dibawah <data:post.body>: <!--SOCIAL SHARE-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='article-share-masalvi'>
    <div class='article-share-fb-cont'>
    <a class='article-share-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'></a>
    <a class='article-share-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a>
    </div>
    <div class='article-share-tw-cont'>
    <a class='article-share-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'></a>
    <a class='article-share-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on Twitter</a>
    </div>
    <div class='article-share-other-cont'>
    <a class='article-share-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'></a>
    <a class='article-share-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a>
    </div>
    </div>
    <br/>
    </b:if>
  3. Klik Simpan dan lihat hasilnya.
*Catatan:  Jika terdapat kode <data:post.body> lebih dari satu, silakan mencobanya satu persatu di setiap kode yang bersangkutan. Biasanya terdapat sekitar tiga kode ganda. Jangan lupa bahwa anda juga dapat mengganti kalimat yang dihighlight sesuai yang diinginkan)
Subscribe

Subscribe to receive free email updates:

0 Response to "Membuat Widget Media Sosial Share Cantik"

Post a Comment

Berkomentar lah dengan bijak ^_^