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

0 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

1 Komentar WTF
Gara-gara memosting tentang image tilt fffect CSS, saya jadi melanglang buana menjelajah! Ternyata kalau kita berbicara mengenai efek pada gambar, itu bisa termasuk juga ke dalam tutorial dengan tema image manipulation (manipulasi gambar) :D Salah satu javascript yang lumayan terkenal dalam urusan memanipulasi gambar adalah CamanJS.
Berikut beberapa sources kreasi yg memakai Caman-JavaScript:
  • CamanJS Interactive Examples.
  • CamanJS Filter Example.
  • Image Editor Demo Built with Caman.
Dari ketiga rujukan itu, ternyata tidak ada yg menyertakan fitur upload image dari local storage :-?? Saya jadi penasaran, dan mencoba-coba kasak-kusuk dengan modal nekat mencari cara bagaimana dari ke-3 source di atas digabungkan fitur-fiturnya plus fitur upload local image from your storage? Hasil akhir seperti berikut:CamanJSKarena saya pengguna sejati mozilla, karya ini hanya bisa di buka pada browser tersebut :D Soalnya kalau di buka di chrome ada perbedaan penulisan path yg mana saya malas alias tidak ngerti kinerja browser google chrome ;)) Bagi yg berminat mencoba dan mengembangkan silahkan download CamanJS 127 KB.
Tested on mozilla versi 42 & 52. Kalau kepengen yg lebih canggih dan keren punya juga ada kok! Let's cekidot...

jspaint

jspaint

miniPaint

miniPaint

webgl-filter

webgl-filter

pm-image-editor

pm-image-editor

JsImgEditor

JsImgEditor

nuophoto

nuophoto

jie

JIMP-Image-Editor

tui image-editor

tui.image-editor

summer

summer

iwage

iwage

imageeditor by ckm100

imageeditor

photo-editor

photo-editor

Sino Image Editor

SinoImageEditor

Image Editor by Tom Yuan

ImageEditorDemo

Html Image Editor

HtmlImageEditor

editest

editestHarap diperhatikan syarat-syarat yg berlaku baik itu file atau browser sobat sudah mendukung atau belum (canvas, webgl, etc). Satu lagi, karena ini permainan dengan si canvas, jangan coba-coba ngedit gambar dengan size yg besar kalau nggak mau browsernya nge hang yah >:)

Jangan tanya saya soal script, karena saya tidak mengerti sama sekali ^:)^


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE