Cara Membuat Tombol Share WhatsApp Tanpa JavaScript

DP BBM 23 - Cara Membuat Tombol Share WhatsApp Tanpa JavaScript - selamat pagi dan selamat berjumpa kembali sahabat blog DP BBM 23 semuanya .. setelah waktu lalu membahas dan berbagi mengenai beberapa untaian Kata Kata Ucapan Hari Kemerdekaan Indonesia 17 Agustus 2017 pada kesempatan kali ini admin akan sedikit membahas dan berbagi mengenai Cara Membuat Tombol Share WhatsApp Tanpa JavaScript untuk ulasan singkatnya simak terus dibawah ini ..

Ok next guys .. untuk cara pembuatan tombol share ini bisa di katakan mudah .. mudahnya kita tanpa riber harus membuat dan mendesain tampilan tombol share karena banyak kemudahan yang dapat kita lakukan dengan cara yang sangat simple dan sederhana tidak banyak memakan waktu .. salah satunya kita bisa menggunakan layanan dari situs Sumome.com maupun lewat situs AddThis.com cukup dengan mendaftarnya pada masing - masing situs tersebut dan cukup melakukan beberapa langkah saja tombol share pun sudah siap kita pergunakan ..

Dengan cara yang saya katakan diatas bisa dikatakan sangat mudah sekali .. karena kita cuma cukup memasang plugin atau widget share maka blog atau situs web kita sudah siap terpasangi tombol share .. dan pada umumnya tombol share ini sering kali di pergunakan di berbagai situs yaitu tombol share facebook / twitter / google plus ( G+ ) maupun sosmed lainnya semisal path dsb ..

^{Cara Membuat Tombol Share WhatsApp Tanpa JavaScript}

Kenapa demikian ?? ya, sosial media seperti facebook / twitter / G+ selain banyak penggunanya sebagian besar juga diberbagai situs menggunakannya tombol share tersebut .. dan seperti yang kita ketahui dengan adanya tombol share ini .. tidak hanya memberikan dampak positive saja ( yaitu meningkatkan traffick blog ) melainkan mempermudah juga bagi pengunjung yang ingin berbagi tanpa harus mencopy terlebih dulu link artikel yang mau dibagikan .. cukup dengan mengkik share sesuai media sosial yang dimilikinya maka artikel tersebut pun terbagikan ..

Namun siapa sangka rupanya aplikasi WhatsApp / Line dan BBM pun bisa kita pergunakan untuk membuat tombol share ke masing - masing aplikasi tersebut .. memang cara tersebut sudah lama dan sudah banyak situs - situs yang menggunakan tombol share ke WhatsApp / Line maupun ke BBM ..

Namun saya sendiri jujur saja tidak bisa dan tidak tahu cara pembuatan tombol share tersebut .. terkecuali menggunakan widget tombol share seperti yang ada pada situs Sumome.com sudah terdapat pula tombol share untuk ke WhatsApp maupun Line .. tapi secara manual saya tidak tahu / tidak bisa cara pembuatannya hehehe ..

Meski saya tidak tahu secara manualnya pembuatan tombol share ke Line maupun ke BBM tapi setidaknya saya masih dapat berbagi cara pembuatan tombol share ke WhatsApp .. cara pembuatan ini secara manual tanpa menggunakan widget / plugin maupun javascript .. cukup dengan penggunaan CSS dan HTML saja .. maka tombol share WhatsApp pun siap dipergunakan .. untuk contohnya bisa sobat lihat di setiap postingan pada blog ini .. saya buat dan pasang tadi pagi dan sekarang mau saya bagikan cara pembuatannya ..

^{Hasil Dari Tutorial Cara Membuat Tombol Share WhatsApp Tanpa JavaScript}

1. Kode CSS

1. Pertama - tama sobat buka Dashboard > Template / Tema > Edit HTML > cari kode <style> / </style> atau kode ]]></b:skin> ( dan letakkan Kode CSS dibawah ini .. di atas kode tersebut )

.wa-button{color:#fff;margin:0 3px;padding:0;font-size:10px;font-weight:400}
.wa-button a{color:#fff;margin:0 3px;padding:5px 8px;border-radius:5px;background:#32CD32;}
.wa-button i{font-weight:400;margin:0 10px 0 0}

Keterangan :

Silahkan sobat hapus atau ganti yang saya tandai warna Merah Dan Hijau dengan warna dan keinginan sobat .. untuk warna merah silahkan ganti 5px; dengan nilai lebih besar atau hapus jika tidak ingin menggunakan border radius .. dan untuk warna hijau silahkan ganti dengan warna background kesukaan sobat .. untuk contoh tombol share nya seperti di bawah ini ..

Border Radius 5 pixel ( 5px )

1. Border radius 5px dengan warna Black / #000000 ( kode warna HTML )

2. Border radius 5px dengan warna Lime / #32CD32 ( kode warna HTML )

3. Border radius 5px dengan warna Blue / #0000ff ( kode warna HTML )

4. Border radius 5px dengan warna Red / ff0000 ( kode warna HTML )

Border Radius 15 pixel ( 15px )

1. Border radius 15px dengan warna Black / #000000 ( kode warna HTML )

2. Border radius 15px dengan warna Lime / #32CD32 ( kode warna HTML )

3. Border radius 15px dengan warna Blue / #0000ff ( kode warna HTML )

4. Border radius 15px dengan warna Red / ff0000 ( kode warna HTML )

Tanpa Border

1. Tanpa border radius dengan warna Black / #000000 ( kode warna HTML )

2. Tanpa border radius dengan warna Lime / #32CD32 ( kode warna HTML )

3. Tanpa border radius dengan warna Blue / #0000ff ( kode warna HTML )

4. Tanpa border radius dengan warna Red / ff0000 ( kode warna HTML )

Catatan :

Tombol diatas cuma sekedar contoh pembuatannya saja tidak disertai link share ke WhatsApp

2. Ok next Cara kedua .. untuk cara pertama itu cuma baru sebatas CSS nya saja dalam arti tombol share belum bisa di bentuk dengan sempurna .. lalu bagaimana caranya supaya tombol share tersebut dapat dipergunakan ?? mudah saja cara keduanya yaitu penambahan kode HTML .. silahkan sobat copas semua kodenya dibawah ini dan letakkan sesuai keinginan sobat untuk contohnya di blog ini saya tempatkan sejajar dengan tombol share lainnya .. bisa sobat letakkan misal di bawah postingan / atas postingan / footer dan sebagainya .. dan berikut ini kodenya

2. Kode HTML

<li class='wa-button'><a 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'/> WhatsApp</a></li>

Kata Kata Ucapan Hari Kemerdekaan Indonesia 17 Agustus 2017
DP BBM 23 - Kata Kata Ucapan Hari Kemerdekaan Indonesia 17 Agustus 2017 - selamat pagi dan selamat berjumpa kembali sahabat blog DP BBM 23 semuanya .. setelah tadi membahas dan berbagi beberapa untaian Kata Kata Menyentuh Hati Takut Kehilangan Orang Yang Paling Disayangi Plus Lirik Lagu Repvblik Aku Takut p...View More

Gimana sangat mudah dan simple banget bukan ?? cukup dengan menggunakan CSS dan HTML saja .. tombol share WhatsApp pun jadi dan siap di pergunakan .. dan mungkin hanya itu saja yang dapat admin blog DP BBM 23 bagikan pada kesempatan kali ini .. mengenai Cara Membuat Tombol Share WhatsApp Tanpa JavaScript semoga membantu dan bermanfaat ?? selamat pagi menjelang siang dan selamat hari raya kemerdekaan Republik Indonesia 17 Agustus 1945 MERDEKA ^__^

BlogCaraOchaNetwork