Kamis, 30 Mei 2013

Add JavaScript Arrow Key for Navigation Blogger

Kenal dengan istilah shortcut? Cara alternatif dalam efisiensi berkerja. Pengoperasian shortcuts pasti menggunakan alat bantu, yang kita gunakan pada kasus ini adalah keyboard! Jika kibor kita belum di apa-apakan alias masih natural, maka function key yg ada masih original :) Apa yg terjadi jika kibor telah di modifikasi (tweak) dengan JavaScript? So pasti akan terjadi perubahan fungsi, yg mana bisa diterapkan ke dalam template. Sekarang Koben akan berbagi cara memasang fungsi Arrow Key Navigation for Blogger ke kanan & ke kiri agar mempunyai fungsi menjadi sebuah navigasi ;)
Caranya cukup mudah sekali, kalian tinggal menanamkan seonggok JavaScript di bawah, ke dalam Widget (HTML/JavaScript)

<script>
document.onkeyup = function (event) {
if (document.activeElement.nodeName == 'TEXTAREA' || document.activeElement.nodeName == 'INPUT') return;
event = event || window.event;
switch (event.keyCode) {
case 37:
var newerLink = document.getElementById('Blog1_blog-pager-newer-link');
if (newerLink != null) window.location.href = newerLink.href;
break;
case 39:
var olderLink = document.getElementById('Blog1_blog-pager-older-link');
if (olderLink != null) window.location.href = olderLink.href;
}
};
</script>
SAVE.

Thanks bloggerplugins Bila membutuhkan value keycode kibor datang saja ke Undercover Blog :)) Sekarang arah panah kiri & kanan keyboard berfungsi menjadi next and previus page blog.
Wassalam :)
codepen.io/P233/full/qEagi

Rabu, 29 Mei 2013

No Title Just Share, Sikat!!!

Gambar dengan resolusi kecil, jika di perbesar maka akan di peroleh titik-titik yang berkesinambungan dan berurutan. Urusan membuat icon, percayakan saja pada generator x-icon editor Hasil jadi akan menjadi sebuah gambar. Sekarang bagaimana jika icon yg dihasilkan di bentuk dengan atribut CSS? Mirip dengan beginian bos img to css!
Sekarang simpel tidak ribet layaknya kita mengconvert image menjadi css, cukup dengan klik-klik membuat titik-titik, jadi deh gambar kecil unyu-unyu :"> Like this
Serupa tapi tak sama, kemiripan hasil akhir memang agak persis. Do you still remember my posted make five popular browsers theme menu? Lihat link demo berikut, gambar orang full memakai CSS beserta menu link berbagi sederhana dengan efek hover di bawahnya!

View and Look Source Page

Kepengen tools titik-titik jadi gambar?
Buka alamat brkt kushagragour.in pilihlah menu opsi LAB. Ada 3 project di sana, pilihlah piCSSel-art Sikat kode di github github.com/chinchang/picssel-art
Semoga bermanfaat :)
Happy blogging \m/

Selasa, 28 Mei 2013

Make Snapshots Site Include Active Links and Images

Apa yang sobat bayangkan bila mendengar kata snapshots! Mengambil gambar screenshot dari sebuah website yang Koben maksudkan disini. Pada umumnya jika kita mengambil image pada site pasti akan berupa image. Bagaimana ceritanya jika kita dapat mengambil snapshots sebuah site lengkap dengan gambar dan link aktif serta menghilangkan semua script yg ada pada site yg dimaksud. Halaman yang disimpan tidak akan memiliki elemen aktif dan tidak ada script, sehingga aman dikonsumsi :d

Kita bisa melakukan ini tidak terpatok pada halaman depan saja. Mau single link kek, mau link jejaring kok, link gambar kak bahkan short link sekalipun kuk! Coba...

Archive.isTunggu sampai beres, sampai muncul gambar snapshot yg dimaksud! Kemudian klik gambar tersebut, tunggu sebentar, ada dua opsi Text or Image. Text snapshots dengan link aktif, Image ya cuma image doang :) Download.zip ada pada bagian kanan atas.

Happy snapshots \m/
Bonus

codepen.io/CrocoDillon/pen/sxgzF
codepen.io/new/pen/rGhpv
cssdeck.com/labs/full/dribbble-member-card-concept
www.hongkiat.com/blog/css-snippets-for-designers
cssdeck.com/labs/full/navigation-dropdown-with-flip-effect

Minggu, 26 Mei 2013

Download Free Tools Generate Data URI

Masih ingat dengan artikel uniqueness of data uri or base64! Ternyata bahasa yang menggenerate data menjadi DataURI berkaitan erat dengan DOM. Markup HTML/xHTML di render terbaca dalam bentuk grafik DOM, lalu jadilah rendered view dalam bentuk dataURI, begitu kira² :d Cobalah tools Live DOM Viewer biar terlihat jelas (walau tidak ngerti juga) software.hixie.ch/utilities/js/live-dom-viewer Ingat juga dengan postingan brainy bookmarklet links? Dengan teknik penulisan bookmark tersebut, bisa juga kita membuat serialize as xml. Try it: Beberapa link bookmarklets usefully, sikat, save pada bookmark toolbar, pilih browser apa yg kalian pakai import bookmarklets Koben sudah buatkan tools generator img to data-uri convert image to data uri Untuk data gambar akan tampil previewnya, sedangkan jika data lain tidak akan tampil previewnya. Setelah di coba, ternyata tools convert data-uri mendukung semua file yg penting kita tahu jenis type mime-nya. Susunan syntax data-uridata:[<MIME-type>][;charset=<encoding>][;base64],<data>Setelah gue hunting di github dapatlah tools File to Text dan Data URI Generator. Yang satu simpel dan sederhana, satu lagi canggih dan gaya masing-masing punya manfaat sama untuk membuat data uti eh uri :p Yang canggih dilengkapi dengan generate text, dan opsi dalam memilih jenis type mime yg mau di pakai :)) Nggak pakek screenshot, download saja cobain langsung bro...
Sampe element canvas game snake bisa dibikinkan dataurinya bytex64.net/code/datasnake/
Semoga bermanfaat :)
Happy uri uri \m/

Sabtu, 25 Mei 2013

Play Music File (Mp3) on Web Browser

Dengan belajar kita akan lebih tahu. Sobat tentu sudah mendengar tentang HTML5. Bahasa markup paling anyar untuk membuat & menampilkan sebuah web. Dengan beragam syntax (gaya penulisan markup) turut mendorong juga pada kemajuan dunia web browser. Menurut laporan statistik W3Schools Online Web ternyata dimenangkan oleh browser google chrome dengan mengantongi presentase sebesar 52.7%/May cek here browser statistics Dari sekian banyak taging baru dari bahasa HTML5, kita dikenalkan dengan tag audio Dikarenakan browser mozilla belum secanggih google chrome, maka Koben akan bagi-bagi aplikasi .HTML saat ini khusus di buka pada chrome :p Nama aplikasinya adalah music player on browser :))

Memang hampir tidak mungkin seorang pemilik komputer tak memiliki aplikasi untuk memutar file musik (MP3) dan kemungkinan di antara kita banyak menggunakan winamp media player. Bagi kalian yg tidak mempunyai aplikasi/software pemutar file music, maka sekaranglah saatnya browser web (chrome) dijadikan alat bantu memainkan file MP3 b-)
Berikut 3 buah screenshot apps .html music player on browser yg bisa gue dapatkan...

MP3 PlayerBeyer Music PlayerFancy Circle Music Player
Buka browser chrome kalian, dan lihatlah demonya:
  • antimatter15.github.io/player/player.html
  • developer.cdn.mozilla.net/media/uploads/demos/t/u/tuxie/c958d1ee9346fc86c680e0fb86a1b23d/beyer-music-player_1359504973_demo_package/index.html
  • workshop.rs/projects/html5-css3-circle-music-player/

Silahkan sikat paketnya bro
Berikut link resource
www.antimatter15.com/wp/2011/03/mp3-player/, www.developer.mozilla.org/en-US/demos/detail/beyer-music-player & www.workshop.rs/2013/05/html5-css3-circle-music-player/

Share and care di mari kalau ada tambahan dari kalian yah :) Bonus silahkan maen game sederhana atari breakout buka dan tunggu...maenkan bray.

Happy music \m/

Jumat, 24 Mei 2013

Change Google Code Download Service to Google Drive

Sobat kenal dengan layanan google Google project hosting Project hosting di google code menyediakan lingkungan pengembangan kolaboratif gratis untuk proyek-proyek open source. Setiap proyek dilengkapi dengan Subversion/Mercurial/Git repository, issue tracker, wiki pages, dan downloads service. Download dilaksanakan oleh project hosting google code memungkinkan proyek open source untuk membuat file kita siap sedia didownload publik. Sayangnya, layanan download telah menjadi sumber kekerasan dengan peningkatan yang signifikan dalam insiden baru-baru ini. Karena ini penyalahgunaan peningkatan pelayanan dan keinginan untuk menjaga komunitas tetap aman, google akan menonaktifkan service download yg berada di google code.

Mulai hari ini, proyek-proyek yang sudah ada (Project Hosting on Google Code) yang tidak memiliki layanan download dan semua proyek baru tidak akan memiliki kemampuan untuk membuat download. Proyek download tidak ada perubahan yang terlihat sampai dengan 14 Januari 2014 dan akan tidak lagi memiliki kemampuan untuk membuat download baru dimulai pada tanggal 15 Januari 2014. Semua download yang ada dalam proyek-proyek akan terus dapat diakses di masa mendatang.
Jika proyek sobat menggunakan download untuk host dan mendistribusikan file dan memiliki kebutuhan secara periodik membuat download baru, disarankan kita memindahkan link download ke layanan alternatif seperti Google Drive sebelum tanggal 15 Mei 2014. Jika Anda memilih untuk memindahkan file ke Google Drive, lihat artikel bantuan help article.

Sumber: Google open source blog

Oleh sebab itu lekaslah backup seluruh data kita yang berada di google code, dan pindahkan ke google drive #:-S Demikian informasi yg dapat Koben sampaikan, kurang lebihnya tolong dimaklumi. Karena gue juga manusia bukan malaikat ataupun Nabi!

Bonus resource...

+ 60 Most Wanted CSS & jQuery Tutorials
blog.karachicorner.com/2013/05/css-jquery-tutorials
+ 30 Tutorials For Creating Buttons in CSS3
smashinghub.com/tutorials-for-creating-buttons-in-css3.htm
+ Magic Sphere
jsrun.it/salleygarden/h2rp
+ Easily manage all your social network settings
www.blisscontrol.com
+ Try to straighten the sheet
codepen.io/Vampireos/pen/baAJF
+ Flatulent Experience!
codepen.io/bbuk-/pen/nDfdA
+ Slider like Yahoo Weather App
codepen.io/BaylorRae/full/ImGBC
+ 3D Carousel Using TweenMax.js
codepen.io/johnblazek/full/nceyw
+ CSS3 Timeline
codepen.io/P233/full/lGewF
+ Simple comparison slider
codepen.io/thibaudbe/pen/Ejnaf
+ CSS only 3d Macbook Air
codepen.io/neoberg/pen/istyp
+ Full CSS NES
codepen.io/onediv/pen/AsDev
+ css3 proximity effect layout
cssdeck.com/labs/css3-proximity-effect-layout
+ CSS drop water
cssdeck.com/labs/full/css-drop
+ jQuery Range Slider
refreshless.com/nouislider
+ Excelentes Tutoriais CSS3
www.siteparaempresas.com.br/blog/?p=3732
+ 30 Plugins And Tools That Will Improve Your Work And Save You Time
vandelaydesign.com/blog/tools/plugins-save-time
+ Creating a simple jQuery plugin for Pinterest
www.developerdrive.com/2013/05/creating-a-simple-jquery-plugin-for-pinterest
+ bluePen Editor
www.bluepeneditor.com
+ phpFreeChat
www.phpfreechat.net/demo
+ Drop-Down Navigation Responsive and Touch-Friendly
www.osvaldas.info
+ Flat UI Login Form
cssdeck.com/labs/full/flat-ui-login-form
+ Slider manual puro css
codepen.io/Kseso/pen/FmBKp
+ Label.css - Label every thing!
www.usablica.github.io/label.css
+ Easy Responsive Tabs to Accordion
webtrendset.com/demo/easy-responsive-tabs/Index.html
+ 50 Useful CSS Snippets Every Designer Should Have
www.ipixel.com.sg/blog/web-design/50-useful-css-snippets-every-designer-should-have
+ 20 Fresh Tutorials and Examples for Creating Buttons in CSS3
www.psdtohtmlhint.com/20-fresh-examples-for-creating-buttons-in-css3

Semoga bermanfaat :)
Happy walking \m/

Kamis, 23 Mei 2013

Free Download Litewrite & Notes Application

Ada yang terlupakan dan memang sedikit menarik juga. Bermula dari artikel bertemakan change browser into notepad. Kembali ke web sumber, kemudian melakukan korek-korek di bagian komentar! Koben menemukan ini bos www.litewrite.net Setelah dipelajari ternyata fitur yang ada lumayan. Auto save dengan methode cache log local membuat aplikasi ini berbeda, artinya: selama kita tidak melakukan clear cache pada browser, maka jejak yg ditinggalkan pada apps lite write (notes) akan tersimpan dengan sendirinya :)
Berikut demonya:
  • litewrite.net
  • litewrite.github.io/litewrite
  • nv.github.com/notes
Ketiga aplikasi tersebut ya mirip dengan trik membuat browser menjadi notepad. Tetapi dikhususkan lagi supaya full stylish b-) Kalau mau simple dan cepat coba saja iki save di Bookmarks Toolbar BrowserSeperti biasa gue bungkuskan aplikasi offline .html lite-write and notes buat kalian. Pada bagian litewrite, sudah saya tambahkan dengan form action textarea popup for playing html code buat bermain-main koding:dlitewrite
Ekstrak Data File.zip ► Buka folder Buka ini ► pada browser kalian buka file litewrite.html atau notes.html
Tips ringan, dalam aktifitas sebaiknya lakukan new document pd aplikasi guna kemudahan bekerja.
Semoga bermanfaat :)
Happy blogging \m/

Selasa, 21 Mei 2013

Make Clickable Menu Google Search Engine

Setelah menghilangkan beberapa fitur dari tampilan yang ada pada google search engine bersamaan dengan itu hadir juga fitur baru. Contoh fitur yg dihilangkan antara lain screenshoot website, google plus share, link cached, similar and etc. Fitur baru pengganti hadir dengan membawa clickable menu yg isinya terdiri dari link cached, similar and share (yg terlihat cuma itu :d) Link navigasi dipindahkan ke bagian atas tepat di bawah kotak pencarian dan tentunya main navigasi yg selalu ada dimanapun produk google berada :))
Koben mau berbagi cara membuat clickable menu google full memakai CSS. Bila masih belum ngeuh dengan clickcable menu, perhatikan!!!
Before the clickclickable-menuAfter the clickclickable-menuItulah yg akan kita buat sekarang bos :d Gue hanya membuatkan versi default, jika mau keren silahkan kalian tambahkan variabel CSS sendiri!
DEMO
.contshare {
display: none;
}
.contshare a {
color: #343434;
text-align: center;
text-decoration: none;
}
.wrapshare:active .contshare {
display: block;
}
.wrapshare {
position: relative;
}
.contshare:hover {
display: block;
}
.parrow {
width: 0px;
height: 0px;
cursor: pointer;
border-style: solid;
border-width: 8px 8px 0 8px;
border-color: #060 transparent transparent transparent;
}
.contshare {
width: auto;
position: absolute;
box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}
.contshare li {
color: #343434;
background: #FFF;
padding: 5px 10px;
text-align: center;
list-style-type: none;
}
.contshare li:hover {
background: #EEE;
}
Planning HTML<div class="wrapshare">
<div class="contshare">
<li><a href="#">Cached</a></li>
<li><a href="#">Similar</a></li>
<li><a href="https://plus.google.com/u/0/_/sharebox/dialog" target="_blank">Share</a></li>
</div>
<div class="parrow"></div>
</div>
Aurlah sendiri nominal yg ada, itu hanya kode CSS dasar yang perlu penambahan disana-sini.
Semoga bermanfaat :)
Happy blogging \m/

Senin, 20 Mei 2013

Tools untuk Mencari Blogger Sekota, Sedaerah & Senegara

Setelah disibukan dengan fitur teranyar contact form widget blogger melakukan snippet coded disana-sini agar tercipta varian dalam menampilkan kontak form tersebut ;)) Mari kita rehat sejenak dari urusan coding. Kalian pernah membaca artikel cara mencari blogger sekota, sedaerah, ataupun senegara! Koben yakin rata² blogger sudah pernah membacanya :))
Jika profile blogger kalian tidak switch dengan profile google plus, maka akan mudah kita mencari teman blogger satu kota/propinsi/negara. Letak link tersebut terhubung dengan About Me ► Location data satu area jg dengan Gender, Industry and Introduction.

Pecahan syntax link location of blogger yang ada di address bar browser sebagai berikut:

  • Link blogger senegara.
  • http://www.blogger.com/profile-find.g?t=l&loc0=ID
    ID = Kode negara tujuan, wajib pake kapital (huruf besar)
  • Link blogger sekota.
  • http://www.blogger.com/profile-find.g?t=l&loc2=bandung
    bandung = Nama kota tujuan.
  • Link blogger satu propinsi.
  • http://www.blogger.com/profile-find.g?t=l&loc1=jabar
    jabar = Nama propinsi tujuan.
Sekilas memang terlihat mudah, tapi di sana ada kode pembeda yakni pada variabel loc Salah itu saja tidak akan jalan, alias Ups, itu kesalahan. Maka dari itu dengan ide dari postingan sebelumnya tentang form action blogspot (banyak yg sudah tidak berfungsi :-s) gue buatkan deh untuk kalian pasang di blog :d
DEMO






Beben Koben

Kode rumusannya
<div style="display:block;width:220px;text-align:center;padding:15px 1px 5px;margin:5px auto;box-shadow:0 0 3px #333;-webkit-border-radius:10px;border-radius:10px;background:#debe94"><form action="http://www.blogger.com/profile-find.g" method="get" target="top"><input size="1" name="t" type="text" value="l" style="display:none" /><label>City Ex: <b>Bandung</b></label><br /><input size="25" name="loc2" type="text" /><br/><label>Province Ex: <b>Jabar</b></label><br /><input size="25" name="loc1" type="text" /><br/><label>Country Ex: <b>ID</b></label><br /><select name="loc0"><option value="AE">AE</option><option value="AF">AF</option><option value="AG">AG</option><option value="AI">AI</option><option value="AL">AL</option><option value="AM">AM</option><option value="AO">AO</option><option value="AQ">AQ</option><option value="AR">AR</option><option value="AS">AS</option><option value="AT">AT</option><option value="AU">AU</option><option value="AW">AW</option><option value="AX">AX</option><option value="AX">AX</option><option value="AZ">AZ</option><option value="BA">BA</option><option value="BB">BB</option><option value="BD">BD</option><option value="BE">BE</option><option value="BF">BF</option><option value="BG">BG</option><option value="BH">BH</option><option value="BI">BI</option><option value="BJ">BJ</option><option value="BL">BL</option><option value="BM">BM</option><option value="BN">BN</option><option value="BO">BO</option><option value="BQ">BQ</option><option value="BR">BR</option><option value="BS">BS</option><option value="BT">BT</option><option value="BV">BV</option><option value="BW">BW</option><option value="BY">BY</option><option value="BZ">BZ</option><option value="CA">CA</option><option value="CC">CC</option><option value="CD">CD</option><option value="CF">CF</option><option value="CG">CG</option><option value="CH">CH</option><option value="CI">CI</option><option value="CK">CK</option><option value="CL">CL</option><option value="CM">CM</option><option value="CN">CN</option><option value="CO">CO</option><option value="CR">CR</option><option value="CU">CU</option><option value="CV">CV</option><option value="CW">CW</option><option value="CX">CX</option><option value="CY">CY</option><option value="CZ">CZ</option><option value="DE">DE</option><option value="DJ">DJ</option><option value="DK">DK</option><option value="DM">DM</option><option value="DO">DO</option><option value="DZ">DZ</option><option value="EC">EC</option><option value="EE">EE</option><option value="EG">EG</option><option value="EH">EH</option><option value="ER">ER</option><option value="ES">ES</option><option value="ET">ET</option><option value="FI">FI</option><option value="FJ">FJ</option><option value="FK">FK</option><option value="FM">FM</option><option value="FO">FO</option><option value="FR">FR</option><option value="GA">GA</option><option value="GB">GB</option><option value="GD">GD</option><option value="GE">GE</option><option value="GF">GF</option><option value="GG">GG</option><option value="GH">GH</option><option value="GI">GI</option><option value="GL">GL</option><option value="GM">GM</option><option value="GN">GN</option><option value="GP">GP</option><option value="GQ">GQ</option><option value="GR">GR</option><option value="GS">GS</option><option value="GT">GT</option><option value="GU">GU</option><option value="GW">GW</option><option value="GY">GY</option><option value="HK">HK</option><option value="HM">HM</option><option value="HN">HN</option><option value="HR">HR</option><option value="HT">HT</option><option value="HU">HU</option><option value="ID" selected="">ID</option><option value="IE">IE</option><option value="IL">IL</option><option value="IM">IM</option><option value="IN">IN</option><option value="IO">IO</option><option value="IQ">IQ</option><option value="IR">IR</option><option value="IS">IS</option><option value="IT">IT</option><option value="JE">JE</option><option value="JM">JM</option><option value="JO">JO</option><option value="JP">JP</option><option value="KE">KE</option><option value="KG">KG</option><option value="KH">KH</option><option value="KI">KI</option><option value="KM">KM</option><option value="KN">KN</option><option value="KP">KP</option><option value="KR">KR</option><option value="KW">KW</option><option value="KY">KY</option><option value="KZ">KZ</option><option value="LA">LA</option><option value="LB">LB</option><option value="LC">LC</option><option value="LI">LI</option><option value="LK">LK</option><option value="LR">LR</option><option value="LS">LS</option><option value="LT">LT</option><option value="LU">LU</option><option value="LV">LV</option><option value="LY">LY</option><option value="MA">MA</option><option value="MC">MC</option><option value="MD">MD</option><option value="ME">ME</option><option value="MF">MF</option><option value="MG">MG</option><option value="MH">MH</option><option value="MK">MK</option><option value="ML">ML</option><option value="MM">MM</option><option value="MN">MN</option><option value="MO">MO</option><option value="MP">MP</option><option value="MQ">MQ</option><option value="MR">MR</option><option value="MS">MS</option><option value="MT">MT</option><option value="MU">MU</option><option value="MV">MV</option><option value="MW">MW</option><option value="MX">MX</option><option value="MY">MY</option><option value="MZ">MZ</option><option value="NA">NA</option><option value="NC">NC</option><option value="NE">NE</option><option value="NF">NF</option><option value="NG">NG</option><option value="NI">NI</option><option value="NL">NL</option><option value="NO">NO</option><option value="NP">NP</option><option value="NR">NR</option><option value="NU">NU</option><option value="NZ">NZ</option><option value="OM">OM</option><option value="PA">PA</option><option value="PE">PE</option><option value="PF">PF</option><option value="PG">PG</option><option value="PH">PH</option><option value="PK">PK</option><option value="PL">PL</option><option value="PM">PM</option><option value="PN">PN</option><option value="PR">PR</option><option value="PS">PS</option><option value="PT">PT</option><option value="PW">PW</option><option value="PY">PY</option><option value="QA">QA</option><option value="RE">RE</option><option value="RO">RO</option><option value="RS">RS</option><option value="RU">RU</option><option value="RW">RW</option><option value="SA">SA</option><option value="SB">SB</option><option value="SC">SC</option><option value="SD">SD</option><option value="SE">SE</option><option value="SG">SG</option><option value="SH">SH</option><option value="SI">SI</option><option value="SJ">SJ</option><option value="SK">SK</option><option value="SL">SL</option><option value="SM">SM</option><option value="SN">SN</option><option value="SO">SO</option><option value="SR">SR</option><option value="SS">SS</option><option value="ST">ST</option><option value="SV">SV</option><option value="SX">SX</option><option value="SY">SY</option><option value="SZ">SZ</option><option value="TC">TC</option><option value="TD">TD</option><option value="TF">TF</option><option value="TG">TG</option><option value="TH">TH</option><option value="TJ">TJ</option><option value="TK">TK</option><option value="TL">TL</option><option value="TM">TM</option><option value="TN">TN</option><option value="TO">TO</option><option value="TR">TR</option><option value="TT">TT</option><option value="TV">TV</option><option value="TW">TW</option><option value="TZ">TZ</option><option value="UA">UA</option><option value="UG">UG</option><option value="UM">UM</option><option value="US">US</option><option value="UY">UY</option><option value="UZ">UZ</option><option value="VA">VA</option><option value="VC">VC</option><option value="VE">VE</option><option value="VG">VG</option><option value="VI">VI</option><option value="VN">VN</option><option value="VU">VU</option><option value="WF">WF</option><option value="WS">WS</option><option value="YE">YE</option><option value="YT">YT</option><option value="ZA">ZA</option><option value="ZM">ZM</option><option value="ZW">ZW</option></select><p style="font-size:10px;"><a href="http://beben-koben.blogspot.com">Beben Koben</a></p><input value="Lihat Blogger's" type="submit" /> <input value="Clear" type="reset" /></form></div>
Bila mau embed profile default blogger, nih sikat juga HTML Blogger User Profile. Buka, kemudian save page as, edit-edit dah apa yang perlu di edit!
Do it Save Page As: User Blogger Profile
Happy blogging \m/

Minggu, 19 Mei 2013

Build Contact Form Widget Blogger into Static Page

Meneruskan petualanan postingan seputar fitur baru contact form widget blogger. Masalah penambahan CSS tanpa harus otak-atik kode syntax kontak blogger bisa sobat baca add style sheets for contact form widget blogger. Trik itu hanya berfungsi jika form contact tampil dalam format full gadget template. Sekarang bagaimana ceritanya jika form kontak widget blogger ingin tampil di area postingan! Untuk perihal ini, post area yang akan kita pakai adalah area post page (blogger static pages). Ket: about pages blogger
Pertama gue lakukan praktek pada blog ini, eh ternyata tidak jalan! Koben lakukan di blog lain ternyata berjalan dengan baik. Mungkin ada terjadi bentrok script :-s Saatnya berbagi bagi sobat-sabit, ikuti langkah² berikut

Pertama-tama lakukan Download full template
1. Masuk ke Layout ► Add a Gadget ► More Gadgets ► Contact Form (read here)contact-form2. Setelah langkah tersebut di lakukan, maka sudah terpasang widget contact form blogger pada template kalian.
3. Buatlah halaman static page baru.post-image4. Pilih opsi HTML bukan mode Compose.
5. Salin kode berikut
<form name='contact-form'>
<div>Name</div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>Email <b>*</b></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>Message <b>*</b></div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<div style='text-align: center;max-width: 450px;width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>
Kemudian klik tombol Publish.

Beres dengan langkah² di atas, sekarang tinggal urusan kode syntax gadget contact form yg berada di dalam template. Ada 2 buah cara untuk melakukan hal ini.
1. Letakan snippet CSS brkt sebelum/diatas tagging &lt;/b:skin&gt;#ContactForm1 {
display: none !important;
}
Dengan teknik itu, kode syntax kontak bawaan masih ada di dalam template. Langkah ke dua inilah yg sedikit extreme :d
2. Extreme steps edit.
Masuk pada halaman edit template. Pilih opsi Jump to widgetContactForm1 ► click expandpost-imagepost-imagepost-imageSetelah melakukan expand, delete kode berikut seperti yg tampak pada screenshot di bawah ini.post-imageMaka akan terlihat seperti berikut penampakannya.post-imageDengan begini maka hilanglah kode Contact Form Widget yg selalu tampak pada page layout. Tetapi kita tidak menghapus widget tersebut :))
6. SAVE.
Sobat membutuhkan demo!!! Oke, let see it...Beben ContactResource you can read here
www.makingdifferent.com/how-to-add-blogger-official-contact-form-into-specific-page-of-blogger-blog/
www.bloggerplugins.org/2013/05/create-separate-contact-page-for-blogger.html
Update (CSS customize for contact form blogger by Nitin Maheta)
http://www.makingdifferent.com/top-10-fully-customized-blogger-official-contact-form-widgets/
Happy blogging \m/

Jumat, 17 Mei 2013

Add Style Sheets for Contact Form Widget Blogger

Meneruskan artikel blogger contact form gadget, bagaimana cara meng-snippet tampilan kontak blogger dengan menanamkan CSS secara sederhana namun tetap gaya. Ada beberapa teknik yang dapat dilakukan dalam hal ini. Pertama dengan merombak syntax dalam ContactForm1 bawaan blogger. Kedua dgn cara langsung menambahkan kode CSS dengan class & ID yg sudah ada! Bila sobat tertarik dengan cara ke satu maka bacalah di
www.oloblogger.com/2013/05/contacto-blogger-pagina-estatica.html
Di sana sudah dijelaskan syntax apa saja yg mesti digantikan agar selaras dengan style sheet yg sudah di buat. Versi Koben sekarang, tanpa mesti ganti syntax bawaan dari blogger, cukup tanamkan ramuan CSS, jebret jadi. Nggak ribet, tinggal urusan skill CSS kalian saja jika memang mau lebih keren. Gue buat standaran saja ;) Hias-menghiasi terserah anda.

Cari kode </b:skin> letakkan tepat diatas/sebelum.

#ContactForm1 {
width: 260px;
height: 450px;
margin: 10px auto;
padding: 10px 20px;
background: #c9d0de;
border: 1px solid #e1e1e1;
}
#ContactForm1 h2 {
margin: 0;
color: #445668;
font-size: 25px;
text-shadow: 0px 1px 0px #f2f2f2;
}
.contact-form-name,.contact-form-email {
width: 260px;
height: 35px;
color: #FFF;
padding: 0 5px;
background: #5E768D;
}
.contact-form-email-message {
width: 260px;
height: 170px;
padding: 0 5px;
color: #FFF;
background: #5E768D;
}
.contact-form-button,.contact-form-button-submit {
width: 101px;
height: 35px;
float: right;
color: #FFF;
font-weight: bold;
padding: 0;
margin: 0 3px 0 0;
cursor: pointer;
background: #5E768D;
border: 1px solid #556f8c;
}
SAVE.
Itulah unik ID CSS secara global yg bisa kalian pakai untuk memberikan sentuhan berbeda pada "Contact Form" widget blogger. Bila mau melihat unik-ID lainnya, maka sobat harus bisa membaca kode dalam mode Ctrl + U alias source web :d Aturlah height, width, padding, margin and color sesuai kebutuhan. Bila sukses maka hasil jadi akan terlihat seperti berikut...

Nama

Email*

Pesan*

Berikut links resource untuk membuat form contact full stylish
  • www.doublemesh.com/coding/free-premium-css3-forms/
  • www.djdesignerlab.com/2011/08/08/10-useful-html5-and-css3-forms-tutorial-with-source-file/
  • www.pehaa.com/2011/07/create-a-unique-contact-form-with-css3-transitions/
  • www.cssglobe.com/collections/forms/
  • www.webexpedition18.com/articles/top-15-html5-and-css3-forms-tutorials/
  • www.acrisdesign.com/2011/07/16-best-css3-forms-tutorials/
  • www.splashnology.com/article/creating-html5css3-forms-30-helpful-tutorials/1275/
Happy coding \m/

Kamis, 16 Mei 2013

Blogger Contact Form Gadget Released & Update Google Plus Display

Informasi terupdate dari pihak blogger and google. Sudah melihat tampilan baru dari halaman google plus Sekarang memakai UI terbaru, yang mana perombakan terjadi pada area menu dan embed chattingan! Menu disembunyikan dan akan terlihat dengan gaya hover. Bagian embed chattingan (di gabung dengan fitur hangout) metode yg dipakai dengan click untuk memunculkan.
Screenshot
New Google+ PageHangouts DisplayHangouts Shortcut
post-imgpost-imgpost-img
Yang kemarin saja belum apal, eh sudah diganti lagi layoutnya ;)) Informasi ke dua datang dari dunia gadget blog, pihak blogger menambahkan widget baru yaitu "Contact Form" In google+ page blogger introduced a new "Contact Form" widget Koben juga sudah tambahin contact form widget dr blogger, sebelah kanan bawah :d

How To Add It


1. Go to the Layout Tab.post-img2. Click button the Add a Gadget.post-img3. Click on More Gadgets.post-img4. Choose the Contact Form Gadget.post-img 5. Save it.

Feature contact form gadget blogger.

> Mengirim pesan teks secara sederhana.
> Belum tersedia dukungan untuk attachment file (kemungkinan di masa depan :p)
> Kustom CSS styles dapat ditambahkan (jika mau dan bisa :d)
> Markup/syntax yg dapat digunakan sama dengan yg ada pada komentar default blogger (<b>, <i>, <a>, or <u> - tidak bisa mengirim HTML file melalui pesan)

Gadget baru ini datang dengan update terbaru google mengumumkan Google I/O 2013 dan sepertinya Blogger masih merupakan bagian integral dari produk google.
Happy googler \m/

Rabu, 15 Mei 2013

Make Lines Animation using CSS3 Keyframes

Koben mau berbagi tutorial dengan memakai atribut CSS3 @keyframes Baca dulu dong artikel creativity using css keyframe animations. Sekarang mari membuat sebuah garis tipis, berkedudukan di bawah, bergerak dari arah kiri menuju ke kanan! Hasil karya ini bisa kita pakai untuk memberi sentuhan lebih, agar pengunjung ketika melihat garis yg bergerak akan melihat konten tersebut ;) Dari pada dijelaskan simpang siur jg arah dan tujuan, tengok demo berikut ini!

post-image

Bagaimana, sederhana tetapi ajib kan :-bd Sudah tentu dong yah ;))
.serrr{
width: 55px;
border-bottom: 5px solid #333;
position: relative;
animation: moveleft 5s infinite;
-moz-animation: moveleft 5s infinite;
-webkit-animation: moveleft 5s infinite;
-o-animation: moveleft 5s infinite;
}
@keyframes moveleft{
from {left:0px;} to {right:200px;}
}
@-moz-keyframes moveleft {
from {left:0px;} to {left:200px;}
}
@-webkit-keyframes moveleft {
from {left:0px;} to {left:200px;}
}
@-o-keyframes moveleft {
from {left:0px;} to {left:200px;}
}
Planing syntax<div class="serrr"></div>Letakin deh apa-apa di atas planing syntax. Aturlah panjang sesuai kebutuhan, dan kode berikut juga from {left:0px;} to {right:200px;}
DONE.

Bonusnya silahkan lihat link berikut pelajari dan have fun, dan gue sudah bingkiskan buat kalian.
www.jsdo.it/haratatu8/jEfC, www.jsdo.it/haratatu8/jUge, www.jsdo.it/haratatu8/qFJS, www.jsdo.it/OpenFlex/jUME, www.jsdo.it/OpenFlex/td2V, www.jsdo.it/OpenFlex/ncrt, www.jsdo.it/OpenFlex/kVUp, www.jsdo.it/OpenFlex/3ImX, www.jsdo.it/OpenFlex/jSfh, www.jsdo.it/OpenFlex/raaB, www.jsdo.it/OpenFlex/xVY8, www.jsdo.it/OpenFlex/jyB0, www.jsdo.it/OpenFlex/rjGf, www.jsdo.it/OpenFlex/mf1Q, www.jsdo.it/OpenFlex/KnnB, www.jsdo.it/OpenFlex/tUzP, www.jsdo.it/OpenFlex/gG6q & www.jsdo.it/OpenFlex/dpDr

Happy blogging \m/