-->
logo blog

Membuat Share Buttom Cantik dan Ringan di Bawah Postingan 2

Membuat Share Buttom Cantik dan Ringan di Bawah Postingan 2

share buttom ringan ngonline06
Hal yang paling menyenangkan bagi pemilik situs atau blog adalah dapat memberikan manfaat untuk pengunjung. Terlebih lagi, banyak pengunjung yang bisa memanfaatkan isi dari situs yang dibuat tersebut.

Namun demikian, untuk membuat blog atau situs dengan pengunjung yang ramai itu perlu usaha yang tekun dan giat. Tidak mungkin sebuah blog bisa ramai pengunjung tanpa usaha apapun dari pemilik situs. Itu ibarat orang yang ingin mendapatkan emas jatuh dari langit...he Namun tenang saja, untuk membuat blog ramai pengunjung sebenarnya mudah koq. Sahabat tinggal mau atau tidak. ITU INTINYA.
BACA: Trik Mudah Agar Blog Ramai Pengunjung

Sebagaimana diuraikan di atas, sahabat pasti ingin postingan di blog dilihat banyak orang. Maka salah satu meningkatkan kunjungan blog adalah memberikan pelayanan kepada pengunjung dengan baik. Salah satu bentuk pelayanan kepada pengunjung adalah dengan diberikannya fasilitas untuk sharing. Oleh karenanya, kebutuhan widget sharing buttom sangatlah penting.

Pentingnya Tombol Sharing di Blog


Keberadaan tombol sharing jangan pernah diabaikan. Tombol ini walau terlihat sederhana, namun bisa mendongkrak visitor di blog kita. Bisa sahabat bayangkan, jika salah satu pengunjung blog atau situs kita membaca dan menelaah postingan yang kita buat. Dan, ternyata pengunjung ini tertarik dan bisa mengambil manfaat, dan uniknya pengunjung ini ingin membaginya kepada teman-temannya di sosial media. Maka, keadaan inilah yang musti bisa dimanfaatkan dengan baik.

Kesempatan seorang pengunjung yang ingin berbagi, jika tidak difasilitasi, maka seperti membuang kesempata emas dengan sia-sia. Bayangkan saja, jika satu pengunjung berbagi kepada teman-temannya. Maka berapa banyak orang yang akan memiliki potensi untuk mengunjungi situs kita? Jumlah ini tentunya sebanding dengan jumlah teman yang dimiliki pengunjung kita tadi. LALU, bagaimana jadinya jika yang tertarik kepada postingan kita itu puluhan dan ingin membagi kepada teman-temannya. SUNGGUH, KESEMPATAN EMAS BUKAN?

Oleh karenanya, jangan pernah untuk menyepelekan tombol sharing di situs atau blog sahabat semua. Segera dan jangan ragu-ragu untuk memasangnya di blog atau situs.

Cara Membuat Share Buttom Cantik dan Ringan di Bawah Postingan 2


Namun demikian, tidak semua share buttom itu ringan dan ramah di blog. Oleh karenanya, sahabat Ngonline06 perlu menyeleksi dan memilih share buttom ringan dan ramah buat blog. Atas dasar itulah, Ngonline06 ingin berbagi widget share buttom yang ringan dan tentunya menarik untuk ditempelkan di blog, yaitu seperti pada gambar di atas. Jika sebelumnya, Ngonline06 telah membuat widget share buttom ringan dan cantik 1, maka sekarang akan dilanjutkan widget share buttom cantik dan ringan 2.

Cara membuat widget share buttom cantik dan ringan seperti gambar di atas sangat mudah. Berikut adalah langkah-langkah pembuatannya:
  1. Silahkan sahabat menuju dashbord blog.
  2. Kemudia, menuju template > edit html.
  3. Cari kode ]]></b:skin> dan letakkan kode CSS di bawah ini tepat di atas kode ]]></b:skin> tersebut.
  4. /* CSS Share Button */
    .tombol-berbagi-postinganmusa{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:auto}
    .tombol-berbagi-postinganmusa-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}
    .tombol-berbagi-postinganmusa-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:21%;height:inherit;padding:0 10px;border-left:solid 1px #dadada}
    .tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-lin,.tombol-berbagi-pi{float:left;display:block;background:url('http://2.bp.blogspot.com/-FYy1a99SDXE/VXuCSz_hYjI/AAAAAAAACbg/8dz4LkDIHYY/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}
    .tombol-berbagi-fb-label{color:#2d609b}
    .tombol-berbagi-fb-label,.tombol-berbagi-tw-label,.tombol-berbagi-gp-label,.tombol-berbagi-lin-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}
    .tombol-berbagi-tw{background-position:0 -43px}
    .tombol-berbagi-tw-label{color:#00c3f3}
    .tombol-berbagi-gp{background-position:0 -86px}
    .tombol-berbagi-gp-label{color:#f00}
    .tombol-berbagi-lin{background-position:0 -129px}
    .tombol-berbagi-postinganmusa a{color:#999;transition:all .3s;}
    .tombol-berbagi-postinganmusa a:hover{color:#7cb0ed}
    @media only screen and (max-width:640px){
    .tombol-berbagi,.tombol-berbagi-postinganmusa-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}
    .tombol-berbagi,.tombol-berbagi-postinganmusa-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}}
  5. Kemudian selanjutnya, cari kode <data:post.body/> dan letakkan kode di bawah ini, tepat di bawah kode <data:post.body/>.
  6. <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='tombol-berbagi-postinganmusa'>
    <div class='tombol-berbagi-postinganmusa-fb'>
    <a class='tombol-berbagi-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 class='tombol-berbagi-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='tombol-berbagi-postinganmusa-tw'>
    <a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>
    <a class='tombol-berbagi-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='tombol-berbagi'>
    <a class='tombol-berbagi-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/>
    <a class='tombol-berbagi-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 class='tombol-berbagi'>
    <a class='tombol-berbagi-lin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'/>
    <a class='tombol-berbagi-lin-label' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'>Share on LinkedIn</a>
    </div>
    </div>
    </b:if>
  7. Save.
Tralala, sekarang sahabat telah memiliki widget share buttom yang ringan dan cantik. Semoga berhasil ya sahabat Ngonline06. Jika ada kesulitan, silahkan coret aja di kolom komentar. Good luck dari Ngonline06

Share this:

Artikel Menarik Lainnya

Show comments
Hide comments

No comments

Silahkan berkomentar dengan baik.

Info Pendidikan