Tutorial Blog for Stylish Blogger

Change Google Code Download Service to Google Drive

2013-05-24T15:11:00.000+07:00

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/

Free Download Litewrite & Notes Application

2013-05-23T14:19:00.000+07:00

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 Browser

Notepad (default size: 400x350)
Notepad (default size: 500x700)

Seperti 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:d

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/

Make Clickable Menu Google Search Engine

2013-05-22T12:06:00.001+07:00

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 clickAfter the clickItulah yg akan kita buat sekarang bos :d Gue hanya membuatkan versi default, jika mau keren silahkan kalian tambahkan variabel CSS sendiri!
DEMO

Cached

Similar

.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/

Tools untuk Mencari Blogger Sekota, Sedaerah & Senegara

2013-05-20T18:53:00.000+07:00

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.

Link blogger sekota.

bandung

Link blogger satu propinsi.

jabar

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

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/

Build Contact Form Widget Blogger into Static Page

2013-05-19T16:20:00.000+07:00

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)2. Setelah langkah tersebut di lakukan, maka sudah terpasang widget contact form blogger pada template kalian.
3. Buatlah halaman static page baru.4. 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 </b:skin>

#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 widget ► ContactForm1 ► click expandSetelah melakukan expand, delete kode berikut seperti yg tampak pada screenshot di bawah ini.Maka akan terlihat seperti berikut penampakannya.Dengan 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/

Add Style Sheets for Contact Form Widget Blogger

2013-05-17T19:22:00.000+07:00

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...

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/

Blogger Contact Form Gadget Released & Update Google Plus Display

2013-05-16T15:05:00.000+07:00

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+ Page	Hangouts Display	Hangouts Shortcut

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.2. Click button the Add a Gadget.3. Click on More Gadgets.4. Choose the Contact Form Gadget. 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/

Make Lines Animation using CSS3 Keyframes

2013-05-15T16:40:00.000+07:00

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!

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/

Make Full Stylish Box, Download Your RSS, JavaScript News Ticker

2013-05-14T16:18:00.000+07:00

Melengkapi artikel sebelumnya yaitu membuat kotak penuh gaya dengan CSS3, sekarang akan ditambahkan variasi baru. Tulisan miring di pojok atas varian tambahannya! Follow box di bangun dengan bahasa CSS level 3. Pasti akan bagus kotak yg sekarang :d

.wrapperBox {
padding: 10px;
margin: 5px auto;
width: 276px;
height: 355px;
position: relative;
z-index: 90;
background: #eee;
border: 1px solid #ddd;
border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0 1px 0 #9a9a9a;
box-shadow: 0 1px 0 #9a9a9a;
background-image: -moz-linear-gradient(top, #fff, #eee);
background-image: -ms-linear-gradient(top, #fff, #eee);
background-image: -o-linear-gradient( top, #fff, #eee);
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
background-image: -webkit-linear-gradient(top, #fff, #eee);
background-image: linear-gradient(top, #fff, #eee);
}
.innerBox {
padding: 0.5em;
border: 1px dashed #ccc;
box-shadow: 0 0 0 1px #fff;
-webkit-box-shadow: 0 0 0 1px #fff;
}
.ribbon-wrapper-blue {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
}
.ribbon-blue {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #306EFF;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#306EFF), to(#3BB9FF));
background-image: -webkit-linear-gradient(top, #306EFF, #3BB9FF);
background-image: -moz-linear-gradient(top, #306EFF, #3BB9FF);
background-image: -ms-linear-gradient(top, #306EFF, #3BB9FF);
background-image: -o-linear-gradient(top, #306EFF, #3BB9FF);
color: #fff;
}
.ribbon-blue:before,
.ribbon-blue:after {
content: "";
bottom: -3px;
position: absolute;
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.ribbon-blue:before {
left: 0;
}
.ribbon-blue:after {
right: 0;
}

Planing HTML

<div class="wrapperBox">

<div class="innerBox">

<div class="ribbon-wrapper-blue">

<div class="ribbon-blue">YOUR TITLE</div>

</div>

<center>

<iframe allowtransparency="false" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=LINK-FACEBOOK-PAGE&amp;width=240&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23eeeeee&amp;stream=false&amp;header=false&amp;height=335" style="background: trasparent; border: 0px solid #222; height: 335px; overflow: hidden; width: 240px;"></iframe>

</center>

</div>

</div>

Ganti dan isikan tulisan YOUR TITLE & LINK-FACEBOOK-PAGE
Resource & demo www.cssdeck.com/labs/full/yhipdwkd

Informasi dari google tentang download arsip lama website dari google reader sebelum terlambat! Masalahnya kalau format RSS bacanya gimana yak? Ada yg tahu bro, share and care ah ;)

Masukan link RSS/Feedburner kalian pada kotak sampai muncul tulisan Download Google Feed. Buat bonusnya Koben kasih JavaScript news ticker :d

<form name="news">
<textarea name="news2" wrap="virtual" style="width:100%;height:75px;border:0;"></textarea>
</form>
<script language=javascript>
//<![CDATA[
//Visit http://beben-koben.blogspot.com

var newsText = new Array();
newsText[0] = "Blah bleh bloh 1";
newsText[1] = "Blah bleh bloh 2";
newsText[2] = "Blah bleh bloh 3";
newsText[3] = "Blah bleh bloh 4";
newsText[4] = "Blah bleh bloh 5";
newsText[5] = "Blah bleh bloh 6";
var ttloop = 1;    // Repeat forever? (1 = True; 0 = False)
var tspeed = 50;   // Typing speed in milliseconds (larger number = slower)
var tdelay = 5000; // Time delay between newsTexts in milliseconds

//------------- NO EDITING AFTER THIS LINE -------------\\
var dwAText,cnews=0,eline=0,cchar=0,mxText;function doNews(){mxText=newsText.length-1;dwAText=newsText[cnews];setTimeout("addChar()",1000)}function addNews(){cnews+=1;if(cnews<=mxText){dwAText=newsText[cnews];if(dwAText.length!=0){document.news.news2.value="";eline=0;setTimeout("addChar()",tspeed)}}}function addChar(){if(eline!=1){if(cchar!=dwAText.length){nmttxt="";for(var k=0;k<=cchar;k++)nmttxt+=dwAText.charAt(k);document.news.news2.value=nmttxt;cchar+=1;if(cchar!=dwAText.length)document.news.news2.value+="_";}else{cchar=0;eline=1;}if(mxText==cnews&&eline!=0&&ttloop!=0){cnews=0;setTimeout("addNews()",tdelay);}else setTimeout("addChar()",tspeed);}else{setTimeout("addNews()",tdelay)}}doNews()
//]]></script>

Add a gadget ► HTML/JavaScript, beres deh ;)
Happy blogging \m/

PicStrips jQuery Plugin Strips Effect to Image

2013-05-13T11:43:00.000+07:00

Benar-benar sepi nih resource dari developer. Jadi susah buat update artikel :-s Tema yang tidak akan habis dibahas salah satunya adalah tentang jQuery ;)) Kumpulan trik jquery plugin mungkin sesuatu yg bisa mempertahankan eksistensi dalam aktifitas blogging. Kendalanya ya cuma satu, yaitu susahnya menemukan plugin jQuery yg unik untuk ditemukan :p Koben mau berbagi tutorial plugin jQuery seputar menghias image menjadi putus-putus (PicStrips)
Original title is stylish image bars jquery plugin. Syarat utama agar trick berjalan mulus, di dalam template sudah tertanam script jQuery inti<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>ScreenshotGambar akan terlihat terpotong-potong (strips) ujung-ujung image zig-zag dikarenakan penambahan bg color sesuai dengan bg yg ada, strips dapat di customize, tinggi strips ujung gambar dapat di customize dll.
Fancy it?

http://www.moreofless.co.uk/downloads/picstrips/picstrips-1.0.js
http://www.moreofless.co.uk/downloads/picstrips/picstrips-1.0-min.js

Itu bumbu stylish image bars jquery plugin. Rekomendasi diletakkan sebelum tagging </body> Script pemanggilnya begini

<script type='text/javascript'>//<![CDATA[
  $(document).ready( function() {
    $(".strips").picstrips( {splits: 17,hgutter: '5px',vgutter: '5px',bgcolor: 'rgba(0,0,0,.7)'} );
  });
//]]></script>

Keterangan:
.strips = Unique ID.
<-> splits: 17 = Jumlah strips.
<-> hgutter: '5px' = Jarak strips.
<-> vgutter: '5px' = Tinggi ujung strips (zig-zag effect) pada image.
<-> bgcolor: 'rgba(0,0,0,.7)' = Warna latar belakang vgutter
Sobat dapat menambahkan varian strips dengan memasukan ke dalam script pemanggilnya! Contoh:

<script type='text/javascript'>//<![CDATA[

  $(document).ready( function() {

    $(".strips").picstrips( {splits: 17,hgutter: '5px',vgutter: '5px',bgcolor: 'rgba(0,0,0,.7)'} );

    $("#strips2").picstrips( {splits: 3,hgutter: '10px',vgutter: '40px'} );

    $("#strips3").picstrips( {splits: 18,hgutter: '2px',vgutter: '10px', bgcolor: '#fff'} );

  });

//]]></script>

Demo & resource by: www.moreofless.co.uk/picstrips
Happy jQuery \m/

Download Kisah Nabi-Nabi Allah SWT Format CHM & HTML

2013-05-10T20:00:00.000+07:00

Sudah lama AA Koben tidak memostingkan artikel bertemakan religi! Saatnya beramal sholih bagi seluruh blogger muslim di seluruh dunia o:-) Gue mau berbagi embed file .chm dan .htmlkisah nabi-nabi Allah Subhanahu Wa Ta'Ala. Khusus 25 Nabi dalam agama Islam dan tentunya 5 Nabi yang mendapatkan gelar Ulul Azmi. Di ambil dari web www.harmoni-my.org karya Bapak Dahalan bin Che Mat.

Dahalan bin Che Mat seorang mantan perwira angkatan laut (Regular Special Duty) di Royal Malaysian Navy. Telah pensiun pada bulan Januari 2004 dengan pangkat Letnan Komandan.

Selain cerita Nabi ada juga artikel dengan judul 1001 kisah dan teladan. Dikarenakan orang malaysia, maka jikalau menemukan bahasa yang sedikit rancu jangan heran yah :) Download terlebih dahulu Harmoni.zip kemudian ekstrak file tersebut. Buka folder berjudul Harmoni, di sana sobat bisa langsung melihat file output.chm Tinggal dibaca-baca saja kalau file itu ;)
Buka file harmoni-my.org ► arkib ► kisahnabi ► buka deh di browsingan aplikasi dengan format index.htm
Beginilah penampakannya

Data yang ada bisa sobat cari kembali keakuratannya dengan Ilmu Hadits (ilmu agama) yg ada di dunia ini.

Bonus jika mau mencari downloadan ebook, software, site offline dsb seputar ilmu agama Islam bukalah blog sobat kita samudera ilmu Perhatikan pada main menu dan lihat kategori DOWNLOAD. Sikat!!!
Semoga bermanfaat :)

Small Trick In Writing Code

2013-05-09T11:52:00.001+07:00

Apa yang mau dipostingkan nih! Tidak ada ide buat artikel. Ternyata setelah lama melakukan blogging, ketika mentok tidak punya bahan repot juga :d Tak semudah membalikan telapak tangan, semua hal memang membutuhkan perjuangan dan pengorbanan O:-)
Kalau begini keadaannya terpaksa mengangkat tema-tema yg sudah lawas untuk di ulang kembali alias dimodernisasikan ;)) Sobat kenal dengan atribut form Bila akan membuat sebuah syntax form action, pasti ada varibael input! Tag input juga masih banyak lagi variannya it's all about input html tag. Koben mau berbagi cara membuat area input untuk syntax form, agar terlihat futuristik ;)
KODE CSS

input {
    background: rgba(0,0,0,.1);
    width: 200px;
    height: 30px;
    border-radius: 15px;
    border: 0;
    box-shadow: 1px 1px 5px rgba(0,0,0,.3) inset, 0 -1px 2px rgba(255,255,255,1) inset;
    padding: 0 10px;
    color: #999;
}
input:focus {
    outline: none;
    color: #000;
}

MARKUP HTML<input />Tutorial yg ringan-ringan saja, kan enggak ada ide :D Sekarang kita buat box (kotak) biar lebih fancy macam begini fancy box style Yang sekarang kita tambahkan dengan garis pinggir di dalam area box

#box {
  position: relative;
  background-color: #fff;
  width: 400px;
  height: 400px;
  margin: 40px auto;
  box-shadow: 0 0 2px rgba(0, 0, 0, .2), 0 1px 1px rgba(0, 0, 0, .2), 0 3px 0 #fff, 0 4px 0 rgba(0, 0, 0, .2), 0 6px 0 #fff, 0 7px 0 rgba(0, 0, 0, .2);
}
#box:after {
    content: '';
    position: absolute;
    border: 1px dashed #ccc;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
}

Planning HTML<div id="box"> </div>Resource by: www.cssdeck.com/labs/full/fe1egt0a
Sekarang kita buat variabel ordered list menjadi lebih cool seperti:

Syntax

<style>
ol {
  counter-reset: listnumbering;
  list-style: none outside none;
}
ol>li {
  margin: 0 0 .5em 0;
  display: block;
  clear: left;
}
ol>li:before {
  content: "" counter(listnumbering, decimal);
  counter-increment: listnumbering;
  font: 400 1.2em "Times New Roman",Georgia,Serif;
  float: left;
  margin: -.1em 0 0 -1.6em;
  width: 1.3em;
  background: #fff;
  border-radius: 1em;
  text-align: center;
  color: #ff5f25;
  border: 1px solid #ccc;
}
</style>

<ol>
<li>Blah bleh bloh 1</li>
<li>Blah bleh bloh 2</li>
</ol>

Bikin tampilan video (youtube) terlihat lebih atraktif dengan teknik penulisan inline style.

Kodenya

<div style="background: url(http://3.bp.blogspot.com/-cBE7Z5fNPtQ/T76axZDCaYI/AAAAAAAAGe0/itWf287vlFQ/s1600/Youtube-background.png) no-repeat top left;height: 364px;margin: 0 auto;padding: 19px 0 0 22px;text-align: left;width: 532px;">

<iframe src="http://www.youtube.com/embed/ID-VIDEO" frameborder="0" height="298" width="498"></iframe>

</div>

Semoga bermanfaat :)
Happy coding \m/

Selection Good Resources in May

2013-05-07T15:08:00.001+07:00

Tidak ada rotan akar pun jadi. Postingan khusus blogger sepi waktu² ini, ya sudah berbagi resource keren punya. Siapa tahu bermanfaat bagi kalian para pelancong blog ini ;) Kenal dengan web youtube? Koben akan berbagi tips mencari, melihat, dan mendownload konten video youtube tetapi tidak langsung dari web youtube. Pencarian berdasarkan pada top rated, top favourites, most popular, most discussed, featured, uploaded, trending videos & most shared dll.
Contoh:

Click to look VSPY

Embed for your blog

<iframe src="http://vspy.org/?frame=2&columns=4&invert=&type=top_rated" width="100%" height="500" scrolling="no" style="position:absolute;top:0px;left:0px;overflow:hidden" frameBorder="0"><p>Your browser not support iframe atribut, please updated LoL</p></iframe>

Artikel pilihan dari web CodePen and developer mozilla

www.codepen.io/lioramsalem/pen/hciBA
www.codepen.io/alassetter/pen/CndgF
www.codepen.io/montanaflynn/pen/orxwK
www.developer.mozilla.org/en-US/demos/detail/mkjs
www.developer.mozilla.org/en-US/demos/detail/photo-mosaic-generator

Jika tampilan responsive kalian ingin mengeluarkan bunyi nada, cobain tutorial berikut www.artpolikarpov.github.io/garmoshka Login/Register form berikut memang lain dari yang lain, mantap punya www.cssdeck.com/labs/yze3ymgf Selanjutnya 2 link source pengetahuan seputar HTML5 tools and usefully CSS tut's www.graphicdesignjunction.com/2013/04/html5-tools-for-designers-developers/ & www.grafixdesignmag.com/tutorials/useful-css-tutorials/ bonus tools www.bestfreewebresources.com/2013/05/free-css3-animations-tools.html

Do you want try and put it on your blog?

Ke dua embed diatas adalah form action melihat variasi warna dari sebuah web dan embed popular hot google search. Artikel mengenai tooltip teranyar www.calebjacob.com/tooltipster/ Flexisel is responsive carousel jQuery plugin www.9bitstudios.github.io/flexisel/ Urusan lightbox you can use Magnific Popup www.dimsemenov.com/plugins/magnific-popup/

For fun

www.jsdares.com
www.geoguessr.com
www.viewlike.us
www.layoutit.com
www.shapecatcher.com
www.flowplayer.org

Source yang terakhir bukalah blog sobat kita ini Code Handling. Update artikelnya keren punya b-)
Happy blogging \m/

Article by Master Kasper Mikiewicz ++

2013-05-06T12:18:00.000+07:00

Koben mau berbagi resource from design it & code it. ± ada 25 tutorial keren punya yang bisa sobat pelajari. Master Kasper Mikiewicz berkebangsaan Poland sudah berbaik hati berbagi ilmu kepada kita. Kode yang sederhana dan penulisan yang dioptimasi membuat artikel resource kali ini akan sedikit gereget :d Tampilan web yg biasa saja tidak memperlihatkan gaya berlebihan, namun artikel dan project yg ada di sana sangat full stylish. Ini dia webnya...Gue akan memilihkan buat kalian artikel pilihan dari proyek yg ada disana.
I. Flat Checkbox and Radio Button

Flat switch	Flat radio buttons

II. Focus modal box III. Flat love buttonIV Dropdown menu V. Twitter Status Tooltip VI. Notifications VII. Twitter profile cardVIII. PaginationIX. Comments thread X. Download button Gue cuma tampilkan segitu saja yah, komplitnya silahkan kunjungi link project master Kasper Mikiewicz. Koben kasih bonus 1 link web keren, buka dan lihat kategori projects dan software pada menu DeanHouseholder.com :)
Happy blogging \m/

Source Code Viewer is Live HTML Editor

2013-05-04T12:01:00.001+07:00

Mungkin sobat agak bosan dengan postingan bertemakan HTML editor yang ada di blog ini! Sudah beberapa gue berbagi mengenai aplikasi offline .html Walau boring Koben tetap akan berbagi kembali :d Berawal dari melihat www.jsdo.it/zied-saidi/link-source-code-viewer apps untuk melihat source code (Ctrl + U) Teliti punya telaah ternyata itu merupakan live view editor HTML juga. Link source code viewer dibangun dengan menggunakan jQuery script, jQuery UI, dan UI layout b-) Live demo full page www.jsrun.it/zied-saidi/link-source-code-viewer
Screenshot setelah gw benah-benahin :d
Kurang lebih tidak berbeda dengan aslinya! Koben sudah masukan contoh penulisan syntax view source blog atau blog Bagi kalian yang belum tahu cara pemakaian HTML editor silahkan baca di sini tata cara memakai editor html :) Monggo disikat bro...

Ternyata web yg punya proyek memang suka membuat tools keren punya bos! Lihat deh koleksi tools dari riverdrift berikut www.riverdrift.com/pg1/web-tools.php
Semoga bermanfaat :)

Trick for Embed Video YouTube to be More Efficient

2013-05-02T20:30:00.000+07:00

Ada tutorial dan trik keren punya mengenai seputaran penerapan embed youtube. Seperti yang di ketahui jika kita mau membawa satu embed full dari web lain pasti memakai syntax iframe! Itulah salah satu fungsi dari atribut iframe. Sekarang apa jadinya jika variabel iframe yang akan kita ambil lebih dari satu bahkan bisa berpuluh-puluh? Satu embed iframe saja file yg terpanggil sebesar ± 400kB. Berikut screenshot prakiraan jumlah size pemanggilan 1 iframe video youtubeMenjadikan beban bertambah berat >:) Oleh karena itu bagi blogger yang blognya berisikan konten embed video terutama dari web youtube, mari cari tahu bagaimana solusinya ;)

Trik berikut khusus embed dari web youtube

Masukan script diatas tag </body>

<script>
//<![CDATA[
var i, c, y, v, s, n;
v = document.getElementsByClassName("youtube");
if (v.length > 0) {
  s = document.createElement("style");
  s.type = "text/css";
  s.innerHTML = '.youtube{background-color:#000;max-width:100%;overflow:hidden;position:relative;cursor: pointer}.youtube .thumb{bottom:0;display:block;left:0;margin:auto;max-width:100%;position:absolute;right:0;top:0;width:100%;height:auto}.youtube .play{opacity:.7;left:50%;margin:-38px 0 0 -38px;position:absolute;top:50%;height:77px;width:77px;background:url("PLAY-BUTTON-77x77.PNG") no-repeat}';
  document.body.appendChild(s)
}
for (n = 0; n < v.length; n++) {
  y = v[n];
  i = document.createElement("img");
  i.setAttribute("src", "http://i.ytimg.com/vi/" + y.id + "/hqdefault.jpg");
  i.setAttribute("class", "thumb");
  c = document.createElement("div");
  c.setAttribute("class", "play");
  y.appendChild(i);
  y.appendChild(c);
  y.onclick = function () {
    var a = document.createElement("iframe");
    a.setAttribute("src", "https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1&border=0&wmode=opaque&enablejsapi=1");
    a.style.width = this.style.width;
    a.style.height = this.style.height;
    this.parentNode.replaceChild(a, this)
  }
};
//]]>
</script>

Pasang link image pada kode yg bertuliskan PLAY-BUTTON-77x77.PNG
Markup HTML

<div style="margin:1em auto;width:370px">

<div class="youtube" id="LcIytqkbdlo" style="width:370px;height:278px;">

</div>

</div>

Gantikan ID LcIytqkbdlo dengan ID video tujuan!
DEMO

Urusan script bisa sobat hosting. Begitulah tut's metode embedding lebih efisien untuk video youtube :)

Trick selanjutnya masih seputar embed video youtube. Kali ini bagaimana memulai video youtube dengan waktu yang sudah kita kondisikan terlebih dahulu! Pada umumnya kalau kita memencet tombol play video youtube pasti akan dimulai pada waktu 0 detik. Lantas kalau kita mau memulai dari menit ke 17 bagaimana? Mau tidak mau ya kita tarik tanda laju streamingannya kan! Dengan trik yg akan gue share, sobat bakal bisa melakukan start dan finish sesuka hati :p
JavaScript youtube embed code

<script>
//<![CDATA[
/*
  YouTube Embed Code
  Author:   Amit Agarwal 
  Blog:     www.labnol.org
  Date:     04/15/2013
*/
  
  var node = "youtube-player";
  var youtube = document.createElement('script');
  youtube.type = "text/javascript";
  youtube.src = "//www.youtube.com/iframe_api";
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(youtube, s);
  
  var player;
  var params = document.getElementById(node);
  var startTime = params.getAttribute("startTime");
  var endTime = params.getAttribute("endTime");
  var videoID = params.getAttribute("videoID");
  var playerHeight = params.getAttribute("height");
  var playerWidth = params.getAttribute("width");
  
  function onYouTubeIframeAPIReady() {
    player = new YT.Player(node, {          
      height: playerHeight,
      width: playerWidth,
      playerVars: {'rel': 0, 'showinfo': 0, 'hidecontrols': 1 },
      events: {
        'onReady': loadVideo
      }
    });
  }
  
  function loadVideo(e) {      
    e.target.cueVideoById({ 
      videoId: videoID,
      startSeconds: startTime,
      endSeconds: endTime
    });
  }
//]]>
</script>

Markup HTML

<div style="margin:5px auto;width:370px">

<div videoID="t2MOwQ089eQ" startTime="1333" endTime="1444" height="278" width="370" id="youtube-player">

</div>

</div>

Gantikan videoID dengan ID video tujuan. Isikan startTime waktu untuk memulai dan endTime untuk waktu berhenti.
Jika kurang jelas silahkan kunjungi sumber how to embed youtube videos without increasing page load time & how to embed a part of a youtube video in your website
Thanks a lot Mr Amit Agarwal :)
Happy coding \m/

Make Social Media Icons With CSS3 3D

2013-05-01T20:00:00.000+07:00

Sepertinya tutorial membuat sosial media icons dengan efek CSS3 animasi belum menggelitik nih! Biar lebih variasi gue tambahin tut's serupa ah :d Original title is Create 3D Social Media Buttons with CSS3. Membuat tombol berbagi (sosial) dengan efek 3D
Link berbagi sekarang akan meliputi 8 web jejaring yaitu: RSS, Twitter, Linkedin, Stumbleupon, Facebook, Google Plus, Flickr dan Pinterest. Berikut gambaran efek 3D dengan CSS

3D CSS Text

Dengan menambahkan atribut a:active maka akan terlihat kental efek 3 dimensinya ketika memencet ;)Markup HTML

<div class="set-1">

<ul>

<li><a href="/" class="rss-small">RSS</a></li>

<li><a href="/" class="twitter-small">Twitter</a></li>

<li><a href="/" class="linkedin-small">Linkedin</a></li>

<li><a href="/" class="stumble-small">Stumbleupon</a></li>

<li><a href="/" class="facebook-small">Facebook</a></li>

<li><a href="/" class="gplus-small">GPlus</a></li>

<li><a href="/" class="flickr-small">Flickr</a></li>

<li><a href="/" class="pinterest-small">Pinterest</a></li>

</ul>

</div>

Kode CSS

.set-1 ul li {
  display: inline-block;
  margin: 5px 0 0 3px;
}
.set-1 a {
  position: relative;
  display: block;
  width: 60px;
  height: 54px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  color: transparent;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -webkit-transform: translate(0,0);
  transform: translate(0,0);
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;

}
.set-1 a:active {
  -webkit-transform: translate(0,3px);
  transform: translate(0,3px);
}
a.twitter-small {
  -webkit-box-shadow: 0 6px 0 #2695BC;
  box-shadow: 0 6px 0 #2695BC;
}
a.twitter-small {
  background: #2CA9E1 url("http://flashuser.net/tutorial/css3-social-media-buttons/images/twitter.png") no-repeat center center;
}
a.twitter-small:active {
  -webkit-box-shadow: 0 2px 0 #2695BC;
  box-shadow: 0 2px 0 #2695BC;
}
a.facebook-small {
  -webkit-box-shadow: 0 6px 0 #293F63;
  box-shadow: 0 6px 0 #293F63;
}
a.facebook-small {
  background: #3B5997 url("http://flashuser.net/tutorial/css3-social-media-buttons/images/facebook.png") no-repeat center center;
}
a.facebook-small:active {
  -webkit-box-shadow: 0 2px 0 #293F63;
  box-shadow: 0 2px 0 #293F63;
}
a.pinterest-small {
  -webkit-box-shadow: 0 6px 0 #8C151B;
  box-shadow: 0 6px 0 #8C151B;
}
a.pinterest-small {
  background: #CD1D1F url("http://flashuser.net/tutorial/css3-social-media-buttons/images/pinterest.png") no-repeat center center;
}
a.pinterest-small:active {
  -webkit-box-shadow: 0 2px 0 #8C151B;
  box-shadow: 0 2px 0 #8C151B;
}
a.gplus-small {
  -webkit-box-shadow: 0 6px 0 #141412;
  box-shadow: 0 6px 0 #141412;
  position: relative;
}
a.gplus-small {
  background: #353631 url("http://flashuser.net/tutorial/css3-social-media-buttons/images/gplus.png") no-repeat center center;
}
a.gplus-small:active {
  -webkit-box-shadow: 0 2px 0 #141412;
  box-shadow: 0 2px 0 #141412;
}
a.rss-small {
  -webkit-box-shadow: 0 6px 0 #C64802;
  box-shadow: 0 6px 0 #C64802;
}
a.rss-small {
  background: #FF6501 url("http://flashuser.net/tutorial/css3-social-media-buttons/images/rss.png") no-repeat center center;
}
a.rss-small:active {
  -webkit-box-shadow: 0 2px 0 #C64802;
  box-shadow: 0 2px 0 #C64802;
}
a.linkedin-small {
  -webkit-box-shadow: 0 6px 0 #005377;
  box-shadow: 0 6px 0 #005377;
}
a.linkedin-small {
  background: #0073B2 url("http://flashuser.net/tutorial/css3-social-media-buttons/images/linkedin.png") no-repeat center center;
}
a.linkedin-small:active {
  -webkit-box-shadow: 0 2px 0 #005377;
  box-shadow: 0 2px 0 #005377;
}
a.stumble-small {
  -webkit-box-shadow: 0 6px 0 #B7371D;
  box-shadow: 0 6px 0 #B7371D;
}
a.stumble-small {
  background: #EA4B24 url("http://flashuser.net/tutorial/css3-social-media-buttons/images/stumble.png") no-repeat center center;
}
a.stumble-small:active {
  -webkit-box-shadow: 0 2px 0 #B7371D;
  box-shadow: 0 2px 0 #B7371D;
}
a.flickr-small {
  -webkit-box-shadow: 0 6px 0 #C10E78;
  box-shadow: 0 6px 0 #C10E78;
}
a.flickr-small {
  background: #FC1090 url("http://flashuser.net/tutorial/css3-social-media-buttons/images/flickr.png") no-repeat center center;
}
a.flickr-small:active {
  -webkit-box-shadow: 0 2px 0 #C10E78;
  box-shadow: 0 2px 0 #C10E78;
}

Itu baru gaya pertama, sekarang gaya yang kedua :dMarkup HTML

<div class="set-2">

<ul>

<li><a href="/" class="rss-big">RSS</a></li>

<li><a href="/" class="twitter-big">Twitter</a></li>

<li><a href="/" class="linkedin-big">Linkedin</a></li>

<li><a href="/" class="stumble-big">Stumbleupon</a></li>

<li><a href="/" class="facebook-big">Facebook</a></li>

<li><a href="/" class="gplus-big">GPlus</a></li>

<li><a href="/" class="flickr-big">Flickr</a></li>

<li><a href="/" class="pinterest-big">Pinterest</a></li>

</ul>

</div>

Kode CSS

.set-2 ul li {
  display: inline-block;
  margin: 10px 0 0 3px;
}
.set-2 a:active {
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
}
.set-2 a {
  position: relative;
  color: #ffffff;
  text-decoration: none;
  font-family: 'Oswald';
  display: block;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  font-size: 16px;
  padding: 11px 15px 10px 45px;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}
a.twitter-big {
  -webkit-box-shadow: 0 6px 0 #2695BC;
  box-shadow: 0 6px 0 #2695BC;
}
a.twitter-big {
  background: #2CA9E1;
}
a.twitter-big:active {
  -webkit-box-shadow: 0 2px 0 #2695BC;
  box-shadow: 0 2px 0 #2695BC;
}
a.twitter-big:before {
  background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/twitter.png") no-repeat center center;
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  left: 10px;
  top: 18%;
}
a.facebook-big {
  -webkit-box-shadow: 0 6px 0 #293F63;
  box-shadow: 0 6px 0 #293F63;
}
a.facebook-big {
  background: #3B5997;
}
a.facebook-big:active {
  -webkit-box-shadow: 0 2px 0 #293F63;
  box-shadow: 0 2px 0 #293F63;
}
a.facebook-big:before {
  background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/facebook.png") no-repeat center center;
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  left: 10px;
  top: 18%;
}
a.pinterest-big {
  -webkit-box-shadow: 0 6px 0 #8C151B;
  box-shadow: 0 6px 0 #8C151B;
}
a.pinterest-big {
  background: #CD1D1F;
}
a.pinterest-big:active {
  -webkit-box-shadow: 0 2px 0 #8C151B;
  box-shadow: 0 2px 0 #8C151B;
}
a.pinterest-big:before {
  background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/pinterest.png") no-repeat center center;
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  left: 10px;
  top: 18%;
}
a.gplus-big {
  -webkit-box-shadow: 0 6px 0 #141412;
  box-shadow: 0 6px 0 #141412;
  position: relative;
}
a.gplus-big {
  background: #353631;
}
a.gplus-big:active {
  -webkit-box-shadow: 0 2px 0 #141412;
  box-shadow: 0 2px 0 #141412;
}
a.gplus-big:before {
  background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/gplus.png") no-repeat center center;
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  left: 10px;
  top: 18%;
}
a.rss-big {
  -webkit-box-shadow: 0 6px 0 #C64802;
  box-shadow: 0 6px 0 #C64802;
}
a.rss-big {
  background: #FF6501;
}
a.rss-big:active {
  -webkit-box-shadow: 0 2px 0 #C64802;
  box-shadow: 0 2px 0 #C64802;
}
a.rss-big:before {
  background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/rss.png") no-repeat center center;
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  left: 10px;
  top: 18%;
}
a.linkedin-big {
  -webkit-box-shadow: 0 6px 0 #005377;
  box-shadow: 0 6px 0 #005377;
}
a.linkedin-big {
  background: #0073B2;
}
a.linkedin-big:active {
  -webkit-box-shadow: 0 2px 0 #005377;
  box-shadow: 0 2px 0 #005377;
}
a.linkedin-big:before {
  background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/linkedin.png") no-repeat center center;
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  left: 10px;
  top: 18%;
}
a.stumble-big {
  -webkit-box-shadow: 0 6px 0 #B7371D;
  box-shadow: 0 6px 0 #B7371D;
}
a.stumble-big {
  background: #EA4B24;
}
a.stumble-big:active {
  -webkit-box-shadow: 0 2px 0 #B7371D;
  box-shadow: 0 2px 0 #B7371D;
}
a.stumble-big:before {
  background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/stumble.png") no-repeat center center;
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  left: 10px;
  top: 18%;
}
a.flickr-big {
  -webkit-box-shadow: 0 6px 0 #C10E78;
  box-shadow: 0 6px 0 #C10E78;
}
a.flickr-big {
  background: #FC1090;
}
a.flickr-big:active {
  -webkit-box-shadow: 0 2px 0 #C10E78;
  box-shadow: 0 2px 0 #C10E78;
}
a.flickr-big:before {
  background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/flickr.png") no-repeat center center;
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  left: 10px;
  top: 18%;
}

Perhatian!
Gantikan link image dengan link gambar hostingan kalian sendiri guna keamanan & kenyamanan ;) Demo and resource by

Satu lagi tuts sosial media dengan gaya bergulir by D-Copy Blog
Happy coding \m/

Make Social Media Icons With CSS3 Animated

2013-04-30T20:00:00.000+07:00

Ada tutorial ringan membuat link share sederhana dengan sentuhan efek hover. Tampilan awal akan terlihat biasa saja, ketika di hover akan terlihat efek hover dengan gambar berwarna. Beberapa tut's serupa dengan varian berbeda

Cuma ada 4 buah link tujuan, yaitu ke RSS,tiwtter,facebook dan google plus. Jika kalian mau menambahkan icons/links berarti harus buat sendiri gambarnya yah :d

Markup HTML

<div class='social-wrap'>

<ul>

<li><a class='rss' href='YOUR-LINK' target='_blaank'>Rss</a></li>

<li><a class='twitt' href='YOUR-LINK' target='_blaank'>Twit</a></li>

<li><a class='fb' href='YOUR-LINK' target='_blaank'>FB</a></li>

<li><a class='google_p' href='YOUR-LINK' target='_blaank'>G+</a></li>

</ul>

</div>

Kode CSS

.social-wrap {
margin: 0px;
padding: 0px;
}
.social-wrap ul li{
list-style: none;
}
.social-wrap li a {
margin: 0px 5px 0px;
width: 60px;
height: 60px;
float: left;
text-indent: -99999px;
border: solid 1px #555;
border-radius: 15px;
-webkit-border-radius: 15px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
}
.social-wrap li a.fb {
background: #fff url(http://4.bp.blogspot.com/-njqMpTvxYbs/UFM2yXm-AnI/AAAAAAAAEFU/yfm_dKxQ2hs/s1600/facebook.png) no-repeat -0px -88px;
}
.social-wrap li a.fb:hover {
background: #fff url(http://4.bp.blogspot.com/-njqMpTvxYbs/UFM2yXm-AnI/AAAAAAAAEFU/yfm_dKxQ2hs/s1600/facebook.png) no-repeat -0px -0px;
}
.social-wrap li a.twitt {
background: #fff url(http://2.bp.blogspot.com/-BtalCDk0UGg/UFM206t5yfI/AAAAAAAAEFk/1cwjqImigQo/s1600/twitter-1.png) no-repeat 0px -88px;
}
.social-wrap li a.twitt:hover {
background: #fff url(http://2.bp.blogspot.com/-BtalCDk0UGg/UFM206t5yfI/AAAAAAAAEFk/1cwjqImigQo/s1600/twitter-1.png) no-repeat 0px 0px;
}
.social-wrap li a.google_p {
background:#fff url(http://1.bp.blogspot.com/-qITbsA3n7_w/UFM2z36eMnI/AAAAAAAAEFc/PK9Cmf7JZd4/s1600/google.png) no-repeat 0px -88px;
}
.social-wrap li a.google_p:hover {
background: #fff url(http://1.bp.blogspot.com/-qITbsA3n7_w/UFM2z36eMnI/AAAAAAAAEFc/PK9Cmf7JZd4/s1600/google.png) no-repeat 0px 0px;
}
.social-wrap li a.rss {
background:#fff url(http://1.bp.blogspot.com/-xmXWc6_8mxw/UFM21nVC47I/AAAAAAAAEFs/Ydce5M-vkvw/s1600/twitter.png) no-repeat 0px -88px;
}
.social-wrap li a.rss:hover {
background: #fff url(http://1.bp.blogspot.com/-xmXWc6_8mxw/UFM21nVC47I/AAAAAAAAEFs/Ydce5M-vkvw/s1600/twitter.png) no-repeat 0px 0px;
}

Happy coding \m/

Activate Blogger and Google+ Comments System Together

2013-04-29T11:46:00.000+07:00

Ada seorang blogger yang melakukan snippet hack terhadap google comments system. Tanpa mesti melakukan pengkatifan Use Google+ Comments on this blog ? kalian bisa mengaktifkan fitur google plus comment. Lebih hebat lagi hack ini mengikutsertakan default blogger comment yang dipadukan dengan teknik toggle Dengan teknik tersebut maka komentator dapat memilih mau berkomentar dengan format komentar google+ atau bawaan blogger ;)

PENTING: Untuk membuat Google plus dan komentar blogger muncul bersama-sama, bahwa postingan harus memiliki setidaknya 1 komentar. Posting yang memiliki komentar 0 akan terus menampilkan sistem komentar default blogger. Ingat: (Tidak perlu untuk aktifkan komentar Google+ dari pengaturan anda! Jika anda telah mengaktifkan menonaktifkannya dulu sebelum menerapkan tutorial ini.mybloggerlab

Langkah pertama

Lakukan terlebih dahulu Download full template

Langkah kedua
Buakalah halaman berikut dan ikuti saja langkah-langkah selanjutnya dari sana. Soalnya takut bentrok sama emoticon jiga gue menjabarkan kode-kode yang ada. Mudah kok tinggal ganti-ganti doang tagging Blogger Xpertise or goes to My Blogger Lab
Jika berhasil sobat tidak kehilangan komentar bawaan dari blogger dan mengkatifkan komentar google+ tanpa harus melakukan setting activate dulu.
Good luck :)

Source keren lagi mengenai membuat sistem komentar google plus dengan teknik API Google Pizcos.net and Ayuda Bloggers

Live Preview on Post Area for Blogger

2013-04-26T21:00:00.000+07:00

Aartikel tutorial kali ini akan sedikit ekstrim! Cocok buat blogger yang suka menerapkan live demo di area postingan? Sebelumnya Koben pernah berbagi trik serupa, khusus berlaku hanya untuk demo kode CSS CSS preview in post area for blogger. Harap diperhatikan yah, cocok untuk blogger yang suka akan tingkat kesulitan dalam menulis. Mengapa demikian karena memang repot. Dikatakan ekstrim live preview demo on area post sekarang disebabkan akan membawa 2 atribut besar yaitu iframe dan textarea! Hal-hal yang perlu dilakukan jika memang berminat memasang snippet kode

Backup Full Template jangan pernah lupa yeee.

Letakan kode CSS di tempat semestinya

#HTMLEditBox {     width: 100%;     height: 15em;     background: #EEE;     border: dashed 1px #000; } #updateFrame {     width: 100%;     height: 13em;     border: solid 1px #000; }

Masukin JavaScript berikut diatas tag </body>

<script>
//<![CDATA[
var old='';var isSaved=true;var firstTime=true;function update(){if(!isSaved){window.onbeforeunload=function(){return'You have unsaved changes. Are you sure you want to leave?';}}var docObj=window.frames['updateFrame'].document;var textarea=document.getElementById('HTMLEditBox');if(old!=textarea.value){if(firstTime){firstTime=false;}else{isSaved=false;}old=textarea.value
docObj.open('text/html','replace');docObj.write(old);docObj.close();}window.setTimeout(update,150)}
window.onload=function(){document.getElementById('jsCheck').style.display='inline';document.getElementById('HTMLEditBox').select();update();}
//]]>
</script>

Markup HTML ketika mau memostingkan

<div id="jsCheck" style="display: none"> <textarea id="HTMLEditBox" rows="10">  ------ ADD CODE HERE ------   </textarea> <iframe name="updateFrame" id="updateFrame"> <p>Sorry, your browser does not support the Real Time HTML editor. We recommend you upgrade your browser.</p> </iframe> </div>

Trik penulisan...

Selesaikanlah terlebih dahulu semua ketikan postingan kita. Karena atribut textarea akan merender baris menjadi <br /> Oleh karena itu selesaikan dulu semua acara mengetik. Kemudian lihat ke sebelah kanan (bagian bawah) yg bertuliskan Options. Pencet Options pilih opsi Use <br> tagLive preview kali ini support terhadap syntax script juga b-) Pada tulisan ------ ADD CODE HERE ------ kodenya di phrase dulu ;) Nanti nggak jalan kalau tidak di convert dulu ya :p
DEMO kalau jalan :d
Mix script by Taufik Nurrohman. Resource: www.timsfreestuff.com/HTMLEditor

Add Dynamic Rotate Effect in Blogger use CSS3

2013-04-24T21:00:00.000+07:00

Koben mau berbagi trik ekstrim nih. Sangkin ekstrimnya bisa membuat para pengunjung blog kalian melongo :d Saya akan memberitahukan bagaimana cara membuat blog kita berputar-putar 360° Tenang saja, tapi berputarnya tidak akan terus menerus, cuma satu kali putaran penuh setiap membuka konten yang ada pada blog kita ;))
Karena trick ini sangar extreme, tetapi tidak dengan kodenya! Kita hanya perlu memasukan segelintir kode CSS saja dengan metode
Add a GadgetHTML/JavaScriptScreenshotKodenya bos

<style>
  @-moz-keyframes roll {
    100% {
      -moz-transform:rotate(360deg);
    }
  }
  @-o-keyframes roll {
    100% {
      -o-transform:rotate(360deg);
    }
  }
  @-webkit-keyframes roll {
    100% {
      -webkit-transform:rotate(360deg);
    }
  }
  body {
    -moz-animation-name:roll;
    -moz-animation-duration:4s;
    -moz-animation-iteration-count:1;
    -o-animation-name:roll;
    -o-animation-duration:4s;
    -o-animation-iteration-count:1;
    -webkit-animation-name:roll;
    -webkit-animation-duration:4s;
    -webkit-animation-iteration-count:1;
  }
</style>

Happy coding \m/

Resource: www.allbloggertips.com/2013/04/add-dynamic-and-cool-rotate-effect-in.html

April MOP!!!

2013-04-23T21:00:00.000+07:00

Jalan-jalan yuk mencari sesuatu. Kita mulai dengan acara bereksperimen ria karya Yair Even-Or http://dropthebit.com/category/css-experiments/ All postnya juga keren-keren tuh. Kembali koleksi trik hover image berikut patut kalian baca http://www.dezineguide.com/tutorial/15-free-css3-image-hover-effects/ Kumpulan artikel CSS tutorials 7 jQuery script masih tetap mempesona http://designrfix.com/resources/css-tutorials Jangan ketinggalan informasi terhangat di bulan april untuk para designer http://www.webdesignerdepot.com/2013/04/whats-new-for-designers-april-2013/ Genjot skill kita dengan beragam tools untuk urusna design http://www.designyourway.net/blog/resources/new-web-design-tools-that-you-need-to-check-out/

Membersihkan kode CSS agar bersih dan cepat terbca oleh search engine http://topcoat.io/ Tips dan trik seputar dunia HTML5 dibungkus menjadi satu paket artikel apik http://designrfix.com/resources/html-tutorials Jika dirasa kurang, hajar lagi bro http://cssauthor.com/25-useful-html5-and-css3-tutorials-techniques-and-examples/ Dongkrak ilmu CSS dengan membaca 34 free open source css code snippets for developers http://webdesignbloog.wordpress.com/2013/04/22/34-free-open-source-css-code-snippets-for-developers/ Pilihan dari web codepen

http://codepen.io/new/pen/IrDkc
http://codepen.io/nrose/pen/KrnGq
http://codepen.io/summers1981/pen/kzCqG
http://codepen.io/achudars/pen/lIHmn
http://codepen.io/mnafricano/pen/FIqyi

Dua artikel membuat menu keren full stylish http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/ & http://jasonweaver.name/lab/flexiblenavigation/ Breadcrumb Css3 navigation http://thecodeplayer.com/walkthrough/css3-breadcrumb-navigation & http://semurjengkol.com/pure-css3-breadcrumb-navigation-menu/ Bonus http://jsdo.it/teetteet/97pM, http://www.htmlslicemate.com/, https://developer.mozilla.org/en-US/demos/detail/artify & http://www.html5rocks.com/en/tutorials/masking/adobe/
Happy walking \m/

Add Google Plus Comments in Blogger Customize Template II

2013-04-22T14:30:00.001+07:00

Ternyata memang terjadi kendala disana-sini dalam memasang google plus system comments. Masalah lebih terasa jika kita menggunakan customize template! Koben akan berbagi kembali resource bermanfaat bagaimana cara memasang komentar google plus tanpa mengkatifkan
Use Google+ Comments on this blog ?
Basic kode untuk menanamkan Google+ Komentar pada setiap website atau blog.

<script src="https://apis.google.com/js/plusone.js"></script>

<div class="g-comments"

data-href="[URL]"

data-width="642"

data-first_party_property="BLOGGER"

data-view_type="FILTERED_POSTMOD">

</div>

Source link, dibaca ya how to add google+ comments to any website
Gantikan kode data-href="[URL]" menjadi begini
expr:href="data:___post.canonicalUrl"
Jangan pakai ___ bentrok sama emoticon :p Lihat deh muncul tidak? Urusan penempatan kode silahkan diatur-atur karena karateristik setiap template pasti berbeda. Kode yang lebih ekstrim lagi khusus buat blogger dapat berbentuk seperti

<b:if cond='data:___post.allowNewComments'>
     <h4>Commentars on GooglePlus</h4> 
    <div class="comment-form">
        <script src="https://apis.google.com/js/plusone.js"></script>
        <div class="g-comments" expr:___data-href="data:___post.url" data-width="600" data-first_party_property="BLOGGER" data-view_type="FILTERED_POSTMOD"></div>
    </div>
</b:if>

Please don't use ___ Read source here tambahkan komentar ke halaman google+ :d

Jika masih tidak berjalan, satu lagi deh source yg dapat menjadi alternatif, meluncur add komentar pada customize template :))
Versi indonesia dari master Taufik Nurrohman Mengaktifkan Fitur Komentar Google+ (Untuk yang Gagal) dari kang Ismet Gagal Pasang Komentar Google+ ? Ini Solusinya.
Good luck \m/

Add Hyperlink Google Plus Comments in Blogger

2013-04-20T21:00:00.000+07:00

Bagaimana dengan fitur google system comments? Apakah kalian suka atau tidak, ya tergantung pendapat individu jika masalahnya itu. Melihat para komentar tentang bringing google+ comments to blogger bervariasi! Ada yang takut loadingan menjadi berat, tidak sreg dengan template dsb :d Koben akan memberi solusi bagaimana fasilitas komentar google plus dapat terpakai di blog kita tanpa mengaktifkan fitur tersebut?
Berawal dari mempelajari keunikan link blogger gue melakukan eksperimen ria. Blogger blogspot mempunyai syntax hyperlink lebih luasnya links instant for blogger yang begitu unik. Berangkat dari keunikan tersebut maka terciptalah beberapa snippet terhadap syntax hyperlink:

Trik menanamkan hyperlink google+ comments system ke dalam blog sama halnya dengan link koemntar default blogger jaman dulu. Ex: Poskan Komentar Seperti itu jadinya, dan yang terlihat pasti komentar google plus ;)) Bagi sobat yang memasang komentar blog versi comment phân cấp cho blogger hasil posisi reply comment akan tampak sama dengan google plus system comments! Bedanya cuma posisi isi komentar komentator :d

Blogger Comments	Google+ Comments

Masukan syntax hyperlink berikut ke dalam template blog kalian! KODENYA

Gantikan XXXXXXXXXXXXXXXXXX dengan blogID masing-masing. Jika kepingin lihat live demonya, silahkan buka satu halaman postingan blog ini. Lihat di atas kotak komentar!Demikian postingan trik syntax link blogger semoga berkenan :)
Happy comment \m/

Enable Google Plus Comments in Blogger Customize Template

2013-04-19T14:59:00.000+07:00

Hai blogger, baru saja kemarin perombakan terjadi pada bagian html editor template blogger! Sekarang google selaku pengembang blog berbasis blogspot sudah mengeluarkan lagi terobosan terbaru di bagian comments Berikut beberapa link informasi resmi mengenai mergernya comments google+ dengan comments blogger:

Sebelum masuk ke acara bagaimana cara mengaktifkan comments google+ agar berkerja di blog, ada beberapa hal penting yang mesti diperhatikan oleh kita.
[-] Threaded Comments II for Blogspot.
Bagi sobat yg sudah mengkatifkan sistem threaded comment, seluruh kode & javascript tidak akan berkerja lagi.
[-] Emoticon For Blogger.
Hack penanaman emoticon pada sesi komentar akan turn off alias tidak berfungsi lagi.

Mungkin yang terakhir kita akan disibukan dengan harus membersihkan kode-kode CSS dan script yg tidak terpakai lagi di dalam blog kita! Lantas langkah apa yg mesti di lakukan terlebih dahulu sebelum benar-benar memasang comments google+ tertanam ke comments blogger? Kita harus mempelajari untung ruginya dulu ;)
Kerugian
Kehilangan beberapa hack/snippet yg sudah kita lakukan di bagian komentar. Menghilang tampilan comments (Published / Spam) yg ada di dashboard!
Keuntungan
Kolom komentar terlihat baru, terintegrasi langsung ke halaman google+, fitur reply sudah tertanam, tombol g+ sudah ada di dalam bagian komentar, bisa memasukan & melihat link postingan yg kita ikuti, Apa-apa yg terjadi di google+ akan terlihat juga di blog kita! dll :d

Before	After

Kekurangan dari New google+ commenting system

   Google+ ready stock - Untuk membuat komentar di blog, pembaca harus memiliki akun Google. Jika mereka tidak memiliki, mereka akan dipaksa untuk membuat akun Google sebelum mereka dapat mengomentari blog. Pengomentar tidak akan lagi mendapatkan pilihan untuk masuk menggunakan OpenID, atau membuat komentar anonim.
   Pilihan Moderasi - Saat ini, default blogger memiliki opsi untuk menyetujui dan menolak komentar yang ataupun tidak akan tampil di blog. Tanpa mekanisme moderasi yang tepat, maka akan lebih sulit untuk berurusan dengan spammer.
   Widget recent comment - Widget recent comment yang bekerja pada komentar blog mungkin tidak bekerja dengan baik karena ini tergantung pada komentar blogger.
   Update: Sistem komentar baru memiliki beberapa pilihan untuk menangani komentar bernada spam. Google menambahkan secara otomatis dan akan menyembunyikan komentar yang menurutnya spam. Kita dapat meninjau komentar tersembunyi dengan mengklik blue review comments bar.Kita dapat menghapus komentar dengan meng-klik pada V di sisi kanan komentar.

Keuntungan dari New Google + Commenting System

   Lihat semua diskusi tentang Blog pada satu tempat sekaligus. - Ketika seseorang berbagi posting kita di google +, akan muncul di google plus komentar.
   Pilihan untuk komentar publik atau pribadi untuk Lingkaran mereka - Google + sistem komentar memungkinkan pembaca untuk komentar publik atau pribadi untuk Lingkaran mereka di Google+.
   Melihat Komentar - Pembaca dapat memilih untuk melihat semua komentar, atau hanya komentar atas atau hanya yang dibuat oleh orang-orang di kalangan mereka
   Ada Komentar tidak akan hilang - Tidak seperti komentar Facebook, semua komentar Blogger lama Anda masih akan terlihat di Blog Anda dan jumlah komentar tidak akan hilang.
   Terlihat lebih baik - Sistem komentar baru benar-benar bersih dan terlihat jauh lebih baik daripada standar Blogger.

Cara Mengaktifkan Blogger Comments ke Google+

Langkah mengaktifkan comment google+ terhadap blog pada dasarnya ada dua langkah pokok.

Mengintegrasikan blog kita dengan google plus integrate your blog with google plus.
Hidupkan (turn on) google+ comments.

Setelah blog kita terintegrasi dengan google+, kita akan dapat menggunakan google+ comments.Setelah langkah ini dilakukan, kalian akan melihat google+ comment system di blog. Jika tidak muncul, maka harus melakukan tweak template untuk memunculkannya. Jika tidak mau mengubah kode HTML, cara termudah adalah mengembalikan widget templates ke default (kalian akan kehilangan kustomisasi yang dibuat untuk Blog Post Widget jika melakukan ini)

LAKUKAN BACKUP TEMPLATE TERLEBIH DAHULU, TAKUT TERJADI APA-APA BOOO!

Untuk melakukan revert widget templates to default ikuti langkah² berikut
Go to Template > Edit HTML and click on the Revert Widget Templates to default button, select the Blog1 Widget and click on the Revert Selected widgets button.Jika sobat masih tidak mau melakukan tweak terhadap template, maka jalan satu-satunya adalah melakukan penambahan kode secara manual!

Langkah-langkah mengaktifkan google+ comment system ke dalam custom blogger template

Go to Template > Edit HTML
Klik di dalam template editor window, tekan Ctrl + F dan temukan kode berikut <b:includable id='comment-form' var='post'>
Klik tanda panah untuk memperluas kode widget.
Tambahkan kode berikut sebagai baris berikutnya (tepat di bawah langkah ke 2) KODENYA
Save template.
Pergi ke google+ tab dan aktifkan google plus commenting system.
DONE.

Opsi baru cara mengaktifkan comments google plus...
Cari yang terlihat seperti ini (Press Ctrl + F dan cari threaded_comments or comments)Ganti tulisan yg diberi tanda dengan<b:include data='post' name='comment_picker'/>Good luck :)
Resource: blogger widgets & blogger how
Happy blogging \m/