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 ☺

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

0 Komentar WTF
Dahulu ketika awal-awal ngeblog, ketika berkunjung ke blogsite orang kalian pasti sering bertanya bagaimana cara melakukan/bikin seperti itu :D Mungkin masih ingat salah satu tutorial yang cukup fenomenal yaitu trik membuat segala ada di pojok! Biasanya dipasangin gambar bergerak untuk menarik para pengunjung ;)) Karena sekarang sudah ada CSS 3 hal itu bisa dikembangkan lagi menjadi lebih keren b-) AA Koben ingin berbagi cara membuat template-corner (original source) or corner_stuff (modification)

Gua dapetin dari codepen.io dengan nick account Sean Codes! Berikut beberapa karyanya:

  • Recursive Hover Nav (Only CSS)
  • MacOS Dock with CSS!
  • Floating Nav to Top Fix Expand v2
  • Split Text Menu
  • VVVVV
  • Show Hide
Perhatikan pojok kanan atas dan pojok kiri bawah ada sesuatu! Berikut ini adalah ramuan bumbu kode CSS yg musti sobat pasangkan pada template.

Buka link berikut dan ambil kode CSS Corner Stuff.
Syntax HTML
<div class="corner_stuff corner_top corner_right"> 
  <div class="corner_title">sean codes <i class="corner_icon">❓</i></div>
  <div class="corner_links"><a class="corner_link"><span><small>Hi! Nice to meet you! <i></i></small></span></a><a class="corner_link" href="//instagram.com/beben.koben" target="_blank"><span><i></i> instagram</span></a><a class="corner_link" href="//codepen.io/beben-koben" target="_blank"><span><i></i> codepen</span> </a><a class="corner_link" href="https://github.com/beben-koben" target="_blank"><span><i></i> github</span> </a></div>
</div>
<div class="corner_stuff corner_bottom corner_left corner_small">
  <div class="corner_title" onclick="window.location=window.location">reload <i class="corner_icon></i></div>
</div>
Bonus top

Lightbox Gallery Hover Effect - Visual Studio Code in React with working closing opened file - CSS Line Counter - HTML Kitchen-sink - SVG Text Portrait - Chrome desktop theme-color - Preload Images - Animation Border - Period1K - JS1K 2016 Entry - Live Screen Effect using matrix3d() - Komische Uhr - Share Modal Without Javascript (checkbox hack) - Multi-level Side Nav Menu - [CSS] Elastic menu - Increase Font Size with CSS Variables - Menu Animations (CSS Only) - c(ss)arousel - pure CSS carousels πŸŽͺ🐎πŸŽͺ🐎πŸŽͺ🐎 - JQ | Image Gallery Layout (JSON & Infinite Scroll) - Pure CSS Flip Card - [SCSS] Snow box-shadow no image, no js

Tools terbaru

Emojiers - The ultimate free Emoji database! - Screenshot Bin | API for Website Screenshots & Thumbnails - CSS Gradient

Bye :-h

0 Komentar WTF
Memasuki bulan ke-2 di awal tahun 2018 ini, belum menemukan sesuatu yang gereget punya bro :-< Lumayan ada informasi dari CSS-Tricks yg bisa sobat baca! Melakukan keliling ternyata para developer sedang rajin pada membuat tolls warna. Ini ada beberapa gue dapet, colorable, colouris and .colors(). Ini baru juga sob, tool untuk melihat jumlah kata/kalimat word counter. Rada susah untuk saya dalam mengikuti perkembangan berita dari web Codrops. Karena web browser engine ane tidak update :D

Dikarenakan belum ada yg keren punya, dan lagi pada doyan membuat tools, maka dari itu AA Koben juga akan berbagi sedikit 1 buah tools bagi kalian ;)) Bagusnya enggak seberapa dan sudah tersedia pada setiap bawaan engine-browser. Kalian sudah pada kenal tentunya, tak lain dan tak bukan tool tersebut adalah fitur View Page Source. Klik kanan pada mouse atau pencet tombol keyboard Ctrl + U langkah tercepat untuk mengaksesnya!
Kalau mau melihat page source 10 halaman pages-site sekaligus bagaimana, dan tanpa membuka halaman tersebut terlebih dahulu?

Silahkan bagi kalian yg perlu, lakukan Save Page As pada link berikut view-page-source.
Kalau mau berjalan secara offline, silahkan buka hasil save pada text editor kalian, kemudian cari kode...<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>...gantikan link jQuery kepunyaan google dengan link script jQuery yg ada pada komputer/host/hard-disk/flash-disk kalian!

BONUS

Css text effects - Social.svg.min - CSS-Cursors - Simple and Responsive Menu (HTML5 and CSS3 only) - Full Page Horizontal Accordion - Pure CSS Emoji Checkbox - Inspirational hover in portrait image - The Social Drawer