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
Melanjutkan tema postingan sebelumnya mengenai bumpy lists for full style lists content. Jadi artikel sekarang masih berkutat seputar klik srot merosot :P Ada yang bilang dropdown dan ada pula yang berkata select box! Kalau dilihat-lihat berbeda namun ada kemiripan dalam fungsinya? Satu yg pasti tetap srot merosot bro =)) Sekarang AA Koben akan berbagi tutorial bagaimana cara membuat CSS dropdown with hover. Jadi ketika melakukan sorot, akan merosotlah konten...tidak perlu repot-repot ;))
.dropdown {
z-index: 1000;
position: relative;
margin: auto;
width: 250px;
border-radius: 3px;
-webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 1);
box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 1);
}
.dropdown .selection {
position: relative;
cursor: pointer;
background-color: #F1F1F1;
color: #737373;
padding: 10px;
z-index: 100;
border-radius: 3px;
margin-top: 20px;
}
.dropdown .selection:after {
position: absolute;
content: '';
top: 50%;
right: 8px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border: 8px solid transparent;
border-bottom: 0;
border-top: 8px solid #737373;
width: 0;
}
.dropdown .options {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
position: absolute;
top: 100%;
min-width: 100%;
background-color: #FFF;
height: 0;
overflow: hidden;
-webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 1);
box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 1);
}
.dropdown .options div {
padding: 0 10px;
cursor: pointer;
line-height: 1.5;
}
.dropdown .options div:hover {
background-color: #F1F1F1;
color: #333;
-webkit-box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 1);
box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 1);
}
.dropdown:hover .options {
height: auto;
padding: 10px 0;
}
.dropdown:hover .selection {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.dropdown:hover .selection:after {
border: 8px solid transparent;
border-top: 0;
border-bottom: 8px solid #737373;
}

<div class="dropdown">
<div class="selection">Selected</div>
<div class="options">
<div>List 1</div>
<div>List 2</div>
<div>List 3</div>
<div>List 4</div>
<div>List 5</div>
<div>List 6</div>
<div>List 7</div>
<div>List 8</div>
<div>List 9</div>
</div>
</div>
DEMO: codepen.io/beben-koben/full/xVooVq/

Ada satu lagi yang unik dan simpel, namun ada persamaan. A Pen By Kriszta talk about Card fold down effect with dynamic height. Jika sobat berminat, AA sudah meminimalisir kode yg ada tanpa mengurangi gaya full.

.task {
width: 50%;
min-width: 300px;
margin: 0 auto;
position: relative;
overflow: hidden;
cursor: pointer;
-webkit-perspective: 800px;
perspective: 800px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.abstract,.details {
width: 100%;
color: #282828;
padding: 1px 20px;
position: relative;
background: #fafafa;
}
.task:hover .abstract, .task:hover .details {
background: #fafafa;
}
.abstract {
-webkit-transition: .3s ease all;
transition: .3s ease all;
}
.details {
max-height: 0;
padding: 0;
overflow: hidden;
visibility: hidden;
-webkit-transform: rotateX (-180deg);
transform: rotateX (-180deg);
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: .3s transform ease;
transition: .3s transform ease;
}
.details:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 1px;
background: grey;
}
.task:hover .details {
max-height: none;
overflow: visible;
visibility: visible;
-webkit-transform: rotateX (0deg);
transform: rotateX (0deg);
}
.details__inner {
padding: 1px 20px;
}

<div class="wrap">
<div class="task">
<div class="abstract">
<h3>TITLE</h3>
<p>This is sub TITLE.</p>
</div>
<div class="details">
<div class="details__inner">
<h3>When HOver</h3>
<p>This additional content when hover.</p>
</div>
</div>
</div>
</div>
Dah begitu saja ya!

BONUS:
CSS only Select - Dropdown Menu Animation - Select Box with Placeholder [CSS Only] - Facebook Reactions (Mother's day sneak peak) - Distorted Button Effects with SVG Filters - Masking in the Browser with CSS and SVG - Making a scroll-dependent menu bar with CSS3 and JavaScript - Animated Transition Effects - CSS Dropdowns - How TO - Hoverable Dropdown - It's Drop Down but It's Select Box too Use CSS

0 Komentar WTF
Banyak cara untuk menyembunyikan konten! Beberapa yang sering di temui adalah dengan trik spoiler atau accordion Gue dapat trick bumpy lists! Deretan lists yg disembunyikan mirip dengan accordion! Kenapa dikatakan bumpy karena ada efek mental-mental ketika melakukan klik tutup bukanya ;)) Untuk lebih jelasnya silahkan lihat demo Bumpy lists: codepen.io/vsync/pen/EaObde Singkat cerita kalau sobat mempunyai list yg teramat panjang, maka solusinya sembunyikan dengan cara ini saja ;)
.bumpy {
list-style: none;
padding: 0;
margin: 10px auto;
width: 100%;
color: #fff;
}
.bumpy > li {
display: block;
}
.bumpy > li > input {
display: none;
}
.bumpy > li > input:checked ~ label {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
-webkit-animation: none;
animation: none;
-webkit-transition: .1s;
transition: .1s;
}
.bumpy > li > input:checked ~ label > .toggleIcon::before {
opacity: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
text-shadow: 0 0 3px #333;
}
.bumpy > li > input:checked ~ label > .toggleIcon::after {
-webkit-transform: none;
transform: none;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.bumpy > li > input:checked ~ .options > ul {
margin-bottom: .7em;
}
.bumpy > li > input:checked ~ .options > ul > li {
margin: 0;
opacity: 1;
}
.bumpy > li > label {
display: block;
padding: 1em 1em 1em 3em;
background: #242C35;
position: relative;
z-index: 1;
border-radius: 3px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 0 0 #FFF;
-webkit-transition: .5s;
transition: .5s;
}
.bumpy > li > label > .toggleIcon {
position: absolute;
width: 1.2em;
height: 1.2em;
left: .8em;
top: 0;
bottom: 0;
margin: auto;
}
.bumpy > li > label > .toggleIcon::before, .bumpy > li > label > .toggleIcon::after {
content: '';
position: absolute;
background: #ccc;
-webkit-transition: 0.3s cubic-bezier(0.45, 0.01, 0.27, 1.4);
transition: 0.3s cubic-bezier(0.45, 0.01, 0.27, 1.4);
}
.bumpy > li > label > .toggleIcon::before {
width: 2px;
height: 100%;
left: calc(50% - 2px);
margin-left: 1px;
}
.bumpy > li > label > .toggleIcon::after {
width: 100%;
height: 2px;
top: calc(50% - 1px);
}
.bumpy > li > .options {
position: relative;
overflow: hidden;
}
.bumpy > li > .options > ul {
font-size: .9em;
list-style: none;
margin: -1em .6em 1em;
padding: 0;
border-radius: 0 0 4px 4px;
border: 5px solid rgba(255, 255, 255, 0.15);
-webkit-transition: 0.3s cubic-bezier(0.45, 0.01, 0.27, 2);
transition: 0.3s cubic-bezier(0.45, 0.01, 0.27, 2);
-webkit-perspective: 600px;
perspective: 600px;
}
.bumpy > li > .options > ul > li {
padding: .5em 1em;
margin-top: -5em;
border-bottom: 1px solid #eee;
position: relative;
cursor: pointer;
background: #F6F6F6;
color: #777;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
-webkit-transition-property: margin, opacity;
transition-property: margin, opacity;
}
.bumpy > li > .options > ul > li:first-child {
padding-top: 2em;
}
.bumpy > li > .options > ul > li:last-child {
border: 0;
border-radius: 0 0 3px 3px;
}
.bumpy > li > .options > ul > li:hover {
background: lightyellow;
box-shadow: 5px 0 rgba(255, 255, 224, 0.1), -5px 0 rgba(255, 255, 224, 0.1);
}
@-webkit-keyframes bumpUp {
20% {
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
100% {
-webkit-transform: none;
transform: none;
}
}
@keyframes bumpUp {
20% {
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
100% {
-webkit-transform: none;
transform: none;
}
}

<ul class="bumpy">
<li>
<input type="checkbox" id="item1"/>
<label for="item1">
<div class="toggleIcon"></div>BUMPY SATU
</label>
<div class="options">
<ul>
<li>List I</li>
<li>List II</li>
<li>List III</li>
</ul>
</div>
</li>
<li>
<input type="checkbox" id="item2"/>
<label for="item2">
<div class="toggleIcon"></div>BUMPY DUA
</label>
<div class="options">
<ul>
<li>List I</li>
<li>List II</li>
<li>List III</li>
</ul>
</div>
</li>
<li>
<input type="checkbox" id="item3"/>
<label for="item3">
<div class="toggleIcon"></div>BUMPY TIGA
</label>
<div class="options">
<ul>
<li>List I</li>
<li>List II</li>
<li>List III</li>
</ul>
</div>
</li>
<li>
<input type="checkbox" id="item4"/>
<label for="item4">
<div class="toggleIcon"></div>BUMPY EMPAT
</label>
<div class="options">
<ul>
<li>List I</li>
<li>List II</li>
<li>List III</li>
</ul>
</div>
</li>
</ul>
Kalau sobat mau menambahkan kotak list, perhatikan uniq id yg berada di input dan label!
<ul class="bumpy">
    <input type="checkbox" id="UNIQ-ID"/>
    <label for="UNIQ-ID">
      <div class="toggleIcon"></div>BUMPY 
    </label>
    <div class="options">
      <ul>
        <li>List.</li>
        <li>List..</li>
        <li>List...</li>
      </ul>
    </div>
  </li>
</ul>
BONUS...

flat accordion - (All) CSS Transforms Playground! - Simple side menu - Menu Animated Dropdown and Icon - Tuts+ CodePen Challenge #6: Transformers - Search input context animation - Beautiful Context Menu - Hover Color Random with out Default - Button Shine Effect CSS - HTML5 Table with Sticky Headers - - Daily UI SUBSCRIBE - CSS Only Shadow Scrolling Effect - CSS Fizzy Button - CSS Particle Effects - Drag to transform - Beach Escape - Punk Lettering - Blurred, Invisible Ink, and Redacted text (CSS only) - CSS Ribbon - Anchor Click Canvas Animation - MacBook scrolling animation on hover - DVD screensaver (marquee edition) - CSS3 ленточки - Releasing "Recent Comments Widget" For Blogger - Drake CSS Albums - The Cutting-Edge CSS3 Features That Are Essential to Modern Web Design - Quick Tip: Using CSS Counters to Style Incremental Elements - Creating Wavescroll

2 Komentar WTF
Sebagai seorang bloglang (blogger petualang) dan kolektor editor (HTML editor) gratisan and Open source sekarang AA Koben akan berbagi kembali Tryit Editor kepunyaan si w3schools. Pada saat ini sudah mencapai versi 2.8 Sebelum itu coba sobat lakukan searching di blog gue dengan keyword try it editor Berikut penampakan original Tryit editor w3schools:Tryit Editor-v2.8.jpgJika kalian perhatikan pada pojok kanan atas terdapat opsi horizontal atau vertical display! Koben sebagai insan manusia paling baik di seluruh jagat alam raya, sudah menambahkan opsi lain yaitu: get file on local storage, refresh button and color picker kepunyaan si w3schools juga :))
Check this out bro:Tryit Editor v2.8.jpgSudah pada ngiler kepengen yach =P~

>> Tryit Editor v2.8 Unduh di 4shared: www.4shared.com/archive/uJ_yWjZ8ce/Tryit_Editor_v28.html
>> Download Tryit_Editor_v2.8.7z in Ziddu: downloads.ziddu.com/download/25341000/Tryit_Editor_v2.8.7z.html
>> Password 7z:

BONUS

POP Out Navigation - - Display CSS with CSS - Visualizing Hidden Tags - Drag and Drop Pixel Art Generator - Super Random Color Generator (updated) - Social-share button - Legend Effect for Galleries - Day/night switch - Spotify Artist Page - Menu concept - Animated Social Buttons - SunFlick.js - Trapdoor nav idea - Canvas Paint - css3 animated button loading state - CSS Accordion - Simple line animation - underline left-right - Using pseudo-elements & collapsing margins to start text columns - Window manager: Min, max, close, resize all sides, drag and drop, focus - 3D Styled CSS Browser Mockup - Variable Longshadow with Gradients Mixin - Header Search Concept

Bye :-h

0 Komentar WTF
Seperti yang sudah kita ketahui bersama, bahwasannya blog dengan platform blogspot telah disisipkan dengan kolom Search Description! Apakah itu? Tidak lain untuk menuliskan penjelasan singkat tentang post yg sedang kita buat, agar mesin penjelajah dapat mengindex hasil post kita itu dengan customize keywords secara akurat ;))
Contoh pada blog ini penampakan seperti berikut:search-descriptionAA Koben akan memberikan hiasan sederhana pada bagian itu dengan menanamkan 3 buah link share. Maka akan tampak spt:search descriptionSobat hanya perlu menambahkan kode CSS ke dalam template!
.wrap-bq {
margin: 0 auto;
padding: 5px 0;
max-width: 100%;
overflow: hidden;
}
.page-bq {
font-weight: 100;
line-height: 1.5;
padding: 10px 0;
position: relative;
text-align: left;
font-size: inherit;
border: solid #ccc;
border-width: 1px 0;
}
.page-bq-share {
right: 0;
bottom: 10px;
font-size: 0;
height: 21px;
overflow: hidden;
position: absolute;
}
.page-bq-share > li {
font-size: 18px;
vertical-align: top;
display: inline-block;
}
.page-bq-share > li+li {
margin-left: 11px;
}
.page-bq-share a {
color: inherit;
display: block;
}
.page-bq-share a img {
height: 20px;
width: 20px;
}
.screen-reader {
clip: rect(0 0 0 0);
display: block !important;
position: absolute;
width: auto !important;
}
.text-bq {
color: inherit;
}
Silahkan edit-edit value or tambah-tambah sesuai dengan kebutuhan...
Syntax HTML pasangkan setelah kode<div class='post-body entry'>Kalau ada dua, berarti yang ke dua! Brikut kode HTMLnya Search Description HTML Coded. Begitu saja yg bisa gue beri, bonusnya spt biasa sangat luar biasa ;)
BONUS . . .
Count Words - Count Words 📖🔍 - Random Selection Color 🌈🎲 - Split-String ✂︎ Encoder - Tinkerpad - Responsive Website Testing Tool - HTML Widget with CSS Options Panel - JOE: The JavaScript Operating Environment - PreEQual: The World's First EQCSS Pre-Processor - ProCSS: The CSS Pro-Processor - CSS Tooltips and Popovers - Custom code editor palette in pure CSS - Daily UI #010 - Social Share - show hidden text - ellipsis - Medium-style highlight menu - Pure CSS Slideshow Gallery - Strikethrough hover - mix-blend-mode demo - oxeQqo - Colourful Flower Popup Menu - Gooey Menu CSS Only - Windows - 90's emoji cursor - React Redux Todo App #1 - Dynamic Gradient Backgrounds - ES6 Random Color Text - CSS3 Paper Folding Effect - Update CSS Variables with JS - Material Buttons.css - Imperfect Buttons - Widgets - Vertical color adapting CSS menu - DailyUI026 Subscribe Popup - HEX Background Blend Modes Tester - DailyUI027 Dropdown - Text particle - Email Sentiment Widget Builder - Simple Image Overlay Hover Effects - 18 Simple Styles for Horizontal Rules (hr CSS Design) - Todo List - RSS Job board - JSON and PHP Short Tag Array Converter
al-Quran

MISC

Resources

1 2 3 4 5 6 7 8 9

FACEBOOK PAGE