Cara Memasang Tombol Share FB, Twiter, WhatsApp diatas atau dibawah Postingan Blog

Coretan Bang Dadan on

Thursday, May 30, 2019

Pada kesempatan kali ini admin akan membahas artikel tentang cara memasang tombol share sosial media di blog. 

Terkadang widget share sosial media ini juga sangat penting untuk berada di dalam postingan blog, agar para pengunjung blog yang sedang membaca artikel di blog kita bisa di share atau disebarluaskan kepada teman - temannya atau orang lain.

Pada artikel sebelumnya admin telah membuat tutorial tentang Membuat Tombol Share Sosial Media Seperti Gangsing. Baiklah tanpa basa basi lagi sekarang kita praktekan Cara Memasang Tombol Share FB, Twittr, WhatsApp di Atas Postingan Blog. Lihat demonya paga gambar dibawah ini:

Baca juga: Cara Membuat Tombol Share Sosial Media Seperti Gangsing

Cara Memasang Tombol Share Sosial Media di Blog

◉ Pertama Buka Dashboard Blogger anda, kemudian pilih Edit HTML (backup template anda di notepad untuk berjaga - jaga)
◉ Cari Kode ]]></b:skin> atau </style> lalu copy dan paste kode di bawah ini tepat di atasnya.

/* Share button by bangdadan */ #sharebangdadan {width: 100%; text-align: center;}#sharebangdadan a {width: 20%;height: 40px;display: block;font-size: 24px;color: #fff;opacity: 0.8; transition: opacity 0.15s linear; float: left;}#sharebangdadan a:hover {opacity: 1;}#sharebangdadan i {position: relative;top: 50%;transform: translateY(-50%);}.facebook {background: #3b5998;}.twitter {background:#55acee;}.linkedin {background: #0077b5;}.pinterest {background: #cb2027;}.whatsapp {background: #25d366;}#share a:first-child {border-radius: 3px 0 0 3px;}#sharebangdadan a:last-child {border-radius: 0 3px 3px 0;}

 ◉ Lalu klik simpan

◉ Selanjutnya cari lagi kode <data:post.body/> biasanya ada lebih dari satu kode <data:post.body/> silahkan sobat pilih kalau mau pasang diatas artikel blog berarti pillih <data:post.body/> yang pertama dan pastekan kode dibawah ini tepat di <data:post.body/>. Berikut kodenya.

<div id='sharebangdadan'>

  <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='blank'><i class='fa fa-facebook'/></a>

  <a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='blank'><i class='fa fa-twitter'/></a>

  <a class='linkedin' 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'><i class='fa fa-linkedin'></i></a>

  <a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;amp;description=&quot; + data:post.title' rel='nofollow' target='blank'><i class='fa fa-pinterest-p'></i></a>

  <a class='whatsapp' data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'/></a>

</div>

◉ Lalu klik simpan template
◉ Selesai deh..

Note: Jika tombol share sosial media tidak muncul diblog anda silahkan pindahkan kode di atas ke <data:post.body/> yang ke-2, ke-3 atau seterusnya.

Demikian artikel tentang Cara Memasang Tombol Share FB, Twittr, WhatsApp di Atas Postingan Blog. Silahkan anda praktekan sendiri pada blog anda.

Labels: blogger tutorial, Widget

Thanks for reading Cara Memasang Tombol Share FB, Twiter, WhatsApp diatas atau dibawah Postingan Blog. Please share...!