Menu of Tutorial now CSS and jQuery

Kadang kala ide muncul hanya dengan melihat sebuah konten! Hal sederhana dapat menjadi sesuatu yang begitu enak di lihat. Tidak salah, ternyata satu ide itu tidak datang dengan kebetulan, melainkan kerja otak yg sudah terbiasa dengan kegiatan tafakur :) Gue lagi² bertemu dengan tutorial seputar tagging input Satu hal yg menarik, kok kepikiran dapat ide itu! Sobat bisa lihat di cdpn.io/uldIj Di sini juga bisa kalau malas :D

Ketikan apapun ke dalam kotak, kemudian klik di luar area kotak, maka akan terlihat blur kan? Simple but full creativity b-)

#kotak {
font-family:sans-serif;
background:#545254;
color:#fff;}
.input-blur {
display:inline-block;
height:40px;
font-size:18px;
color:transparent;
text-shadow:0 0 8px #f5f5f5;
border:1px solid #555;
padding:2px;
outline:none;
width:250px;
background:#545254;
transition:text-shadow .2s, border .2s;
}
.input-blur:focus {
color:#fff;
text-shadow:none;
border-bottom:2px solid #f00;
}
.input-blur::-webkit-input-placeholder {
text-shadow:none;
}
.input-blur:-moz-placeholder { /* Firefox 18- */
text-shadow:none;
}
.input-blur::-moz-placeholder { /* Firefox 19+ */
text-shadow:none;
}
.input-blur:-ms-input-placeholder {
text-shadow:none;
}

Planning HTML<input type='text' class='input-blur' placeholder='Isi yang benar, awas salah!' />

Koben menemukan artikel CSS3 GRADIENTS menampilkan contoh beberapa warna gradients yg sudah jadi www.designskilz.com/css3-gradients. Melihat tampilan kode yg disembunyikan di balik konten, wow sungguh aneh tapi nyata. Hal itu yg akan AA share ;))

Syntax pemakaian akan lumayan banyak dan trick ini terintegrasi dengan jQuery script!

.area-code {
width: 100%;
height: 300px;
}
.code {
padding: 0;
margin: 0;
border: 0;
width: 100%;
resize: none;
height: 300px;
outline: none;
overflow: auto;
cursor: pointer;
font-size: 15px;
background: #EAEBE6;
font-family: "Courier New",Courier,monospace;
}
.muka {
cursor: help;
background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAaWIv8uCHNwpOJRwYUzw2_mbLn6in76GNMwdRCntRgQyr8J3r-mnCR_ngN-czlxPayaMrcMsD8IUbJl_YSMkPJQmtgWGYJvtrDEN2VfXjsG-vcu03cvS1qHXVOweu0w6x2oG4gMY7zT0/s800/Matrix.jpg) no-repeat center center;
}
.section {
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
-webkit-perspective: 600px;
-moz-perspective: 600px;
}
.section .front {
position: absolute;
top: 0;
z-index: 900;
width: 100%;
height: 300px;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateX(0deg) rotateY(0deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition:all .4s ease-in-out;
}
.section.flip .front {
z-index:900;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.section .back {
position: absolute;
top: 0;
z-index: 800;
width: 100%;
height: 300px;
-webkit-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(-180deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.section.flip .back {
z-index: 1000;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
}

Syntax HTML<div class="click section">
<div class="front">
<div class="area-code muka"></div>
</div>
<div class="back">
<div class="muka">
<textarea readonly="readonly" class="code">

------- YOUR CODED HERE -------

</textarea>
</div>
</div>
</div>Silahkan sobat tambahkan/rubah kode CSS yg ada sesuai keinginan. Panjang, tinggi, warna latar, gambar atau apapun.

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
  $('.click').click(function(){
    $('.flip').not(this).removeClass('flip');
      $(this).toggleClass('flip');
  });
});
$(".code").mouseover(function(){
  $(this).select();
});
//]]>
</script>

DEMO.

jsfiddle.net/bebenkoben/ND4C3/show

Ini kalau mau tools gradients generator sederhana, Koben kasih jsdo.it/laphroaig/z2lH & jsdo.it/gct256/gz0u

Happy coding \m/

Add ifvisible.js to make Invisible Blog Page

Sobat pasti sudah pernah mendengar tentang tutorial membuat energy saver or screensaver? Trik menutupnya layar monitor, eh eh kok kenapa jadi gelap begini yah :D Moouse digerakan, eh...kembali lagi seperti semula. AA akan berbagi trick serupa dengan itu, tetapi dengan teknik berbeda ;) Itung² ngisi hari minggu dengan artikel baru. Siapa tauk ada yg melongok ;)) Proses kerja rada-rada mirip juga, yang membedakan mungkin hanya pada script!
Source kode dan demo bisa sobat lihat:
Artikel sumber -------> serkanyersen.github.io/ifvisible.js
Demo -------> serkanyersen.github.io/ifvisible.js/demo.html

Seperi biasa Koben hanya membantu pemasangan ke dalam template blog :D Jika kalian paham akan script, maka pada artikel sumber bisa dipelajari bagaimana opsi² yg dapat di buat. Letakan script di atas tagging </body>
Original scripthttp://serkanyersen.github.io/ifvisible.js/ifvisible.jsMinimize script ifvisible.js

Letakan script pemanggil berikut tepat di bawah ifvisible.js

<script src="ifvisible.js"></script>

<script type="text/javascript">
//<![CDATA[
ifvisible.setIdleDuration(5);
 ifvisible.idle(function(){
  document.body.style.opacity = 0.1;
 });
 ifvisible.wakeup(function(){
  document.body.style.opacity = 1;
 });
//]]>
</script>

SAVE.

Sobat bisa berkreasi yg lain dengan merubah script document.body.style.___

Happy ifvisible \m/

Free CSS Vocabulary, Color Kuler Picker and JSON Post Editor

Ada 3 informasi ringan namun tetap berbobot yang akan AA Koben share buat kalian! Pertama dari dunia CSS Mungkin bagi pribadi sendiri hal sepele ini tidak pernah terpikirkan. Namun master Ville V. Vanninen sudah berbaik hati membuatkan CSS Vocabulary! CSS vocabulary adalah sebuah tool kecil untuk membantu belajar css. Konten memiliki beberapa contoh css di sebelah kiri dan css istilah di sebelah kanan. Mengklik pada hal dalam panel baik menyoroti item corresponging di panel lainnya. Seperti biasa sudah opensource, sobat bisa langsung menyikat tool tersebut ;))Files source:
* foolproof.me/posts/vvv/css-vocabulary << Original article.
* pumpula.net/p/apps/css-vocabulary << Demo.
* github.com/sakamies/css-vocabulary/archive/master.zip << Download via github.

Info ke dua mengenai tool color. Mirip dengan tool color kepunyaan adobe kuler! Color wheel picker similar to kuler kreasi John Curtis.Files source:
* codepen.io/social_quotient/details/ExgKG << Details.
* cdpn.io/ExgKG << Demo.
* codepen.io/social_quotient/share/zip/ExgKG << Download via codepen.

Info terakhir sedikit ekstrim tentang JSON post editor. Mau mengetik apapun, kita bisa langsung mendapatkan kode ber-format JSON di samping tentunya source kode basis HTML :-bd JSON Post Editor kreasi by Nate Wiley.Files source:
* codepen.io/natewiley/details/EvFnB << Details.
* cdpn.io/EvFnB << Demo.
* codepen.io/natewiley/share/zip/EvFnB << Download via codepen.

Happy opensource \m/

Snippet Syntax for iFrame Attribute

Bagi sobat blogger yang suka bermain dengan objek iframe, AA Koben akan berbagi trik postingan mengenai hal tersebut. Sebelumnya dalam artikel trick style iframe writing, mungkin sudah mewakili ;) Satu hal yg perlu di ingat trick ini akan berjalan kalau web tujuan tidak memasang kode anti iframe :D
Mari kita mulai dari yg sederhana...

<iframe src="about:blank" name="myFrame" width="100%" height="350" scrolling="auto" frameborder="0"></iframe>
<form action="http://www.bing.com/search" target="myFrame">
 <input type="text" name="q" /> 
 <input type="submit" value="Go!" />
</form>

Silahkan isi link target (action) seduai dengan kebutuhan. Untuk memudahkan proses, bagi kalian yg sudah mempunyai html editor silahkan buka! Bagi yg belum punya silahkan buka live HTML editor Kemudian masukan bumbu-bumbu berikut pada kotak sebelah kiri, dilanjutkan dengan memencet tombol Preview.

<script type="text/javascript">
function setVisibility() {
document.getElementById('iframe1').style.display = "block";
}
</script>
<style type="text/css">
#iframe1 {
display:none;
}
</style>
<noscript>
<style type="text/css">
#iframe1 {
display:block;
}
</style>
</noscript>
<iframe src="about:blank" name="myFrame" width="100%" height="350" scrolling="auto" frameborder="1" id="iframe1"></iframe>
<form action="http://www.bing.com/search" target="myFrame">
Search: <input type="text" name="q"> <input type="submit" value="Go!" name="type" onclick="setVisibility();">
</form>

<script language="javascript">
function LoadPage(){
var objFrame=document.getElementById("myFrame");
objFrame.src=document.getElementById("URL").value;
}
</script>
<div align="center">
<form action="http://www.google.com/custom" target="myFrame">
<input type="text" name="q" size="45"> <input type="submit" value="Search">
</form>
<iframe src="about:blank" name="myFrame" width="100%" height="350" scrolling="auto" frameborder="0"></iframe>
<input type="button" value="&lt;&lt; Back" onClick="myFrame.history.back()" title="Go back one page"> <input type="button" value="Forward &gt;&gt;" onClick="myFrame.history.forward()" title="Go forward one page">
</div>

<script type="text/javascript">
function setVisibility() {
document.getElementById('iframe1').style.display="block";
}
</script>
<style type="text/css">
#iframe1 {
display:none;
}
</style>
<iframe src="about:blank" name="myFrame" width="100%" height="350" scrolling="auto" frameborder="0" id="iframe1"></iframe>
<form action="http://www.google.com/custom" target="myFrame">
Search: <input type="text" name="q"> <input type="submit" value="Go!" name="type" onclick="setVisibility();">
</form>

Happy iframe \m/

Give a Picture for the first Commentator Blogger.

Melepas penat dari bahasa coding yang begitu membingungkan, menguras tenaga otak dalam mempelajarinya! Sekarang AA Koben akan berbagi satu snippet jQuery mudah untuk meng-cooling-down-kan otak yg lagi sumpek ;)) Kebiasaan seseorang komentator menuliskan komentarnya, di indo sendiri terkenal dengan istilah pertamaaaxxx! Dengan bantuan script jQuery akan diberikan satu sentuhan kecil yaitu dimana ketika seorang komentar menuliskan komentar and mendapat urutan pertama, maka secara otomatis pada kolom komentar tersebut akan muncul sebuah gambar. Gambar di sini bebas terserah, yg penting jaga besar² Itung-itung penghormatan pada komentator ;)

Komentator selanjutnya tidak akan ada gambar :PIngat, trik ini terintegrasi dengan script jQuery!<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>Racikan bumbu untuk melakukan hal itu semua adalah...

.comment_body.first {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoq8GFhxR440FIrS7wIWNfLCz-D9a1Zr38wxA52z5udC_fSW5tC1hcNEbo5qGHGsUcQ8t5qsi9YyfptwQ21HXewhAnRp7UUmJqLNkD0sIVceNLSBkBujBTnBvXES3UaNQpYXqYd86malX8/s31/pertamax.gif) no-repeat right top;
 padding: 0 7px 8px;
}

Keterangan:
>> comment_body merupakan unik id, bisa berbeda tiap template Ex: comment-body Pokoknya cari tagging yg mengapit isi dari komentar!
>> no-repeat right top Kode standar, silahkan ganti sesuai dengan kebutuhan. Begitu pula dengan properti padding!

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $(".comment_body:first").addClass("first");
});
//]]>
</script>

SAVE.

Happy snippet \m/

Make Font Size use CSS + Input

Merubah ukuran huruf sekarang bisa menggunakan HTML. Hal ini bisa tercipta dengan melakukan snippet code css input type, tepatnya variabel input + label! Artikel asli dengan judul CSS + Input font size selection by Rémi Lacorne cdpn.io/JyxLC ternyata snippet kode CSS hanya mendukung pada browser google chrome. Oleh sebab itu, orang baik se-antero jagat Beben Koben melakukan sedikit perubahan pada snippet code CSS yang sudah ada by viralpatel.net/blogs/css-radio-button-checkbox-background
Screenshot original code:

Google Chrome	Mozilla

DEMO cdpn.io/tCEwH

.container {
font-size: 15px;
font-family: Verdana, Arial, sans-serif;
border: 1px dotted tomato;
padding: 15px;
}
input[type=radio] {
display:none;
}
input[type="radio"]#small::after {
font-size: 10px;
content: "A";
display: block;
position: absolute;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
}
input[type="radio"]#medium::after {
font-size: 15px;
content: "A";
display: block;
position: absolute;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
}
input[type="radio"]#large::after {
font-size: 20px;
content: "A";
display: block;
position: absolute;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
}
input[type="radio"]#small:checked ~ .container {
font-size: 10px;
}
input[type="radio"]#medium:checked ~ .container {
font-size: 13px;
}
input[type="radio"]#large:checked ~ .container {
font-size: 20px;
}
input[type=radio] + label {
display: inline-block;
margin-left: 3px;
padding: 4px 12px;
font-size: 14px;
line-height: 20px;
color: #333;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-color: tomato;
border: 1px solid #ccc;
}
input[type=radio]:checked + label {
background-color: #ffa493;
}
input[type=radio] + label:hover {
background-color: #ffa493;
}

Planning HTML

<input type="radio" id="small" name="group" />
<label for="small" style="font-size: 10px;">A</label>
<input type="radio" id="medium" name="group" checked="checked" />
<label for="medium" style="font-size: 15px;">A</label>
<input type="radio" id="large" name="group" />
<label for="large" style="font-size: 20px;">A</label>

<div class="container">  
BLAH 
 BLEH
  BLOH
</div>

Perhatikan unik id container jika ingin diaplikasikan ke dalam template sobat masing-masing, maka carilah tag area post memakai unik-id apaan! Ganti juga kode yg ada pada CSS.
EX:

input[type="radio"]#small:checked ~ .UNIK-ID AREA POST {
  font-size: 10px;
}
input[type="radio"]#medium:checked ~ .UNIK-ID AREA POST {
  font-size: 13px;
}
input[type="radio"]#large:checked ~ .UNIK-ID AREA POST {
  font-size: 20px;
}

Selesai.
Bonus: cssdeck.com/labs/neatnait-custom-search-input

Happy CSS \m/

Make Attractive Back to Top Cacing Theme

Koben akan kembali membahas tutorial bertemakan back to top Ada juga yang bilang scroll to top Sebuah link yg jika di klik akan menuju konten paling atas! Cara tercepat membuat hal itu bisa terjadi, carilah unik id pada template kalian yg mana letaknya paling atas. Biasanya terdapat di dalam tag header, wrapper, outer-wrapper etc. Pokoknya setelah tagging <body> disitulah dia berada ;)) Pada postingan sebelumnya gue sudah sharing mengenai make attractive back to top button use jQuery.
Sekarang AA akan buat versi umpan cacing, yakni ketika melakukan scroll halaman ke bawah, maka gambar tali beserta cacingnya akan merosot kelihatan minta dibalikin ke atas. Seperti itu kira-kira gambaran :D

Bahan-bahan yg mesti tersedia, sudah jelas 1 gambar cacing. Silahkan Save Page As and hostingkan sendiri² gambar cacingnya (click to full look image)jQuery script inti harus sudah terpasang pada template anda!<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

.cacing {
background-image: url(LINK-GAMBAR/cacing.png);
background-repeat: no-repeat;
position: relative;
}
#cacing {
cursor: pointer;
width: 30px;
height: 455px;
background-size: 41px;
position: fixed;
top: -455px;
left: 7%;
transition: all .7s ease-in-out;
-webkit-transition: all .7s ease-in-out;
z-index: 21;
}
#cacing-bubble {
background: #fff;
border-radius: 50px;
color: #06f;
display: block;
font-size: 12px;
line-height: 14px;
opacity: 0;
overflow: visible;
padding: 5px;
position: absolute;
top: 365px;
left: 20px;
text-align: center;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
visibility: hidden;
width: 60px;
height: auto;
z-index: 99;
}
#cacing:hover > #cacing-bubble,#cacing:hover > #cacing-bubble:after {
opacity: 1;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
visibility: visible;
}
#cacing-bubble:after {
border-bottom: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
border-left: 5px solid #fff;
content: "";
display: block;
position: absolute;
top: 96%;
left: 10px;
width: 0;
height: 0;
z-index: 98;
}

<div class="cacing" id="cacing">
<div id="cacing-bubble">Get me outta here!</div>
</div>

<div id="cacingTOP"></div>

<div class="cacing" id="cacing">
<div id="cacing-bubble">Get me outta here!</div>
</div>Letakan syntax tersebut setelah tag <body> Ganti kata² sesuai selera.<div id="cacingTOP"></div>Unik id cacingTOP bisa sobat sisipkan ke dalam tag apapun, asal bagian paling atas dari template kalian. Hal ini akan erat sekali dengan snippet jQuery!

<script type='text/javascript'>//<![CDATA[
jQuery(document).ready(function($) {
 $(window).on('scroll', false, function() {
  var windowTop = $(window).scrollTop();
  if (windowTop > 300) {
   $('#cacing').css('top', '0');
  } else {
   $('#cacing').css('top', windowTop - 465 + 'px');
  }
 });
 $('#cacing').unbind('click').click(function() {
  $('html,body').animate({
   scrollTop: $("#cacingTOP").offset().top
  }, 'slow');
 });
});
//]]></script>

DONE.

Demo n source code by: myblogsharingpost.wordpress.com

Happy back to top \m/

Get 2 Tool Free View and Edit Files

AA Koben akan berbagi 2 tool keren dari web jsdo.it D'nD File Viewer dan window.localStorage test. Kedua tool ini memiliki persamaan yaitu sama-sama menampilkan kode/script dalam satu wadah (tab browser). D'nD file viewer dengan teknik drag & drop sedangkan soliloquy (mock of the memo application with window.localStorage) hasil kerja akan terus ada sampai cache belum di clear. Seperti itu lah kira-kira bro :D Jika sobat mau buka file dalam satu tab, tool ini sangat mambantu sekali ;) Daripada bingung silahkan coba demonya...

jsrun.it/ethertank/iNHw - jsrun.it/kkeisuke/kzCI

Kalau demo berjalan mesti pakai koneksi internet alias online, saya bikin versi offline :-" Sebagai pembuat page .html offline aktif, gue persembahkan gratis buat kalian pengunjung setia blog ini :))

D'nD File Viewer	window.localStorage

Semoga dengan adanya tambahan tool tersebut dapat mengefisiensikan waktu pekerjaan blogging anda sekalian. Sebenarnya gue sudah dapat source baru tentang tool serupa dengan ini! Lain waktu AA share deh ;))

Source: jsdo.it/ethertank/iNHw - jsdo.it/kkeisuke/kzCI
Happy tool \m/

Make Expand (Toggle) Social Links use jQuery

Hanya mengupdate/menambah variasi membuat links berbagi. Tepatnya mungkin tutorial ini akan seperti make social network with css. Walaupun trend sekarang adalah penggunaan embed font icon untuk menampilkan lambang-lambang web jejaring! Koben akan update dua sekaligus tutorial CSS3 social cards, yaitu dengan full memakai CSS dan jQuery snippet b-)
Artikel membuat CSS3 Social Cards by MusikAnimal, sobat dapat lihat langsung ke halaman developer.mozilla.org/en-US/demos/detail/css3-social-cards
Singkat saja...

Sediakan terlebih dahulu image web jejaring sosial dengan resolusi (60 x 60 pixels) Gambar akan meliputi 2 macam, yakni gambar dengan background transparan dan gambar dengan background berwarna! Mengapa demikian, karena akan ada efek flip dari tut's ini :D

Demo: bit.ly/1ikXwn5

input#phone_booth {
visibility:hidden;
position:absolute;
left:-1000px;
}
input#phone_booth:checked + #areal {
left:10px;
box-shadow:0 0 1em #FFF;
background:#fff;
}
input#phone_booth:checked + #areal img#phone {
-webkit-transform:rotate(120deg);
-moz-transform:rotate(120deg);
-ms-transform:rotate(120deg);
-o-transform:rotate(120deg);
transform:rotate(120deg);
}
input#phone_booth:checked + #areal > div, input#phone_booth:checked + #areal > a {
opacity:1;
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
}
#areal {
position:fixed;
bottom:10px;
z-index:100;
left:-525px;
padding:0;
padding-right:60px;
background:#dfdfdf;
border-radius:5px 25px 25px 5px;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
#areal:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
#areal label {
cursor: pointer;
}
#areal label img#phone {
width:48px;
height:48px;
position:absolute;
top:5px;
right:5px;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
#areal > div, #areal > a {
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
-ms-transition:all 0.5s;
-o-transition:all 0.5s;
transition:all 0.5s;
opacity:0;
-webkit-transform:scale(0);
-moz-transform:scale(0);
-ms-transform:scale(0);
-o-transform:scale(0);
transform:scale(0);
}
#areal a.card-container, #areal a.card-container img {
width:48px;
height:48px;
}
#areal a.card-container {
position:relative;
z-index:1;
-webkit-perspective:1000;
-moz-perspective:1000;
-ms-perspective:1000;
-o-perspective:1000;
perspective:1000;
float:left;
margin:5px;
}
#areal a.card-container div.card {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-ms-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
width:100%;
height:100%;
cursor: pointer;
}
#areal a.card-container div.card div.face {
position:absolute;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
#areal a.card-container div.card div.back {
display:block;
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotateY(180deg);
}
#areal a.card-container:hover div.card {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotateY(180deg);
}

<input id='phone_booth' type='checkbox'/>
<div id='areal'>
<label for='phone_booth'>
<img id='phone' src='LINK-IMAGE/phone.png'>
</label>
<a class='card-container' href='LINK HERE'>
<div class='card'>
<div class='face'>
<img src='LINK-IMAGE/googlePLUS.png' alt=''/>
</div>
<div class='face back'>
<img src='LINK-IMAGE/googlePLUS_hover.png' alt=''/>
</div>
</div>
</a>
<a class='card-container' href='LINK HERE'>
<div class='card'>
<div class='face'>
<img src='LINK-IMAGE/twitter.png' alt=''/>
</div>
<div class='face back'>
<img src='LINK-IMAGE/twitter_hover.png' alt=''/>
</div>
</div>
</a>
<a class='card-container' href='LINK HERE'>
<div class='card'>
<div class='face'>
<img src='LINK-IMAGE/lastfm.png' alt=''/>
</div>
<div class='face back'>
<img src='LINK-IMAGE/lastfm_hover.png' alt=''/>
</div>
</div>
</a>
<a class='card-container' href='LINK HERE'>
<div class='card'>
<div class='face'>
<img src='LINK-IMAGE/linkedin.png' alt=''/>
</div>
<div class='face back'>
<img src='LINK-IMAGE/linkedin_hover.png' alt=''/>
</div>
</div>
</a>
<a class='card-container' href='LINK HERE'>
<div class='card'>
<div class='face'>
<img src='LINK-IMAGE/github.png' alt=''/>
</div>
<div class='face back'>
<img src='LINK-IMAGE/github_hover.png' alt=''/>
</div>
</div>
</a>
<a class='card-container' href='LINK HERE'>
<div class='card'>
<div class='face'>
<img src='LINK-IMAGE/mdn2.png' alt=''/>
</div>
<div class='face back'>
<img src='LINK-IMAGE/mdn_hover3.png' alt=''/>
</div>
</div>
</a>
<a class='card-container' href='LINK HERE'>
<div class='card'>
<div class='face'>
<img src='LINK-IMAGE/stackoverflow.png' alt=''/>
</div>
<div class='face back'>
<img src='LINK-IMAGE/stackoverflow_hover.png' alt=''/>
</div>
</div>
</a>
<a class='card-container' href='LINK HERE'>
<div class='card'>
<div class='face'>
<img src='LINK-IMAGE/wikipedia.png' alt=''/>
</div>
<div class='face back'>
<img src='LINK-IMAGE/wikipedia_hover.png' alt=''/>
</div>
</div>
</a>
<a class='card-container' href='LINK HERE'>
<div class='card'>
<div class='face'>
<img src='LINK-IMAGE/rss.png' alt=''/>
</div>
<div class='face back'>
<img src='LINK-IMAGE/rss_hover.png' alt=''/>
</div>
</div>
</a>
</div>

Sekarang versi snippet jQuery script. Tutorial ini saya comot source kodenya dari demo template blogger premium :D

#sharebbn {
background: #333;
color: #ABABAB;
cursor: pointer;
float: left;
font-size: 25px;
font-weight: normal;
line-height: 38px;
padding: 0 20px;
text-transform: uppercase;
}
#sharebbn:before {
content: "\271A";
}
.expand:before {
content: "\2716" !important;
color: #FF7800;
}
#socials {
display: block;
float: left;
text-align: right;
background: #333;
}
#socials ul {
display: block;
height: 38px;
margin: 0;
padding:0;
}
#socials li {
display: inline-block;
float: left;
width: 32px;
height: 32px;
opacity: 0.2;
margin-top: 2.5px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#socials li:hover {
opacity: 1;
background-position: 0 -32px
}
#socials li a {
display: inline-block;
width: 32px;
height: 32px;
}
#socials li a span {display:none;}
#socials li.facebook{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFwFOhke2OCsUPfGD75kgz2k4ohr9UugSif8CByaF9i4Vt7oxCctojENtcuO7ahK2qMjpFK-1Jq5ORTdpo5yVJWsSKdNRiiMHis2CX4my-AlHLz3royk40lOXw02rpHlDbZk9F8_P-UBDt/s64/facebook.png); }
#socials li.twitter{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKVvij5AoWWAckyK9Hy0QyvXMXRNtGqMlwy4hzAIiBfmvxO9FiXHkLXDuBKH-PeDhytykmjYz2dqQEEwndA-UL-eNnWlaGoKFCxhd4aWwpb4okK00TVQg7np3Gwh4Mu01S1hnpE7537ldq/s64/twitter.png); }
#socials li.linkedin{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDCPJ_LCGREr8vxDOwNuaBqyhhe9CMhIS9RjxgOPkydQeOy2ZDCLzrGH8iHV6iW2Xn5O8qQqUvECvYHreXEBFxZomXpCMidcwGYY_Gr4jCQ66aUFXtSwfKjR2Pzuim6gvyUynbW3J6uN6x/s64/linkedin.png); }
#socials li.tumblr{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheYj1bcS0dWWErQSE5oo7vNSLs0aSXqvjCp-Fl-S6hFqxmlw7RTrzjK30mbGMtXoPtEc9q8DLnVX3FbzjpZ4mJE8eb9SX4WSdW-9LzRUVqJFp1QeeaN0odWFGl2rS7qSScIunYnuwEeyCz/s64/tumblr.png); }
#socials li.vimeo{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsVt-yzexqKFrGZC-7wmDy0RSBvUUj64F2LGf74Sf7AJaUW9aOi2BkR2QPYo6Fk6iTUASqdbA3DDDZZaQB_fZXhs22RVZXU3AGNHF0L1mX7iiFEUU6xc4EIFLtNXyLmRKAE1u0R4JvMm9H/s64/vimeo.png); }
#socials li.skype{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcHuYjbY2okSLgPjbjret6CCsrNfmGPtU0xxft6RJvQug8GO8oj48O2XGI_3rxxolyrBpv70dV7Dcz6SMxwJ2oO20ihByyBCrm9zz3JIXruMwJiEMIlkYCnfxU0CH4I4Zch2XaMuhJSc-8/s64/skype.png); }
#socials li.youtube{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja_iMlncLBY15-1diJJifL6CBNJokco9ESsUCCfl0EQSliWf8HERlHcxw4i5jpuZNhZsOZYhW7h0FFbpjmW4CRqq7CWGCe1dnnwr2oaBqRA5i0LK7HkCE7yB_DGtl82vR-gSF4tv3NcKxo/s64/youtube.png); }
#socials li.googleplus{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoZBQITvBhbCvqv3n6Cpzi134QPNxmGHYaqd-qGWXLFYU0C2zb0f-motIWlEe7rr4tsiVXHCNcPGaWbjpVSoCYfm_134B1ddCnyciAR8h5Wkote_euGsXn7L3wb7mcVMHXrbJxhuywY_5I/s64/googleplus.png); }
#socials li.deviantart{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhinOSMot8n9DWwNtG8rWRyc-ak7OzHwZnNEFoy67QAnrukm6vrd9RKGm0UXIbhswsdi8S7B4jui1Uc4-wJiGgpQduLqFHrxmiavPIYEFQFd_-tTmY3jymfn1gSkLW-1xO635pwMIxF4bAJ/s64/deviantart.png); }
#socials li.flickr{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ0BI41quGF8JosUaEolME7VS8GK2O3WP8NRbnaByibJwNlZGZL6ZxIMnbRnc0-95rhiE4piOr6zNrrjWILAIfYLub3O5khLJnW4vkSkWIRl3lQMK1YuuaMsrCUy9OiknITyUFmrmkt4fq/s64/flickr.png); }

<div id='socials'>
<ul>
<li class='facebook'><a href=''><span>Facebook</span></a></li>
<li class='twitter'><a href=''><span>twitter</span></a></li>
<li class='googleplus'><a href=''><span>googleplus</span></a></li>
<li class='linkedin'><a href=''><span>linkedin</span></a></li>
<li class='youtube'><a href=''><span>youtube</span></a></li>
<li class='flickr'><a href=''><span>flickr</span></a></li>
<li class='vimeo'><a href=''><span>vimeo</span></a></li>
<li class='tumblr'><a href=''><span>tumblr</span></a></li>
<li class='deviantart'><a href=''><span>deviantart</span></a></li>
<li class='skype'><a href=''><span>skype</span></a></li>
</ul>
</div>
<span id='sharebbn'></span>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){ var $content = $("#socials").hide();
 $("#sharebbn").click(function(){
 $("#socials").toggle(500);
 $(this).toggleClass("expand");
 });
});
//]]></script>

Demo: jsfiddle.net/bebenkoben/ws4Pg/show

Bye :-h

Happy coding \m/

Give More Style for Select Tag using CSS

Saya pikir urusan dropdown/select option keren punya sudah selesai. Eh taunya ada episode lanjutan kreasi dari master Treeskar. Artikel dengan judul asli Custom Select tag rupanya yang akan meneruskan chapter sekarang ;)) Dengan menggabungkan elemen input dan li serta penambahan gaya disana-sini membuat konten custom select memberi warna yang berbeda.
Pada kode CSS ada satu penggunaan properti yg mana masih merupakan experimental teknologi pada browser engine yaitu property calc() Untuk lebih jelasnya silahkan sobat baca referensi di web developer terdekat :DKetika sudah memilih, pilihan akan terlihat pada konten select. Sebelum itupun ada efek border yg terlihat sebelah kiri kala memilih! Lebih full stylish lagi semua itu di bangun hanya memakai kode CSS b-) Aslinya mah pake code sass!

.select {
position: relative;
display: inline-block;
overflow: hidden;
}
.select .label {
padding: .5em;
color: #333;
font-size: 16px;
}
.select > label {
display: block;
cursor: pointer;
border-radius: 3px;
border: 1px solid rgba(153,153,153,.7);
border-bottom-color: rgba(153,153,153,.5);
padding: .5em calc(35% + 3em) .5em 0;
background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));
}
.select > label .label {
white-space: nowrap;
}
.select > label .label:after {
content: "";
top: 1em;
right: .5em;
position: absolute;
transition: .1s linear top;
border: .5em solid transparent;
border-top-color: #999;
}
.select > label:hover .label:after {
top: 1em;
}
.select > label:hover {
background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,0));
}
.select:hover > label {
background-image: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,0));
}
.select .options {
margin: 0;
padding: 0;
background: #ddd;
height: 0;
transition: .3s linear height;
max-height: 200px;
overflow-y: auto;
}
.select .options:hover {
height: auto;
border-bottom: 1px solid #f00;
}
.select .options li {
list-style: none;
border-top: 1px solid #eee;
border-bottom: 1px solid #ccc;
}
.select .options li label {
color: #333;
display: block;
cursor: pointer;
text-align: left;
padding: .4em .5em;
transition: .2s linear all;
}
.select .options li label:hover {
background-image: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,0));
}
.select .options li:nth-child(1) label:hover {
background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.1));
}
.select .options li:nth-last-child(1) {
border-bottom: none;
}
.select .options li [type="radio"] {
display: none;
}
.select .options li [type="radio"]:checked ~ label {
cursor: default;
border-left: .4em solid #f00;
}
.select .options li [type="radio"]:checked ~ label:after {
content: attr(data-title);
display: block;
position: absolute;
top: .56em;
right: .5em;
border-radius: 1em;
box-shadow: inset 0 0 .3em rgba(0,0,0,.7);
padding: .3em 1em;
background: #777;
color: #fff;
pointer-events: none;
font-size: 80%;
max-width: 30%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.select #if-focus {
position: absolute;
display: block;
top: -999px;
}
.select #if-focus:focus ~ label span.label:after {
border-top-color: transparent;
border-bottom-color: #999;
top: .3em;
}
.select #if-focus:focus ~ .options {
height: auto;
border-bottom: 1px solid #aaa;
}

Untuk merubah lebar, sobat cari kode .select > label dan lakukan perubahan nominal di properti padding: .5em calc(35% + 3em) .5em 0;

<div class="select">
<input type="radio" name="fruit" id="if-focus" tabindex="0">
<label for="if-focus">
<span class="label">You choice: </span>
</label>
<ul class="options">
<li>
<input id="pepaya" type="radio" name="fruit" value="Pepaya" tabindex="0"/>
<label for="pepaya" data-title="Pepaya">Pepaya</label>
</li>
<li>
<input id="mangga" type="radio" name="fruit" value="Mangga" tabindex="0"/>
<label for="mangga" data-title="Mangga">Mangga</label>
</li>
<li>
<input id="pisang" type="radio" name="fruit" value="Pisang" tabindex="0"/>
<label for="pisang" data-title="Pisang">Pisang</label>
</li>
<li>
<input id="ket" type="radio" name="fruit" value="" tabindex="0"/>
<label for="ket" data-title="Ada di pasar minggu.">Pasar....</label>
</li>
</ul>
</label>
</div>

Source by: cdpn.io/gqdCi

Happy select \m/