Cara Memasang Tombol Share Sosial Media di Blog

Didalam artikel ini saya akan menjelaskan sesuai request teman teman sekalian mengenai bagaimana Cara Memasang Tombol Share Sosial Media di Blog. Mulai dari share sosial media seperti facebook, twitter, linkedin, pinterest, dan juga whatsapp. Selama ini mungkin sebelumnya agan sekalian pernah melihat artikel saya mengenai Cara Membuat Tombol Social Share Di Postingan Blogspot. Hampir sama di postingan sebelumnya. Ini hanya update sedikit mengenai jenis tampilan yang mirip dengan blog yang saya pasang dibawah. Akan sedikit lebih keren dari sebelumnya, karena ada beberapa yang saya modifikasi sedikit agar lebih tampak simple dan elegant. Untuk teman teman yang ingin memasang tombol atau button share sosmed, Akan admin jagoankode jelaskan di artikel ini.

Sudah lama sekali rasanya saya, tidak membagikan ilmu mengenai tutorial blogging. Apa boleh buat karena ini juga bersifat penting, maka akan tetap saya share juga disini. Pengaruh share sosial media disini sangat membantu dan berperan sekali untuk sebagai media promosi paling efektif. Dampak baik untuk yang memasang tombol berbagi ke sosial media adalah dapat memperluas jangkauan visitor pada artikel sobat.

Sehingga jika kalian lihat semua blog. Pasti memiliki share sosial media di blognya. Karena apa ?. yaitu sangat penting sekali didalam atribut kelengkapan blog. Seperti halnya akan juga membantu peringkat serp di google. Untuk teman teman yang selama ini, tidak suka dengan tombol share sosial media di blog agan. Kalian bisa menghapusnya, dan bisa mengganti yang baru seperti demo yang saya tampilkan berikut ini.

Oke, tanpa banyak berbasa basi lagi. Berikut saya lampirkan beberapa tombol share yang saya gunakan untuk blog ini. Semoga bisa kalian praktekkan lancar di blog kalian masing masing. Jangan sampai ada yang ketinggalan perkata yang saya jelaskan. Oke, Silahkan disimak.

Cara Memasang Tombol Share Sosial Media di Blog

Kalau Sebelumnya di blog anda sudah ada tombol sosial media bawaan. Silahkan dihapus terlebih dahulu dengan kata kunci di pencarian edit html “Search”. Hapus semua yang dibungkus oleh class search. Kalau sobat tidak bisa menghapusnya, silahkan sobat cari terlebih dahulu di google untuk cara menghapus tombol sosial media bawaan di blogger.

Kalau semuanya sudah bersih, silahkan lakukan cara berikut ini.

1. Buka Dashboard Blogger Sobat, Pergi ke Tema Lalu Edit HTML.

2. Cari Kode ]]></b:skin> atau </style> (Menggunakan Pencarian Ctrl + F).

3. Silahkan Copy Paste Kode Berikut Ini Dan Letakkan Sebelum Kode ]]></b:skin> atau </style>

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

4. Simpan.

5. Lalu Carilah Kode <data:post.body/>

Ada Terdapat lebih dari satu untuk kode tersebut. Umumnya kebanyakan template untuk meletakkan share sosial media tepat di akhir postingan dan diawal postingan menggunakan tag <data:post.body/> kedua. Silahkan sesuaikan jika tidak muncul, bisa itu pertama, ketiga, atau selebihnya.

Note :
Untuk Meletakkan Tombol Social Share dibawah Artikel Tambahkan Kode Berikut Setelah Kode <data:post.body/>
Untuk Meletakkannya diatas Artikel (Tepat dibawah judul artikel) Tambahkan Kode Berikut Sebelum Kode <data:post.body/>

<div id='sharejagoankode'>

  <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>

6. Simpan Dan Lihat Hasilnya

7. Selesai

Bagaimana Kalau Icon Share Sosial Media Tidak Muncul ?

Biasanya kalau icon pada tombol share sosial media tidak muncul, berarti font awesome belum anda install di blog kamu. Untuk itu sebelum menggunakan cara ini. Pastikan font awesome harus terinstall terlebih dahulu pada template. Jika belum ada, silahkan di ikuti cara berikut. Kalau sudah ada maka jangan di ikuti.

1. Buka Dashboard Blogger Kalian, ke Menu dan Edit HTML.

2. Tambahkan Kode Berikut Tepat Setelah Kode <head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"/> 

3. Simpan.

4. Selesai Dan Lihat Hasilnya

Bagaimana Kalau Tidak Tampil Tombol Sharenya ?

Kalau tombol tidak tampil yang sudah anda ikuti beberapa peletakan di <data:post.body/> tidak tampil juga. Berarti peletakan yang anda lakukan salah. Perhatikan dengan benar untuk <data:post.body/> yang ada pada artikel sobat.

Selain di <data:post.body/> anda juga bisa meletakkan di class atas related post dan sejenisnya.

Kesimpulan

Demikianlah materi kali ini yang berjudul “Cara Memasang Tombol Share Sosial Media di Blog“. Walau ini simple, mudah mudahan dapat bermanfaat bagi sobat sekalian yang sedang mencarinya. Bisa kalian praktekkan langsung di blog agan, dan apabila terdapat kesulitan bisa berdiskusi dengan saya di kolom komentar. Untuk peletakkan tombol sosial share diatas bisa di custom kalau sobat mengerti. Oke, sekianlah dahulu untuk artikel ini. Semoga bisa jadi referensi dan Selamat mencoba.