This is my Style, How you Style

Berawal dari tidak ada ide mau posting apaan, ya sudah melakukan program menjelajah konten di site orang :d Sekarang gue lagi doyan melihat-lihat project para developer & programer yang sudah open source Lumayan untuk koleksi :d Ternyata tidak semudah membalikan telor ceplok walau sudah terpampang kode-kode tinggal mencomot agar tercipta sebuah karya super dahsyat!
➀ ➁ ➂ ➃ ➄ ➅ ➆ ➇ ➈ ➉ ~ Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ
Seorang master ahli satu bidang ternyata sama mereka juga berawal dari NOL. Seru baca-baca arsip, jadi tahu sejarah seorang penulis script :) Jujur Koben lebih sering membaca konten orang luar negeri dari pada lokalan :)) Mereka enaknya konsekuen, fokus dan besar hati membagikan ilmunya tanpa embel-embel semrawut!
Lain lagi kalau sudah menclok mendarat pada blog/web yang kontennya berisikan software atau hack-hack :-" Anteung download dan praktek mas brooo b-) Jadi males mosting =))

Link yg akan gue bagikan ini silahkan kalian eksplore sendiri dengan gaya masing² Address berikut tidak terfokus pada tutorial, demo atau trik saja. Cermat dalam memilih, buka setiap link yg ada, dapatkan hasilnya :x

http://devwws.com/resources

http://www.davidjuth.com/code.aspx

http://www.frequency-decoder.com/

http://appsites.com/

http://www.jqueryrain.com/2012/07/best-jquery-rss-feed-reader-tutorial-plugin-examples/

http://www.ultramegatech.com/demo/noty/index.htm

http://textism.com/tools/textile/

http://jquery.vostrel.cz/reel

http://www.greywyvern.com/code/php/

http://kentbrewster.com/

http://ss64.com/

Selesai memosting artikel ini, saya juga masih mengkorak-korek apa yg ada di sana! Siapa tauk ketemu konten aneh & unik :"> Still update, dong forget to bookmark this link ;)
Ini baru contoh website Visualization Google News Aggregator keren punya full stylish b-)
Happy blogging \m/

Some Trick CSS from Selection Web

Dalam menyembunyikan sesuatu di area template mungkin teknik yang terkenal yakni memakai trick show/hide dan spoiler. Walau banyak juga sebenarnya ragam trik sembunyi² itu. Paling enak menggunakan plugin jQuery ;)) Koben saja tidak tahu ada berapa biji fitur hilang/muncul tertanam pada blog ini Example

Sekarang waktunya menggunakan variabel CSS dalam membuat hide-show technique in the content. Pasti sebagian sobat pernah ada yg melihat bagaimana hasil akhir penggunaan CSS dalam menghilangkan suatu objek :) Sebelum masuk ke acara bumbu, postingan kali ini akan mengajak sobat lebih dalam mengenal beberapa macam teknik CSS V.2 dan bbrp kreasi tutorial pilihan CSS3! Apalagi kalo bukan bagi² link resource for u :p DEMO...

Click Me!

Munere aliquid vis ea. Te congue ullamcorper per.

.clickable label {
    cursor: pointer;
    border-bottom: 1px solid #000;
    font-family: Arial, sans-serif;
}
.clickable .appear { 
    display: none;
    background-color: #000;
    color: #fff;
    padding: 10px;
}
.clickable input {
    display: none;
}
.clickable input:checked ~ .appear {
    display: block;
}

Markup HTML<div class="clickable">
<label for="UNIK-ID">Click Here!</label>
<br />
<input type="checkbox" id="UNIK-ID"/>
<div class="appear">KONTEN YANG DISEMBUNYIKAN IN THE PRET!!!</div>
</div>

Att:
UNIK-ID >>> Harus berbeda bila kalian mau memakai lebih dari satu konten yg akan disembunyiin!

Click Here!

Quas labitur volumus te duo, at per sonet detraxit evertitur.

Selesai deh, lihat hasil kerja :)
Read it:
http://www.seizedesign.com/tutorials/important-css-tutorials-for-the-designers/
http://www.tutoriallounge.com/2012/04/valuable-css3-tutorials-for-the-creative-designers/
http://inserthtml.com/codex/css-guide-welcome/
http://www.brunildo.org/test/
Happy CSS \m/

Add Recommend/Like Facebook for Blogger

Dari pada tidak update ini mah! Koben akan berbagi tutorial dari 2 keyword berikut plugin - facebook Gue akan membahas plugin facebook berkategorikan Recommendations Bar. Untuk memuluskan rencana pemasangan Recommendations Bar Facebook ke dalam blog, kalian harus mempunyai yang namanya APP_ID Facebook Sebenarnya ada 2 opsi dari plugin tersebut, Like & Recommend. Tinggal diatur saja menurut keperluan. Jika penjelasan gue kurang jelas dalam membuat aplikasi facebook untuk blog, coba baca versi Master Hendriyono Membuat aplikasi ini, tidak lain untuk mendapatkan APP_ID :)

Selesai dengan urusan app-id, saatnya kita melanjutkan ke langkah berikutnya yakni pengambilan kode/bumbu². Open it yo Facebook DevelopersPerhatikan pada opsi: URL of the article, Verb to display, Side & Domain. Hati² dalam mengisi karena akan berpengaruh besar pada snippet coded nanti :p Beres isi ini-itu, tekan tombol Get Code. Pasang script di atas/sebelum tag </body>Karena kode HTML yg akan dipasangkan akan bersifat memanggil link postingan, maka lakukan Expand Widget Templates cari code <data:_post.body/>

Masukan ramuan brkt<div class="fb-recommendations-bar" expr:_data-href="data:_post.url" data-read-time="30" data-action="like" data-side="right" expr:_data-site="data:blog.homepageUrl" data-num-recommendations="2"></div>Kalau muncul warning begini

Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.

itu tandanya App_id tidak cocok dengan blog yg dibuatkan APP :D
Lihat hasil kerja :)
Bagus dan uniknya plug-in ini bisa di buka/tutup ;))
Source by: http://www.latesthack.com/2012/06/add-official-facebook-recommendations.html
Happy plugin \m/

Looking for Editor HTML, Opensource and Free

Selain ilmu pengetahuan harus mumpuni, keberadaan tools/perangkat dalam menunjang aktifitas ngeblog tidak dapat dikesampingkan begitu saja. Coba bayangkan oleh sobat mau tahu kode warna magenta dalam bentuk HEX atau RGB tidak memakai tool generated color!
Beben Koben si bloglang anu ganteng kalem tea akan berbagi salah satu tools pendukung dalam aktifitas berblogging ria in the pret. Pernah dengar istilah WYSIWYG Sangat kental kaitannya fitur & fungsi tersebut dengan HTML editor Visualisasi WYSIWYG - HTML editor beragam macam jenis, ada yang untuk windows, online HTML, HTML software etc. Beragam fitur ditawarkan oleh para pengembang, namun kembali lagi kepada kita, seberapa jauh fungsi yang ada pada sebuah HTML-editor untuk kita. Canggih tapi tidak bisa pakainya buat apa juga :d

Koben mengangkat tema ini karena melihat ke depannya, ternyata dengan menguasai sebuah editor melatih menguasai teknik penulisan bahasa HTML. Tak ayal menuntun ke jenjang yg lebih tinggi yakni dunia WEB b-) Perhatikan ke-2 editor post blog blogspot berikut

Fokus pada gambar bagian sisi atas, fitur apa saja yg ada disana! Maka cari html editor yg mencakup fitur² yg ada pada editor blog! Lebih baik lagi cari editor support HTML5.
Setelah melakukan searching kesana-sini, Koben jatuhkan pilihan "Open source WYSIWYG editor for website" created by elRTE Silahkan lihat demo dan download langsung Try elRTE in action.

Berikut alternatif editor lain pilihanku:
http://maqetta.org/
http://bluegriffon.org/
http://www.tinymce.com/
http://www.html5-editor.org/
http://www.raptor-editor.com/demo
http://www.coffeecup.com/free-editor/
http://jejacks0n.github.com/mercury/
http://www.mirabyte.com/en/products/webarchitect/
Semoga berkenan, makin pandai :)
Happy editor \m/

Make Hidden Syntax Link

Beragam cara, trik dan langkah yang dilakukan oleh seseorang dalam merayu seseorang guna melakukan klik sebuah link. Biasanya selalu digunakan oleh pelaku PPC (Pay Per Click) Tak ayal sekarang dalam meninggalkan jejak link juga banyak menyisipkan link-link berbau affiliated! Sebuah hasil kreasi juga tidak lepas dari peranan kreatifitas kita dalam meramu kode-kode yg sudah ada agar menjadi satu bentuk karya yg kita inginkan.
Karena tidak ada postingan, maka Koben akan berbagi tips cara menuliskan link, ketika di sorot oleh cursor tidak akan terlihat kemana link tersebut akan berlabuh ;)) Cocok banget untuk mensisipkan links ajakan ke spam =)) Langkah tercepat menuliskan link tanpa diketahui target (disable) yaitu dengan teknik penulisan onclick Event

Sekarang coba sorot link berikut dengan cursor kalian Blog Bokep!!! Jika benar, maka tidak akan muncul keterangan link kemana akan landing. Biasanya keterangan berada dibawah pojok kanan/kiri browsingan.<a onClick='window.location="WTF-ADD-LINK-HERE";' style='cursor: pointer'>pret</a>Trik keren sudah banyak di luaran sana berserakan. Kembali lagi kepada kita mau dipakai atau tidak ;)
Kepingin buat kotak pencarian tapi males dengan kode² CSS & HTML? Ada solusinya dong...

Search by Google

<a href="javascript:q%20=%20%22%22%20+%20(window.getSelection%20?%20window.getSelection()%20:%20document.getSelection%20?%20document.getSelection()%20:%20document.selection.createRange().text);%20if%20(!q)%20q%20=%20prompt(%22Search%20for:%22,%20%22%22);%20if%20(q!=null)%20{var%20qlocation=%22%20%22;qlocation=(%22http://www.google.com/search?num=100&amp;newwindow=1&amp;q=site:%22%20+%20escape(location.hostname)+%22+%22+q+%22%22);window.open(qlocation);}%20void%200">Search for</a>
Ya sudah begitu saja postingannya, cuman refresh doang kok :D Bonusnya membuat link menggunakan variabel form action Cek this out []

DEMO

Video Panas

CSS Coded

.tombol {
border: none;
cursor: pointer;
color: #2288bb;
font-weight: bold;
background-color: #FFFFFF;
text-decoration: underline;
}

Markup HTML

<form target="_blank" method="get" action="WTF-ADD-LINK-HERE">
Video Panas
<input type="submit" title="YOUR TITLE" value="YOUR VALUE" class="tombol" />
</form>

http://dimox.name/examples/beautiful-3d-buttons-using-css3/
http://pehaa.com/wp-content/uploads/2012/02/tut_pinkonhead/index.html
http://etimbo.github.com/jquery-print-preview-plugin/example/index.html
Happy coding \m/

Just Write Not Post LoL

Online setiap hari tapi bingung mau update tentang apaan :p Perasaan masih di sekitaran itu-itu juga para master & developer berkarya. Dari pada tidak menulis, lebih baik Koben sharing hal kecil mungkin berguna bagi kalian! Gue akan berbagi kembali salah satu layanan google yaitu Google Books. Pernah berbagi juga cara Add Google Books to Blogger namun dari pihak google telah meniadakan embed untuk membaca buku google, yang nantinya akan di rujuk ke google play. Lagi-lagi negara Indonesia belum kebagian dalam mendukung operasional perangkat satu ini :p (masih di godok kale ma Om Google)
Oleh karena itu solusi terbaik ada disini. Buka halaman Google Books untuk memilih-milih buku mana yang jadi target bacaan kalian! Setelah itu buka halaman Google Books Downloader for Windows and Mac OS X installkan. Setelah terinstall ada contoh bagaimana kita mendownload buku dari embah google :) Setelah di download ada opsi pilihan penyimpanan mau berformat PDF, PNG or JPG. Ambil saja form PDF agar bisa disimpan di layanan google lainnya yaitu Google Drive

Penyimpanan data gratisan sebesar 5GB mas bro! Terserah deh mau apaan disimpan disana ;)) Contoh Koben nih76 Trik Rahasia Blogspot.pdfBagaimana tuh trik dan tips Beben Koben si bloglang anu ganteng kalem tea >:)
Perhatikan situs jejaring berikut Facebook, Twitter, StumbleUpon, Pinterest, Tumblr, Foursquare, YouTube, LinkedIn, Google+, Meetup, Path, Instagram and Flickr. Apakah kalian mengikuti semua? Bagaimana langkah tercepat melakukan settingan account kita di situs tersebut :-/ Free services Easily manage all your social network settings adalah solusinya :))
Master Koben, gimana membuat file ektension HTML menjadi PDF? Gampang sekali jawabannya, bisa memakai software ataupun jasa convert pdf online. Gue kasih softwarenya nih http://www.pdfarea.com/download/html-to-pdf.exe Aduh dari PDF kepingin jadi words? ~!@#$%^&*()_+

PDF to Word

Dari pada nanya terus, silahkan coba tools berikut Tools Convert. Bonusnya artikel menarik mengenai Creating a Slider Control with the HTML5 Range Input Enggak tauk juga apaan itu teh :d

5% %

Happy blogging \m/

Five CSS3 Hover Effects by Alessio Atzeni

Tidak tahu mau bilang apaan mengenai tutorial bertemakan hover image Secara khusus trick hover memang banyak sampai kepala mumet dibuatnya :d Siapa lagi jika bukan Master Mary Lou dari codrops team web yg selalu mengeluarkan trik edan punya :p Kelemahan dalam hal masakan mungkin terlalu banyak gaul dengan kode-kode HTML sehingga lupa sama bumbu dapur :))
Beben Koben si bloglang anu ganteng kalem tea kembali mau berbagi trick CSS3 hover effects created by Master Alessio Atzeni. Silahkan kunjungi web sumber dan download filenya dari sana ;)) Gue cuma mau menerangkan saja versi Indonesia :p Pada halaman demo terdapat 5 macam style hover efek (firsteffect, secondeffect, thirdeffect, fourtheffect and fiftheffect.css) Koben ambil opsi yg secondeffect.css

Ke semua gaya tersebut di tagging oleh default code .view CSS dasar yg mengcover keseluruhan lima macam effects hover!
KODE CSS

.viewImg {
   width: 300px;
   height: 200px;
   margin: 10px;
   overflow: hidden;
   position: relative;
   text-align: center;
   border: 5px solid #fff;
   box-shadow: 0px 0px 5px #333;
}
.viewImg .mask {
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   position: absolute;
}
.viewImg a.info {
   background: url(GAMBAR-SEARCH-ICON.PNG) center no-repeat;
   padding: 0;
   width: 20px;
   height: 20px;
   display: inline-block;
   text-indent:-9999px;
}

Aturlah width & height pada kode CSS baris pertama viewImg untuk menampilkan gambar yg akan tampak pada area postingan nanti. Sekarang tinggal memasukan bumbu CSS opsi secondeffect.

KODE SECOND-EFFECT

.second-effect .mask {
opacity: 0;
overflow: visible;
border: 0px solid rgba(0,0,0,0.7);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.second-effect a.info {
position: relative;
top: -10px;
opacity: 0;
-moz-transform: scale(0,0);
-webkit-transform: scale(0,0);
-o-transform: scale(0,0);
-ms-transform: scale(0,0);
transform: scale(0,0);
-webkit-transition: -webkit-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
-moz-transition: -moz-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
-o-transition: -o-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
-ms-transition: -ms-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
}
.second-effect:hover .mask {
opacity: 1;
border: 100px solid rgba(0,0,0,0.7);
}
.second-effect:hover a.info {
opacity: 1;
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
-o-transform: scale(1,1);
-ms-transform: scale(1,1);
transform: scale(1,1);
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}

Markup HTML atau penulisan syntax.<div class="viewImg second-effect">
<img src="BLAH-BLEH-BLOH.jpg" />
<div class="mask">
<a href="BLAH-BLEH-BLOH.com" class="info">Read More</a>
</div>
</div>Syntax HTML di setiap jenis hover effect berbeda. Bila sobat mau lebih dari 1 jenis gaya hover, maka tinggal tambahkan saja kode CSS di folder css dari data donwloadan pd web sumber (yang berakhiran .css)
Good luck :)

http://jsbin.com/ovajij

Bonus:
http://www.tangledindesign.com/blog/demos/css3-enhanced-galleries/
http://www.webdesignshock.com/css3-drop-shadow
Happy hover \m/