Sabtu, 29 Juni 2013

Free Download zip.js Javascript Library To Zip and Unzip Files

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 fileRead a zip fileZip manager
gildas-lormeau.github.io/zip.js/demos/demo1.htmlgildas-lormeau.github.io/zip.js/demos/demo2.htmlgildas-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/

Kamis, 27 Juni 2013

Create Your Own Link Sharing Like Pastebin or Shortly!

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

<textarea id="result" cols="32" rows="16" class="hidden" readonly></textarea>
<div align="center" id="share" class="hidden">
<textarea id="txt" cols="48" rows="20"></textarea><br />
<button id="send">send</button><br />
URL:
<input type="text" id="url" size="56" readonly>
<iframe name="postform" width="0" height="0" class="hidden" id="postframe" src="about:blank"></iframe>
<form action="https://spreadsheets.google.com/formResponse?formkey=dHRtWnduUUdBYlpnUTdmYVhZaXNDc0E6MQ&ifq" method="POST" id="chatform" target="postform">
<input type="hidden" name="entry.0.single" value="" id="sendtext">
<input type="hidden" name="entry.1.single" value="" id="keytext">
<input type="hidden" name="pageNumber" value="0">
<input type="hidden" name="backupCache" value="">
<input type="submit" name="submit" value="Submit" id="submitbutton" class="hidden">
</form>
</div>

<style>
body{background:#debe94}
.hidden {
display:none
}
#result {
width:100%;
height:100%
}
.loading {
min-width:16px;
min-height:16px;
background-repeat:no-repeat;
background-image:url("IMAGE-LOADINGAN 16x16")
}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

<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/

Selasa, 25 Juni 2013

Amazing Creations of Input Type Checkbox

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
#check1[type="checkbox"] {
display: none;
}
#loadcheck1 {
display: block;
margin: 5px auto;
}
.loadcheck {
width: 165px;
height: 40px;
font-size: 35px;
}
.loadcheck span {
float: left;
cursor: pointer;
}
.load {
display: block;
width: 7px;
height: 7px;
margin: 20px 5px;
border-radius: 10px;
transition: .5s;
}
.load:nth-child(2) {
background: #e91639;
}
.load:nth-child(3) {
background: rgba(233, 22, 57, .7);
}
.load:nth-child(4) {
background: rgba(233, 22, 57, .5);
}
.load:nth-child(5) {
background: rgba(233, 22, 57, .3);
}
.load:nth-child(6) {
background: rgba(233, 22, 57, .1);
}
span[class*="cancel"] {
font-size: 40px;
color: #e91639;
transition: .5s;
transition-delay: .1s;
}
span[class*="check"] {
color: rgba(0, 0, 0, .1);
transition: .5s;
transition-delay: .1s;
}
#check1:checked + .loadcheck .entypo-check {
color: #13a03b;
}
#check1:checked + .loadcheck .entypo-cancel {
color: rgba(0, 0, 0, .1);
}
#check1:checked + .loadcheck .load:nth-child(2) {
background: rgba(19, 160, 59, .1);
}
#check1:checked + .loadcheck .load:nth-child(3) {
background: rgba(19, 160, 59, .3);
}
#check1:checked + .loadcheck .load:nth-child(4) {
background: rgba(19, 160, 59, .5);
}
#check1:checked + .loadcheck .load:nth-child(5) {
background: rgba(19, 160, 59, .7);
}
#check1:checked + .loadcheck .load:nth-child(6) {
background: #13a03b;
}
Markup HTML<input type="checkbox" id="check1" checked="" />
<label for="check1" class="loadcheck" id="loadcheck1">
<span class="entypo-cancel">&#10008;</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">&#10004;</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²
DEMO
#check[type="checkbox"] {
display: none;
}
#loadcheck {
position: absolute;
left: 0;
right: 0;
margin: 25px auto;
cursor: pointer;
}
.loadcheck {
width: 165px;
height: 40px;
font-size: 35px;
}
.loadcheck span {
float: left;
}
.load {
display: block;
width: 7px;
height: 7px;
margin: 20px 5px;
border-radius: 10px;
transition: .5s;
cursor: pointer;
}
.load:nth-child(2) {
background: #db1536;
}
.load:nth-child(3) {
background: rgba(219, 21, 54, .7);
}
.load:nth-child(4) {
background: rgba(219, 21, 54, .5);
}
.load:nth-child(5) {
background: rgba(219, 21, 54, .3);
}
.load:nth-child(6) {
background: rgba(219, 21, 54, .1);
}
span[class*="cancel"] {
font-size: 40px;
color: #db1536;
transition: .5s;
transition-delay: .1s;
}
span[class*="check"] {
color: rgba(0, 0, 0, .1);
transition: .5s;
transition-delay: .1s;
}
#check:checked + .loadcheck .entypo-check {
color: #58d37b;
}
#check:checked + .loadcheck .entypo-cancel {
color: rgba(0, 0, 0, .1);
}
#check:checked + .loadcheck .load:nth-child(2) {
background: rgba(88, 211, 123, .1);
}
#check:checked + .loadcheck .load:nth-child(3) {
background: rgba(88, 211, 123, .3);
}
#check:checked + .loadcheck .load:nth-child(4) {
background: rgba(88, 211, 123, .5);
}
#check:checked + .loadcheck .load:nth-child(5) {
background: rgba(88, 211, 123, .7);
}
#check:checked + .loadcheck .load:nth-child(6) {
background: #58d37b;
}
.buka {
text-align: center;
letter-spacing: 1px;
color: #fff;
opacity: 0;
-webkit-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
.buka a {
color: #00ccff;
text-decoration: none;
}
#check:checked ~ .buka {
opacity: 1;
letter-spacing: 2px;
}
Planning HTML<input type="checkbox" id="check" />
<label for="check" class="loadcheck" id="loadcheck">
<span class="entypo-cancel">&#10008;</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">&#10004;</span>
</label>
<div class="buka">Follow me on <a href="http://twitter.com/bebenkoben">twitter</a></div>
Lakukan pengeditan sesuai dengan keperluan masing² Semoga bermanfaat dan menjadi blogger professional :)
Bonus:
www.bchanx.com/logos-in-pure-css-demo
ghinda.net/css-toggle-switch/bootstrap.html
alexpeattie.com/projects/windowed
Happy coding \m/

Senin, 24 Juni 2013

Make Display Image like On Google Image Search use Photowall jQuery Plugin

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 imagePhotoWallIngat 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 :))
.photowall {
position: relative;
width: 1270px;
height: 100%;
margin: 0 auto;
}
.pw-slide {
position: relative;
float: left;
margin: 5px;
cursor: pointer;
}
.pw-slide .pw-image {
max-height: 200px;
}
.pw-slide .pw-image-desc {
display: none;
}
.pw-previewer {
position: relative;
float: left;
width: 1258px;
margin: 0 5px;
padding: 50px 0;
color: #EEE;
background: #333;
}
.pw-previewer.hide {
display: none;
}
.pw-previewer .pw-previewer-close {
position: absolute;
right: 23px;
top: 10px;
font-size: 40px;
font-family: Verdana, Arial, sans-serif;
color: #000;
}
.pw-previewer .pw-previewer-close:hover {
cursor: pointer;
color: #555;
}
.pw-previewer .pw-image {
float: left;
max-width: 500px;
margin: 0 0 0 100px;
}
.pw-previewer > div {
float: right;
width: 400px;
margin: 25px 200px 0 0;
}
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
<div class='post' id='post'>
<div class='photowall'>

<div class='title'>
<a expr:name='data: post.id'/>
<b:if cond='data: post.title'>
<b:if cond='data: post.url'>
<h1 id='PostTitle'><data: post.title/></h1>
<b:else/>
<h1><data: post.title/></h1>
</b:if>
</b:if>
. . .
. . .
. . .
</div>
</div>
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/

Sabtu, 22 Juni 2013

Make 10 Fancy Buttons with Amazing Effects

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
  1. Funky button.
  2. Full stylish button.
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:

>> cssdeck.com/labs/full/beautiful-flat-buttons
>> ace-subido.github.io/css3-microsoft-metro-buttons/forms.html
>> lab.hakim.se/ladda
>> www.bestfreewebresources.com/2013/06/css3-tutorials-create-buttons.html

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/

Jumat, 21 Juni 2013

Free The Best Blogger Templates 2013

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

template-image

E Style Blogger Template

template-image

Western Blogger Template

template-image

Eleven40 Theme

template-image

MBL Apollo

template-image
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)

Bubble Theme Blogger Template

Screenshot Template

Sword Art Online v2 Blogger Template

Screenshot Template

Shinpuru v2.3 Blogger Template

Screenshot Template

Robotic Notes Blogger Template

Screenshot Template

Oreshura Blogger Template

Screenshot Template

Hatsune Miku Blogger Template

Screenshot Template

Date A Live Blogger Template

Screenshot Template

SkyBlue Blogger Template

Screenshot Template

Anime Note Blogger template

Screenshot Template

Sword Art Online Blogger Template

Screenshot Template

Mirai Suenaga Blogger Template

Screenshot Template

Hyouka Blogger Templates

Screenshot Template

Blue Minimalist Blogger Template

Screenshot Template

Fairy Tail Blogger Template

Screenshot Template

Shinobu Oshino Blogger Template

Screenshot Template

Hatsune Miku Magazine Style

Screenshot Template

Red Minimalist Blogger Templates

Screenshot Template
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/