Tutorial Blog for Stylish Blogger

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

Aplikasi Photo Editor Simple & Usefully

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

Menghias photo membuat gambar secara profesional dibutuhkan skill memadai. Skill tersebut pasti menggunakan sebuah aplikasi. Aplikasi itu tidak lain bisa berupa image editing softwares, online image editing tools, dll :d Kebanyakan orang dalam urusan edit-mengedit image dipercayakan kepada adobe photoshop or corel. Jika sobat yang sudah familiar dengan aplikasi photoshop, tetapi tidak ada di komputer kalian, maka solusinya memakai editor online like photoshop. Poin dari kegiatan edit image yaitu menguasai salah satu apps image editor :p
Beben Koben si bloglang anu ganteng kalem tea mau berbagi aplikasi offline photo editor sederhana mirip cam frenzy apps!

Karena sederhana aplikasi ini, maka fitur edit gambar yg ada juga simple. Tapi dibalik kesederhanaan itu ada fitur lain yg gue pikir cukup untuk sebuah sarana edit-editan.
Spesifikasi:

I/O Input/Output

data URI

Scale area
Crop side
Colors side

Dari semua spesifikasi yg ada, satu fitur yg gue ke sengsem bos...ada history. Jadi kalau salah bisa back gito loh :))

Yang membuat photo-editor ternyata memang master! Lihat saja konten webnya Ondřej Žára
Happy editor \m/

Get Free Moot Best Forums and Commenting

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

Ternyata saya belum pernah memosting artikel mengenai forum. Sebenarnya untuk mengajukan sebuah pertanyaan banyak cara yang dapat kita gunakan. Paling umum di kalangan pasti memakai teknik my contact :d Dari pihak google sendiri ada beberapa fasilitas yg bisa kita gunakan untuk menjadi sebuah area tanya-jawab. Contoh baru-baru Google+ Page & Google Groups. Penyedia jasa lain patut dipertimbangkan, mengingat halaman google plus and google group lumayan menyedot bandwith bagi koneksi internet lemot :">

Moot adalah layanan web baru dan gratis untuk menciptakan ruang diskusi pada setiap halaman web. Setup yang cepat. Layanan ini disajikan dengan kode HTML yang unik dan sekali tertanam ke dalam halaman web, Moot langsung muncul. Btw, Moot full memakai atribut HTML penuh dan bukan atribut IFRAME. Hal ini membuat kustomisasi beroperasi. Kita dapat menerapkan CSS atau bahkan mengubah interaksi melalui JS. Layanan ini menyediakan satu feed posting, pengguna dapat mengikuti sejumlah topik, melihat pengguna online lain atau membuat pencarian cepat.
Ini bisa menjadi diskusi yang datar atau threaded, bekerja secara real-time (ada refresh diperlukan), memiliki panel yang mudah digunakan kontrol dan mendukung layout responsif.

Kenapa Koben memilih MOOT, karena ringan, full customize CSS & JS, sesi comment keren, Embeddable, Styleable, Realtime, Free dan banyak lagi <- walau masih beta :d Embed yang diberikan berupa HTML terdiri dari link CSS dan script. Memudahkan kita dalam memasukan ke dalam blog. Link tunggal sudah pasti ada Beben Koben forums in Moot Apakah kalian tertarik dengan si moot! Jangan banyak mikir, buruan bikin sesuaikan dengan nama blog kalian. Keburu sama orang lain dibuat nanti :))

Pemasangan embed moot ke dalam area postingan blog
Setelah kalian buat, nanti ada seonggok kode HTML. Ambil semua kode tersebut, simpan dulu di mana kek. Perhatikan markup berikut

<link rel="stylesheet" href="http://cdn.moot.it/1.1/moot.css"/>
<style>
.m-logo {
    display:none;
}
.m-nav-account {
    display:inline-block;
    float:right;
    color:#fff;
}
.m-header {
    background-color:#472915;
}
.m-header span {
    color:#fff;
    font-size:17px
}
.m-navi a.m-selected {
    background-color:#debe94
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdn.moot.it/1.1/moot.min.js"></script>
<a class="moot" href="http://api.moot.it/beben-koben"></a>

Ramuan diatas masukan ke area postingan dengan mode HTML.
jQuery script jika sudah tertanam di dalam template blog, bisa tidak dipakai. Biar lebih aman dipakai saja!

<style>



blah blah blah



</style>

Snippet kecil yg gue terapkan. Sobat paham bagaimana mengsnippet CSS, lakukan sesuka hati.<a class="moot" href="http://api.moot.it/beben-koben"></a>Gantikan dengan kepunyaan sobat.
Good luck :)

Happy forum \m/

Two Application HTML Display & Search Image

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

Ternyata sambutan artikel mengenai Aplikasi HTML lumayan responsive. Apalagi aplikasi tersebut dapat berkerja secara offline ;)) Sekarang Koben akan berbagi online application tentang search and display image! Display image dengan memasukan keyword di dalam aplikasi .html yang akan ditampilkan berganti-ganti dengan resolusi berbeda-beda. Hasil generate tampilan gambar disesuaikan dengan speed dan image yg memang sudah terindex oleh search engine. Begini terlihat pada screenshotItu penampakan random image dengan keyword beben-koben :ddemo & downloadSave Page As dengan ekstension .html Buka pada notepad, tekan Ctrl + F cari kata beben-koben gantikan deh terserah. Sekarang bagian search image.

demo & downloadJika mau mengganti keyword, buka kembali di notepad cari kata beben koben
Source: jsdo.it/openidev/1Crv, jsdo.it/openidev/3Cr9
Happy blogging \m/

Generator Special Characters Offline

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

Sobat kenal dengan istilah special characters. Jika belum tahu silahkan baca halaman What is meant with special characters? Tulisan yang memiliki karakter khusus (spesial) dalam penulisannya. Hal ini sangat erat sekali dengan blogger karena, format bahasa template blogger memakai mode bahasa karakter spesial HTML. Contoh nyata yaitu ketika kita akan menuliskan script/kode di area postingan harus terlebih dahulu melewati proses phrase/convert code?
Ada beberapa cara menuliskan special characters, manual, memakai generator, dan aplikasi bawaan windows. Metode manual dengan mengetikan tombol khusus pada keyboard dengan perintah yg sudah ditentukan. Cobalah pencet pada kibor kalian Alt + 38 maka akan menghasilkan karakter spesial & jika di convert jadi begini &

Hasil convert itulah yg dibutuhkan dalam mengedit-ngedit kode template, mosting kode di postingan secara umum menulis karakter khusus agar support terhadap directory bahasa HTML/XHTML.
↯ Cara manual, kalian dapat lihat kodenya di sini special ALT & ASCII HTML character.
↯ Memakai tools bisa coba hasil karya master Taufik Nurrohman Special character generator atau Copy & paste special characters.
↯ Dari windows pencet Win Icon + R (Run Command)kemudian ketikan CHARMAP.Koben mau berbagi aplikasi HTML offline mirip generator tools master Taufik Nurrohman tetapi dengan gaya drop down select :d

demo & download
Save Page As dengan ekstension .html
www.cdolivet.com/editarea/editarea/exemples/exemple_full.html
Happy blogging \m/