Tutorial Blog for Stylish Blogger

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.

Pasang Emoticon Di Threaded System Comments

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

Setelah diluncurkan dan diterapkannya threaded system comments bagi para pengguna blogger, tidak serta-merta berjalan mulus. Beberapa permasalahan timbul disana-sini jika kita memang sudah mengaktifkan threaded system comments blogger untuk customize template ini! Yang sudah terlihat jelas hilangnya beberapa hack dan juga customize kode didalam template kita :-s Seiring dengan berjalan waktu, mari kita sama-sama membenahi kekurangan dengan hadirnya fitur threaded commenting tersebut :D Contoh hack yg hilang dengan adanya feature ini yakni background komentar author jadi lenyap, tulisan diatas embed comments yg kita tulis jg hilang, dan yg paling cukup menyita perhatian kalangan blogger adalah musnahnya emoticon di dalam kotak komentar ~X( Karena Koben malas ngulik² jadi sebagai bloglang anu ganteng kalem tea, sobat² sekarang tidak perlu khawatir lagi dengan emoticon untuk komentar L-) Salah satu sobat blogger sudah membantu memecahkan masalah ini loh :D dan dia adalah master Sadeva...

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

Master Assad Syaifullah Harahap

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

Sobat masih ingat dengan blogger yang punya blog assadotcom. Kirain Koben blog intinya yang itu sob, ternyata ada dua buah blog kojo andalan dia ;)) Satu lagi blog keren kepunyaan Master Assad Syaifullah Harahap yaitu http://assadsyaifullahharahap.blogspot.com/. Bila kalian sudah pada tercengang melihat para blogger blogazine berkreasi, maka master Assad Syaifullah ini banyak berkreasi dengan temuan2 resource web keren temuan dia yg diaplikasikan ke form blogspot b-) Saya tidak akan panjang lebar, karena kalau panjang bibirnya Mister Tukul dan kalau lebar mulutnya Mister Kultu :D Sok silahkan diacak-acak sendiri, klik satu per satu buka blog racikannya, lihat keindahan kreasi seorang blogger dari kota Lampung ini! assadotcom Happy blogging \m/Dapatkan artikel tutorial pilihan lainnya dan penuh gaya hanya di Tutorial Blog for Stylish Blogger dan toolsnya juga di Ben-Tools.

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

Add Rich Snippet Markup Microdata for Blogger

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

Koben sekarang akan berbicara mengenai rich snippet dimana konten ini meliputi data microdata, microformats dan RDFa. Dimana setelah 3 search engine (google, Yahoo! & Bing) sepakat memakai struktur format tersebut agar skema struktur markup data sebuah web/blog terbaca lebih indah di mata ketiga search engine :) Ket: Introducing schema.org: Search engines come together for a richer web. Pertanyaan timbul untuk apa dan berfungsi sejauh manakah fitur rick snippet terhadap sebuah blogsite/website? Jangan bertanya pada saya, tapi baca saja keterangannya ya Rich snippets (microdata, microformats, and RDFa). Setelah sekian lama bergelut mempelajari hal ini, Beben Koben si bloglang anu ganteng kalem tea akan berbagi mempermudah pemahaman dan penerapan sistem rich snippet microdata ini ke dalam blog format blogger blogspot ;) Mungkin penerapan sistem microdata akan berbeda pada setiap web penerima. Tapi secara garis besar trik snippet yg digunakan sama saja. Masalahnya tinggal pintar² kita...

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

Mengaktifkan Threaded System Comments Blogger Untuk Customize Template

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

Ingat dengan hack penomenal mengenai threaded comments II for blogspot! Pihak blogger sekarang sudah memasukan fitur tersebut ke dalam sistemnya. Baca keterangan via buzz blogger engage with your readers through threaded commenting. Pada kasus tertentu mengikuti langkah² yang telah diberikan oleh pihak blogger, tidak serta merta fiture threaded commenting blogger ini langsung terlihat pada template kalian di bagian komentar? Di sebagian negara mungkin secara otomatis dapat langsung tampak sistem threaded comments tersebut, tapi tidak demikian dengan kita yang ada di Indonesia khususnya. Beben Koben selaku si bloglang anu ganteng kalem tea melakukan jalan² kesana kemari guna mengetahui bagaimana cara agar sistem threaded comments ini bisa langsung dirasakan oleh kita! Pertama-tama Koben mendarat di Official Blogger Threaded Comments is Live!. Disana saya mendapatkan keterangan bahwa tingkat memberikan balas kepada komentar hanya diberikan 2x. Satu kelemahan yg sudah pasti terkuak ;))...

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

AnchorCloud Expanding Link Jquery Plugin

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

Kembali membawa sesuatu yang unik, aneh full stylish. Lagi-lagi mengenai trick jQuery plugin ;) Jquery AnchorCloud Expanding Link jebolan dari team web @9lessons menyuguhkan kreasi fresh memperluas kinerja links dengan memperkaya sistem kinerja links tentunya terintegrasi dengan jQuery :) Dimana nantinya setiap links akan terlihat sepenggal informasi ketika disorot. Versi pertama yang dirilis mendukung juga terhadap link YouTube dan Vimeo. Menurut rencana si pembuat, versi berikutnya akan lebih diperluas gayanya :d dengan memasukan beberapa feature di antara lain popular video dan photo service b-) Beben Koben juga sudah pasang kok sob ;)) Untuk melihat demonya silahkan tunggu loading blog 100% beres :D Untuk perihal syntax link, default links akan langsung terlihat efeknya seperti tooltips disertai dengan keterangan berdasarkan meta description. Ex: Contoh default link - Ben Tools. Berikut contoh links Vimeo & YouTube sahara wonderland - blogger tutorial. Untuk link Vimeo video...

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

Clickable for jQuery Plugin

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

Trick jQuery plugin sederhana berikut mungkin bisa berguna bagi sobat blogger yang memang mengikuti adsense PPC. Dimana para pemain bisnis pay per click ini, seiring waktu semakin pandai² saja dalam mensisipi link PPC tersebut. Kebanyakan Koben lihat para pebisnis PPC selalu menyertai link affiliasi yg diikutinya dengan link download! Dengan mengklik link DL, maka otomatis akan terklik juga link affiliasi :D Seperti itu juga kira² proses kerja trik clickable with jQuery Plugin sekarang ;) Namun hanya satu link saja yg bisa dimasukan dengan bantuan script jQuery sekarang ini sob :P Karena hanya satu link yg dapat disisipkan, maka persiapkanlah link kojo/andalan yg memang bila diklik akan meraup $$$ lumayan besar ;)) Dengan mengambil tagging body sebagai target klik, sehingga link rahasia tujuan yg nanti dimasukan akan terisi diseluruh body web/blog kalian :D Kurang paham dengan apa yg dimaksudkan oleh Beben Koben si bloglang anu ganteng kalem tea, mari langsung saja pada script...

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

Three Major Search Engines for You

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

Mengangkat kembali tema lawas yakni mengenai kotak pencarian/search box. Ada juga yang menyebutnya search engines? Intinya kotak search untuk mencari konten yg ada pada sebuah web/blog lah. Kadang saya suka bertanya sendiri bila ada web yg tidak memasang kotak pencariannya sob. Apakah memang disengaja untuk mengacak-acak bagian arsip biar kita dituntut lebih bisa melihat keseluruhan isi daripada konten web tersebut! Tapi yang pasti bagi saya malah bikin bingung, dan membuat susah pengunjung dalam mencari sesuatu yg dimaksud :D Teknik dasar yang dipakai sekarang dalam membuat blog search engine seperti pada artikel search box korek-korek style. Bila tidak dipindah checked yg ada, maka berfungsi hanya konten yg ada pada blog/web yg akan disearch hasilnya. Bila cheked dipindah maka hasil search berpindah ke search engine web pilihan. Koben mengambil 3 buah search engines faforit yaitu Google, Yahoo!, dan Bing :) Terserah sobat cara mana yg mau dipakai dalam memasukan rumusan/code search...

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

Train Your Skill Internal Style Sheet

noreply@blogger.com (Beben Koben) — Mon, 09 Jan 2012 11:48:00 +0000

Sudah mahir belum memakai HTML editornya :) Ya semoga saja minimal sudah pada kenal dan dapat meningkatkan skill kita dalam melatih HTML language :D Pada postingan tata cara memakai editor HTML Koben pernah menyentuh mengenai gaya penulisan Cascading Style Sheets (CSS)! Sekarang mari kita berkreasi dengan salah satu trik penulisan CSS tersebut yaitu gaya menulis secara Internal Style Sheet. Style penulisan ini dipakai juga ketika kalian menggunakan tools Editor HTML! Untuk mengetahui tujuan topic postingan sekarang, coba sobat buka halaman blog ini SITE MAP atau Daftar Isi. Secara singkat cerita begini sob, banyak di kalangan blogger kita sudah banyak yg pandai membuat trick/hack blog. Untuk memperlihatkan hasil hack/trick tersebut kadang kita memerlukan demo. Halaman demo inilah yg sebenarnya bisa kita buat dengan mengandalkan postingan dari alamat blog kita sendiri dengan melakukan teknik internal style sheet. Satu hal yg harus diketahui bila mau melakukan trik ini sobat harus...

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

Download Tools HTML Editor Offline

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

Episode sebelumnya Beben Koben si bloglang anu ganteng kalem tea sudah memaparkan mengenai HTML editor online opensource, yang mana arti dari opensource itu sendiri disana kita dapat mendownloadnya secara gratis. Sekarang Koben akan berbagi source Editor HTML yang dapat digunakan secara offline kepada kalian :) (supaya rajin belajar bahasa HTML) Adapun tata cara pemakaian sobat dapat membacanya pada postingan tata cara memakai editor HTML. Sama tapi berbeda dengan pendahulunya MBT HTML Editor, kreasi kali ini gue menambahkan tools generated encode ke dalamnya. Sebelum mendownloadnya, harap sobat mau memperhatikan sebentar sedikit keterangan dari screenshot editor-html kreasi si bloglang anu ganteng kalem tea ini ya ;)) :"> Keterangan lambang/angka pada gambar! * Link postingan keterangan tata cara pakai kalau sobat pada lupa :D 1 Tempat meletakkan code/script yang sudah dirancang oleh kalian masing². Disana Koben telah masukan contoh penerapan bermain dengan tag CSS. Pencet tombol...

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

Tata Cara Memakai Editor HTML

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

Sepertinya masih banyak sobat blogger yang kebingungan dengan cara pemakaian dari HTML Editor! Kita tidak perlu susah² memahami bahasa HTML secara detail bila memang hanya mau memakainya saja. Sobat perlunya apa, kebutuhannya untuk apa dan mau sampai mana memakai HTML language ini. Koben ambil contoh kasus macam begini: Kenal dengan Microsoft Office untuk ngeutik²? Berjalannya aktifitas mengetik di komputer tanpa adanya aplikasi/software Microsoft Office tidak mungkin bisa kita lakukan. Tahu dengan Adobe Photoshop untuk edit gambar atau lainnya? Ya sama saja sob, jadi editor HTML disini yaitu aplikasi buat kita belajar bahasa HTML :) Yang kalian perlu perhatikan hanya bahasa-bahasa dasarnya saja (kalau emang gak mau serius) Simpelnya lagi begini, editor post blogger sarana kita membuat postingan!!! Itu kalau diperumpamakan sama saja dengan HTML Editor juga :) Banyak jenis & fungsi dari Editor HTML itu sob. Beres dengan pengertian dari Editor-HTML, sekarang simak macam gaya...

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

HTML Editor Online Opensource :)

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

Mau berbagi tips and trick seputar HTML Editor Online. Sebab Koben mengangkat issue ini karena diluaran sana para developer telah open source membagi-bagikan tools bermanfaat ini guna melatih skill kita dalam mempraktekan bahasa HTML. Kalian mungkin sudah kenal dengan online editor jsFiddle atau JS Bin. Kedua editor online tersebut merupakan web penyedia embed result dari apa yang kita buat, mau itu CSS, HTML, sampai script :) Untuk jsFiddle mending kita lakukan register agar bisa melihat rumusan yg sudah kita buat (tersimpan). JS Bin free alias bebas, namun tidak tahu pasti (penulis) embed yg sudah dibuat bertahan sampai kapan ;)) Kedua tools editor online tersebut memang hebat, dan sudah sering dipakai oleh para master² developer ;)) Lebih enak memakai js-fiddle sudah ada tempat masing² guna menempatkan kode²! Bila memakai JSBin setidaknya kita sudah familiar dengan kode, tagging² pada sebuah web :D Apakah hanya itu editor hebat yg ada :D Tentu saja cuma itu, tapi jangan salah...

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

Add ShonGoKou Flying on The Blog

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

Sepi tidak ada artikel tutorial yang cukup menarik buat dibagikan :-s Mungkin masih pada menikmati hari liburan sobat blogger dari belahan dunia lain :P Oleh karena sepi, maka Beben Koben si bloglang anu ganteng kalem tea akan memberitahukan satu blog yang akan membuat perbedaan pada kalian ;)) Sebelum itu apakah kalian ingat artikel mengenai membuat twitter terbang di blog! Banyak sudah terpasang pada blog teman-teman kita tentunya. Tapi bagaimana halnya kalau yang terbang itu tokoh kartun animasi terkenal ShonGoKou b-) Koben belum pernah menemukan selama ngebloglang ke tempat blogger indonesia khususnya ;)) ada son-go-ku terbang :d Berkaitan dengan blog yg akan Beben bagi, siapakah gerangan gue catut tutorial itu mengenai Add ShonGoKou Flying on The Blog (memasukan son go ku terbang ke dalam blog) :d Beberapa hal mesti diperhatikan dengan widget ini yakni pada hal hasil generated penyimpanan script! Hal ini akan mempengaruhi kala pointer mouse menyorot, maka link tujuan bisa...

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

Referensi CSS3 Ala si Bloglang

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

Bagi kalangan master mungkin sudah terbiasa dengan kode-kode dari CSS3. Tapi bagaimana halnya dengan kita para blogger yang notabene tidak tahu apa-apa :d Bermunculannya trik-trik CSS 3 terbaru dari sana sini kok malah membuat kebelinger! Terakhir melihat jebolan Codrops, mengeluarkan Fullscreen Background Image Slideshow with CSS3 Koleksi web pilihan mengenai Cascading Style Sheets Koben telah rangkum dalam 1 postingan All About CSS :) Dengan hadirnya fitur CSS3 Koben kembali akan berbagi referensi sob ;) Adanya referensi² dari para pengembang akan sedikit membantu kita mengetahui atribut kode dari si CSS3 tersebut. Tidak usah menghapal, tinggal lihat saja :D Bagi sobat yang memiliki referensi juga, tolong di share, biar komplit ;)CSS 3 Reference Option1. CSS Reference by w3schoolsMemberikan informasi property CSS1, CSS2, dan CSS3 yang terus di update kinerjanya pada browse utama.2. CSS Reference by Developer MozillaReferensi berisi semua standar CSS properti, pseudo-classes dan...

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