Cara Mudah Memasang Tombol Share Line Dibawah Postingan

Baca Juga Artikel Berikut Ini

Cara Mudah Memasang Tombol Share Line  Dibawah Postingan - Line merupakan salah satu media sosial yang banyak memiliki pengguna. Hingga tahun 2017, Line memiliki jumlah pengguna mencapai 170 juta pengguna (sumber : tekno liputan 6). Sehingga membagikan suatu postingan blog ke media sosial seperti Line tentunya bisa jadi peluang dan jalan untuk meningkatkan jumlah pengunjung blog.


Membuat tombol share line ini sama seperti membuat tombol share WhatsApp seperti yang telah dijelaskan sebelumnya, yaitu hanya memerlukan kode HTML dan CSS tanpa membutuhkan Javasricpt sehingga tidak membuat blog anda menjadi lemot.

Baik, langsung saja ikuti langkah-langkah berikut ini untuk memasang tombol share Line di bawah postingan :

Langkah Membuat Tombol Share Line

Sebelum melakukan tutorial ini, pastikan anda telah memback up terlebih dahulu template blog Anda untuk berjaga-jaga jika terjadi sesuatu yang tidak diinginkan terjadi pada blog anda. Jadi bisa dikembalikan ke semula.

• Buka akun blogger anda
• Kemudian pilih tema --> edit HTML
• Saat sudah masuk di edit HTML masukkan kode berikut ini. (Taruhlah di sekitaran tombol share lainnya yang terdapat di bawah postingan). 

Kode HTML Tombol Share Line
<a expr:href='&quot;https://timeline.line.me/social-plugin/share?url=&quot; + data:post.url' target="_blank" title="Share On Line">
  <svg viewBox="0 0 48 48" class="icon icons8-LINE">
    <path style="fill:#61ED61;" 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:#FFFCFC;" 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>

(Kode tersebut saya ambil dari blog kompiajaib yang saya edit sedikit)

•  Langkah berikutnya adalah memasang kode CSS. Berikut kode CSS untuk tombol share line, taruhlah diatas kode </style>

Kode CSS Tombol Share Line
.icons8-LINE{width:40px;height:40px;margin:-6px 0 0 -6px}.icon{display:inline-block;float:left}

(Kode tersebut juga saya ambil dari blog kompiajaib yang juga saya edit sedikit)

•  Setelah kode HTML dan kode CSS udah dipasang maka tombol share line sudah bisa diterapkan pada blog anda dan hasilnya bisa dilihat pada bagian bawah postingan blog ini

Sekian artikel tentang memasang tombol share line dibawah postingan. Jika ada yang belum dipahami bisa ditanyakan melalui kolom komentar. Semoga sedikit tutorial ini bermanfaat bagi pembaca

Baca juga : Memasang Tombol Share WhatsApp