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/