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 editor

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

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 beginiMasa sekarang

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

30 Top Level Blogging Widget Resources - 10+ New CSS Animation Tools Useful For Web Developers - Collection of Free HTML/CSS Tools - Free Responsive Plugins and Frameworks for your Projects - 8 Great HTML-CSS Frameworks That Will Be Most-Useful For Designers - 15 Excellent CSS3 Loading Animation Tutorials

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

Remove or Manipulate Ads using AVX Adhider

Dalam memberikan sentuhan beberapa efek ketika loading, dunia CSS sudah memiliki Yummi-Loader. Sekarang bagaimana ceritanya jika kelompok baris iklah atau yang sering di kenal dengan istilah (banner ads) di hilangkan hanya dengan menggunakan CSS? Apakah bahasa CSS coded dapat melakukan itu semua??? Jawabannya BISA.
Tiga orang bernama Abhishek kulyal, Vivek rawat and Sudheesh kumar telah menciptakan AVX-Adhider. Apa itu AVX Adhider? Adblock sederhana dengan ukuran beberapa KB saja, ditulis dalam CSS, berfungsi penuh pada setiap halaman situs web yg memiliki Ads (iklan) dengan aturan complexity of O(1) Begitu kira-kira penjelasannya ;))

Setelah Koben pikir² mungkin AVX-Adhider ini mirip dengan bootstrap theme or design. Kalau bootstrap CSS mungkin kumpulan kode berbasis CSS dasar yang diefisienkan untuk mempermudah kita dalam pekerjaan. Jika si AVX_Adhider, kumpulan unik-ID kode CSS Ads dari situs terkenal diberi bumbu property display: none; Dengan begitu maka tampilan ads yg kadang mengganggu bisa dihilangkan ;) Untuk melakukan semua itu, maka dibutuhkan bumbu CSS yg akan ditanamkan ke dalam folder file pada setiap browser engine. File download, cara sudah jadi satu pada file. Kalian tinggal ikuti saja langkah-langkahnya dari sana.

English Version - Indonesia Versi

Tips:
Kalau menemukan situs yg iklannya masih muncul, berarti unik ID belum tertanamkan di file HIDE.css Tinggal sobat cari unik-id ads tersebut apaan, dan tanamkan ke dalam file hide.css :D
Resources by: developer.mozilla.org/en-US/demos/detail/avx-adblock
Bonus:
developer.mozilla.org/en-US/demos/detail/underscore-template-editor
Semoga bermanfaat.
Happy coding \m/

Put Effect Loader using Yummi-Loader

Melihat preloader sebelum halaman terbuka secara utuh itu mah sudah biasa bro! Tapi bagaimana jika mencoba efek loader bergaya yummi! Yummi-loader adalah tidak lebih dari sebuah LESS file sederhana dengan beberapa CSS3 animasi. Pemakaiannya hanya menambahkan kelas 'off' pada elemen body template dan menggantinya dengan $(window).load() or $(document).ready() events Begitulah kira-kira penjelasan singkat mengenai Yummi loader. Explanation gaul version is menambahkan efek animasi memakai CSS3 yang dituliskan secara acak, di tambah dengan sedikit snippet jquery untuk menghidupkannya :D

Ramuan yang mesti disiapkan adalah

Hostingkan atau tulis kode CSS hasil download. Di dalam kode CSS yummi loader sudah terbuat 19 kode CSS animasi. Dengan menggunakan variabel transition-delay:; yg berbeda-beda maka terciptalah efek muncul telat gimana gitooo.

Cari tagging <body> sisipkan class off di dalamnya sehingga menjadi<body class='off'>Letakkan secuil snippet jQuery di atas tag </body>

<script type='text/javascript'>
//<![CDATA[
var $body = $('body');
    $(window).load(function() {
    $body.toggleClass('on off');
$('.on_off').click(function() { // This extra toggle for all
    $body.toggleClass('on off');
          setTimeout(function() {
    $body.toggleClass('on off');
         }, 3500)
    }); // Until here
});
//]]>
</script>

Perhatikan script yg diberi tulisan // This extra toggle for all dan // Until here Itu merupakan script ekstra untuk tombol, jika sobat mau memasangnya. Jika tidak pasang, tidak usah pakek script tersebut (delete ajah)

Pemasangan markup pada syntax HTML harus berlainan nilai CSS animasinya. Basic use<div class="inner fadein scaleInv anim_1">
YOUR CONTENT
</div>Kalau sobat mau memberikan efek yummi loader pada sebuah konten, ingat pada file CSS terdapat 19 gaya animasi! Gunakan ke-19 variasi tersebut agar terlihat menarik.
Contoh penulisan syntax markup...

<div class="inner fadein scaleInv anim_1">
 <h2 class="fadein scaleInv anim_19">Yummi-loader</h3>
  <h3 class="fadein scaleInv anim_7">Less//Css classes for fancy page load</h2>
 <section class="fadein scaleInv anim_5">
  <h4 class="fadein scaleInv anim_16">Hello Yummi!</h4>
<a class="fadein scaleInv anim_17" href="">Download this project as a .zip file</a>
<br/>
<a class="fadein scaleInv anim_18" id="pret" href="">Download this project as a tar.gz file</a><br/>
 <h1 class="on_off fadein scaleInv anim_6" style="cursor: pointer;">Try it CLICK!!!</h1>
  <img class="fadein scaleInv anim_11" src="" />
 <a id="forkme_banner" href="" class="fadein scaleInv anim_9">View on GitHub</a>
 </section>
</div>

Contoh simple

Semoga bermanfaat :)
github.com/ktty1220/jquery.lively-layout
Happy coding \m/

Selection Unique Code Snippets from CodePen

CodePen adalah sebuah web aplikasi yang terkenal yang memungkinkan kita membangun HTML, CSS dan snippet Javascript dari manapun asalkan memiliki akses Internet. Sangat mudah untuk berbagi kode dan mendapatkan umpan balik dari pengguna lain. Jika ingin opsi lebih luas harus daftar untuk versi PRO dan kita akan mendapatkan beberapa fitur keren seperti: pasangan pemrograman di seluruh dunia (live collaboration on code), mudah meng-upload file dalam bekerja. Ini akan menghemat banyak waktu jika sobat ingin mengintegrasikan dari beberapa proyek dengan proyek sendiri. Di sana kita akan mendapatkan hampir semuanya. Dari snippet kode simpel mudah sampai tingkat master punya.

Ide membuat postingan dikarenakan saya suka berkunjung ke web codepen, dan menyeleksi yang sekiranya menurut AA Koben memang unik, belum pernah terlihat sebelumnya :D Dengan begitu maka terkumpulah links unik pilihan dari codepen. Ada banyak links unique from codepen brother. Di jamin sobat-sabit bakalan ke-seng-seum.
Opening dulu bro...

Social Section - Ordered List Style

Shaper css image gallery Submit Email form :after Psuedo Element target Navigation css Animation Simple canvas stephenfjohnson Hackdays Nav Bar Calendar short ResumE AvaTars sliDer kanCing xRate naV Dots Buttons hoVer learn hover2 Accordion slider3 J A M click sego Carousel select validation G+ Buttons onediv

Generator cloud by: tagcrowd.com

Kalau mau nyambung www.flashuser.net/25-html-css-code-snippets-codepen
Happy blogging \m/

It's Not Magic, It's CSS Magic

Bakalan menarik artikel episode sekarang bro. Siapkan cemilan ekstra untuk menyimaknya! Gue akan mencoba mengkuak dua jenis properti yaitu calc and element. Prooperty tersebut pada mozilla browser tertulis begini -moz-calc & -moz-element Khusus dengan calc, konon dipakai juga dalam tweak coded terhadap responsive issue. Koben takkan bahas mengenai itu :P
Ada baiknya sobat melihat terlebih dahulu posted brkt perishablepress.com/firefox-css-magic 7 properti css firefox magic! Kembali kepada topik pembicaraan bro... Dengan menggunakan -moz-calc dan -moz-element kita bisa membuat live screenshot (preview) Believe it or not this is not a magic, this is real CSS magic ;))

Untuk lebih merangsang hasrat kalian, apakah kalian sudah melupakan satu css magic -moz-transform: scale Harus benar-benar belajar jika ingin menjadi seorang master :))

#areaPreview {
margin: 0;
margin-right: -moz-calc(22%);
background-image: -moz-linear-gradient(#eee, white);
background-image: -webkit-linear-gradient(#eee, white);
background-image: linear-gradient(#eee, white);
background-repeat: no-repeat;
background-attachment: fixed;
}
.preview {
position: fixed;
top: 0;
right: 10px;
width: 0;
height: 95%;
opacity: 0.3;
width: -moz-calc(27% - 40px);
background-image: -moz-element(#areaPreview);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;
-webkit-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.preview:hover {
opacity: 1;
cursor: help;
}

Planning HTML<div id="areaPreview">
BLAH-BLEH-BLOH WTF PRET...
BLAH-BLEH-BLOH WTF PRET
...BLAH-BLEH-BLOH WTF PRET
</div>
<div class="preview"></div>Enggak akan paham kalau tidak melihat demonya KAN!!! :-"

Lorem ipsum dolor sit amet

Aenean eu dui mattis ante luctus blandit in sed dui. Pellentesque vulputate suscipit hendrerit. Aliquam dui sapien, rhoncus vel consectetur a, aliquet at nunc. Nam pharetra ultrices elementum. Fusce ultrices porta erat ac luctus. Sed tempus, ipsum et consequat laoreet, libero nisl gravida turpis, a scelerisque nisl nibh eu dolor. Praesent et nibh a neque venenatis mollis. Nam vel diam at mauris varius cursus eget id elit. Vestibulum in porta sem. Nam et augue risus. Ut nec justo nec dolor ultricies auctor eu eu ante. Sed eu tellus nisl.

Tengok samping kanan monitor anda, sorot di sana ada live screenshot? Itulah keajaiban bahasa CSS3. Mau lagi keajaibannya???

Jika sobat pikir saya menampilkan semua image sama itu dengan syntax img biasa, pikiran sobat salah besar dan pastinya capek berooo :)) Itu adalah magic dengan bumbu magic CSS frame + -moz-element(#) Untuk melakukan hal ini semua, berikut links resources pelajaran yang mseti kalian pelajari dengan tekun :">
Library Link

• developer.mozilla.org/en-US/docs/Web/CSS/calc
• developer.mozilla.org/en-US/docs/Web/CSS/element
• www.w3.org/TR/css3-values/#calc
• bugzilla.mozilla.org/show_bug.cgi?id=363249
• caniuse.com/calc
• www.browsersupport.net/CSS/-moz-calc()
• www.browsersupport.net/CSS/background-image:-moz-element

For Fun

• www.cssplay.co.uk/menu/css3-reflections.html
• test.monoclejs.com/test/experimental/moz-element-flipper
• dynamis.jp/demo/moz-element/iframe.html

Kalau sobat mau memasuki lebih dalam ke link for fun yg gue kasih, di jamin bakalan menemukan sesuatu yang AWESOME. Semua ada di otakmu >:)
Happy blogging \m/

It's All About Markdown Syntax

Berbicara tentang markdown kurang-lebih seperti bahasa dasar HTML. Dengan markdown syntax kita dapat membuat tagging² dasar seperti pada HTML syntax! Bedanya sudah jelas terdapat pada pemakaian syntax. Dalam bahasa XHTML jika kita ingin membuat title dengan tag <h1> pada syntax markdown cukup menggunakan lambang # Tag standar seperti headers, emphasis, lists, links, images, code and syntax highlighting, tables, blockquotes, inline html, horizontal rule, line breaks, & youtube videos sudah terdapat di dalam markdown cheatsheet. Ada sedikit perbedaan syntax, mungkin karena developernya yang berbeda kale :D

AA Koben tidak akan membahas lebih dalam lagi mengenai apa itu markdown, silahkan sobat cari sendiri referensinya. Gue di sini ingin berbagi senangnya bermain-main dengan markup yang berbeda selain HTML tentunya ;)) Coba masukan sebuah link ke dalam form action di bawah ini:

URL:

Lakukan penyimpanan file di tempat suka-suka. Bukalah hasil save-an pada notepad. Secara menakjubkan otomatis kita mendapatkan syntax markdown siap pakai :D Lantas bagaimana untuk melihat hasilnya di mesin browser! Sudah tentu kita harus memakai markdown editor. Satu contoh mark-down playground markdown-here.com/livedemo.html
Jika memang tertarik dengan hal ini, maka step selanjutnya kita harus mengetahui resource keren punya untuk bermain-main :))

Markdown Syntax (Cheat Sheet)

• daringfireball.net/projects/markdown/syntax
• github.com/adam-p/markdown-here/wiki/Markdown-Here-Cheatsheet
• warpedvisions.org/projects/markdown-cheat-sheet.md

Markdown Tools

• url2markdown.herokuapp.com
• github.com/domchristie/to-markdown
• github.com/joemccann/dillinger
• markdown-here.com
• github.com/alecgorge/MarkdownEditor
• github.com/jbt/markdown-editor
Takut kurang...
• What r u looking for...

github.com/cloose/CuteMarkEd
Semoga bermanfaat.
Happy markDOwN \m/

Load and Display Image using JavaScript-Load-Image

Tidak sengaja dapet yang beginian! Mungkin apps HTML berikut kurang ada sangkut pautnya dengan tutorial blog. Tetapi selagi masih urusan dengan koding, pasti ada urusannya dengan kemajuan teknologi. JavaScript load image adalah bukan sembarang library untuk memuat konten gambar yg disediakan sebagai file, Blob atau URL. Ini dapat mengembalikan opsional elemen skala, cropped HTML img atau canvas. Serta tersedia metode untuk mengurai meta data untuk mengekstrak Exif tags dan thumbnail setelah mengubah ukuran. Singkat cerita begini bro...

Javascript-load-image adalah satu apps HTML untuk memuat gambar. Setelah itu kita dapat melakukan edit kecil berupa crop (merubah tinggi & lebar) image. Di bagian bawah terpampang ektrak data dari image tersebut. Dibuat pakek perangkat apa gambar itu, penjelasan img jika memang ada, tanggal pembuatan dan seabrek meta data to extract Exif tags.

Tidak ada bahan postingan yg menarik bro...

github.com/swaydeng/imgcolr - pazguille.github.io/flipload - github.com/Takazudo/jQuery.fullPhotoDialog - github.com/danielweck/epub3-sliderizer - www.companyfolders.com/blog/the-16-best-free-adobe-photoshop-alternatives-for-mac-windows
Semoga bermanfaat :)
Happy blogging \m/

Free Long Shadow Generator + Source Code

Berbicara issue trend terhangat seputar dunia koding tidak akan berasa ada habisnya. Display template yang lagi di gandrungi dengan gaya metro bertebaran dimana-mana. Mungkin dipengaruhi dengan hadirnya apps windows 8! Begitu pun dengan urusan bayangan alias shadow. Yup!!! efek shadow sebuah konten sekarang lagi ngetrend pada panjang-panjangan :P Secara basic efek shadow terbagi ke dua bidang yaitu box-shadow dan text-shadow. Perbedaan mencolok dengan long shadow dengan universal shadow sudah pasti pada hasil akhir. Universal shadow tidak lebih menggunakan value begini box-shadow: 1px 2px 3px #000 or text-shadow: 1px 2px 3px #000

Value 1px 2px 3px mempunyai artian sbb:

• 1px
h-shadow
• 2px
v-shadow
• blur effect

Ke semua value yg ada masih bisa dirangkai lagi dengan attr or value lain sehingga menghasilkan karya cipta IYAY :P Dengan rangkaian itulah maka trend long shadow bisa merajalela di dunia persilatan shadows :D Paling ekstreme mungkin efek bayangan seperti ini bro! Sorot itu tulisannya jangan dipelOtOtin...

LongShadows

Source coded by: http://stackoverflow.com/a/18237051

Untuk memudahkan pembuatan value shadow yg begitu panjang and bejibun, AA Koben ingin berbagi long shadow generator, tools bantuan IYAY.

Long Shadows Generator by Juani

sandbox.juan-i.com/longshadows

Long Shade Flat Icon generator

lab.web-gate.fr/ls-maker Chrome only

Dua saja ya bro, ampir sama soalnya gitu² juga ;)) Here for code long-shadow tools
cdpn.io/qpyot - cdpn.io/wIKpl
Contoh kreasi
sandropaganotti.com/wp-content/goodies/demos/we-love-shadows/we-love-shadows.html - cdpn.io/CyeEA
Bye bye...sampai jumpa lagi dengan trend design yg akan datang :-h
Happy tools \m/

Trick Install Manual for Add-ons Mozilla and Extensions Google Chrome

Sebagai calon seorang developer selain mempunyai ilmu koding/script salah satu faktor yang tidak kalah penting yaitu mengenal dekat dengan si penjelajah web (Web Browser) Empat yg umum dipakai mungkin internet explorer (IE), Mozilla Firefox, Opera dan Google Chrome. AA 'ben akan berbagi sedikit tips & trik nih kepada kalian seputar dunia browser Sobat kenal dengan istilah add-ons (for mozilla) atau extensions (for chrome) Intro dikit dulu kalo begitu

addons.mozilla.org, umumnya dikenal sebagai "AMO", merupakan situs resmi Mozilla untuk add-ons untuk perangkat lunak Mozilla, seperti Firefox, Thunderbird, dan SeaMonkey. Pengaya memungkinkan Anda menambahkan fitur baru dan mengubah cara browser atau aplikasi bekerja. Silakan melihat-lihat dan menjelajahi ribuan cara untuk menyesuaikan cara Anda melakukan hal-hal secara online.

Extensions adalah program software kecil yang dapat memodifikasi dan meningkatkan fungsionalitas dari browser Chrome. Anda menulis mereka menggunakan teknologi web seperti HTML, JavaScript, dan CSS.

Pada satu kejadian di hari eMMoh, Koben mendapatkan satu tragedi ide luar binasa! Begini bro... Bagaimana caranya menginstall addons/extensions secara offline? Offline disini memiliki artian sebagai berikut, memasukan file addons XPI or extensions CRX dari hasil download ke dalam komputer. Download file dari warnet, tetapi komputer kita ada di rumah!

Mau ora gelem berarti harus tahu triknya cara mendownload extensions/addons online for transfer to computer in the house :D Begini proses kerjanya...

Tricky Mozilla Add-ons

Pertama-tama pilihlah addons yang mau di unduh di A M O Setelah di pilih, ambil link dengan cara Copy Link Location Ex link addonshttps://addons.mozilla.org/en-US/firefox/addon/firebug/Bukalah satu browser selain MOZILLA. Letakan link addons pilihan pada address bar diikuti dengan enter. Screenshot gue membuka dengan google chrome.Klik tombol yg bertuliskan Download Now maka akan terbuka popup kecil. Pilihlah link DL dengan tulisan download anyway.Maka nanti akan dapat file ber-ekstensi .xpi (firebug-1.12.3-fx.xpi) Save in di lokasi aman (jangan lupa) File addons sudah didapatkan, sekarang tinggal cara memasukannya ke dalam browser mozilla. Pencet kombinasi kibor Ctrl + Shift + APada pojok kanan atas ada sebuah icon bulat mirip roda? Klik lah dengan di ikuti opsi Install Add-ons From File... Ambil file dari data file yg tadi di save (jagnan lupa)!DONE.
Bonus: www.accessfirefox.org/Install_Addon_Manually.php

Tricky Chrome Extensions

Pertama-tama buka halaman chrome web store Sebelah kiri pada navigasi pilih tulisan Extensions. Klik di sini kalau takut nyasar destination Pilih extensions yg diinginkan. Contoh link extension google chromehttps://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhmKoben memilih link ext. opsi Developer Tools milih Web Developer. Ada 2 cara untuk mengunduh file ext kita tersebut. Cara tweak link & jasa layanan web ;) Perhatikan syntax link ext. targethttps://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhmLihat deretan kode paling belakang bfbameneiokkgbdmiekhjnmfkcnldhhm Sudah di ambil kode tsb, rubah dan rangkai menjadi sedemekian rupahttps://clients2.google.com/service/update2/crx?response=redirect&x=id%3Dbfbameneiokkgbdmiekhjnmfkcnldhhm%26ucSimpan pada address bar mozilla, enter. Cara berikutnya dengan layanan web chrome-extension-downloader.com masukan URL pada kotak yg tersedia, jebret save deh. Jika ada warning expired coba lagi dengan cara refresh. Jika masih tidak bisa, kemungkinan extensions chrome yg dimaksudkan tidak ada alias GONE.

Cara memasukan file extensions (Web-Developer_v0.4.4.crx) ke dalam browser chrome. Buka browser chrome kalian, perhatikan pojok kanan atas yg di beri icon berlambang ☰ Klik icon tersebut kemudian sorot ► Tools ► Extensions kemudian klik.

Setelah di klik maka akan terbuka page extensions. Lakukanlah Drag & Drop file extensions hasil unduhan.DONE.
Demikian kiranya tragedi ide bulan oktober cukup 2 browser saja, soalnya itu yg bisa aku sharing en caring, dan itupun capek sekali bikin postnya #:-S Semoga bermanfaat :)
Happy blogging \m/

The Best Sources in October Plus Bonus

Mari bercinta eh salah bercerita tentang scroll effect. Contoh sederhana dari efek scroll. Banyak sekali jenis efek bergulir itu bro! Sample keren membuat smooth scroll pada anchor tags bit.ly/1fTZNc3 :D Scroll untuk header effects juga ada bro tympanus.net/Development/HeaderEffects Ini untuk fixed header animations www.inserthtml.com/demo/header-animations/example-1 masih kurang juga!!! sikattt www.outyear.co.uk/smint Berakhir di alvarotrigo.com/fullPage Udah segitu saja yah ;))
This is awesome tympanus.net/codrops/2013/08/27/3d-shading-with-box-shadows and it's so classic cssdeck.com/labs/full/m5wdhhhh then back to awesome again tympanus.net/Development/SidebarTransitions

Ada yang kepingin membuat webmail client sendiri, baca artikelnya www.afterlogic.com/webmail-client 3 hotlink tools for developer www.freeformatter.com - www.freeformatter.com - cssanimate.com. Kita lari ke urusan menu navigation, third awesome modern menu 1.s3.envato.com/files/66496287/index.html - www.creativetier.com/products/modern-menu & www.creativetier.com/products/modern-menu-3/horizontal.html Tidak boleh ketinggalan dong informasi trik hover www.designrazzi.com/2013/free-image-hover-effects
Bonus link pilihan dari codepen
cdpn.io/Csydb - cdpn.io/Flxoi - cdpn.io/xeqmH - cdpn.io/aGhKi - cdpn.io/nGAks - cdpn.io/mhGpC - cdpn.io/hzoKf - cdpn.io/lazcn

Bonus ++
pcvector.net
web-nugget.com
www.thepetedesign.com
dixso.github.io/custombox
vanderlee.github.io/dropmenu
inspiretrends.com/css-animation-tools
www.inserthtml.com/demos/css/radio-buttons
graphicdesignjunction.com/2013/09/html5-and-css3-tutorials
hefsivodkarosky.blogspot.com/2013/03/kumpulan-ebook-2013-vol-2.html
hefsivodkarosky.blogspot.com/2013/03/kumpulan-ebook-gratis-2013-vol-1.html

Happy blogging \m/

Various Beautiful Expandable Breadcrumbs

Tahu dengan si breadcrumb? Dalam dunia koding bread crumb bukan berarti remah roti! Breadcrumb blog yaitu bantuan navigasi yang digunakan dalam user interface. Hal ini memungkinkan pengguna untuk melacak lokasi mereka dalam program atau dokumen. Breadcrumbs sendiri biasanya terlihat secara horizontal di bagian atas halaman web, sering di bawah bar judul atau header. Menyediakan link kembali ke halaman sebelumnya setiap user navigasikan melalui untuk sampai ke halaman ini. Tetapi breadcrumbs yg ada pada blogger berupa link tautan kategori/label/category :-/ Contoh penampakan bread-crumbHome page > Section page > Subsection page > End pageBegitulah nampak alakadar karena tidak diberi sentuhan style sheet! Satu masalah timbul bagaimana jika judul breadcrumbs mempunyai panjang sampai melebihi lebar konten yg tersedia? Kalau tidak beleber, pasti trobos bablas :)) Sekarang saatnya membuat navigasi halaman (bread_crumbs) blog kalian lebih uptodate dengan bumbu² ajaib. Masalah panjang judul breadcrumb akan terselesaikan. Sebelum itu touring dolo

• bit.ly/GEcN5n
• www.dreamtemplate.com/dreamcodes/documentation/breadcrumbs.html
• comparenetworks.com/developers/jqueryplugins/jbreadcrumb.html
Kalau kurang...
• bit.ly/GEcZkR

Setelah melakukan walking away, ternyata kode yg dibutuhkan lumayan banyak! Seleksi punya memilih, pilihan sederhana namun gaya tetap memukau jatuh pada expandable breadcrumbs is perfect for pages with long titles. AA tidak akan berbicara cara memasangnya ke dalam blog. Soalnya bakalan panjang. Koben cuma mau berbagi saja kok ;))
Demo & resource: cdpn.io/zglJf
Kode hasil modifikasidemo & downloadSave page as ► buka di notepad ► lihat kode-kodenya di sana :D
UPDATE:
cdpn.io/GfaCE
Happy coding \m/

HTML Framework by DreamTemplate DreamCodes

Bila melihat tampilan depannya saja, mungkin akan terlihat web ini hanya penyedia template-template keren www.dreamtemplate.com Berbagai jenis template dari websites template, CSS template, responsive template, flash template, word template, photo gallery template, corporate identity, powerpoint template and etc bisa kalian sikat. Koben mau bertanya nih pada sobat sekalian what are you doing!!! Bagaimana cara menampilkan screenshot sebuah blog/site secara instant tanpa embel² meski upload image ke hostingan? syntax trick LIKE THIS...

USE THIS

<img src="http://s.wordpress.com/mshots/v1/http%3A%2F%2Fwww.ENTER-URL-HERE.com?w=600&h=450" border="1" />
<img src="http://s.wordpress.com/mshots/v1/http%3A%2F%2Fwww.ENTER-URL-HERE.com?w=300&h=225" border="1" />
<img src="http://s.wordpress.com/mshots/v1/http%3A%2F%2Fwww.ENTER-URL-HERE.com?w=150&h=112" border="1" />

Parameters:
-----------
h = height of screenshot
w = width of screenshot
border is border (biar kelihatan ada garis pinggir)

AA Koben mau bertanya kepada kalian lagi! Dimanakah tempat bermacam-macam tutorial fullstylish berada dalam satu page khusus dan disampaikan dengan lugas (code, demo) yang mana tutorial sudah dapat dikatakan mencakup secara 100% Ayo dimana??? Pertama ya di blog gue dong :"> >:)

Please visit

Selamat menikmati :)
Happy blogging \m/

Get Free Applications Seen in 3D Renderer by Koben

Koben akan mengupdate informasi dari artikel sebelumnya! Apakah sobat masih ingat dengan secret message? Menyembunyikan pesan rahasia di balik sebuah gambar. Berita teranyar ada tools serupa dengan tampilan berbeda, sikat bro steganography machine Gue juga pernah berbagi artikel what else we need!!! Dua link bonus yg AA kasih terdapat web keren bercerita tentang JavaScript 3D cek this one out threejs.org Terdapat ± 39 demo JavaScript 3D yg dapat mencengangkan mata kita :P Sebagai bloglang adventure, kemudian Koben menclok ke CSS 3D renderer jsrun.it/kjunichi/1mVA Sobat dapat melihat sebuah cube animations?
Jika kalian ingin melihat kreasi seputar cube (kubus), silahkan klik link berikut query css cube on google.

Dari karya kjunichi tentang CSS3DRenderer, AA Beben telah membuat aplikasi .html dengan gaya tersebut (3D cube) Kalian tinggal bermain-main dengan kubus tersebut dengan mouse kalian! Hold left click untuk membolak-balikan kubus. Scroll mouse for maximize or minimize.
You want try it:

• Meny iFrame.
• iOS7 Zoom-out Side Nav.
• Revealing CSS3 Menu.
• Cari sendiri silahkan...:))

Tools aplikasi mencakup colorpicker, convert code, live HTML editor, embed base64 by cdpn.io/Bcsbd, w3school and w3 web. Mangga di download

Semoga berkenan di hati kalian. Jangan lupa ibadah sholat, apalagi lupa makan bro. Semoga sehat selalu bray...jangan putus silaturahmi, hal biasa kalau putus cinta :))
Bonusna
jsdo.it/blogparts/A3vG?view=play - jsdo.it/blogparts/3Lvs?view=play - jsdo.it/blogparts/gPaL?view=play

Have fun script :P