Add Control Search Box with Keyboard use jQuery

AA Koben menemukan satu artikel cool dengan judul "Konsep Kotak Penelusuran dengan Keyboard" by kowe sopan :D Satu konsep jQuery script yang memungkinkan kita dapat melakukan customize pada search box alias kotak pencarian agar dapat dioperasikan lewat keyboard! Sobat bisa menampilkan kotak searching dengan shortcut dari kibor yg sudah dibuat dengan bantuan jQuery.
Demo:

bit.ly/1tkLgxF

.form-search.sticked {
    position: fixed;
    top: 5px;
    left: 50%;
    z-index: 9999;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); 
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
}
.form-search .form-search-text {
    display:block;
    border:1px solid #ccc;
    padding:4px;
    margin:0 auto;
    width:275px;
    font:inherit;
    line-height:normal;
    color:inherit;
    box-shadow:inset 0 1px 3px -1px rgba(0, 0, 0, .2);
}

<form action="/search" class="form-search" method="get">
<input class="form-search-text" name="q" type="text"></input>
</form>

<script type='text/javascript'>//<![CDATA[
(function (a, k) {
    var fs = a('.form-search');
    a(k).on("keydown", function (e) {
        if (e.ctrlKey && e.keyCode == 83) {
            fs.toggleClass("sticked").find(".form-search-text").trigger("focus");
            return false
        }
    });
})(jQuery, document);
//]]></script>

Perhatikan script e.keyCode == 83 angka itu bisa kalian ganti sesuai dengan shortcut kemauan. Please visit Keyboard Events and Codes by w3.org for get key and character codes vs event types. Loh kok pencet Ctrl + S malah kotak pencarian yg keluar :)) =))
Resource: obesitystrike.blogspot.com/2014/12/konsep-kotak-penelusuran-dengan-keyboard.html

Happy coding \m/

Make Float Category for Blogger

Lama juga tidak memposting tentang tutorial blogspot! Saya bertualang kemari-kesana sudah melihat banyak artikel post tutorial blogger dibahas. Bumbu kode sudah tersedia tinggal urusan kreatifitas kita dalam menerapkan ke dalam blog tercinta :x ;)) Sekarang AA Koben akan berbagi sedikit kreasi tut's seputaran tagging kategori/label/tag blogcepot.
Kebanyakan konten yang berposisikan absolute top right/left para kreator membuat untuk link berbagi ke web sosial. Sebagai contoh make something to be float & float and slide can be disappear pokoknya yg seperti itu lah :D

Lihat pojok kanan atas...hover it!
Demo

jsfiddle.net/bebenkoben/qnhLwm75/embedded/result

.side-tag {
content: '';
display: block;
clear: both;
height: 0;
*zoom: 1;
position: fixed;
top: 87px;
right: 0;
z-index: 100;
margin: 0;
}
.side-tag .taglist {
position: relative;
height: 50px;
min-width: 50px;
}
.side-tag .taglist:hover .side-contents, .side-tag .taglist.current .side-contents {
z-index: 100;
display: block;
}
.side-tag .btn-tag {
width: 50px;
height: 50px;
display: block;
vertical-align: middle;
position: absolute;
top: 0;
right: 0;
background: #ff9e36 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiOCZFDzu-YRV9Qb4k2A_xb4a90hLFKZ8cEpYXbufXC9Yi-8c858AIub5mvAY5K1jRZBvFrrxKJBj-PORsaB3CZHmawYVHDIm5UbUYtdut4ZVDFSu3YG08h_Cdt_E7QWadzCMBfVI6mUuj/s35/tag-icon.png) no-repeat center center;
}
.side-tag .side-contents {
background-color: #ff9e36;
width: 270px;
margin-right: 49px;
display: none;
overflow: hidden;
position: relative;
z-index: 10;
}
.side-tag .side-contents a {
text-decoration: none;
font-size: 17px;
color: #fff1e5;
}
.side-tag .side-contents h2 {
margin: 0 0 15px;
}
.side-tag .taglist .side-contents {
padding: 25px;
width: 220px;
color: #fff;
}
.side-tag .taglist ul li {
float: left;
font-size: 12px;
line-height: 28px;
margin-right: 10px;
}

Untuk penerapan markup HTML, sobat harus masuk ke dalam editor template blog. Press Ctrl + F kemudian cari kode<b:widget id='Label1' locked='false' title='Labels' type='Label'>Kalau ribet coba dengan keyword Label1 saja!

Perhatikan struktur berikut!!!

          <b:widget id='Label1' locked='false' title='Labels' type='Label'>
            <b:includable id='main'>

<div class="side-tag">
 <div class="taglist">
  <a class="btn-tag"></a>
  <div class="side-contents">

  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data: display + &quot;-label-widget-content&quot;'>
    <b:if cond='data: display == &quot;list&quot;'>

--------- SCROLL KE BAWAH ----------

<b:include name='quickedit'/>

  </div>
 </div>
</div>

Yang sobat mesti lakukan memasukan taging berikut, sesuai dengan struktur diatas!

<div class="side-tag">
 <div class="taglist">
  <a class="btn-tag"></a>
  <div class="side-contents">

  </div>
 </div>
</div>

DONE.

CSS3 Transform Playground Basic

Master Beben Koben :D sekarang akan bercerita mengenai CSS3 transform property. Transformasi properti menerapkan transformasi 2D atau 3D ke dalam sebuah elemen. Properti ini memungkinkan kita untuk melakukan rotate (memutar), scale (skala), move (memindahkan), skew (miring), dll. Ada layaknya sobat harus mengetahui terlebih dahulu browser versi berapa yang sudah mendukung terhadap hal ini!

Property	Chrome	IE	Mozilla	Safari	Opera
transform (2D)	36.0 4.0 -webkit-	10.0 9.0 -ms-	16.0 3.5 -moz-	3.2 -webkit-	23.0 15.0 -webkit- 12.1 10.5 -o-
transform (3D)	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-

Gue sekarang akan cerita tidak menggunakan kata-kata rangkaian kalimat melainkan dengan berbagi embed form playground play it. Dengan teknik ini, sobat bisa melihat secara langsung efek yg terjadi dengan property values dari CSS3 transform. Berikut beberapa value: none, matrix, translate, scale, rotate, and skew.

Singkat cerita, playground catutan ini versi basic untuk melihat efek-efek yg dihasilkan dari CSS3 transform

Download dulu file, lalu silahkan bermain-main dengan si transform ;))

• Download CSS3-transform-Property.7z in Ziddu
downloads.ziddu.com/download/24265613/CSS3-transform-Property.7z.html
• CSS3 transform Property unduh via 4shared
www.4shared.com/archive/q3mx0HIoba/CSS3_transform_Property.html

Resources by:
>> www.w3schools.com/cssref/css3_pr_transform.asp
>> codepen.io/aarongustafson/pen/jEryLV
Bonus
>> css3playground.com
>> playground.deaxon.com/css

Happy transforms \m/

Create a Prepopulated with Codepen

Informasi keren bagi kalian blogger penggemar playground for the front end side of the web! Berita datang dari CodePen dimana sekarang kita dapat membuat Prepopulated Pen. Fitur baru CodePen yang memungkinkan kita untuk dengan mudah dan dinamis membuat pen baru dengan kode yang diinginkan sebagai titik awal. Singkat cerita, kita dapat melakukan penulisan kode pada area postingan dan seketika itu dapat terlihat hasil generate dari kode tersebut dengan terhubung ke playgorund codepen! Begitu kira-kira ;))

Untuk dapat merasakan fitur itu, ada beberapa langkah aturan main yang mesti di lakukan. Perhatikan demo...pencet tombol CodePen di bagian bawah?

<div>
  <p>An Anonymous Pen HTML</p>
</div>

div {
  background: #323232;
  height: auto;
  padding: 10px;
}

p {
  color: white;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

Berikut skema penulisan.

<pre class="codepen-able" data-type="html"><code>
--------- KODE HTML HERE ---------
</code></pre>

<pre class="codepen-able" data-type="css"><code>
--------- KODE CSS HERE ---------
</code></pre>

<pre class="codepen-able" data-type="js"><code>
--------- SCRIPT ADD HERE ---------
</code></pre>

<form action="http://codepen.io/pen/define" method="POST" target="_blank">
<input id="data-input" type="hidden" name="data" value="" />
<input type="image" src="http://s.cdpn.io/3/cp-arrow-right.svg" width="40" height="40" value="Create Pen" class="codepen-mover-button" />
</form>JavaScript yg musti di add.

<script type='text/javascript'>
//<![CDATA[
// Replace Quotes and Set Object as String Function
var setDataString = function (data){
  var string = JSON.stringify(data);
  string = string.replace(/"/g, "&quot;");
  string = string.replace(/'/g, "&apos;");
  return string;
};
// Codepen Object
var data = {
  title              : "",
  description        : "",
  html               : "",
  html_pre_processor : "none",
  css                : "",
  css_pre_processor  : "scss",
  css_starter        : "neither",
  css_prefix_free    : false,
  js                 : "",
  js_pre_processor   : "none",
  js_modernizr       : false,
  js_library         : "",
  html_classes       : "",
  css_external       : "",
  js_external        : ""
};
// Get All Pre Tags
var preElement = document.getElementsByClassName('codepen-able');
// Loop Through Pre Tags
for (var i = 0, len = preElement.length; i < len; i++){
  // data-type on pre tag.
  // we can use the data-type returned to populate codepen object.
   var type = preElement[i].getAttribute('data-type');
  // CodeInside Code Tags
 var codeInside = preElement[i].firstChild.innerHTML;
        // Set Content inside set the data value
        if (codeInside.length > 0){
          // Normally you access a property like this object.property
          // But when the property name is from a variable
          // You need [] Brackets instead of the .
          // data[type] = codeInside
          // ======================
          // data.html = codeInside
          // data.css = codeInside
          // data.js = codeInside
          data[type] = codeInside;
        }
}
// Replace Quotes and Set Object as String
var dataString = setDataString(data);
// Get Input and Append Data String
var data_input = document.getElementById('data-input');
data_input.value = dataString;
//]]>
</script>

Hal-hal yang harus diperhatikan!

• Bumbu di atas hanya berlaku untuk satu kali pemanggilan penulisan kode.
• Pada bagian <pre class="codepen-able" data-type="html"><code> harus dilakukan phrase terlebih dahulu.
• Customize JavaScript sesuai dengan kebutuhan pada sesi var data
• Letakan JavaScript coba dulu sebelum tagging </body> kalau tidak jalan sebelum tagging </head>

Jika sobat ingin menuliskan sekaligus beberapa penulisan kode, maka pada kasus ini berlaku aturan dari brandonbrule :D

Planing HTML<section class="codepen-group">
<pre class="codepen-able" data-type="html"><code>
--------- KODE HTML HERE ---------
</code>
</pre>

<pre class="codepen-able" data-type="css"><code>
--------- KODE CSS HERE ---------
</code></pre>

<pre class="codepen-able" data-type="js"><code>
--------- SCRIPT ADD HERE ---------
</code></pre>
</section>Script yg harus di add.

<script src='http://brandonbrule.github.io/itsa/js/itsa.js'></script>
<script>
//<![CDATA[
// PostToCodepen

var PostToCodepen = (function () {
  var codepen_group = document.getElementsByClassName('codepen-group')
  var codepens;
  var codepen;
  var type;
  var codeElement;
  var codeInside;
  var JSONstring;
  
  // Create the Codepen Button For Each Group
  var createForm = function (container){
    var form = document.createElement('form');
    var data_input = document.createElement('input');
    var data_submit = document.createElement('input');
    var frag = document.createDocumentFragment();
    
    //form
    form.setAttribute('action', 'http://codepen.io/pen/define');
    form.setAttribute('method', 'POST');
    form.setAttribute('target', '_blank');
    
    // data input
    data_input.setAttribute('type', 'hidden');
    data_input.setAttribute('name', 'data');
    data_input.setAttribute('value', JSONstring);
    form.appendChild(data_input);
    
    // Submit Button
    data_submit.setAttribute('type','image');
    data_submit.setAttribute('src','http://s.cdpn.io/3/cp-arrow-right.svg');
    data_submit.setAttribute('width','40');
    data_submit.setAttribute('height','40');
    data_submit.setAttribute('value','Create Pen');
    data_submit.setAttribute('class','codepen-mover-button');
    form.appendChild(data_submit);
    
    frag.appendChild(form);
    container.appendChild(frag);
  };
  
  // Replace Quotes and Return object as string.
  var setDataString = function (data){
    var string = JSON.stringify(data);
    string = string.replace(/"/g, "&quot;");
    string = string.replace(/'/g, "&apos;");
    return string;
  };
  
  // Initializer
  var please = function () {

    // For each codegroup
    for ( i = 0, len = codepen_group.length; i < len; i++ ){      
      
      // This data gets submitted to codepen to get processed into a pen
      // We populate css, js, and html properties with the content inside the pre tags
      // With the data-type attribute
      var data = {
        title              : "",
        description        : "",
        html               : "",
        html_pre_processor : "none",
        css                : "",
        css_pre_processor  : "scss",
        css_starter        : "neither",
        css_prefix_free    : false,
        js                 : "",
        js_pre_processor   : "none",
        js_modernizr       : false,
        js_library         : "",
        html_classes       : "",
        css_external       : "",
        js_external        : "http://brandonbrule.github.io/itsa/js/itsa.js"
      };
      
      // The pre elements inside each of the groups
      codepens = codepen_group[i].getElementsByClassName('codepen-able');
      
      for (var j = 0, lenth = codepens.length; j < lenth; j++){
        
        // Pre Tag
        codepen = codepens[j];
        
        // Get type to add to data object (js, css, html)
        type = codepen.getAttribute('data-type');
        
        // The codeinside each element
        codeElement = codepen.firstChild;
        codeInside = codeElement.innerHTML;

        // Set Data if there's content
        if (codeInside.length > 0){
          data[type] = codeInside;
        }

      }
  
      // Turn Data into Safe String
      JSONstring = setDataString(data);
      
      // Create Submit to Codepen Button
      // Append Button to each group
      createForm(codepen_group[i]);
    }
  };
 
  return {
    please: please
  };
})();

// Start It All
PostToCodepen.please();
//]]>
</script>

Semua itu masih dalam perkembangan. Tidak kesabaran, silahkan pasang pada blog kalian :) Untuk lebih jelas silahkan kunjungi...

Source:
codepen.io/brandonbrule/blog/creating-a-prepoluated-pen

Happy codepen \m/

Get Free Four HTML Editor for You

Artikel dengan tema HTML editor entah sudah saya post berapa kali? Silahkan sobat-sabit lihat sendiri or searching guna mendapatkan tool keren live HTML-editor tersebut. Sekarang AA Koben akan bagi-bagi hal serupa :D Karena memang tidak ada topik keren buat di tulis ;)) :"> Saya akan kasih kalian empat macam .html yaitu htmledit, HTML-Try, scratchpad dan fiddly. Keempat-empatnya dapat berjalan secara offline ;) Maaf jika ada fitur yang tidak berjalan, karena memang harus online. Gue cuma mau berbagi buat playground saja. Bermain sambil belajar kode-kodean!!!

A simple web-based HTML editor.

HTML Online editor and see it.

Real time HTML editor with preview.

Test your Javascript, CSS and HTML online with Fiddly code editor.

Bagaimana penampakan screenshot ke-4 editor di atas! Apakah sobat kepengen memiliki itu semua?

• HTML Editor Unduh dari 4shared
www.4shared.com/archive/zO52nRsLce/HTML_Editor.html
• Download HTML-Editor.7z in Ziddu
downloads.ziddu.com/download/24239509/HTML-Editor.7z.html

Password 7z is: Beben Koben si Bloglang anu Ganteng Kalem Tea

Bye :-h

End of Page Slide Out Box with Open Close Button

Artikel sekarang mungkin ada kaitannya dengan postingan sebelumnya, you can read it end of page slide out box and end of page slide out box plus minimize use jquery. AA Koben akan membuat hal serupa dengan style yang sedikit berbeda! Ketika melakukan scroll ke bawah, konten akan tampak dan akan tertutup kembali, namun tombol tutup tetap tampak. Begitulah penjelasan bahasa HTML kalau menggunakan kata-kata :P Area content akan saya buat untuk situs jejaring facebook. Tidak menutup kemungkinan bisa sobat gunakan untuk yg lain ;)

#likeFBbox {
display: none;
position: fixed;
z-index: 9999;
bottom: 0;
right: 10px;
padding: 5px;
width: 300px;
background: #f1f1f1;
overflow: hidden;
-webkit-box-shadow: 0 0 3px 0 #666;
box-shadow: 0 0 3px 0 #666;
}
#likeFBbox .header {
font-size: 12px;
margin: 0;
font-weight: 600;
text-align: center;
height: 25px;
line-height: 25px;
left: -5px;
padding: 5px 10px;
position: relative;
top: -5px;
width: 292px;
background: #4A67A3;
color: #fff;
}
#likeFBbox #close {
cursor: pointer;
position: absolute;
top: 13px;
right: 12px;
}
#imgFBbox {
cursor: pointer;
display: none;
position: fixed;
z-index: 9999;
bottom: 20px;
right: 20px;
-webkit-box-shadow: 0 0 3px 0 #666;
box-shadow: 0 0 3px 0 #666;
}
#imgFBbox img {
display: block;
}

Karena bentrok dengan kode emoticon, buka link berikut ambil dan buka kode planing HTML tersebut pada text editor Ex: notepad.
Image gue pakai link Data URI, silahkan ganti dengan link host kalau mau. Kemudian perhatikan kode<iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FTutorial-Blog-for-Stylish-Blogger%2F122292581115426&amp;width=296&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:296px; height:258px;" allowTransparency="true"></iframe>Ganti link https%3A%2F%2Fwww.facebook.com%2Fpages%2FTutorial-Blog-for-Stylish-Blogger%2F122292581115426 dengan link masing-masing.

Masukan bumbu snippet jQuery & simpan pada tempat semestinya!

SAVE.

DEMO

codepen.io/beben-koben/full/KwdQya

Happy coding \m/

Feedback Form with Popup Style use CSS

Apakah sobat pernah memencet tombol yang bertuliskan complain? Ketika login dan masuk ke dashboard blog, silahkan lihat pojok kanan bawah! Maka akan muncul kotak Google Feedback dengan gaya popup Kesempatan kali sekarang, AA Koben mau berbagi cara membuat CSS3 HTML5 awesome popup contact or feedback form created by Md Ashraf Malik. Sebelum itu tengok dahulu source alakadar seputar feed-back:

• Feedback for blogger.
• HTML form with pop up labels effect.
• Membuat tombol feedback blogger (simple).

Bumbu CSS

.f-button {
height: 35px;
border: solid 3px #444;
background: #F9760B;
width: 100px;
line-height: 32px;
font-weight: 600;
color: white;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
text-align: center;
font-size: 17px;
position: fixed;
right: -40px;
top: 45%;
font-family: Arial, Helvetica, sans-serif;
z-index: 999;
}
.f-button:hover {
background: #EB5200;
}
#form-area {
height: 100%;
width: 100%;
position: fixed;
top: -100%;
left: 0;
background: rgba(0, 0, 0, 0.90);
opacity: .9;
}
#open:checked ~ #form-area {
top: 0;
}
#open:checked ~ #form-area .form-in {
margin-top: 150px;
transition: all .5s .4s;
}
input[type="radio"] {
display: none;
}
label {
cursor: pointer;
padding: 8px 0;
}
.form-in {
height: auto;
width: 20%;
padding: 2% 4%;
border-radius: 5px;
background: #FFF;
margin-left: 36%;
margin-top: -400px;
}
.in, .text {
width: 90%;
margin: 5px;
transition: all .4s .1s;
padding: 9px 7px;
outline: none;
border-radius: 4px;
border: solid 2px #999999;
}
.in:focus:invalid, .text:focus:invalid {
border-color: #930;
}
.in:focus:valid, .text:focus:valid {
border-color: #063;
}
.text {
height: 70px;
}
.sb {
margin: 5px;
padding: 5px 10px;
cursor: pointer;
border-radius: 4px;
border: none;
background: #999;
color: white;
font-size: 16px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.sb:hover {
background: #555;
}
.close {
height: 25px;
width: 35px;
top: -35px;
color: #900;
position: relative;
text-align: center;
margin-left: 99%;
font-weight: bold;
font-size: 25px;
background: #fff;
border-radius: 4px 4px 0 0;
}

Planing HTML

<input type="radio" name="r" id="open" />
<input type="radio" name="r" id="close" />
<div class="f-button"><label for="open">Feedback</label></div>
 <div id="form-area">
  <div class="form-in">
   <div class="close"><label for="close">x</label></div>
 <form action="LINK-TARGET-ADD-HERE" method="get">
  <input type="text" required placeholder="Input Your Name" class="in" /><br />
  <input type="email" required placeholder="Input Your Email" class="in" /><br />
   <textarea placeholder="Your Comment" required class="text"></textarea><br />
  <input type="submit" value="Submit" class="sb" />
 </form>
  </div>
 </div>

Change it LINK-TARGET-ADD-HERE

Untuk beberapa kasus, taging form HTML pada variabel input harus disesuaikan id/class dengan source link target.

Source: developer.mozilla.org/en-US/demos/detail/css3-html5-awesome-popup-contact-or-feedback-form

Dream Writer and Image Editing Program Tool

Makin hari semakin susah saja mau membuat artikel. Selain bahan yang sudah jarang, ide mentok dan sejelubet faktor-x ikut melanda :D AA Koben akan share 2 buah tool untuk kalian. Tools sederhana, mungkin banyak yg lebih keren tetapi mau di kata apa lagi gue dapet yg ini! Mungkin di antara kalian sudah ada yg pernah mendengar tentang to do list? Kalau versi browser, gue sering mendapatkan kegunaan dari to-do-list yaitu, menuliskan apa-apa kemudian akan tersimpan secara cache pada browser engine (begitu kira-kira) ;))

By master Richard Feldman he's created dreamwriter github.com/rtfeldman/dreamwriter Demo dreamwriter.io Silahkan dipelajari dan coba-coba sendiri :D
Tools ke dua mengenai image editing program by master han.kuro jsdo.it/han.kuro/omkl Di buat dengan berpacu pada HTML5 sederhana tetapi usefully. Adapun editing gambar meliputi copy, paste, merubah tinggi & lebar, move x/y, rotation, mirror reversal, and filter (brightness, color tuning, mosaic & gradation)

Silahkan download...

• Two Tool unduh di 4shared.
www.4shared.com/zip/QE8-eCVZce/Two_Tool.html
• Download Two-Tool.zip from Ziddu.com
downloads.ziddu.com/download/24197305/Two-Tool.zip.html

Sebagai bonus++ selected links resource by me from you:

codepen.io/ogzhncrt/pen/yajlz - codepen.io/arnoldsandoval/pen/ulkgz - codepen.io/yoksel/pen/JnALF - codepen.io/jjmartucci/pen/sEFta - codepen.io/jvaill/pen/bauzD - codepen.io/andreas_pr/pen/GFBfd - codepen.io/hmdmweb/pen/GoEna - codepen.io/hmdmweb/pen/zfhrd - codepen.io/thirdtiu/pen/fjnxd - codepen.io/dgerritsen/pen/Esydu - codepen.io/happelation/pen/Frkhm - codepen.io/eMaj/pen/xJFny - codepen.io/sirnightowl/pen/vCqxG - codepen.io/ZonFire99/pen/njdls - codepen.io/torresandres/pen/EaxWXE - codepen.io/dudleystorey/pen/YPzqgZ - codepen.io/kieranfivestars/pen/gbOWbM - codepen.io/thirdtiu/pen/MYWwOZ - codepen.io/sooba/pen/EaxKOx - codepen.io/bennettfeely/pen/OPJyYY - codepen.io/chrisota/pen/ByaZME - codepen.io/jaydropout/pen/pvowNX - codepen.io/joe-watkins/pen/qEBjPm - codepen.io/alistairtweedie/pen/GgROmd - codepen.io/lonekorean/pen/EaxGXo - codepen.io/SamMarkiewicz/pen/pvoKNL - codepen.io/andytran/pen/PwoQgO - codepen.io/nicholas-kebbas/pen/GgRxvd

cssdeck.com/labs/css3-color-fill - cssdeck.com/labs/galaxy-s3 -

designdazzling.com/css-shapes-web-designs - www.siteforinfotech.com/2014/11/fade-effect-image-slideshow-using-css.html - designdazzling.com/productive-css-tips-web-developers-designers - creativecrunk.com/responsive-css3-forms - alistapart.com/article/responsive-images-in-practice - developer.mozilla.org/en-US/demos/detail/html5-css3-hover-slide-out-tutorial-with-demo - developer.mozilla.org/en-US/demos/detail/jtop-desktop-interface - developer.mozilla.org/en-US/demos/detail/a-trick-to-make-header-or-nav-fix-on-scrolling-usi/launch - wpthemess.net/15-free-responsive-blogger-templates-for-2014

Jangan tidak didatangi links tersebut yaaa ;)

Update Post in 10 November, Merry Heroes Day :D

Tidak dapat bahan postingan aneh, jika begini keadaan maka harus melakukan update post dengan topic yang sudah pernah di buat :D Sobat masih ingat dengan hello bar widget for blogger? In arsip and you can get here make sticky bar in blogger like as hello bar. Masih sedikit membawa embel-embel JavaScript pada markup HTML. Sekarang 100% akan Koben sharing bagaimana cara membuat CSS3 notifications ala hello bar created by master Acidmartin.
Hi guys, you can read here developer.mozilla.org/en-US/demos/detail/css3-notifications-bar

Kode sebetulnya tinggal comot or langsung download resource. Karena AA Koben orang baik banget'z di seluruh dunia, gue kasih kode modifan agar full stylish dikit ;)) Gue tambahkan efek CSS3 slide right tuing-tuing. Ketika muncul datang dari sisi kiri menuju kanan secara cepet kemudian ada tuing² kiri-kanan bentar :D
Ambil kode CSS dari sini CSS3 notification bar Pasangkan markup HTML berikut

<div class="aspal-hellobar aspal-hellobar-e34c26 slideRight">
    <input type="checkbox" id="aspal-hellobar-switcher" checked="checked" />
        <label for="aspal-hellobar-switcher">
            <span>&#8679;</span>
            <span>&#8681;</span>
        </label>
<div>
 <div>BLAH BLEH BLOH HERE...BLAH BLEH BLOH HERE...BLAH BLEH BLOH HERE... Ain't it cool?</div>
</div>
</div>

Save.
Satu updetan beres, lanjut bro...

Ooops ada kelupaan, jika sobat memasang kode CSS dari web sumber, tengok pada bagian kode

.aspal-hellobar.aspal-hellobar-e34c26 > div,.aspal-hellobar.aspal-hellobar-e34c26 label span {
background: #e34c26;
}

Itu merupakan jenis gaya yg ada, terdapat 5 gaya varian warna, sobat pilih salah satu, dan rubah juga code pada markup HTML<div class="aspal-hellobar aspal-hellobar-e34c26 slideRight">Kalau mau memilih efek gaya (tuing-tuing) silahkan baca miscellaneous hover effects using CSS3.

Kotak pencarian atau search box merupakan salah satu bagian dasar yg mesti ada kehadirannya pada sebuah web/blog. Untuk memudahkan dalam melakukan explorasi konten ;) Salah satu kotak pencarian full stylish karya master Marco Biedermann, Mac OS X 10.10 Yosemite Search codepen.io/m412c0/pen/dvFCB

.search {
width: 100%;
}
.search .field {
position: relative;
}
.search label {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAQAAAC1QeVaAAAAxElEQVR4AXXPIUuDcRDA4Zv4AUSwTLEKVoNlySyCYLO98CCsahGrX0AW/QhmBRHEJghLS4JFBBXDgrJi2In78w8v4v3S8XDh4nd0DTxLEzd2RC2EnrH07trQVDrXqbhs7FvfnBDWDKWTigOpL2oWvZpYKPjio1zVHEt7BdOtaLUtHRX8MmqjRjooeCVttPBOWi+4JT1aLaDjVLpU/5ytn840Dj1IaWSpYmi8yVlTF54qh9K8nn27usJK5fC3yvfhPx7a/AE9dYwDEfKrlAAAAABJRU5ErkJggg==) no-repeat 0 50%;
color: #b2b2b2;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
transition: left .4s, transform .4s;
padding-left: 1.25em;
}
.search .input-search {
border: 1px solid #dfdfdf;
border-radius: .25em;
box-shadow: 0 1px 0 #bfbebf;
display: block;
font: 400 1em/1.5em sans-serif;
padding: .5em 1.75em;
width: 100%;
}
.search .input-search:focus + label, .search .input-search:valid + label {
left: .5em;
transform: translate(0, -50%);
}
.search .input-search:valid + label {
text-indent: -9999px;
}

<form action="http://YOUR-ADDRESS-BLOG.blogspot.com/search" class="search">
    <div class="field">
      <input type="text" class="input-search" id="input-search" name="q" pattern=".{1,}" required="required">
      <label for="input-search">Search here...</label>
    </div> 
</form>

Change YOUR-ADDRESS-BLOG with your address blog.

Update terakhir yg ketiga tentang markdown Walau jauh dari topic, tetapi tools satu ini unik untuk diketahui :P Silahkan meluncur github.com/jonschlinkert/remarkable

Happy update \m/

Make Reflection Effect use CSS3 Gradients

Apa yang mau di posting? Mari kita bermain-main dengan CSS3 gradient Jenis CSS gradients bisa di bagi menjadi dua: Linear Gradient (turun/naik/kiri/kanan/diagonal) dan Gradient radial (pusat/center) AA Koben akan berbagi bagaimana cara membuat effect reflection menggunakan CSS linear-gradient Efek seperti memantulkan bayangan dengan permainan warna latar belakang and linear gradients property.

Demo & resource: cssdeck.com/labs/full/iesvlset

Gue modif kode yg sudah ada dengan menyisipkan variasi gambar!

.icon-r {
top: 0;
color: #fff;
width: 65px;
height: 65px;
line-height: 65px;
font-size: 40px;
cursor: pointer;
border-radius: 5%;
text-align: center;
position: relative;
display: inline-block;
-webkit-transition: top 250ms;
-moz-transition: top 250ms;
-o-transition: top 250ms;
transition: top 250ms;
background: -moz-linear-gradient(#000,#555);
background: -o-linear-gradient(#000,#555);
background: linear-gradient(#000,#555);
background: -webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#000),color-stop(100%,#555));
background: -webkit-linear-gradient(#000,#555);
}
.icon-r span {
opacity:.8;
-webkit-transition: opacity 250ms;
-moz-transition: opacity 250ms;
-o-transition: opacity 250ms;
transition: opacity 250ms;
}
.icon-r span img {
margin: 0;
padding: 0;
border-radius: 5%;
vertical-align: middle;
}
.icon-r:hover {
top: -5px;
}
.icon-r:hover span {
opacity: 1;
}
.icon-r:hover:after {
bottom: -62px;
}
.icon-r:after {
content:'';
left: 0;
width: 65px;
height: 50px;
bottom: -50px;
position: absolute;
border-radius: 5%;
opacity: .5;
-webkit-transition: bottom 250ms;
-moz-transition: bottom 250ms;
-o-transition: bottom 250ms;
transition: bottom 250ms;
background: -webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#fff),color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(#fff,rgba(255,255,255,0));
background: -moz-linear-gradient(#fff,rgba(255,255,255,0));
background: -o-linear-gradient(#fff,rgba(255,255,255,0));
background: linear-gradient(#fff,rgba(255,255,255,0));
}

<div class="icon-r">
  <span><img src="http://2.bp.blogspot.com/-dJzGsy51O_E/UQBGTp-p8vI/AAAAAAAAA64/AqqyU4NdKvE/s1600/twitter.png" alt="Tweet" /></span>
</div>
<div class="icon-r">
  <span><img src="http://2.bp.blogspot.com/-z4lRtTukgo0/UQBGMkSRRKI/AAAAAAAAA6s/Q_DmGd2ehv0/s1600/facebook.jpg" alt="FB" /></span>  
</div>
<div class="icon-r">
  <span><img src="http://2.bp.blogspot.com/-MkHfO5ZdM7o/UQBGZDHwsUI/AAAAAAAAA7E/JpTVTAi9PTg/s1600/facebook.jpg" alt="YouTube" /></span>
</div>

Warna reflection cocok untuk area dengan warna latar gelap. Kalau untuk area dengan warna terang, sobat tinggal ganti saja kode background pada icon-r:after

Bye :-h

Horizontal Navigation Menu Fold Effect use CSS3

Bagi sobat yang template blognya belum mempunyai menu, AA Koben akan share sebuah menu full stylish. Fungsi utama dari menu tidak lain untuk keperluan navigasi. Kita akan membuat menu navigasi horisontal fold/unfold efek menggunakan CSS3 tanpa javascript. Penggunaan fungsi css rotateX (), 3D transform and transition properties untuk menciptakan efek lipat. Akan teripta dua gaya, satu dengan dua tingkat sub menu dan yang kedua dengan tingkat sub menu dan pratinjau gambar!

Sobat dapat melihat hasil akhir (demo) dan download file dari sumber artikel by Pixel Hint pixelhint.com/tutorial-css3-horizontal-navigation-menu-fold-effect
Pada sumber artikel terdapat element header & logo. AA cuma mengambil bagian nav menu saja, menghilangkan bagian header, wrapper and logo. Posisi original nav yaitu memakai float: right, dan itupun saya hilangkan. Karena kode CSS bentrok dengan emoticon, maka sikat kode CSS di undercover blogger

Gantikan IMAGES/NAV_ARROW.PNG & IMAGES/BOX-ARROW.PNG dengan link image.

<nav>
<ul>
<li>
<a href="#">Main menu I<i class="nav_arrow"></i></a>
<!-- Menu item Sub menu level 1 Style 1 -->
<div class="sm_style1_level1">
<ul>
<li>
<a href="#">
<span class="txt"><img alt="" title="" src="IMAGES/MENU_ICON1.PNG" class="menu_icon"/> Level 1<i class="nav_arrow"></i></span>
</a>
<!-- Menu item Sub menu level 2 Style 1 -->
<div class="sm_style1_level2">
<ul>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">
<span class="txt"><img alt="" title="" src="IMAGES/MENU_ICON2.PNG" class="menu_icon"/> Level 1<i class="nav_arrow"></i></span>
</a>
<!-- Menu item Sub menu level 2 -->
<div class="sm_style1_level2">
<ul>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">
<span class="txt"><img alt="" title="" src="IMAGES/MENU_ICON3.PNG" class="menu_icon"/> Level 1<i class="nav_arrow"></i></span>
</a>
<!-- Menu item Sub menu level 2 -->
<div class="sm_style1_level2">
<ul>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">
<span class="txt"><img alt="" title="" src="IMAGES/MENU_ICON4.PNG" class="menu_icon"/> Level 1<i class="nav_arrow"></i></span>
</a>
<!-- Menu item Sub menu level 2 -->
<div class="sm_style1_level2">
<ul>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">
<span class="txt"><img alt="" title="" src="IMAGES/MENU_ICON5.PNG" class="menu_icon"/> Level 1<i class="nav_arrow"></i></span>
</a>
<!-- Menu item Sub menu level 2 -->
<div class="sm_style1_level2">
<ul>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<a href="#">Main menu II<i class="nav_arrow"></i></a>
<!-- Countries item Sub menu level 1 style 2 -->
<div class="sm_style2_level1">
<ul>
<li>
<a href="#">
<span class="countries">New York</span>
</a>
<a href="#" class="preview">
<span class="preview_arrow"></span>
<img alt="" title="" src="IMAGES/IMAGE1.JPG" />
</a>
</li>
<li>
<a href="#">
<span class="countries">Germany</span>
</a>
<a href="#" class="preview">
<span class="preview_arrow"></span>
<img alt="" title="" src="IMAGES/IMAGE2.JPG" />
</a>
</li>
<li>
<a href="#">
<span class="countries">Italy</span>
</a>
<a href="#" class="preview">
<span class="preview_arrow"></span>
<img alt="" title="" src="IMAGES/IMAGE3.JPG" />
</a>
</li>
<li>
<a href="#">
<span class="countries">France</span>
</a>
<a href="#" class="preview">
<span class="preview_arrow"></span>
<img alt="" title="" src="IMAGES/IMAGE4.JPG" />
</a>
</li>
<li>
<a href="#">
<span class="countries">Spain</span>
</a>
<a href="#" class="preview">
<span class="preview_arrow"></span>
<img alt="" title="" src="IMAGES/IMAGE5.JPG" />
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">Main menu III</a>
</li>
<li>
<a href="#">Main menu IV</a>
</li>
</ul>
</nav>

Gantikan seluruh IMAGE!
DONE.

10 Top CSS Menu Tutorials www.inspireleads.com/10-top-css-menu-tutorials

Make PopUp Pure use CSS

Berbagai macam definisi popup, begitupun di dalam dunia CSS mempunyai popup tersendiri! AA akan share bagaimana cara membuat pop-up full murni 100% menggunakan bahasa CSS. Pop-up bergaya full open ketika melakukan klik. Berikut beberapa gaya yg sudah gue post:

• Make PopUp with CSS 3
• Popup with CSS for Image

Aku buatkan 3 variasi termasuk default, untuk tampilan tagging PRE dan display image. Ukuran height and width area sudah dipatok dengan nominal tertentu agar terlihat keseragaman :D Sudah barang tentu sobat dapat kreasikan lagi dengan kode-kode lain agar tampak full stylish b-)

.wrappop {
width:35%;
padding:0;
margin:10px auto;
display:block;
}
.area {
border:#555 1px solid;
text-align: left;
height:250px;
overflow-y:auto;
font-size:10px;
}
.area img {
width:100%;
height:100%;
display:block;
margin:0;
}
.area pre {
padding:0 5px;
font-family:Consolas,"Courier New",Courier,monospace;
}
.popup {
display:none;
}
.popup:checked ~ .area {
top:0;
bottom:0;
left:0;
right:0;
color:#ddd;
padding:10px;
font-size:14px;
position:fixed;
box-sizing:border-box;
height:calc(100% - 0px);
background:rgba(0,0,0,.9);
}

<label class="wrappop">
 <input type="checkbox" class="popup" />
  <div class="area">
   --- ADD CONTENT HERE ---
  </div>
</label>

Itu merupakan cara penulisan HTML default display! Sedangkan untuk penulisan syntax gambar sbb

<label class="wrappop">
 <input type="checkbox" class="popup" />
  <div class="area">
   <img src="LINK IMAGE" alt="" />
  </div>
</label>

Terakhir penulisan tagging PRE.

<label class="wrappop">
 <input type="checkbox" class="popup" />
  <div class="area">
   <pre>
   
   --- ADD CODE HERE ---
   
   </pre>
  </div>
</label>

Demo codepen.io/beben-koben/full/Ipwsc

Others:
www.script-tutorials.com/css3-modal-popups
www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3

See you \m/

Creating Cool Pages using Templates Blogger

Seperti yang sudah sering MR Beben Koben utarakan, bahwa kita sebagai blogger full stylish jika menginginkan sesuatu tinggal searching sajah :D Semua sudah ada tersedia, tinggal bermodalkan skill and kreativitas! Artikel tutorial bejibun, snippet jQuery tinggal comot, plugin/snippet script apalagi...pokoke buanyak dan semua sudah tersaji rapih ;)) Kesempatan sekarang gue akan mencoba melatih kreasi sobat-sabit cara membuat tampilan HOME.
Begini maksud & tujuan...
Sobat pernah melihat display home yg hanya menampilkan sedikit konten dan hanya menyediakan beberapa link tujuan! Kebanyakan web sering memakainya. Seperti link portfolio, project, about me, contact or etc di kemas hanya dalam satu bundel tampilan!
Contoh:

assadsyaifullahharahap.blogspot.com - techno-39.blogspot.com

Cool kan b-)
Inti trik & tut's dari itu semua tidak lain adalah blank template blogger.
Kode .xml blank template blogger

Beberapa usefully link:

• subinsb.com/make-a-blank-blogger-template
• www.mybloggertricks.com/2012/09/turn-blogger-to-blank-page.html
• stackoverflow.com/questions/10011090/simplest-blogger-template-blogspot
• www.widgetgenerators.com/2012/11/blank-blogger-template-or-blank-html.html
• bungleisinthejungle.blogspot.com/2013/02/create-blank-blogger-template-or-blank.html

Kalau sudah mempunyai itu, tinggal masukin deh kode CSS dan HTML pada tempat semestinya bro. Harus punya dulu dong kode tampilan macam mana yg akan ditampilkan. Mau buat sendiri juga bisa kalo memang sudah jago :D

Penampakan & source file by codepen.io/Akiletour/pen/Eakfn

Penampakan & source file by developer.mozilla.org/en-US/demos/detail/css3-windows-8-animation-demo/launch

Silahkan sobat download kode template .xml dari penampakan screenshot di atas. Upload dan lihat hasil...
Template blogger unduh in 4shared www.4shared.com/zip/XhIwam3Zce/Template_Blogger.html
Download Template-Blogger.zip in Ziddu downloads.ziddu.com/download/24123623/Template-Blogger.zip.html

Ekstrak .zip dan buka hasil download pada notepad, edit link tujuan, warna atau apapun terserah!

Bye :-h

Who is the most optimal, Image Compressor

Tinggal pintar-pintarnya kita kapan harus memakai jpg, jpeg, png, gif or etc dalam menampilkan sebuah gambar! Sudah barang tentu yang sering kita pakai untuk urusan posting atau hal lainnya tidak jauh dari tiga jenis saja, yaitu jpg, png atau gif. Pada kesempatan sekarang AA Koben akan berbagi informasi 5 web layanan yg bergerak dalam urusan kompres-mengkompres gambar berekstensionkan PNG. Karena extension PNG-lah yg dapat membuat background menjadi transparan selain gif, bitmap atau sejenisnya? Banyak sekali source untuk hal compress di luaran sana, oleh sebab itu saya pilih yg menurut gue full-stylish :">

Percobaan dilakukan terhadap sebuah image dengan spesifikasi sbb

Dimensions: 1024 x 3255
Type: PNG Image
Size: 831 KB

Silahkan terjemahkan masing-masing :P
Dari lima web rujukan terikat proses kinerja dengan sistem engine masing-masing. Jadi gambar kompres tidak selalu dimenangkan oleh salah satu web. Bisa jadi web lain memenangkan hasil kompresan. So... be a creative

Compressor.io

TinyPNG

Compress PNG

Kraken.io

Yang terakhir adalah web image optimization tool sitereportcard.com/imagereducer.php Di sini kalian bisa optimasi image (GIF, JPG, PNG) and hasil generated akan ditampillkan beserta dengan thumbnail. Kalau tidak salah ada 7 hasil generate, berikut tampilan urutan pertama & terakhir.

Pertama	Terakhir

Nah, siapa pemenangnya! Biasakanlah selalu optimasi image sebelum melakukan upload. Karena selain friendly SEO engine, sudah tentu mengirit bandwith hostingan :))

Bye :-h

Learn Markdown use Markdown-Edit and to-Markdown

Bagi seseorang yang keseharian bertemu dengan fasilitas internet (online-online), mau mencari apa saja baik itu solusi, bahan pekerjaan, musik, video, aplikasi atau apapun bisa langsung mencari via search engine. Begitupun anda dan saya sebagai blogger penuh gaya (full stylish blogger) mau itu-ini tinggal searching ;)) taraaa...jreng...ketemu deh. Hari ke minggu, week to the month, bulan ke tahun dirasakan semakin berat untuk membuat 1 artikel yang memiliki bobot. Mentok ide bro :))
Berbicara mengenai markdown AA Koben mau melakukan update satu artikel dari postingan it's all about markdown syntax.

Gue akan beri kepada kalian dua buah tools keren punya tentang markdown editor b-) By georgeOsdDev he's created about markdown-edit, and by domchristie he's make to-markdown. Kenapa saya jatuhkan pilihan hanya kepada 2 opsi di atas? Menurut ane dengan memiliki kedua tool tersebut sudah dapat di bilang mewakili kita untuk belajar ria dengan syntax markdown ;)
Berikut spesifikasi:

Markdown Edit

• Hasil generate sudah mencakup raw.md, raw.html, and .html
• Ready added auto reload, enable shortcut key, marked for converter & you can use github API for converter.

Karena tampilan editor yg di usung sudah berupa syntax markdown (kotak sebelah kiri), maka sobat harus sudah familiar dulu dengan bahasa mark-down. Kalau untuk urusan convert HTML dasar ke syntax markdown, daripada itu gue comot to-markdown sebagai tool pendukung :D

Sebenarnya sudah bisa langsung download pada halaman source masing-masing kedua tool

1. Online markdown editor/viewer.
github.com/georgeosddev/markdown-edit
2. An HTML to Markdown converter written in JavaScript.
github.com/domchristie/to-markdown

Karena AA baik hati, maka sudah saya buatkan sebundel buat anda

• Markdown edit unduh via 4shared.
//www.4shared.com/zip/ODeCLMzDba/Markdown_Edit.html
• Download markdown-edit.Zip in ziddu.
//downloads.ziddu.com/download/24104115/Markdown-Edit.zip.html

Bonus links kalau mentok ide...

codepen.io/jaeming/pen/EwsqC - codepen.io/marionebl/pen/fensm - codepen.io/domakas/pen/vJgyf - codepen.io/codeandcam/pen/AmtvB - codepen.io/zadvorsky/pen/dILAG - codepen.io/zadvorsky/pen/oqhgp - codepen.io/codeandcam/pen/ixgHf - codepen.io/edadams/pen/Gqteo - codepen.io/satya164/pen/HpFAD - codepen.io/SitePoint/pen/HFnfB - codepen.io/vsonx/pen/aFnHi - codepen.io/LukyVj/pen/GeFKD - codepen.io/netzzwerg/pen/hfutI - codepen.io/Birky/pen/nFLmK - codepen.io/JustAnotherCoder/pen/gIqtp - developer.mozilla.org/en-US/demos/detail/playlist-player - developer.mozilla.org/en-US/demos/detail/css3-windows-8-animation-demo

Bye :-h

Make Animation use CSS Keyframe or CSS Sprites

Ketika melihat Pen dari master Brandon Lawrence codepen.io/bvbrandon/full/Hvqes AA lalu membuka arsip dan persis dengan salah satu source pada postingan selection good resources may 2014 dengan judul animating images with css keyframes! Sobat dapat mempelajari di halaman www.pencilscoop.com/2014/04/animating-images-with-css-keyframes Salah satu kemajuan yg terjadi pada bahasa CSS! Walau ribet dengan kode-kode dalam pembuatan, akan tetapi hasil tetap memuaskan :) Beberapa skill yg sobat harus kuasai selain CSS tentu photoshop :P

Dalam mengembangkan keahlian dalam per-CSS-an tentu dengan membaca, praktek dan selalu mencoba dengan teknik² sukar alias bertemu dengan kasus :)) Contoh pelajaran CSS tingkat advanced tentang emoticon Source lain dalam membuat emoticon dengan menggunakan image, dipadukan dengan CSS keyframe dan CSS image sprites! Buka halaman berikut guna bertemu dengan CSS image sprite animation skype emoticons.

cssdeck.com/labs/css-image-sprite-animation-skype-emoticons

Untuk mempelajari harus punya source yg berjalan secara offline, silahkan download...

downloads.ziddu.com/download/24088817/Skype-emoticons.zip.html

Kalau sobat mau memasang emot tersebut jangan pasang semua, karena kode yg lumayan bejibun. Pilih saja seperlunya ;) Berikut ilustrasi dan penjelasan...

Buka file Skype emoticons - Melwyn Pawar.htm pada text editor sobat (notepad), kemudian pilih emot yg akan digunakan. Lakukan optimize image terlebih dahulu sebelum dihostingkan. Karena kode tingkat mahir, penulisan syntax image sbb:

<img src="data:image/gif;base64, R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="emoticon CLASS" />

Kode warna merah simpan saja, karena kalau tidak pakai itu akan ada gambar default alt. Saya sudah coba akali tetapi belum menemukan solusi :-?? Ada yg bisa :-"

www.designsave.com/2014/09/free-portfolio-blogger-templates.html

Happy CSS \m/

Free Download EscApe and Charsets Tool by XEM

Apakah sobat masin ingat dengan master Maxime Euzière! Pembuat HTML editor dengan kode yang cukup sedikit, original tool di kenal dengan nama MiniCodeEditor xem.github.io/miniCodeEditor? Bisa jadi xem itu adalah nicknya :D Lama nggak jali-jali, gue tengok sudah ada 2 buah tool baru pada halaman projects / experiments sang master. EscApe and Charsets. EscApe is convert any unicode string in 33 different formats used on the Web. Charsets is a few experiments based on unicode and character encodings on the Web. Bermanfaat sekali pokoknya tools ini bro buat user yg sering bermain dengan format unicode. Selaraskan tulisan dengan format bahasa apa yg digunakan, maka tampilan tulisan akan muncul sesuai.

Buka halaman berikut xem.github.io/escape klik banner github pojok kanan atas, cari tombol Download ZIP. Sebagai alternatif dulu saya memakai ini juga rishida.net/tools/conversion (acak-acak kategori apps, tengok tools keren punya di sana)
Untuk bagian charsets harap hati-hati dalam membuka link, karena hasil generate akan memakan waktu loading browser sodara-sodara!!! Ketika saya men-download file charsets, ternyata ada satu link JavaScript (fromcodepoint.js) yg masih terhubung dengan hostingan rawgit.com. Jadi online nggak offline. Mungkin karena masih eksperimen dan dalam perkembangan, script tersebut belum di pisah (nggak tauk kalo lupa) ;))

Oleh karena itu AA Koben sebagai bloglang baik hati sejagat alam, sudah membungkuskan paket xem menjadi 1 bundel dan beroperasi secara offline tentunya :-" Tadi mau fork via github, pas buka tidak bisa mengoperasikan github :D :))

• Download XEM Experiments.zip in 4shared.
www.4shared.com/zip/_GZ_mbBhce/XEM_Experiments.html
• Download XEM-Experiments.zip in Ziddu.
downloads.ziddu.com/download/24076731/XEM-Experiments.zip.html

Demikian informasi singkat, kurang dan lebihnya tolong beri komentar :P

Happy blogging \m/

HTML Form with Pop Up Labels Effect

Melongok ke web dynamic drive CSS library ada yang unyu-unyu. Telah update beberapa trik di sana, yang mana di dominasi dengan kode CSS3. Dengan semakin maju browser engine gaya penulisan terhadap kode CSS juga tidak bisa dielakan mengalami perubahan yg cukup signifikan. Tentu hal ini berimbas pada kita sebagai user untuk lebih giat belajar agar tidak OON :))
Saya akan sosor, sharing kepada kalian artikel dengan judul pop up form labels! Kotak feedback dengan gaya label akan keluar popup ketika mengklik di area kotak. Begitu kira-kira ;))

.form div.dynamiclabel {
display: block;
margin: 40px 0;
font: 16px;
position: relative;
}
.form div.dynamiclabel input[type="text"], form div.dynamiclabel textarea {
width: 100%;
padding: 10px;
border: 1px solid #c3c3c3;
border-radius: 5px;
}
.form div.dynamiclabel textarea {
height: 200px;
}
.form div.dynamiclabel label {
left: 0;
top: 10px;
color: white;
background: #aaa;
position: absolute;
padding: 3px 10px;
border-radius: 2px;
font-weight: bold;
border: 1px solid black;
opacity: 0;
z-index: -1;
box-shadow: 4px 1px 5px black;
-webkit-backface-visibility: hidden;
-moz-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.form div.dynamiclabel > *:focus {
border: 1px solid #000;
box-shadow: 0 0 8px 2px #000;
}
.form div.dynamiclabel > *:focus + label {
opacity: 1;
z-index:100;
top: -35px;
-ms-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
}

<form class="form">
<div class="dynamiclabel">
<input id="name" placeholder="Name..." type="text">
<label for="name">Name</label>
</div>
<div class="dynamiclabel">
<input id="email" placeholder="Email Address" type="text">
<label for="email">Email Address</label>
</div>
<div class="dynamiclabel">
<textarea id="feedback" placeholder="Feedback!!!"></textarea>
<label for="feedback">Add your feedback</label>
</div>
</form>

Demo (set focus on each form field):

Name

Email Address

Add your feedback

Source and selected resource + Bonus...

Pop up form labels
• www.dynamicdrive.com/style/csslibrary/item/pop_up_form_labels
3D Flip Menu
• www.dynamicdrive.com/style/csslibrary/item/3d_flip_menu
Responsive Iconic Menu
• www.dynamicdrive.com/style/csslibrary/item/responsive_iconic_menu
Grayscale Image Gallery
• www.dynamicdrive.com/style/csslibrary/item/grayscale_image_gallery
Flat flipping menu buttons
• www.dynamicdrive.com/style/csslibrary/item/flat_flipping_menu_buttons
CSS3 oval switch checkboxes
• www.dynamicdrive.com/style/csslibrary/item/css3_oval_switch_checkboxes
45+ Best Free Responsive Blogger Templates
• thedesignpixel.com/best-free-responsive-blogger-templates.html
Animated drop-down menu using only CSS3
• basicuse.net/articles/pl/textile/html_css/how_to_create_animated_drop_down_menu_using_only_css3
Dynamic backgrounds on forms
• codepen.io/rlacorne/pen/wnLJH

Bye :-h