Memasang Tombol Share di Blog

6/14/2015
Memasang Tombol Share di Blog

Memasang Tombol Share di Blog - Pada postingan ke dua di hari ini Arlina Design akan berbagi sebuah share button pada postingan yang dipakai blog ini. Tutorial ini Saya buat atas permintaan sobat blogger di sini.

Share button ini berguna untuk memudahkan pengunjung yang ingin berbagi artikel yang dirasa bermanfaat ke jaringan sosial media mereka. Seperti Facebook, Twitter, Google plus, dan Linkedin. Share button ini nantinya akan muncul di setiap postingan blog sobat.

Baca juga : Memasang Widget Share Button di Postingan

Untuk tampilan seperti screenshot di bawah ini atau bisa dilihat langsung di bawah artikel blog ini (jika belum diganti)

Share Button Arlina Design

Berikut cara penerapannya :

1. Login ke Blogger > Template > Klik Edit HTML > Cari kode di bawah ini kemudian pilih yang ke dua dalam markup post (bukan mobile post)

<data:post.body/>

2. Kemudian salin kode di bawah ini tepat setelah kode yang disebutkan tadi

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tombol-berbagi-arlina'>
<div class='tombol-berbagi-arlina-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-arlina-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>

3. Selanjutnya terapkan kode di bawah ini tepat sebelum ]]></b:skin> atau </style>

/* CSS Share Button */
.tombol-berbagi-arlina{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-arlina-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}
.tombol-berbagi-arlina-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-arlina a{color:#999;transition:all .3s;}
.tombol-berbagi-arlina a:hover{color:#7cb0ed}

@media only screen and (max-width:640px){
.tombol-berbagi,.tombol-berbagi-arlina-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}
.tombol-berbagi,.tombol-berbagi-arlina-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}}

4. Simpan template.


Demikian cara Memasang Tombol Share di Blog, semoga bermanfaat.


Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

22 comments

Iya, ada yg bisa saya bantu?

Balas

Ka cara ngilangin tombol share sma related post cuma di page contact aj gmnnya?

Balas

Makasih banyak ya kak akhirnya bisa :')

Balas

work, coba liaht di blog saya hehe [www.bit.ly/wkitk]

Balas

Bagaimana saya bisa mengubah tombol untuk Linked In ? Saya ingin menjadi tombol untuk Pinterest .

How can I change the button for Linked In? I want it to be a button for Pinterest

Balas

Tambahkan iD atau class baru pada tag kondisional static page

#IDyangingindisembunyikan(display:none}

Balas

Bagus websitenya

Balas

Kamu bisa ganti markup linkedin dengan pinterest, jangan lupa tentukan classnya

Balas

Saya tidak pandai menulis kode . Apa yang harus saya ganti url untuk dihubungkan dengan ? Atau apakah Anda memiliki kode yang tersedia sudah bahwa saya hanya dapat menyalin dan kemudian paste ke html saya ? Maaf jika tulisan saya tidak baik . Saya menggunakan penerjemah karena saya hanya berbicara bahasa Inggris .

Balas

keren mbak izin
http://m-barsal.blogspot.co.id/

Balas

Keren Mbak Terima kasih informasinya
Mampir https://laman-sehat.blogspot.co.id/

Balas

kalau cara supaya kebuka popup gitu gimana ? jadi gk buka tab baru. kya button share di blog ini.

Balas

Halo, saya sudah coba copy paste kan sesuai dengan petunjuk pada HTML editor di blogspot saya, tapi kok nggak mau muncul sama sekali? apakah ada setelan yang harus di setting? mohon petunjuknya

Balas

Terima kasih Mbak Arlina...Tombol Berbaginya Mantap...

Balas

Terima kasih tutorialnya sangat, saya sudah pasang di blog saya bagi yang ingin tahu info kesehatan, diet, dan lain sebagainya boleh kunjungi blog saya http://www.myhealth-life.com/

Balas

ihh kece banget, udah ta terapkan di blog aneh selamat menyimak

Balas

bermanfaat banget artikelnya, makasih ya kakak

Balas
This comment has been removed by the author.

alhamdulilah,,,, jadi keren nih blogku di upgrade tombol sharenya ala arlina makasi yah

salam.
www.aveslombok.com

Balas

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.