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

1 Komentar WTF
Walaupun sudah banyak artikel dengan topik menu, apa mau di kata! Bagi sobat blogger yang mau membuat ataupun mengganti menu navigasi, AA Koben akan berikan satu rekomendasi. Karena lagi trending menu dengan tema hamburger iconic, maka dari pada itu gue akan buatkan yang seperti itu! Setelah ditengok-tengok gak ada mirip sama sekali sama burger? Mungkin karena bertumpukan, 3 garis menyerupai ham-bur-ger! Kok gak semen sekalian =))

Kode CSS menu drawer with off-click

<nav class="menu">
<input id ="menu_toggle" type="checkbox" class='menu_toggle'/>
<label for="menu_toggle" class="menu_toggle-label">
<svg preserveAspectRatio='xMinYMin' viewBox='0 0 24 24'>
<path d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z' />
</svg>
<svg preserveAspectRatio='xMinYMin' viewBox='0 0 24 24'>
<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
</svg>
</label>
<ol class='menu_content'>
<li class="menu-item"><a href="#0">Title I</a></li>
<li class="menu-item"><a href="#0">Title II</a></li>
<li class="menu-item">
<a href="#0">Title III</a>
<ol class="sub-menu">
<li class="menu-item"><a href="#0">Sub Title III</a></li>
<li class="menu-item"><a href="#0">Sub Title III</a></li>
<li class="menu-item"><a href="#0">Sub Title III</a></li>
</ol>
</li>
<li class="menu-item">
<a href="#0">Title IV</a>
<ol class="sub-menu">
<li class="menu-item"><a href="#0">Sub Title IV</a></li>
<li class="menu-item"><a href="#0">Sub Title IV</a></li>
<li class="menu-item"><a href="#0">Sub Title IV</a></li>
</ol>
</li>
<li class="menu-item"><a href="#0">Title V</a></li>
</ol>
</nav>

Source & Demo ~ Another Choice with JS.

Harap diperhatikan syntax SVG di dalam HTML! Karena blogger berbasis xHTML, kalau ada kode error, berarti harus di phrase terlebih dahulu kodenya :D

Satu lagi tema yg enggak ada habisnya untuk di bahas yaitu tentang tombol berbagi! Ane akan share juga satu tutorial membuat share button full stylish punya b-)

Kode CSS share button

<div class="share-button">
<div class="share-button_back">
<a class="share_link" href="#" title="twitter">
<svg class="share_icon" version="1" xmlns="http://www.w3.org/2000/svg" xmlns: xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewbox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<g><g>
<path d="M25,0C11,0,0,11,0,25c0,14,11,25,25,25c14,0,25-11,25-25 C50,11,39,0,25,0z M36,19c0,0,0,0,0,1c0,8-6,16-16,16 c-3,0-6-1-9-3c0,0,1,0,1,0c3,0,5-1,7-2 c-3-0-5-2-5-4c0,0,1,0,1,0c1,0,1-0,2-0 c-3-1-5-3-5-6c0-0,0-0,0-0c1,0,2,1,3,1 c-2-1-3-3-3-5c0-1,0-2,1-3c3,3,7,6,12,6 c-0-0-0-1-0-1c0-3,3-6,6-6c2,0,3,1,4,2 c1-0,3-1,4-1c-0,1-1,2-3,3c1-0,2-0,3-1 C38,17,37,18,36,19z"></path>
</g></g>
</svg>
</a>
<a class="share_link " href="#" title="facebook">
<svg class="share_icon" version="1" xmlns="http://www.w3.org/2000/svg" xmlns: xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewbox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<g><g>
<path d="M25,0C11,0,0,11,0,25c0,14,11,25,25,25c14,0,25-11,25-25 C50,11,39,0,25,0z M31,26h-4c0,6,0,14,0,14h-6c0,0,0-8,0-14h-3v-5h3 v-3c0-2,1-6,6-6l4,0v5c0,0-3,0-3,0c-1,0-1,0-1,1v3h5L31,26z "></path>
</g></g>
</svg>
</a>
<a class="share_link" href="#" title="google plus">
<svg class="share_icon" version="1" xmlns="http://www.w3.org/2000/svg" xmlns: xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewbox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<g><g><g>
<path d="M22,29c-0-0-0-0-0-0c-1-0-1-0-2-0h-0 c-3,0-5,2-5,3c0,2,2,3,4,3c3,0,5-1,5-3 c0-0-0-0-0-1C23,30,23,30,22,29z"></path>
<path d="M20,22c0,0,0,0,0,0c1,0,1-0,2-1c1-1,1-2,1-3 c-0-2-2-4-3-4l-0-0c-1,0-1,0-1,1c-1,1-1,2-1,3 c0,2,2,4,3,4H20L20,22z"></path>
<path d="M25,0C11,0,0,11,0,25c0,14,11,25,25,25c14,0,25-11,25-25 C50,11,39,0,25,0z M22,37c-1,0-2,0-3,0c-1,0-2-0-3-0 c-2-1-4-2-4-3c-0-1-0-1-0-2c0-1,0-1,0-2 c1-2,4-4,7-4c0,0,0,0,0,0c-0-0-0-1-0-1 c0-0,0-1,0-1c-3-0-6-3-6-6c0-2,2-5,5-6 c1-0,2-0,2-0h7c0,0,0,0,1,0c0,0-0,1-0,1l-2,1 c-0,0-0,0-0,0H25c1,1,1,2,1,4c0,2-1,3-2,4 c-1,1-1,1-1,2c0,0,1,1,2,2c2,1,3,3,3,5 C27,34,25,36,22,37z M39,24c0,0-0,1-1,1H34v4 c0,0-0,1-1,1h-1c-0,0-1-0-1-1v-4h-4c-0,0-1-0-1-1V23 c0-0,0-1,1-1h4v-4c0-0,0-1,1-1h1c0,0,1,0,1,1v4h4 c0,0,1,0,1,1V24z"></path>
</g></g></g>
</svg>
</a>
<a class="share_link" href="#" title="dribbble">
<svg class="share_icon" version="1" xmlns="http://www.w3.org/2000/svg" xmlns: xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 96 96" style="enable-background:new 0 0 96 96;" xml:space="preserve">
<g>
<path d="M49,48c0-0,0-0,1-0c-0-1-1-2-1-3 c-9,3-18,3-20,3c-0,0-0,0-0,0c0,5,2,9,5,13 C34,59,40,51,49,48z M61,33c-4-3-8-5-13-5 c-1,0-3,0-4,0c1,1,4,6,7,11C57,38,60,34,61,33z M36,64C40,66,44,68,48,68c3,0,5-0,7-1c-0-2-1-8-4-15 C41,55,37,62,36,64z M47,41c-3-5-6-10-7-11 c-5,3-9,8-11,13h0C31,44,38,43,47,41z M56,50 c2,6,3,12,4,14c4-3,7-8,8-13c-1-0-4-1-8-1 C58,50,57,50,56,50z M48,0C21,0,0,21,0,48c0,27,21,48,48,48s48-21,48-48 C96,21,75,0,48,0z M48,71c-13,0-23-11-23-23S35,25,48,25S71,35,71,48 S61,71,48,71z M53,43c0,1,1,2,1,3c0,0,0,1,0,1 c1-0,3-0,4-0c4,0,8,1,9,1c-0-4-2-8-4-12 C63,37,59,41,53,43z"></path>
</g>
</svg>
</a>
</div>
<div class="share-button_front">
<p class="share-button_text">
Share
</p>
</div>
</div>

Lagi lagi harap diperhatikan penggunaan syntax <svg>...</svg> Saya mau buatkan link khusus blogspot, tapi dikarenakan bentrok dengan kode emoticon postingan, jadi kagak bisa :(

Source & Demo Share Button ~ Share Button using base64 URL.

BONUS:

Pulled out text animation - Interactive CSS Filter React Component - Toggle CSS filter Grayscale on image with jQuery - Checkbox my Accordion - Text Only Checkboxes

:-h

0 Komentar WTF
Ketika kesibukan bertambah dan virus malas lagi menerpa ternyata baru terasa ngeblog itu membutuhkan watku & tenaga ekstra :D Belum lagi saat kita ingin mau melakukan posting, ternyata tidak ada ide/bahan untuk melakukan itu semua! Mentok-mentok berkeliaran di dunia maya dan baca-baca apa yang lagi trending :P Mungkin salah satu faktor ide menjadi mandek yaitu kita tanpa sadar disibukan oleh kesibukan yg tidak tentu (baca update-an medsos) =))

Berikut adalah salah satu contoh penulisan markup tabel HTML sederhana, berisi dua kolom dan dua baris:

 <table>
  <tr>
    <th>Bulan</th>
    <th>Simpan</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>$300</td>
  </tr>
</table> 
Sekarang AA Koben ingin berbagi sedikit trik dan info bagaimana membuat penulisan mark-up tabel menggunakan teknik CSS flexbox. Hasil akhir seperti berikut:Comparison Table with CSS flexbox

<div class="comptbl">
<ul class="brs">
<li class="legend">Head Title I</li>
<li class="heat">Head Title II</li>
<li class="heat">Head Title III</li>
<li class="heat">Head Title IV</li>
<li class="heat">Head Title V</li>
</ul>
<ul class="brs">
<li class="legend">Head Title A</li>
<li>Ket. Title A</li>
<li>Ket. Title A</li>
<li>Ket. Title A</li>
<li>Ket. Title A</li>
</ul>
<ul class="brs">
<li class="legend">Head Title B</li>
<li>Ket. Title B</li>
<li>Ket. Title B</li>
<li>Ket. Title B</li>
<li>Ket. Title B</li>
</ul>
<ul class="brs">
<li class="legend">Head Title C</li>
<li>Ket. Title C</li>
<li>Ket. Title C</li>
<li>Ket. Title C</li>
<li>Ket. Title C</li>
</ul>
<ul class="brs">
<li class="legend">Head Title D</li>
<li>Ket. Title D</li>
<li>Ket. Title D</li>
<li>Ket. Title D</li>
<li>Ket. Title D</li>
</ul>
<ul class="brs">
<li class="legend"></li>
<li><a href="" class="calltoact">Title Button I</a></li>
<li><a href="" class="calltoact">Title Button II</a></li>
<li><a href="" class="calltoact">Title Button III</a></li>
<li><a href="" class="calltoact">Title Button IV</a></li>
</ul>
</div>
Kode CSS Comparison Table.
Source & demo Creating a clean CSS Comparison Table with CSS flexbox.
BONUS:

CSS only Perspective Menus - Pure CSS accordion - Pure CSS 3D cards - Animated button with rainbow hover - CSS Lightbox - Animated Speech Bubble Nav - Playful CSS figure & figcaption - Figure & Figcaption - Multiple transitions on a button - Accessible SVG Link List with Tooltips - Responsive 3D Flip Menu - Scrolling Gradient - Images Slider using CSS - Expanding and Collapsing Hamburger Menu - CSS Droplet Menu Animation

0 Komentar WTF
Lumayan sudah agak lama tidak login ke account blogger, padahal online tiap hari :D eh sekalinya log-in ada beberapa pemberitahuan!CookiesApakah ada di antara sobat yang memposting dan menerangkan tentang hal tersebut :-?? Gue menemukan satu tutorial CSS mengenai Hover Effect Macam begini saja bumbunya
.lifted {
width: 25%;
height: 50px;
display: block;
min-width: 250px;
border-radius: 5px;
position: relative;
margin-bottom: 11px;
color: darkslategray;
box-sizing: border-box;
padding: 14px 25px 0 45px;
box-shadow: 1px 2px 1px -1px #777;
transition: background 200ms ease-in-out;
background: linear-gradient(to right, #abbd73 35%, #d6e2ad 100%);
}
.shadow {
position: relative;
}
.shadow:before {
z-index: -1;
content: "";
bottom: 13px;
right: 7px;
width: 75%;
top: 0;
position: absolute;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
transition: all 150ms ease-in-out;
}
.lifted:hover {
background: linear-gradient(to right, #abbd73 0%, #abbd73 100%);
}
.shadow:hover::before {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
bottom: 20px;
z-index: -10;
}
.circle {
position: absolute;
top: 14px;
left: 15px;
border-radius: 50%;
width: 20px;
height: 20px;
display: inline-block;
box-shadow: inset 1px 1px 1px 0px rgba(0, 0, 0, 0.5), inset 0 0 0 25px #FFF;
}

<div class="lifted shadow">
<div class="circle"></div>
BLAH BLEH BLOH
</div>

<div class="lifted shadow">
<div class="circle"></div>
BLAH BLEH BLOH
</div>

DEMO: codepen.io/BastianAndre/pen/eBBvVz

AA akan berikan style blockquote kepunyaan princess Lea Verou :D Ramuannya seperti ini
blockquote {
margin: 15px 0 0 10px;
padding: .3em 1em .3em 2em;
background: #ffecd0;
border-left: .7em double rgba(255, 255, 255, .3);
font-family: 'Palatino Linotype', Palatino, Georgia, serif;
}
blockquote:before {
content: '\275D';
float: left;
display: block;
margin-left: -.52em;
margin-top: -.23em;
color: #f72;
font-size: 700%;
line-height: 1;
}
blockquote cite {
margin: 5px 0 0;
display: block;
}
.entry-content li {
list-style: none;
padding-left: 1em;
}
.entry-content ol {
counter-reset: counter;
}
.entry-content ul > li {
text-indent: -1.5em;
}
.entry-content li ul {
padding-left: 1em;
}
.entry-content li:before {
font-size: 1.6em;
line-height: .8;
padding-right: .1em;
}
.entry-content li:before {
content: 'âž›';
color: rgba(0, 0, 0, .2);
}
.entry-content ol > li {
list-style: none;
text-indent: -1.5em;
margin: 1em 0 0 1em;
}
.entry-content ol > li:before {
counter-increment: counter;
content: counter(counter);
font-size: 4em;
line-height: .2em;
padding: .05em 0 .05em;
display: inline-block;
vertical-align: middle;
font-family: Raleway, 'Helvetica Neue', Helvetica, sans-serif;
}
.entry-content ol > li:nth-child(even) {
padding-left: 3em;
padding-right: 0;
}
.entry-content ol > li:nth-child(even) > ul {
padding-left: 4em;
}
.entry-content ol ol > li:before {
font-size: 3em;
color: #ccc;
}
.entry-content ol ol > li:nth-child(even) {
padding-left: 0;
}
.entry-content ol ol ol > li:before {
font-size: 2em;
color: #bbb;
}
.entry-content ul.omitted li:before {
content: '\2718';
color: #b00;
}

<div class="entry-content">
<blockquote>
<ol>
<li>Blah Bleh BlohH bLeh</li>
<li>Blah Bleh BlohH bLeh</li>
<li>Blah Bleh BlohH bLeh</li>
<li>Blah Bleh BlohH bLeh</li>
<li>Blah Bleh BlohH bLeh</li>
</ol>
</blockquote>
</div>

DEMO: lea.verou.me/2018/04/quicker-storify-export

Bagi sobat yang kepengen memasang serangga di blog, bisa coba dengan memakai Auz/Bug.
BONUS:

@keyframers 1.4.0 | Expanding Environments - Sidebar Menu Concept - Accordion Image Gallery - Gallery hover effect + Gallery expanded - WebGL Hover Effect - Blend modes selective desaturation effect - keyframes.app

0 Komentar WTF
Informasi berharga di tahun 2018 bagi blogger yang tidak mau di panggil ketinggalan berita up to date, from Mr. Beben Koben in the house :-) Pada postingan sebelumnya mengenai text editor, gue punya satu rekomendasi lagi bagi kalian untuk melihat Textbox.io Bagi kalian yg berminat, silahkan dipelajari lebih lanjut, ini saya kasih mode offline-nya textbox.io.7z ;))
Mungkin di antara elo-elo semua sudah tidak asing lagi dengan Font Awesome? Jangan dikira tidak akan ada saingan, are you ready for Fontisto :-? Kalau mau memepelajarinya, ini saya kasih fontisto mode off-line tetapi masih versi v=201 :D

Sudah 2 siki info tuh gue berikan! Lanjutkan inpoh dengan yg lagi mencari tutorial ttg zoom image you must check this out swapping images with the sizes attribute. Saya membaca artikel dari Philip Walton, walau kagak ngerti juga! Satu hal yg menjadi perhatian ane adalah halaman demonya tentang Responsive Components! Kalau anda mau berkreatifitas sedikit, bisa dijadikan halaman dashboard admin tuh :-" Kalau malas buatnya silahkan sikat sufee admin dashboard by puikinsh. Nih juga niiih hajar WebSlides. Mau memanipulasi gambar dengan HTML5 canvas, gua beri blend.js
Build a download button full of micro interactions for stylish blogger.

Apalagi yaaa...
Tidak punya aplikasi photoshop gunakanlah versi online
  • Pixlr Editor
  • Pixlr Express
  • Photopea
  • Photoshop Online Free
  • Sumopaint Lite
  • miniPaint
Bagi kalian twitter maniac Twemoji Awesome. CKEditor 5 v10.0.0 sudah keluar loh! Udahan ajah yah bro, capek ngeutik, males :P

BONUS:

goldfishes - CSS-Only Responsive Layout with Smooth Transitions - One page scroll Pure CSS - Viewport Units Flexible Layout - Image Effects - Tumblr photogrid/photoset with flex-box in place of JavaScript - font combination generator - nexus like menu - Two Face slider - Full Page CSS Only Parallax 📸 Gallery - @keyframers 1.2.0 Reactive Animations with RxJS - Popup / Overlay - Mobil Menu - Sidebar - Navigation - 3d 文字跑马灯特效 - expanding link indicator - [JS/CSS] Flat Gradient Generator - Reading Progress Bar



MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE