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
Base64 adalah kelompok skema pengkodean binary-to-text serupa yang mewakili binary data dalam format string ASCII dengan menerjemahkannya ke representasi radix-64. Istilah Base64 berasal dari penyandian transfer konten MIME spesifik. Setiap digit Base64 mewakili tepat 6 bit data. Tiga 8-bit byte (yaitu, total 24 bit) karena itu dapat diwakili oleh empat digit 6-bit Base64. Itulah penjelasan singkat mengenai Base64 dari wikipedia yang diterjemahkan via google translate.
Secara khusus kegunaan base-64 gue juga kagak tauk, tetapi ane tahu dengan melakukan convert/encode tulisan yang terbaca bisa menjadi tulisan alien (alias menjadi deretan kode-kode bit!)

Dengan kelebihannya ini, kita bisa memanfaatkan dalam area postingan untuk melakukan encode/decode! Singkatnya apabila sobat mau menyembunyikan konten (tulisan) maka lakukanlah encode terlebih dahulu, yg kemudian secara otomatis akan di decode di area postingan? Contoh sederhana begini, AA Koben menulis abcde dalam bahasa base64, YWJjZGU= Saat sobat menuliskan YWJjZGU= di HTML Editor post blogger nanti akan langsung tertuliskan abcde pada artikel post! Tetapi ketika dilakukan View Page Source tidak akan ketemu tulisan abcde!!!

Letakan script tepat sebelum/diatas taging </head> Klik kanan pada mouse, Save Link As dan lakukan hosting javascript berikut base64.min.js
Ketika sobat akan melakukan posting blog, jangan lupa tulisan/kode dilakukan encoding terlebih dahulu. Sesudah itu tulis dengan format di html-editor post blog seperti berikut
<script type="text/javascript">document.write(Base64.decode("KODE/TULISAN HASIL ENCODING TARUH DI SINI"));</script>
Tools encodingnya mshang.ca/base64-js
Harap diperhatikan, penulisan dalam bentuk script/base64 katanya buruk bagi index/SEO. Saya tidak bertanggung jawab atas itu semua :D
Bonus:
The "Read more" link - GSAP 'Menu' Experiment - Reactive Photo Gallery - CSS Text Reveal - Useful Broken Images - Search field animations with material icons - Diagonal stripe border effects - 100Day CSS Challenge #40 - Sea - Mobile Nav bar - Ribbon Menu - Glitch Photo Filters CSS - Image Transitions Using SVG Filters - Image Transition On Scroll (GSAP) - CSS3 trendy retro photo effect - CSS Gradient Hover Effect - photo effect - Click to Copy String Interaction - Buddons - 3D Navbar

0 Komentar WTF
Ada satu topik hangat yang lagi menjadi sorotan di dunia CSS! Tepatnya adalah CSS Borders. Topic ini menjadi ramai karena si border dikombinasikan dengan efek animation. Sehingga border yang biasanya kita lihat selalu statis sekarang bisa menjadi dinamis berlenggak-lenggok seperti seorang penari jaipong :D
Salah satu contoh telah dibuatkan oleh codepener Mstr. Piotr Galor Pure CSS Gooey Morph
Mantap toh :-bd Mungkin itu terlalu berdisko, bagaimana dengan karya dari Mstr Nick Lewis Animating border-radius
Animating border radius
Bagaimanakah caranya kita bisa mendapatkan gaya border seperti itu? Kalau bikin secara manual mungkin akan sedikit ribet, tetapi berbeda cerita jika kita mempunyai tools-nya :D
Silahkan pilih mau pakai yg mana:
  1. Border radius
  2. Fancy Border Radius
Sudah begitu ajah mostingnya, urusan sobat mo dipakai untuk apaan tinggal kreasikan sesuai dengan kebutuhan :)

Bonus

envelope border - Making an Image Magnifier in jQuery - ColorBox by Lyft Design - Exploding Bubble Text - Pure CSS Toggle Buttons | ON-OFF Switches - Social Media 3D Ghost Buttons in just CSS - A Fancy CSS Animated Gallery Covers - Color Namer - Random color harmonies - Black Mirror Cracked Text Effect - 100DaysCSS-12 - Generate a Colour - Glitch Effect on Hover - Stacked Image Gallery - SVG Menu Experiments w/viewBox Zoom - Portfolio Items CSS3 transitions effects - Pure CSS Select Box With Direction Aware Hover Effect - Just Another Menu (Pure CSS) - Social share button - Media Icons

0 Komentar WTF
Apakah sobat sedang mencari kumpulan tutorial untuk memperindah blog kalian? Anda tidak salah datang kemari, karena dimari tempatnya berkumpul artikel unik dari seluruh penjuru alam nyata dan ghaib. Tinggal menuju kotak pencarian, ketik apa yg kalian cari, kemudian enter...jebret, pasti ada artikel full stylish tertampilkan :D Pada kesempatan ini AA Koben membawa tut's ringan seputar trik bagaimana cara merubah tampilan (warna) video youtube! Ada ± 21 perubahan warna yang bisa anda terapkan! Karena browser gue tidak update, maka efek perubahan tidak berjalan sebagaimana mestinya.

Oleh karena itu silahkan update browser ke versi terbaru agar seluruh selector & declaration CSS berjalan sempurna. Berikut adalah sekrinsyut tampilan default (normal) salah satu video youtube.Nanti setelah ditambahkan efek CSS hitam-putih (black & white) akan menjadi beginong.Bagaimana bisa menjadi begitu, berikut bumbu-bumbu CSS untuk meraciknya.

.filt_vid {
width: 404px;
height: 360px;
display: block;
text-align: center;
box-sizing: border-box;
margin: 5px auto 0 auto;
background-color: #fcfcfc;
}
.filt_vid input {
display: none;
}
.filt_vid input:nth-of-type(1):checked ~ label:nth-of-type(1) {
color: #FFF;
background-color: #F00;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.125);
}
.filt_vid input:nth-of-type(2):checked ~ label:nth-of-type(2) {
color: #FFF;
background-color: #404040;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.125);
}
.filt_vid input:nth-of-type(2):checked ~ iframe {
-webkit-filter: grayscale(1);
filter: grayscale(1);

}
.filt_vid label {
cursor: pointer;
padding: 10px 20px;
border-radius: 3px;
margin: 0 5px 10px 0;
display: inline-block;
transition: 0.5s ease;
background-color: #eee;
}
.filt_vid label:hover {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.125);
}
.filt_vid iframe {
width: 100%;
height: calc(100vh - 210px);
box-shadow: 0 20px 80px rgba(0, 0, 0, 0.25);
}

<div class="filt_vid">
<input type="radio" name="radio" id="noFilter"/>
<input type="radio" name="radio" id="bwFilter" checked="checked"/>
<label for="noFilter">Normal</label>
<label for="bwFilter">Black &amp; White</label>
<iframe src="https://www.youtube.com/embed/WA8NVBi9atk?autoplay=0;rel=0;controls=0;showinfo=0" frameborder="0" allowfullscreen encrypted-media"></iframe>
</div>
Jika sobat ingin efek yg lain atau mau di pakai semua tinggal perhatikan baris kode berikut
.filt_vid input:nth-of-type(2):checked ~ iframe {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}
Kalau mau pakai efek Sepia kode CSSnya sbb.
.filt_vid input:nth-of-type(2):checked ~ iframe {
  -webkit-filter: sepia(1);
          filter: sepia(1);
}
Efek Saturate
.filt_vid input:nth-of-type(2):checked ~ iframe {
  -webkit-filter: saturate(10);
          filter: saturate(10);
}
Efek Hue Rotate
.filt_vid input:nth-of-type(2):checked ~ iframe {
  -webkit-filter: hue-rotate(180deg);
          filter: hue-rotate(180deg);
}
Efek Hard Light
.filt_vid input:nth-of-type(2):checked ~ iframe {
  mix-blend-mode: hard-light;
}
Efek Contrast
.filt_vid input:nth-of-type(2):checked ~ iframe {
  -webkit-filter: contrast(200%);
          filter: contrast(200%);
}
Efek Blur
.filt_vid input:nth-of-type(2):checked ~ iframe {
  -webkit-filter: blur(5px);
          filter: blur(5px);
}
Source and all demo can you find it Apply css filters on a video in pure CSS.
BONUS
Search field animation - Blinking Text Input - Aquarium with fish animation [Pure CSS] - HoverEffectIdeas-1 - HoverEffectIdeas-2 - Animated Search Form With Micro Interactions - Block effect text intro - Transition Effect With mix-blend-mode - Don't Click! - 3D - CSS Social Tiles - Perspective button hover effect - Making an Image Magnifier in jQuery - ColorBox by Lyft Design
Bye :-h

0 Komentar WTF
Ketika ada keinginan menulis untuk posting blog, walau tema post sudah sedikit basi, apa boleh buat 'sob ini juga merupakan salah satu cara dalam menjaga eksistensi kita dalam beraktifitas nge-blog :D Sekarang AA Koben akan berbagi tutorial CSS3 ringan yang tentu saja tidak menghilangkan ciri khas ane yg kental dengan slogan full stylish B-) Untuk mempersingkat lahan editor langsung saja pada bagian pertama yaitu membuat konten gambar dengan hover bergaya efek shine!
Make Shine Effect for Image
.shine_img {
position: relative;
cursor: pointer;
overflow: hidden;
transition: all 0.3s ease;
display: inline-block;
}
.shine_img:after {
content: '';
position: absolute;
top: 0;
left: -200%;
width: 100%;
height: 100%;
transform: skewX (-20deg);
background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
}
.shine_img:hover:after {
animation: shine 1.5s ease;
}
@keyframes shine {
100% {
left: 200%;
}
}
<div class="shine_img">
<img src="LINK-IMAGE" />
</div>
DEMO
Make Shine Effect for Text
.shine_text {
border: 0;
color: #fff;
outline: none;
font-size: 12px;
cursor: pointer;
overflow: hidden;
font-weight: 400;
background: #000;
position: relative;
padding: 14px 42px;
border-radius: 3px;
letter-spacing: 0.2em;
display: inline-block;
transition: all 0.3s ease;
}
.shine_text:after {
content: '';
position: absolute;
top: 0;
left: -200%;
width: 100%;
height: 100%;
transform: skewX (-25deg);
background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
}
.shine_text:hover:after {
animation: shine 1.5s ease;
}
.shine_text:active {
transform: translateY(1px);
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
@keyframes shine {
100% {
left: 200%;
}
}
<div class="shine_text">
YOUR TEXT
</div>
DEMO
Make Image Cloudy
Pada bagian ini sobat harus mempunyai default 2 gambar awan dengan resolusi 1000 x 600 px. Kalau susah carinya silahkan upload dulu di hostingan masing² gambar awannya! awan-1.png & awan-2.png
.abs_bg {
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
background-size: cover;
background-position: 50%;
background-repeat: no-repeat;
}
.abs_bg div {
margin: 0;
}
.fog {
width: 50%;
height: 50%;
margin: 5px auto;
position: relative;
background-color: #333;
}
.fog_cont {
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
}
.fog_img {
width: 300vw;
position: absolute;
height: 100vh;
}
.awan_satu {
background: url("awan-1.png") repeat-x;
background-size: contain;
background-position: center;
-webkit-animation: gerak 60s linear infinite;
animation: gerak 60s linear infinite;
}
.awan_dua {
background: url("awan-2.png") repeat-x;
background-size: contain;
background-position: center;
-webkit-animation: gerak 40s linear infinite;
animation: gerak 40s linear infinite;
}
@-webkit-keyframes gerak {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-200vw, 0, 0);
transform: translate3d(-200vw, 0, 0);
}
}
@keyframes gerak {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-200vw, 0, 0);
transform: translate3d(-200vw, 0, 0);
}
}
<div class="fog">
<div class="abs_bg" style="background-image: url('IMAGE-POST');"></div>
<div class="fog_cont">
<div class="fog_img awan_satu"></div><div class="fog_img awan_dua"></div>
</div>
</div>
Make Lightning Effect
.container {
width: 242px;
height: 363px;
display: block;
margin: 5px auto;
position: relative;
animation: lightning 10s linear infinite;
}
@keyframes lightning {
0% {
opacity:1;
}
1% {
opacity: 0.9;
}
2%{
opacity:1;
}
3% {
opacity:0.9;
}
4% {
opacity:1;
}
80% {
opacity:1;
}
81% {
opacity:0.9;
}
82% {
opacity:1;
}
}
<img src="LINK IMAGE" class="container" />DEMO
Yang terakhir membuat efek serelek selonjor :D
.expand_able {
max-height: 40px;
overflow: hidden;
position: relative;
padding-bottom: 5px;
border-bottom: 1px solid #ddd;
-webkit-box-shadow: inset 0 -17px 20px -20px #ccc;
-o-box-shadow: inset 0 -17px 20px -20px #ccc;
box-shadow: inset 0 -17px 20px -20px #ccc;
-webkit-transition: all 500ms ease-in-out 100ms;
-o-transition: all 500ms ease-in-out 100ms;
transition: all 500ms ease-in-out 100ms;
}
.expand_able:after {
right: 5px;
bottom: 3px;
color: #555;
font-size: 11px;
font-style: italic;
content: "More...";
position: absolute;
}
.expand_able:hover,.expand_able.open {
max-height: 999px;
-webkit-box-shadow: inset 0 0 0 0 #ccc;
-o-box-shadow: inset 0 0 0 0 #ccc;
box-shadow: inset 0 0 0 0 #ccc;
}
.expand_able:hover:after,.expand_able.open:after {
opacity: 0;
}
<div class="expand_able">
<p>Ada apa ya di sini! Coba sorot dong?</p>
<p>YOUR TEXT PARAGRAPH 1 HERE</p>
<p>YOUR TEXT PARAGRAPH 2 HERE</p>
<p>YOUR TEXT PARAGRAPH 3 HERE</p>
</div>
DEMO
Resources and other:
Button Shine - Shine Effect - Glossy Button with Shine - Pacific Northwest Fog - Rain - JavaScript - 3D perspective card XY - Feed Concept
Bye :-h

MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE