No Title Just Share, Sikat!!!

Gambar dengan resolusi kecil, jika di perbesar maka akan di peroleh titik-titik yang berkesinambungan dan berurutan. Urusan membuat icon, percayakan saja pada generator x-icon editor Hasil jadi akan menjadi sebuah gambar. Sekarang bagaimana jika icon yg dihasilkan di bentuk dengan atribut CSS? Mirip dengan beginian bos img to css!
Sekarang simpel tidak ribet layaknya kita mengconvert image menjadi css, cukup dengan klik-klik membuat titik-titik, jadi deh gambar kecil unyu-unyu :"> Like this

Serupa tapi tak sama, kemiripan hasil akhir memang agak persis. Do you still remember my posted make five popular browsers theme menu? Lihat link demo berikut, gambar orang full memakai CSS beserta menu link berbagi sederhana dengan efek hover di bawahnya!

View and Look Source Page

Kepengen tools titik-titik jadi gambar?

Buka alamat brkt kushagragour.in pilihlah menu opsi LAB. Ada 3 project di sana, pilihlah piCSSel-art Sikat kode di github github.com/chinchang/picssel-art
Semoga bermanfaat :)
Happy blogging \m/

Make Snapshots Site Include Active Links and Images

Apa yang sobat bayangkan bila mendengar kata snapshots! Mengambil gambar screenshot dari sebuah website yang Koben maksudkan disini. Pada umumnya jika kita mengambil image pada site pasti akan berupa image. Bagaimana ceritanya jika kita dapat mengambil snapshots sebuah site lengkap dengan gambar dan link aktif serta menghilangkan semua script yg ada pada site yg dimaksud. Halaman yang disimpan tidak akan memiliki elemen aktif dan tidak ada script, sehingga aman dikonsumsi :d

Kita bisa melakukan ini tidak terpatok pada halaman depan saja. Mau single link kek, mau link jejaring kok, link gambar kak bahkan short link sekalipun kuk! Coba...

Tunggu sampai beres, sampai muncul gambar snapshot yg dimaksud! Kemudian klik gambar tersebut, tunggu sebentar, ada dua opsi Text or Image. Text snapshots dengan link aktif, Image ya cuma image doang :) Download.zip ada pada bagian kanan atas.

Happy snapshots \m/

Bonus

codepen.io/CrocoDillon/pen/sxgzF
codepen.io/new/pen/rGhpv
cssdeck.com/labs/full/dribbble-member-card-concept
www.hongkiat.com/blog/css-snippets-for-designers
cssdeck.com/labs/full/navigation-dropdown-with-flip-effect

Download Free Tools Generate Data URI

Masih ingat dengan artikel uniqueness of data uri or base64! Ternyata bahasa yang menggenerate data menjadi DataURI berkaitan erat dengan DOM. Markup HTML/xHTML di render terbaca dalam bentuk grafik DOM, lalu jadilah rendered view dalam bentuk dataURI, begitu kira² :d Cobalah tools Live DOM Viewer biar terlihat jelas (walau tidak ngerti juga) software.hixie.ch/utilities/js/live-dom-viewer Ingat juga dengan postingan brainy bookmarklet links? Dengan teknik penulisan bookmark tersebut, bisa juga kita membuat serialize as xml. Try it:

Melihat source secara full.
• Generated Source
Melihat source hanya yang dipilih.
• Partial Source
Membuat syntax link.
• Make Link
Membuat syntax image.
• Make img Tag
Like make DataURI.
• Serialize as xml

Beberapa link bookmarklets usefully, sikat, save pada bookmark toolbar, pilih browser apa yg kalian pakai import bookmarklets Koben sudah buatkan tools generator img to data-uri convert image to data uri Untuk data gambar akan tampil previewnya, sedangkan jika data lain tidak akan tampil previewnya. Setelah di coba, ternyata tools convert data-uri mendukung semua file yg penting kita tahu jenis type mime-nya. Susunan syntax data-uridata:[<MIME-type>][;charset=<encoding>][;base64],<data>Setelah gue hunting di github dapatlah tools File to Text dan Data URI Generator. Yang satu simpel dan sederhana, satu lagi canggih dan gaya masing-masing punya manfaat sama untuk membuat data uti eh uri :p Yang canggih dilengkapi dengan generate text, dan opsi dalam memilih jenis type mime yg mau di pakai :)) Nggak pakek screenshot, download saja cobain langsung bro...

Sampe element canvas game snake bisa dibikinkan dataurinya bytex64.net/code/datasnake/
Semoga bermanfaat :)
Happy uri uri \m/

Play Music File (Mp3) on Web Browser

Dengan belajar kita akan lebih tahu. Sobat tentu sudah mendengar tentang HTML5. Bahasa markup paling anyar untuk membuat & menampilkan sebuah web. Dengan beragam syntax (gaya penulisan markup) turut mendorong juga pada kemajuan dunia web browser. Menurut laporan statistik W3Schools Online Web ternyata dimenangkan oleh browser google chrome dengan mengantongi presentase sebesar 52.7%/May cek here browser statistics Dari sekian banyak taging baru dari bahasa HTML5, kita dikenalkan dengan tag audio Dikarenakan browser mozilla belum secanggih google chrome, maka Koben akan bagi-bagi aplikasi .HTML saat ini khusus di buka pada chrome :p Nama aplikasinya adalah music player on browser :))

Memang hampir tidak mungkin seorang pemilik komputer tak memiliki aplikasi untuk memutar file musik (MP3) dan kemungkinan di antara kita banyak menggunakan winamp media player. Bagi kalian yg tidak mempunyai aplikasi/software pemutar file music, maka sekaranglah saatnya browser web (chrome) dijadikan alat bantu memainkan file MP3 b-)
Berikut 3 buah screenshot apps .html music player on browser yg bisa gue dapatkan...

MP3 Player	Beyer Music Player	Fancy Circle Music Player

Buka browser chrome kalian, dan lihatlah demonya:

• antimatter15.github.io/player/player.html
• developer.cdn.mozilla.net/media/uploads/demos/t/u/tuxie/c958d1ee9346fc86c680e0fb86a1b23d/beyer-music-player_1359504973_demo_package/index.html
• workshop.rs/projects/html5-css3-circle-music-player/

Silahkan sikat paketnya bro

Berikut link resource
www.antimatter15.com/wp/2011/03/mp3-player/, www.developer.mozilla.org/en-US/demos/detail/beyer-music-player & www.workshop.rs/2013/05/html5-css3-circle-music-player/

Share and care di mari kalau ada tambahan dari kalian yah :) Bonus silahkan maen game sederhana atari breakout buka dan tunggu...maenkan bray.

Happy music \m/

Change Google Code Download Service to Google Drive

Sobat kenal dengan layanan google Google project hosting Project hosting di google code menyediakan lingkungan pengembangan kolaboratif gratis untuk proyek-proyek open source. Setiap proyek dilengkapi dengan Subversion/Mercurial/Git repository, issue tracker, wiki pages, dan downloads service. Download dilaksanakan oleh project hosting google code memungkinkan proyek open source untuk membuat file kita siap sedia didownload publik. Sayangnya, layanan download telah menjadi sumber kekerasan dengan peningkatan yang signifikan dalam insiden baru-baru ini. Karena ini penyalahgunaan peningkatan pelayanan dan keinginan untuk menjaga komunitas tetap aman, google akan menonaktifkan service download yg berada di google code.

Mulai hari ini, proyek-proyek yang sudah ada (Project Hosting on Google Code) yang tidak memiliki layanan download dan semua proyek baru tidak akan memiliki kemampuan untuk membuat download. Proyek download tidak ada perubahan yang terlihat sampai dengan 14 Januari 2014 dan akan tidak lagi memiliki kemampuan untuk membuat download baru dimulai pada tanggal 15 Januari 2014. Semua download yang ada dalam proyek-proyek akan terus dapat diakses di masa mendatang.
Jika proyek sobat menggunakan download untuk host dan mendistribusikan file dan memiliki kebutuhan secara periodik membuat download baru, disarankan kita memindahkan link download ke layanan alternatif seperti Google Drive sebelum tanggal 15 Mei 2014. Jika Anda memilih untuk memindahkan file ke Google Drive, lihat artikel bantuan help article.

Sumber: Google open source blog

Oleh sebab itu lekaslah backup seluruh data kita yang berada di google code, dan pindahkan ke google drive #:-S Demikian informasi yg dapat Koben sampaikan, kurang lebihnya tolong dimaklumi. Karena gue juga manusia bukan malaikat ataupun Nabi!

Bonus resource...

+ 60 Most Wanted CSS & jQuery Tutorials
blog.karachicorner.com/2013/05/css-jquery-tutorials
+ 30 Tutorials For Creating Buttons in CSS3
smashinghub.com/tutorials-for-creating-buttons-in-css3.htm
+ Magic Sphere
jsrun.it/salleygarden/h2rp
+ Easily manage all your social network settings
www.blisscontrol.com
+ Try to straighten the sheet
codepen.io/Vampireos/pen/baAJF
+ Flatulent Experience!
codepen.io/bbuk-/pen/nDfdA
+ Slider like Yahoo Weather App
codepen.io/BaylorRae/full/ImGBC
+ 3D Carousel Using TweenMax.js
codepen.io/johnblazek/full/nceyw
+ CSS3 Timeline
codepen.io/P233/full/lGewF
+ Simple comparison slider
codepen.io/thibaudbe/pen/Ejnaf
+ CSS only 3d Macbook Air
codepen.io/neoberg/pen/istyp
+ Full CSS NES
codepen.io/onediv/pen/AsDev
+ css3 proximity effect layout
cssdeck.com/labs/css3-proximity-effect-layout
+ CSS drop water
cssdeck.com/labs/full/css-drop
+ jQuery Range Slider
refreshless.com/nouislider
+ Excelentes Tutoriais CSS3
www.siteparaempresas.com.br/blog/?p=3732
+ 30 Plugins And Tools That Will Improve Your Work And Save You Time
vandelaydesign.com/blog/tools/plugins-save-time
+ Creating a simple jQuery plugin for Pinterest
www.developerdrive.com/2013/05/creating-a-simple-jquery-plugin-for-pinterest
+ bluePen Editor
www.bluepeneditor.com
+ phpFreeChat
www.phpfreechat.net/demo
+ Drop-Down Navigation Responsive and Touch-Friendly
www.osvaldas.info
+ Flat UI Login Form
cssdeck.com/labs/full/flat-ui-login-form
+ Slider manual puro css
codepen.io/Kseso/pen/FmBKp
+ Label.css - Label every thing!
www.usablica.github.io/label.css
+ Easy Responsive Tabs to Accordion
webtrendset.com/demo/easy-responsive-tabs/Index.html
+ 50 Useful CSS Snippets Every Designer Should Have
www.ipixel.com.sg/blog/web-design/50-useful-css-snippets-every-designer-should-have
+ 20 Fresh Tutorials and Examples for Creating Buttons in CSS3
www.psdtohtmlhint.com/20-fresh-examples-for-creating-buttons-in-css3

Semoga bermanfaat :)
Happy walking \m/

Free Download Litewrite & Notes Application

Ada yang terlupakan dan memang sedikit menarik juga. Bermula dari artikel bertemakan change browser into notepad. Kembali ke web sumber, kemudian melakukan korek-korek di bagian komentar! Koben menemukan ini bos www.litewrite.net Setelah dipelajari ternyata fitur yang ada lumayan. Auto save dengan methode cache log local membuat aplikasi ini berbeda, artinya: selama kita tidak melakukan clear cache pada browser, maka jejak yg ditinggalkan pada apps lite write (notes) akan tersimpan dengan sendirinya :)
Berikut demonya:

• litewrite.net
• litewrite.github.io/litewrite
• nv.github.com/notes

Ketiga aplikasi tersebut ya mirip dengan trik membuat browser menjadi notepad. Tetapi dikhususkan lagi supaya full stylish b-) Kalau mau simple dan cepat coba saja iki save di Bookmarks Toolbar Browser

• Notepad (default size: 400x350)
• Notepad (default size: 500x700)

Seperti biasa gue bungkuskan aplikasi offline .html lite-write and notes buat kalian. Pada bagian litewrite, sudah saya tambahkan dengan form action textarea popup for playing html code buat bermain-main koding:d

Ekstrak Data File.zip ► Buka folder Buka ini ► pada browser kalian buka file litewrite.html atau notes.html
Tips ringan, dalam aktifitas sebaiknya lakukan new document pd aplikasi guna kemudahan bekerja.
Semoga bermanfaat :)
Happy blogging \m/

Make Clickable Menu Google Search Engine

Setelah menghilangkan beberapa fitur dari tampilan yang ada pada google search engine bersamaan dengan itu hadir juga fitur baru. Contoh fitur yg dihilangkan antara lain screenshoot website, google plus share, link cached, similar and etc. Fitur baru pengganti hadir dengan membawa clickable menu yg isinya terdiri dari link cached, similar and share (yg terlihat cuma itu :d) Link navigasi dipindahkan ke bagian atas tepat di bawah kotak pencarian dan tentunya main navigasi yg selalu ada dimanapun produk google berada :))
Koben mau berbagi cara membuat clickable menu google full memakai CSS. Bila masih belum ngeuh dengan clickcable menu, perhatikan!!!
Before the clickAfter the clickItulah yg akan kita buat sekarang bos :d Gue hanya membuatkan versi default, jika mau keren silahkan kalian tambahkan variabel CSS sendiri!
DEMO

Cached

Similar

Share

.contshare {
  display: none;
}
.contshare a {
  color: #343434;
  text-align: center;
  text-decoration: none;
}
.wrapshare:active .contshare {
  display: block;
}
.wrapshare {
  position: relative;
}
.contshare:hover {
  display: block;
}
.parrow {
  width: 0px;
  height: 0px;
  cursor: pointer;
  border-style: solid;
  border-width: 8px 8px 0 8px;
  border-color: #060 transparent transparent transparent;
}
.contshare {
  width: auto;
  position: absolute;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}
.contshare li {
  color: #343434;
  background: #FFF;
  padding: 5px 10px;
  text-align: center;
  list-style-type: none;
}
.contshare li:hover {
  background: #EEE;
}

Planning HTML<div class="wrapshare">
<div class="contshare">
<li><a href="#">Cached</a></li>
<li><a href="#">Similar</a></li>
<li><a href="https://plus.google.com/u/0/_/sharebox/dialog" target="_blank">Share</a></li>
</div>
<div class="parrow"></div>
</div>Aurlah sendiri nominal yg ada, itu hanya kode CSS dasar yang perlu penambahan disana-sini.
Semoga bermanfaat :)
Happy blogging \m/