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
Salah satu cara mendapatkan ide untuk postingan adalah mengacak-ngacak arsip web-blog orang :D In 2015/05/28 master Mary Lou telah memposting tentang Image Tilt Effect. Silahkan sobat baca, lihat demonya kemudian jangan lupa download juga sourcenya. Menurut gue pengertian tilt effect adalah suatu efek ngeblur, berbayang, bergerak-gerak di campur menjadi satu...nah begitu kira-kira ;)) AA Koben cuman mau menjelaskan cara bagaimana pemakaian image tilt-effect karya Mary-Lou ini!

Perhatian: Teknik ini menggunakan beberapa properti CSS yang hanya bekerja di browser modern (yaitu 3D Transforms). Efeknya hanya bekerja pada hover yang berarti efeknya tidak dapat dilihat pada perangkat sentuh pada saat ini.

Setelah mendapatkan hasil download berupa ImageTiltEffect.zip silahkan sobat lakukan un-zip. Kalau di sana file menjadi satu dengan keterangan dan demo dari si-empunya. Inilah tugas saya untuk memisahkan bumbu-bumbu utama dalam membangun efek tilt. Hal pertama yang mesti sobat lakukan adalah memasang tilteffect.css & tiltfx.js ke dalam template blog

Berikut adalah kode CSS hasil pemisahan yg saya buat. Silahkan sobat edit-edit lagi sesuai dengan keperluan. Kalau sobat sudah mempunyai CSS selector gambar pd template, tinggal atur-atur propertinya saja!

.tilt_img {
position: relative;
height: 0;
width: 400px;
height: 300px;
margin: 5px auto;
cursor: move;
}
.tilt_img-4 {
overflow: hidden;
}
.tilt_img img {
max-width: 100%;
display: block;
}
.tilt_img-2::after {
content: '';
position: absolute;
box-shadow: inset 0 0 50px 30px rgba(2,0,37,0.8);
pointer-events: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.tilt_img-3 .tilt {
-webkit-filter: grayscale(100%) brightness(105%) contrast(120%);
filter: grayscale(100%) brightness(105%) contrast(120%);
-webkit-transition: filter 0.5s, -webkit-filter 0.5s;
transition: filter 0.5s, -webkit-filter 0.5s;
}
.tilt_img-3 .tilt:hover {
-webkit-filter: none;
filter: none;
}
.tilt_img-4 .tilt {
width: 120%;
height: 120%;
top: -10%;
left: -10%;
}

/* tilteffect.css */
.tilt {
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
}
.tilt__back,.tilt__front {
width: 100%;
height: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.tilt__back {
position: relative;
}
.tilt__front {
position: absolute;
top: 0;
left: 0;
}
.tilt_img-border .tilt__back,.tilt_img-border .tilt__front {
border: 1px solid #333;
}
.tilt_img-border .tilt {
overflow: visible;
}

Ada 12 macam efek yg bisa kalian dapatkan, selain penggunaan untuk background! Sobat bisa lihat demonya. Sudah begitu aja ah...wekekekekkk =:)

Similar and other

  • Dua Cool CSS3 Effect.
  • Cool CSS3 Zooming and Tilting Effect
  • Mouse over Parallax or 3D Tilt Effect
  • jQuery Plugin To Create Tilt / Parallax Effects For Images
  • A tiny parallax tilt effect for jQuery
Bay Bai :-h

0 Komentar WTF
Dapat korban baru lagi untuk dijadikan mode offline working >:) Tidak sengaja menclok ke blog.kangrian.com ternyata gue tengok ada artikel dengan judul berbau-bau "HTML Live Preview Editor Online" Kemudian pada main menu ada link tertuju ke editor tersebut! Pas saya lihat WOW so smooth HTML editornya ;)) ane coba dan JRENG tidak jalan 8-X Usut punya problemo sepertinya dia lupa menghostingkan seluruh script yang ada ke hostingan miliknya! Teliti itu karya punya source ternyata datang dari TheInsomniac CloudEditCloudEdit.

Sama Kang Rian di modif dengan menambahkan ini-itu. Sama AA Koben di modifikasi lagi dengan tambahan yang lebih edan punya B-) In screenshotHTML-Live-EditorTerlihat sama saja iya kan bro ;)) Cloudedit HTML-editor jika sobat melakukan klik kanan pada area kotak akan tampak beberapa framework yg sudah tersedia antara lain:Autoprefixer, Less CSS, Sass CSS (experimental), bootstrap, dll. Editor ini juga sudah langsung terintegrasi dengan jQuery script. Jadi kalau sobat mau bermain-main dengan jQuery/JavaScript tinggal pakai. Berikut beberepa extra yg gue sisipkan!

ColorPicker

ColorPicker

Live HTML Escape Editor

Live-HTML-Escape-Editor

Live Less Editor

Live-Less-Editor

Live Markdown Editor

Live-Markdown-Editor

Playground for Sass.js

Playground-SASS

HTML, CSS & JavaScript Minifier/Maxifier

Minifier-Maxifier

Mudah-mudahan semua file source sudah terambil dan dapat berjalan dengan offline secara maksimal :)
Silahkan: drive.google.com/open?id=1NzLofctFU6t9Da0GuIxIQl0B-U0HZawM
Pass .7z: hL*J3WK-W%fxV=_&

Hadiah halloween :(|)

2 Komentar WTF
Pusing mau mosting apaan, para developer sedang berlomba-lomba dalam pemberian jasa dengan kemudahan yang sangat membantu! Framework istilah orang bilang :D Okelah info ringan-ringan saja, dari pada tidak ngepost :P Jika sobat menemukan gambar dengan tampilan sedikit gelap, namun ingin jadi lebih terang tanpa mengedit gambar tersebut dengan tujuan mempertahankan size image, maka sobat bisa mencoba menggunakan trik & tips dari Andy Bell CSS filter image contrast. One good option dude ;)

Agar dalam belajar kita santai dan tenang, diharapkan anda memiliki W3Schools Offline Web Tutorials. Ada dua versi, yg di kompres/tidak. You can get in w3schools offline version free download or w3schools offline version download full website! This is a good for fun coy writing 'n bigpicture.js

Hajar bray!!!

Polaroid Memories - CSS only - Win8 Tiles Style - Day or Night Mode Toggler - Pure CSS Candle - Animated Scene - Quote Page - Teamy – a package with CSS animations for a team section - 3D Cube Menu (Full Page) - CSS3 Perspective Playground ✨ - Netflix style text animation with CSS - Multiple Shadows - Options Button - Responsive CSS Lightbox with No JavaScript - MOckup1 - Hello World! Popup (html, LESS) - CSS Modal

Ini mah ulangan saja sob, bagi yang mau memasang slide-show di blognya dengan kode yg minimalis bisa coba opsi fading slideshow berikut! Ada 3 varian...tinggal pilih :D

Fading Slideshow I

#stage {
margin: 1em auto;
width: 382px;
height: 292px;
}
#stage a {
position: absolute;
}
#stage a img {
padding: 10px;
border: 1px solid #ccc;
background: #fff;
width: 360px;
height: 270px;
}
#stage a:nth-of-type(1) {
animation-name: fader;
animation-delay: 4s;
animation-duration: 1s;
z-index: 20;
}
#stage a:nth-of-type(2) {
z-index: 10;
}
#stage a:nth-of-type(n+3) {
display: none;
}
@keyframes fader {
from { opacity: 1.0; }
to { opacity: 0.0; }
}

<div id="stage">
<a href="1.jpg"><img src="LINK-IMAGE" alt=""></a>
<a href="2.jpg"><img src="LINK-IMAGE" alt=""></a>
<a href="3.jpg"><img src="LINK-IMAGE" alt=""></a>
<a href="4.jpg"><img src="LINK-IMAGE" alt=""></a>
<a href="5.jpg"><img src="LINK-IMAGE" alt=""></a>
</div>
<script type="text/javascript">//<![CDATA[
  // Original JavaScript code by Chirp Internet: www.chirp.com.au
  // Please acknowledge use of this code by including this header.
  document.addEventListener("DOMContentLoaded", function(e) {
    var stage = document.getElementById("stage");
    var fadeComplete = function(e) { stage.appendChild(arr[0]); };
    var arr = stage.getElementsByTagName("a");
    for(var i=0; i < arr.length; i++) {
      arr[i].addEventListener("animationend", fadeComplete, false);
    }
  }, false);
//]]></script>

Fading Slideshow II

#stage2 {
margin: 1em auto;
width: 382px;
height: 292px;
}
#stage2 a {
position: absolute;
}
#stage2 a::after {
position: absolute;
left: 11px;
bottom: 11px;
padding: 2px 0;
width: calc(100% - 22px);
background: rgba(0, 0, 0, .5);
text-align: center;
content: attr(title);
font-size: 1.1em;
color: #fff;
}
#stage2 a img {
padding: 10px;
border: 1px solid #ccc;
background: #fff;
width: 360px;
height: 270px;
}
#stage2 a:nth-of-type(1) {
animation-name: fader;
animation-delay: 4s;
animation-duration: 1s;
z-index: 20;
}
#stage2 a:nth-of-type(2) {
z-index: 10;
}
#stage2 a:nth-of-type(n+3) {
display: none;
}
@keyframes fader {
from { opacity: 1.0; }
to { opacity: 0.0; }
}

<div id="stage2">
<a href="1.jpg" title="Title... 1"><img src="LINK-IMG" alt=""></a>
<a href="2.jpg" title="Title... 2"><img src="LINK-IMG" alt=""></a>
<a href="3.jpg" title="Title... 3"><img src="LINK-IMG" alt=""></a>
<a href="4.jpg" title="Title... 4"><img src="LINK-IMG" alt=""></a>
<a href="5.jpg" title="Title... 5"><img src="LINK-IMG" alt=""></a>
</div>
<script type="text/javascript">//<![CDATA[
document.addEventListener("DOMContentLoaded", function (e) {
    var stage = document.getElementById("stage2");
    var fadeComplete = function (e) {
        stage.appendChild(arr[0]);
    };
    var arr = stage.getElementsByTagName("a");
    for (var i = 0; i < arr.length; i++) {
        arr[i].addEventListener("animationend", fadeComplete, false);
    }
}, false);
//]]></script>

Fading Slideshow III

#stage3 {
margin: 1em auto;
width: 360px;
height: 270px;
border: 10px solid #000;
overflow: hidden;
}
#stage3 a {
position: relative;
display: inline-block;
width: 360px;
height: 270px;
}
#stage3 a::after {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
text-align: center;
content: attr(title);
font-weight: bold;
font-size: 2em;
color: #fff;
text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 2px 2px 0 #333;
}
#stage3 a:nth-of-type(2) {
left: 360px;
top: -50%;
animation-name: slider;
animation-delay: 4s;
animation-duration: 1s;
animation-timing-function: cubic-bezier(0, 1.5, .5, 1);
}
#stage3 a:nth-of-type(n+3) {
display: none;
}
#stage3 img {
max-width: 100% !important;
}
@keyframes slider {
from {
transform: translateY(-50%) rotate(30deg);
left: 360px;
}
to {
transform: translateY(-50%);
left: 0;
}

<div id="stage3">
<a href="1.jpg" title="Title... 1"><img src="IMG-LINK" alt=""></a>
<a href="2.jpg" title="Title... 2"><img src="IMG-LINK" alt=""></a>
<a href="3.jpg" title="Title... 3"><img src="IMG-LINK" alt=""></a>
<a href="4.jpg" title="Title... 4"><img src="IMG-LINK" alt=""></a>
<a href="5.jpg" title="Title... 5"><img src="IMG-LINK" alt=""></a>
</div>
<script type="text/javascript">//<![CDATA[
document.addEventListener("DOMContentLoaded", function (e) {
    var stage = document.getElementById("stage3");
    var slideComplete = function (e) {
        stage.appendChild(arr[0]);
    };
    var arr = stage.getElementsByTagName("a");
    for (var i = 0; i < arr.length; i++) {
        arr[i].addEventListener("animationend", slideComplete, false);
    }
}, false);
//]]></script>
Source by: Fading slideshow with a touch of JavaScript

Bye :-h

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


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE