Membuat Tombol Share Untuk Line Dan Bbm Di Blogger
Membuat Tombol Share Untuk Line Dan BBM Di Blogger - Sebelumnya saya sudah memposting ihwal cara menciptakan tombol share Whatsapp dan SMS untuk menghubungi pribadi admin blog, sekarang saya akan memposting cara menciptakan tombol share untuk Line dan BBM di blog.Tombol share ini sangat berkhasiat bagi pengguna mobile untuk membagikan postingan yang mereka sukai ke akun sosial messenger mereka khususnya bagi pengguna aplikasi Line dan Blackberry messenger.
Sebagai demonya silahkan coba tombol share Line dan BBM untuk postingan ini kalau Anda memakai smartphone pada iframe JSFiddle di bawah ini
Nah kalau Anda tertarik untuk mencobanya di blog Anda, silahkan gunakan kode-kode di bawah ini.
Ikon Line dan BBM pada tombol ini memakai ikon SVG.
Tombol Share untuk Line
<a expr:href='"https://timeline.line.me/social-plugin/share?url=" + data:post.url' target="_blank" title="Membuat Tombol Share Untuk Line Dan BBM Di Blogger">
<svg viewBox="0 0 48 48" class="icon icons8-LINE">
<path style="fill:#00C300;" d="M12.5,42h23c3.59,0,6.5-2.91,6.5-6.5v-23C42,8.91,39.09,6,35.5,6h-23C8.91,6,6,8.91,6,12.5v23 C6,39.09,8.91,42,12.5,42z"></path>
<path style="fill:#FFFFFF;" d="M37.113,22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108,4.772-13.108,10.637 c0,5.258,4.663,9.662,10.962,10.495c0.427,0.092,1.008,0.282,1.155,0.646c0.132,0.331,0.086,0.85,0.042,1.185 c0,0-0.153,0.925-0.187,1.122c-0.057,0.331-0.263,1.296,1.135,0.707c1.399-0.589,7.548-4.445,10.298-7.611h-0.001 C36.203,26.879,37.113,24.764,37.113,22.417z M18.875,25.907h-2.604c-0.379,0-0.687-0.308-0.687-0.688V20.01 c0-0.379,0.308-0.687,0.687-0.687c0.379,0,0.687,0.308,0.687,0.687v4.521h1.917c0.379,0,0.687,0.308,0.687,0.687 C19.562,25.598,19.254,25.907,18.875,25.907z M21.568,25.219c0,0.379-0.308,0.688-0.687,0.688s-0.687-0.308-0.687-0.688V20.01 c0-0.379,0.308-0.687,0.687-0.687s0.687,0.308,0.687,0.687V25.219z M27.838,25.219c0,0.297-0.188,0.559-0.47,0.652 c-0.071,0.024-0.145,0.036-0.218,0.036c-0.215,0-0.42-0.103-0.549-0.275l-2.669-3.635v3.222c0,0.379-0.308,0.688-0.688,0.688 c-0.379,0-0.688-0.308-0.688-0.688V20.01c0-0.296,0.189-0.558,0.47-0.652c0.071-0.024,0.144-0.035,0.218-0.035 c0.214,0,0.42,0.103,0.549,0.275l2.67,3.635V20.01c0-0.379,0.309-0.687,0.688-0.687c0.379,0,0.687,0.308,0.687,0.687V25.219z M32.052,21.927c0.379,0,0.688,0.308,0.688,0.688c0,0.379-0.308,0.687-0.688,0.687h-1.917v1.23h1.917 c0.379,0,0.688,0.308,0.688,0.687c0,0.379-0.309,0.688-0.688,0.688h-2.604c-0.378,0-0.687-0.308-0.687-0.688v-2.603 c0-0.001,0-0.001,0-0.001c0,0,0-0.001,0-0.001v-2.601c0-0.001,0-0.001,0-0.002c0-0.379,0.308-0.687,0.687-0.687h2.604 c0.379,0,0.688,0.308,0.688,0.687s-0.308,0.687-0.688,0.687h-1.917v1.23H32.052z"></path>
</svg>
</a>
Untuk mengguna Wordpress silahan ganti instruksi berikut:
<a expr:href='"https://timeline.line.me/social-plugin/share?url=" + data:post.url' target="_blank" title="Membuat Tombol Share Untuk Line Dan BBM Di Blogger">
Ganti dengan instruksi berikut:
<a href="https://timeline.line.me/social-plugin/share?url=<?php the_permalink()?>" target="_blank" title="Membuat Tombol Share Untuk Line Dan BBM Di Blogger">
Tombol Share untuk BBM
<a expr:href='"bbmi://api/share?message=" + data:post.url + "?ref=bbm&userCustomMessage=" + data:post.title' target="_blank" title="Membuat Tombol Share Untuk Line Dan BBM Di Blogger">
<svg viewBox="0 0 5067 5067" class="icon BlackBerry-Icon">
<rect height="5067" rx="489" ry="489" width="5067" style="fill: black;" />
<g>
<path d="M1327 885l2018 0c141,0 269,58 361,150 93,93 150,221 150,361l0 1457c0,141 -57,268 -150,361 -92,93 -220,150 -361,150l-1584 0 -724 737c64,-258 143,-487 226,-741 -115,-15 -219,-68 -297,-146 -93,-93 -150,-220 -150,-361l0 -1457c0,-140 57,-268 150,-361 92,-92 220,-150 361,-150zm2018 135l-2018 0c-104,0 -197,43 -266,111 -68,68 -110,162 -110,265l0 1457c0,103 42,197 110,265 69,69 162,111 266,111l27 0 90 0 -26 87c-11,37 -57,177 -102,312l369 -379 20 -20 28 0 1612 0c104,0 198,-42 266,-111 68,-68 110,-162 110,-265l0 -1457c0,-103 -42,-197 -110,-265 -68,-68 -162,-111 -266,-111z"
style="fill: white; fill-rule: nonzero;" />
<path d="M1655 1452l310 0c91,0 149,75 129,166l0 0c-19,91 -110,166 -201,166l-310 0 72 -332z" style="fill: white;" />
<path d="M1565 1938l309 0c91,0 149,74 130,165l0 0c-20,92 -111,166 -202,166l-310 0 73 -331z" style="fill: white;" />
<path d="M2291 1452l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z" style="fill: white;" />
<path d="M2200 1938l309 0c92,0 150,74 130,165l0 0c-20,92 -111,166 -202,166l-309 0 72 -331z" style="fill: white;" />
<path d="M2872 1748l309 0c91,0 149,74 130,165l0 0c-20,92 -111,166 -202,166l-310 0 73 -331z" style="fill: white;" />
<path d="M2781 2233l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z" style="fill: white;" />
<path d="M2118 2419l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z" style="fill: white;" />
<path d="M3819 1091l10 0c233,0 423,190 423,422l0 1715c0,232 -190,422 -423,422l-13 0 225 735 -719 -735 -1224 0c-165,0 -308,-96 -378,-235 17,2 34,2 51,2l1586 0c301,0 548,-246 548,-547l0 -1486c0,-107 -32,-208 -86,-293z" style="fill: white;" />
</g>
</svg>
</a>
Untuk mengguna Wordpress silahan ganti instruksi berikut:
<a expr:href='"bbmi://api/share?message=" + data:post.url + "?ref=bbm&userCustomMessage=" + data:post.title' target="_blank" title="Membuat Tombol Share Untuk Line Dan BBM Di Blogger">
Ganti dengan instruksi berikut:
<a href="bbmi://api/share?message=<?php the_permalink()?>?ref=bbm&userCustomMessage=<?php the_title(); ?>" target="_blank" title="Membuat Tombol Share Untuk Line Dan BBM Di Blogger">
Dan tambahkan CSS di bawah ini untuk mengatur ukuran ikon SVG.
.icons8-LINE {
width: 48px;
height: 48px;
margin: -6px 0 0 -6px;
}
.BlackBerry-Icon {
width: 36px;
height: 36px;
}
.icon {
display: inline-block;
float: left
}
Selamat mencoba... Sumber https://www.kompiajaib.com/
0 Response to "Membuat Tombol Share Untuk Line Dan Bbm Di Blogger"
Posting Komentar