Koben mau berbagi 2 informasi dari dunia Javascript. HTML5 sound synthesis via PCM encoding (riffwave.js) and Screensharing a browser tab in HTML5? "riffwave.js" adalah javascript kecil yang mengkodekan data audio ke format (PCM dalam sebuah wadah RIFF) yang dapat digunakan untuk memutar suara sintesis dengan unsur audio HTML5. Screensharing ialah membuat screenshot LIVE beserta konten terkait (deskripsi versi aku) Kedua-duanya sama-sama menggunakan teknik Data_Uri berteknologi HTML5 :D Keunikan Data URI! Untuk keterangan, download file sobat bisa baca pada web sumber terkait HTML5 audio experiment & HTML5 Rocks Tugas Koben hanya berbagi eksperimen setelah ke dua tutorial script tersebut dimasukan ke dalam blog ;))
Berbagai macam cara dapat kita lakukan dalam melakukan perubahan tampilan gaya font (tulisan) Dari cara sederhana (default) sampai menggunakan jasa penyedia service fonts online. Berbicara tentang FONT pasti sudah tentu banyak atribut font itu sendiri yang bisa kita kreasikan. Misalkan warna font, jenis family font, font style (bold; italic; strike), ukuran font dan lain² :) Di kalangan kita mungkin sudah pada tau cara memasang google web font ke dalam blog yg lebih dikenal dengan sebutan how to add/use custom google web fonts :d Biar tidak capek mencari cara merubah & memasang fonts google ke dalam blog, Koben ulas kembali sebelum masuk ke sesi inti postingan How to use Adobe Edge Web Fonts in Blogger :-" Langkah pertama sudah tentu harus menentukan terlebih dahulu jenis font family yg akan kalian pakai ya ;))
Google Font Family Chewy
Cxtir sonis li kak, on mne maks zvestis profesor. Gda polakju blagodarim vo. Troh zxiznuf mai te. Kupit pervju jazikas na sos, kak iz edat podpor. Pisajut hrvatzem dev mi, jazika partner rodzinuf zxe ne, razumju belaruszem des bu. Uzx zavod tomatis televidenie do. Znat dajte dev no, ku hce gladju sportju vipolnil. Li mesto esperantio gaz, ti novju takak gramatik dva, des da tugde dumajm hrebet. Tot om vnov dost. Ti dev idijte sidili. Tri mama dikju polnite mi. Politju delanie lubovijm tut ne, bi grod cxernju din, sos cxai hcejm dolaris no. Tof bi glodju premnog slovenzem.
Masukan script font berikut setelah tag <head> <link href="//fonts.googleapis.com/css?family=Chewy:regular" rel="stylesheet" type="text/css" />Customize on CSS area
Perhatikan penulisan 'Chewy' ada tanda ' ' Mudah kan sob ;) Go a head to Google Web Fonts Let's talk about how to do add Adobe Edge Web Fonts to your blog in the prettt...
Adobe Edge Web Fonts Family kaushan-script
Fu ma'n Noper bléit rem, méngem ugedon mir hu. De Monn grouss d'Kàchen den, d'Beem sëtzen do mir, bei d'Wise klinzecht op. Nei geet eise kréien et, ké stét d'Hiezer däischter dan. Sin Fielse d'wäiss grousse vu, Hämmel meescht d'Blumme hu zum. Rem am Monn riede, op och Stret méngem iweral, ma'n iw'rem d'Margréitchen do gin. Ech ké ma'n d'Land, sech fort si gei. Blo an eise dann däischter. Wa wéi durch néierens. Am Bass Duerf heemlech net. Zum ké Noper éiweg, gutt rout d'Musek no rëm, d'Natur d'Liewen Gesträich vu sin. Den ménger Keppchen rëschten wa, dé gei Mier...Crot
Langkah-langkah dan cara sama sob, yang membedakannya hanya ada pada<script src="http://use.edgefonts.net/kaushan-script.js"></script>Pada keterangan diletakan setelah tag <head>, tetapi sobat dapat mencoba juga letakan sebelum tag </body> Yang lainnya sama :) Choose your Adobe Edge Web Fonts and Check out the full documentation to learn about additional options and how to use all of the fonts in the Edge Web Fonts library. Good luck. Do you want try this Font Gokil is Fontsize for Blogger! Happy fonts \m/
Berbicara aplikasi serta mencermati fungsinya apakah terpakai secara maksimal atau tidak! Berjubel konten kita masukan tetapi sedikit manfaat, maka perlu di pikir ulang untuk apa memasang aplikasi tersebut! Contoh kasus sederhana penerapan tombol berbagi konten ala pinterest. Pertama-tama datangin terlebih dahulu web Pinterest lihat tujuan site itu dibuat? Yeah berbagi gambar/image pilihan sobat ke seantero jagat dunia maya :p Timbul pertanyaan masalah fungsi memasukan tombol berbagi pinterest sekarang! Simak kembali kata tombol!! Ada tombol berbagi link postingan, link image, counter, follow me and many more... Setelah itu baru kombinasikan dengan web tujuan. Satu contoh sederhana.
Facebook atau twitter merupakan web jejaring paling favorit dimana banyak pilihan aplikasi berbagi ditawarkan, plugin kita tinggal pakai saja. Cocok untuk berbagi link postingan, yang mana kita tidak usah dipusingkan lagi dengan edit sana-sini (kecuali mau dipasang di blog) :d Kembali ke tema postingan memasang tombol berbagi pin it (pinterest) Contoh Follow me Button
Bagaimana trik dan tips pasang link tombol berbagi pinterest hanya memakai atribut HTML dan syntax blogger? Demo bisa sobat praktek langsung yg ada pada blog ini. Deretan tombol berbagi diatas box form comment, ke-2 dari kanan! Sebelum itu cobalah beberapa metode links berbagi berikut
Pasangkan kode berikut ke dalam template Grab Coded Here. Script tersebut akan secara otomatis melacak link, title dan gambar pada area postingan blog kita. Hal serupa pernah koben lakukan juga pada artikel Comment Facebook Without Javascript for Blogger. Semua ada di otakmu, tergantung kebutuhan saja :)) BONUS Pasang slide show pinterest image karya: http://www.liens-du-vin.ch/pinterest-slideshow-script.htm
Berbicara mengenai jQuery plugin semakin ke depan bertambah terus kreasi-kreasi full stylishnya b-) Silahkan sobat searching di mesin pencari dengan keyword plugin jQuery dan lihat betapa banyak tawaran hasil kreasi para developer siap kita sikat ;)) :d Ngomong-ngomong dari tadi, gue perhatiin sekarang lagi ngetrend para scripter membuat jQuery socialist stream plugin. Sebetulnya ada beberapa product, namun Koben permudah saja ambil yang modus jQuery social stream. Indonesianya yaitu membaca konten blog/web yang mana blog kita sudah terhubung dengan situs jejaring tujuan! Begitu kira-kira :d Sama halnya dengan saya yang ilmu hanya bermodalkan nekat dan coba-coba, dengan susah payah jadi juga #:-S Selagi ada demo menyertai pada penjelasan, masih bisa gue mengikuti apa yg dijelaskan :">
Begini bentuk premium dari jQuery Social Stream Plugin Kalau sobat punya modal, silahkan beli itu karena memang terasa banget full stylish b-) Macam saya yang mana urusan kocek alias doku pasti sudah tradisi menjadi sebuah masalah :D Free version yakni gratisan jalan utama keluar dari masalah tersebut :)) @vagabundia membuat satu artikel tutorial Muchos feeds y un solo script para mostrarlos (2) Demo & penjelasan sebenarnya sudah bagus, sayang kendala bahasa saja :d Silahkan download file demo versi Koben dan pelajari sendiri :p
Menakjubkan sekali bukan :-bd Versi lain yang tidak kalah datang dari jQuery Social Plugin from In1 Ada 2 kreasi disana socialist and share, yg paling utama sudah opensource :-" Pelajari juga ya ;))
Masih dalam rangka pemanasan memosting, Koben akan mengupdate beberapa trik dari postingan sebelumnya :d Masih ingat dengan artikel Fixie.js yaitu membuat konten hanya bermodalkan script fixie ;)) Ada hal serupa, tetapi saya tidak tahu tepatnya itu apaan karena bahasa inggris gue keseleo, namun yang saya lihat ada kemiripan! Strapdown.js adalah script untuk membuat sebuah markdown text secara instant. Namun markup HTML yg digunakan disini ada sedikit perbedaan pada umumnya, khususnya pada tag H1-H5, pre/code, syntax link, URL image, dll. Utamanya kita tidak usah dipusingkan lagi dengan urusan theme (CSS) Lebih jelas dapat sobat lihat pada web sumber atau di sini Strapdown.js (look source of page)
Beres satu sekarang kalian masih ingat dengan postingan gue yg berjudul Drag and Search and Share! Sama dalam fungsi tetapi lebih sederhana Wordsmith Download terlebih dahulu scriptDownload Wordsmith v1.01Kemudian pasangkan plugin$(function() { $('.container').wordsmith(); });Perhatikan kode .container semua harus berada di dalam tag tersebut ya!
jQuery plugin mesti sudah punya script jQuery-ny ya ;)
Perhatikan (di dalam script) : maxWordLength = batas panjang maksimal kata/kalimat (default 18) lookupImage = gambar tanda tanya ? lookupUrl = url search tujuan.
Lama tidak menyentuh dunia blog, ternyata sudah baru semua :)) Biasa Beben Koben si Bloglang anu Ganteng Kalem Tea melancong dulu ke kota Medan kampung Musam tempat Nenek awak :D Pemanasan memosting lagi deh, walau tidak ada bahannya juga :P Mengambil tema post mengenai jQuery Sticky. Master Taufik Nurrohman pernah membahas tema ini pada artikel berjudul StickyBar JQuery Plugin. Seperi itu kira-kira tutorial pemanasan mosting :P Teranyar tentang issue sticky jQuery datang dari master Trevor Davis with title posted jQuery Stick ‘em: Make Content Sticky on Scroll, to a Point Jika sobat berminat melihat koleksi jQuery sticky scroll plugins keren punya dapat membaca di halaman 8 Cool jQuery Sticky Scroll Plugins
Tetapi sebagai seorang bloglang jika menampilkan sticky yang itu-itu juga terlihat monoton :D Bagaimana dengan model seperti berikut Beautiful Nag Screen using JQuery & CSS3 Mari kita bahas beautiful sticky nag screen use jquery ;))
var flag = 0 $(document).ready(function() { var nagTop = $('#nag_screen').position().top + 2 $(window).scroll(function(e){ if($('#nag_screen').length>0){ var container = $(e.target); var top = container.scrollTop(); if(top >= nagTop){ if(flag==0){ fixNag(); flag = 1; } }else{ if(flag==1){ normalNag(); flag = 0; } } } })
</div>Hal-hal yg perlu diperhatikan yaitu: #container Merupakan daerah utama yg biasa pada template blogger diberi nama wrapper, outer-wrapper, main-wrapper atau lainnya. Pada script sticky jquery plugin jangan lupa juga dirubah jika kalian mau meng-customizenya ;) Good luck :) http://mojotech.github.com/stickymojo/ http://gazpo.com/downloads/tutorials/jquery/sticky-header/ Happy sticky \m/
Bosan melakukan pencarian gambar dengan tampilan konvesional? Silahkan coba layanan satu ini search-cube menampilkan search image bergaya cube 3D. Bisa diputar-putar dan image filter dari 6 website ternama b-) Tapi saya tidak akan membahas mengenai hal itu, Koben mau berbagi seputaran trik hover lagi :D Hasil blog walking silaturahmi ke blogger spanyol tepatnya master Johnny owner dari @REDEANDOblog Contoh karya membuat peta dunia pakai CSS + tooltip - read here Koben mau berbagi artikel bagian sliding effect description on image Let see mas bro
Ini adalah contoh dari slide description effect yang diterapkan pada sebuah gambar!!! Keren kan coyyy...
Karena bersifat absolute, maka trik ini cocok bagi yang suka memosting gambar tanpa merubah-rubah posisi dan lebar dari gambar tersebut!
Rileks sejenak dari rutinitas tutorial, kembali berbagi template pilihan Beben Koben si Bloglang anu Ganteng Kalem Tea. Mungkin di antara sobat juga sudah ada yang pernah melihat template-template ini. Cek q dot...
Apakah yang lagi heboh saat ini! Yeah salah satu feature aplikasi menggemparkan jagad dunia maya yaitu hadirnya si timeline. Bagi sobat yg belum melihat bagaimana penerapan timeline untuk blogger Add Timeline To Blogger. Sekarang Koben mau berbagi cara menerapkan Embedded Timelines Twitter To Blogger :D Syarat utama sudah pasti harus punya account twitter :P Bagi yg sudah punya, silahkan masuk ke sini guna membuatnya Create your own embedded timeline Kita dapat menanamkan timeline untuk Tweets dari user, favorit user, daftar Twitter, atau permintaan query & hashtag. Lebih jelasnya silahkan konfirm ke mari ya Twitter Developers Setelah selesai dengan urusan setting, letakan di area postingan kalian script and coded tiwtter timelinenya.
<a class="twitter-timeline" href="https://twitter.com/YOUR-NAME-ACCOUNT" data-widget-id="WIDGET-ID-HERE">Tweet oleh @Your Name Account</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
Edit width and height sesuaikan. Tanpa data-widget-id tutorial ini tidak akab berjalan. Makanya harus punya jejaring twitter :D
Pada artikel sebelumnya Make Flash & Zooming Image Effect, jika sobat masuk ke web sumber pasti akan menemukan postingan dengan judul "Pie Menu (like Path menu ) using jquery and CSS3" Demonya Ternyata trick tersebut sekarang sudah dapat dilakukan hanya menggunakan code CSS3! Bayangkan coba teknologi dunia CSS3 telah bisa merambah kemana-mana, bahkan yang diluar akal sekalipun :D Karena kode jadi dari trick Path menu in pure CSS3 lumayan banyak, bahasa coding tingkat expert, IQ gue jongkok (jadi rara ribet mau nerangin juga), terima jadi saja yak :D Bumbu dapat diambil di Github!
Sebagai bonus Koben mau mengupdate (others style) dalam membuat tooltip pure CSS3 yang pernah gw publish Tooltip CSS Without Span Writed Syntax ;) Sampai urusan buat tanda arah panah tooltip juga pake CSS :-" DEMO
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. Te congue ullamcorper per. Dicat dolores eu duo. Quas labitur volumus te duo, at per sonet detraxit evertitur. No nonumy percipit voluptatum vel, alii erant mediocritatem sed at. Brute aeque deseruisse mei ex, invidunt constituto usu te, sea te delectus urbanitas interpretaris. Eu ullum ubique eum, id aliquid mediocrem quo. Nam ne eius debitis. Vis porro labitur laboramus an. Utamur electram voluptatum qui cu, nobis efficiendi eloquentiam in quo, scripta euripidis in est. At viris imperdiet vix. Justo assueverit reprehendunt has in, nostrud legendos appellantur eam ea.
Eos ex erat errem utinam, eos epicuri philosophia ut, ad eam ubique labore. Eos nibh laboramus ei, ei sumo fugit pro, ut dicat impetus partiendo vim. Ei magna velit eripuit duo, tamquam feugiat molestiae quo an, mea primis putant persequeris et. Nec te utinam adipiscing. His te illum posse. Ne mel detracto splendide referrentur. Ea mel everti concludaturque, ne nam alia reque. Vim apeirian iracundia ea, ea solum oratio oporteat duo, scaevola mandamus eu vel. Consul verear usu eu. Sit duis percipit ne. Per autem constituam id. In has melius virtute, sea probatus assentior id. Electram assueverit dissentiet eu pro. Ut sanctus dolorum vel. Ex cibo deserunt vim, utinam laudem vel id. Vim nostrum signiferumque ei, ad duo aliquip oporteat splendide. Mel verear legendos no.
