Tutorial Memasang Tombol Share Sosial Media Di Blog

Dididalem artikelitu aku mau menjelaskan sesuai request sahabat sahabat sekalian mengenai bagaimana Cara Memasang Tombol Share Sosial Media di Blog. Mulai dari share sosial media menyerupai facebook, twitter, linkedin, pinterest, juga juga whatsapp. Selamaitu sanggup saja sebelumnya agan sekalian pernah melihat artikel aku mengenai Cara Membuat Tombol Social Share Di Postingan Blogspot. Hampir sama di postingan sebelumnya. Ini hanya update tidak banyak mengenai jenis tampilan nan menyerupai dengan blog nan aku pasang dibawah. Akan tidak banyak lebih keren dari sebelumnya, alasannya tersedia sebagian nan aku modifikasi tidak banyak supaya lebih tampak simple juga elegant. Untuk sahabat sahabat nan ingin memasang tombol ataupun button share sosmed, Akan admin jagoankode jelaskan di artikel ini.

Sudah usang sekali rasanya saya, belommembagikan ilmu mengenai tutorial blogging. Apa boleh buat karenaitu juga bersifat penting, makanya mau tetap aku share juga disitu. Pengaruh share sosial media disitu sangat meringankan juga berperan sekali sebagai jadi media promosi paling efektif. Dampak benar sebagai nan memasang tombol menyebarkan ke sosial media ialah sanggup memperluas jangkauan visitor di artikel sobat.

Sehingga apabila kalian lihat semua blog. Pasti mempunyai share sosial media di blognya. Karena apa ?. ialah sangat penting sekali dididalem atribut kelengkapan blog. Seperti halnya mau juga meringankan peringkat serp di google. Untuk sahabat sahabat nan selama ini, belomsuka dengan tombol share sosial media di blog agan. Kalian sanggup menghapusnya, juga sanggup mengganti nan gres menyerupai demo nan aku tampilkan berikut ini.

Oke, tanpa banyak berbasa busuk lagi. Berikut aku lampirkan sebagian tombol share nan aku gunakan sebagai blog ini. Semoga sanggup kalian praktekkan lancar di blog kalian masing masing. Jangan hingga tersedia nan ketinggalan perkata nan aku jelaskan. Oke, Silahkan disimak.

Cara Memasang Tombol Share Sosial Media di Blog

Kalau Sebelumnya di blog kalian rampung tersedia tombol sosial media bawaan. Silahkan dihapus terlebih dahulu dengan kata kunci di pencarian edit html "Search". Hapus semua nan dibungkus oleh class search. Kalau sobat belombisa menghapusnya, silahkan sobat cari terlebih dahulu di google sebagai tutor menghapus tombol sosial media bawaan di blogger.

Kalau semuanya rampung bersih, silahkan kerjakan tutor berikut ini.

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

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

3. Silahkan Copy Paste Kode Berikut Ini Dan Letakkan Sebelum Kode ]]></b:skin> ataupun </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 sebuah sebagai arahan itu. Umumnya kebanyakan template sebagai meletakkan share sosial media sempurna di final postingan juga diawal postingan memakai tag <data:post.body/> kedua. Silahkan sesuaikan apabila belommuncul, sanggup itu pertama, ketiga, ataupun 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 jikalau icon di tombol share sosial media belommuncul, berarti font awesome belum kalian install di blog kamu. Untuk itu sebelum memakai tutor ini. Pastikan font awesome musti terinstall terlebih dahulu di template. Jika belum ada, silahkan di ikuti tutor berikut. Kalau rampung tersedia makanya janganlah di ikuti.

1. Buka Dashboard Blogger Kalian, ke Menu juga 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 belomtampil nan rampung kalian ikuti sebagian peletakan di <data:post.body/> belomtampil juga. Berarti peletakan nan kalian kerjakan tidak benar. Perhatikan dengan benar sebagai <data:post.body/> nan tersedia di artikel sobat.

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

Kesimpulan

Demikianlah bahan kaliitu nan berjudul "Cara Memasang Tombol Share Sosial Media di Blog". Walauitu simple, gampang mudahan sanggup berfungsi sebagai sobat sekalian nan sedang mencarinya. Bisa kalian praktekkan eksklusif di blog agan, juga apabila terdapat kesulitan sanggup berdiskusi dengan aku di kolom komentar. Untuk peletakkan tombol sosial share diatas sanggup di custom jikalau sobat mengerti. Oke, sekianlah dahulu sebagai artikel ini. Semoga sanggup jadi acuan juga Selamat mencoba.