Penggunaan pemanfaatan Teknologi Smart Phone sekarang ini sudah tidak asing lagi terutama dikalangan sosialita, dari usia SD sampai dewasa pun sudah terbiasa dengan smart phone, terutama penggunaan Media Sosial seperti Line dan BBM sebagai salah satu Aplikasi Chat yang terkenal dan banyak digunakan.
Ada banyak cara seseorang mencari berita atau informasi selain mengunjungi situs-situs berita atau ada juga yang mendapatkan informasi dari Broadcast BBM atau share informasi yang dibagikan oleh orang lain tujuannya beragam ada yang hanya sekedar untuk berbagi informasi yang dianggap penting bahkan dewasa ini hampir semua Online Shoping dan bisnis lain sudah menggunakan Teknologi Media Sosial untuk pemasaran Produk mereka dengan Broadcast informasi produknya.
Nah terkait dengan hal tersebut diatas di postingan kali ini kita akan bahas Cara Membuat Tombol Share Line Dan BBM Di Blogger, tujuannya agar memudahkan pengunjung dapat membagikan informasi yang ada di dalam blog dengan memanfaatka teknologi Line dan BBM, caranya cukup mudah kita hanya menambahkan sedikit kode pada template blog, disini kita menggunakan tombol Ikon SVG untuk menampilkan tombol BBM dan Line, langsung saja bagi sobat yang mau mencobanya mari kita simak bersama.
Seperti biasa sebelum memulai modifikasi template, ada baiknya sobat backup terlebih dahulu templatenya untuk antisipasi jika terjadi error dalam penerapannya.
Pertama
Membuat tombol share BBM di Blog
Bagi sobat yang menggunakan Wordpres cari kode berikut ini.
Setelah ketemu silahkan sobat ganti dengan kode dibawah ini.
Ke Dua
Membuat tombol share Line di Blog
Bagi sobat yang menggunakan Wordpres cari kode berikut ini.
Setelah ketemu silahkan sobat ganti dengan kode dibawah ini.
Ketiga
Silahkan sobat tambahkan kode CSS ini gunanya untuk mengatur ukuran pada ikon SVG yang digunakan pada tombol Line dan BBM.
Perhatikan langkah penerapan kodenya, jika sudah silahkan SAVE dan selesai, selamat mencoba.
Membuat tombol share BBM di Blog
<a expr:href='"bbmi://api/share?message=" + data:post.url + "?ref=bbm&userCustomMessage=" + data:post.title' target="_blank" title="Share On BBM">
<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>Bagi sobat yang menggunakan Wordpres cari kode berikut ini.
<a expr:href='"bbmi://api/share?message=" + data:post.url + "?ref=bbm&userCustomMessage=" + data:post.title' target="_blank" title="Share On BBM">Setelah ketemu silahkan sobat ganti dengan kode dibawah ini.
<a href="bbmi://api/share?message=<?php the_permalink()?>?ref=bbm&userCustomMessage=<?php the_title(); ?>" target="_blank" title="Share On BBM">Ke Dua
Membuat tombol share Line di Blog
<a expr:href='"https://timeline.line.me/social-plugin/share?url=" + data:post.url' target="_blank" title="Share On Line">
<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>Bagi sobat yang menggunakan Wordpres cari kode berikut ini.
<a expr:href='"https://timeline.line.me/social-plugin/share?url=" + data:post.url' target="_blank" title="Share On Line">Setelah ketemu silahkan sobat ganti dengan kode dibawah ini.
<a href="https://timeline.line.me/social-plugin/share?url=<?php the_permalink()?>" target="_blank" title="Share On Line">Ketiga
Silahkan sobat tambahkan kode CSS ini gunanya untuk mengatur ukuran pada ikon SVG yang digunakan pada tombol Line dan BBM.
.icons8-LINE {
width: 48px;
height: 48px;
margin: -6px 0 0 -6px;
}
.BlackBerry-Icon {
width: 36px;
height: 36px;
}
.icon {
display: inline-block;
float: left
}Perhatikan langkah penerapan kodenya, jika sudah silahkan SAVE dan selesai, selamat mencoba.
EmoticonEmoticon