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
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


0 Komentar WTF
Blogger post editor tidak lain adalah sebuah text editor. Dari teks-editor yang beginning sampai dengan tingkat advanced banyak ditawarkan. AA Koben akan berbagi informasi bagaimana cara membuat text-editor sederhana, yang munkin dapat dikembangkan menjadi high level :D Tapi sebelum itu ada beberapa issue yg musti sobat tauk :P
Bagi user Bootstrap dari github dengan nick Vegetam sudah membuat sebuah Bootstrap Page Generator as layout it or The Web Page Generator, Boostrap Page Generator 4 maybe you can try Bootstrap 4 Interface Builder. Untuk penggila form action ada Bootstrap Form Builder.

Sobat mencari source CSS animasi bisa langsung meluncur ke 25+ CSS Animation Libraries. Apakah kalian ingin membuat QRCode, mungkin ini salah satunya bisa menjadi rujukan qrcodejs. Gue menemukan text editor sederhana dengan gaya notebook paper dari Subin's Blog.Notebook Paper Design Text EditorTernyata master tovic juga sudah buat, dengan penambahan fitur di sana-sini JavaScript Text Editor & JavaScript Rich Text Editor. Ketiga sources teks editor tersebut bisa sobat dapatkan dengan gratis. Bagi user yang malas seperti saya, ana sudah buatkan sepaket!
Text Editor.7z for learning.

BONUS...

Image Merge slider - 3D Slider Pure CSS - Animate a Container on Mouse Over Using Perspective and Transform - Pure Css Sidebar Toggle Menu - Gmail Application - Beautiful Minimalist Web Tab Component V2 - Polaroid Effect with CSS - Free Intro to Web Development slides (with demos)

See you :-h

MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE