Untuk lebih ngeuh coba sobat tengok demo berikut ini
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
Perlu diingat sama sobat sekalian, trik ini menggunakan pemanggilan script metode jQuery plugin :P Masukin seluruh Jquery script ini diatas tag penutup </body><a href="your-link.pdf" class="embed">Streaming File</a>
<a href="your-link.pdf" id="embedURL">Streaming File</a>
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>
//<![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
Prikitiwww...
Nah begitu cara mengambil sebuah embed video. Sekarang bagaimana jika kita menulis macam gini di postingan blog
Widget hasil karya Beben akan kelihatan layak ini