Cara Memasang Tombol Share Sosial Media di Postingan Blog
July 15, 2018 |
| Cara Memasang Tombol Share Sosial Media di Postingan Blog |
Untuk Sobat-sobat yang sering berkunjung disuatu website pasti pernah melihat tombol share artikel ke sosial media seperti, Facebook, Twitter, Google Plus dan masih banyak lagi. Mengepa harus dipasang Tombol Share Sosial Media? Menurut Saya pengunjung yang datang di blog sobat dapat membagikan artikel-artikel yang sobat dan yang dimana para visitor menganggap artikel sobat itu sangat bermanfaat atau menarik.
Jadi Apa keuntungan dengan memasang Tombol Share sosial media ini? Menurut saya dengan adanya tombol share sosial media ini yang dimana jika visitor membagikan artikel sobat ke sosial medianya maka akan menambah jumblah visitor blog sobat dan pastinya blog sobat bisa ramai dan tidak sepi.
Untuk penjelasannya sampai disitu saja ya! Sekarang kita masuk ke tutroial pemasangannya. Dan untuk pemasangannya tidak susah ya sobat. Sangat mudah kok masangnya. Agar tidak pusing usahakan baca sampai habis ya.
Cara Memasang Tombol Share Sosial Media di Blogger
1. Log ini Ke Blogger > Pada Dasabor Blogger Sobat Pilih Tamplate (Theme)2. Kemudian Klik Edit HTML
3. Cari Kode ]]></b:skin> dan Letakkan Kode CSS Dibawah ini sebelum Kode ]]></b:skin>
agar lebih mudah mencari kodenya Gunakan CRTL + F
.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;
}
4. Jika sudah dipasang CSS Diatas skrang Memasang Script Pemanggilnya
Cari Kode <data:post.body/> didalam Tamplate edit HTML. Biasanya Kode tersebut ada 2 atau 4 Kode yang sama. Simpan Script Pemanggilnya di <data:post.body/> yang pertama.
dam letakkan kodenya dibawah kode tersebut atau diatas kode <div class='post-footer'>
seperti gmbar dibawah ini.
<b:if cond='data:blog.pageType == "item"'><div class='share__button'><a class="facebook" expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' target="_blank" title="Facebook"><span></span>Facebook</a><a class="twitter" expr:href='data:post.sharePostUrl + "&target=twitter"' target="_blank" title="Twitter"><span></span>Twitter</a><a class="google" expr:href='"https://plus.google.com/share?url=" + data:post.canonicalUrl' onclick="javascript:window.open(this.href, "", "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600");return false;" rel="nofollow" title="Google+"><span></span>Google Plus</a></div></b:if>5. Save Template Sobat
Nah mudah bukan mmebuatnya Sekian untuk Tutorial Cara Memasang Tombol Share Sosial media di blogger. Semoga Artikel ini bermanfaat buat kalian dan jika masih ada yang bingung kalian bisa komentar dibawah. nanti akan saya balas.
Happy Blogging!!
0 komentar