Bagi sobat blogger yang membutuhkan tools dan aplikasi buat memperindah blognya BEN TOOLS
Buat kawan yang mau pasang iklan Silahkan hubungi pada halaman kontak yah...xixixi.
Blog untuk melihat konten berplat-form blogspot di seluruh dunia dan kumpulan tools pendukung operasional blog.
Your ads here!!!
Assalamu'alaikum
Selamat datang di Tutorial Blog for Stylish Blogger. Semoga tidak keberatan untuk membukanya. Sssttt...MOZILLA pakainya yah...! Jangan lupa mampir lagi ya huehuehue. This is blog looks better in FIREFOX. Get MOZILLA™ Happy blogging \m/
Wassalamu'alaikum ☺

Resources

1 2 3 4 5 6 7 8 9
18 Februari 2014

UNTITLED

07 Desember 2014

0 Komentar WTF
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/

8 Komentar WTF
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.

htmledit

HTML Online editor and see it.

HTML-Online-Try

Real time HTML editor with preview.

scratchpad

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

fiddly

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

0 Komentar WTF
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/

0 Komentar WTF
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

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
al-Quran

MISC

BLANK

FACEBOOK PAGE