Berbagai macam cara di lakukan untuk menterkenalkan blog/web kita. Dari mengiklankan, add ke situs jejaring, blog walking dan lain-lain. Pernah tidak dalam benak mempromosikan blog lewat sebuah gadget/widget? Trik dan tips sekarang Koben akan berbagi cara membuat widget dari web/blog manapun, jenis apapun, dan bisa langsung kita generate menjadi sebuah aplikasi software desktop!!! Mungkin akan bingung dan tidak terbayangkan bagaimana kita bisa membuat gadget sekaligus dijadikan software? Kalau sekolah dulu tidak akan jadi² :)) Sebelum itu ketahui dahulu pembagian bikin widget terbagi menjadi 3 tipe. Gadget Content Type:
Web Page Content
Mengambil gadget dari web dengan cara grab & block konten yang akan dibuat.
Web Widget Code
Memasukan kode/script gadget untuk dimodifikasi oleh kita ;))
Mobile Website
Tampilan mobile sebuah site yang akan dibuatkan versi desktop b-)
Demikian ke-3 type pembuatan. Gue akan kasih contoh point ke tiga (memakai URL mobile), karena itu yang termudah :D Tahukan cara penulisan link mobile blogpost http://beben-koben.blogspot.com/?m=1
Berikut link download aplikasi desktopnya Add To Desktop Lumayan blog sekarang bisa ada di desktop komputer kita :)) Silahkan buat sendiri yaaa
Koben hanya mau mengupdate postingan lama. Membuat tampilan browse kalian menjadi sebuah konten atraktif. Style of Windows 8 Display for Your Browse. Silahkan baca terlebih dahulu artikel cara pasang pada browsenya Windows 8 For Browse. Setelah membaca itu, sekarang theme style baru win8 kita pakai kreasi Master Sergey Pimenovhttp://metroui.org.ua/ Buka halaman tersebut, perhatikan kanan atas tempat link download berada. Silahkan DL bahan² dari sana ya :) Sobat akan mendapatkan semua demo & new-demo beserta konten lainnya :-bd Tampilan browse sobat sudah menjadi gaya windows 8, web juga bisa seperti itu jika kalian bisa buatnya :D Kalian tinggal edit-edit saja gambar, link atau apapun sesuai kebutuhan.
Mungkin sobat akan bingung mau pakai style mana dari hasil dl-an file! Kalau bosan tinggal ganti address saja sih ;)) Bagi yang memang berminat hanya mau pakai satu gaya, Koben sudah buatkan opsi index Metro UI CSS Windonws 8. SCREENSHOTJika memang berminat silahkan download versi simple hasil modifikasi aku :"> Download MetroUICSSFile.zip. Semoga bermanfaat :)
Berbagi tutorial CSS ringan seputaran atribut input. Keterangan support, definisi, tag, pemakaian, sobat bisa baca HTML input tag and HTML5 input Tag. Kegunaan variabel input bisa kita temukan dalam pembuatan modul form action. Dengan hadirnya direktori variable baru yakni CSS3 membuat lebih atraktif penampilan dari input ini :D Bisa di bilang saat ini bila mau berkreasi sudah enak. Tools sudah ada dimana-mana, baik yang online maupun berbentuk aplikasi/software. Tinggal urusan daya imaginasi berkreasi masing² saja ;)) Coba sekarang sobat baca & simak beberapa source yang memberitakan mengenai CSS tools and generators berikut!
Larinya ke tempat itu² juga ternyata :)) Bentuk dasar variabel input tanpa embel² gaya apapun!<input type="jenis-type" name="unik-id" value="Contoh Input" /> Sekarang mari kita buat var.input yang diberi taburan bumbu CSS agar terlihat cuamik.
Dua efek image berikut datang dari web dynamic drive Walau sebenarnya jika ditelaah pernah memosting juga mengenai tutorial efek gambar CSS 3D Flip dan Before and After Image (transition trick) Efek akan terlihat jika cursor didekatkan pada objek tujuan (hover) CSS 3D Flip Salah satu fitur terobosan di CSS3 adalah kemampuan untuk memutar elemen HTML dalam ruang 3D. Di bawah kode CSS menunjukkan bagaimana untuk memutar "2 sisi" elemen baik pada X atau sumbu Y untuk mengungkapkan isi di sisi belakang. Hanya memindahkan mouse anda ke atas elemen untuk melihat flip. Kode bekerja di FF10 +, IE10 +, Chrome, dan Safari, dengan browser yang mendukung bukan sekedar menampilkan konten sisi belakang itu dari awal. DEMO
Wanita cantik kalau rame-rame gitu malah pusing milihnya,jadi kepengen cemuanyah gitooh!!!
You can get code and read tutorial here CSS 3D Flip Before and After Image (Peel Back) "Before and After" gambar selalu menyenangkan untuk dilihat, terutama jika transisi yang tepat digunakan secara efektif swap antara keduanya. Contoh CSS menunjukkan menggunakan CSS3 animasi untuk menghidupkan "clip" property of "before" untuk mengupas dan mengungkapkan "after" onmouseover gambar. Hasilnya adalah sederhana namun ramping "Before and After" efek gambar! DEMO
You can read full documentation here Before and After (Peel Back) Image Untuk bonusnya Koben kasih tools untuk membuat markup HTML buat iframe karya master @nitinmaheta iFrame Generator. Master satu itu rajin bener bikin tools buat kita ;)) :x :P Happy coding \m/
Karena masih dalam kondisi suasana libur postingan sekarang sama dengan yang sebelumnya Koben akan membawa sobat berjalan-jalan in the prettt! Kalau kawan membaca dan melihat link dengan judul CSS3 3D top shift menu pada artikel Selamat Hari Kemerdekaan Republik Indonesia ke 67 maka tidak akan aneh melihat yang berikut Build a CSS3 Sliding Menu Informasi unik selanjutnya tentang BigVideo.js menerangkan cara membuat embed video menjadi sebuah fit-to-fill background! Bisa bergerak-gerak macam image .GIF ;)) Walaupun masih dilanda issue support or not terhadap browsingan mengenai HTML5 dan CSS3 kalian tetap harus melihat koleksi brkt Amazing Showcase of HTML5 and CSS3 Templates Memang keren punya :D
Sobat pasti suka pakai tools CSS3 kan? Tapi apakah kalian tahu cara membuat sebuah generator CSS3? You can read here Creating a CSS3 Generator with CSS3, HTML5 and jQuery Walau sederhana, tapi jadi tahu lah :P Sebelumnya juga pernah berbagi template bertemakan pinterest web! Sekarang bagaimana caranya membuat columns bergaya pinterest? DEMO
Lorem ipsum vix id kasd adhuc dignissim,eum ad dico audire mediocritatem,te iisque tritani efficiendi has.
Lorem ipsum vix id kasd adhuc dignissim,eum ad dico audire mediocritatem.
Lorem ipsum vix id kasd adhuc dignissim,eum ad dico audire mediocritatem,te iisque tritani efficiendi has. Ne quo justo docendi.
Cum ea quando placerat,eirmod latine erroribus mei ei,quo mazim appetere et. Munere aliquid vis ea.
No nonumy percipit voluptatum vel,alii erant mediocritatem sed at.
Brute aeque deseruisse mei ex,invidunt constituto usu te,sea te delectus urbanitas interpretaris.
Nullam eget lectus augue.
Vis porro labitur laboramus an. Utamur electram voluptatum qui cu,nobis efficiendi eloquentiam in quo,scripta euripidis in est.
Donec a fermentum nisi. Integer dolor est,commodo ut sagittis vitae,egestas at augue. Suspendisse id nulla ac urna vestibulum mattis.
At viris imperdiet vix. Justo assueverit reprehendunt has in,nostrud legendos appellantur eam ea.
Nec te utinam adipiscing. His te illum posse. Ne mel detracto splendide referrentur. Ea mel everti concludaturque,ne nam alia reque.
CSS-Only Pinterest Style Columns Layout Ada tutorial efek image seperti kertas lecek oriDomi Dua link terakhir lumayan full stylish http://rigoneri.github.com/syte/ & http://lab.rog.ie/chirp/ Segitu saja kira-kira, semoga bermanfaat :)
Postingan di awal dari libur ngeblog :D Sebelumnya Beben Koben si Bloglang anu Ganteng Kalem Tea mengucapkan Minal 'aidin Wal Faidzin, Mohon Maaf Lahir dan Bathin kepada semua para sobat blogger dimanapun berada. Semoga kalian dalam keadaan sehat wal afiat selalu, Insya Alloh Amiiinnn :) Masih ingat dengan jejaring Pinterest Berbagi info lewat media image/gambar, tutorial cara pasang tombol gambar otomatis pada blogger pernah gue posting Add Button Pinterest Automatic for Image Blogger. Ternyata ada template bertemakan web pinterest sob, namanya Pinfinity Blogger Template. Mirip dengan tampilan Seven New Dynamic Views Ways to Share your Blog yang opsi mosaic ;)
Keren punya koleksi template dari SoraTemplates ;) Do you still remember about Hello Bar Widget? Sekarang ada versi jBar the jQuery call to action bar! You can read here jBar Plugin Kalau males dengan script, ada juga versi CSS CSS Notification Bar :D Memang tak ada habisnya ngomongin jQuery Script ;)) What do you think about this spritespin jQuery plugin ^:)^ Simpel tetapi tetap memberi kesan blink-blinkBeautiful Jquery Animated Menu Sekedar informasi kumpulan game sederhana pelepas penat yang dibangun dengan technology HTML5 Play Game Di kalangan kita mungkin sudah familiar dengan istilah slider namun apakah kawan pernah mencoba rcarousel? Please try and read it rcarousel by master Wojciech rrh Ryrych.
BEBEN KOBEN SI BLOGLANG ANU GANTENG KALEM TEA MENGUCAPKAN
DIRGAHAYU REPUBLIK INDONESIA
Masa isi postingan cuman kata ucapan doang :)) Gaya gue seperti biasa akan membuat sobat berjalan-jalan ria ;)) berbagi links yang mungkin bisa bermanfaat :) Pertama-tama Koben akan ajak dari seputaran trick bertemakan SLIDER
Aapalagi acara artikel ketika lemot ide sedang melanda. Traveling atau jalan-jalan selalu menjadi pilihan utama dalam melakukan update blog ;)) Koben akan membawa sobat sekalian berkeliling ria alakadar ke halaman² pilihan gue :)) Awal perjalanan di mulai cara membuat sesi komentar dengan bergaya timeline b-) monggo make comment timeline style Familiar dengan istilah framework dalam dunia design! Berikut ada source mungkin berguna bagi kalian Web and mobile framework Sebenarnya link address itu satu dari link demo dari sini Mozilla Developer Network. Apakah kawanku semua kepingin melihat evolusi dunia web? Take a look here The Evolution of the Web, that a link i take here Vizzuality. Visit there to look the great project.
Dari kategori jQueryZoom dan menu aa 'oben ambil dari web berikut sajalah Jack Moore
Bagaimana jalan² sekarang, apakah bermanfaat links seleksian gue! Menu sudah ada tapi tombol belum ada nih ;)) silahkeun Fake Transitions on Gradients Perjalanan berakhir dengan tujuan CSScomb. Happy travelling \m/
Dari kode sederhana berawal karena senang ngeliat (kok bisa gitu) Marquee! Memang menarik melihat efek yang dapat dihasilkan oleh atribut marquee. Berikut contoh tools sederhana bila sobat mau berkreasi dengan line dancing & falling text use marquee technique ;) Lagi-lagi dengan mengikutsertakan variabel @keyframe di padu dengan variable marquee, menghasilkan karya Creating Advanced “Marquee” with CSS3 Animation or marquee using CSS3 :D Seperti halnya slider with css3 dengan marquee sekarang kita dapat membuat tulisan berefek dari atas ke bawa (sebalinya) atau dari kanan ke kiri ;)
Move the text from the right to the left
This is example marquee right to left
Automate marquee right to left
Move the text Downwards
This is example marquee up to down
Automate marquee up to down with actions
How to do that!!!
Please visit, read and download tutorial from Hongkiat.com created by Master Thoriq Firdaus. This is alternative link Vagabundia Happy marquee \m/
Perhatian dunia olah raga sekarang sedang terpusat pada pesta terakbar olah-raga yang lebih dikenal dengan nama Olympiade. Pesta yang diselenggarakan setiap 4 tahun sekali guna menampilkan para atlet di setiap negara untuk menjadi yg terhebat dan memperoleh medali emas. Tuan rumah Olimpiade tahun 2012 jatuh di negara London
Olimpiade Musim Panas 2012, secara resmi bernama Games of the XXX Olympiad atau Olimpiade London 2012, dilaksanakan di London, Inggris, Britania Raya mulai tanggal 27 Juli sampai 12 Agustus 2012. ...Wikipedia
Silahkan sobat baca di situs resmi London 2012 Olympics buat membaca segala informasi ter-up-to-date. Terus apa maksudnya Koben postingkan artikel macam ginih patut! Ternyata embah google diam-diam turut berpartisipasi dengan acara pesta akbar sport ini loh sobat-sabit ;))Silahkan sobat main-main cabang olahraga yg disukai :) Itung-itung nunggu buka puasa :)) Happy olympiade \m/
Karena bukan suatu hal yang harus di bahas, list link para kreasi JavaScript berukuran kecil (micro js) berikut, mungkin bisa menjadi bahan mengisi waktu luang kita di bulan puasa. Lumayan sudah pada opensource dan dihostingkan di github.com :d Tinggal dipilih-pilih saja script yg terpakai oleh kalian di sana :))
Pelangi² alangkah indahmu merah kuning hijau di langit yang biru ... pelukismu agung, siapa gerangan??? Pelangi² ciptaan Tuhan.
Silahkan menuju ke halaman berikut guna melihat-lihat alakadar Microjs Bonusnya trik membuat full stylish effect image ;)) Membikin effect zoom pada gambar memakai attribute scale, proses akhir kerja yakni dengan cara di klik dan ditahan pada mouse :-/
Tiba waktunya berbagi links full stylish, dikarenakan tidak ada tutorial aneh untuk dibagikan kepada kalian :d Jangan pernah melihat sebuah blog/web tanpa memperhatikan sekitarnya (minimal load 100% full page) What Are You Doing Dude! :p Oke sobat Koben tercinta, ada apa di sini hayo eky Praktek gue didapat dari sana Light Focus. Mantap!!! Dari topic jQuery plugin gue dapetin jquery.iviewer From twitter tema, i get it TwitStream Tiga web langganan yang tanpa sengaja terlihat pada radar telah melakukan update postingan:
Apa yang terlintas pada benak kalian jika membaca/mendengar kata syntax highlighter Singkat penjelasan fitur Syntax Highlighter yakni editor teks yang menampilkan teks dengan berbagai warna yg sudah ditentukan. Tujuan pemberian warna tidak lain untuk memudahkan menulis dan membaca bahasa pemograman atau bahasa markup secara visual berbeda :D Bapak SyntaxHighlighter paling terkenal ialah Master Alexgorbatchev Berbicara syntax highlighter master @leaverou telah membuat Prism Berikut karakteristik Prism Syntax Highlighter:
Ukuran kecil. Inti hanya 1.5KB minified & gzip, yang bisa naik ke 2KB dengan definisi bahasa yang tersedia saat ini (CSS, Markup dan JS)
Sangat extensible. Tidak hanya mudah untuk menambahkan bahasa baru, tetapi juga untuk memperluas yang sudah ada. Yang paling penting, mendukung plugin. Ada beberapa plugin sudah tersedia, dan itu sangat mudah untuk menulis sendiri.
Mendorong praktek penulisan yang baik. Highlighter lain mendorong atau bahkan memaksa kita untuk menggunakan elemen semantik yang salah, seperti <pre> (sendiri) atau <script>. Prism menggunakan satu-satunya unsur semantik benar untuk menandai kode: <code> untuk kode inline, atau di dalam <pre> untuk blok kode.
Theme untuk saat sekarang ada 3 pilihan: default, dark, and funky.Silahkan sobat kunjungi prism, klik halaman download & lakukan setingan terlebih dahulu di sana :) Baca juga sesi Basic Usage yakni cara penempatan script, code CSS, dan markup penulisan.
Secara sederhana sbb...
Lakukan setingan (pilih theme,Compression level, languages, etc) ► Scroll to down ► Klik tombol download js - download css. Letakan script tepat diatas kode </body> sedangkan code css sebelum tag </b:skin> Cara pemakaian ketika memosting, sobat hanya perlu menuliskan markup sebagai berikut!<code>
--- CONTENT HERE ---
</code> or
<pre> <code>
--- CONTENT HERE ---
</code> </pre>
Lihat hasil kerja, good luck :) Thanks Lea VerouLea Verou :x BONUS: http://gridster.net/ http://jsonenglish.com/projects/flex/ Happy prism \m/
Sebuah kreasi di dunia CSS pada era sekarang sudah sedikit enakan dengan hadirnya tools generators CSS full stylish. Kita tinggal edit sana-sini dan preview akan terlihat langsung, push button to get code! So easy right! Melihat source artikel penawaran tools generator CSS yang ada, terdapat bermacam-macam mesin generate. Dari yang khusus sampai yg menyeluruh jadi satu. Singkat cerita gue mau sedikit mengupdate informasi tools generator online dari artikel CSS3 Tools Online for Developing your Skill Pertama-tama artikel seputaran tools/apps generators CSS3
Perhatian dunia olah raga sekarang sedang terpusat pada pesta terakbar olah-raga yang lebih dikenal dengan nama 
Lea Verou
