Saturday, 25 January 2020

Yuk Cari Tahu Cara Membuat Tombol Share Sosial Media di Blog

Cara Membuat Tombol Share Sosial Media di Blog - Tombol share adalah suatu proses buat membagikan artikel dalam sebuah blog berupa tombol ke berbagai sosial media antara lain, Facebook, Twitter, LinkedIn, Pinterest dan WhatsApp.


Dengan tombol ini, para pembaca artikel dapat menggunakan gampang membagikan liputan yang terdapat di artikel blog tersebut ke sosial media miliknya.

Keuntungan menciptakan tombol share sosial media merupakan menjadi salah satu Cara Meningkatkan Visitor Blog dan masih poly lagi laba yang didapatkan.

Lalu bagaimana cara menciptakan tombol share sosial media pada blog ? Nice Question, simak tutorialnya jangan sampai terdapat yang terlewatkan step by step dibawah contoh gambar di bawah ini.

Contoh Tombol Share Sosial Media di Blog

Sebelumnya, jika sudah terdapat tombol share sosial media di blog Anda dan ingin merubahnya dengan tombol share sosial media yang saya akan berikan disini, silahkan Anda hapus terlebih dahulu kode-kode yg masih ada di Edit Html, sehabis dirasa sudah bersih, silahkan ikuti tutorialnya dibawah.

Cara Membuat Tombol Share Sosial Media pada Blog

Inilah cara menciptakan tombol share sosial media di Blog.

1. Edit Html.

Langkah pertama, Silahkan Anda pergi ke Dashboard Blog > Tema > Edit Html. Untuk mengedit atau menyalin kode script yang akan saya berikan.

dua. Cari kode ]]>.

Setelah melakukan langkah pertama diatas, selanjutnya Anda mencari kode ]]> di dalam Edit Html atau sanggup memakai bantuan (CTRL+F).

tiga. Salin Kode Script.

Setelah ketemu kode seperti nomer dua diatas, lanjutkan dengan menyalin kode berikut dibawah ini.
/* Share button by tutorial-lengkap07 */
#sharetutoriallengkap
width: 100%;
text-align: center;
#sharetutoriallengkap a
width: 20%;
height: 40px;
display: block;
font-size: 24px;
color: #fff;
opacity: 0.8;
transition: opacity 0.15s linear;
float: left;
#sharetutoriallengkap a:hover
opacity: 1;
#sharetutoriallengkap i
position: relative;
top: 50%;
transform: translateY(-50%);
.Facebook
background: #3b5998;
.Twitter
background: #55acee;
.Linkedin
background: #0077b5;
.Pinterest
background: #cb2027;
.Whatsapp
background: #25d366;
#sharetutoriallengkap a:first-child
border-radius: 3px 0 0 3px;
#sharetutoriallengkap a:last-child
border-radius: 0 3px 3px 0;

4. Tempatkan Kode Script diatas sebelum kode ]]> 

5. Simpan setelan template.

Sebelum berlanjut ke langkah berikutnya, silahkan Anda simpan setelan template yang telah dibentuk tadi.

6. Cari kode .

Masih di pada Edit Html, selanjutnya Anda mencari kode untuk mempermudah, silahkan gunakan bantuan menggunakan menekan tombol CTRL+F dalam keyboard.

7. Salin Kode Script dibawah ini.

Setelah ketemu kode salin kode dibawah ini, kemudian tempatkan di sebelum kode .

"Note : Untuk menempatkan tombol share sosial media pada atas postingan, simpan kode script sebelum kode & bila ingin menempatkan tombol share sosial media di bawah postingan silahkan simpan kode script sehabis kode .

Salin Kode Script dibawah.

mobile='only'>