Selection Good Resources in Beginning of the Year

Sebagai blogger pendatang setia blog Koben, pasti sobat sudah pada tahu satu kebiasaan gue yang suka membuat postingan dengan tema selection good resources Jika kalian kunjungi links yg ada, maka dapat menciptakan ide untuk bahan artikel post ;)) Simpan link blog/web yg notabene memang selalu update konten! Ex www.codepen.io salah satu tempat front end designer playground para kreator code. Generated md5 passwords javascript sebuah tool generator password. Uniknya ketika kita membuat satu kata kunci untuk Site Name & Email used on site secara otomatis hasil generate pass tidak akan berubah. Biasanya kalau lupa itu pass, dengan adanya tool ini asalkan kita ingat Site Name & Email used on site maka passnya akan muncul! Pokoknya begitu :P

Berikut beberapa seleksi post awal tahun yg saya dapatkan jauh-jauh sebelum hari...

Keikai MediaRSS Viewer jsdo.it/murakame/zNy0 - Hue · saturation · brightness (Lightness/Luminance) jsdo.it/inu7771/mr28 - Google Maps API jsdo.it/buibui80/k1FP - Cat picture book jsdo.it/teetteet/dmIT - Get count of SNS of URL jsdo.it/teetteet/6o8v - Test of API jsdo.it/tkrkt/jsdoit-menu - base64 of noise transparent PNG image jsdo.it/teetteet/gkVm - Execute Source Image jsdo.it/teetteet/4KU5 - Test of do's tool is happening DOM is jsdo.it/elk/cHPO - Sentence inclusive of share futon want five + α jsdo.it/teetteet/7Lwj - GeoLocator STANDALONE jsdo.it/teetteet/aMkO - Simple scroll jsdo.it/teetteet/wlXn - Hyper cat type canon Mk.2 Ex with intercooler jsdo.it/sasaplus1/egax - Gradient Generator jsdo.it/teetteet/cQq5 - Fullscreen colorpicker jsdo.it/teetteet/hhCI - Link source code viewer jsdo.it/teetteet/58hW - CSS3 Tree jsdo.it/teetteet/tNwD - Tag Cloud jsdo.it/qiu.lin/wfhN - HSV Color Picker jsdo.it/teetteet/6bq1 - Two-color conversion of the image jsdo.it/teetteet/myu2 - Simple Whiteboard with fabric.js jsdo.it/yamineko/kOuy - ACE editor 3 for PC jsdo.it/teetteet/ixZj - Illustrator mock jsdo.it/han.kuro/vsz1y - Current position acquisition and display application jsdo.it/teetteet/9X5q - Good feel of form layout jsdo.it/teetteet/jYv6 - gct256.PerlinNoise jsdo.it/teetteet/pSUo - Text animation jsdo.it/teetteet/3BqQ - SVG animation background generation jsdo.it/reosablo/zU9F - Implement convolution (the convolution processing) jsdo.it/edo_m18/ta0R - CSS Tooltip On Click cssdeck.com/labs/csstooltiponclick - Checkbox styling in CSS cssdeck.com/labs/n8gvfch6 - Animated Responsive Skills Bar cssdeck.com/labs/animated-responsive-skills-bar

Rebound Newsletter cssdeck.com/labs/c9ik4c94 - JQuery Auto Complete cssdeck.com/labs/bxaleaxw - Icon in CSS cssdeck.com/labs/css3-icons - Treestyle list cssdeck.com/labs/treestylelist - Animated gradient cssdeck.com/labs/ojxtjupf - Calendar 2015 cssdeck.com/labs/calendar-2015 - Buttons and inputs flat style ui cssdeck.com/labs/m01fcolh - Styled Select Option cssdeck.com/labs/styledselectoption - Rotating? Menu codepen.io/tmrDevelops/pen/wEBmk - CSS Animated Search Box Concepts codepen.io/brandonkennedy/pen/yGjsi - The super fast Coolors schemes generator! codepen.io/fbrz/pen/aynlk - Pure CSS slice cube slideshow codepen.io/pixelass/pen/mGtfF - Drop & Down codepen.io/mgh/pen/dsqIF - Peeled Text Transforms codepen.io/Michiel/pen/OPPKMr - 3D Experiment Formcodepen.io/Ruddy/pen/MYwqrK - Pure CSS iOS 7 Bokeh Background codepen.io/marvinengelmann/pen/bNdawZ - Flat Breadcrumb buttons codepen.io/ShawnSauce/pen/raNXmw - Pure CSS folded-corner effect codepen.io/ravinthranath/pen/XJJWbr - Animated Image Changes with background-blend-mode codepen.io/dudleystorey/pen/emmzvO - Online notepad codepen.io/kimblim/pen/NPPZVo - Pure CSS browser mockups codepen.io/adrienjarthon/pen/ogjjoj

Resizing, Moving, Snapping Windows with JS & CSS codepen.io/zz85/blog/resizing-moving-snapping-windows-with-js-css - Homepage with bourbon and CSS only Nav codepen.io/jongagarin/pen/pvjGKe - Text Preferences codepen.io/mattdawson/pen/wBMgpd - Set transparent background on image with canvas codepen.io/Mamboleoo/pen/MYKeEX - A Pen by Juan Patten codepen.io/runningskull/pen/vELRyY - CSS cylinder codepen.io/madebyjam/pen/bNERqq - Super Mega codepen.io/tmrDevelops/pen/myVwKE - Simple Accordian codepen.io/zeinab92/pen/PwZXgd - Responsive Text With Only CSS codepen.io/wossname/pen/raVezv - A Pen by Theodor Vararu codepen.io/tvararu/pen/zxqeQd - Glitched Text codepen.io/alexpivtorak/pen/GgZYbL - Animated rounded border on hover codepen.io/ccrch/pen/bNpOZx - Animated "Fold Out" Menu Labels codepen.io/mikegbabb/pen/myPbyK - Progressive blur with CSS & SVG codepen.io/iamvdo/pen/xECmI - Pure CSS, annotated linear carousel codepen.io/paulnoble/pen/ZYOzLG - CSS like buttons codepen.io/GriffinImer/pen/NPrrdx - Simple Player UI codepen.io/itsnoureddine/pen/ZYOebj - Loader transforming to nav animation concept codepen.io/petethedude/pen/zxBmEq - Futuristic HUD Control Monitor Interface codepen.io/declandewet/pen/GgqwXK - Placeholder Services codepen.io/jakob-e/pen/emzxqd - Magic ball (animated) codepen.io/tanghoong/pen/ByLKPG - Flexbox Shenanigans! codepen.io/starzonmyarmz/pen/WbGrgM - Material inspired grid codepen.io/tamashi/pen/PwGZNN - Offcanvas sidebar menu with a twist codepen.io/malydok/pen/LERvpM - Text mask with mix blend mode codepen.io/jreece/pen/NPRzeo - One-way CSS slider codepen.io/nicolasjengler/pen/QwKmqj - Rotating border codepen.io/imprakash/pen/VYaaKQ - Generated MD5 Passwords Javascript codepen.io/fabean/pen/NPbGeq - Account Slider developer.mozilla.org/en-US/demos/detail/account-slider - CSS Specificity Graph Generator jonassebastianohlsson.com/specificity-graph - BPG Image Comparison xooyoozoo.github.io/yolo-octo-bugfixes/

60 Cool CSS Effects On Codepen www.uibrush.com/60-cool-css-effects-codepen

Happy new year <:-P

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/