Tampilkan postingan dengan label Informasi. Tampilkan semua postingan
Tampilkan postingan dengan label Informasi. Tampilkan semua postingan

Selasa, 16 Juni 2015

Free Services from Web Reloado

Sebenarnya tidak sengaja menemukan web ini! Awalnya lagi iseng-iseng searching di google dengan keyword HTML editor dan mencari siapa tauk ada HTML-editor baru yang bisa dibagikan kepada kalian ;) Kemudian AA Koben nemuin code.reloado.com sebuah tool testing platform untuk HTML, JS dan CSS. Editor yang mengadopsi gaya dari site jsbin tempo doeloe! Gue juga dulu pernah share tool serupa, do you want to try free download openHTML and JS Bin editor.
Telusur punya usut sampai ke web reloado.com, ternyata sebuah search engine bro :-O Mungkin lebih khusus searching akan meliputi wilayah Germany! Soalnya daerah si-empunya. Sobat dapat melakukan add url di sana, dan akan langsung ter-direct ke (dot)de [beben-koben.blogspot.de]? Berikut rincian privasi add-url:
  1. IP addresses are not saved.
  2. Searches are not associated.
  3. No registration required.
Kalau berminat bisa juga langsung lakukan add dari sini:
URL:
Satu lagi yg gue temukan dari web ini adalah layanan menampilkan snapshoot (screenshot) site! Cobalah sobat melakukan search di web reloado atau buka ini saja beben koben on Reloado perhatikan dan sorot gambar icon preview! This is trick similar with websnapr, but now we talk about website thumbnails and screenshots for your site.
Apakah kepingin yg seperti itu!!!

Get started, this is the plan!http://t.reloado.com/api.php?src=[URL]&w=[width]&h=[height][URL] URL (Harus di isi) - [width] width (opsi) - [height] height (opsi)
Contoh: <img src="http://t.reloado.com/api.php?src=http://embah-google.blogspot.com&w=300&h=250" />or<img src="http://t.reloado.com/api.php?src=www.bing.com&w=300&h=250" />Itu cara mengambil thumbnail website dengan syntax HTML image. Lantas bagaimana cara menampilkan screenshots via link disorot-sorot akan muncul si thumbnailnya? Pastikan pada template blog sobat sudah terpasang jQuery script, jika sudah ada abaikan!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
#WSBubble {
display: none;
overflow: hidden;
position: absolute;
box-shadow: 0 0 6px #b4b4b4;
}
#WSBubble img {
margin: 0;
}
#WSBubble.small {
width: 220px;
height: 170px;
background: url(http://reloado.com/images/ajax-loader.gif);
}
img.websnapr {
width: 10px;
height: 10px;
}
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
$("body").append('<div id="WSBubble" class="small"></div>');
$("a.websnapr").hover(function (e) {
this.t = this.title;
this.title = "";
$("#WSBubble").css("top", (e.pageY + 15) + "px").css("left", (e.pageX + 15) + "px").html('<img width="220" height="170" src="http://t.reloado.com/?url=' + encodeURIComponent(this.href) + '" />').fadeIn("slow")
}, function () {
this.title = this.t;
$("#WSBubble").fadeOut("fast")
}).mousemove(function (e) {
$("#WSBubble").css("top", (e.pageY + 15) + "px").css("left", (e.pageX + 15) + "px")
})
});
//]]>
</script>
Planing HTML<a href="HYPERLINK-HOME-WEBSITE" class="websnapr"><img src="LINK-IMAGE"></a>or<a href="HYPERLINK-HOME-WEBSITE" class="websnapr">YOUR TITLE</a>Pada penulisan syntax link harus memakai properti class="websnapr"

DEMO: codepen.io/beben-koben/full/PqKajG
Kalo tertarik dengan teknik yg lain, sobat bisa coba baca artikel add mini preview links to blogger like snapshot capture!

Happy coding \m/

Jumat, 05 Juni 2015

Buzz Information for Blogger by Google

Agan Koben hanya akan menyampaikan dua informasi update dari blogger dan google. Yang pertama datang dari blooger buzz tentang pembaharuan syntax XML. Sobat bisa baca di sini buzz.blogger.com/2015/05/adding-new-expressions-to-blogger.html Versi master Taufik www.dte.web.id/2015/06/pembaharuan-operator-xml-blogger-2015.html Karena saya juga belum paham, silahkan sobat blogger membaca sendiri :D Semoga dengan adanya pemutakhiran expression ini akan lebih efisien tentunya ;)
Informasi ke dua datang dari google mengenai material icons! Salah satu layanan dari google design yang memungkinkan kita untuk melakukan pemanggilan icon. Sobat mungkin lebih familiar dengan Font Awesome Icon! Tidak jauh berbeda dengan hal itu, tetapi di sini kita akan menggunakan hostingan langsung dari embah google :D Ada 750+ icon yg sudah tersedia dengan size hanya 40KB saja dengan format woff2!

AA akan coba tuntun bagaimana cara memasang material icons google. Ada 2 metode yg bisa kita pakai.

Metode 1

Cara termudah untuk mengatur ikon font untuk digunakan dalam setiap halaman web adalah melalui Google Web Font. Yang perlu Anda lakukan adalah memasukkan satu baris HTML berikut:<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />Letakan yaaa kira-kira di bawah tag <head>

Metode 2

Bagi sobat yg ingin menghosting sendiri font web, bisa melakukan dengan cara ini:
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
Adapun link download source nanti ada pada akhir acara! Aturan CSS render font icon adalah sbb:

.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
width: 1em;
height: 1em;
line-height: 1;
text-transform: none;
letter-spacing: normal;

/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;

/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;

/* Support for IE. */
font-feature-settings: 'liga';
}
Ekstra aturan untuk CSS render
// Aturan untuk ukuran ikon.
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

// Aturan untuk menggunakan ikon sebagai hitam sebagai warna latar belakang.
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

// Aturan untuk menggunakan ikon putih sebagai warna latar belakang.
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
Cara penggunaan huruf ikon di HTML. Contoh sederhana...
DisplaySyntax
face<i class="material-icons">face</i>
face<i class="material-icons UNIK-ID for CLASS">face</i>
Source:
>> www.google.com/design/icons
>> google.github.io/material-design-icons
>> github.com/google/material-design-icons
>> codeload.github.com/google/material-design-icons/zip/master
>> github.com/google/material-design-icons/blob/master/iconfont/codepoints
Bonus...
>> www.google.com/design/tool/devices

Sebenarnya memang lagi rombak besar-besaran ngikutin trend material design gitooh :D

Terima kasih :)

Jumat, 03 April 2015

Make it Offline in Local Storage

local-storage-html5.Berbagi trik dan tutorial bagaimana cara melakukan penyimpanan (Save As) Fitur baru dari HTML5 yaitu local storage akan berperan penting dalam hal ini! Adapun sarana yang akan dipakai adalah browser engine. Singkat cerita kita akan mengefisiensikan fungsi dari browser yg kita punya untuk dijadikan penyimpanan file. File dapat berupa .txt, .html, or etc.
Apakah sobat masih ingat dengan trick <html contenteditable> Syntax tersebut adalah cara tercepat merubah mesin browser menjadi simple editing editor atau notepad in browser. Dengan melakukan pencet tombol Ctrl + S, sobat sudah dapat menyimpan data dengan ekstension .html

Berikut beberapa lists yg sobat bisa kunjungi untuk belajar:

  • Downloadify
  •    Sebuah javascript + flash perpustakaan kecil yang memungkinkan penciptaan dan men-download file teks tanpa interaksi server. github.com/dcneiner/Downloadify
  • a[download]
  •    'Buat file' menciptakan sebuah file txt dari konten daerah contenteditable. Hal ini dilakukan dengan menggunakan window.URL.createObjectURL (). File yang dihasilkan dapat diberi nama dan disimpan ke komputer pengguna dengan menetapkan download atribut pada link. html5-demos.appspot.com/static/a.download.html - updates.html5rocks.com/2011/08/Saving-generated-files-on-the-client-side
  • Saving generated files on the client-side
  •    FileSaver.js memungkinkan Anda menyimpan kanvas langsung dan memberi mereka nama file, yang sangat berguna untuk mengedit HTML5 gambar, teks, dan rich text. eligrey.com/blog/post/saving-generated-files-on-the-client-side - eligrey.com/demos/FileSaver.js
  • Save/download data generated in JavaScript
  •    hackworthy.blogspot.com/2012/05/savedownload-data-generated-in.html
  • HTML5 localStorage
  •    Menyimpan data dalam browser dengan HTML5 localStorage API. toddmotto.com/storing-data-in-the-browser-with-the-html5-local-storage-api
  • Javascript to save Textarea as a txt file
  •    Sebuah proyek memungkinkan kita untuk menyimpan (download) isi bidang bentuk (dalam hal ini textarea) sebagai file ke komputer atau local-storage, dengan mengambil keuntungan dari HTML5 Blob object. runnable.com/U5HC9xtufQpsu5aj/use-javascript-to-save-textarea-as-a-txt-file
  • Loading, Editing, and Saving a Text File in HTML5 Using Javascript
  •    HTML dan kode JavaScript yang menggunakan beberapa fitur HTML5 (khususnya "Blob" objek, File API, dan "download" atribut "a" tag) untuk memungkinkan pengguna agar dapat memuat, mengedit, dan menyimpan file teks di komputer lokal mereka. thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip
Sebagai bonus AA Koben akan berbagi informasi how to make a ridiculously simple personal wiki! Adapun tujuan WIK dibuat by martinpllu adalah sbb:

  • Benar-benar sederhana.
  • Menyimpan semua data di browser localStorage
  • Tidak ada separate 'edit mode' seperti kebanyakan wiki. Halaman langsung bisa diedit.
  • Bekerja dengan baik pada mobile dan desktop.
  • Dukungan navigasi browser (back/forward/bookmark etc.)
  • Menyimpan semua data secara lokal pada perangkat.
  • Navigasi keyboard.
  • Bekerja secara offline.
Silahkan meluncur ke halaman source guna mendownload dan mempelajari lebih lanjut github.com/martinpllu/wik :D

Sabtu, 28 Maret 2015

Selection Good Resources March 2015

Pemilik yusugomori.com sudah membuat sebuah project yang diberi nama CSS SANS Font Kit. Deretan alphabet ditampilkan dengan menggunakan properties CSS! Sobat bisa datang untuk download dan mempelajari sendiri di alamat yusugomori.com/projects/css-sans/fonts AA Koben juga dapatkan satu tools generator fonts dengan nama localFont. Generator local storage yang mendukung 3 jenis format font .woff, .woff2 or .ttf agar kita bisa menghemat waktu ;)) Check and get in here jaicab.com/localFont
Untuk mempelajari bagaimana font agar responsive you can read it madebymike.com.au/writing/precise-control-responsive-typography Sebagai bonus informasi dari dunia seputar huruf (fonts) gue beri graphicdesignjunction.com/2015/03/new-text-effects-tutorials-2015 & www.designzzz.com/50-hd-quotes-and-typography-wallpapers

Apakah dari kalian ingin membuat tampilan design dengan gaya full stylish? Tidak lain kalian harus memiliki material design yg mumpuni. Paman kita google sudah membuatkan itu semua www.google.com/design/spec/material-design/introduction.html Kalau susah sobat bisa langsung sikat karya basic material-design google by Daemonite on github github.com/daemonite/material.

This is selection resources from codepen and cssdeck!

codepen.io/iign/pen/GgdbXx - codepen.io/team/webflow/pen/pvydKd - codepen.io/jcoulterdesign/pen/GgGrQO - codepen.io/davidicus/pen/ZYjoVO - codepen.io/ashmind/pen/ogMPQp - codepen.io/JTParrett/pen/fnCKE - codepen.io/fbrz/pen/Guysm - codepen.io/mfritsch/pen/dPqjdy - codepen.io/Himateja/pen/wBYJdm - codepen.io/lakotuts/pen/gbdjzL - codepen.io/TimRuby/pen/ykKEf - codepen.io/jbeason/pen/Wbaedb - codepen.io/alanizdesign/pen/gbBORP - codepen.io/vavik96/pen/gbBbpR - codepen.io/claarman/pen/gbBXyL - codepen.io/kenny-hibino/pen/MYPVqV - codepen.io/mostlymatthew/pen/bNmgbE - codepen.io/sturobson/pen/Wbazbw - codepen.io/MichaelArestad/pen/ohLIa - codepen.io/enxaneta/pen/zxJwap - codepen.io/iPawan/pen/zxmapZ - codepen.io/xaddict/pen/OPBEdK - codepen.io/kyleledbetter/pen/gbQOaV - codepen.io/XavaSoft/pen/OPayeb - codepen.io/balapa/pen/gbQbXR

codepen.io/chriswrightdesign/pen/GwfEq - codepen.io/lbebber/pen/XJRdrV - codepen.io/TimGThomas/pen/VYENyK - codepen.io/ge1doot/pen/EaOxvR - codepen.io/jaysalvat/pen/OPBZrZ - codepen.io/vasim/pen/VYERpN - codepen.io/toolmantim/pen/xbQRaL - codepen.io/ronniechong/pen/LEXWVw - codepen.io/waynedunkley/pen/bNQoXb - codepen.io/mattiabericchia/pen/xbQjew - codepen.io/donovanh/pen/QwzWrK - codepen.io/SachaG/pen/HKnkG - codepen.io/torbencolding/pen/VYqpEe - codepen.io/jonnymclaughlin/pen/qEyYwp - codepen.io/vineethtr/pen/EaGbxW - codepen.io/chrisdothtml/pen/azPYqq - codepen.io/that-beanbag/pen/xbmXQg - codepen.io/claarman/pen/bNOLNv - codepen.io/zapplebee/pen/bNORWG - codepen.io/pixelass/pen/zxaeVy - codepen.io/webcre8/pen/LEqOQQ - cssdeck.com/labs/direction-aware-hover-effect - cssdeck.com/labs/stack-of-cards - cssdeck.com/labs/esbtmdeg - cssdeck.com/labs/tgfbfe6x - cssdeck.com/labs/2jcy8mhl

See you :-h

Senin, 09 Februari 2015

Miscellaneous of Github

GitHub adalah salah satu tempat terbaik untuk berbagi kode dengan teman-teman, rekan kerja, dan orang lain. Sudah ada lebih dari delapan juta orang menggunakan GitHub untuk membangun hal-hal yang menakjubkan bersama-sama. Dengan adanya fitur kolaboratif GitHub.com, aplikasi desktop, dan GitHub Enterprise, menjadikan pekerjaan menjadi lebih mudah secara individu atau tim untuk menulis kode yang lebih baik, lebih cepat.
Awalnya didirikan oleh Tom Preston-Werner, Chris Wanstrath, dan PJ Hyett untuk menyederhanakan kode berbagi, GitHub telah tumbuh menjadi code host terbesar di dunia! AA Koben akan berbagi beberapa info untuk kalian para member github? Walau tidak banyak, mungkin bisa mewakili ;))

Informasi pertama datang dari web TechSlides berbicara tentang Create Repositories with GitHub API and HTML5 techslides.com/create-repositories-with-github-api-and-html5 Cara cepat mengkonversi folder pada hard drive anda ke GitHub Repository? Bentuk HTML5 ini akan mengotentikasi, membuat repo, dan meng-upload folder ke repositori dengan JavaScript dan Github API. You can try here techslides.com/demos/github
Master Joel Sutherland berkreasi dengan membuat GitHub jQuery Repo Widget Dengan integrasi jQuery script dan jquery.githubRepoWidget.js sobat dapat good looking repo widget to add to your website.
Ex:

Contoh HTML-Editor itu saya buat dengan teknik Create Repositories with GitHub API and HTML! Mau yang lebih full stylish juga ada...

You can try it github cards Sebenarnya masih banyak aplikasi-aplikasi pendukung hasil karya pada pengembang untuk web github ini. Mungkin segini saja dulu, nanti kalau ketemu yg lain lagi saya update :D Github Pulse, github globe, Gisto Bagi sobat yang punya referensi lain...?

Happy GIthub \m/

Sabtu, 10 Januari 2015

Please read and visit or Download

Apa yang terlintas di benak kalian jika mendengar kata Glitch? Menurut google translate kata glitch berarti kesalahan. Bisa jadi juga meiliki arti kerusakan! Walaupun mempunyai arti sedikit nyeleweng, namun jika sudah menjadi sebuah generator, gambar bagus bisa kita beri efek glitch. Seperti artinya, karena merusak...jadi efek yg timbulpun amduradul :DGlitchatronTidak terbayangkan bagaimana susah membuat efek begituan secara manual!!! Karena sekarang acara artikel info bagi-bagi resources & tools, dengan hadirnya Glitchatron kalian tidak perlu bersusah-payah. Please sikat Glitchatron is a javascript glitch art generator github.com/errozero/glitchatron.

How to make CSS gradient animation for background? The answer is CSS Gradient Animator www.gradient-animator.com. Lalu jikalau sobat mau melakukan tersting input types, patterns and attributes sebelum membuatnya, maka harus meluncur ke tkp Input Type Sandbox inputtypes.com.
Berikut beberapa link resource's yg AA dapat kumpulkan, semoga sobat bisa mendapatkan ide briliant ;)

New brand extensible front-end HTML, CSS, dan JavaScript komponen antarmuka pengguna untuk responsif, ponsel, dan web modern titon.io/en/toolkit. From codepen i got some pen...

codepen.io/studio-klik-hr/pen/xbRabj - codepen.io/studio-klik-hr/pen/JobVOe - codepen.io/studio-klik-hr/pen/MYbEYP - codepen.io/studio-klik-hr/pen/KFhAg - codepen.io/studio-klik-hr/pen/rugot - codepen.io/studio-klik-hr/pen/rnHyB - codepen.io/studio-klik-hr/pen/Legcy - codepen.io/canfie1d/pen/ogYrZG - codepen.io/keithpickering/pen/azBdNj - codepen.io/SperWalas/pen/OPbZYW - codepen.io/somethingformed/pen/raWJXV

Bonus:
github.com/zzarcon/focusable - github.com/josephernest/bigpicture.js - github.com/douglascrockford/JSLint - github.com/jshint/jshint - www.bloggertipstricks.com/blogger/custom-robots-txt.html

Bye :-h

Jumat, 02 Januari 2015

Selection Good Resources in Beginning of the Year

Sebagai blogger pendatang setia blog Koben, pasti sobat sudah pada tahu satu kebiasaan gue yang suka membuat postingan dengan tema selection good resources Jika kalian kunjungi links yg ada, maka dapat menciptakan ide untuk bahan artikel post ;)) Simpan link blog/web yg notabene memang selalu update konten! Ex www.codepen.io salah satu tempat front end designer playground para kreator code. Generated md5 passwords javascript sebuah tool generator password. Uniknya ketika kita membuat satu kata kunci untuk Site Name & Email used on site secara otomatis hasil generate pass tidak akan berubah. Biasanya kalau lupa itu pass, dengan adanya tool ini asalkan kita ingat Site Name & Email used on site maka passnya akan muncul! Pokoknya begitu :P

Berikut beberapa seleksi post awal tahun yg saya dapatkan jauh-jauh sebelum hari...

Keikai MediaRSS Viewer jsdo.it/murakame/zNy0 - Hue · saturation · brightness (Lightness/Luminance) jsdo.it/inu7771/mr28 - Google Maps API jsdo.it/buibui80/k1FP - Cat picture book jsdo.it/teetteet/dmIT - Get count of SNS of URL jsdo.it/teetteet/6o8v - Test of API jsdo.it/tkrkt/jsdoit-menu - base64 of noise transparent PNG image jsdo.it/teetteet/gkVm - Execute Source Image jsdo.it/teetteet/4KU5 - Test of do's tool is happening DOM is jsdo.it/elk/cHPO - Sentence inclusive of share futon want five + α jsdo.it/teetteet/7Lwj - GeoLocator STANDALONE jsdo.it/teetteet/aMkO - Simple scroll jsdo.it/teetteet/wlXn - Hyper cat type canon Mk.2 Ex with intercooler jsdo.it/sasaplus1/egax - Gradient Generator jsdo.it/teetteet/cQq5 - Fullscreen colorpicker jsdo.it/teetteet/hhCI - Link source code viewer jsdo.it/teetteet/58hW - CSS3 Tree jsdo.it/teetteet/tNwD - Tag Cloud jsdo.it/qiu.lin/wfhN - HSV Color Picker jsdo.it/teetteet/6bq1 - Two-color conversion of the image jsdo.it/teetteet/myu2 - Simple Whiteboard with fabric.js jsdo.it/yamineko/kOuy - ACE editor 3 for PC jsdo.it/teetteet/ixZj - Illustrator mock jsdo.it/han.kuro/vsz1y - Current position acquisition and display application jsdo.it/teetteet/9X5q - Good feel of form layout jsdo.it/teetteet/jYv6 - gct256.PerlinNoise jsdo.it/teetteet/pSUo - Text animation jsdo.it/teetteet/3BqQ - SVG animation background generation jsdo.it/reosablo/zU9F - Implement convolution (the convolution processing) jsdo.it/edo_m18/ta0R - CSS Tooltip On Click cssdeck.com/labs/csstooltiponclick - Checkbox styling in CSS cssdeck.com/labs/n8gvfch6 - Animated Responsive Skills Bar cssdeck.com/labs/animated-responsive-skills-bar

Rebound Newsletter cssdeck.com/labs/c9ik4c94 - JQuery Auto Complete cssdeck.com/labs/bxaleaxw - Icon in CSS cssdeck.com/labs/css3-icons - Treestyle list cssdeck.com/labs/treestylelist - Animated gradient cssdeck.com/labs/ojxtjupf - Calendar 2015 cssdeck.com/labs/calendar-2015 - Buttons and inputs flat style ui cssdeck.com/labs/m01fcolh - Styled Select Option cssdeck.com/labs/styledselectoption - Rotating? Menu codepen.io/tmrDevelops/pen/wEBmk - CSS Animated Search Box Concepts codepen.io/brandonkennedy/pen/yGjsi - The super fast Coolors schemes generator! codepen.io/fbrz/pen/aynlk - Pure CSS slice cube slideshow codepen.io/pixelass/pen/mGtfF - Drop & Down codepen.io/mgh/pen/dsqIF - Peeled Text Transforms codepen.io/Michiel/pen/OPPKMr - 3D Experiment Formcodepen.io/Ruddy/pen/MYwqrK - Pure CSS iOS 7 Bokeh Background codepen.io/marvinengelmann/pen/bNdawZ - Flat Breadcrumb buttons codepen.io/ShawnSauce/pen/raNXmw - Pure CSS folded-corner effect codepen.io/ravinthranath/pen/XJJWbr - Animated Image Changes with background-blend-mode codepen.io/dudleystorey/pen/emmzvO - Online notepad codepen.io/kimblim/pen/NPPZVo - Pure CSS browser mockups codepen.io/adrienjarthon/pen/ogjjoj

Resizing, Moving, Snapping Windows with JS & CSS codepen.io/zz85/blog/resizing-moving-snapping-windows-with-js-css - Homepage with bourbon and CSS only Nav codepen.io/jongagarin/pen/pvjGKe - Text Preferences codepen.io/mattdawson/pen/wBMgpd - Set transparent background on image with canvas codepen.io/Mamboleoo/pen/MYKeEX - A Pen by Juan Patten codepen.io/runningskull/pen/vELRyY - CSS cylinder codepen.io/madebyjam/pen/bNERqq - Super Mega codepen.io/tmrDevelops/pen/myVwKE - Simple Accordian codepen.io/zeinab92/pen/PwZXgd - Responsive Text With Only CSS codepen.io/wossname/pen/raVezv - A Pen by Theodor Vararu codepen.io/tvararu/pen/zxqeQd - Glitched Text codepen.io/alexpivtorak/pen/GgZYbL - Animated rounded border on hover codepen.io/ccrch/pen/bNpOZx - Animated "Fold Out" Menu Labels codepen.io/mikegbabb/pen/myPbyK - Progressive blur with CSS & SVG codepen.io/iamvdo/pen/xECmI - Pure CSS, annotated linear carousel codepen.io/paulnoble/pen/ZYOzLG - CSS like buttons codepen.io/GriffinImer/pen/NPrrdx - Simple Player UI codepen.io/itsnoureddine/pen/ZYOebj - Loader transforming to nav animation concept codepen.io/petethedude/pen/zxBmEq - Futuristic HUD Control Monitor Interface codepen.io/declandewet/pen/GgqwXK - Placeholder Services codepen.io/jakob-e/pen/emzxqd - Magic ball (animated) codepen.io/tanghoong/pen/ByLKPG - Flexbox Shenanigans! codepen.io/starzonmyarmz/pen/WbGrgM - Material inspired grid codepen.io/tamashi/pen/PwGZNN - Offcanvas sidebar menu with a twist codepen.io/malydok/pen/LERvpM - Text mask with mix blend mode codepen.io/jreece/pen/NPRzeo - One-way CSS slider codepen.io/nicolasjengler/pen/QwKmqj - Rotating border codepen.io/imprakash/pen/VYaaKQ - Generated MD5 Passwords Javascript codepen.io/fabean/pen/NPbGeq - Account Slider developer.mozilla.org/en-US/demos/detail/account-slider - CSS Specificity Graph Generator jonassebastianohlsson.com/specificity-graph - BPG Image Comparison xooyoozoo.github.io/yolo-octo-bugfixes/

60 Cool CSS Effects On Codepen www.uibrush.com/60-cool-css-effects-codepen

Happy new year <:-P

Senin, 17 November 2014

Dream Writer and Image Editing Program Tool

Makin hari semakin susah saja mau membuat artikel. Selain bahan yang sudah jarang, ide mentok dan sejelubet faktor-x ikut melanda :D AA Koben akan share 2 buah tool untuk kalian. Tools sederhana, mungkin banyak yg lebih keren tetapi mau di kata apa lagi gue dapet yg ini! Mungkin di antara kalian sudah ada yg pernah mendengar tentang to do list? Kalau versi browser, gue sering mendapatkan kegunaan dari to-do-list yaitu, menuliskan apa-apa kemudian akan tersimpan secara cache pada browser engine (begitu kira-kira) ;))

By master Richard Feldman he's created dreamwriter github.com/rtfeldman/dreamwriter Demo dreamwriter.io Silahkan dipelajari dan coba-coba sendiri :D
Tools ke dua mengenai image editing program by master han.kuro jsdo.it/han.kuro/omkl Di buat dengan berpacu pada HTML5 sederhana tetapi usefully. Adapun editing gambar meliputi copy, paste, merubah tinggi & lebar, move x/y, rotation, mirror reversal, and filter (brightness, color tuning, mosaic & gradation)

Silahkan download...
  • Two Tool unduh di 4shared.
  • www.4shared.com/zip/QE8-eCVZce/Two_Tool.html
  • Download Two-Tool.zip from Ziddu.com
  • downloads.ziddu.com/download/24197305/Two-Tool.zip.html
Sebagai bonus++ selected links resource by me from you:

codepen.io/ogzhncrt/pen/yajlz - codepen.io/arnoldsandoval/pen/ulkgz - codepen.io/yoksel/pen/JnALF - codepen.io/jjmartucci/pen/sEFta - codepen.io/jvaill/pen/bauzD - codepen.io/andreas_pr/pen/GFBfd - codepen.io/hmdmweb/pen/GoEna - codepen.io/hmdmweb/pen/zfhrd - codepen.io/thirdtiu/pen/fjnxd - codepen.io/dgerritsen/pen/Esydu - codepen.io/happelation/pen/Frkhm - codepen.io/eMaj/pen/xJFny - codepen.io/sirnightowl/pen/vCqxG - codepen.io/ZonFire99/pen/njdls - codepen.io/torresandres/pen/EaxWXE - codepen.io/dudleystorey/pen/YPzqgZ - codepen.io/kieranfivestars/pen/gbOWbM - codepen.io/thirdtiu/pen/MYWwOZ - codepen.io/sooba/pen/EaxKOx - codepen.io/bennettfeely/pen/OPJyYY - codepen.io/chrisota/pen/ByaZME - codepen.io/jaydropout/pen/pvowNX - codepen.io/joe-watkins/pen/qEBjPm - codepen.io/alistairtweedie/pen/GgROmd - codepen.io/lonekorean/pen/EaxGXo - codepen.io/SamMarkiewicz/pen/pvoKNL - codepen.io/andytran/pen/PwoQgO - codepen.io/nicholas-kebbas/pen/GgRxvd

cssdeck.com/labs/css3-color-fill - cssdeck.com/labs/galaxy-s3 -

designdazzling.com/css-shapes-web-designs - www.siteforinfotech.com/2014/11/fade-effect-image-slideshow-using-css.html - designdazzling.com/productive-css-tips-web-developers-designers - creativecrunk.com/responsive-css3-forms - alistapart.com/article/responsive-images-in-practice - developer.mozilla.org/en-US/demos/detail/html5-css3-hover-slide-out-tutorial-with-demo - developer.mozilla.org/en-US/demos/detail/jtop-desktop-interface - developer.mozilla.org/en-US/demos/detail/a-trick-to-make-header-or-nav-fix-on-scrolling-usi/launch - wpthemess.net/15-free-responsive-blogger-templates-for-2014

Jangan tidak didatangi links tersebut yaaa ;)

Senin, 10 November 2014

Update Post in 10 November, Merry Heroes Day :D

Tidak dapat bahan postingan aneh, jika begini keadaan maka harus melakukan update post dengan topic yang sudah pernah di buat :D Sobat masih ingat dengan hello bar widget for blogger? In arsip and you can get here make sticky bar in blogger like as hello bar. Masih sedikit membawa embel-embel JavaScript pada markup HTML. Sekarang 100% akan Koben sharing bagaimana cara membuat CSS3 notifications ala hello bar created by master Acidmartin.
Hi guys, you can read here developer.mozilla.org/en-US/demos/detail/css3-notifications-bar

Kode sebetulnya tinggal comot or langsung download resource. Karena AA Koben orang baik banget'z di seluruh dunia, gue kasih kode modifan agar full stylish dikit ;)) Gue tambahkan efek CSS3 slide right tuing-tuing. Ketika muncul datang dari sisi kiri menuju kanan secara cepet kemudian ada tuing² kiri-kanan bentar :D
Ambil kode CSS dari sini CSS3 notification bar Pasangkan markup HTML berikut

<div class="aspal-hellobar aspal-hellobar-e34c26 slideRight">
<input type="checkbox" id="aspal-hellobar-switcher" checked="checked" />
<label for="aspal-hellobar-switcher">
<span>&#8679;</span>
<span>&#8681;</span>
</label>
<div>
<div>BLAH BLEH BLOH HERE...BLAH BLEH BLOH HERE...BLAH BLEH BLOH HERE... Ain't it cool?</div>
</div>
</div>
Save.
Satu updetan beres, lanjut bro...

Ooops ada kelupaan, jika sobat memasang kode CSS dari web sumber, tengok pada bagian kode
.aspal-hellobar.aspal-hellobar-e34c26 > div,.aspal-hellobar.aspal-hellobar-e34c26 label span {
background: #e34c26;
}
Itu merupakan jenis gaya yg ada, terdapat 5 gaya varian warna, sobat pilih salah satu, dan rubah juga code pada markup HTML<div class="aspal-hellobar aspal-hellobar-e34c26 slideRight">Kalau mau memilih efek gaya (tuing-tuing) silahkan baca miscellaneous hover effects using CSS3.

Kotak pencarian atau search box merupakan salah satu bagian dasar yg mesti ada kehadirannya pada sebuah web/blog. Untuk memudahkan dalam melakukan explorasi konten ;) Salah satu kotak pencarian full stylish karya master Marco Biedermann, Mac OS X 10.10 Yosemite Search codepen.io/m412c0/pen/dvFCB

.search {
width: 100%;
}
.search .field {
position: relative;
}
.search label {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAQAAAC1QeVaAAAAxElEQVR4AXXPIUuDcRDA4Zv4AUSwTLEKVoNlySyCYLO98CCsahGrX0AW/QhmBRHEJghLS4JFBBXDgrJi2In78w8v4v3S8XDh4nd0DTxLEzd2RC2EnrH07trQVDrXqbhs7FvfnBDWDKWTigOpL2oWvZpYKPjio1zVHEt7BdOtaLUtHRX8MmqjRjooeCVttPBOWi+4JT1aLaDjVLpU/5ytn840Dj1IaWSpYmi8yVlTF54qh9K8nn27usJK5fC3yvfhPx7a/AE9dYwDEfKrlAAAAABJRU5ErkJggg==) no-repeat 0 50%;
color: #b2b2b2;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
transition: left .4s, transform .4s;
padding-left: 1.25em;
}
.search .input-search {
border: 1px solid #dfdfdf;
border-radius: .25em;
box-shadow: 0 1px 0 #bfbebf;
display: block;
font: 400 1em/1.5em sans-serif;
padding: .5em 1.75em;
width: 100%;
}
.search .input-search:focus + label, .search .input-search:valid + label {
left: .5em;
transform: translate(0, -50%);
}
.search .input-search:valid + label {
text-indent: -9999px;
}
<form action="http://YOUR-ADDRESS-BLOG.blogspot.com/search" class="search">
<div class="field">
<input type="text" class="input-search" id="input-search" name="q" pattern=".{1,}" required="required">
<label for="input-search">Search here...</label>
</div>
</form>
Change YOUR-ADDRESS-BLOG with your address blog.

Update terakhir yg ketiga tentang markdown Walau jauh dari topic, tetapi tools satu ini unik untuk diketahui :P Silahkan meluncur github.com/jonschlinkert/remarkable

Happy update \m/

Sabtu, 11 Oktober 2014

Who is the most optimal, Image Compressor

Tinggal pintar-pintarnya kita kapan harus memakai jpg, jpeg, png, gif or etc dalam menampilkan sebuah gambar! Sudah barang tentu yang sering kita pakai untuk urusan posting atau hal lainnya tidak jauh dari tiga jenis saja, yaitu jpg, png atau gif. Pada kesempatan sekarang AA Koben akan berbagi informasi 5 web layanan yg bergerak dalam urusan kompres-mengkompres gambar berekstensionkan PNG. Karena extension PNG-lah yg dapat membuat background menjadi transparan selain gif, bitmap atau sejenisnya? Banyak sekali source untuk hal compress di luaran sana, oleh sebab itu saya pilih yg menurut gue full-stylish :">

Percobaan dilakukan terhadap sebuah image dengan spesifikasi sbbbeben-koben

Dimensions: 1024 x 3255
Type: PNG Image
Size: 831 KB
Silahkan terjemahkan masing-masing :P
Dari lima web rujukan terikat proses kinerja dengan sistem engine masing-masing. Jadi gambar kompres tidak selalu dimenangkan oleh salah satu web. Bisa jadi web lain memenangkan hasil kompresan. So... be a creative

Compressor.io

beben-koben

TinyPNG

beben-koben

Compress PNG

beben-koben

Kraken.io

beben-kobenYang terakhir adalah web image optimization tool sitereportcard.com/imagereducer.php Di sini kalian bisa optimasi image (GIF, JPG, PNG) and hasil generated akan ditampillkan beserta dengan thumbnail. Kalau tidak salah ada 7 hasil generate, berikut tampilan urutan pertama & terakhir.

PertamaTerakhir
beben-kobenbeben-koben

Nah, siapa pemenangnya! Biasakanlah selalu optimasi image sebelum melakukan upload. Karena selain friendly SEO engine, sudah tentu mengirit bandwith hostingan :))

Bye :-h

Jumat, 26 September 2014

Free Download EscApe and Charsets Tool by XEM

Apakah sobat masin ingat dengan master Maxime Euzière! Pembuat HTML editor dengan kode yang cukup sedikit, original tool di kenal dengan nama MiniCodeEditor xem.github.io/miniCodeEditor? Bisa jadi xem itu adalah nicknya :D Lama nggak jali-jali, gue tengok sudah ada 2 buah tool baru pada halaman projects / experiments sang master. EscApe and Charsets. EscApe is convert any unicode string in 33 different formats used on the Web. Charsets is a few experiments based on unicode and character encodings on the Web. Bermanfaat sekali pokoknya tools ini bro buat user yg sering bermain dengan format unicode. Selaraskan tulisan dengan format bahasa apa yg digunakan, maka tampilan tulisan akan muncul sesuai.

Buka halaman berikut xem.github.io/escape klik banner github pojok kanan atas, cari tombol Download ZIP. Sebagai alternatif dulu saya memakai ini juga rishida.net/tools/conversion (acak-acak kategori apps, tengok tools keren punya di sana)
Untuk bagian charsets harap hati-hati dalam membuka link, karena hasil generate akan memakan waktu loading browser sodara-sodara!!! Ketika saya men-download file charsets, ternyata ada satu link JavaScript (fromcodepoint.js) yg masih terhubung dengan hostingan rawgit.com. Jadi online nggak offline. Mungkin karena masih eksperimen dan dalam perkembangan, script tersebut belum di pisah (nggak tauk kalo lupa) ;))

Oleh karena itu AA Koben sebagai bloglang baik hati sejagat alam, sudah membungkuskan paket xem menjadi 1 bundel dan beroperasi secara offline tentunya :-" Tadi mau fork via github, pas buka tidak bisa mengoperasikan github :D :))
  • Download XEM Experiments.zip in 4shared.
  • www.4shared.com/zip/_GZ_mbBhce/XEM_Experiments.html
  • Download XEM-Experiments.zip in Ziddu.
  • downloads.ziddu.com/download/24076731/XEM-Experiments.zip.html
Demikian informasi singkat, kurang dan lebihnya tolong beri komentar :P

Happy blogging \m/

Kamis, 18 September 2014

Get Free 2 Tool for You Offline Mode

Saatnya acara bagi-bagi tool :D Sebenarnya tool berikut sudah pernah saya share beberapa diantaranya, simak bray get free apps color palettes page HTML. Artikel master Moncho Varela dengan judul get color on click codepen.io/nakome/pen/nBKiF is mendapatkan kode warna dari sebuah gambar. Kekurangan dari tool palette tersebut tidak mengikutsertakan load file image? Jadi hanya image yg sudah tertanam pada page .html saja kita bisa dapatkan warna :-??
Beben Koben sebagai bloglang super nekat mencoba menambahkan script how to store and retrieve image to localstorage dan ternyata berjalan mulus. Walau ada kekurangan sedikit, tidak fokus (ora ngerti script) :Dget color on clickTool yg kedua dengan judul post take poster of video by Moncho Varela codepen.io/nakome/pen/Kpkgm Berjalan baik pada google chrome! Mengambil satu image pada sebuah video, gue rasa image yg tercipta bagian depan video? Untuk tool ini, AA punya referensi yg lebih full stylish b-) Nanti pada akhir postingan akan gue bagi bersama link download file ke dua tool tersebut, plus bonus links resource keren punya :))take poster of videoGambar blur bukan kesalahan mata sodara-sodara, tapi gambar terlalu seksih :"> Aslinya mah bening atuh :P

Sikat bro...

  • Via Ziddu
  • downloads.ziddu.com/download/24059002/2-Tool.zip.html
  • Via 4shared
  • www.4shared.com/zip/DIYmbT9eba/2_Tool.html
Seperti pada awal saya menjanjikan link source keren dari web cool!
  • techslides.com/amazing-css-demos
  • techslides.com/demos/youtube-advanced-search.html
  • techslides.com/30-code-playgrounds-and-sharing-tools
  • techslides.com/demos/video/generate-animated-gif.html
  • techslides.com/make-animated-gifs-from-videos-with-html5
  • techslides.com/web-performance-resources-and-optimization-tools
Cuma pilihan saya saja, ubek-ubek semua artikel kelas master punya :-bd

Bonus...

codepen.io/hugo/pen/AzeDs - codepen.io/TaniaLD/pen/oKxep - codepen.io/zahinize/pen/DlFkm - codepen.io/intuitive/pen/vlcgf - codepen.io/bradenhamm/pen/Lliua - codepen.io/nakome/pen/ACirt - codepen.io/heydon/pen/buknq - codepen.io/jackrugile/pen/Gaqpo - codepen.io/Martin-Duran/pen/vsrhg - codepen.io/hugo/pen/yAtbx - codepen.io/ryanboylett/pen/AcLrw - codepen.io/timseverien/pen/mxFDo - codepen.io/mdcrtv/pen/pmyGg - codepen.io/lo-th/pen/rHLwi - codepen.io/Syst3mNZ/pen/uHchE - codepen.io/joshfry/pen/DeACs - codepen.io/terorama/pen/rtmyJ - codepen.io/oknoblich/pen/nugeB

Sabtu, 13 September 2014

Selection Tutorial CSS in Codepen by Beben Koben

AA Koben akan berbagi source pilihan dari web codepen.io Murni kode CSS-an, simpel dan tentunya full stylish! Sebenarnya tut's lawas, akan tetapi penulisan code CSS yang sudah diperbaharui. Pertama-tama tutorial seputaran hover effect by Sergio, he's talk about bubble active navigation codepen.io/Sergioandrade/pen/hxJpa Berikut bumbu-bumbu yg mesti sobat tambahkan pada style link...a {
BLAH
BLEH
BLOH
}
a {
padding-top: 20px;
position: relative;
}
a:after {
content: "";
position: absolute;
right: 35%;
top: 0;
width: 16px;
height: 16px;
background: #0066FF;
border-radius: 50%;
opacity: 0;
}
a:before {
content: "";
position: absolute;
right: 45%;
top: 0;
width: 8px;
height: 8px;
background: #0099FF;
border-radius: 50%;
opacity: 0;
}
a:hover:before {
animation: bubbles infinite 1s linear;
}
a:hover:after {
animation: bubbles infinite 2s linear;
}
@keyframes bubbles{
from {
opacity: 0;
top: 40px;
}
20% {
opacity: 0.5;
top: 20px;
}
70% {
opacity: 1;
top: 0px;
}
90% {
opacity: 0;
top: -10px;
}
100%{
opacity: 0;
top: -20px;
}
}
SAVE.

Info kedua cara membuat search box dengan gaya click to expand. Master Sam D bercerita tentang expanding text box/button codepen.io/llamaswill/pen/rmqfB

.search-box {
width: 40px;
height: 40px;
border-radius: 20px;
border: none;
cursor: pointer;
background: #ebebeb;
-webkit-transition: width 0.6s, border-radius 0.6s, background 0.6s, box-shadow 0.6s;
transition: width 0.6s, border-radius 0.6s, background 0.6s, box-shadow 0.6s;
}
.search-box + label .search-icon {
color: black;
}
.search-box:hover {
color: white;
background: #c8c8c8;
box-shadow: 0 0 0 5px #3d4752;
}
.search-box:hover + label .search-icon {
color: white;
}
.search-box:focus {
border: none;
outline: none;
box-shadow: none;
padding-left: 15px;
cursor: text;
width: 300px;
border-radius: auto;
background: #ebebeb;
color: black;
-webkit-transition: width 0.6s cubic-bezier(0, 1.22, 0.66, 1.39), border-radius 0.6s, background 0.6s;
transition: width 0.6s cubic-bezier(0, 1.22, 0.66, 1.39), border-radius 0.6s, background 0.6s;
}
.search-box:focus + label .search-icon {
color: black;
}
.search-box:not(:focus) {
text-indent: -5000px;
}
#search-submit {
position: relative;
left: -5000px;
}
.search-icon {
position: relative;
left: -33px;
top: 6px;
color: white;
cursor: pointer;
}
Planing HTML<form class="search-container" action="http://YOUR-BLOG.blogspot.com/search">
<input id="search-box" type="text" class="search-box" name="q" />
<label for="search-box"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigkkIkyVjDpFNpDsbLNno9aLDZf7Qs2r0yIzq1mqvLVfTODeDXT30a79FuyopHt3VTg3AUyr2XWckhihHiBHh8yNj92HuKi28ecHJRfFFjh9DH_zeKcWmdghga_dtjDI7ef_IH7YtDBoRp/s1600/search.png" alt="" class="search-icon" /></label>
<input type="submit" id="search-submit" />
</form>
Info ketiga gue sharing mengenai focus style by Hugo Giraudel codepen.io/HugoGiraudel/pen/FJuBb Pada sumber konten dibuatkan kotak login/register, tetapi di sini AA ganti dengan kotak berlangganan saja yah :D
#langgan {
border: 0.5em solid #99e5ff;
border-radius: .2em;
max-width: 400px;
margin: 1em auto;
padding: 1em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#langgan h1 {
font-size: 2em;
margin-top: 0;
text-align: center;
}
#langgan label {
display: block;
margin-bottom: .5em;
cursor: pointer;
}
#langgan input[type="text"] {
display: block;
width: 100%;
padding: .5em;
-moz-transition: .5s ease-out;
-webkit-transition: .5s ease-out;
-o-transition: .5s ease-out;
-ms-transition: .5s ease-out;
transition: .5s ease-out;
}
#langgan input[type="text"]:focus {
-moz-transform: scale(1.75);
-webkit-transform: scale(1.75);
-o-transform: scale(1.75);
-ms-transform: scale(1.75);
transform: scale(1.75);
outline: 100em solid rgba(0, 0, 0, 0.75);
}
#langgan button {
display: block;
border: none;
padding: 1em;
width: 100%;
font-weight: bold;
color: white;
background: deepskyblue;
text-transform: uppercase;
font-size: .8em;
}
#langgan button:hover {
background: #888;
}
#langgan p {
margin-bottom: 0;
}
<form id="langgan" action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=YOUR-ACCOUNT", "popupwindow", "scrollbars=yes,width=550,height=520"); return true' target='popupwindow'>
<h1>Langganan</h1>
<p>
<label for="login">Your Email</label>
<input type="text" name="email" id="email" placeholder="Your.Email@email.com" autocomplete="off" required>
</p>
<p>
<button type="submit">Subscribe</button>
<input name='uri' type='hidden' value='YOUR-ACCOUNT'/>
<input name='loc' type='hidden' value='id_ID'/>
</p>
</form>
Terakhir membuat tab murni pakai CSS CSS tab Pure CSS tabs by Pure CSS Tabs codepen.io/andornagy/pen/CFekj
.tabs input[type=radio] {
display:none;
}
.tabs {
width: 98%;
float: none;
list-style: none;
position: relative;
padding: 0;
}
.tabs li{
float: left;
}
.tabs label {
display: block;
padding: 5px 10px;
color: #FFFFFF;
font-size: 20px;
font-weight: normal;
background: #2c3e50;
cursor: pointer;
position: relative;
}
.tabs label:hover {
background: #3498db;
}
.tab-content {
z-index: 2;
display: none;
left: 0;
width: 100%;
font-size: 20px;
padding: 10px;
position: absolute;
box-sizing: border-box;
border-top: 5px solid #08C;
background-color:#ffffff;
}
[id^=tab]:checked + label {
background: #08C;
color: white;
top: 0;
}
[id^=tab]:checked ~ [id^=tab-content] {
display: block;
}
<ul class="tabs">
<li>
<input type="radio" checked name="tabs" id="tab1">
<label for="tab1">tab 1</label>
<div id="tab-content1" class="tab-content">
Content tab 1
<!-- Your content goes here -->
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab2">
<label for="tab2">tab 2</label>
<div id="tab-content2" class="tab-content">
Content tab 2
<!-- Your content goes here -->
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab3">
<label for="tab3">tab 3</label>
<div id="tab-content3" class="tab-content">
Content tab 3
<!-- Your content goes here -->
</div>
</li>
</ul>
Bonus for inspiration...;)
  • codepen.io/gpyne/pen/gItif
  • codepen.io/xmark/pen/bEAys
  • codepen.io/cleric/pen/dIuFj
  • codepen.io/gumetis/pen/gzHDs
  • codepen.io/robooneus/pen/BLKIa
  • codepen.io/chuckneely/pen/ronfx
  • codepen.io/chriscoyier/pen/AdaKr
  • codepen.io/nickmoreton/pen/fstrx
  • codepen.io/samsurysites/pen/zukFj
  • codepen.io/commander-clifford/pen/vmDEh
See you :-h

Selasa, 26 Agustus 2014

Embed Post Blogger using Embedly

Dengan marak hadir web jejaring, berbagi baik itu mau berupa post, image kita sebagai user dimanjakan dengan kemudahan akses. Salah satu fitur yang sangat membantu kita, dalam menyebarkan suatu hal yaitu embed post/image! Hampir web jejaring sosial terkenal sudah mengadakan feature tersebut. Tidak lain itu salah satu cara management dalam menggaet para pelanggan agar mau terus berkreatifitas :D

Berikut 2 contoh embed



Lantas bagaimana dengan post blog kita jika ingin seperti itu, apakah bisa! Dengan bantuan pihak ke 3, tentu hal tersebut dapat kita lakukan ;))

Silahkan sobat masuk ke web
  • embed.ly
  • embed.ly/cards/blogger
  • embed.ly/button/blogger
Jika kepengen lebih jauh lagi, silahkan go to embedly.github.io/jquery-preview/demo

Bonus

www.webdesignai.com/free-blogger-templates-2014

Link terkait

dev.twitter.com/docs/embedded-tweets
developers.facebook.com/docs/plugins/embedded-posts
business.pinterest.com/en/widget-builder#do_pin_it_button

Happy embed \m/

Kamis, 03 Juli 2014

Selection Sources in Ramadhan 1435 Hijriah

Semakin populernya satu layanan web dengan di dukung oleh fitur² yang tersedia, dengan sendirinya bagai air mengalir berdatangan orang (master developer) untuk mendukung web tersebut! Siapa tidak kenal dengan CodePen web? Setelah menambahkan fitur terbaru dengan adanya fasilitas untuk menulis (blog) codepen semakin mengukuhkan dari web sejenis yg pernah ada! Koben dapat codepen stats checker codepen.io/zerospree/full/sjcoa! Jika sobat mempunyai account web codepen, maka dengan apps tersebut kalian bisa melihat secara live status masing² user (huruf besar kecil pengaruh pada kotak pengisian username).

Berikut beberapa link game sederhana namun mengasyikan yg gue dapatkan dari code-pen, lumayan buat ngabuburit ;))
>> codepen.io/devstate/full/rtiqk - codepen.io/chagaf/full/daqlg - codepen.io/vaielab/full/yoKEF - codepen.io/natewiley/full/HBrbL <<
Sekalian saja selection resource :D
>> codepen.io/yoksel/pen/ckldD - codepen.io/johannlaqua/pen/mHetz - codepen.io/jascha/pen/yponz - codepen.io/social_quotient/pen/zwcIm - codepen.io/creotip/pen/jvhDu - codepen.io/adobe/pen/DCeGf - codepen.io/kman/pen/DFAzG - codepen.io/coderalex/pen/DKzeE<<
Takut kurang :-"
>> cssdeck.com/labs/simple-toggle-switch - cssdeck.com/labs/full-css-drop-down-contact-form - cssdeck.com/labs/menu-shadow-under-links-on-hover - cssdeck.com/labs/full-css-stylized-select-v2 - cssdeck.com/labs/javascript-rain - cssdeck.com/labs/login-4 - cssdeck.com/labs/vector-math-in-coffee <<

Sekedar berbagi di bulan penuh berkah ini. Mari kita tingakatkan amal-amalan kita, karena hanya amal yg akan dibawa modar :)) Maafkan Beben Koben lahir dan bathin kepada kalian semua blogger sejati di manapun anda berada
Happy Ramadhan \m/

Senin, 23 Juni 2014

Envelope Subscribe Feed Box For Blogger

Sebenarnya Koben belum meminta izin untuk sharing tutorial berikut kepada empunya blog :"> Tapi gue yakin, bakalan tidak keberatan kalau saya share ;)) Make subscribe box alias membuat kotak berlangganan via email dengan gaya tampilan amplop, dan ketika disorot akan keluar kotak langganan via email! Memang rada sulit menerangkan kode-kode ke bentuk kalimat :D
Beberapa tut serupa siapa tauk berkenan bagi anda:Okay, mari kita buat envelope subscribe feed box for blogger. Berikut ini ramuan & bumbu kotak langganan dengan tema amplop plus animasi CSS on hover.envelope-subscribe-feed-box
#wrap_amplop {
width:530px;
margin:20px auto 0;
}
#form_wrap {
overflow:hidden;
height:446px;
position:relative;
top:0;
-webkit-transition:all 1s ease-in-out .3s;
transition:all 1s ease-in-out .3s;
}
#form_wrap:before {
content:"";
position:absolute;
bottom:128px;
left:0;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRfiAFjz7lQHbYBm9Tsa5QfC3NJ5PAdVJDJABUDM6SlODKpcfzioQ54ODu2IUC0zOcglvwOdwhSyqeFSlmK2aVis2fi9A56Was5nNvBRjW5OiEYBi85LGyMAud0KKbTkrCGdp_ERutLWo/s1600/before.png');
width:530px;
height:316px;
}
#form_wrap:after {
content:"";
position:absolute;
bottom:0;
left:0;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe6P5UBsO2nHSTuC0nUfPdnSRDZnJkvZ_LfoZFRh2JbgYtfyLuBhuAGOHAHYZeQcCFbAUI86oDWx9W5SvqLi13xzP7GH9LOFwwcFrZmF4K6JwNTrUtX7v4MpdmX9cb0OYHsAj8Cg4sdUE/s1600/after.png');
width:530px;
height:260px;
}
#form_wrap.hide:after,#form_wrap.hide:before {
display:none;
}
#form_wrap:hover {
height:777px;
top:-200px;
}
#form_wrap form {
background:#f9f3eb;
position:relative;
top:200px;
overflow:hidden;
height:190px;
width:400px;
margin:0 auto;
padding:25px 30px;
border:1px solid #fff;
border-radius:3px;
-webkit-border-radius:3px;
box-shadow:0 0 3px #9d9d9d,inset 0 0 27px #fff;
-webkit-box-shadow:0 0 3px #9d9d9d,inset 0 0 27px #fff;
-webkit-transition:all 1s ease-in-out .3s;
transition:all 1s ease-in-out .3s;
}
#form_wrap:hover form {
height:400px;
}
#form_wrap label {
margin:11px 20px 0 0;
font-size:16px;
color:#b3aba1;
text-transform:uppercase;
text-shadow:0 1px 0 #fff;
}
#form_wrap input[type=text] {
display:inline-block;
color:#777;
background-color:#fff;
width:70%;
height:36px;
padding:0 10px;
margin:0 0 0 17px;
border:1px solid #f8f5f1;
-webkit-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:inset 0 0 1px #b3a895;
box-shadow:inset 0 0 1px #b3a895;
}
#form_wrap input[type=submit] {
position:relative;
width:20%;
height:33px;
opacity:0;
background:-webkit-gradient(linear,0% 0%,0% 100%,from(rgb(255,255,255)),to(rgb(221,221,221)));
cursor:pointer;
color:#333;
text-decoration:none;
text-align:center;
display:inline-block;
border:solid 1px #ddd;
-webkit-border-radius:2px;
border-radius:2px;
-webkit-transition:opacity .6s ease-in-out 0s;
transition:opacity .6s ease-in-out 0s;
}
#form_wrap:hover input[type=submit] {
z-index:1;
opacity:1;
-webkit-transition:opacity .5s ease-in-out 1s;
transition:opacity .5s ease-in-out 1s;
}
#form_wrap:hover input:hover[type=submit] {
color:#435c70;
}
<div id='wrap_amplop'>
<div id='form_wrap'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=YOUR-ACCOUNT", "popupwindow", "scrollbars=yes,width=550,height=520"); return true' target='popupwindow'>
<div align='center'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUvUsIiqPN0qwx502AoGaAqMJy9XMM67nyAhQKSVpTwRDtK8z5Wdc33s_Svoo2mmW4KvMtgbDrVImBrK1WCmr0FiMDKbV7hO_ziQsn3r0HwjByywRgy1iZITa_ZKn_BYYywVf8HJjMwXM/s1600/RSS.png' style='width:200px; height:160px;'/><p>Subscribe to my feed and articles delivered to your inbox or feed reader, ABSOLUTELY FREE!</p></div>
<input id='email' name='email' placeholder='Your.Name@email.com' required='' type='text'/><input name='submit' onClick='javascript:alert("Thank you for Signup, Go to your mailbox and click on confirmation link!");' type='submit' value='Go'/>
<p align="center">Now, Sign up for get free email updates, Thanks!</p>
<input name='uri' type='hidden' value='YOUR-ACCOUNT'/>
<input name='loc' type='hidden' value='id_ID'/>
</form>
</div>
</div>
Jika kepengen melihat demo, silahkan datangi web master Pawan Mall www.pawanmall.net. Nanti kalian juga bakal menemukan artikel game super mario bros yg bisa dimainkan pada browser engine!

Thanks master Pawan Mall :)

Sabtu, 14 Juni 2014

Make Beautiful Tag Input

Koben akan melakukan update artikel dengan tema seputaran the input tag! Jika diperhatikan dengan seksama tag input ternyata memiliki kelebihan tersendiri. Dengan majunya bahasa style-sheet, telah jebol banjir trik tutorial menggunakan tag input itu sendiri :) Silahkan searching pd kotak pencarian dengan keyword input maka akan tampak tutorial full stylish punya :D So, are you ready to start the adventure today :)) Anda ingin memasang plugin jQuery add clear skorecky.github.io/Add-Clear Ketika mengetikan sesuatu di dalam kotak, tombol ✖ (clear) akan muncul. Full menggunakan CSS how to make CSS form validation codepen.io/benschwarz/pen/HBrDJ, sobat dapat mengcustomize kode yg sudah ada agar lebih keren.

Fancy text imputs use CSS. Coba ketikan apapun di dalam kotak!Source by: codepen.io/abergin/pen/jIplf
Itu di buat dengan bahasa CSS modus SASS! Lakukan klik tombol mirip gambar mata dgn title Toggle Compiled View pada kotak kode tujuan. Kalau pusing disini ajah.

.kotax button, .kotax .question label, .kotax .question input[type="text"] {
-o-transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
-webkit-transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
}
.kotax {
position: relative;
display: inline-block;
max-width: 700px;
min-width: 500px;
box-sizing: border-box;
padding: 30px 25px;
background-color: white;
border-radius: 10px;
border: 1px solid #aaa;
margin: 40px 0;
left: 50%;
-ms-transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.kotax button {
margin-top: 35px;
background-color: white;
border: 1px solid #ff4a56;
line-height: 0;
font-size: 17px;
display: inline-block;
box-sizing: border-box;
padding: 20px 15px;
border-radius: 10px;
color: #ff4a56;
font-weight: 100;
letter-spacing: 0.01em;
position: relative;
z-index: 1;
}
.kotax button:hover, form button:focus {
color: white;
background-color: #ff4a56;
}
.kotax .question {
position: relative;
padding: 10px 0;
}
.kotax .question:first-of-type {
padding-top: 0;
}
.kotax .question:last-of-type {
padding-bottom: 0;
}
.kotax .question label {
transform-origin: left center;
color: #ff4a56;
font-weight: 100;
letter-spacing: 0.01em;
font-size: 17px;
box-sizing: border-box;
padding: 10px 15px;
display: block;
position: absolute;
margin-top: -40px;
z-index: 2;
pointer-events: none;
}
.kotax .question input[type="text"] {
appearance: none;
background-color: none;
border: 1px solid #ff4a56;
line-height: 0;
font-size: 17px;
width: 100%;
display: block;
box-sizing: border-box;
padding: 10px 15px;
border-radius: 10px;
color: #ff4a56;
font-weight: 100;
letter-spacing: 0.01em;
position: relative;
z-index: 1;
}
.kotax .question input[type="text"]:focus {
outline: none;
background: #ff4a56;
color: white;
margin-top: 30px;
}
.kotax .question input[type="text"]:valid {
margin-top: 30px;
}
form .question input[type="text"]:focus ~ label {
-ms-transform: translate(0, -35px);
-webkit-transform: translate(0, -35px);
transform: translate(0, -35px);
}
.kotax .question input[type="text"]:valid ~ label {
text-transform: uppercase;
font-style: italic;
-ms-transform: translate(5px, -35px) scale(0.6);
-webkit-transform: translate(5px, -35px) scale(0.6);
transform: translate(5px, -35px) scale(0.6);
}
<form class="kotax">
<div class="question">
<input type="text" required/>
<label>First Name</label>
</div>
<div class="question">
<input type="text" required/>
<label>Last Name</label>
</div>
<div class="question">
<input type="text" required/>
<label>Email Address</label>
</div>
<div class="question">
<input type="text" required/>
<label>Email Confirm</label>
</div>
<button>Submit</button>
</form>
Bonusnya bray:
  • Text input love.
  • codepen.io/MichaelArestad/pen/ohLIa
  • Single input 3D form.
  • thecodeplayer.com/walkthrough/single-input-3d-form
  • Animating float labels using jQuery and CSS3.
  • thecodeplayer.com/walkthrough/animating-float-labels-jquery-css3
  • Create fancy contact form with CSS 3 and jQuery.
  • youhack.me/2010/07/22/create-a-fancy-contact-form-with-css-3-and-jquery
Segitu saja informasi tentang dunia tag input. Sebenarnya banyak sekali rujukan yg bisa kalian lihat. Karena keterbatasan niat gue, jadi cuman itu lah 3:-O

Happy input \m/

Jumat, 06 Juni 2014

Selection of Links of ksk1015

Informasi postingan berikut bisa sobat jadikan ide, inspirasi atau bahkan projek! Dengan memakai nick ksk1015 with specification on friday, june 06, 2014...663 code, 405 forked, 350 favorite and 19 badge on jsdo.it Kalau sobat kepengen melihat itu semua silahkan tinggal kunjungi halaman jsdo.it/ksk1015 Koben sudah seleksi beberapa links, siapa tau berkenen bagi sodara-sodara ;)
Second shot first analog stopwatch with css
stopwatch with css
jsdo.it/ksk1015/vhfn
base64 data url generator
data url generator
jsdo.it/ksk1015/84Le
Input file preview
input file preview
jsdo.it/ksk1015/quxN
Capek juga mencari-cari screenshot, link saja yah :D Pilih² lalu pencet tombol downloadDownload

jsdo.it/ksk1015/mVo6 - jsdo.it/ksk1015/rf9p - jsdo.it/ksk1015/b9yc - jsdo.it/ksk1015/clxDj - jsdo.it/ksk1015/r7gC - jsdo.it/ksk1015/sMML - jsdo.it/ksk1015/g7r6 - jsdo.it/ksk1015/aQam - jsdo.it/ksk1015/fiuL - jsdo.it/ksk1015/aUVK - jsdo.it/ksk1015/recipe - jsdo.it/ksk1015/5WY1 - jsdo.it/ksk1015/bjLH - jsdo.it/ksk1015/vjRk - jsdo.it/ksk1015/mycode - jsdo.it/ksk1015/mE0i - jsdo.it/ksk1015/5Wlh - jsdo.it/ksk1015/qjxJ - jsdo.it/ksk1015/RxGA - jsdo.it/ksk1015/wOiZ - jsdo.it/ksk1015/6TvT - jsdo.it/ksk1015/fYGN - jsdo.it/ksk1015/3PHV - jsdo.it/ksk1015/4maT - jsdo.it/ksk1015/wUtX - jsdo.it/ksk1015/color - jsdo.it/ksk1015/kuzR - jsdo.it/ksk1015/5ApJ - jsdo.it/ksk1015/pkBJ - jsdo.it/ksk1015/wqVQ - jsdo.it/ksk1015/tCpN - jsdo.it/ksk1015/6UIo - jsdo.it/ksk1015/9erR - jsdo.it/ksk1015/a7uQ - jsdo.it/ksk1015/awkn - jsdo.it/ksk1015/frQ8 - jsdo.it/ksk1015/5biY

Bonus 2 biji

Social icon
social icon
jsdo.it/No_1026/qOYM
Retro Comments
input file preview
jsdo.it/Arbaoui.Mehdi/retro-comments-hover-icons
Semoga info pilihan AA dapat berguna bagi kalian semua sobat blogger.

Happy reading \m/