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

21 Februari 2015

UNTITLED

21 Februari 2015

0 Komentar WTF
Apakah kalian pernah mendengar/membaca "encrypt","encode","packer","obfuscator" atau apapun itu namanya! Satu yang pasti mereka membuat itu dengan tujuan untuk melindungi (katanya), tetapi tujuan yg sebenarnya adalah membuat bingung :D Gue pernah bertanya kepada salah seorang master script tentang script yg di phrase/obfuscation! Jawabannya cukup sederhana dan menohok juga.
Ngapain sudah buat digitu-gituin, kalau mau ngasih ya ngasih saja, kalau enggak mau ngasih ngapain di buat bingung
begitu kurang lebih isi jawabnya ;)) Toh mau bagaimanapun bentuk semerawutnya/susahnya kita membuat bahasa script, asalkan itu bertujuan untuk ditampilkan ke browser engine, tetap saja akan terbaca sebagai bagian dari bahasa HTML...CMIIW :-"scriptasylum

Salah satu web yg membuat jasa Escaping/Encoding Script adalah www.scriptasylum.com Berikut beberapa hasil escape/encode nya

%62%65%62%65%6E%5B%64%6F%74%5D%6B%6F%62%65%6E%40%67%6D%61%69%6C%5B%64%6F%74%5D%63%6F%6D

cfcfo%266Cepu%266ElpcfoAhnbjm%266Cepu%266Edpn1

dgdgp%277Dfqv%277FmqdgpBiockn%277Dfqv%277Feqo2

ehehq%288Egrw%288GnrehqCjpdlo%288Egrw%288Gfrp3

fifir%299Fhsx%299HosfirDkqemp%299Fhsx%299Hgsq4

gjgjs*%3AGity*%3AIptgjsElrfnq*%3AGity*%3AIhtr5
Tulisan edan itu jika dilakukan kebalikannya (unescape/decode) akan terlihat asli tulisan tersebut! Ini nih isinya

beben[dot]koben@gmail[dot]com

Dikarenakan web scriptasylum mau di shutdown, maka si empunya sdh berbaik hati mau membagikan beberapa hasil source-source selama berkarya O:-) Termasuk halaman HTML/text/JavaSript Escaping/Encoding Script. AA Koben, si bloglang anu ganteng kalem tea en bageur sajagat sudah membuatkan versi stand alone offline untuk kita gunakan. Ya kurang lebih ada 17 pages yg bisa gue catut!

You can check: www.scriptasylum.com/scripts.html & www.scriptasylum.com/tutorials.html
You can get: drive.google.com/open?id=0BxNMf6DwAvu8Z2RYWGhTdWlzTzg
And password .7z is ... nu8ye<r:e

Bye :-h

0 Komentar WTF
Dapat source bagaimana cara menampilkan gambar yang panjang menjulang ke bawah, yg menghabiskan layar monitor kita! Sobat mungkin pernah melihat gambar dengan resolusi tinggi alias pixelnya besar bingit? Secara default browser engine akan memberikan tanda hover pada cursor dengan lambang zoom in/zoom out. Sekarang AA Koben akan berbagi trik tutorial cara agar gambar dengan panjang ke bawah dapat di lihat dengan tidak meninggalkan halaman blog kita! Lantas bagaimana cara melihat gambar bagian bawahnya? Dengan proses hover on image then auto scroll :D Bebas sih penggunaannya bukan terbatas hanya pada gambar :P
.box {
width: 85%;
max-width: 999px;
margin: 5px auto;
background: transparent;
}
.console-container {
overflow: hidden;
}
.console {
width: 666px;
max-width: 100%;
margin: 0 auto;
box-shadow: 0px 5px 15px -1px rgba(0,0,0,0.5);
cursor: s-resize;
}
/* Scroll 'console-body' */
.console-body {
display: block;
position: relative;
width: 100%;
height: 0;
padding-bottom: 55%;
overflow: hidden;
}
.console-body img {
position: absolute;
width: 100%;
top: 0;
transition: 7s ease-out;
}
.console-body:hover img {
-webkit-transform: translateY(-82.1%); /* Custom value */
transform: translateY(-82.1%); /* Custom value */
}
Rubahlah terlebih dahulu nominal tinggi, lebar, padding, margin, nilai transform dll.
<div class="box">
  <div class="console-container">  
    <div class="console">
      <div class="console-body">
        <img src="URL-IMAGE" alt="" />
      </div>
    </div>
  </div>
</div>
Demo & source by Tobias Bogliolo

Bonus

Only CSS: 和嵐 - Text Animation with background - CodePen User Profile Card - Simple CARD hover effect - Contextmenu Snippet - iPhone Notch Scroll 2 - 3D Card Steps - Articles Cards (Dynamic List) - add button - Really simple jQuery slider - asymmetry LP with animate.css & parallax.js - Events App - Hamburger Button - Aspect Ratio Calculator - photo - color visualizer - Twitch Social Popup

2 Komentar WTF
Salah satu cara mengakali jikalau di dalam template kita sudah kehabisan lahan untuk menampilkan sesuatu adalah dengan membuat si accordion Ada banyak sih, tetapi karena tema post yang akan AA sampaikan adalah cara membuat accordion image dengan CSS3. Akordion jenis ini sangat cocok untuk menampilkan banner iklan, screenshot blog teman, atau apapun soalnya pakai gambar :DImage-Accordion-with-CSS3Original posted by codrops.
.cont-accr {
position: relative;
width: 400px;
margin: 5px auto;
overflow: hidden;
border: 5px solid rgba(255, 255, 255, 0.6);
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.08);
}
.accr-panel {
top: 0;
left: 40px;
margin: 0;
width: 240px;
height: 361px;
line-height: 361px;
position: absolute;
transition: 0.3s ease-in-out;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.cont-accr > .accr-panel {
position: relative;
left: 0;
}
.accr-image {
display: block;
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.accr-tab {
top: 0;
width: 40px;
height: 100%;
opacity: 0;
z-index: 100;
cursor: pointer;
position: absolute;
}
.accr-tab:checked {
right: 0;
width: 0;
}
.accr-tab:checked ~ .accr-panel {
left: 240px;
transition: 0.7s ease-in-out;
}
.accr-capt {
width: 100%;
height: 100%;
top: 0;
position: absolute;
transition: 0.2s linear;
background: rgba(47, 79, 79, 0.25);
}
.accr-capt span {
position: absolute;
top: 40%;
margin-top: -20px;
left: 20px;
right: 20px;
text-align: center;
line-height: 10px;
font-size: 17px;
opacity: 0;
letter-spacing: 1px;
font-weight: 700;
padding: 20px;
color: #fff;
background: rgba(47, 79, 79, 0.25);
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.accr-tab:checked + .accr-capt {
background: rgba(47, 79, 79, 0.25);
}
.accr-tab:checked + .accr-capt span {
opacity: 1;
top: 50%;
transition: 0.4s ease-in-out 0.5s;
}
.accr-tab:hover + .accr-capt {
background: rgba(47, 79, 79, 0.1);
}

<div class="cont-accr">
<div class="accr-panel">
<img class="accr-image" src="LINK-GAMBAR" alt=""/>
<input class="accr-tab" type="radio" name="radio-set"/>
<div class="accr-capt">
<span>CAPTION 1</span>
</div>
<div class="accr-panel">
<img class="accr-image" src="LINK-GAMBAR" alt=""/>
<input class="accr-tab" type="radio" name="radio-set"/>
<div class="accr-capt">
<span>CAPTION 2</span>
</div>
<div class="accr-panel">
<img class="accr-image" src="LINK-GAMBAR" alt=""/>
<input class="accr-tab" type="radio" name="radio-set" checked="checked"/>
<div class="accr-capt">
<span>CAPTION 3</span>
</div>
<div class="accr-panel">
<img class="accr-image" src="LINK-GAMBAR" alt=""/>
<input class="accr-tab" type="radio" name="radio-set"/>
<div class="accr-capt">
<span>CAPTION 4</span>
</div>
<div class="accr-panel">
<img class="accr-image" src="LINK-GAMBAR" alt=""/>
<input class="accr-tab accr-tab-last" type="radio" name="radio-set"/>
<div class="accr-capt">
<span>CAPTION 5</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Jika sobat ingin menambahkan kolom/area, sobat tinggal buat taging baru seperti ini
<div class="accr-panel">
 <img class="accr-image" src="LINK-GAMBAR" alt=""/>
  <input class="accr-tab" type="radio" name="radio-set"/>
 <div class="accr-capt">
<span>CAPTION</span>
</div>
Letakan tepat di bawah setelah penutup tag </div> pada CAPTION 5. Jangan lupa juga tambahkan tagging penutupnya </div> Untuk kemulusan kerja, ada bijaknya width, height, margin and padding ditentukan terlebih dahulu agar sreug bergejew brow dengan template anda :))

The other interesting sources:
  • Making a CSS Only Accordion Image Slider
  • Pure CSS3 Accordion Image effect
  • Image Accordion Effect
  • CSS sliding multi-level accordion
  • Multi-Level Accordion Menu
Bonus:

Single input 3D form - Pure CSS Spiral Text Thingy - Smooth Page Scrolling in jQuery - Lettering.js Button Hover States - Pure CSS Emoji Faces - Pure CSS iOS Icons - CSS Unicode Range Generator - 111 Single Div Pure CSS Flags - Pure CSS selected layer - sin(k) on [s,e] - Simple CSS text animation - WebSlides - Table of Contents - The swinging polaroid - color palette distribution for different color spaces - Article list concept with background image - Image Mask Effect

Bay :-h

11 Komentar WTF
Salah satu cara untuk mempercepat tampilnya sebuah halaman blogsite adalah dengan mengatur apa-apa saja yang harus di load terlebih dahulu! Pada umumnya konten bergambar adalah satu faktor yang mempengaruhi terhadap speed page render :P Sobat mungkin pernah mendengar tentang lazy loading images? Teknik pintar menahan load gambar untuk tidak tampil terlebih dahulu, alias di tahan sementara waktu! Berikut 2 link source penjelasan Lazy Loading Images & Simple Image Lazy Load and Fade.

AA Koben akan berbagi tips serupa namun dengan technique yg sedikit berbeda. Itung-itung jalan alternatif yg tidak mau pasang lazy-load :D Cara tercepat untuk menahan laju load-image yaitu dengan tidak menampilkannya, melainkan kasih saja link URL agar di buka sendiri pada tab browser baru ini adalah gambar ;))
I. Cara pertama datang dari pen by Shaw dengan judul Basic Image Replacement Concept.
Snippet jQuery sederhana dengan menggantikan tampilan gambar di area postingan dengan gambar default. Gambar asli akan terbuka jika di klik/sorot.
Simpan seonggok script berikut di atas tag </body>

<script type='text/javascript'>
//<![CDATA[
var tempSVG = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{w}} {{h}}'/>"; // Simplest possible SVG

var iconSVG = "<svg xmlns='http://www.w3.org/2000/svg' xmlns: xlink='http://www.w3.org/1999/xlink' viewBox='0 0 {{w}} {{h}}'><defs><symbol id='a' viewBox='0 0 90 66' opacity='0.3'><path d='M85 5v56H5V5h80m5-5H0v66h90V0z'/><circle cx='18' cy='20' r='6'/><path d='M56 14L37 39l-8-6-17 23h67z'/></symbol></defs><use xlink:href='#a' width='20%' x='40%'/></svg>"; // Basic 'picture' icon

$('.image-replacement').each(function(){
  var $this = $(this),
      data = $this.data(), // Get all the data attributes
      $img = $('<img />').attr({
                width: data.width,
                height: data.height,
            // Set src to temporary SVG with proper viewBox
                src: "data:image/svg+xml;charset=utf-8," + encodeURIComponent(iconSVG.replace(/{{w}}/g,data.width).replace(/{{h}}/g,data.height)),
            class: 'image-replacer', // Class for styling the temporary image
                title: 'Click to load' // Title attribute to encourage interaction
              })
              .appendTo($this)
        // Load image on click
              .on('mouseover touchmove click',function(){
          $img
                  .off('mouseover touchmove click')
                  .attr({
                   src: data.src, // Set the src to the real image
                    class: '', title: '', // clear out our temporary attributes
                 });
          });
});
//]]></script>
Sobat bisa delete tulisan mouseover touchmove kalau mau hasilnya di klik!
Planing HTML<figure class="image-replacement" data-src="LINK-IMAGE" data-width="width" data-height="height">
</figure>
Tag figure bisa digantikan dengan div
II. Cara ke dua.
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$(".run-img1").click(function () {
    var imgUrl = $(this).data('rel');
    $(".area-img1").html("<a href='" + imgUrl + "' target='_blank'><img alt='Img' src='" + imgUrl + "' title='Previw Data'/></a>");
});
});
//]]></script>
Markup HTML<button class="run-img1" data-rel="LINK-IMAGE" title="Click for display image">W T F</button>
<div class="area-img1"></div>
Cara ke-2 ini sedikit ribet, soalnya kalau mau menampilkan gambar lebih dari satu pada area postingan, harus buat script serupa dengan unik-id yg berbeda pula #-o Kecuali anda tahu cara mengakalinya bagaimana :D
III. Cara ke tiga.
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('.change').click(function(event){
 var img=$(this).data('img');
  $(this).children('img').attr('src', img);
});
});
//]]></script>
Syntax HTML<div class="change" data-img="LINK-IMAGE">
<img src="about:blank" alt="Click" />
</div>
Kode CSSimg[alt]:before {
color: #333;
font-family: Roboto,Arial,sans-serif;
font-weight: bold;
content: attr(alt);
}
img[alt]:after {
color: #000;
content: ' \21D4 to display image';
}
.change {
cursor: pointer;
}
Itulah ketiga cara bagaimana cara menyembunyikan gambar pada area post untuk render page lebih cepat. Rumusan tersebut masih berupa konsep dan belum diberikan CSS style! Silahkan sobat berkreasi dengan ramuan itu. Cool man :-bd

Bonus

FontSelector 2.0 Find the best font - Scrolling half by half pure #CSS by @Kseso - 3D Social Media Animated Links - Zoom iMage with scale - Simple Vertical Slider - Donuts CSS Project - PopUp overlay animation - Responsive Image Comparison Slider - Image Comparison Slider - Responsive CSS3 Slider - Say Hello to world! - Glitch effect strobocops - Dynamic selection highlight with SVG Vignette - Content Loading Placeholder

Ooops...ada yg kelupaan, agar lebih ngabret rendering imagenya, lakukan terlebih dahulu compress terhadap image sebelum melakukan upload ke hostingan. Nih comot apps kompres gbr, it's good one created by Xkeshi image-compressor.

Bay...:-h

MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE