Complete Resources in September 2013 by Beben Koben

Pernah membaca artikel dengan judul weekly free resources for designers and developers atau mirip dengan itu good resource in bla-bla 2013! Isinya tidak lain yaitu informasi uptodate yang sedang terjadi di dunia developer, design, coding, tools, and script. Beben Koben selaku bloglang anu ganteng kalem tea sudah memilihkan dari berbagai links site keren punya, akan berbagi resource full stylish untuk kalian semua :) Satu pesan AA kepada sobat semua, tolong link yg sudah gue kasih minimal kunjungin lah! Karena siapa tauk konten pada site yg di tuju tersebut berisi info yg kalian cari-cari selama ini :D Dari kegiatan selewar-selewir, yuk kita mulai acara blog walking ini dengan mengucapkan Bismillaahirrohmaanirrahiim...

www.wdstandards.com/html5-and-css3-navigation-for-your-inspiration-and-ideas - www.psdtohtmlhint.com/cheat-sheets-for-designers-and-developers - lab.ejci.net/favico.js - nthmaster.com - designmodo.com/google-maps-jquery-flat-ui - www.designrazzi.com/2013/free-css-html5-jquery-search-forms - www.dynamicdrive.com/dynamicindex1/ddiconmenu.htm - acidmartin.wordpress.com/2013/09/03/acidjs-ribbon-3-0-is-out - www.pixxelfactory.net/jInvertScroll - cloudconvert.org - thepetedesign.com/demos/jquery_flat_shadow_demo.html - www.script-tutorials.com/night-sky-with-twinkling-stars - www.creativebloq.com/create-slick-html5-animations-9134432 - www.designrazzi.com/2013/css3-website-tools - kumailht.com/responsive-elements - blog.templatemonster.com/2013/09/18/tutorial-how-to-code-flyout-navigation-wheel-menu - www.beelinereader.com/bookmarklet

Itu web site terpilih, yg mana isi informasi dijamin prikitiw punya. Dari web github AA memilih...

github.com/dukerson/jquery.tweetable.js - github.com/burakson/fseditor - github.com/jlukic/Semantic-UI - github.hubspot.com/vex/docs/welcome - vdw.github.io/Tabslet - maroslaw.github.io/rainyday.js - github.hubspot.com/pace/docs/welcome

Bagi blogger yg memang haus akan ilmu, tidak salah kalian menclok di blog aneh aku ini. Walau perjuangan membukanya memerlukan kesabaran :"> Setelah git-hub diacak-acak kini giliran codepen and cssdeck ;))

cdpn.io/DCvFm - cdpn.io/lHpnK - cdpn.io/eGCJu - cdpn.io/gmKwk - cdpn.io/nrFHe - cdpn.io/pAecq - cdpn.io/jCuKa - cdpn.io/abvFk - cdpn.io/svupq - cdpn.io/Klieu - cdpn.io/HlJtD - cdpn.io/KbhmA - cdpn.io/sBAjv - cdpn.io/kysHq - cdpn.io/Cdubx - cdpn.io/JqtGI - cdpn.io/oxsHJ - cdpn.io/qdpvw - cdpn.io/kHdlD - cssdeck.com/labs/full/css3-javascript-pure-dropdown-menu - cssdeck.com/labs/full/isiatjul - cssdeck.com/labs/full/floating-links

Sudah mendengar tentang togetherjs.com embed chat dimana saja asalkan kita menaruh javascript togetherjs.js? Jika ada sobat yg sudah memasangnya, berikut address together Koben goo.gl/iTueVG Kalau yg ini saya sendiri kurang paham developer.mozilla.org/en-US/demos/detail/peerjs

Semoga berguna :)
Happy blogging \m/

Free Templates Blogger in September 2013

Pada era gadget megang kendali, mau tidak emoh jika sobat memang mau membuat blog/site maka template yang harus terpilih sudah responsive! Free template blogger mungkin kebanyakan belum mendukung ke platform responsive oleh si pembuat. Memerlukan kinerja ekstra jika satu template fullstylish ingin di buat responsivible. Oleh karena itu template keren yg sudah responsive pasti kebanyakan berbayar bro :D Karena AA lagi males mosting, mau berbagi source template nih pada kalian. Mau buat koleksi silahkan, sudah pasti keren abis coy template's sekarang (Maaf kalau ada yg repost, sangkin banyaknya gue ngepost masalah template) :">

Gamer MagZ Premium News Sports Magazine Blogger Template free 2013

SpiceMag 1.1 Premium Magazine Blogger Template

Exposure Blogger Template

Halifax Blogger Template

E Style Premium Blogger

Dazzling Designer Blogger Template

Blogholic Templates Blogger

Timeline Template Blogger

TheStyle Blogger Template

Semoga berkenan buat kalian, template pilihan AA Koben anu ganteng kalem tea!
BONUS:
www.spicytricks.com/themes/free-magazine-blogger-templates-2013 | www.cssauthor.com/10-best-responsive-blogger-templates | www.designerledger.com/best-free-responsive-blogger-templates | templatesledger.com/30-best-free-blogger-templates-download
Happy DL template \m/

Get Free Filesaver & Rich TextArea Apps Page .html

Dari sekian banyak variabel dari bahasa HTML, ada 2 var. HTML yang cukup menarik yakni HTML <textarea> tag dan HTML <canvas> tag. Dua jenis tag HTML tersebut memiliki keunggulan & keunikan tersendiri. Sangkin hebatnya untuk melakukan snippet code/script harus memiliki ilmu kanuragan yg mumpuni ;))

Definisi dan Penggunaan

Tag <textarea> mendefinisikan kontrol input teks multi-line.

Sebuah area teks dapat menyimpan jumlah yang tidak terbatas karakter, dan membaca teks dalam font fixed-width (biasanya Courier).

Ukuran area teks dapat ditentukan oleh cols (kolom) dan atribut rows (baris), atau bahkan lebih baik, melalui variabel CSS tinggi (height) dan lebar (width).

Apakah canvas?

Elemen HTML5 <canvas> digunakan untuk menggambar grafik, on the fly, melalui scripting (JavaScript biasanya).

Unsur <canvas> hanya wadah untuk grafis. Kita harus menggunakan script untuk benar-benar menarik grafis.

Kanvas memiliki beberapa metode untuk menggambar jalur, kotak, lingkaran, karakter, dan menambahkan gambar.

Contoh penampakan textarea & canvas

Your browser does not support the HTML5 canvas tag.

Mungkin sobat bertanya-tanya kenapa saya bercerita ngalor-ngidul kesana-kemari bercerita itu semua :-/ Artikel kali ini akan seru, berbagi tools yg gue anggap cukup menarik. Kelas ilmu tinggi, kita akan bermain dengan FileSaver interface!

Secara default jika kita melakukan grab text, kemudia diletakan ke dalam textarea, maka akan terlihat langsung. Yang terlihat tentunya hanya berupa teks saja. Bagaimana jika ada aplikasi yg bisa melakukan grab text, dan hasil yg tampak akan dapat meliputi link, image, dan standar gaya yg ada? Sekarang coba buka halaman berikut code.eligrey.com/citedrag/richtextarea.html
Kemudian lakukan grab text yg meliputi tagging h1, h2, p, links atau apapun lalu masukan ke kotak Rich Text Area.

Berikut screenshot AA melakukan grab text ketika mosting!Terlihat variabel apa saja yg terbawa ke sana? Link dengan tulisan berwarna itu pun dapat di akses dengan klik kanan mouse atau press Ctrl + left click mouse. Silahkan sobat explore sendiri saja dan gunakan untuk apa? Setelah apps textarea, sekarang lanjut dengan apps canvas bro.

Ini lebih menarik lagi, di sini kita akan bermain-main dengan FileSaver interface. Coba buka halaman brkt eligrey.com/demos/FileSaver.js Terdapat 3 jenis kotak form action for image, for text and for rich text. Kita dapat bermain-main dan langsung melakukan penyimpanan data local storage :) Koben sudah bingkiskan 2 apps HTML page FileSaver & Rich Text Area. Silahkan bermain-main

Please visit http://eligrey.com/blog you can found the great content ;)
Happy coding \m/

Playit Tryit HTML Editor Playground

Ada rasa gimana gituh acara mosting sekarang ini! Cobalah oleh kalian search pada kotak pencarian dengan keyword html editor atau editor html Sudah berapa banyak saya berbagi apps page .html playground? Apakah sobat masih ingat dengan satu postingan yg berjudul Tryit Editor v1.7 Gue berkunjung lagi ke sana ternyata sudah update! Ada penambahan fitur yaitu kita bisa melakukan Open file and save to local disk (teknik blob web API interfaces in mozilla)
Ternyata master KevZho masih terus melakukan bug disana-sini agar lebih full stylish. Bagi sobat yg mau mencoba versi sebelumnya v1.5 setelah di edit sana-sini biar terlihat unyu², nih silahkan di download TryIt v1.5 [Pass: tryiteditor.webs.com] Kalau mau yg terupdate silahkan kunjungi web sumbernya, klik deh link yg ada tulisan Simply click this link 5 times and press "Skip ad" each time!

Bengong punya cerita AA Koben tidak ada kerjaan, lalu ngutak-ngatik live preview HTML editor. Maka terciptalah tryit playit editor v1.8 Familliar dengan tryit editor berikut Tryit Editor w3schools Saya adopsi theme editor tersebut, form action tetap memakai HTML editor offline.
Berikut ini adalah spesifikasi aplikasi .html pages yg gue tanamkan nyomot dari berbagai sumber:

1. Metro Menu CSS3.
duniaradioku.blogspot.com/2013/09/memasang-metro-menu-css3-untuk-blogger.html
2. Online CSS Compressor & Beautifier.
mini-web-tools.googlecode.com/svn/p/css-compressor-and-beautifier.html
3. Special Character Generator.
mini-web-tools.googlecode.com/svn/p/special-character-generator.html
4. Convert or phrase code/script added too.
5. Generator warna by JSColor.
jscolor.com
6. Popup simple modal Redux by Tom.
deseloper.org/read/2009/10/jquery-simple-modal-window

Buka screenshot berikut pada new tab browser, jangan di close! Perhatikan angka warna-warni yg ada disana yah :)

1 = Penempatan dan penulisan syntax kode atau script. Pada kolom tersebut sudah saya buatkan contoh markup HTML.
2 = Tombol submit code untuk melihat hasil dari proses nomor 1
3 = Tombol untuk mereload/refresh seluruh halaman, dan akan kembali ke contoh penulisan markup.
4 = Generator untuk melihat kode warna HEX.
5 = Textarea kolom hasil kreasi dari proses nomor 1
6 = Sorotlah pada area tersebut (sisi kiri monitor anda) maka metro menu akan terbuka. Disanalah AA meletakan ke empat tools yg akan terbuka secara popup.

Setelah mengetahui keterangan tryit playit editor, buat apa kalian baca postingan ini jikalau tidak mendownload filenya =))

Password: beben-koben.blogspot.com
Semoga bermanfaat :)
Happy tools \m/

Slide Out or Reveal Effect for Footer Side

Cukup bervariasi nama yang diberikan pada trik satu ini. Beberapa nama tersebut adalah curtain reveal effect, CSS3 slide out footer, scroll to Reveal footer, CSS hidden footer and etc. Agak mirip² dengan trick sticky content! Sesuatu yang tersembunyi akan terlihat jika dilakukan scrolling ke bawah or atas. Pada trick sticky, sesuatu akan berhenti dengan tinggi yg sudah di patok. Sangat kreatif sekali ;)) Dengan berkembangnya bahasa CSS sekarang, banyak memungkinkan pembuatan tirk-trik yg dulu mustahil di buat dapat terealisasi.

Make Slide Out Footer with z-index Trick

Master Martin Angelov dari tutorialzine web telah berkreasi. Cek this one out bro

bit.ly/16gcwly - bit.ly/16gcBpa

Curtain reveal effect using CSS

Master Ryan from thecssninja web created CSS reveal effect.

bit.ly/16gcOJ3 - bit.ly/16gcREO

CSS slide-out footer

Bro orioltf on codepen hes make CSS slide-out footer.

cdpn.io/cHwyu - codepen.io/orioltf/share/zip/cHwyu

Footer Scroll to Reveal

Master David Leininger still on codepen he make it.

cdpn.io/HblqB - codepen.io/davidleininger/share/zip/HblqB

Pure CSS Hidden Footer

Master Howlermiller from TJD web design tell about pretty neat CSS trick hidden footer.

cdpn.io/qazbu - codepen.io/tjacobdesign/share/zip/qazbu

Begitu dan segitulah yang AA temukan trick menyembunyikan bagian footer memakai CSS. Kalau yg pakai jQuery script banyak, jadi males cari bahan²nya juga :D Bonus dari web codepen, links pilihan Master Koben :">

cdpn.io/vetCA - cdpn.io/xIbnz - cdpn.io/ImfCJ - cdpn.io/rKuCg - cdpn.io/gkwzF - cdpn.io/Bimhg - cdpn.io/rnvkG - cdpn.io/cojza - cdpn.io/mtgLK - cdpn.io/yuzvq - cdpn.io/yIcoH - cdpn.io/wklrG - cdpn.io/jmkfK - cdpn.io/epwdH - cdpn.io/qLHAB - cdpn.io/Fdnlz - cdpn.io/dykhL - cdpn.io/ivtmJ - cdpn.io/inluv - cdpn.io/rzynD - cdpn.io/bFAKi - cdpn.io/Aclqr - cdpn.io/GqClv - cdpn.io/bpaxG - cdpn.io/hpltK - cdpn.io/KqCza - cdpn.io/kEuwC - cdpn.io/hjBDb - cdpn.io/jbdFJ - cdpn.io/sugqB

Happy blogging \m/

Get Free Apps Color Palettes Page HTML

Apakah yang terlintas di benak sobat jika mendengar kata Palette! Dalam komputer grafis, pallete adalah nama yg diberikan, hingga set warna untuk pengelolaan gambar secara digital (color palette) Di dunia site sendiri istilah color palettes sudah tidak asing lagi. Intinya yaitu melihat pecahan warna menjadi satuan mandiri dari sebuah objek (begitu kira-kira @-))
Akan tetapi tergantung pada konteks (engineer's technical specification, programmer's guide, spesifikasi file gambar, manual user, dll) Singkat dan gampangnya begini...bagaimana caranya jika kita ingin mengetahui komposisi warna dari sebuah link web ataupun gambar? Dengan aplikasi color palette generator, maka semua itu dapat dilakukan secara mudah coy. Ada juga yg pakai software HTMLcolor, Eyedropper, ColorPic or etc.

Sebagai bloglang adventure berkata: "tentunya kurang etis jikalau aplikasi pemecah warna dipegang kendali oleh online tools and free software services" Berikut contoh online color palette generator
Ekstrak warna dari link gambar

Choose file:
Or enter URL:

Esktrak warna dari link site address

Enter URL:

Acara puncak bagi-bagi opensource HTML page color palette. Sebetulnya banyak macam, tapi AA sudah buat 6 pilihan yg gue sabet dari gitHub site ;)) Kebanyakan nanti puyeng, enam jenis juga sudah mewakilkan bro! Cek gi dot...

CSS Color Palette ExtractorMasukan file CSS ke dalam kotak, lalu tekan tombol Extract colors. Secara otomatis maka hanya kode warna yang akan muncul.

Web Color PaletteSemua kode warna ditampilkan dengan aturan yg ada. Dapat tersimpan langsung tepat di bagian footer (bawah) dengan cara di klik-klik.

Color Palette GeneratorTerdapat kolom RGB, HSL & Hex guna bermain-main dengan kode warna. Keren...

Colorist PaletteMaaf demonya tidak ada, tetapi silahkan download saja langsung. Karena yg satu ini perlu kalian miliki. Drag and drop image bro ;))

COLOR SCRUB PALETTEKeren juga metode tools ini, dengan meng add links, CSS, XML, & etc warna yg tergenerate akan menghasilkan hex, rgb, or etc.

Spectral PalettesIni lebih enak, kita dapat langusung membuat class name dan kode warna hex. Yang mana kode hasil generate akan menghasilkan CSS and SASS :-bd

UPDATE:
https://github.com/taitems/CSS-LESS-SASS-Variable-Scraper
Demikian saja sharing and caring dari gue, semoga bermanfaat yah :)
Happy tools \m/

How to Make Google URL Shortener use jQuery URL Shortener

Beben Koben anu ganteng kalem tea mau memberikan informasi baru dari artikel add google url shortener api for blogger. Pada artikel tersebut gue sudah memberikan cara bagaimana agar layanan pemendek link kepunyaan embah google goo.gl bisa berjalan di template blogger. Hack script tersebut tidak lain adalah karya master Ravishanker Kusuma. Kebetulan AA 'ben menclok ke web site technology blog hayaGeek ternyata ada update dari cerita sebelumnya bro ;))
Dengan menggunakan JavaScript murni sudah dapat membuat google URL shortener. Kini dikombinasikan dengan jQuery script yang sudah tentu memberikan pelebaran fungsi :D Penambahan yg terjadi meliputi memendekan & memanjangkan link. Satu yg keren adalah adanya tambahan fitur get URL info dengan 2 opsi (analytics click, analytics top strings) Keterangan informasi URL dibuat dengan hasil berupa jSON.

Untuk lebih jelas dan gamblang silahkan sobat coba saja pada halaman demo!

goo.gl/kxq3yd

Walaupun tidak sekomplit dengan info kepunyaan goo.gl tapi tetap priktiw kan bro :P Kalau bro-bri ingin punya pages HTML seperti itu, tinggal buat saja ;)) Syarat utama agar lebih privasi, bero harus memiliki Google API Key. Read here goo.gl/DKKpg Saya tahu kalian pasti males mebuatnya kan :)) =))

{
   kind: "urlshortener#url",
   id: "http://goo.gl/DlGCt",
   longUrl: "http://beben-koben.blogspot.com/",
   status: "OK",
   created: "2013-05-24T06:08:44.533+00:00",
   analytics: {
      allTime: {
         shortUrlClicks: "0",
         longUrlClicks: "2"
      },
      month: {
         shortUrlClicks: "0",
         longUrlClicks: "0"
      },
      week: {
         shortUrlClicks: "0",
         longUrlClicks: "0"
      },
      day: {
         shortUrlClicks: "0",
         longUrlClicks: "0"
      },
      twoHours: {
         shortUrlClicks: "0",
         longUrlClicks: "0"
      }
   }
}

Menyedihkan sekali info link saya :-s Koben sudah buatkan untuk fans setia Kobeners dimanapun berada, untuk mengunduh JQuery URL Shortener.htm Silahkan

Ekstrak files tersebut, bukalah JQuery URL Shortener.htm pada notepad. Cari script dengan tulisanjQuery.urlShortener.settings.apiKey='YOUR-GOOGLE-API-KEY';Letakan google API key di sana.
In github: https://github.com/hayageek/jQuery-URL-shortener
Happy coding \m/

Only Some Information Is Not a Tutorial

Setelah melihat-lihat ternyata lumayan banyak juga update informasi dari Embah Google mengenai beberapa layanan dan produknya. Pertama-tama adalah info automatically share your blog posts to google+ [via Blogger Buzz] Secara serentak setelah diaktifkannya tombol berbagi ke halaman google+, google sudah menceklis secara default pada Settings ► Google+ ► Automatically share after posting Lantas apa perbedaan berbagi otomatis ini dengan Share yg ada pada bagian Posts! Jika kita mau melakukan share to google+ page dengan yg ada pd Posts sesion, maka kita melakukan Add a Comment secara manual. Namun yg otomatis sudah langsung mengambil cuplikan head lines post blog kita (Jika snippet meta tag microdata sudah benar)

Berita selanjutnya datang dari layanan Google Trends. Google sudah membuatkan lebih banyak kateogri dengan mengurutkannya berdasarkan top charts. Open this for trying Google Trends Top Charts Bagi user pengguna chrome browser, info enak berikut akan mempermudah kalian dalam mengedit-ngedit photo the new google+ photo editor
Sedikit dari dunia advertiser cek gi dot bro google affiliate network Yang terakhir adalah berita hangat Google+ Embedded Posts. Ternyata google tiodak mau kalah dengan twitter & facebook ;)) You can read here google+ embedded posts
Contoh

Jika berupa links, maka akan terbuka langsung pada tujuan Beben Koben google+ Google+ badge pun tidak luput dari pembaharuan bro, tengok saja ;)

Jika sobat sudah memasang script//apis.google.com/js/plusone.jsjangan dipasang lagi, tinggal tuliskan saja syntax HTML di area postingan! Coba masukan link post google+ page ke dalam kotak tools sederhana berikut

Bonusnya ini saja oke, coba ganti tulisan yg ada di kotak

query = kata kunci image yg dicari
beben-koben.blogspot.com = blog kalian

Extra bonus:

cdpn.io/vetCA - cdpn.io/xIbnz - cdpn.io/ImfCJ - cdpn.io/rKuCg - cdpn.io/gkwzF - cdpn.io/Bimhg - cdpn.io/rnvkG - cdpn.io/cojza - cdpn.io/mtgLK - cdpn.io/yuzvq - cdpn.io/yIcoH - cdpn.io/wklrG - cdpn.io/jmkfK - cdpn.io/epwdH - cdpn.io/qLHAB - cdpn.io/Fdnlz - cdpn.io/dykhL - cdpn.io/ivtmJ - cdpn.io/inluv - cdpn.io/rzynD
Semoga bermanfaat informasinya :)
Happy blogging \m/

Free Download StackEdit Markup Editor Latest

Berbicara tentang markdown editor memang sudah bertebaran artikel yang tersedia. Satu contoh phenomenal adalah Emmet. Gue sekarang sudah menemukan markdown editor paling anyar. StackEdit adalah, open-source markdown editor berdasarkan pageDown, markdown library digunakan oleh stack overflow dan stack exchange sites lainnya. Kita dapat mengelola beberapa dokumen markdown documents online atau offline, mengekspor dokumen dalam markdown atau HTML dan memformatnya menggunakan template, synchronize dokumen markdown di cloud.
Kita juga dapat mengedit dokumen markdown yang ada dari google drive, dropbox dan hard drive lokal. Kita dapat mempublikasikan dokumen markdown di gitHub, gist, google drive, dropbox atau SSH server, berbagi link ke dokumen yang membuat markdown dalam tampilan yang bagus.

Sebelum ke acara berbagi apps stackedit, ada baiknya sobat-sabit melihat koleksi tentang markdown editor yg pernah ada sebelumnya. Pemanasan dengan model syntax baru yang memang banyak di gunakan pada mark-down editor!

Online Markdown Editor Dillinger

Markdown Editor by Jon Combe

Ternyata banyak juga bro tools editor markup yang beginian! Kalau di share satu per satu gak akan habis 1 hari buat mosting. Tengok coba nih 78 Tools for Writing and Previewing Markdown Tapi dari segitu banyak belum ada yg namanya stackEdit markdown editor :-" yg paling komplit and full stylish bin keren mak nyus.

Live Demo	Resource
benweet.github.io/stackedit	github.com/benweet/stackedit

Agar berjalan mulus stackedit markup editor ini, klik navigasi menu pojok kiri atas dan scroll ke bawah perhatikan tulisan Related projects. Itulah links download proxy ke berbagai web tujuan! Gue jg kagak ngerti sih :D Silahkan sobat explore sendiri sajah :))

Bonus link demo pilihan AA Koben dari codepen.io

cdpn.io/nzbEI | cdpn.io/gdpzF | cdpn.io/mBrvn | cdpn.io/reAKn | cdpn.io/LfmGF | cdpn.io/drxcj | cdpn.io/hvcka | cdpn.io/fthBl | cdpn.io/jKHoh | cdpn.io/HnCEl | cdpn.io/wFkGp | cdpn.io/KphdG

pacinispace.blogspot.com/2013/07/write-in-markdown-stackedit-with-custom.html
Happy coding \m/

From me for you Bro...

Berawal dari sebuah konsep mengenai Social Feed (iOS7) drbl.in/hWnE, kemudian direalisasikan oleh David Leininger menjadi begini cdpn.io/xwErb iOS7 zoom-out side nav reveal. Efek zoom yang dihasilkan dari kreasi tersebut mungkin mirip dengan avgrund lab.hakim.se/avgrund a modal UI concept karya master Hakim El Hattab! Masih ingat dengan artikel berikut meny iframe with function onload event.Master Koben :D sudah berkreasi dengan meny dijadikan shortcut link usefully yang akan terlihat pada sebuah iframe tanpa harus membuka link open a new tab? Sekarang gue mau berbagi iOS7 zoom-out side nav reveal ditambahkan feature yang ada pada meny iframe with function onload event ;) Di sini AA hanya membuat 3 buah tools saja yah: HTML Editor - Color Picker and Phrase or Convert
Screenshot before & after click button iOS7 Zoom-out Side Nav

Before	After

Including Third Helpfully Tools

Pada demo sumber tombol kotak yg berada di pojok kiri atas berukuran height: 28px; - width: 28px; nah sama AA sudah dibikin panjang agar mempermudah dalam melakukan click²

Tombol tersebut berguna untuk maximize and minimize (zoom out & zoom in) Jadi jika sobat tidak terbiasa dengan tampilan kecil, tinggal klik saja tombol itu! Silahkan di download aplikasinya

Ekstrak terlebih dahulu File.zip kemudian buka index.html dan taruh address tsb di browsingan kalian. Pokoknya di eksplore saja sendiri bagaimana fitur yg tersedia. Semoga bermanfaat :) Capek...capek... #:-S
Happy coding \m/

Make Sitemap for Blogger by Category Updated

Mungkin agak janggal AA Koben mau berbagi artikel mengenai sitemap for blogger? Blog sudah berdiri tahunan kok baru memosting tutorial membuat sitemaps (daftar isi) blog :D Eit, tapi entar dulu, site-map kali ini bisa jadi penyempurnaan dari widget daftar isi tabulasi untuk blogger karya master Taufik Nurrohman. Karya dia menerapkan teknik pemanggilan maxResults: 99999, tanpa ada batasan! Jadi jika ada postingan yang berjumlah 100 akan terbuka langsung semua.Bagaimana halnya jika ada tutorial yg bisa membuat sitemap berdasarkan kategori tersebut akan tetapi kita bisa mengatur jumlah post yg akan ditampilkannya! Lebih dahsyatnya lagi, akan ada tombol Prev and Next juga :)) Pokoknya keren :-bd

Demo Sitemap for Blogger

Mau...!!!

Gue tidak akan sharing yg susah-susah bro, bikinnya juga cetek :D Datangi halaman ini Duy Pham Blog scroll ke bawah dikit, taruh deh link blog kalian pada kotak yg bertuliskan Địa chỉ blog, kemudian pencet tombol Cetek kan...wuekekekekkk :P
Nih bonus masih karya master Duy Pham:
Membuat Thread comments dengan penanaman tombol like blog.duypham.info/2012/12/them-nut-like-cho-thread-comment.html
Menampilkan avatar di samping judul postingan blog.duypham.info/2013/04/hien-thi-avatar-nguoi-viet-bai-ben-canh-tieu-de-bai-viet.html
Ada yg kelupaan, agar terlihat keren list category, pakek ini lab.hakim.se/scroll-effects karya master Hakim el-Hattab
Happy blogging \m/

Modifications your Pagenav Blogger with This Style

Entah apa maksud dan tujuan dengan beberapa istilah berikut ini: snippet, tweak, forked, modification and bla.bla..bla... Satu yang pasti hasil jadi kode dari seorang kreator bisa kita edit sana-sini sehingga cocok diterapkan ke dalam blog tercinta :-< Seperti yang telah gue sharing di from me to you tempat yang memberikan jasa kepada orang-orang untuk berkreasi secara full stylish :D Seabrek code's dengan live preview dapat kita saksikan dan tentunya kita comot ;))
AA Koben akan memberi contoh memodifikasi kode kepada kalian!
Original coded cssdeck.com/labs/full/ufct35ys5t

Demo & Download Resource

Hanya melakukan perubahan warna, padding, margin and etc lumayan nyut-nyut #:-SBelum lagi urusan memasukannya ke dalam blog, harus edit² lagi tentunya agar terlihat sreg. Gue akan beri source kode, coba sama sobat pasangkan ke dalam template blog. Gantikan gaya PageNav blog sobat agar menjadi seperti ini

Demo & Download Resource

Setelah melihat 2 sources diatas, apakah engkau teringat akan sesuatu? Hal yang dahulu belum dapat dilakukan oleh CSS sekarang sudah bisa?? Ini dia effect LavaLamp use CSS3. Mirip² dengan hal itu kan... Koben sudah pilihkan beberapa source keren mengenai lava lamp effect using css3. CobYat pasYti ke SeungSeum dEch =))

cdpn.io/AxjIr | cdpn.io/GsIxk | bit.ly/1aetVcn | bit.ly/1aetXRv | bit.ly/1aetZZm | bit.ly/1aeu27K | cdpn.io/xamAC

Happy coding \m/

Some Little from me for You

Jika sobat kepengen memiliki menu navigasi dengan konten link-link berjejer sangkin banyaknya, maka lihatlah postingan AA yang berjudul improve skill css anymore with css1k. Berpuluh-puluh demontrasi bisa kalian lihat hanya dengan ukuran CSS file sebesar 1K! Tinggal sedikit sentuhan kreatifitas agar sreg ditanamkan ke dalam blog tercinta :x Kode CSS sedikit, namun mark-up HTML lumayan :D Jadi kita bisa menyebutnya menu reuteung ala CSS1K. Berikut contoh menu-reuteung (edit dikit sana-sini) jsfiddle.net/bebenkoben/gEBrX/show Web jsFiddle dashboardnya diperbaharui ;)) Links resource keren punya sebenarnya sudah banyak tersedia! Tinggal urusan mendapatkannya, cocok apa tidak, mudah apa sulit dan faktor X lainnya ;)

Berikut beberapa links source pilihan

cdpn.io/izswy, cdpn.io/AepGb, cdpn.io/xzjGB, cdpn.io/xgqtc, cdpn.io/KJkEs, cssdeck.com/labs/full/ufct35ys5t, cssdeck.com/labs/full/8852y8sb, cdpn.io/Ayaqv, cssdeck.com/labs/full/forms-validation-styling-semantics, bit.ly/1a8NR07, bit.ly/1a8O2si & bit.ly/1a8ObvR

Coba sobat datangi link-link tersebut, pasti bakalan seru. Kalau merasa kurang besok lagi saja. Berikut bonusnya dari AA membuat form search atau kotak pencarian bergaya hover.

#search input[type="text"]:hover {width: 208px;border:1px solid #CCC;}
#search input[type="text"] {
background: #FFF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqI-JWKz8Au3IsPZ-MgyxEBEX09u_gS27LUrdZV3m08Sp9yF4qmnSsc6Yt9yZwp6E49-3cVNpVirksbe7CWuwSOy4whL4xGkEViWOuy7dPm8FpIleH6zmBwA2aD_yxUV3ee0gomRLU6nWw/s0/search_32x32-32.png")no-repeat center left;
font-size: 13px;
color: #222;
width: 0px;
padding: 10px 0px 11px 35px;
z-index: 9;
border: 1px solid #FFF;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
margin-bottom: -1px;
position: fixed;
top: 0px;
right:20px;
}

Markup HTML<form action="http://YOUR-BLOG.blogspot.com/search/" id="search" method="get" target="top">
<input name="q" placeholder="Query here..." size="40" type="text" />
</form>Happy coding :)
Bbn cheers \m/

Make Share Links for Twitter, Facebook and Google Plus

Keberadaan web jejaring tidak dapat dielakan dalam rangka menyebarkan links, terutama link web-web favorit! Dengan adanya share links (berbagi link) kurang-lebihnya akan dapat mendongkrak popularitas sebuah weblog ;) Gue AA Koben mau berbagi tutorial membuat strong social buttons untuk 3 web jejaring terkenal, yaitu twitter, facebook dan google+ Kenapa hanya 3 macam? Karena tiga biji juga full stylish bro b-) :)) Langkah pertama yang mesti kalian lakukan adalah membuat gambar kecil dengan ukuran 40px x 20px Kalau sudah buat gambarnya, baru deh ke acara bumbu CSS & HTML.
ScreenshotGambar dengan tulisan Tweet this adalah efek hover yg dihasilkan! Ketika tidak di sorot, maka akan hanya terlihat Tweet this, Like this and Plus this :P

.share-circle {
width: 75px;
height: 75px;
position: relative;
border-radius: 50%;
border-width: 10px;
border-style: solid;
float: left;
}
.share-circle:not(:last-child) {
margin-right: 5px;
}
.share-circle span {
width: 75px;
height: 75px;
display: table-cell;
vertical-align: middle;
text-align: center;
line-height: 18px;
font-weight: 800;
font-size: 17px;
color: #FFF;
font-family: 'Open Sans', sans-serif;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
transition: line-height 300ms ease-out;
}
.share-circle:hover span {
line-height: 40px;
}
.share-circle a {
position: absolute;
display: block;
height: 23px;
top: 31px;
transition: opacity 300ms ease;
opacity: 0;
}
.share-circle:hover a {
opacity: 1;
}
.facebook {
border-color: #30497e;
background-color: #3B5998;
}
.facebook:hover {
background-color: #4164ac;
}
.facebook a {
left: 22%;
width: 40px;
background: url('FACEBOOK-IMAGE_40px x 20px') no-repeat top left;
}
.twitter {
border-color: #3d83d3;
background-color: #4099ff;
}
.twitter:hover {
background-color: #4fa0fe;
}
.twitter a {
left: 22%;
width: 40px;
background: url('TWITTER-IMAGE_40px x 20px') no-repeat top left;
}
.plus {
border-color: #ab1e23;
background-color: #C92228;
}
.plus:hover {
background-color: #d02f35;
}
.plus a {
left: 22%;
width: 40px;
background: url('GOOGLE-PLUS-IMAGE_40px x 20px') no-repeat top left;
}

<div class="share-circle twitter">
<span>Tweet<br/>this</span>
<a href="#" ></a>
</div>
<div class="share-circle facebook">
<span>Like<br/>this</span>
<a href="#" ></a>
</div>
<div class="share-circle plus">
<span>Plus<br/>this</span>
<a href="#" ></a>
</div>

Jadi deh, kalian tinggal sisipkan link tujuan pada syntax link yg sudah ada. Semoga berkenan :)
Resource by: cdpn.io/IizAn Bonus: cdpn.io/wpHBt
Happy coding \m/

Make Dark Accordion Navigation Menu use jQuery

Dua artikel sebelumnya kita sudah bersuka ria dengan tagging HTML pre. Sekarang gue mau mengangkat kembali tutorial yang bertemakan lumayan berjubel dibahas yaitu mengenai accordion Jika sobat searching di blog ini dengan keyword accordion maka akan ditemukan seonggok artikel full stylish seputaran informasi tersebut ;) Sumber resource memberikan judul dengan title dark navigation menu Menu itu kalau dilihat-lihat seperti accordion! Terintegrasi dengan jQuery script jika kita mau menggunakannya. Uniknya dari menu dark navigation yakni menyisipkan variabel CSS :after selector pada tagging unordered listBerikut bumbu-bumbunya...

.areaUL {
width: 200px;
box-shadow: 0 0 10px black;
margin: auto auto; /* menjadi di tengah */
border-radius: 6px;
border: 1px solid #181e26;
}
.areaUL ul {
list-style: none;
margin: 0;
padding: 0;
}
.areaUL li {
padding: 10px;
border-bottom: 1px solid #1c2029;
font-size: 13px;
color: #111;
padding-left: 35px;
font-weight: 600;
position: relative;
cursor: pointer;
}
.areaUL li:first-child {
border-radius: 4px 4px 0px 0px;
}
.areaUL li:last-child {
border-radius: 0px 0px 4px 4px;
border-bottom: none;
}
.areaUL li:after {
font-family: 'Open Sans',sans-serif;
display: inline-block;
width: 20px;
height: 20px;
position: absolute;
left: 14px;
top: 12px;
font-size: 14px;
}
.areaUL .profile:after {
content: "\2620";
}
.areaUL .messages:after {
content: "\2709";
}
.areaUL .settings:after {
content: "\270e";
}
.areaUL .logout:after {
content: "\25ba";
}
.areaUL .submenu {
display: none;
background: #212930;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
.areaUL .submenu.expanded {
display: block;
}
.areaUL .submenu ul {
padding: 0;
margin: 0;
}
.areaUL .submenu li {
background: transparent;
border: none;
color: #778ea1;
margin-left: 10px;
padding-left: 20px;
}
.areaUL .submenu li:after {
left: 5px;
color: #616b7c;
content: "+";
}

jQuery call<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$(".menu>li").click(function(){
$(this).next().slideToggle(500);
});
});
//]]>
</script>Markup HTML

<div class='areaUL'>
  <ul class='menu'>
    <li class='profile'>TITLE 1</li>
    <div class='submenu'>
      <ul>
        <li>Sub Title 1.1</li>
        <li>Sub Title 1.2</li>
        <li>Sub Title 1.3</li>
      </ul>
    </div>
    <li class='messages'>TITLE 2</li>
    <div class='submenu expanded'>
      <ul>
        <li>Sub Title 2.1</li>
        <li>Sub Title 2.2</li>
        <li>Sub Title 2.3</li>
      </ul>
    </div>
    <li class='settings'>TITLE 3</li>
    <div class='submenu'>
      <ul>
        <li>Sub Title 3.1</li>
        <li>Sub Title 3.2</li>
      </ul>
    </div>
    <li class='logout'>TITLE 4</li>
  </ul>
</div>

FINISH.
Resource by: cdpn.io/ILegs
Bonus:
www.jacklmoore.com/notes/jquery-accordion-tutorial
designshack.net/tutorialexamples/cssaccordion/index.html
Happy coding \m/