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

1 Komentar WTF
Setiap bertemu dengan bagian akhir kebanyakan dari kita mengucapkan, tidak terasa sudah di penghujung tahun 2017 lagi yah! Dilanjutkan dengan, selamat datang tahun baru 2018...WTF. Dengan seiring bergantinya tahun ke tahun sudah tentu diikuti dengan silih bergantinya sesuatu itu sendiri. Yang tua digantikan sama yang muda, yang usang jadi baru kembali, siklus ya begitu 3:-O
Di penghujung tahun ini, AA Koben akan berbagi sedikit informasi ringan. Apakah kalian penggemar dari Font Awesome? Silahkan sikat versi terbaru yaitu Font Awesome 5 Released! Kurang seru kalau awesome cuma sejenis! Nih awesome yg lain buat kalian agar lebih awwsome lagih emoji-awesome. Salah satu trik jika ingin membuat emotikon tanpa menggunakan javascsript, full CSS dan image doang B-)

Salah satu andalan bahan untuk postingan di blog ini adalah mengenai HTML Editor Saya tidak bosan² berburu terus sampe bosan =)) Menclok di blogsite www.bachors.com, silahkan sobat kunjungi sekedar melihat-lihat. Ican Bachors lumayan punya proyek/coding yg bisa kalian comot :D Ini salah satunya

Code Sandbox Fiddle

code-sandbox-fiddleKalau kurang, silahkan dipilah-pilih saja mau yg mana:
  • jstinker by eakman.
  • jstinker by johncipponeri.
  • Tiny-editor by lipten.
  • codeFiddle by sw4.
Saya sendiri sudah buatkan satu Try it Editor hasil nyomot buat kalian, itu juga kalau mau ;))

editor.javascriptkit.comSebenarnya kepunyaan javascriptkit.com :D Gue hanya ngedit sana-sini biar sedikit full style. JavaScript Kit Try-It-Yourself code editor di bangun menggunakan the high performance code editor for the web is ACE. Saya nemu ini juga danielsadventure.info/HTML5FileDemo/SaxonInterface.html gak tauk buat apaan. Ke dua tools tersebut bisa sobat miliki secara gratis :(|)

Download editor.javascriptkit.com via Google Drive.
Password .7z 2%!7%!-ZQBe^4g&K

Ini mah cuma iseng saja, silah cari ada tools apa saja di site ini Index of /, kalau ketemu bisa kalian miliki =))

Bai bay...:-h

1 Komentar WTF
Ketika sobat mengunjungi web codepen, coba tengok halaman fork, project atau new code. Begitupun coba biasakan oleh kalian ketika menyatroni web github, acak-acak halaman Repositoriesnya. Memang butuh waktu santai kalau mau melakukan itu semua ;)) Oke, saya akan berbagi karya cipta dari hasil mengacak-ngacak one repositories page git-hub by victornpb! This is the page victornpb (Victor) repositories. AA Koben menemukan ini urlchecker! Karena tidak ada demo page, maka saya download dulu, tampaklah seperti ini:urlcheckerNamanya urlchecker, mungkin tujuan kreasi itu adalah untuk mengecek url apakah masih aktif/tidak yang akan tampil di dalam konten iframe. Dulu saya pernah membuat hal serupa (menampilkan web pada kolom frame meny style), tetapi lupa judul postingannya :D
Dikarenakan tampilan url-checker masih polos, saya coba memasukan bootstrap by bootstrapious. Ternyata cukup memusingkan harus tahu selector, description, identify bla-bla-bla untuk membuatnya #:-S Hasil akhir urlcheckerFitur apa saja yang gue tanamkan di sana...hohoho :-"
Encode-DecodeMini CodePen in 439 Bytes get from Tommy Hodgins.codegolfIDEcodegolfIDEmarkdownmarkdown-herebrowserpadjQuery MiniColors

Itulah fitur-fitur yg gue cekokin, di samping fitur tersembunyi lainnya! Apakah sobat tertarik memiliki itu semua? Silahkan beli seharga $1 billion =)) Download saja, kemudian silahkan kalian tes-tes dan pelajari sendiri karyaku ini :-B
Download here urlchecker modification by Beben-Koben URLchecker-Project.7z - Google Drive.

Kalau websitenya pakai anti iframe, tidak akan muncul, dan kalau ada website yang memasang ikaln popup akan terdeteksi, sobat tinggal pencet tombol TAB pada keyboard untuk mengizinkan.

BONUS

To-do List with animated interactions - Text Image Mosaic - Menu - Radio Button Group with Gradient - Image loading effects [background-size: 0, :before, :after] - CSS Mega Menu - CSS 3d box - editable content - Product Template powered with Bootstrap - Pure CSS Drag & Drop - Morphing Fullscreen Navigation Menu [~60fps animation]

Tunggu karya-karyaku yang lainnya okeee *-:) :-h