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
Mungkin kita sudah tidak asing lagi dengan istilah tooltip! Tapi apakah kalian sudah kenal dengan Toolgif? Sebuah jQuery plugin sederhana yang akan menampilkan gambar berformat GIF dalam format tooltip (judul atau title kala menyorot sesuatu yang di beri tag) :D Seperti yang kita ketahui, gambar dengan format GIF ini lumayan memakan waktu loading. Ada bijaknya di akali dengan trick ini. Sobat tidak perlu khawatir mencari-cari gambar gif-nya, soalnya toolgif ini layanan kreasi dari web giphy.com Giphy site bisa sobat pakai mau buat karya macam apapun, lihat coba halaman labsnya giphy.com/labs

Untuk bisa menggunakan layanan jasa tool-GIF, pada blog sobat sudah harus tertanam script jQuery.

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="toolgif.js"></script>
Cara pemakaiannya cukup mudah. Sobat tinggal sisipkan variabel <span class="toolgif">BLAH</span> Berikut beberapa syntax HTML yg bisa kalian pakai.

Default<p>I am a <span class="toolgif">test</span>.</p>Add your own gif by adding "data-url" in your html<p>Don't use <span class="toolgif" data-url="http://66.media.tumblr.com/0b05c6d462cfd59a25722c7843a12207/tumblr_ob8ivb32NO1v9gbpno1_400.gif">drugs</span>.</p><p>Do you wear <span class="toolgif" data-tag="deal with it">glasses</span>?</p>Set "data-place" value top or bottom. Default is top.<p>You see i am below the <span class="toolgif" data-place="bottom" data-tag="coding">text</span>.</p>Langkah terakhir panggil ke semua itu dengan Activate Toolgif
$(function() { 
$(".toolgif").toolgif(); 
});
You can customize them.
$(".toolgif").toolgif({
    width: 200,
    height: 100,
    speed: 200,
    borderRadius: 5,
    textColor: "initial",
    gifChange: true //If you make it false , one random gif limited by your tag will be found on Giphy.Gif won't change when you hover over your text again unless page reload is made.
});
Resource & demo by:
mburakerman.github.io/toolgif - github.com/mburakerman/toolgif - codepen.io/mburakerman/full/dXwgwN

Bonus:
Material floating button CSS - Fancy menu - Dropdown CSS animation examples - Action Button. Only CSS - yJRNoL - Search text highlight - Ripple Modal Effect

2 Komentar WTF
Ada beberapa update artikel bagi kalian pelanggan web dynamicdrive! Pada halaman dynamic drive CSS library coba tengok sendiri? Sekarang AA Koben mau berbagi pada halaman JavaScript pada web tersebut yang menceritakan bagaimana cara membuat zoom pada gambar dengan jQuery script ;) Proyeknya di beri nama dengan judul Zoomio jQuery in place Image Zoom. Bagi sobat yang ingin memasang fitur ini, konten blog harus banyak berkoar-koar dengan gambar yah :)) Sebelum ke acara tutorial, ada baiknya sobat baca-baca dulu trik serupa yg sudah pernah gue bahas cloud zoom on blog.
Like this...

cutebirds

Or...
Mila saha???

Please dont forget to read this css zoom and product magnification without JavaScript :-bd

Kenapa AA jatuhkan pilihan cara men-zoom image hasil karya dari tim dynamic-drive! Selain script dan CSS yg relatif sedikit (kecil), tetapi kita bisa membuat beberapa opsi pemakaian: standard demos, dynamically changing the zoomable image's src to create an image gallery & calling zoomio() more than once on the same image.

Silahkan sobat download terlebih dahulu bahan-bahannya di halaman zoomio.htm (zoomio.css & zoomio.js) Di dalam code CSS sobat buat lagi kode untuk mengatur lebar dan tinggi image!
#zoomiocontainer { /* container containing enlarged image (native sized image) */
 position: absolute;
 z-index: 1000;
 overflow: hidden;
 background: white;
 visibility: hidden;
}
#zoomiocontainer img { /* image inside zoom container */
 width: auto !important;
 height: auto !important;
 position: absolute !important;
 display: block !important;
}
#zoomiocontainer.mobileclass { /* CSS class added to zoom container on mobile OS */
 overflow: scroll;
 -webkit-overflow-scrolling: touch;
}

/* CONTOH KODE CSS CUSTOMIZE */
.sampleimage {
 width: 400px;
 height: auto;
}
.blur { 
filter: url(#blur-effect-1); 
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'blur-effect-1\'><feGaussianBlur stdDeviation=\'3\' /></filter></svg>#blur-effect-1");
-webkit-filter: blur(3px);
}
Kode CSS custom tersebut yg nanti akan di panggil dengan jQuery script?
<script type='text/javascript'>
jQuery(function($){ // on DOM load
 $('.sampleimage').zoomio({
  fadeduration: 450
 })
})
</script>
Syntax HTML seperti berikut<img class="sampleimage blur" src="LINK-GAMBAR" alt="" />Beres deh, dengan begitu sobat sudah mendapatkan trick zoomio versi standar. Kalau mau versi lainnya silahkan datang dan pelajari di source sumber

www.dynamicdrive.com/dynamicindex4/zoomio.htm

Waktu memosting free HTML tester with ACE feature saya kelupaan bonus link! Di sini saja deh bonusnya yah...

Hyro - popcode - jhc-webitor - htmleditor - html live editor - SimpleWebEditor - choped - Html5PreviewEditor - Code editor - edit - code player - qckMeddler - code bit - Editor - HTMLTester - htmledit - codePlayground - fiddly - fiddle - 1797 - htmlbook style editor - HTML HEX EDITOR - html2canvas - live - CodePlayer - MZMobileHtmlEditor - playground - kodeWeave - sandbox

See you :-h

0 Komentar WTF
Beben sebagai seorang pemburu (hunter) HTML editor, selalu berbagi kepada kalian para blogger sejati. Adapun pemberian nama berlainan akan tetapi tetap saja sebuah editor! Kalau sobat mau ngacak-ngacak ada editor apa saja yg sudah gue bagi silahkan search pada kotak pencarian blog akuh dengan keyword: try it editor, code editor, HTML editor, jsbin editor, editor with live preview or etc.
Gue dapat nemu satu lagi yang tidak kalah keren punya dari user github dengan nick ItsNot0ver dengan nama HTML Tester. HTMLTester diklem memiliki kemiripan dengan JSFiddle yg dulu!HTMLTesterKepengen itu you tinggal download saja di HTMLTester Using Ace Editor via GitHub. Saya hanya akan memberitahukan cara pakainya saja ;)) :"> Kalo mau DL versi gua, pantengin terus lanjut bacanya jangan bernafas!
Perhatikan screenshot berikut, kalau perlu save!HTMLTesterPada bagian sebelah kiri editor terdapat tombol HTML, CSS, JS & ALL. Secara default (reload page) tombol akan berada pd posisi ALL. Lakukan klik pada tombol terlebih dulu guna membuka file sesuai dengan jenisnya. Jika ingin membuka file dengan ekstensi .html klik dulu tombol HTML. Jika ingin membuka file dengan ekstensi .css klik dulu tombol CSS. Jika ingin membuka file dengan ekstensi .js klik dulu tombol JS. Nanti akan keluar input dengan label OPEN.

Keterangan tombol jajaran atas editor. Saya tidak akan memberikan screenshot gambar, tetapi akan saya berikan penjelasan sesuai dengan title ketika menyorot tombol yg di maksud. Soalnya saya sudah sisipkan tooltip sederhana menggunakan jQuery ;)

>> Refresh Clear Code: Menghapus kode secara menyeluruh tetapi tidak menghilangkan bagian preview.
>> Beautify Code: Menjadikan coded/script lebih biyuti (indah) or readable (mudah di baca).
>> Download and Save: Kegiatan menyimpan hasil kerja dengan default ekstensi .html
>> Reload Page: Melakukan refresh halaman secara menyeluruh.
>> Press it for See Result: Pencet tombol ini untuk melihat preview HTML, hasil setelah menulis kode pd bagian masing².
>> Real-time result update: Mengaktifkan tombol ini akan mematikan fitur tombol Press it for See Result. Editor akan langsung merender hasil pd kolom preview secara bersamaan ketika kita sedang menuliskan kode-kode!
>> Fullscreen Result: Fitur untuk melihat hasil kolom preview satu layar penuh dengan tombol tutup di bagian kanan atas.
>> Encode base64 Image: Fitur untuk menggenerate gambar ke format base64 komplit dengan tagging imagenya.
>> Generate Page URL: Generate link/url hasil kerja (berkerja jika kalian membuat editor ini secara online dan mandiri)

Pindah ke bagian bawah editor keterangan tombolnya adalah sebagai berikut. Tombol pada bagian ini (Push JS) berfungsi jika sobat akan bermain dengan script/jQuery. Ketika sobat menuliskan script pada kolom JAVASCRIPT opsinya ada di bagian ini. Kalau ingin bermain dengan jQuery or pluginnya maka harus diaktifkan terlebih dahulu bagian Include jQuery. Script plugin atau script pemanggil bisa sobat tuliskan/letakan pada kolom JAVASCRIPT.

Sedikit tambahan keterangan mengenai Insert JS at the...
Setelah menulis script pilihlah opsi Beginning, End, Head and Body. Kemudian lakukan pencet tombol Push JS, secara otomatis script akan langsung dipindahkan ke kolom tombol ALL / HTML.
Berikut contoh screenshot hasil AA Koben bermain dengan jQuery menggunakan HTML Tester!HTML%2BTesterSilahkan...

Download HTMLTester_gh_pages.zip in Ziddu downloads.ziddu.com/download/25449876/HTMLTester_gh_pages.zip.html
HTMLTester-gh-pages Unduh di 4shared www.4shared.com/zip/MYjXwjbTce/HTMLTester-gh-pages.html
Password:

Be a creative ;)

4 Komentar WTF
Update post dikit ah tentang tools dan pasti akan berguna bagi kalian para blogger yang suka bermain dengan koding-koding. Untuk nambah koleksi juga bisa loh! Walau disibukan dengan pekerjaan di dunia nyata dengan aktifitasnya di rumah sakit dan kesibukan di dunia maya dengan ulik-ulik code, master Taufik Nurrohman telah berbaik hati meluangkan waktu untuk membuat mini web tools bagi kita semua :)
Ada 12 tools yg sudah gue kumpulkan karya dia. Semua AA Koben bungkus dengan balutan tampilan meny karya master Hakim El Hattab. Kurang lebih jadinya akan mirip begini bro aplikasi HTML revealing CSS3 menu offline!

On screenshoot
mini-web-toolsSemua tools beroperasi secara offline ;)

Download Mini_Web_Tools_in_meny.zip in Ziddu: downloads.ziddu.com/download/25448251/Mini_Web_Tools_in_meny.zip.html
Mini Web Tools in meny unduh di 4shared: www.4shared.com/zip/xdxmJnSWce/Mini_Web_Tools_in_meny.html

Password: nama foldernya tanpa .zip

Resize image in browser with high quality and high speed nodeca/pica.

See you :-h
al-Quran

MISC

Resources

1 2 3 4 5 6 7 8 9

FACEBOOK PAGE