Google Docs Viewer jQuery Plugin

Issue hangat langsung menggebrak mengenai More File Formats in Google Docs Viewer dan secuil trik Open Gmail's PDF Attachments in Google Docs Viewer (Google Chrome Version) Jika sobat mau membuat sebuah link agar menjadi format PDF bisa mencoba tools berikut Make Web Pages to PDF atau melakukan search artikel dengan format PDF yang sudah jadi Search Engine PDF Format jika kurang, apa berniat membuat RSS Feed menjadi PDF Convert RSS Feeds to PDF Free Online!!! Kali ini Beben si bloglang anu ganteng kalem tea b-) akan berbagi bagaimana caranya memasukan link berekstension tiff, pdf, ppt, pps, doc and docx tanpa meninggalkan blog/web kita menggunakan fasilitas Google Docs.

Untuk lebih ngeuh coba sobat tengok demo berikut ini

demo

Jadi nanti pada sesi postingan kita hanya tinggal menuliskan syntax seperti biasa yang diatur dengan class dan id. Aturan penulisan syntax on the post side :D

<a  href="your-link.pdf" class="embed">Streaming File</a>
<a  href="your-link.pdf" id="embedURL">Streaming File</a>

Perlu diingat sama sobat sekalian, trik ini menggunakan pemanggilan script metode jQuery plugin :P Masukin seluruh Jquery script ini diatas tag penutup </body>

jQuery Script

<script type='text/javascript'>
//<![CDATA[
/*
* jQuery.gdocViewer - Embed linked documents using Google Docs Viewer
* Licensed under MIT license.
* Date: 2011/01/16
* @author Jawish Hameed
* @version 1.0
*/
(function($){
$.fn.gdocsViewer = function(options) {
var settings = {
width : '500',
height : '600'
};

if (options) {
$.extend(settings, options);
}
return this.each(function() {
var file = $(this).attr('href');
var ext = file.substring(file.lastIndexOf('.') + 1);
if (/^(tiff|pdf|ppt|pps|doc|docx)$/.test(ext)) {
$(this).after(function () {
var id = $(this).attr('id');
var gdvId = (typeof id !== 'undefined' && id !== false) ? id + '-gdocsviewer' : '';
return '<div id="' + gdvId + '" class="gdocsviewer"><iframe src="http://docs.google.com/viewer?embedded=true&url=' + encodeURIComponent(file) + '" width="' + settings.width + '" height="' + settings.height + '" style="border: none;"></iframe></div>';
})
}
});
};
})( jQuery );
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$('a.embed').gdocsViewer({width: 500, height: 600});
$('#embedURL').gdocsViewer();
});
//]]>
</script>

Save.

Screenshot after add on my dummies blog. Maaf resolusi tinggi gambarnya saya gepengin yak, abisnya panjang bgt bos ;))


Jika sobat memang sudah memiliki file dengan enkstension yg mendukung dari trik ini, sobat dapat mencoba langsung via generate dihalaman berikut ini Google Docs Viewer. Beben kasih contoh file .pdf dari blogger buster yah :P

Paste this link into email or IM:

http://docs.google.com/viewer?url=http%3A%2F%2Fbloggerbuster-tools.googlecode.com%2Ffiles%2FBuilding-Websites-With-Blogger-Preview3.pdf

Or, paste this HTML tag into your blog or website for a link to the viewer:

<a href="http://docs.google.com/viewer?url=http%3A%2F%2Fbloggerbuster-tools.googlecode.com%2Ffiles%2FBuilding-Websites-With-Blogger-Preview3.pdf">Building Websites With Blogger</a>

For an embedded viewer, use this HTML tag instead:

<iframe src="http://docs.google.com/viewer?url=http%3A%2F%2Fbloggerbuster-tools.googlecode.com%2Ffiles%2FBuilding-Websites-With-Blogger-Preview3.pdf&embedded=true" width="600" height="780" style="border: none;"></iframe>

To view now, click here.

Happy streaming file my friend \m/

Resource by: http://www.jawish.org/blog/archives/394-Google-Docs-Viewer-plugin-for-jQuery.html