Social Share Button atau Tombol berbagi sosial akan membiarkan pembaca mu berbagi konten dengan sangat mudah. Jadi tanpa membuang waktu, sebaiknya tambahkan ya tombol share sosial responsif ini di blog blogger / blogspot mu.
Media sosial sangat penting untuk mendapatkan lebih banyak eksposur
Hal ini juga sangat membantu untuk mendapatkan target traffic dalam waktu singkat. Mesin pencari juga memperhatikan adanya media sosial.
Jadi, media sosial bisa menjadi sumber yang kuat untuk menjadi blogger yang sukses. Kau harus berpikir bahwa jika Kau bisa membawa konten mu di depan orang, maka orang akan memiliki kesempatan untuk melihat konten mu. Itu sebabnya aku akan menyarankan mu memanfaatkan media sosial.
Ada banyak media sosial populer seperti facebook, twitter, google plus tersedia di luar sana.
Dimana ribuan orang sedang menunggu untuk melihat konten mu. Kau harus membagikan konten mu sendiri dan Kau juga harus membiarkan orang membagikan konten mu yang ingin mereka bagikan. Jadi Kau harus menambahkan tombol berbagi sosial ke setiap postingan agar orang mau dan bisa berbagi ke teman-temannya. Dengan cara ini, Kau akan memiliki kesempatan untuk mendapatkan lebih banyak pemirsa untuk setiap konten mu.
Jika orang menyukai konten mu dan membagikannya, Maka Kau akan mendapatkan lebih banyak pengunjung. Ini akan membantu mu untuk mendapatkan rangking yang lebih tinggi di search engine dengan sangat cepat.
Hari ini aku akan menunjukkan bagaimana Kau bisa menambahkan tombol berbagi sosial untuk blogger?
Kau akan dapat menambahkan tombol berbagi situs media sosial terpopuler di dunia di bawah setiap posting di blog blogger mu.
Tombol sharing sosial ini responsif dan sangat atraktif
Lalu, Bagaimanakah cara kau bisa Menambahkan Social Share Button Untuk Blogger?
Aku telah memilih lima situs media sosial terpopuler. Ini adalah Facebook, Twitter, Google Plus, Pinterest dan LinkedIn. Lima tombol berbagi sosial ini akan ditampilkan setelah setiap artikel blog blogger mu. Aku akan menunjukkan langkah demi langkah pembuatannya.
Sebelum memulai proses, kita harus memastikan bahwa kita telah menginstal script "FontAwesome" dan "Jquery" ke dalam tema blogger kita. Untuk mengetahui bahwa itu ada silahkan masuk ke akun blogger mu> Buka bagian Template> Klik pada tombol Edit HTML dan cari di antara bagian
<head> Di.........sini</ head> untuk kode-kode nya seperti ini.
- <link href='http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css' rel='stylesheet'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/
Bagaimana apakah sudah ada? Jika belum tambahkan saja kode yang aku berikan diatas untuk kode "JQuery dan FontAwesome". dan tempatkan di atas </head>.
Jika kedua kode ini sudah tersedia di template mu, maka selebihnya.
Kemudian klik tombol Save Template.
Menambahkan Tombol Share Button SosMed
- Langkah 1: Menambahkan CSS Tombol Berbagi Sosial.
Template " dan klik tombol " Edit HTML ".
2. Cari " <b: skin> " dan klik tanda panah. Ini akan memperluas bagian CSS template blogger mu. Gulir ke bawah dan temukan tag akhir dari bagian CSS. Ini akan terlihat seperti " ]]> </ b: skin> ".
Siapkan kode dibawah ini:
- /* CSS Share Button
----------------------------------------------- */
.tlp_post_sharebar {background:none;position:relative;z-index:2;width:100%;display:inline-block;margin:5px 0px;padding:10px 0;font-family:sans-serif;border-bottom:1px dotted rgba(0, 0, 0, 0.05);border-top:1px dotted rgba(0, 0, 0, 0.05);}
.tlp_post_sharebar .tlp_Share_buttons {display:block;}
.tlp_post_sharebar .tlp_Share_buttons .wrap {display:inline-block;text-align:center;min-width:41px;margin:0 auto;}
.tlp_post_sharebar .tlp_Share_buttons .wrap1 {float:left;display:inline-block;width:31px;}
.tlp_post_sharebar .tlp_Share_buttons ul {margin:0;padding:0;}
.tlp_post_sharebar .tlp_Share_buttons ul li a, .tlp_post_sharebar .tlp_Share_buttons ul li a:hover {display:block;text-decoration:none;color:#FFF !important;cursor:pointer;height:100%;line-height:25px;}
.tlp_post_sharebar .tlp_Share_buttons ul li {float:left;list-style:none;list-style-type:none;margin:1px;padding:0;width:16%;max-width:115px;display:inline-block;overflow:hidden;font-size:13px;line-height:25px;text-align:left;height:25px;color:#fff;border: 1px solid rgba(0,0,0,0.04);-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
.tlp_post_sharebar .tlp_Share_buttons ul li .fa {font-family:FontAwesome;font-weight:normal;background-color:rgba(0,0,0,0.1);color:#fff;font-size:17px;display:inline-block;text-align:center;padding:0;width:30px;height:25px;line-height:inherit;border-right:1px solid rgba(0,0,0,0.05);}
.tlp_post_sharebar .tlp_Share_buttons .button_fb {background:#3a579a;}
.tlp_post_sharebar .tlp_Share_buttons .button_fb:hover {background:#314a83;}
.tlp_post_sharebar .tlp_Share_buttons .button_twtr {background:#00abf0;}
.tlp_post_sharebar .tlp_Share_buttons .button_twtr:hover {background:#0092cc;}
.tlp_post_sharebar .tlp_Share_buttons .button_gplus {background:#df4a32;}
.tlp_post_sharebar .tlp_Share_buttons .button_gplus:hover {background:#be3f2b;}
.tlp_post_sharebar .tlp_Share_buttons .button_pntrst {background:#cd1c1f;}
.tlp_post_sharebar .tlp_Share_buttons .button_pntrst:hover {background:#ae181a;}
.tlp_post_sharebar .tlp_Share_buttons .button_linkdin {background:#2554BF;}
.tlp_post_sharebar .tlp_Share_buttons .button_linkdin:hover {background:#224EB4;}
.tlp_post_sharebar .tlp_Share_buttons .share.h6 {font-size:14px;font-weight:bold;text-shadow:none!important;text-decoration:none;text-align:center;color:#333;margin-top:3px;}
.tlp_post_sharebar .tlp_Share_buttons .share {border:none;margin:0px 5px 0px 1px;overflow:visible !important;width:95px !important;}
.tlp_post_sharebar .tlp_Share_buttons .button_fb .share-buttons,.tlp_post_sharebar .tlp_Share_buttons .button_twtr .share-buttons,.tlp_post_sharebar .tlp_Share_buttons .button_gplus .share-buttons,.tlp_post_sharebar .tlp_Share_buttons .button_pntrst .share-buttons,.tlp_post_sharebar .tlp_Share_buttons .button_linkdin .share-buttons {position:relative;color:#C3C3C3;display:inline-block;text-align:center;font-weight:bold;font-size:11px;float:right;min-width:12px;font-family:sans-serif;padding:0px 5px;background-color:rgba(0,0,0,0.28);border-radius:0px 0px 0px 15px;}
@media only screen and (min-width:260px) and (max-width:989px){
.button_pntrst,.button_linkdin{display:none !important}}
3. Copy kode CSS di atas dan pastekan tepat sebelum tag CSS penutup " ]]> </ b: skin> " dari template blogger mu. Sekarang klik pada tombol " Simpan Template ".
Berikut adalah screen shoot untuk membuat Kau lebih jelas lagi seperti apa tampilan SB:
Kau telah berhasil menambahkan CSS untuk tombol berbagi sosial baru mu untuk blogger yang akan ditampilkan setelah / dari setiap postingan blogger mu.
Sekarang mari Kita tambahkan kode HTML
- Langkah 2: Menambahkan HTML Tombol Social Share.
Siapkan Kode HTML dibawah ini:
- <b:if cond='data:blog.pageType == "item"'>
<div class='tlp_post_sharebar'>
<div class='tlp_Share_buttons'>
<ul>
<li class='share'>
<div class='share-buttons' data-service='total'>
<div class='share h6'>
SHARE :
</div>
</div>
</li>
<li class='button_fb'>
<a expr:href='" http://www.facebook.com/share.php?v=4& src=bm& u=" + data:post.url + " & t=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow'>
<div class='wrap1'>
<i class='fa fa-facebook'/>
</div>
<div class='wrap'>
Share
</div>
<div class='share-buttons' data-service='facebook'>
</div>
</a>
</li>
<li class='button_twtr'>
<a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + " via
@ChaklyPutra - "' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow'>
<div class='wrap1'>
<i class='fa fa-twitter'/>
</div>
<div class='wrap'>
Tweet
</div>
<div class='share-buttons' data-service='twitter'>
</div>
</a>
</li>
<li class='button_gplus'>
<a expr:href='"http://plus.google.com/share?url=" + data:blog.url' onclick='javascript:window.open(this.href," " ," menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600" ); return false; ' rel='nofollow'>
<div class='wrap1'>
<i class='fa fa-google-plus'/>
</div>
<div class='wrap'>
Share
</div>
<div class='share-buttons' data-service='google'>
</div>
</a>
</li>
<li class='button_pntrst'>
<a data-pin-config='beside' expr:href='" http://pinterest.com/pin/create/button/?url=" + data:post.url + " &media=" + data:blog.postImageUrl + "&description=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;' rel='nofollow'>
<div class='wrap1'>
<i class='fa fa-pinterest'/>
</div>
<div class='wrap'>
Pin It
</div>
<div class='share-buttons' data-service='pinterest'>
</div>
</a>
</li>
<li class='button_linkdin'>
<a expr:href='" http://www.linkedin.com/shareArticle?mini=true& url=" + data:post.url + " & title=" + data:post.title + " & summary=& source=" ' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;' rel='nofollow'>
<div class='wrap1'>
<i class='fa fa-linkedin'/>
</div>
<div class='wrap'>
Share
</div>
<div class='share-buttons' data-service='linkedin'>
</div>
</a>
</li>
</ul>
</div>
</div>
</b:if>
Perbaikan:
- 1.Gantilah "@ChaklyPutra" yang
ada didalam kode HTML diatas. dan ganti dengan nama pengguna twittermu sendiri.
- 2. Sekarang cari baris HTML ini "
<div class = 'post-footer'> ".
Salin kode HTML di atas dan tempelkan tepat setelah baris ini.
Klik pada tombol "Simpan Template".
Lihat ke blog mu dan periksa postingan apapun. Kau akan melihat tombol sharing sosial mu yang dibuat ini telah muncul.
- Jika Kau tak menemukan baris ini "<div class = 'post-footer'>"
maka jangan khawatir.
Cari saja "<div class = 'post-footer-line post-footer-line-1'> " dan tempel kode HTML di atas tepat sebelum baris tersebut.
- Simpan template dan lihat keajaibannya.
Bagaimana dengan Plugin ini dan Tutorialnya?
Jika Kau telah mengikuti instruksi ku dengan benar maka tombol berbagi sosial ini seharusnya bekerja dengan sempurna untuk blog blogger / blogspot mu. Jika Kau memiliki masalah untuk menambahkan tombol berbagi ini di blog mu, tolong beritahu aku dengan memberi komentar.
Seperti yang telah aku katakan sebelumnya bahwa media sosial sangat penting bagi kesuksesan blogging mu, jadi aku akan sangat menyarankan untuk menambahkan tombol berbagi sosial ke blog mu dan membiarkan pembaca membagikan konten mu tak perduli jika kau mau memakai Plugin ku ini atau mencari lagi yang lebih keren dari sebuah "Tombol Berbagi ke Sosial" karena pada dasarnya sama saja. Jika suka artikel ini silahkan share yaa...
((
___; )
(6
Bersambung...