Pasang Tombol Share Facebook Twitter Google Plus Di Blog - Hallo sahabat asportsfanthoughts, Pada Artikel yang anda baca kali ini dengan judul Pasang Tombol Share Facebook Twitter Google Plus Di Blog, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogger, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Pasang Tombol Share Facebook Twitter Google Plus Di Blog
link : Pasang Tombol Share Facebook Twitter Google Plus Di Blog

Pasang Tombol Share Facebook Twitter Google Plus Di Blog

Cara Memasang Tombol Share Button Facebook Twitter Google Plus di Postingan Blog - Sosial media atau biasa disingkat sosmed ialah daerah berkumpul, berbagi, berkeluh kesah para netizen (orang-orang yang aktif di dunia maya).

Kita seringkali melihat pada beranda sosmed kita aneka macam link yang di-share oleh teman-teman kita. Nah, link-link tersebut biasanya menuju situs atau blog orang lain. Jika konten yang dimuat link tersebut unik, memberi manfaat, atau heboh, sanggup saja link tersebut menjadi viral (di-share berkali-kali oleh netizen).

Seiring viralnya sebuah artikel, tentu menciptakan jumlah pengunjung blog juga semakin meningkat, dan berdampak pula dengan makin dikenalnya situs atau blog tersebut.

Nah, kali ini blog akan menyebarkan tutorial perihal bagaimana cara memasang tombol share sosmed terkenal menyerupai Facebook, Twitter, dan Google Plus di bawah postingan blog. Memfasilitasi pengunjung blog dengan memasang tombol share sosmed menyerupai ini akan membantu artikel blog kita menjadi viral.

Cara Memasang Share Button Sosmed di Blog

1. Pada Dashboard Blogger, pilih Template, lalu masuk ke Edit HTML Template.

2. Pasang CSS Share Button berikut untuk mengatur tampilan tombol share-nya.

Letakkan sebelum arahan ]]></b:skin> yang sanggup dicari dengan memakai shortcut Ctrl+F.

CSS

.share__button {
width: 100%;
overflow: hidden;
margin-top: 20px;
}
.share__button a {
display: block;
height: 32px;
line-height: 32px;
color: #fff;
float: left;
padding-right: 10px;
margin-right: 10px;
margin-bottom: 25px;
}
.share__button .facebook {
background-color: #436FC9;
}
.share__button .twitter {
background-color: #40BEF4;
}
.share__button .google {
background-color: #EC5F4A;
}
.share__button span {
display: block;
width: 32px;
height: 32px;
float: left;
margin-right: 10px;
background: url(https://lh6.googleusercontent.com/-_xmVrHoLpCo/VNBsLm2TQSI/AAAAAAAAAZg/5SbdJpV7gN4/s800/single-share.png) no-repeat;
}
.share__button .facebook span {
background-color: #3967C6;
}
.share__button .twitter span {
background-color: #26B5F2;
background-position: -72px 0;
}
.share__button .google span {
background-color: #E94D36;
background-position: -144px 0;
}

Agar lebih maksimal, letakkan CSS pada bab posting.

3. Kemudian pasang script pemanggil tombol share-nya.

Cari arahan <data:post.body/> di dalam template. Saya menemukan 2 buah arahan di template saya. Letakkan script di bawah arahan yang pertama.

Patokan lain ialah arahan <div class='post-footer'> yang kurang lebih mempunyai arti bab bawah postingan. Letakkan sebelum arahan tersebut untuk memasang tombol share di bawah postingan.

Script

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share__button'>
<a class="facebook" expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' target="_blank" title="Facebook">
<span></span>
Facebook
</a>
<a class="twitter" expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' target="_blank" title="Twitter"><span></span>
Twitter
</a>
<a class="google" expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl' onclick="javascript:window.open(this.href, &quot;&quot;, &quot;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&quot;);return false;" rel="nofollow" title="Google+">
<span></span>
Google Plus
</a>
</div>
</b:if>

Teks berwarna merah merupakan tag kondisi biar tombol share hanya muncul pada halaman posting saja. Untuk lebih memahami perihal tag kondisi, silahkan baca Memahami Fungsi Tag Kondisional Blogger Lengkap.

4. Jika sudah klik Save Template.

Sekian tutorial Memasang Tombol Share Facebook Twitter Google Plus di Blog. Jika ada pertanyaan silahkan sampaikan pada kotak komentar di bawah.

Demikianlah Artikel Pasang Tombol Share Facebook Twitter Google Plus Di Blog

Sekianlah artikel Pasang Tombol Share Facebook Twitter Google Plus Di Blog kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Pasang Tombol Share Facebook Twitter Google Plus Di Blog dengan alamat link http://asportsfanthoughts.blogspot.com/2019/04/pasang-tombol-share-facebook-twitter.html

Share this post