Senin, 18 November 2013

Apps Generate Image to Table .html

Sebelum melanjutkan artikel sebelumnya mengenai HTML editor, saya mau seling dulu dengan informasi ringan. Dahulu sekali sebelum kode CSS secanggih sekarang ini, AA pernah penasaran dengan satu tema! Apakah mungkin bahasa CSS dapat melakukan convert image to CSS? Ternyata saya dapatkan jawabannya di www.imgtocss.com Coba-coba reg, eh ternyata cuman dibatasi melakukan converter sampai 3x :P Hasil kode generator berupa format table! Ternyata dengan syntax table itu gambar bisa di jadiin CSS! Dulu pernah berbagi juga apps convert image to CSS?

Sekarang gue mau berbagi apps serupa dengan hasil generated berupa tablet juga.

DEMO

Link ImageKode CSS
ico

Silahkan ambil bumbunya di github.com/nyamsprod/Image-To-Table
Perhatian!!!
Karena kode CSS yg dihasilkan bejibun banyak, maka pertimbangkan besar kecil resolusi image ketika mau melakukan generate!!!
Cuma berbagi, sebenarnya masih banyak teknik/metode/cara melakukan convert image ke CSS. Saya saja punya lebih dari 5 jenis apps :D
Semoga bermanfaat :)
Happy blogging \m/

Sabtu, 16 November 2013

Free Download Codemirror Latest Version 3.19

Siapa yang tidak kenal dengan CodeMirror! CodeMirror adalah teks editor serbaguna yang diimplementasikan dengan JavaScript untuk browser. Khusus untuk mengedit kode, dan dilengkapi dengan sejumlah modus bahasa dan addons yang mengimplementasikan pengeditan agar lebih maju functionaly. Blogger saja pakek gituan perbaikan blogger template HTML editor Sebagai raja pembagi embed HTML editor, dulu gue pernah berbagi satu dicomot dari codemirror preview live html editor like the one in blogger template editor.
Sangkin nggak ada topic pos yg unik² saya sampe membuat file .html (mudah-mudahan keseluruhannya) web CodeMirror :D Soalnya saya pikir-pikir selain code-mirror saingan yg lumayan sepadan jatuh pada Emmet. Dengan keberadaan text editor ini, diharapkan bisa lebih efisien kerjaan kalian. Gue harap kalian mau mempelajari syntax/ilmu dari ke dua web tersebut. Di jamin towewewew...seruuu :-bd

Dahulu Codemirror mempunyai lambang beginibaboonCodemirrorSekarang sudah berbeda bro!logoCodemirror

Untuk mendapatkan download latest release, sobat bisa langsung datang ke CodeMirror Terakhir yg saya lihat keluaran sampe version 3.19 Bagi sobat yg berkenan mendownload dari gue, sikaaattt!!!
  • Via Ziddu
  • www.ziddu.com/download/23320611/codemirror.zip.html
  • Via 4shared
  • www.4shared.com/zip/UJ-cw4ui/codemirror.html
Koben sudah melebarkan badan konten agar lebih luas! Semoga bermanfaat :)
Jika ada ngaco-ngaco dikit harap maklum, soalnya ini manual bikinnya ;)
Pass zip: bebenkobensibloglanganugantengkalemtea
Happy coding \m/

Selasa, 12 November 2013

Switching and Video Playback use Youtube Player API iframe version

Dari pada vakum kelamaan, mendingan ngulas kembali trik dan tips seputaran pemasangan embed video si YouTube. Koben too sudah beberapa kali menuliskan trick penerapan embed video YouTube ke dalam sesi postingan blog. Tidak jauh berbeda dengan yang dulu-dulu, sekarang AA akan berbagi lagi namun dengan sentuhan berbeda :P Sebelum itu jalan-jalan dulu:
Do not forget to always back up your template!
Masukan script berikut diatas/sebelum tagging penutup </body>
<script src="http://www.youtube.com/iframe_api"></script>

<script>
//<![CDATA[
var player;

function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
"height": 315,
"width": 500,
"videoId": '_VFcEPGo_wg', // ID video yg mana gambar menjadi default tampilan embed video.
playerVars: {
'rel': 0,
'autoplay': 0,
'loop': 0,
'disablekb': 0,
'egm': 0,
'autohide': 1,
'start': 0,
'showinfo': 0,
'iv_load_policy': 3, // Standarnya 1. Jika diatur ke 1, penjelasan video yang akan muncul secara default. Jika diatur ke 3, penjelasan video tersembunyi secara default.
'cc_load_policy': 1, // Ini subjudul. Default didasarkan pada pengaturan pengguna. Jika diatur ke 1, bahkan jika pengguna ingin untuk menghapus judul, ditutup captioning ditampilkan secara default.
'color': 'white',
'theme': 'light',
}
});
};
//]]>
</script>
Seting-seting lah dahulu menurut kebutuhan kalian.
Ketika memosting, tulislah syntax berikut (save syntax ditempat aman, biar nggak lupa)<div id="player"></div>
<p>
<span onclick="javascript: player.loadVideoById('ID-VIDEO');">[YOUR TITLE 1]</span>
<span onclick="javascript: player.loadVideoById('ID-VIDEO');">[YOUR TITLE 2]</span>
<span onclick="javascript: player.loadVideoById('ID-VIDEO');">[YOUR TITLE 3]</span>
</p>
Perhatikan tulisan ID-VIDEO, gantikan dengan ID video yg akan kalian tampilkan!http://www.youtube.com/watch?v=zd2DfuVYqN4This is ID-VIDEO zd2DfuVYqN4 You got it? Kalau sobat mau melakukan mempercantik tampilan embed video YouTube, maka buat sendiri ya dengan ID #player { bla-bla-bla } :D Untuk demonya silahkan buka link brkt diikuti dengan memencet tombol Preview ya ;)Resource by: jsdo.it/No-Delay/3us8
Happy coding \m/

Minggu, 10 November 2013

Make Link Share One Google Account be Alive

Seperti yang sudah kita ketahui bersama, perusahaan Google sedang melakukan perombakan besar-besaran pada setiap produknya. Alhasil tampak jelas disana-sini tampilan² yang diremajakan terlihat menjadi lebih fresh. Tengok perubahan tampak depan dari halaman blogger features Satu yang pasti perubahan terjadi juga pada bagian sesi sign in google accounts. Di samping perubahan, penambahan produk jg dilakukan oleh pihak google. Contohnya yaitu google web designer Mungkin sobat sudah pada lebih tahu dari pada saya :P

Old Blogger FeaturesNew Blogger Features
old-blogger-featuresnew-blogger-features

Satu yang mencuri perhatian gue ketika melihat tampak muka sign account google, tepatnya pada bagian bawah nampak 7 buah icon! AA pikir ada link hidup yg akan mengarah kemana. Ternyata memang gambar doang bro :P Koben akan menanamkan link hidup disana dengan mamakai gambar tersebut. Gunanya terserah kalian untuk apaan :))one-google
Jika sobat mau resolusi asli gambar one google, saya sudah buatkan di codepen. Rasakan cdpn.io/BfxGb Kalau mau sedikit imut², berikut ramuan yg mesti di godog.

one-google

Save dan hostingkan gambar tersebut! Koben buatkan inline style CSS nya, urusan penempatan terserah masing²
<div style="position:relative;width:210px;height:17px;margin:15px auto">
<img alt="" src="HOST-GAMBAR-ONE-GOOGLE" style="display:block;margin:0 0;padding:0 0;border:none;outline:none;max-width:none;max-height:none;" height="17" width="210" />
<a href="GOOGLE-PLUS-LINK" title="Google Plus" style="display:block;width:14px;height:15px;position:absolute;top:0px;left:196px;">
</a>
<a href="GOOGLE-PLAY-LINK" title="Google Play" style="display:block;width:16px;height:15px;position:absolute;top:0px;left:165px;">
</a>
<a href="GOOGLE-YOUTUBE-LINK" title="YouTube" style="display:block;width:19px;height:15px;position:absolute;top:0px;left:97px;">
</a>
<a href="GOOGLE-DRIVE-LINK" title="Google Drive" style="display:block;width:15px;height:15px;position:absolute;top:0px;left:65px;">
</a>
<a href="GOOGLE-MAIL-LINK" title="Google Mail" style="display:block;width:21px;height:15px;position:absolute;top:0px;left:30px;">
</a>
<a href="GOOGLE-SEARCH-LINK" title="Google Search" style="display:block;width:16px;height:15px;position:absolute;top:0px;left:0px;">
</a>
<a href="GOOGLE-MAPS-LINK" title="Google Maps" style="display:block;width:16px;height:15px;position:absolute;top:0px;left:133px;">
</a>
</div>
Gantikan tulisan gede-gede tersebut jangan lupa! Semoga bermanfaat :)
Happy blogging \m/

Jumat, 08 November 2013

Dipaksa Update Postingan Bro

Sebenarnya lagi tidak ada ide postingan yang unik nih bro! Tapi salah satu temen blogger gue sudah minta² update artikel. Begini katanya "tumben lom posting lgi genggong heheh.......?" Kalau bahan yang biasa² mah banyak, tetapi menurut gue 'dah bejibun sobat blogger mosting hal biasa itu :P Koben akan sodorkan ini properti CSS background? Syntax yg sering dipakai oleh para blogazine blogger ketika melakukan posting. Perhatikan syntax sederhana berikut...
<div style="background:#000 url('BLAH-BLEH-BLOH') no-repeat bottom right;width: 323px;border: 1px solid #eee;padding: 0 1em;margin: 5px auto;color: #fff;font-weight:bold">

---------- CONTENT POSTED HERE ----------

</div>
Itulah syntax yang lebih dikenal dengan cara untuk merubah background di setiap halaman post blogspot.
Demo

Properti CSS background digunakan untuk menentukan efek latar belakang dari sebuah elemen.

Properti CSS digunakan untuk efek latar belakang meliputi:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
Boring banget kan postingan gue! Ya sudah AA kasih bonus tut's ringan bagaimana cara menciptakan efek jiggle (bergoyang) dengan CSS!

Jiggle Demo

Silahkan meluncur kemari kalau kepengen www.kirupa.com/html5/creating_the_ios_icon_jiggle_wobble_effect_in_css.htm
Sobat berminat memasang tombol berbagi dengan gaya jiggle ke dalam blog kalian? Okelah kalo begitu, sikat nih ramuannya...jangan pake lama!Demo & DownloadSave Page As ► buka pake editor Notepad ► perhatikan <style> untuk kode CSS. Urusan memasang silahkan masing-masing yah :D
Source coded by: kurtulusticaret.com/stk/Save-And-Share-2.txt
Bonus link:
thecodeplayer.com/walkthrough/css3-squircles
Happy blogging \m/

Selasa, 05 November 2013

Display Codepen in Blog/Web using AwesomePI

Di gawangi oleh Alex Vazquez, Tim Sabat, and Chris Coyier siapa yang tidak kenal dengan web CodePen! Salah satu tempat playground terkenal untuk front end side web yg ada saat ini. Tempat ajang pembuktian kabisa para kodinger untuk menunjukan kreasi masing-masing. Dari ketiga orang tersebut tambah seorang lagi yaitu Tim. Tim adalah seorang programmer, penulis dan pemerhati segala yg ada hubungannya dengan web. Dari kreasi seorang Tim maka tercipta codepen awesomepi. Apakah itu...
CodePen AwesomePI adalah sebuah unofficial API untuk web codepen bagi penggemarnya! Parse API sederhana untuk memanggil halaman CodePen. Beroperasi dengan PHP, DOM Parser menjadi panggilan JSON. (Saya juga kagak mengerti sama sekali) :D Singkat ceritanya begini!

Jika kalian suka membuat kreasi di sana, maka akah dihasilkan sebuah halaman kreasi kalian tersebut. Daftar dulu makanya ;)) Nih punya gue Beben Koben on CodePen Walaupun sederhana yg penting ikut nimbrung lah bro :)) Gue akan berbagi cara bagaimana untuk menampilkan halaman codepen kita menggunakan CodePen-AwesomePI. Kira-kira begini penampakannya:CodePen-AwesomePI

Ramuan script & coded terserah mau dibuatkan pada static page atau HTML/JavaScript. Please Save Page As / Ctrl + S demo berikut!
Pada script dengan tulisanurl: 'http://codepen-awesomepi.timpietrusky.com/beben-koben/owned',Gantikan tulisan beben-koben dengan account codepen kalian.Demo & DownloadTrik menampilkan halaman codepen menggunakan awesomepi Koben dapatkan dari Dreamdealer Serta rujukan source pelajaran sobat bisa satroni:
  • github.com/TimPietrusky/codepen-awesomepi
  • timpietrusky.com/codepen-awesomepi-released
Happy CodePen \m/

Sabtu, 02 November 2013

This Is Not a Notepad, But More Than That..HeHeHe

Ada satu web tools yang memberikan fitur cukup menarik bro. Tool yang dibuat meliputi 2 fungsi dasar yaitu memperindah dan preview kode. Berikut cerita singkatnya... CodeBeautify dikembangkan untuk beautify, minify, convert kode ke format yang lebih baik. Adapun fungsi yang didukung adalah
  • RSS viewer
  • Generate sitemap
  • Generate robots.txt
  • CSV to XML/JSON convert.
  • HTML viewer, beautifier, minifier.
  • CSS viewer, beautifier, and minifier.
  • JavaScript viewer, beautifier & minifier.
  • XML viewer, beautifier, minifier, convert to CSV,JSON format.
  • JSON viewer,beautifier,minifier,convert to csv,xml format.
Silahkan bermain-main ke code beautify Bila kalian perhatikan web codebeautify pada tombol download menggunakan teknik blob! Blob sendiri adalah objek file yg berubah-rubah dimana masih merupakan data mentah yg musti diolah kembali. Intinya bermain-main dengan data local storage and DOM (sotoy mode on) :D Dengan blob kita dapat melihat fungsional seketika, take a look example blob generated!

AA Koben akan berbagi 2 apps text .html dengan fungsi loading, editing, and saving. Segala yg berbau teks dapat kita olah dan tentunya penyimpanan data memakai blob technique :-" Penasaran seperti apa?

Pertama datang dari sobat blogger Mathias Panzenböck (panzi) dia membuat apps save generated data. Take a look here HackworthySaveGeneratedDataPerhatikan kotak File name, itu untuk memberikan title beserta ekstension. Lakukanlah apapun dengan kotak besar, selagi itu teks sobat bisa mengotak-ngatik dan melakukan penyimpanan. Ingat hasil akan berupa download yg didukung oleh mime format. Jadi harus benar-benar ingat kalian membuat title & ekstensinya apaan!

Yang kedua sedikit canggihan bro, this is loading, editing, and saving a text file in html5 using javascript :PTexttoSave

thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip

Sobat bisa membuka file apapun asalkan masih berupa teks, dan melakukan penyimpanan file dengan ekstensi bebas pula :)) Asalkan sobat mengenal dengan betul bekerja dengan bahasa program apa, ya save lah dengan semestinya :) Silahkan di sikat bro...
Untuk lebih jelasnya mah silahkan di pelajari sendiri-sendiri saja :D Semoga bermanfaat.

developer.mozilla.org/en-US/demos/detail/underscore-template-editor
Happy coding \m/