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
Koben in the net, ingin berbagi tutorial dari website dynamicdrive (sebuah tempat untuk mendapatkan DHTML & Javascript gratis dan asli untuk meningkatkan situs web!) Original posted title is "jQuery Full Screen Image Viewer" Setelah melihat, ternyata trik untuk menampilkan gambar secara mandiri itu di buat dengan menggunakan 2 buah plugin jQuery! fullscreen image viewer dan zoomio. Jika anda tertarik memasang trick jQuery ini, maka kita akan mendapatkan 2 gaya dalam menampilkan image? Yang pertama, gambar akan ditampilkan dengan metode klik dan akan tampak secara full, lalu bisa zoom with hover! Yang ke dua, gambar akan ditampilkan dengan gaya zoom saja!
Dengan kelebihan URL link gambar hasil upload hostingan blogspot, cocok sekali trik ini ;) Seperti biasa, saya di sini hanya melakukan optimalisasi kode & script. Dan membantu (kalau terbantu) menerangkan cara pemakaiannya saja :D Masukan seluruh kode CSS di tempat biasa

/* ddfullscreenimageviewer */
body.revealviewer {
overflow: hidden;
}
#fullscreencanvas {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
width: 100vw;
height: 100vh;
visibility: hidden;
opacity: 0;
background: white;
z-index: 9000;
pointer-events: none;
display: block;
transition: opacity .3s, visibility 0s .3s;
}
body.revealviewer #fullscreencanvas {
opacity: 1;
pointer-events: auto;
visibility: visible;
transition: opacity .5s, visibility 0s .0s;
}
#fullscreenimagearea {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#fullscreencanvas img {
position: relative;
cursor: pointer;
transition: all .5s;
}
div#closeviewer {
/* Large x close button */
width: 35px;
height: 35px;
overflow: hidden;
display: block;
position: fixed;
cursor: pointer;
text-indent: -1000px;
z-index: 100000;
top: 10px;
right: 10px;
}
div#closeviewer::before, div#closeviewer::after {
/* render large cross inside close button */
content: "";
display: block;
position: absolute;
width: 100%;
height: 6px;
background: black;
top: 50%;
opacity: 0;
margin-top: -3px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transition: transform .5s, opacity .5s;
}
body.revealviewer div#closeviewer::before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
opacity: 1;
}
body.revealviewer div#closeviewer::after {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
opacity: 1;
}
/* Loading DIV CSS */
#fullimageloadingdiv, #zoomioloadingdiv {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
visibility: hidden;
overflow: hidden;
display: flex;
pointer-events: none;
z-index: 10000;
align-items: center;
justify-content: center;
background: white;
}
#fullimageloadingdiv .spinner {
width: 40px;
height: 40px;
margin: 100px auto;
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
}
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
/* zoomio */
#zoomiocontainer {
/* container containing enlarged image (native sized image) */
position: absolute;
z-index: 9999;
overflow: hidden;
background: white;
visibility: visible;
}
#zoomiocontainer img {
/* image inside zoom container */
width: auto;
height: auto !important;
position: absolute !important;
display: block !important;
cursor: move;
}
.disablepointer {
pointer-events: none;
}
#zoomiocontainer.mobileclass {
/* CSS class added to zoom container on mobile OS */
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
#zoomioloadingdiv .spinner {
width: 40px;
height: 40px;
margin: 100px auto;
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
}
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
/* opsional */
.thumbnails {
cursor: zoom-in;
}
Kemudian download dan lakukan host javascript berikut jangan lupa di masukan ke template :P:
  1. ddfullscreenimageviewer.js
  2. www.dynamicdrive.com/dynamicindex4/fullscreenimageviewer/ddfullscreenimageviewer.js
  3. zoomio.js
  4. www.dynamicdrive.com/dynamicindex4/zoomio/zoomio.js
Sisipkan seonggok script berikut sebelum tag </body>
<script>//<![CDATA[
jQuery(function () {
    $('img.thumbnails').fullscreenimage({
        scale: 2
    })
    $('.zoomio').zoomio({
        fadeduration: 500
    })
    $('.nolargeimg').zoomio({
        w: '500px',
        h: '400px'
    })
})
//]]></script>
SAVE.

Ketika memosting nanti syntax URL img harus dituliskan dengan aturan main sbb!

Untuk jQuery Full Screen Image Viewer<img src="URL-GAMBAR-UKURAN-KECIL" class="thumbnails" data-large="URL-GAMBAR-UKURAN-BESAR" alt="" />

<img src="URL-GAMBAR-UKURAN-KECIL" class="thumbnails" data-large="URL-GAMBAR-UKURAN-BESAR" data-scale="3" alt="" />
Untuk Zoomio<img class="zoomio nolargeimg" src="URL-GAMBAR" width="300" alt="" />

<img class="zoomio" src="URL-GAMBAR-UKURAN-KECIL" data-largesrc="URL-GAMBAR-UKURAN-BESAR" />

DEMO
codepen.io/beben-koben/full/NvWgVv/

3 Komentar WTF
Saya hanya ingin memberitahukan informasi ringan, yang mungkin dari kebanyakan orang sudah pada tahu info ini :D Sobat tentu kenal dengan dengan salah satu playground terkenal dengan nama codepen.io? Jika kita perhatikan secara teliti di dalam editor codepen sudah tertanam secara default beberapa macam Preprocessor! HTML preprocessor: HAML, Markdown, Slim & Pug. CSS preprocessor: LESS, SCSS, Sass, Stylus & PostCSS. JavaScript preprocessor: CoffeeScript, TypeScript, LiveScript & Babel.
Kita tinggal memilih saja apa yang akan digunakan dalam membuat sebuah hasil karya?

Lantas bagaimana caranya jika kepengen mencomot kode, namun kode tersebut di tulis dengan bahasa yg tidak kita tahu? Gampang bin mudah, sobat tinggal klik tanda arrow ke bawah yg berada di pojok kanan atas pada tiap-tiap kotak code. Kemudian elo pilih opsi View Compiled ... Dengan otomatis kode akan berubah secara instan ;))compiledSebagai contoh gue akan melakukan kompilasi kode SCSS ke CSS. Kunjungi halaman berikut CSS-only Notifications Component. Tidak mungkin kita langsung mencomot kode yg ada untuk di pakai di blog? Karena koding template blogspot tidak mendukung SCSS? Adapun hasil kompilasi akan menjadi banyak bro, karena penulisan syntax SCSS lebih canggih dari pada CSS!

Berikut link download hasil kompilasi dari postingan CSS only Notifications Component CSS Notifications.7z Jadi ada 33 gaya CSS notifikasi. Silahkan sobat pilih & pasang sesuai kebutuhan dan selera :)

CSS-Filter (blur) on image-caption - Codepen embed theme - Solarized light - All CSS Water Themed UI Demo - Movie Booking - Attract hover effect - CSS-only Fade Siblings on Hover - Social Icons vision 3D

7 Komentar WTF
Mau mosting apaan kok jadi bingung sendiri, rasa-rasa sudah ada semua di dunia internet ini apa yang kita cari ;)) Ada mesin pencari/penjelajah gunanya untuk mencari, carilah apa yang kita cari! Lantas kalau yg kita cari itu sudah tidak ada, bagaimana? Cara tercepat yaitu menggunakan jasa cache dari si search engine. Cara lain dengan menggunakan jasa bantuan Wayback Machine. Ada satu snippet jQuery untuk menerapkan Augment links jquery archival. Jangan lupa untuk melihat halaman hubgit repositories!

Ada satu blog lain lagi yg menarik, di mana artikelnya keren punya? Chris West's Blog (JavaScript, Math, and much more...) Gue baca tentang ini dari sono use canvas To watermark images. Apakah ada yg bisa melakukan custom pada script tsb agar dapat berjalan pada hyperlink normal?
Demo: codepen.io/atelierbram/pen/RgKLZK
Ada yg mau coba memendekan URL dengan metode emoji, try this Mosho. Untuk lazy blogger bisa mencicipi simple sharing buttons generator. Pernah bertemu dengan jssnip? Bagi yg lagi cari & butuh forms form CSS Forms From CodePen!

So cool bro Trendy CSS Text Shadows :-bd

The new object-fit property for cropping images in CSS. You can try this also exploring blend modes in CSS. Interesting posted create direction aware CSS only hovers effect. Chris Coyier’s favorite codePen by David Walsh some amazing work on CodePen and favorito CodePen Demos II.

Hampura O:-)

0 Komentar WTF
Di bulan suci yang penuh rahmat dan barokah ini, bulan yg sangat dinantikan oleh seluruh umat islam di penjuru dunia manapun RAMADHAN. AA lebih memfokuskan ke ilmu agama dulu dari pada ilmu blogging di bulan ini sob ;)) Ternyata tidak jauh berbeda dengan kebiasaan orang-orang pada umumnya di Indonesia kalau datang bulan puasa paling enak itu ngabuburit menunggu waktu berbuka :D Karena aktifitas kebanyakan di depan komputer, maka dari itu ngabuburitnya jalan-jalan ke blogs/webs resources bro! Sekedar melihat hasil jerih payah para coder berkreasi b-)

Siapkah anda berbuburit?

Subscribe Form on Event Scroll - Rainbow Trail (using dom elements) - Instagram Filter Rapid Prototype (Vue + CSSGram) - CSS3 Button Hover Effects with FontAwesome - Opening a letter - Text Decoration Skip Hack - jquery-resizable - Resizable Splitter Panels - Google Adwords | Simulador de AnĂșncios • Ads Simulator (Non oficial) - GRAVITY TEXT - Animated Stacked Pages - Swaying Vertical Tabs - CSS Tabs - Page Switching Using CSS Negation - Before & After Slider Gallery With SVG Masks - Customize the Browser's Scrollbar with CSS - random terminal/code colors (click for more) - CSS only nav with animated moving background - Front End Day 80 - Operating System Forms - Upload crop & save - Fit images with css - Stylish chat window design - Search in the navbar - classbxr Bookmarklet - Website Bookmarker

Input UI Animation - Bootstrap List Grid View - css custom properties explained - Animated menus palette for WordPress default menu structure - CSS Only Icons w/ Hovers (Font-Awesome Friendly) - Input Live Style Changer - Gradient Hover Effect - Wavy Shadows on a Flag using CSS Gradients - Sheen Hover - Accordion / Tabs with animation - Toggle Tabs - mouse position color picker (scroll for saturation) - generate random font combinations (Google Fonts, Vue.js) - Letter People Text Generator - Looking through Dirty Glass - Liquid button - foldable carousel - CSS effect for search input

simple 3D photo - Menu Effect Like windows 8 (beta) - Firebase Image uploader test #2 - Expand images - Menu effect like windows 8 2.0 - Simple image preview with mobile version - Mini lightbox - Css3 slide - Test hover effects Chrome - Simple lightbox

Lanjut...:D

Get color on click #2 - Take poster of video - Html demos with data uri - Data uri converter - Another Gallery - Gallery with list style - Experiment - The bottom - Gallery experiment - Amur leopard image gallery with CSS vars (responsive, WebKit only) - CSS Animated Header - Ten hover effects - Button hover effects with box-shadow - Animating typed chars - - - Pure CSS Slide Out Menu - Stacked Image Slideshow (feat. kittens) - Image Overlay Slider - Simplest Infinite Slider - ALL CSS Slider 4Slides with Dot Nav

Kunjungilah links di atas walau hanya sekedar menikmati karya orang, iciper :P

0 Komentar WTF
Seperti yang sudah kita lihat dan ketahui bersama terjadi pembaharuan di sana-sini :D Halaman depan login google bertambah dinamis, penampilan youtube jadi keren! Begitupun dengan dunia script dan CSS sudah terjadi kemajuan yg sangat signifikan. Apakah sobat pernah membaca/mendengar tentang webpack, WebModule, Yarn, npm, Node.js, AngularJS, herokuapp, Firebase, REPL, IDE, etc. Saat ini sedang ngetrend penulisan baru bahasa JavaScript secara khusus dan secara umumnya banyak apps dan web menggunakan metode module? Belum lagi bahasa tersebut di compiler, di encode di encrypt dan tetek bengek lainnya. Yang pasti membuat kepala puyeung @-)

Salah satu next generation JavaScript itu adalah si babel! Berbasiskan bahasa pemograman bahasa JavaScript yg sudah dibekukan (ECMAScript) kita dapat melakukan compiler penulisan JavaScript standar menjadi canggih. Syntax² di rubah menjadi simpel & rumit :)) Padahal aslinya ya biasa saja, tetapi itulah kehebatan era sekarang, semua serba canggih :-bd
Saya tidak mengerti tentang script, saya cuma user (pemakai, penikmat, n pemerhati) saja.

Don't ask about JavaScript to me, i can not. I am just a user.
Adapun sarana untuk belajar, jika sobat memang mau mendalami fitur script/code saat ini, bejibun web online menawarkan jasa! Sebagai user yg baik saya hanya bisa menawarkan salah satu teknik belajar dengan metode website offline >:)
Korban untuk saat ini web yg dibuatkan offline ama gue adalah babeljs.io, ECMAScript 2015 Language Specification, and ecma-international.org_ecma-2627.0home-babeljs
try-it-out-babeljsKarena ini offline, fitur module, export, import atau yg lainnya tidak akan berjalan! Kecuali sobat bisa mengakalinya dengan mendownload salah satu module secara offline juga, sotoy mode on :D
ECMAScript (or ES) is a trademarked scripting-language specification standardized by Ecma International in ECMA-262 and ISO/IEC 16262. It was created to standardize JavaScript, so as to foster multiple independent implementations.
Pada halaman home babeljs, semua link saya hidupkan (tertuju pada tujuan), tetapi untuk halaman² lainnya tidak saya koreksi, maaf capek buat karena saya buatnya manual alias comot modal lihat source #:-S

babeljs.io.7z - ECMAScript.7z

Password for babeljs.io.7z The compiler for writing next generation JavaScript
Password for ECMAScript.7z Welcome to Ecma International

Semoga dengan adanya alat bantu web offline ini bisa membuat sobat lebih rajin dalam belajar.

Thanks to: GitHub, Google, Babeljs, Ecma, stackoverflow, codepen, all kindest people in the world, etc.

Adios amigos parantos, leos...\m/