Dari pada tidak mosting, gue mau share artikel mengenai zip.js (JavaScript library to zip and unzip files) Koben sendiri kurang tahu secara detail cara pemakaian ini tools terhadap file online! Setelah melakukan ini-itu dan mencoba membuat apps .html offline, ternyata lumayan have fun bro. Silahkan agan-agin meluncur ke halaman gildas-lormeau.github.io/zip.js File .zip local storage bisa kita lihat tanpa perlu mengekstrak dulu. Sebagian besar bentuk file yg mendukung internet media type bisa di zip dan unzip dengan apps ini. Cuma pertanyaannya sekarang, selain kita snediri apa orang lain bisa melihat file tujuan atau tidak :-/ Hal inilah yang masih membingungkan...gue kagak tahu script #-o
JavaScript library to zip and unzip files terdiri dari 3 embed yaitu zip file creation, zip file reading and zip manager. Ketiganya sangat berkaitan, sehingga dengan begitu kinerja lebih mudah (sotoy mode on habis kata²) Screenshot & demo online
Create a zip file
Read a zip file
Zip manager
gildas-lormeau.github.io/zip.js/demos/demo1.html
gildas-lormeau.github.io/zip.js/demos/demo2.html
gildas-lormeau.github.io/zip.js/demos/demo3.html
Silahkan dilihat-lihat, pelajari, tertarik atau tidak memiliki itu semua. Jika mau yah monggo disikat...
Semoga bermanfaat, ide saran or etc silahkan komentar :) Happy blogging \m/
Saya teh bingung, bukannya tidak mau memosting tetapi data resource yang ada pada gue bejibun sekali. Dan data resources yg ada memang membutuhkan skill bila memang mau memakainya! Masalah timbul, belum mosting sources satu eh sudah ketemu lagi source serupa dan gayanya tidak kalah brooo :-?? Koben sekarang mau berbagi apps full stylish serupa dengan layanan web pastebin.com Ada dua metode nih bos, pertama kita menggunakan bantuan layanan dari Google Spreadsheets and ke dua murni memakai script! Siapkan cemilan let's get de done...
Buka halaman blog keren berikut text sharing with google spreadsheets. Pada kotak yg tersedia ketikan apapun terserah, kemudian klik tombol send! Ex: Contoh text sharing with google spreadsheets Ada tulisan apa di sana tertera? Itu link gue buat 3 hari lalu. Sudah terbayangkan fungsi dari apps tersebut :-/ Kepengen membuat itu silahkan baca sumbernya jsdo.it/Fake/gsts Sudah jelas tertera apa yg musti kalian lakukan. Berikut planning HTML
<script type="text/javascript">//<![CDATA[ var B62SRC="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";$(function(){if(window.location.search.match(/^\?([A-Za-z0-9]{6})([A-Za-z0-9]+)$/)){var key=RegExp.$2;var timestr=base62timestr(RegExp.$1);loadResult(timestr,key);$("#result").addClass("loading");$("#result").show();return;} $("#share").show();$("#send").click(function(){var data=$("#txt").val();if(data==""){alert("Masukan data!!!");return;} $("#url").addClass("loading");var key="";for(var i=0,len=B62SRC.length;i<4;++i){key+=B62SRC.charAt(Math.floor(Math.random()*len));} $("#url").val("");$("#sendtext").val(data);$("#keytext").val(key);$("#submitbutton").click();$("#send").attr("disabled","disabled");});$("#postframe").load(function(){loadPostedLog($("#keytext").val());$("#sendtext").val("");$("#keytext").val("");});$("#url").click(function(){this.select();});});function procResponse(data){$("script#jsonprequest").remove();$("#url").removeClass("loading");$("#send").removeAttr("disabled");$("#txt").val("");var rows=data.table.rows;if(rows.length<1){alert("Kesalahan akuisisi data");return;} var time=rows[0].c[0].v;var time62=date2base62(time);var key=rows[0].c[2].v;$("#url").val("http://"+window.location.hostname+window.location.pathname+"?"+time62+key);} function loadPostedLog(key){var param={key:"0ArUyC7fgBs1KdHRtWnduUUdBYlpnUTdmYVhZaXNDc0E",pub:1,gid:0,tq:'SELECT A, B, C WHERE C = "'+key+'" ORDER BY A DESC LIMIT 1',tqx:"responseHandler: procResponse;reqId:"+(new Date()).getTime().toString()};$("<script />",{id:"jsonprequest",src:"https://spreadsheets.google.com/tq?"+$.param(param)}).appendTo("body");} function procResult(data){$("script#jsonprequest").remove();$("#result").removeClass("loading");var rows=data.table.rows;if(rows.length<1){alert("Data tidak ada.");return;} $("#result").text(rows[0].c[1].v);} function loadResult(timestr,key){var param={key:"0ArUyC7fgBs1KdHRtWnduUUdBYlpnUTdmYVhZaXNDc0E",pub:1,gid:0,tq:'SELECT A, B, C WHERE A = datetime "'+timestr+'" AND C = "'+key+'" LIMIT 1',tqx:"responseHandler: procResult;reqId:"+(new Date()).getTime().toString()};$("<script />",{id:"jsonprequest",src:"https://spreadsheets.google.com/tq?"+$.param(param)}).appendTo("body");} function date2base62(date){return B62SRC.charAt(date.getFullYear()-1970)+ B62SRC.charAt(date.getMonth())+ B62SRC.charAt(date.getDate())+ B62SRC.charAt(date.getHours())+ B62SRC.charAt(date.getMinutes())+ B62SRC.charAt(date.getSeconds());} function base62timestr(b62str){if(!b62str.match(/^[A-Za-z0-9]{6}$/)){return null;} var timestr=(B62SRC.indexOf(b62str[0])+1970).toString()+"-"+ +(B62SRC.indexOf(b62str[1])+1).toString()+"-"+ +B62SRC.indexOf(b62str[2]).toString()+" "+ +B62SRC.indexOf(b62str[3]).toString()+":"+ +B62SRC.indexOf(b62str[4]).toString()+":"+ +B62SRC.indexOf(b62str[5]).toString();return timestr;} //]]></script>
Bila sobat mau lebih privasi, silahkan buat formkey di google drive. Yang gue pusingkan bagaimana cara buat key yg ada di var param dalam script!!! Mungkin apps yg ke dua ini bisa menjadi pilihan ;)
Buka kembali link blog keren berikut shortly is pastebin in blogger template. Ada apa di sana? Sudah barang tentu hal serupa dengan text sharing with google spreadsheets namun berbeda teknik. Yang ini pakek script bos, full kombinasi scripts. Untuk menyingkat waktu dan tenaga, demo yg gue berikan merupakan markup HTML alias planning penulisan di sesi postingan. Ex: Demo shortly is pastebin in blogger template Download dan hostingkan ke-4 script yg bertuliskanhttps://raw.github.com/lucaspiller/shortly/master/vendor/. . .Link download sekaligus sumber github.com/lucaspiller/shortly Pelajari sendiri detilnya mah yah :d Aku jg kagak ngerti sebatas pemakai sejati :) Maaf jika telat update postingan, gue lagi membaca 1 web keren dengan jumlah halaman 300-an lebih. Opensource semua dan hampir 99% konten gile makjang. Nanti gue bagi pada sesi postingan yang selanjutnya kalau sudah tamat acara bacanya :)) Happy coding \m/
Sebenarnya banyak bahan buat postingan, tapi mencari yang unik dan aneh satu kendalanya. Koben mau berbagi trick tutorial seputar variabel input. Seperti yg kita ketahui sekarang, properti input dirangkai dengan property label dapat membuat karya yg luar binasa. Berikut beberapa link posted dengan kreasi menggunakan property input type checkbox
Masih banyak c, cari ajah dech yach cendili :"> Berawal dari melihat animated check inputs cssdeck.com/labs/full/animated-check-inputs Satu tipe kreasi cek bok unik banget! Langsung saja bro coba di klik-klik...DEMOTerlihat sederhana namun kodenya lumayan bejibun :d
Markup HTML<input type="checkbox" id="check1" checked="" /> <label for="check1" class="loadcheck" id="loadcheck1"> <span class="entypo-cancel">✘</span> <span class="load"></span> <span class="load"></span> <span class="load"></span> <span class="load"></span> <span class="load"></span> <span class="entypo-check">✔</span> </label>Edit kode sesuai dengan kebutuhan, terutama margin, height & width. Sekarang mari kita tambahkan sedikit variasi agar full stylish ;) Sekali lagi coba di klik²
Tutorial jQuery plugin saat ini akan sangat cocok sekali bagi blogger yang konten blognya di dominasi oleh gambar. Koben sekarang akan berbagi informasi cara membuat a photo displaying using jquery plugin. Project karya master Jeremy JC Paul ini diberi nama PhotoWall.js Mungkin di antara sobat sudah pernah melihat plugin jQuery display for image yang lebih dahsyat dari ini! Tapi kenapa AA Koben pilihkan yg ini, because eh karena hasil jadi dari PhotoWall mirip dengan kepunyaan google search imageIngat sekali lagi, fitur ini diperuntukan untuk blogger yg mana blognya memang sebagian besar menampilkan image content! Tetapi bagi blogger yg suka dengan gaya, silahkan ajah pasang :))
Itu kode css basic, silahkan rubah nominal yg ada dan tambahkan variabel lainnya sesuai dengan kebutuhan masing-masing.
Markup HTML Cari pada template kalian kode berikut<div class='post' id='post'>Pokoknya yg mirip² dengan itu! Sisipkan ke dalamnya dengan tag<div class='photowall'>Tutuplah tag tersebut dengan tag </div> scroll ke bawah tepat di atas tag penutup <div class='post' id='post'> Kurang lebih penampakan sbb
Tagging tersebut fungsinya adalah agar markup-HTML (cara penulisan syntax) pada postingan lebih irit kode :p Pemakaian di area postingan dengan syntax berikut<div class="pw-slide"> <img class="pw-image" src="http://LINK-IMAGE-HERE" /> <div class="pw-image-desc"> <h1>The TITLE</h1> <p>Blah Bleh Bloh Here</p> </div> </div>Hostingkan jQuery Photowall biar mempercepat akses loading!
/*! * jQuery photoWall.js v0.1.0 * http://jeremyjcpaul.com * https://github.com/jeremyjcpaul/photowall * * Copyright 2013 Jeremy JC Paul * Released under the MIT license. * https://github.com/jeremyjcpaul/photowall/blob/master/MIT-LICENSE.txt * * Date: 04/06/2013 */ ;(function($){var pluginName='photoWall';var $pwCurrentSlide=0;var $pwCurrentPreviewer=0;function Plugin(element,options){var el=element;var $el=$(element);options=$.extend({},$.fn[pluginName].defaults,options);function init(){hook('beforeInit');$(window).load(function(){$(".pw-previewer").remove();$(".pw-slide").attr("class","pw-slide");var $offset=0;$(".pw-slide").each(function(){$(this).addClass("offset-"+$(this).offset().top);if($offset!=0){var $newOffset=$(this).offset().top;if($offset!=$newOffset){$(this).prev().addClass("pw-slide-group-last");$(this).addClass("pw-slide-group-first").before("<div class='pw-previewer pw-preview-"+$offset+" hide'>HERE</div>");$offset=$newOffset;}}else {$offset=$(this).offset().top;}});$el.append("<div class='pw-previewer pw-preview-"+$offset+" hide'>HERE</div>");$el.children(".pw-slide:first").addClass("pw-slide-group-first");$el.children(".pw-slide: last").addClass("pw-slide-group-last");hook('afterInit');});$(".pw-slide").click(function(){$pwCurrentSlide=$(this);$(".pw-previewer").addClass("hide").stop().slideUp(options.speed);$previewer=$pwCurrentSlide.nextAll(".pw-previewer:first");$pwCurrentPreviewer=$previewer;$previewer.empty();$previewer.append("<span class='pw-previewer-close'>x</span>");$(".pw-previewer-close").click(function(){$pwCurrentSlide=0;$pwCurrentPreviewer.empty();$pwCurrentPreviewer=0;$(".pw-previewer").addClass("hide").stop().slideUp(options.speed);});$(this).children("img").clone().appendTo($previewer);$(this).children(".pw-image-desc").contents().clone().appendTo($previewer);$previewer.children("h1, p").wrapAll("<div />");$previewer.slideDown(options.speed,function(){$('html,body').animate({scrollTop:$previewer.children("img").offset().top-100},options.speed);}).removeClass("hide");});$(document).keydown(function(e){switch(e.which){case 27:close();break;case 37: prev();break;case 39:next();break;default:return;}e.preventDefault();});}function option(key,val){if(val){options[key]=val;}else{return options[key];}}function select(val){$(".pw-slide:eq("+val.toString()+")").click();}function selectById(id){$(".pw-slide#"+id.toString()).click();}function selectFirst(){$(".pw-slide:first").click();}function selectLast(){$(".pw-slide: last").click();}function close(){hook('beforeClose');$pwCurrentSlide=0;$pwCurrentPreviewer.empty();$pwCurrentPreviewer=0;$(".pw-previewer").addClass("hide").stop().slideUp(options.speed);hook('afterClose');}function next(){hook('beforeNext');hook('beforeNextPrev');if($pwCurrentSlide.next().hasClass("pw-previewer")){if($pwCurrentSlide.nextAll(".pw-slide:first").length==0)$(".pw-slide:first").click();else $pwCurrentSlide.nextAll(".pw-slide-group-first:first").click();}else {$newContent=$pwCurrentSlide.nextAll(".pw-slide:first");$pwCurrentSlide=$newContent;$pwCurrentPreviewer.empty();$pwCurrentPreviewer.append("<span class='pw-previewer-close'>x</span>");$(".pw-previewer-close").click(function(){$pwCurrentSlide=0;$pwCurrentPreviewer.empty();$pwCurrentPreviewer=0;$(".pw-previewer").addClass("hide").stop().slideUp(options.speed);});$newContent.children().clone().appendTo($pwCurrentPreviewer);}$('html,body').animate({scrollTop:$pwCurrentPreviewer.children("img").offset().top-100},options.speed);hook('afterNext');hook('afterNextPrev');}function prev(){hook('beforePrev');hook('beforeNextPrev');if($pwCurrentSlide.prev().hasClass("pw-previewer")){$pwCurrentSlide.prevAll(".pw-slide-group-last:first").click();}else {if($pwCurrentSlide.prevAll(".pw-slide:first").length==0){$(".pw-slide: last").click();$newContent=$(".pw-slide:last");}else {$newContent=$pwCurrentSlide.prevAll(".pw-slide:first");}$pwCurrentSlide=$newContent;$pwCurrentPreviewer.empty();$pwCurrentPreviewer.append("<span class='pw-previewer-close'>x</span>");$(".pw-previewer-close").click(function(){$pwCurrentSlide=0;$pwCurrentPreviewer.empty();$pwCurrentPreviewer=0;$(".pw-previewer").addClass("hide").stop().slideUp(options.speed);});$newContent.children().clone().appendTo($pwCurrentPreviewer);}$('html,body').animate({scrollTop:$pwCurrentPreviewer.children("img").offset().top-100},options.speed);hook('afterPrev');hook('afterNextPrev');}function destroy(){$el.each(function(){var el=this;var $el=$(this);$(".pw-slide").unbind().attr("class","pw-slide");$(".pw-previewer").remove();hook('onDestroy');$el.removeData('plugin_'+pluginName);});}function hook(hookName){if(options[hookName]!==undefined){options[hookName].call(el);}}init();return{option:option,select:select,selectById:selectById,selectFirst:selectFirst,selectLast:selectLast,close:close,next:next,prev: prev,destroy: destroy};}$.fn[pluginName]=function(options){if(typeof arguments[0]==='string'){var methodName=arguments[0];var args=Array.prototype.slice.call(arguments,1);var returnVal;this.each(function(){if($.data(this,'plugin_'+pluginName)&&typeof $.data(this,'plugin_'+pluginName)[methodName]==='function'){returnVal=$.data(this,'plugin_'+pluginName)[methodName].apply(this,args);}else{throw new Error('Method '+methodName+' does not exist on jQuery.'+pluginName);}});if(returnVal!==undefined){return returnVal;}else{return this;}}else if(typeof options==="object"||!options){return this.each(function(){if(!$.data(this,'plugin_'+pluginName)){$.data(this,'plugin_'+pluginName,new Plugin(this,options));}});}};$.fn[pluginName].defaults={speed:500,beforeInit:function(){},afterInit:function(){},beforeNextPrev:function(){},afterNextPrev:function(){},beforeNext:function(){},afterNext:function(){},beforePrev:function(){},afterPrev:function(){},beforeClose:function(){},afterClose:function(){},onDestroy:function(){}};})(jQuery);
Kemudian cari tag penutup body </body> sisipkan script pemanggil berikut tepat diatasnya<script> jQuery(document).ready(function(){ jQuery(".photowall").photoWall(); }); </script>SAVE. Semoga berhasil. Demo and resource: jeremyjcpaul.com/photo-wall-demo.php - github.com/jeremyjcpaul/photowall Default Demo on Single Page Happy jQuery \m/
Keberadaan sebuah tombol (button) memang tidak dapat terhindarkan dari dunia CSS! Hampir di setiap area site pasti memiliki yg namanya si button. Maka oleh karena itu terciptalah variasi button. Dengan ilmu & skill teknik pembuatan tombol bisa dibagi menjadi dalam 2 kateogri
Sebenarnya bukan itu, tapi pembuatan tombol dengan teknik mudah dan teknik repot...Hehehe :p Semudah-mudahnya membuat tombol tetap diperlukan kode CSS yg lumayan, apalagi yg susah! Satu hal penting yg tidak boleh dilupakan, dalam membuat tombol sobat harus melihat ke depannya serta fungsinya. Berikut beberapa link resource tombol yg gue temukan dengan teknik biasa and luar biasa:
Dengan menambahkan variasi CSS3 disana-sini yg notabene sudah mendukung dalam membuat efek animation sederhana, maka kehadiran tombol dapat lebih memberikan warna tersendiri. Koben mau berbagi informasi cara pembuatan 12 fancy butoons created by bartekd. Berikut ini demonyaPada kesempatan ini seperti biasa AA Koben bagian penyederhanaan unik ID and CSS code agar sobat dapat mengeditnya menjadi lebih mudah ;)
Koben sudah pilihkan 10 jenis tombol dimana unik ID tombol diberi nama bbn1 - bbn10. Jadi jika mau ngedit Button 01, tinggal cari unik ID bbn1, begitu seterusnya. Karena tombol ini masuk dalam kategori kelas berat, penggunaan kode CSS jg lumayan banyak! Default tampilan button memakai unik-ID .button_base Pertimbangkan hal itu jika benar² mau diterapkan pada blog kalian? Semoga bermanfaat :) alexwolfe.github.io/Buttons pcvector.net/uploads/demo/scripts/buttons_and_icons/buttons_css3_effects/index.html Happy button \m/
Melihat hasil jadi dari sebuah pembuatan template bisa menimbulkan niatan ganti template! Apalagi template yang tersajikan aneh dan unik. Dari semua aspek, yg paling enak template tersebut adalah gratisan :)) Lama juga AA Koben enggak bagi-bagi template kepada pengunjung setia blog aku :"> Koben minta maaf nih jika info template gratisan sekarang akan merontokan niat kalian untuk berganti template 3:-O Kalau mau mencari sendiri silahkan acak-acak di alamat ini looking for template para blogger. Pasti bingung dan keder sangkin banyaknya pilihan, klik saja tulisan ---> template kalo memang berhasil ;)
Dazzling Designer Blogger Template
E Style Blogger Template
Western Blogger Template
Eleven40 Theme
MBL Apollo
Masih banyak bos, itu mah versi elegan dan resmi! Cocok sekali bagi blogger baik dan budiman :) Sekarang saatnya bagi² template untuk blogger gokil dan punya rasa yg berbeda ~O)
Demikian saja bagi-bagi template pilihan AA Beben Koben si Bloglang anu Gantengna teu aya duana. Semoga berkenan di hati kalian. Plisss jangan salahkan AA jika sobat kepengen ganti or nambah blog gara-gara melihat template sekarang yah :(|) www.cssauthor.com/10-best-responsive-blogger-templates/ Happy template \m/