Tutorial Blog for Stylish Blogger

Make Style Hover in Title Post

noreply@blogger.com (Beben Koben) — Mon, 13 Feb 2012 02:36:00 +0000

Trik hover memang tidak ada habisnya untuk dikreasikan. Mungkin para sobat juga memperhatikan ada kejadian aneh jika menyorot disana-sini pada blog aku :P Itulah trick hover sederhana yg aku pasangkan ;)) Coba saja deh kalian cari dengan keyword hover pada kotak pencarian ;) Sekarang Koben akan berbagi sedikit hover trick diseputaran tagging judul postingan blog kalian! Atribut yg dipakai bisa h1, h2, h3 atau lainnya, yang terpenting nanti kalian bisa memasukan bumbu²nya tidak salah ya :) Cek gi dot... Hover here dude!Read moreKode CSS#post h1{ padding: 0px; position: relative; background: #888; cursor: pointer; text-decoration: none; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } #post h1:hover{ background: #eee; } #post h1:hover span{ background: #888; color: #FFF; opacity: 1; } #post h1:hover a{ color: #000; } #post h1 a{ margin-left: 8px; color:...

Dapatkan artikel tutorial pilihan lainnya dan penuh gaya hanya di Prodigy of Head dan toolsnya juga di Ben-Tools.

Tricks Search and Secret by Google II

noreply@blogger.com (Beben Koben) — Fri, 10 Feb 2012 09:49:00 +0000

Koben akan mencoba lebih melebarkan lagi apa yang ada pada postingan Tricks Search and Secret by GoogleUpdate Kenapa saya coba lebih beberkan, karena hampir sebagian besar pengguna internet di dunia pasti menggunakan mesin pencari (search engine) guna mencari sesuatu. Tak ayal kita sering mendengar celetukan² tanya saja sama google, googling, embah google, paman google dan sebutan lainnya! Apakah hasil pencarian bakal sesuai dengan harapan kita! Kemungkinan banyak melenceng dari harapan apa-apa yg kita inginkan :) Oleh karenanya disini mari kita mainkan fitur-fitur google selain web search-nya yg sangat membantu. Mungkin jauh dari komplit list yg gue buat. Tapi setidaknya dapat melengkapi list kepunyaan kalian ;)Layanan Utama GoogleLayanan UtamaURLGoogle Web Searchhttp://www.google.comGoogle Answershttp://answers.google.com/Google Basehttp://base.google.com/Google Blog Searchhttp://blogsearch.google.com/Google Bookmarkshttp://www.google.com/bookmarks/Google Books...

Dapatkan artikel tutorial pilihan lainnya dan penuh gaya hanya di Prodigy of Head dan toolsnya juga di Ben-Tools.

Change Color Fonts & Background Use jQuery

noreply@blogger.com (Beben Koben) — Fri, 10 Feb 2012 04:33:00 +0000

Masih ingat bagaimana cara membuat buku tamu serelek jebret alias hide show! Terus apakah sobat masih ingat dengan cara gimana membuat warna background berubah, dan bagaimana pula mengganti warna tulisan pada daerah postingan blog! Kesempatan sekarang Beben Koben si bloglang anu ganteng kalem tea akan berbagi cara membuat itu semua tiga trick menjadi satu, mengganti background, merubah warna huruf post, dan ditampilkan dengan gaya show/hide. Trik jQuery plugin tentu membutuhkan script jQuery :) Penjelasan singkat tentang penerapan seputar plugin menggunakan jQuery script ke dalam blog Simple Explanation of the jQuery Plugins. Kalau memang berminat memasang trick berikut, silahkan coba lihat dulu demonya yah (lihat pojok kiri atas) ;;)Kode CSS#options{ position: absolute; left: -3px; top: 50px; float: left; background: #f3f2f2; width: 160px; height: 245px; z-index: 1; display: none; } #options_button{ position: absolute; left: -2px; top: 50px; width: 30px; height: 30px; ...

Dapatkan artikel tutorial pilihan lainnya dan penuh gaya hanya di Prodigy of Head dan toolsnya juga di Ben-Tools.

2 Master With The Great Posted

noreply@blogger.com (Beben Koben) — Thu, 09 Feb 2012 06:15:00 +0000

Postingan trik seputaran hover sekarang hanya untuk memacu skill kalian dalam bermain dengan kode CSS3. Gunakan daya kreasi, imajinasi, kemampuan dalam memadukan kode-kode yang sudah ada dengan code-code buatan kalian. Jangan terpaku pada kode yg sudah jadi. Ubah-ubahlah code tersebut sehingga kalian paham yg terjadi dengan perubahannya :D Buka halaman berikut terlebih dahulu guna melihat contoh efek yg dihasilkan dari hover trick sederhana ini!<h1 align='center'>Hover coba yaaa...</h1><div class='lampu'></div><style>.lampu{width:150px;height:150px;margin:0 auto;background:#000 url(http://1.bp.blogspot.com/-33L8g-ansYo/TxgekDz6C8I/AAAAAAAACbg/2eTZE42sZFU/s1600/lampu.png) no-repeat -150px 0;border-radius:75px}.lampu:hover{background:#000 url(http://1.bp.blogspot.com/-33L8g-ansYo/TxgekDz6C8I/AAAAAAAACbg/2eTZE42sZFU/s1600/lampu.png) no-repeat 0 0;cursor:help;box-shadow: 0px 0px 20px #ff5}</style>Kira-kira begitu contoh efek simpel...

Dapatkan artikel tutorial pilihan lainnya dan penuh gaya hanya di Prodigy of Head dan toolsnya juga di Ben-Tools.

Make Search Box berGaya Google+

noreply@blogger.com (Beben Koben) — Wed, 08 Feb 2012 02:36:00 +0000

Sejak menampilkan artikel membuat kotak pencarian Koben perhatikan ternyata keberadaannya memang harus ada pada setiap situs! Mengapa saya bisa berpendapat begini karena walau sebuah site tidak memberikan fasilitas ini pada web/blognya, tetap saja bisa memakai jasa search engine guna mencari konten! Kalian bisa simak disini Tricks Search and Secret by Google & Believe it (Google) if You a True SEO! Panjang lebar kesana kemari sebenarnya Beben Koben si bloglang anu ganteng kalem tea akan kembali berbagi cara membuat kotak pencarian (search box) seperti yg ada pada home page google+ Lihat disana pasti ada kotak pencarian buat youtube, sisi kanan monitor anda :-/ Seperti itulah box pencarian yg akan Koben share sekarang ;;)CSS3 Code Search Box Ala Google+.gigirSearch { background: whiteSmoke; border: 1px solid #ddd; border-right-width: 0; height: 30px; padding: 5px 10px; position: fixed; right: 0px; top: 100px; width: 50px; overflow: hidden; z-index: 999999; border-top-left-radius:...

Dapatkan artikel tutorial pilihan lainnya dan penuh gaya hanya di Prodigy of Head dan toolsnya juga di Ben-Tools.

Good Template and Expanding Vertical Navigation Menu

noreply@blogger.com (Beben Koben) — Tue, 07 Feb 2012 06:17:00 +0000

Dari pada tidak memosting sama sekali, Koben akan berbagi informasi sedikit dari Dunia Template dan trick mengenai hover menggunakan atribut CSS3. Tanpa banyak basa-basi gue mulai saja hasil menemukan 1 buah template yang menurut saya full stylish b-) Home This is a simple animated vertical navigation menu created by Design Shack. Click here to return to the tutorial.PortfolioWebPrintOtherAboutHistoryMeet The OwnersAwardsContactPhone Email Location .v_nav{background:#f0f0f0;width:200px;margin:0 auto}.v_nav h4{border-bottom:1px solid rgba(0,0,0,0.3);border-top:1px solid rgba(255,255,255,0.5);font-size:15px;font-weight:500;padding:7px 12px;margin:0;background:#a90329}.v_nav h4:hover{background:#cc002c}.v_nav h4 a{color:#fff;display:block;width:200px}.v_nav ul{background:#DEB279;font-size:13px;line-height:30px;height:0;list-style-type:none;overflow:hidden;padding:0;margin:0;-webkit-transition:height 1s ease;-moz-transition:height 1s ease;-o-transition:height 1s...

Dapatkan artikel tutorial pilihan lainnya dan penuh gaya hanya di Prodigy of Head dan toolsnya juga di Ben-Tools.

Varian Form Action, Drop Down, Select Navigation

noreply@blogger.com (Beben Koben) — Mon, 06 Feb 2012 03:13:00 +0000

Keindahan dalam bermain bahasa HTML tergantung kita bisa memadukan satu atribut dengan yang lainnya. Karena segala variabel sudah berada pada web directory khusus. Berlatih dengan tekun kunci utama dalam melatih skill & kemampuan untuk mendapatkan seni indah dalam bermain bahasa HTML :) Kenapa Koben bilang begitu, karena dalam sesi postingan kita dituntut untuk dapat bisa menghasilkan gaya penulisan yang membuat pemabaca terheran-heran :D Contoh bermain dengan bahasa HTML untuk memperindah gaya tulisan kita dapat kalian lihat Fun Fun Deh ;) Teknik penulisan artikel postingan berperan penting guna membangun kabisa kalian agar terbiasa, hapal, mengerti seluk beluk bersenang-senang dalam berblogging :P Teknik penulisan dalam menulis artikel dengan metode technique writed posted use CSS. Bagaimana membuat tabel agar cuamik terlihat! Pada kesempatan ini Beben Koben si bloglang anu ganteng kalem tea akan sedikit berbagi teknik menulis sekitaran form action, drop down di area postingan. Cek...

Dapatkan artikel tutorial pilihan lainnya dan penuh gaya hanya di Prodigy of Head dan toolsnya juga di Ben-Tools.

Editor Online Like Photoshop, Free Software Edit for Image

noreply@blogger.com (Beben Koben) — Sun, 05 Feb 2012 00:20:00 +0000

Mau tidak mau untuk menjadi seorang blogger yang profesional dibutuhkan beberapa kemampuan dalam membuat, mengelola, menulis, mengedit, atau hal lainnya. Bagi seorang designer khususnya harus mempunyai keahlian dalam edit gambar. Nah bagaimana dengan kita yg memang diharuskan mengedit gambar untuk dimasukan ke dalam postingan kita! Beberapa alat familiar sering dipakai adalah Photoshop & CorelDRAW. It's digital imaging wherever you are Photoshop.com and Corel Corporation. Namun bagi yg susah dengan kode/perintah dengan ke-2 tools tersebut, kalian juga bisa menggunakan jalan instant pakai 35+ Free Online Image Editing Tools :D Dikarenakan Koben si bloglang anu ganteng kalem tea biasa memakai potocop, maka artikel sekarang gue mau berbagi tools editor online mirip dengan photoshop. Urutan pertama jatuh kepada photo editor online by pixlr.comPixlr.com Edit Image OnlineSumo Paint Online Image EditorSplashup Image Editor OnlineMungkin segitu saja web tools online edit-mengedit yang mirip...

Dapatkan artikel tutorial pilihan lainnya dan penuh gaya hanya di Prodigy of Head dan toolsnya juga di Ben-Tools.

Please Welcome Undercover Blog for All of You

noreply@blogger.com (Beben Koben) — Sat, 04 Feb 2012 08:49:00 +0000

BismillaahirrahmaanNirrahiim Beben Koben si bloglang anu ganteng kalem tea resmi meluncurkan 1 blog lagi. Dengan begitu jumlah blog yang saya kelola menjadi 4 blog. Dengan diluncurkannya blog ini, diharapkan sobat-sobat Koben bisa melatih terus skill, kabisa, kemampuan and tetek bengek lainnya :D Secara khusus blog ini dibuat untuk yang berbasis blogspot.com Mungkin tidak aneh lagi bagi blogger yg suka bermain dengan tempate NEO. Blog ini tidak akan memosting apapun kecuali tools pendukung sekitaran kita bermain-main dengan kode/bahasa HTML. Mari kita langsung saja apa kelebihan dari blog baru aku :"> Please welcome:ⓤⓝⓓⓔⓡⓒⓞⓥⓔⓡ ⓑⓛⓞⓖ Aturan main dari undercover blog... Diutamakan membukanya menggunakan mozilla browse :D Kalau pakai browsingan yg lain amburadul :DSisi Kanan Blog dan KegunaanLihat Konten Blog: Masukan nama blog di form tersebut. Misalkan http://beben-koben.blogspot.com Tuliskan menjadi beben-koben saja, dilanjutkan dengan memencet tombol Jangan pakai enter [-XRecent...

Dapatkan artikel tutorial pilihan lainnya dan penuh gaya hanya di Prodigy of Head dan toolsnya juga di Ben-Tools.

Artikel-artikel Keren Gaya Full Stylish

noreply@blogger.com (Beben Koben) — Fri, 03 Feb 2012 07:17:00 +0000

Artikel sekarang merupakan hasil Koben pilih dari walking² blog & web. Article mantap guna belajar lebih dalam bahasa HTML ;) Langsung saja pada postingan pertama jatuh pada membuat tabs dengan jQuery, hasil karya @catalinred ini, diberi sedikit bumbu sentuhan CSS3 CSS3 & jQuery folder tabs. Artikel kedua merupakan updatean postingan gue dulu tentang CSS3 Image Styles Sesuatu Banget, sekarang sudah ada fresh posted CSS3 Image Styles Part 2 by @nickla Lanjut bos mari, opsi kita bermain Fun Fun Deh lihat ada permainan membuat efek marquee, dan sekarang kita dapat membuat marquee and blink² efek dengan memakai atribut CSS 3, cek gi dot Alternatives to <Marquee> and <Blink> tags. Teman kita membuat satu form action guna menggenerat emoticon teranyar buat chattingan bagi facebooker CODE Facebook Chat Text Emo Generator :-bd Generator yg akan menghasilkan deretan huruf menjadi emotikon di chatingan facebook dengan beragam warna ciamik punya. Coba saja lah buka facebooknya ;))...

Dapatkan artikel tutorial pilihan lainnya dan penuh gaya hanya di Prodigy of Head dan toolsnya juga di Ben-Tools.

Make Link Effect Rainbow Without Hover linkcycle

noreply@blogger.com (Beben Koben) — Thu, 02 Feb 2012 07:13:00 +0000

Efek rainbow/pelangi yang sering kita jumpai ketika melakukan hover pada link, akan berkedip-kedip dan mengeluarkan eferk warna berganti-ganti. Blogger Indonesia banyak juga yg memakai trick ini ;)) RainbowAnchor nama javascriptnya. Bagaimana jadinya jika sekarang kita buat java-script Rainbow Anchor tanpa disorot terlebih dahulu tetapi bisa menampilkan variabel warna dan berkedip-kedip pula di link yg telah kita tagging dengan atribut class :-" Untuk melihat demo silahkan sobat memakai HTML Editor :D (jangan lupa pencet tombol Clear dulu, biar kode yg ada di kotak sebelah kiri musnah) ;) Berikut ramuan javascript linkcycle rainbow anchor.<script type="text/javascript"> //<![CDATA[ //www.JavaScript-FX.com function getColor(start,end,percent){function hex2dec(hex){return(parseInt(hex,16));} function dec2hex (dec){return(dec<16?"0":"")+dec.toString(16);} var r1=hex2dec(start.slice(0,2)),g1=hex2dec(start.slice(2,4)),b1=hex2dec(start.slice(4,6));var...

Dapatkan artikel tutorial pilihan lainnya dan penuh gaya hanya di Prodigy of Head dan toolsnya juga di Ben-Tools.

Believe it (Google) if You a True SEO!

noreply@blogger.com (Beben Koben) — Tue, 31 Jan 2012 11:45:00 +0000

Si bloglang anu ganteng kalem tea Beben Koben menaruh rasa salut bagi para pemikir yang berpikir secara serius (sungguh-sungguh) Tak ayal sesuatu yg memang tiap hari kita temukan namun tidak kelihatan fungsinya! Ternyata benar adanya jika melakukan sesuatu itu harus tuntas terlebih dulu baru kita bisa berpindah ke urusan lainnya. Terinspirasi dari bacaan gue Tricks Search and Secret by Google, Koben mau berbagi pada pelancong setia blog ini sedikit pemaparan tentang bagaimana cara mengetahui blog/web kita di mata search engine google! Sebetulnya penjelasan sekarang sudah terpampang jelas ada di google bila sobat jeli ketika kita melakukan searching suatu keyword, maka pada footer google akan terlihat beberapa keterangan baik berupa kata², link atau yg lainnya :-/ Biar lebih jelasnya mari kita berpraktek ria ringan sejenak :D namun tetap serius dan santai dalam memahami ;) Open this link, wait opened until full 100% tutorial blog Setelah terbuka 100%, scroll ke paling bawah halaman...

Dapatkan artikel tutorial pilihan lainnya dan penuh gaya hanya di Prodigy of Head dan toolsnya juga di Ben-Tools.

Prakter Ria CSS3 Gaya Bloglang

noreply@blogger.com (Beben Koben) — Tue, 31 Jan 2012 05:37:00 +0000

Semakin ramai saja para developer membuat kreasi dengan hadirnya feature CSS3 ini :-bd Kali sekarang Koben sang bloglang sejati akan berbagi hasil bertualang dan menemukan trick-trick keren dari para kreator keren punya :D Menurut saya keren belum tentu menurut kalian kan ;)) Oke kita langsung saja mulai trik yang pertama yaitu membuat tombol download keren memakai animasi efek Code an Awesome Animated Download Button With CSS3 Mungkin ada baiknya sobat melihat juga artikel aku dalam membahas variety demo and download button ;) This is original article come from http://designshack.net/articles/css/downloadbutton/ Untuk melihat hasil ramuan kreasi CSS berikut, sobat bisa gunakan tools HTML Editor. Sekalian belajar cara memakainya toh ;) Sebelumnya silahkan sobat buka ini terlebih dahulu MBT HTML Editor. Kemudian tekan tombol Clear masukan bumbu ini<style> .button { width: 200px; margin: 40px auto; } .button a { display: block; height: 50px; width: 200px; color:...

Dapatkan artikel tutorial pilihan lainnya dan penuh gaya hanya di Prodigy of Head dan toolsnya juga di Ben-Tools.

Form Action Textarea Popup for Playing HTML Code

noreply@blogger.com (Beben Koben) — Mon, 30 Jan 2012 04:59:00 +0000

Apa kabar bloglangnisme, semoga baik² saja ya semua :) Koben si bloglang anu ganteng kalem tea akan berbagi trick hasil dari melihat-lihat blog salah satu sobat kita yakni master Roxx Share ;) Walau rada sedikit empot-empotan untuk membuka blognya secara full #:-S tapi tak apalah :D Kinerja dari trik yg aka gue beberkan sekarang mungkin mirip dengan HTML editor! Intinya melihat hasil dari kita bermain-main dengan kode HTML. Ingat ya, form action textarea ini hanya mendukung HTML CSS saja!!! Cara bermain textarea form action, kita memakai trick penulisan CSS bergaya Internal Style Sheet, diikuti dengan markup HTMLnya ;) Sebenarnya trik penulisan css bergaya internal style sheet bisa langsung diterapkan ketika kita melakukan postingan. Biar beda, unik and full stylish dong dari kebanyakan :)) b-) Struktur penulisan internal style sheet...<style>...YOUR CSS CODED VARIABLE PUT HERE...</style>Berikut rumus default form action textarea for HTML CSS.<script...

Dapatkan artikel tutorial pilihan lainnya dan penuh gaya hanya di Prodigy of Head dan toolsnya juga di Ben-Tools.

The Latest Google+ Widget for Blogger

noreply@blogger.com (Beben Koben) — Sun, 29 Jan 2012 10:30:00 +0000

Kembali menggebrak widget google+ teranyar dengan hostingan langsung dari paman google ;)) Apa kelebihan yang dimiliki oleh Google+ Gadget terbaru ini! Berikut keterangan singkatnya sobat-sabit Google + Widget ditulis dalam JavaScript dan jQuery, menggunakan JavaScript Object Notation (JSON) data interchange format, Query Language Yahoo! (YQL), HTML5 metode PostMessage dan brand new Google + API. Google + Widget disajikan dari Google App Engine, infrastruktur Google, untuk memastikan kinerja yang baik dan kehandalan layanan. still βeta version Singkat cerita kita akan mendapatkan keterangan headlines dari page account google+ kita ditambah header Add to circles! Pusing menjelaskannya, bagaimana dengan demo live cuamik berikut... pid='102652616884015548682';nbp='3';hll='yes';bkg='transparent';txt='0c0c0c';lin='498DFB';bor='f5f5f5';rad='5';pad='10';wid='290';fav='yes';hea='yes';gwi='yes';pag='yes';api='AIzaSyBQrSnirN3NMAxJLgkpsVwJBnUsuXxn1nU'; Tertarik memiliki widget google plus...

Dapatkan artikel tutorial pilihan lainnya dan penuh gaya hanya di Prodigy of Head dan toolsnya juga di Ben-Tools.

Make Simple Subscribes Box For You

noreply@blogger.com (Beben Koben) — Sat, 28 Jan 2012 04:59:00 +0000

Karena tidak ada kerjaan, Koben membuat lagi form action subscribes. Kotak berlangganan via email itu loh sob! Sebelumnya juga gue pernah membuat Beautiful Subscribes Box. Sekarang mau berbagi cara membuat kotak berlangganan sederhana, namun tetap mengusung gaya bin full stylish ;;) Sangkin sederhananya cocok bagi blogger yg suka dengan tema minimalis ;)) Global design subscribes box kali ini akan menampilkan image logo gmail didalam area input text. Kotak dan tombol dibuat murni menggunakan CSS diberi sentuhan atribut CSS3 b-)Demo Simple Subscribes Box Full Gaya .textemail{background:url("http://3.bp.blogspot.com/-CCakSxEfeIo/Tvb8sF7iveI/AAAAAAAAAUY/Yk3BSDLI8Vo/s1600/gmail.png") no-repeat scroll 5px center transparent;border:1px solid #DDD;border-radius:5px;color:#555;font-weight:bold;padding:10px 5px 10px 35px;font-style:italic;width:235px;box-shadow:1px 1px 5px #CCC inset}.button_{background-color:#f4f4f4;border-radius:5px;border:1px solid...

Dapatkan artikel tutorial pilihan lainnya dan penuh gaya hanya di Prodigy of Head dan toolsnya juga di Ben-Tools.

Make Customize Your Search Query Widget

noreply@blogger.com (Beben Koben) — Fri, 27 Jan 2012 04:59:00 +0000

Twitter oh twitter satu web jejaring sosial yang tidak diragukan lagi memang penggunanya seabrek-abrek :D Guna melayani palanggan piha twitter sendiri telah menyediakan salah satu layanannya yakni put anywhere application twitter! Bila sobat memiliki feature itu bisa memanggil tagging dengan pemanggilan yg sudah ditentukan. Contoh: @BebenKoben @Googgle @Blogger @Blogspot Gadget keren apalagi sudah banyak untuk kita ambil guna tidak ketinggalan issue-issue hangat dari para twiterrers :P Ketikan keyword "twitter" di kotak pencarian blog ini deh :)) Kebanyakan pemakai widget twitt selalu menampilkan apa² yg terjadi pada account masing² Apa jadinya jika kita ingin mengetahui gosip dengan query search sesuai kemauan kita! Hohoho bakalan seru jadinya jika kita bisa melihat twitt² yg terjadi :)) Sebagai contoh Koben memasukan query search mengenai blogger tutorial. Maka segala tagging twit yg berbau-bau query tersebut akan kelihatan. Tampak aneh judulnya, menarik, unik kita tinggal klik...

Dapatkan artikel tutorial pilihan lainnya dan penuh gaya hanya di Prodigy of Head dan toolsnya juga di Ben-Tools.

Trick CSS3 Daun Berjatuhan

noreply@blogger.com (Beben Koben) — Thu, 26 Jan 2012 04:59:00 +0000

Setelah kita bisa membuat efek salju menggunakan CSS3 dengan variabel Keyframe Animations, sekarang bagaimana membuat efek daun berjatuhan masih memakai atribut CSS3! Namun sekarang ada variable tambahan yakni CSS3 :nth-child() Selector. Dalam pemanggilan markup html nanti akan memakai span. Jadi perhatikanlah pada kode span:nth-child(). Disitulah kita akan bermain efek muncul daun mau seberapa banyak dan seberapa waktu muncul (dalam hitungan detik) :-/ Mungkin bingung karena tidak ada demonya. Sebelum masuk ke demo, sobat bila mau memakai trik ini harus menyediakan terlebih dahulu image (gambar) daun. Tentukan tinggi & lebar mau segimana terlebih dahulu. Optimal bagusnya gunakan saja resolusi 30 x 30 px saja biar imut² sob :D Inti dari trik jatuh daun memakai CSS-3 terdapat pada kita bermain dengan code @keyframes dan span:nth-child() saja!Demo CSS3 Trick Daun Berjatuhanhttp://jsbin.com/ozoxiwCSS3 Coded.daun { text-align: center; height:100%; width:100%; overflow:hidden; } .daun...

Dapatkan artikel tutorial pilihan lainnya dan penuh gaya hanya di Prodigy of Head dan toolsnya juga di Ben-Tools.

Gradient Effect is Amazing

noreply@blogger.com (Beben Koben) — Wed, 25 Jan 2012 04:59:00 +0000

Koben akan mengangkat kembali artikel mengenai linear and gradient. Lebih khusus ke gradient fiturnya sob. Suka akan datang bila memang kita mempunyai minat besar untuk menjelajahinya. Begitu pula dengan gradient ini ternyata kalau dijelajah secara seksama mempunyai nilai artistik tersendiri. Biasanya kita menambahkan embel² variabel CSS pada background secara garis besar memakai variable color, url image dll. Mulai dari sekarang cobalah sobat mencoba fitur efek gradient ini dimasukan ke variabel background! Efek perpaduan warna disatupadukan menghasilkan penampakan warna yg full stylish b-) Menilik syntax tagging yg dipakai jg cukup sederhana, yakni background atau background-image. Contoh Koben bermain-main dengan effect gradient bisa sobat lihat nih ;)) Bayangkan kita dapat membuat hal seperti itu hanya dengan beberapa kali klik saja (kan pake tools) :D Kiri kanan atas bawah mau menempatkan efek warna bisa terserah...

Dapatkan artikel tutorial pilihan lainnya dan penuh gaya hanya di Prodigy of Head dan toolsnya juga di Ben-Tools.

Tabindex Attribute HTML5

noreply@blogger.com (Beben Koben) — Tue, 24 Jan 2012 04:59:00 +0000

Hari ke hari menemukan lagi variabel HTML5 yang unik. Dari awal heran melihat atribut html-5 mengenai Placeholder sampai tingkat rumit pemakaian tag label dengan canvas menggunakan jquery. Pada artikel sebelumnya Koben juga pernah berbagi beberapa bahasa anyar dari HTML5 juga kan tidak ada aktifitas! Saya pribadi memang suka penasaran jika menemukan suatu hal baru. Ini kok bisa jadi gini, itu kok bisa begitu dan seabrek unek² dari hebatnya bahasa HTML. Kesempatan sekarang tertegun dengan bahasa HTML5 tabindex Attribute. Apakah itu? Atribut tabindex (tombol Tab pada keyboard) yang bisa kita gunakan menjadi sebuah navigasi sederhana. Didukung di semua browser utama, kecuali Safari Pemakaian tabindex cukup simpel, tinggal kita sisipkan saja dengan cara menambahkan variabel tabindex="number" Contoh pemakaian atribut tab index di dalam syntax link. Google Beben Koben Ben Tools<a href="http://www.google.com/" tabindex="1"...

Dapatkan artikel tutorial pilihan lainnya dan penuh gaya hanya di Prodigy of Head dan toolsnya juga di Ben-Tools.

Spinning and Slider CSS3 di Hari Raya IMLEK

noreply@blogger.com (Beben Koben) — Mon, 23 Jan 2012 02:59:00 +0000

Semakin susah saja menemukan artikel trik, hack atau apapun yang keren punya dari hari ke hari sob :-s Mungkin memang lagi musim paceklik ide kreatifitas nih ;)) Harus pinter² mengolah ide kalau begini keadaannya! Membuat lebih gaya lagi tutorial yg sudah ada ;) Seperti Make Spinning Effect for Image Using CSS3, dimana hasil trick ini bisa membuat image/gambar berputar-putar. Dynamic drive menawarkan tiga jenis efek Spinning icons using CSS3 transform: 60 degree spin onMouseover and onMouseout, -360 degree spin onMouseover ONLY and 360 degree spin onMouseover and onMouseout. Inti menggunakan trik spinning terdapat pada variabel CSS3 transform:rotate Dengan memakai variale tersebut kalian bisa bermain-main dengan rotate (perputaran)Demo Spinning icons using CSS3 transformBonusnya Beben Koben si bloglang anu ganteng kalem tea akan berbagi kembali mengenai Simpel Content Slider Pure CSS3. Tetapi CSS slider sekarang proses kerjanya ketika disorot :-" Sorotlah gambar yg menongol sedikit...

Dapatkan artikel tutorial pilihan lainnya dan penuh gaya hanya di Prodigy of Head dan toolsnya juga di Ben-Tools.

Membuat Kotak Pencarian Blog ala Bloglang

noreply@blogger.com (Beben Koben) — Sat, 21 Jan 2012 04:07:00 +0000

Pada blog ini sudah ada beberapa artikel cara membuat kotak pencarian (search box)! Bila dipaparkan satu per satu akan menyita waktu. Jadi kalau mau melihat-lihat silahkan saja gunakan kotak pencarian yg ada pada blog Beben Koben si bloglang anu ganteng kalem tea dengan memasukan keywords "kotak pencarian box search" Dengan hadirnya CSS3 & HTML5 tercipta juga bahasa baru dalam dunia site ini sob. Seperti beberapa contoh bahasa anyar tentang HTML 5 yg pernah Koben paparkan di artikel TiDaK AdA AkTiFiTaS :D Sekarang giliran menerapkan bahasa baru tersebut dengan penerapannya membuat kotak pencarian untuk blog dengan atribut input[type="text"] in formaction :D Koben sengaja mengarahkan hasil pencarian ke embah google, secara blogspot itu kepunyaan dia ;)) Bila ingin hasil tujuannya ke search engines lain, silahkan lihat kodenya di Three Major Search Engines for You. Kreasi search-box seakarang mengusung motto simple, full stylish and glamour =)) Sangkin sederhananya kotak...

Dapatkan artikel tutorial pilihan lainnya dan penuh gaya hanya di Prodigy of Head dan toolsnya juga di Ben-Tools.

No Activity Again... STOP SOPA!!!

noreply@blogger.com (Beben Koben) — Fri, 20 Jan 2012 06:58:00 +0000

Bagaimana dengan aktifitas blogger kalian sob! Apakah sedang dilanda blank ide atau bahkan malas update postingan! Sama jikalau begitu dengan Beben Koben si bloglang anu ganteng kalem tea ini. Gue juga lagi terjangkit virus no activity my head is blank :-?? Jalan kesana kemari sampai ke ujung tanduk tidak menemukan tutorial gaya punya :-s Banyak link web/blog keren yg tersimpan, tak ada satu pun artikel yang menggaet hatiku :D Sampai akhirnya saya mendarat di satu alamat site bavotasan. Dalam lamunan terbesit What Are You Doing, langsung acak² kategori tutorials ;)) Karena lagi ogah-ogahan jadi berbagi trick yg ringan² saja ya :) Ringan tidak sembarang ringan, my motto is full stylish, unique, different tetep keukeuh gumeukeuh harus diusung b-) Mari kita mulai saja. . .Style a Select Box Using Only CSSClik here please...Beben KobenBen Tools.gaya-select{width:200px;height:35px;overflow:hidden;background:#ddd...

Dapatkan artikel tutorial pilihan lainnya dan penuh gaya hanya di Prodigy of Head dan toolsnya juga di Ben-Tools.

TiDaK AdA AkTiFiTaS

noreply@blogger.com (Beben Koben) — Thu, 19 Jan 2012 08:39:00 +0000

Ketika tidak ada aktifitas, malah melihat-lihat resource dan membaca artikel dari web rujukan. Ternyata menarik juga berpraktek-ria dengan bahasa baru HTML5 :D Lebih simple tapi konon menurut issue kurang baik dimata search engine, jika saat sekarang kita mengaplikasikannya! Kurang paham kalau mengenai itu Koben mah :P Walau tidak mengerti secara mendalam, namun beberapa tagging sudah ada yang support ;) Banyak kegunaan bila kita mau mempelajari, mempraktekan, dari bahasa HTML 5 ini loh sob. Seperti yg saya katakan tadi, lebih sederhana dalam memakainya. Tentu dengan hal baru yg begitu mempesona dan pastinya jarang terpakai ;)) Contoh real yg sering dijumpai yaitu penanaman CSS inline pada sesi postingan. Seperti ini New!!! Trik yg sama kita lakukan ketika mau membuat huruf menjadi tebal/miring yg berada pada post editor blog.<span style='color: #F00;font-size: 11px;font-style: italic;text-decoration: blink;background-color: #333;font-weight: bold;padding: 0 3px 0 3px;border: 1px...

Dapatkan artikel tutorial pilihan lainnya dan penuh gaya hanya di Prodigy of Head dan toolsnya juga di Ben-Tools.

Trick Hover and Active Selector for Image

noreply@blogger.com (Beben Koben) — Wed, 18 Jan 2012 13:00:00 +0000

Bila sobat mencari kumpulan list mengenai CSS all about CSS tempatnya. Disana Koben selalu menyimpan link web CSS khususnya selama melakukan blog walking. Tapi bukan berarti link yang lain saya lupakan, lihat contoh beberapa links keren yg saya temukan ini sob collected lists! Bila kita melakukan walking² ke web yg ada disana saja, mungkin kita sudah bisa mengikuti apa² yg memang lagi hot & trend di dunia per-css-an :D Agar bisa melakukan hal itu, maka sobat harus mempunyai juga daftar list links yg dimaksud ;) Selalu simpan kalau menemukan link unik, aneh, berbeda dari yg lain itu ya. Jangan suka teriak tukeran link yukkk tapi tidak pernah menengok linknya :D Koben kasih deh daftar lists web CSS keren² buat kalian great lists of web CSS. Seperti web satu ini yang selalu mengeluarkan trick sekitaran CSS http://designshack.net/ Lumayan sob buat menambah perpustakaan resource ;) Design Shack belum lama memosting artikel Build a Fun Trivia Game With the CSS Active Selector! Apakah...

Dapatkan artikel tutorial pilihan lainnya dan penuh gaya hanya di Prodigy of Head dan toolsnya juga di Ben-Tools.