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

0 Komentar WTF
Apa yang sobat lakukan jika menemukan sebuah link page dimana kontennya tampak berguna. Apalagi kegunannya itu bisa dipakai di kemudian hari. Minimal pasti kita akan melakukan save link tersebut! Cara lain yaitu dengan melakukan Save Page As... toh? AA Koben akan berbagi trik & tips bagaimana cara menyimpan/mengkoleksi links-page yg bermanfaat bagi kita, untuk bisa dibaca kapan saja sobat inginkan! Cara tercepat sudah tentu melakukan Save Page As...(Web Page, complete), cara kedua dengan jasa web convertor (image, PDF, Word, or etc), cara ketiga dengan bantuan tools bawaan browser (Web Developer).

Ide ini saya dapatkan dengan menggunakan browser mozilla, dimana pada browser engine ini terdapat satu fitur Enter Reader View (berada tepat dibelakang box search dekat tombol Reload Page), ditandai dengan icon buku.Enter-Reader-ViewKalau icon buku tidak muncul, sobat bisa melakukannya secara manual dengan rumusan about:reader?url=LINK-TUJUAN Kita akan melakukan Save Page As... di mana posisi halaman page terbuka dengan format Reader View :-? Sebagai contoh silahkan sobat download About-Reader.7z kemudian ekstrak.

Tahapan dalam membuat Reader-View adalah
  1. Buat satu folder dan beri title (About-Reader).
  2. Di dalam folder About-Reader, buat sebuah folder lagi beri title (Data-files).
  3. Di dalam folder Data-files, buat kembali 3 buah folder (atau lebih sesuai kebutuhan) beri nama (css, image, and js)
Folder-folder tersebut gunanya adalah untuk menyimpan data hasil dari melakukan Save Page As...dengan format Reader-View.
Ilustrasi...
Ketika sobat menemukan halaman website dan dirasakan isi konten sangat bermanfaat, lakukan klik pada icon buku (Enter Reader View). Dilanjutkan dengan klik kanan pada mouse (pada keyboard pencet Ctrl + S) Simpan hasil save pada folder yg dibuat tadi (dalam contoh folder About-Reader)

Nanti akan didapatkan 2 jenis hasil save file yg berbeda. Saya melakukan percobaan dengan link address https://www.w3schools.com/html/default.asp Ketika di save akan menghasilkan hasil save-an HTML Tutorial.htm dan HTML Tutorial_files Buka folder HTML Tutorial_files, kalau ada gambar simpan gambar tersebut pada folder image yg berada di folder Data-files.
Kemudian buka teks editor sobat (Notepad), buka file HTML Tutorial.htm, gantikan semua link yg tertuju ke folder HTML Tutorial_files degantikan dengan link ke Data-files (css, images, and js).

Memang agak sedikit kelihatan ribet, tetapi kalau sudah dipraktekan sangatlah mudah sob :) Inti dari trik ini membuat semua halaman page yg ingin kita simpan tetapi dalam format Reader-View. Dengan begini, kita tidak usah melakukan save CSS, JS secara utuh seperti kita melakukan Save Page As... secara normal. Kalau normal CSS/JS yg tidak perlu akan ikut tersave!
Semoga kalian faham & mengerti apa yg saya maksudkan, sebagai contoh hasil kerja saya melakukan save-page-as dengan format reader-view, dengan korban web

https://adam-marsden.co.uk/css-cheat-sheet

Download CSS Cheat Sheet on Reader-View Mode.
Bonus

Recursive Hover Nav (Only CSS) - MacOS Dock with CSS - Floating Nav to Top Fix Expand v2 - Split Text Menu - VVVVV - Show Hide - Drop Menu Pure CSS3 - Curtain Reveal Effect with Sticky Positioning & Scroll Snap Points No-JS - Bubbly button (Design by Gal Shir) - HTML5 Tags

1 Komentar WTF
Banyak sekali kegunaan dari keberadaan fitur syntax highlighter Apalagi bagi kalangan para coderer, programmer, writer, or blogger! Sangkin pentingnya banyak di luaran sana web online yang menawarkan jasa pemasangan/pemakaian dari SyntaxHighlighter. Paling instant dan mengenakan sobat bisa mencoba: hilite, highlight.hohli, or tohtml. Kalau sobat pengen permanen dipasangkan di blog, maka pilihan AA Koben patut diperhitungkan ;))
Pilihanku jatuh kepada CodeMirror. Yes, kenapa gue memilih ini, karena ada beberapa penggunaan tag yg tidak biasa dalam pemakaiannya nanti! Pada umumnya taging yg di gunakan dalam pemakaian syntax-highlighting ketika sobat melakukan posting code/script adalah penggunaan tag <pre> atau <code>

Dengan bantuan codemirror & jQuery, sekarang kita bisa menuliskan script/coded secara suka-suka. Nanti sobat bisa memakai tag pre, code, div, p, or etc dalam pemanggilannya. Bahan-bahan yg mesti tersedia adalah...

Requirements


<link rel=stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/codemirror.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/codemirror.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/mode/htmlmixed/htmlmixed.min.js"></script&gt;
.codek {
    margin: 0;
    vertical-align: middle;
}
.inline {
    display: inline-block;
    margin: 0;
}
.CodeMirror,.CodeMirror-scroll {
    height: auto !important;   
    overflow: hidden;
}
.CodeMirror-sizer,.CodeMirror-linenumbers {
    background: #FFF;
}
Tempatkan bahan² di tempat semestinya :D Tambahkan declaration properti CSS sesuai selera. Jika sudah terpasang, jQuery script, tidak usah dipasangkan lagi. Perhatikan juga mode codemirror-nya. Pada kasus ini saya mencomot mode htmlmixed. Kalian bisa ganti/tambahkan sesuai kebutuhan modenya. Ane juga memakai link via CDN by cdnjs.

Langkah terakhir pasangkan seonggok script berikut sebelum/diatas tag </body>

<script type='text/javascript'>
//<![CDATA[
$('.codek').each(function() {    
    var $this = $(this),
        $code = $this.html(),
        $unescaped = $('<div/>').html($code).text();   
    $this.empty();
    CodeMirror(this, {
        value: $unescaped,
        mode: 'javascript',
        lineNumbers: !$this.is('.inline'),
        readOnly: true
    });    
});
//]]>
</script>
Ketika mau postingkan kode/script ada baiknya di lakukan phrase terlebih dahulu. Berikut tag yang bisa kalian pergunakan dalam postingan...<code class="codek inline">Your
balh-bleh-bloh</code>
<div class="codek">bleh() {
return bloh;
}</div>
<div class="codek inline">&lt;h4&gt;unescape test&lt;/h4&gt;</div><pre class="codek">
your phrase script add here
</pre>
Kuncinya harus ada class="codek"

Source & demo by jsfiddle.net/mofle/tZVsS

BONUS

Menu - CSS Mega Menu - CSS 3d box - Product Template powered with Bootstrap - Pure CSS Drag & Drop - Gooey text background with SVG filters - Sticky Title/Page Progress Bar - Hexagon Badges with Font Awesome icons - CSS Transform Creator - CSS-Only Nested Dropdown Navigation - CSS-only shimmering neon text - Pure CSS Background Image Scroll Effect - Perspective Nav CSS Only One Page Design

Bye :-h