Hallo teman – teman semua, jumpa lagi dengan saya Eno di tips dan trik Dumet School. Pada artikel kali ini saya akan memberikan tips dan trik tentang Cara Menggunakan Plugins Jquery Selection Share dimana plugins ini saat ini sedang buming – buming nya. Apalagi sekarang banyak sekali informasi yang menarik dan ketika user ingin share ke sosial media tinggal blok pada text kemudian muncul icon sosial media. Seperti contoh di bawah ini saya ambil dari salah satu website yang menyediakan lirik – lirik lagu kemudian isi lirik tersebut bisa di blok dan langsung bisa di share by sosial media
Seperti yang kalian lihat pada gambar di atas ini muncul sebuah icon facebook, ketika di klik maka akan langsung di bawa ke halaman posting status. Pada studi case kali ini kita juga akan mencoba membuatnya, berikut ini adalah screen shoot yang akan kita buat
Ketika di klik salah satu icon tersebut akan langsung di klon pada kotak postingnya
Nah bisa kalian lihat pada gambar di atas ini adalah halaman posting twitter, bagaimana cukup keren bukan..??
Baik, saat nya kita implementasikan Cara Menggunakan Plugins Jquery Selection Share seperti biasa siapkan text editornya dan copy script html nya di bawah ini
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="twitter:site" content="techcrunch" />
</head>
<body>
<div id="wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore alias ullam eveniet officiis consequatur laboriosam porro aliquid minima eum impedit. Suscipit minima eligendi necessitatibus consequuntur pariatur natus quae placeat. Suscipit.</p>
<p>This script will also scan the document to look for related twitter accounts to sugges to follow after the user shares a quote. Here, it should suggest to follow me.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium eius iusto placeat ex repellat sit cumque consequatur corporis? Minus harum enim odit aperiam ut recusandae veritatis architecto eum laudantium autem.</p>
</div>
</body>
</html>
Kemudian save dengan nama index.html, berikutnya kita berikan plugins Jquery dan css nya. Teman – teman bisa download pada link ini
Langkah berikutnya kita berikan library nya terlebih dahulu
Teman – teman tambahkan library nya seperti gambar di atas ini yang saya beri kotak berwarna merah. Jika sudah, extract file di dalam satu folder dengan file index nya lalu kita panggil masing – masing dengan cara
Panggil css nya, kemudian panggil plugins yang kalian sudah download. Tambahkan script seperti gambar di bawah ini tepat di bawah tag tutup </div>
Jika sudah, save dan jalankan pada browser nya. Maka hasilnya seperti demo gambar di atas, ketika di blok dengan otomatis langsung timbul icon sosial media dan email
Bagaimana,,? mudah sekali bukan,,??
Oke, sekian dulu pada artikel kali ini tentang Cara Menggunakan Plugins Jquery Selection Share. Kita berjumpa kembali pada artikel berikutnya, semoga bermanfaat dan sampai jumpa.
Terima Kasih dan Sampai Jumpa.