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/

Rabu, 30 Oktober 2013

Good Apps from MichΔΣl owner mydelivery.net

Dari sekian banyak situs bertebaran, pasti mempunyai konten hebat dengan kadar yg berbeda-beda pula. Seorang bernama MichΔΣl punya satu situs dengan konten yg gue pikir cukup full stylish! Sekilas tentang MichΔΣl...
MichΔΣl seorang yang banyak bakat. Software/Web/Game Development, produser, video special effects, peneliti, inventor, aktivis, hobi, dll. Seorang yang sangat produktif sehingga dalam waktu senggang, kerap menikmati menulis tentang sastra, merancang, mengembangkan, atau apapun yang membuat dia produktif, dan menghibur dirinya :D Michδσl suka mendorong batasannya dan mencapai kejayaan, baik teknis, fisik, psikologis, ataupun lingkungan.
Pertama-tama yg akan gue informasikan mungkin sudah tidak asing lagi my bro, it's all about HTML editorHTMLOnLiveDebugger

mydelivery.net23.net/dev/HTML%20OnLive%20Debugger/app

Setelah disuguhi HTML onlive debugger, sekarang mari kita tengok dynamic content generator. Apps generator sederhana untuk membantu kita membuat beberapa syntax dasar seperti div, button, link, image, list, text-input, radio-buttons dan check-box. Bisa di DL juga itu, dan sobat bisa melakukan perombakan/penambahan properti generator (kalo bisa itu juga) :P

mydelivery.net23.net/dev/dynamic_content_gen

Selanjutnya embed google font explorer, yang mana kita bisa melihat tampilan font yg kita pilih dari google web.

mydelivery.net23.net/dev/Google%20Font%20Explorer

Mau melihat dalaman sebuah situs, cara tercepat dengan menggunakan tehnik tools view source.

mydelivery.net23.net/dev/View%20Source%20Browser

Pengen mencoba HTML5 preview?

mydelivery.net23.net/dev/codemirror.html

Satu tab browser biasanya hanya dapat membuka satu url, bagaimana bila mau membuka lebih dari satu? Cobalah tools berikut ini

mydelivery.net23.net/dev/Mobile%20Tabbed%20Browser

Karena lumayan banyak aplikasi yg bisa di lihat, silahkan meluncur sendiri saja deh mydelivery.net23.net/dev Seperti biasa bonusnya AA Koben akan memberikan links resource keren pupnya ciamik abizzz.
cdpn.io/FKlhx cdpn.io/DeuqL cdpn.io/CALIH cdpn.io/zGnwq cdpn.io/zfiBo cdpn.io/aguAD cdpn.io/tnzwj cdpn.io/jceEH cdpn.io/utAIk cdpn.io/luCei cdpn.io/Hzrhf cdpn.io/glCDt cdpn.io/oKJps cdpn.io/jhpld cdpn.io/eivpf cdpn.io/Jxihf cdpn.io/lDEpo cdpn.io/wAqsB cdpn.io/zqFGh cdpn.io/Fypuw cdpn.io/wtIxy designrshub.com/2013/10/content-creation-tools.html

Sabtu, 26 Oktober 2013

Selection Good Resources in October

AA Koben hanya mau update postingan sedikit nih. Siapa tauk bermanfaat bagi kalian yang memang suka dengan utak-atik koding via editor live preview ;)) Mungkin dua web berikut merajai dalam soal berbagi konten dari seluruh penjuru dunia JS Bin & JSFiddle Don't forget my collection add here HeHeHe... Apakah sobat kenal dengan yg bernama Emmet?
Satu gebrakan telah dilakukan oleh master Amit Sen, dia membuat situs seperti jsFiddle/jsBin dimana bagian penulisan untuk markup HTML menggunakan fitur yg ada pada web emmet! Jadi setiap menuliskan tag pembuka, maka otomatis akan langsung ada tag penutupnya, enyak bro nggak capek nulis 2x :D
Dulu mah beginiLiveweaveMasa sekarangliveweave

liveweave.com

Contoh kreasi:
  • liveweave.com/GoGhKy
  • liveweave.com/CJ9NIt
Sudah kenal belom dengan TextTeaser? Web yg berjasa membuatkan kita cuplikan postingan (headlines article) silahkan mencobanya www.textteaser.com Mau membuat sebuah project baru, baca ini dulu siapa tau mendapatkan ide ++From codepen, i have selected
cdpn.io/mdagh - cdpn.io/FKlhx - cdpn.io/glLku - cdpn.io/DeuqL - cdpn.io/CALIH - cdpn.io/zGnwq - cdpn.io/zfiBo - cdpn.io/KlLtF - cdpn.io/aguAD - cdpn.io/tnzwj - cdpn.io/jceEH - cdpn.io/utAIk - cdpn.io/luCei
Bonus
designbeep.com/2013/10/22/20-jquery-side-sliding-panel-plugins-show-hide-website
vagnervjs.github.io/frame-player
pongstr.github.io/pongstagr.am
Happy reading :D