-->

Buat tombol share sosmed blogspot dengan css

Hallo kawan..

Selamat datang di situs GRAD Information, pada kesempatan kali ini saya akan memberikan tips seputar blog kawan.

Tipsnya adalah membuat sebuah fitur berupa tombol berbagi ke sosial media pada halaman postingan blogspot, kenapa sih menggunakan tombol berbagi?

Karena ini dapat memudahkan para visitor untuk membagikan link postingan kita, sehingga bisa meningkatkan popularitas suatu situs. Selain itu, fitur ini dapat membuat pengunjung betah serta dapat menjadi aksesoris pada situs kalian kawan.

Selanjutnya saya bagikan caranya sebagai berikut:

1. Masuk ke akun blogger kalian.

2. Pilih menu 'tema' dan klik tanda '▼' lalu pilih 'edit html'

3. Coba tekan tombol 'Ctrl + F' secara bersamaan lalu ketik 'post.body' dan 'enter'

4. Kemudian 'salin' semua kode berikut dan 'tempel' tepat dibawah semua kode 'post.body'

<center> <a href='#oraanayacah' class='boxed-e' style='max-width:90px;display:inline-table;cursor:pointer;text-decoration:none;color:#fff!important; padding:5px 5px 5px 5px!important;border-radius:7px!important;margin:0px 0px 7px 5px!important;background:#666!important;color: white;'><svg width='20px' height='20px' class='svg-icon' viewBox='0 0 100 100'><polygon points="0,100 50,25 50,75 100,0" /></svg> <i style='font-size:15px; vertical-align:top;'>Share :</i> </a> <a style='max-width:90px;display:inline-table;cursor:pointer;text-decoration:none;color:#fff!important; padding:5px 5px 5px 5px!important;border-radius:7px!important;margin:0px 0px 7px 5px!important;background:#5DD500;color: white;' class='boxed-e' rel='nofollow' data-action='share/whatsapp/share' expr:href='&quot;https://api.whatsapp.com/send?text=&quot; + data:post.title + &quot;%20&quot; + data:post.url' target='_blank'> <svg width='20px' height='20px' class='svg-icon' viewBox='0 0 24 24'><path d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'></path></svg> Whatsapp </a> <a class='boxed-e' style='max-width:90px;display:inline-table;cursor:pointer;text-decoration:none;color:#fff!important; padding:5px 5px 5px 5px!important;border-radius:7px!important;margin:0px 0px 7px 5px!important;background:#4867AA;color: white;' rel='nofollow' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' target='_blank'> <svg width='20px' height='20px' class='svg-icon' viewBox='0 0 24 24'><path d='M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z'></path></svg> Facebook </a> <a rel='nofollow' expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;lang=id&quot;' class='boxed-e' style='max-width:90px;display:inline-table;cursor:pointer;text-decoration:none;color:#fff!important; padding:5px 5px 5px 5px!important;border-radius:7px!important;margin:0px 0px 7px 5px!important;background:#2795E9;color: white;' target='_blank'> <svg width='20px' height='20px' class='svg-icon' viewBox='0 0 24 24'><path d='M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z'></path></svg> Twitter </a> <a rel='nofollow' expr:href='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&quot; + data:post.snippet' class='boxed-e' style='color: white;max-width:90px;display:inline-table;cursor:pointer;text-decoration:none;color:#fff!important; padding:5px 5px 5px 5px!important;border-radius:7px!important;margin:0px 0px 7px 5px!important;background:#0E72A3;' target='_blank'> <svg width='20px' height='20px' class='svg-icon' viewBox='0 0 24 24'><path d='M21,21H17V14.25C17,13.19 15.81,12.31 14.75,12.31C13.69,12.31 13,13.19 13,14.25V21H9V9H13V11C13.66,9.93 15.36,9.24 16.5,9.24C19,9.24 21,11.28 21,13.75V21M7,21H3V9H7V21M5,3A2,2 0 0,1 7,5A2,2 0 0,1 5,7A2,2 0 0,1 3,5A2,2 0 0,1 5,3Z'></path></svg> Linkedin </a> </center>

5. Selanjutnya kita tambahkan kode 'css' berikut tepat dibawah kode '</head>', agar tampilannya menarik.

6. Kemudian klik 'save', lalu coba cek apakah hasilnya sesuai atau tidak

7. Selesai ✔ dan enjoy ♬

Ingin tahu hasilnya, bisa lihat 'demo' di bawah artikel ini ya kawan

Itu tadi adalah akhir cerita saya pada hari ini, apabila kalian masih bingung bisa cek video berikut ini:

Dan sebelum kalian meninggalkan blog saya, ada baiknya kalian klik tombol 'reaksi', 'subscribe' serta memberikan komentar kepada saya.

Sekian dari saya dan terima kasih J


Share :Wa FbTwLkTgTmPr Ln

Related Post:

x
Catatan, halaman web ini memakai cookies. Lihat info. Baiklah