Kelebihan dari buku kita kali ini adalah ukurannya yang responsive, jadi bukan hanya dengan laptop atau PC saja, tapi kita juga bisa membukanya dengan HP, ataupun Tablet, asalkan terdapat koneksi Internet ^_^
Contoh catatan ane kali ini adalah kumpulan cerita Abu Nawas yang ane dapat dari berbagai sumber, silahkan lihat demonya disini :
Demo Flip Book - Abu Nawas
Ane simpan semua code jquery itu kedalam googledrive, untuk mempercepat loading, jadi sekarang kita hanya membutuhkan code HTML sebagai penampakan buku dan artikelnya, berikut code yang akan kita pakai sebagai front end ( tampilan depan ).Langkah 1 :: Buat Code HTML
Silahkan buka Notepad dan masukkan code berikut, kemudian simpan dengan nama minibook.html
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TITLE BUKU</title>
<link rel="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU-ZSVEInYlcyRMHApsmXDm7l71EvNvjpISpUzDMbEZW0BnMxpD-3KKYIxCb9MJLNPU7nbT0VYnzrOfSqjVuS6OR1BCzkba1yt1961lNtyi65OkW8CUYHvBYNb0UOQg9zDgM7LdPtU97M/s25-c/icon-webjalanan.png" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0BwxBVI9xP07VT3ZYaU5HckhZTXM" />
</head>
<body>
<div id="container" class="container">
<!-- MENU BUKU -->
<div class="menu-panel">
<h3>JUDUL BUKU</h3>
<ul id="menu-toc" class="menu-toc">
<li class="menu-toc-current"><a href="#page1">Judul Artikel-1</a></li>
<li><a href="#page2">Judul Artikel-1</a></li>
<li><a href="#page3">Judul Artikel-1</a></li>
<li><a href="#page4">Judul Artikel-1</a></li>
<li><a href="#page5">Judul Artikel-1</a></li>
</ul>
<div id="flipbook"></div>
</div>
<div class="bb-custom-wrapper">
<div id="bb-bookblock" class="bb-bookblock">
<!-- ARTIKEL 1 -->
<div class="bb-item" id="page1">
<div class="content">
<div class="scroller">
<h2>Judul Artikel 1 </h2>
<p>Deskripsi dan Isi Artikel 1</p>
</div>
</div>
</div>
<!-- ARTIKEL 2 -->
<div class="bb-item" id="page2">
<div class="content">
<div class="scroller">
<h2>Judul Artikel 2 </h2>
<p>Deskripsi dan Isi Artikel 2</p>
</div>
</div>
</div>
<!-- ARTIKEL 3 -->
<div class="bb-item" id="page3">
<div class="content">
<div class="scroller">
<h2>Judul Artikel 3 </h2>
<p>Deskripsi dan Isi Artikel 3</p>
</div>
</div>
</div>
<!-- ARTIKEL 4 -->
<div class="bb-item" id="page4">
<div class="content">
<div class="scroller">
<h2>Judul Artikel 4 </h2>
<p>Deskripsi dan Isi Artikel 4</p>
</div>
</div>
</div>
<!-- ARTIKEL 5 -->
<div class="bb-item" id="page5">
<div class="content">
<div class="scroller">
<h2>Judul Artikel 5 </h2>
<p>Deskripsi dan Isi Artikel 5</p>
</div>
</div>
</div>
<nav>
<span id="bb-nav-prev">←</span>
<span id="bb-nav-next">→</span>
</nav>
<span id="tblcontents" class="menu-button">Daftar Isi</span>
</div>
</div>
</div>
<!-- JQUERY SCRIPT -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://googledrive.com/host/0BwxBVI9xP07VUkdiLWlaZkVVM1E"></script>
<script type="text/javascript" src="https://googledrive.com/host/0BwxBVI9xP07VMEp2ZlJJUmF3VVU"></script>
<script type="text/javascript" src="https://googledrive.com/host/0BwxBVI9xP07VQW96TU1GWXcwM1E"></script>
<script type="text/javascript" src="https://googledrive.com/host/0BwxBVI9xP07Vb25Wazd1RG9relE"></script>
<script type="text/javascript" src="https://googledrive.com/host/0BwxBVI9xP07VOC16RDMtN2s0QWM"></script>
<script type="text/javascript" src="https://googledrive.com/host/0BwxBVI9xP07Vb21kc2lTaFJNYkE"></script>
<script>$(function() { Page.init();});</script>
</body>
</html>
Rubah Judul dan Isi Artikel sesuai dengan buku yang agan inginkan, pelajari dulu konsep penataan codenya bila agan ingin menambahkan lebih dari 5 Artikel ( dalam contoh code, ane hanya memberi 5 artikel ).
Langkah 2 :: Upload ke Google Drive
Pastikan terlebih dahulu file minibook.htm agan sudah benar, dengan membukanya menggunakan Browser Firefox, Chrome atau yang lain. Bila file sudah benar silahkan buka https://drive.google.comPilih New ==> File Upload
Langkah 3 :: Share File minibook.html
Ada dua cara untuk share minibook yang telah kita buat.- Melalui link share yang muncul setelah selesai upload
- Melalui icon share yang ada pada menu Google Drive
Pada pop up sahre Pilih link Advanced yang berada pada pojok kanan Bawah,
kemudian pilih sahring On - Public on the web , agar semua orang bisa melihat buku agan.
Langkah 4 :: Short URL + QR Code ( Optional )
Setelah langkah dua selesai, kita akan mendapatkan link share yang terlihat seperti ini :https://drive.google.com/open?id=0BwxBVI9xP07VdC1LTV9TNWlWcG8Code yag ane bold warna merah merupakan id file kita di google drive, untuk melihat tampilan buku yang barusan kita buat, silahkan buka dengan alamat URL berikut :
https://drive.google.com/file/d/0BwxBVI9xP07VdC1LTV9TNWlWcG8/view?usp=sharing
https://googledrive.com/host/IdGoogleDriveSampai sini, Buku karya agan sudah bisa dibuka secara Online, akan tetapi akan sangat susah untuk mengingat link yang panjang tersebut, untungnya google sudah mempersiapkan ShortURL untuk kita, dengan tambahan Fitur QR Code untuk Android.
Contoh jadinya seperti ini :
https://googledrive.com/host/0BwxBVI9xP07VdC1LTV9TNWlWcG8
Caranya Short URL dan membuat QR code cukup mudah :
- Silahkan masuk ke https://goo.gl
- Masukkan Link yang panjang diatas kemudian Klik Shorten URL
.Untuk QR Code, tinggl kita tambahkan saja .qr pada bagian belakang URL Shortner tersebut.
Contoh :
URL Shortner ==> https://goo.gl/KzS3Wb
Ambil QR Code ==> https://goo.gl/KzS3Wb.qr
Dan hasilnya akan muncul gambar QR Code seperti ini :
Sekarang kita bisa membagikan link Shortner kita untuk dijadikan buku catatan online, atau kalau agan mempunyai Android, tinggal scan saja gambar QR Code.
OK Selamat berkreasi gan ^_^
0 komentar:
Post a Comment