Bersambung dari post sebelumnya "Cara Membuat Spry Menu Bar", Kita akan berlanjut membahas cara men upload kode Js dan Css nya di Google Drive. Google adalah penyedia layanan hosting dengan persyaratan yang mudah dan gratis. Dengan membuat google mail kita sudah dapat mengakses google drive. Cara upload file Js dan Css ke google drive :
- Login ke google drive
- Klik New → File Upload
Buka file SpryAssets bawaan spry menu bar horizontal yang telah kita buat sebelumnya, Lalu pilih SpryMenuBar (Js) dan SpryMenuBarHorizontal (Css).
Setelah kedua file terupload ke google drive maka akan tampak seperti gambar diatas.
Klik File → Share → Advanced → Change → Public on the web → Save
- Ambil kode url nya, lalu rubah alamat link share nya.
"https://drive.google.com/file/d/0B49EfzbWJ2eGdWlud0VEaXFrZkk/view?usp=sharing"
Rubah alamat link share Js nya menjadi :
https://drive.google.com/host/0B49EfzbWJ2eGdWlud0VEaXFrZkk
Untuk file Css nya, cara upload dan pengambilan kode sharing nya sama, termasuk penulisan link share nya.
https://drive.google.com/host/0B49EfzbWJ2eGVVlkS1NFT0U3ZFU
Jadi jika kita menggunakan server dari google drive harus menghapus file/d menambahkan tulisan host sebelum kode sharenya. Dan kita tinggal menempatkan url - url tersebut diatas tag <head>. Lihat contoh dibawah ini:
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
setelah dapatkan url - url nya akan menjadi seperti ini:
<script src="https://drive.google.com/host/0B49EfzbWJ2eGdWlud0VEaXFrZkk" type="text/javascript"></script>
<link href="https://drive.google.com/host/0B49EfzbWJ2eGVVlkS1NFT0U3ZFU" rel="stylesheet" type="text/css" />
Maka kode utuh dari spry menu bar yang sebelumnya telah kita buat adalah seperti dibawah ini: |
<script src="https://googledrive.com/host/0B49EfzbWJ2eGdWlud0VEaXFrZkk" type="text/javascript"></script>
<link href="https://googledrive.com/host/0B49EfzbWJ2eGVVlkS1NFT0U3ZFU" rel="stylesheet" type="text/css" />
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">SOFTWARE</a>
<ul>
<li><a href="#">SOFTWARE.1</a></li>
<li><a href="#">SOFTWARE.2</a></li>
<li><a href="#">SOFTWARE.3</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">EBOOK</a>
<ul>
<li><a href="#">EBOOK.1</a></li>
<li><a href="#">EBOOK.2</a></li>
<li><a href="#">EBOOK.3</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">WINDOWS</a>
<ul>
<li><a href="#">WINDOWS.1</a></li>
<li><a href="#">WINDOWS.2</a></li>
<li><a href="#">WINDOWS.3</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">BLOGGER</a>
<ul>
<li><a href="#">BLOGGER.1</a></li>
<li><a href="#">BLOGGER.2</a></li>
<li><a href="#">BLOGGER.3</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script> |
|
|
| Kita tinggal Upload kode utuh diatas ke Blogger.Demikian pembahasan kali ini, mohon maaf bila ada kesalahan.Selamat mencoba. |
|
|
|
|
|
|
|