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
2020 telah tiba! Pembaharuan terjadi disana-sini. Tidak terkecuali pemberhentian layanan dimana-mana :D Jarang melakukan kegiatan posting, sampai² lupa rumus/jurus gue dalam mengetik =)) Ngemeng-ngemeng tentang pembaharuan (blogspot), mungkin diantara sobat sudah melihatnya! Terlihat pada bagian dashboard blog sudah lebih full stylish saat ini. Sebagai salah satu mesin pencari yang digandrungi orang google, pada bagian search box mengalami perubahan!search boxSekarang AA Koben mau coba berbagi cara membuat kotak pencarian yg seperti itu! Saat anda mengetik pada kotak pencarian akan muncul icon search (🔍) imut-imut :(|) Tidak sama dengan google, tetapi konsepnya yg mirip.search boxDemo I & source kode
search-boxDemo II & source kode
Yang terakhir, mirip dengan yang ke-II, tetapi diberikan sedikit sentuhan efek B-)
Demo III & source kode

Harap diperhatikan, disini gue hanya memberikan kode CSS. Adapun penulisan syntax <form> pencarian sobat ganti sendiri :)>-

Original idea by Liam on codepen with title :placeholder-shown selector
Bonus link codepen selection buat kalian yg cari ide/bahan postingan:
simple popover - Sign Up Modal - Buttons UI Kit - double exposure carousel slider - Build a Filtering Component in Pure CSS - The more menu - Accordion / Dropdown / Toggle Pure CSS - My First Color Tools Project - Polygon-style gradient pull quote - CSS TABS - Pure CSS menu cutout effect - BBC News style joined bullets - Pure CSS Accordion - 5-Way Gradient Generator - Pure CSS Card Carousel - Tabs - CSS + JS - Old Typewriter Text Effect - Center Focus Feature Section - Pure CSS Animated Search Bar - CSS-Only Gooey Content Toggle - Gradient Ordered List - Scrolling table - -webkit-box-reflect & SVG filters - Social Menu Share with SVG - Social Media Share Cards - Floating Aside HTML Buttons - CSS Grid Menu - Awesome Flexbox - Details element with custom arrow - Scroll Based Animation - Drop Spread Blur - Reveal Effect Text Animation - Image slideshow HTML and CSS only - Drag-n-drop sticky, with no JS! - PUZZLE MAKER - Blur background on click (modal window) - The circular menu - Video created using HTML and CSS only - Taking advantage of :target / Proposing :target-within - Underline.js - Sliding Tile Puzzle with Custom Images in Vue - Info Button - Amazing Button Hover - React select and crop image - Box skew hover - Image glitch effect - Banners - final demo - Social Media Buttons - Link & Button - Shatter Effect - Locked input field - CSS only - Gradient Playground - Styled "select" options using CSS3 and Flexbox - Color Search w/ React Hooks 🎨 - Find emoji by description - Tabs Navigation UI - Night Party Mode - CSS Only - Social Icons - Hover Effect - Challenges: CSS Strange Nav - magnifying image view with zoom 🔍 - Input group :focus-within - Palette Panda - Simple image comparison slider - Line distortion - Scroll page loader (pure CSS no JS) - Animated Verbs - Animated Portrait w/ GSAP 2.0 - Mini Music Player - VueJS - CSS Modal - (2019) Custom Checkbox, Radio, Switch - CSS Grid-ient - Gradient color button with hover glow - Multiplication Lookup Table - 50+ Pure CSS3 Preloaders (Latest) - Share Selected Text - Modern Gradient Buttons - Happy Fun Nav - Dark mode toggle expanding circle - CSS Swinging Text Animation - LazyLoading Videos with IntersectionObserver - Instagram downloader - 2019 Mood Calendar - TechGirlz CSS Animation (Finished) - Social Animation - Dribbble//Simple Icons - Menu Interaction - One background for multiple divs - Pure CSS Responsive List & Tooltips - Only CSS: Sunset Bird (Orange&Blue) - Footnotes - RSS Single Element - Random Password Generator - Blur Reveal - Navigation Menu w/ Animations - Navigation with Sub-Navigation (CPC) - Document Title Ticker - Web Design - Hover, I dare you! - CSS Only - Multi-line spanning animated underline. - Image Password Strength - Link Fill on Hover - Image Animation Effects - Utilities - Fullscreen Nav - Horizontal - Section numbering with CSS - Stylish Social Buttons - CSS only slider - smallest slider ever w/o JS - cpc-checkbox-hack - Magic with details // CSS Only Dropdown - Animated Search Interaction - 3D CSS Transform Rotation Builder - Menu Hover Fill Text - Pure CSS circular border patterns - Cut/Copy/Paste - Gradient Text Overlay - Color Wheel - Social Icon Gooey Effects - Bring Back the Marquee - Multi line text underline CSS - Clip Path Hover Animation - Keyboard accessible
Adios Amigos...Parantos...Yuk Babay :-h

0 Komentar WTF
Ada sedikit update os windows di tempat gawe, yang dulu masih pakai windows XP, sekarang dipasangin Windows Embedded 8.1 Industry Enterprise. Ternyata selama belum update windOwS, browser yg gue pakai mentok di versi yg hanya support terhadap Win-XP! Dampaknya gw tidak bisa melihat hasil karya dari para developer and master :( Setelah update os & browser...WOW ternyata kreasi orang pada keren punya B-) + makin pusing kodingnye :-O
Begitulah curcol edisi kali ini, dan pertama kali masuk ke dashboard blogger ada notification:Notification%2Bof%2BBloggerKarena keterbatasan ilmu & pengetahuan saya, maka artikel sekarang akan mengulang tentang bagaimana membuat beautyful CSS modal n' awesome accordion menu murni hanya menggunakan CSS :)

Pure CSS Modals A Pen By Akshay

.modal-open {
color: inline;
cursor: pointer;
display: inline;
}
.modal-label {
position: relative;
}
.modal-radio {
opacity: 0;
position: absolute;
visibility: hidden;
}
.modal {
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
position: fixed;
overflow: hidden;
transform: scale(0);
transition: opacity .25s, transform .25s;
z-index: 99;
}
.modal2 {
transform: scale(0.8) translate(0,-100%);
transition: transform .35s,opacity .35s;
}
.modal3 {
transform: translate(0,100%) scale(.9);
}
.modal4 {
transform: scale(0) rotate(180deg);
}
#modal-open:checked + .modal {
opacity: 1;
transform: scale(1);
}
#modal-open2:checked + .modal2 {
transform: scale(1) translate(0,0);
opacity: 1;
}
#modal-open3:checked + .modal3 {
transform: scale(1) translate(0,0);
opacity: 1;
}
#modal-open4:checked + .modal4 {
transform: scale(1) rotate(0deg);
opacity: 1;
}
.overlay {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
background: rgba(0, 0, 0, 0.789);
}
.modal .content {
width: 70%;
top: 15%;
left: 15%;
height: 300px;
padding: 20px;
max-height: 70%;
background: #fff;
border-radius: 15px;
position: absolute;
box-shadow: 0 3px 15px -2px #ccc;
}
.close-btn {
width: 30px;
height: 30px;
top: 10px;
right: 20px;
cursor: pointer;
position: absolute;
border-radius: 50%;
border: 2px solid #f44336;
}
.close-btn:after,.close-btn:before {
content: "";
width: 70%;
height: 2px;
left: 15%;
top: 50%;
position: absolute;
background: #f44336;
top: calc(50% - 1px);
transform-origin: 50% 50%;
transform: rotate(45deg);
}
.close-btn:before {
transform: rotate(-45deg);
}
.action-btn {
color: #fff;
border-radius: 15px;
display: inline-block;
padding: 10px 20px;
background: #4caf50;
}

Harap diperhatikan kode CSS tersebut! Karena kode itu berisikan 4 jenis gaya MODAL BOX. Jika sobat ingin memakai satu gaya saja, hapus selector dan isi kode dari .modal2, .modal3, .modal4, #modal-open2:checked + .modal2, #modal-open3:checked + .modal3, #modal-open4:checked + .modal4
Berikut cara/contoh penulisan taging HTML untuk ke-4 gaya modal.
<div class="content">
<label class="modal-open modal-label" for="modal-open">
<p>Open Modal 1</p>
</label>
<input type="radio" name="modal" value="open" id="modal-open" class="modal-radio"/>
<div class="modal">
<label class="modal-label overlay">
<input type="radio" name="modal" value="close" class="modal-radio"/>
</label>
<div class="content">
<div class="top">
<h2>Heading </h2>
<label class="modal-label close-btn">
<input type="radio" name="modal" value="close" class="modal-radio"/>
</label>
</div>
<p>BLA BLA MODAL 1</p>
</div>
</div>
</div>

<div class="content">
<label class="modal-open modal-label" for="modal-open2">
<p>Open Modal 2</p>
</label>
<input type="radio" name="modal" value="open" id="modal-open2" class="modal-radio"/>
<div class="modal modal2">
<label class="modal-label overlay">
<input type="radio" name="modal" value="close" class="modal-radio"/>
</label>
<div class="content">
<div class="top">
<h2>Heading </h2>
<label class="modal-label close-btn">
<input type="radio" name="modal" value="close" class="modal-radio"/>
</label>
</div>
<p>BLA BLA MODAL 2</p>
</div>
</div>
</div>

<div class="content">
<label class="modal-open modal-label" for="modal-open3">
<p>Open Modal 3</p>
</label>
<input type="radio" name="modal" value="open" id="modal-open3" class="modal-radio"/>
<div class="modal modal3">
<label class="modal-label overlay">
<input type="radio" name="modal" value="close" class="modal-radio"/>
</label>
<div class="content">
<div class="top">
<h2>Heading </h2>
<label class="modal-label close-btn">
<input type="radio" name="modal" value="close" class="modal-radio"/>
</label>
</div>
<p>BLA BLA MODAL 3</p>
</div>
</div>
</div>

<div class="content">
<label class="modal-open modal-label" for="modal-open4">
<p>Open Modal 4</p>
</label>
<input type="radio" name="modal" value="open" id="modal-open4" class="modal-radio"/>
<div class="modal modal4">
<label class="modal-label overlay">
<input type="radio" name="modal" value="close" class="modal-radio"/>
</label>
<div class="content">
<div class="top">
<h2>Heading </h2>
<label class="modal-label close-btn">
<input type="radio" name="modal" value="close" class="modal-radio"/>
</label>
</div>
<p>BLA BLA MODAL 4</p>
<label class="modal-label action-btn">
OK <input type="radio" name="modal" value="close" class="modal-radio"/>
</label>
</div>
</div>
</div>
Maybe you want to try Interactive Modal with Funny Animations? Please explore coidea.website for other awesome content. Beres urusan modol lanjut pada topik kedua yaitu akordion!

Awesome accordion menu using only HTML & CSS A Pen By Ahmad Emran

.mainMenu {
width: 100%;
display: block;
border-radius: 10px;
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
.item {
border-top: 1px solid #444857;
overflow: hidden;
}
.btn {
display: block;
padding: 15px 20px;
background-color: #1a1b1f;
color: #aaaebc;
position: relative;
}
.btn:before {
content: '';
position: absolute;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right:8px solid transparent;
border-top:10px solid #1a1b1f;
right: 15px;
bottom: -10px;
z-index: 9;
}
/*
.btn i {margin-right: 10px;}
*/
.subMenu {
background: #333641;
overflow: hidden;
transition: max-height 0.7s;
max-height: 0;
}
.subMenu a {
display: block;
padding: 15px 20px;
color: #fff;
font-size: 14px;
border-bottom: 1px solid #1a1b1f;
position: relative;
}
.subMenu a:before {
content: '';
opacity: 0;
transition: opacity 0.3s;

}
.subMenu a:hover:before {
content: '';
position: absolute;
height: 0;
width: 6px;
left: 0;
top:0;
opacity: 1;
/* background-color: #d8d824; */
border-top: 24px solid transparent;
border-left: 11px solid #fff;
border-bottom: 24px solid transparent;
}
.subMenu a:after{
content: '';
opacity: 0;
transition: opacity 0.3s;

}
.subMenu a:hover:after {
content: '';
position: absolute;
height: 0;
width: 6px;
right: 0px;
top:0;
opacity: 1;
/* background-color: #d8d824; */
border-top: 24px solid transparent;
border-right: 11px solid #fff;
border-bottom: 24px solid transparent;
}
.subMenu a:hover {
background: #273057;
background: -moz-linear-gradient(top, #333641 0%, #333641 50%, #666B7A 51%, #666B7A 100%);
background: -webkit-linear-gradient(top, #333641 0%, #333641 50%, #666B7A 51%, #666B7A 100);
background: linear-gradient(to bottom, #333641 0%,#333641 50%,#666B7A 51%,#666B7A 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#333641', endColorstr='#666B7A',GradientType=0 );
transition: all 0.3s;
border-bottom: 1px solid #666B7A;
}
.subMenu a: last-child {
border:none;
}
.item:target .subMenu {
max-height: 10em;
}
<div class="wrapper">
 <ui class="mainMenu">
 <li class="item" id="account">
 <a href="#TITLE I" class="btn">TITLE I</a>
 <div class="subMenu">
  <a href="">item-1</a>
  <a href="">item-2</a>
  <a href="">item-3</a>
 </div>
 </li>
 <li class="item" id="about">
 <a href="#TITLE II" class="btn">TITLE II</a>
 <div class="subMenu">
  <a href="">item-1</a>
  <a href="">item-2</a>
 </div>
 </li>
 <li class="item" id="support">
 <a href="#TITLE III" class="btn">TITLE III</a>
 <div class="subMenu">
  <a href="">item-1</a>
 </div>
 </li>
 <li class="item">
 <a href="#" class="btn">Close All</a>
 </li>
 </ui>
</div>
Pada sumber disertakan dengan bumbu font-awesome, disini saya menghilangkannya :D Jadi jika bagi kalian yg memang menggunakan font-icon harap melihat pada sumer cara tag HTML-nya ;)

Bonus

previewSlider - Trippy CSS effect - Map-inspired border - CSS Animations: Obvious CTA Buttons - Off-Canvas menu on Pure CSS - File Tree CSS - Client side screenshot - Random Color Palette Generator with Tinycolor.js - css scroll-behavior: smooth - Full Page slider - Dark Mode without Javascript - Checkboxes and radios pure css - Typewriter Effect HTML & CSS - Pure JS FLIP Transition - Animated Info Card - Under-Engineered Toggles - Anime Quote Image Maker - Splitting an image - Reduced Motion Mixin - Dolly/Hitchcock Zoom Effect in CSS

Bye :-h

0 Komentar WTF
Tahun telah berganti menjadi baru kembali, tetapi aktifitas mosting belum ada sama sekali :P Bukan tanpa sebab belum melakukan post! Akan tetapi di tahun 2019 ini front-end blog/web sudah semakin maju dan instant. Banyak para developer berlomba memamerkan kabisa dengan membuat berbagai macam tools :D Apakah sobat kenal dengan Tutorial Republic Salah satu web online development tutorials seperti W3Schools. Di website tutorialrepublic ada beberapa tools, salah satunya adalah HTML Editor Seperti kalian ketahui, blog gue tempat mengumpulkan source html-editor? Dengan nama codelab, dia adalah korban gua berikutnya ;)) Sobat bisa mencomot dengan gratisan, plus tool color picker jebolan developer.mozilla.org

CodelabColor Picker
codelabcolor-picker

Download: tutorialrepublic.7z in Google Drive.
Password: siganteng-kalem

Jika sobat ingin mempelajari tentang color alias warna, sobat bisa mencoba ColorBox by Lyft Design. Kepengen emoticon or emoji you can try OpenMoji & Emoji Builder. Ingin melihat efek color blend sobat bisa satroni Blendy. Cobalah terlebih dahulu google fonts dengan menggunakan Tyffle. Fix broken css grid using by Broken Grid. Secuil koleksi Front-End-Wizard by chiragbhansali. Easily make tints and shades in 10% increments use Tint & Shade Generator or Color Tinter and Shader.

BONUS...
Material UI popup - Minimal Button with Amazing Hover Effects - Fancy Hover Animation #2 - CSS Image Comparison Slider - Multiline padded text: experiments - CSS3 buttons hover effects with FontAwesome5 - Opening Credits - CSS3 Glass Buttons v2 - PaperTooltip - Perspective Mouse Scroll - CSS button with bubbles - SVG water effect - CSS only drop down menu - Slider on hover - Custom Checkbox Slider with Label - Sticky Progress - Four Side Navigation - CSS-only ripple toggle with dynamic text colour - Image Scrambler Ft. Hunter the Pup! - 3D Retro Buttons - Emerging dropdown - Folding Profile Gallery - CSS Reflection - Overlay menu - Simplicity 6 - Minimap with CSS element() & HTML input range - Hotel page concept - position sticky can do a lot - CodePen Portfolio Generator - Search Box Focus Effect - Select Text And Share - Expanding grid on click - iFrame Preview on Hover - GLITCH

Sepertinya pada tahun 2019 ini saya akan banyak menjadi silent reader dari pada posted writer :D :-h

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

MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE