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 ☺

0 Komentar WTF
Ketika sobat mengunjungi web codepen, coba tengok halaman fork, project atau new code. Begitupun coba biasakan oleh kalian ketika menyatroni web github, acak-acak halaman Repositoriesnya. Memang butuh waktu santai kalau mau melakukan itu semua ;)) Oke, saya akan berbagi karya cipta dari hasil mengacak-ngacak one repositories page git-hub by victornpb! This is the page victornpb (Victor) repositories. AA Koben menemukan ini urlchecker! Karena tidak ada demo page, maka saya download dulu, tampaklah seperti ini:urlcheckerNamanya urlchecker, mungkin tujuan kreasi itu adalah untuk mengecek url apakah masih aktif/tidak yang akan tampil di dalam konten iframe. Dulu saya pernah membuat hal serupa (menampilkan web pada kolom frame meny style), tetapi lupa judul postingannya :D
Dikarenakan tampilan url-checker masih polos, saya coba memasukan bootstrap by bootstrapious. Ternyata cukup memusingkan harus tahu selector, description, identify bla-bla-bla untuk membuatnya #:-S Hasil akhir urlcheckerFitur apa saja yang gue tanamkan di sana...hohoho :-"
Encode-DecodeMini CodePen in 439 Bytes get from Tommy Hodgins.codegolfIDEcodegolfIDEmarkdownmarkdown-herebrowserpadjQuery MiniColors

Itulah fitur-fitur yg gue cekokin, di samping fitur tersembunyi lainnya! Apakah sobat tertarik memiliki itu semua? Silahkan beli seharga $1 billion =)) Download saja, kemudian silahkan kalian tes-tes dan pelajari sendiri karyaku ini :-B
Download here urlchecker modification by Beben-Koben URLchecker-Project.7z - Google Drive.

Kalau websitenya pakai anti iframe, tidak akan muncul, dan kalau ada website yang memasang ikaln popup akan terdeteksi, sobat tinggal pencet tombol TAB pada keyboard untuk mengizinkan.

BONUS

To-do List with animated interactions - Text Image Mosaic - Menu - Radio Button Group with Gradient - Image loading effects [background-size: 0, :before, :after] - CSS Mega Menu - CSS 3d box - editable content - Product Template powered with Bootstrap - Pure CSS Drag & Drop - Morphing Fullscreen Navigation Menu [~60fps animation]

Tunggu karya-karyaku yang lainnya okeee *-:) :-h

1 Komentar WTF
Gara-gara memosting tentang image tilt fffect CSS, saya jadi melanglang buana menjelajah! Ternyata kalau kita berbicara mengenai efek pada gambar, itu bisa termasuk juga ke dalam tutorial dengan tema image manipulation (manipulasi gambar) :D Salah satu javascript yang lumayan terkenal dalam urusan memanipulasi gambar adalah CamanJS.
Berikut beberapa sources kreasi yg memakai Caman-JavaScript:
  • CamanJS Interactive Examples.
  • CamanJS Filter Example.
  • Image Editor Demo Built with Caman.
Dari ketiga rujukan itu, ternyata tidak ada yg menyertakan fitur upload image dari local storage :-?? Saya jadi penasaran, dan mencoba-coba kasak-kusuk dengan modal nekat mencari cara bagaimana dari ke-3 source di atas digabungkan fitur-fiturnya plus fitur upload local image from your storage? Hasil akhir seperti berikut:CamanJSKarena saya pengguna sejati mozilla, karya ini hanya bisa di buka pada browser tersebut :D Soalnya kalau di buka di chrome ada perbedaan penulisan path yg mana saya malas alias tidak ngerti kinerja browser google chrome ;)) Bagi yg berminat mencoba dan mengembangkan silahkan download CamanJS 127 KB.
Tested on mozilla versi 42 & 52. Kalau kepengen yg lebih canggih dan keren punya juga ada kok! Let's cekidot...

jspaint

jspaint

miniPaint

miniPaint

webgl-filter

webgl-filter

pm-image-editor

pm-image-editor

JsImgEditor

JsImgEditor

nuophoto

nuophoto

jie

JIMP-Image-Editor

tui image-editor

tui.image-editor

summer

summer

iwage

iwage

imageeditor by ckm100

imageeditor

photo-editor

photo-editor

Sino Image Editor

SinoImageEditor

Image Editor by Tom Yuan

ImageEditorDemo

Html Image Editor

HtmlImageEditor

editest

editestHarap diperhatikan syarat-syarat yg berlaku baik itu file atau browser sobat sudah mendukung atau belum (canvas, webgl, etc). Satu lagi, karena ini permainan dengan si canvas, jangan coba-coba ngedit gambar dengan size yg besar kalau nggak mau browsernya nge hang yah >:)

Jangan tanya saya soal script, karena saya tidak mengerti sama sekali ^:)^

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