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

2 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

0 Komentar WTF
Di jaman sekarang yang serba instant, satu kebutuhan bisa dipenuhi dengan cepat. Tidak berbeda dengan dunia web-blog, sekarang sudah era framework, plugin, generator machines, softwares, click and drag services of the web or etc langsung deh jadi apa-apa yg kita inginkan ;)) Dampak paling terasa secara pribadi adalah hilangnya mood dan bahan ide untuk postingan blog.
Permulaan mosting setelah libur dari ramadhan 1437 H AA Koben cuma ingin berbagi link sources ringan tentunya fullstylish punya ;-)

Jika sobat senang dengan CSS Shake, nick elrumordelaluz from github sudah membuatkan CSShake. Sebelumnya gue sering berbagi trick dengan HTML input tag yg diimplementasikan untuk show/hide, accrodion, popup modal dsb. Ternyata ada trik lain dengan fungsi serupa namun dengan teknik berbeda! From bitsofco.de you can learned about The :target Trick. Khusus artikel The :target Trick saya sudah buatkan versi offline agar teman-teman dapat mempelajarinya secara khusuk :-B

Sebenarnya malas nerangin makanya aku buat versi offlinenya utk kalian :D Karena sources banyak dan pada menarik, silahkan sobat kunjungi sendiri halamannya dan lihat ada apa ajah di sana yooo :))

Download The :target Trick offline via 4shared - Pass:

Bonus:

images in forms - Simplistic Dialog - Pure CSS Link URL Preview - Dropdown Menus - CSS only menu - Isometric Social Buttons - Password Rules Validator - Word Counter - Draggable blur mask over image - Flexy Forms and Inputs - photo editor - "Table of Contents" bookmarklet - Unicode Alphabets ⌨ - Material Design Popup - Falling Letters - Use `:root` for Flexible Type - Yummy burger menu - Cool Layout with Complex Chainable Animation - Simple Responsive Modal Bootstrap Effects - Micro Interaction Button - Flat Modal Window - Content switching component with pure CSS - pbwwjA - HTML Appender - Overly simplistic CSS only slider - Background Big Text Crawl - React Palette Picker - ✦‿✦ - Pure CSS Minicart Dropdown - Show/Hide Tab using CSS with Radio Chekbox - /auto hiding navigation - MarkDownDiagram - monod - executor editor - awsm.css

Bye :-h

0 Komentar WTF
Berbicara tentang efek di dunia website memang susah habisnya. Selalu saja ada kreasi baru berdatangan dari para master koding! Apakah sobat pernah melihat film televisi jadul dengan gaya warna cuma hitam-putih dan terdapat garis-garis serta runyeum semut menyertai? Dalam dunia CSS hal seperti itu bisa dinamakan dengan CSS Cinema Effect, Film Grain Effect with CSS3 atau yg lain. Gue punya 2 link resource berbicara mengenai hal ini Creating a Film Grain Effect with CSS3 dan Pure CSS Cinema Effect.

Karena kurang kerjaan dan artikel unik lagi susah carinya plus nungguin berbuka puasa menahan lapar & dahaga, AA coba-coba gabungkan saja kode CSS dari kedua resource tersebut ;))
Untuk menerapkan efek cinema film terhadap gambar, sobat harus mempunyai 2 gambar ini terlebih dahulu (Lakukan Save As, lalu hosting masing²):

  1. Grain.PNG
  2. Scratch.PNG
DEMO

.grain {
width: 400px;
height: 300px;
display: block;
overflow: hidden;
margin: 3em auto;
position: relative;
transition: all 0.5s ease-out 0s;
}
.grain img {
max-width: 400px;
max-height: 300px;
width: 100%;
height: inherit !important;
}
.grain:hover,.grain:hover:after {
transform: scale(1.3);
background: transparent !important;
box-shadow: 0 0 3px #333;
}
.grain > * {
z-index: 2;
}
.grain:after {
background: url("Grain.PNG");
content: "";
left: -100%;
top: -103%;
width: 300%;
height: 300%;
z-index: 1;
display: block;
position: absolute;
animation: grain .5s steps(1) infinite;
-webkit-animation: grain .5s steps(1) infinite;
}
.grain span {
color: #fff;
display: block;
font-family: initial;
letter-spacing: 1px;
line-height: 10px;
position: relative;
text-align: center;
bottom: 25px;
text-align: center;
text-shadow: 0 3px 1px rgba(0, 0, 0, 0.4);
}
.outer-scratch, .inner-scratch {
height: inherit;
}
.outer-scratch:after, .inner-scratch:after {
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .09;
position: absolute;
padding-left: 100px;
animation: scratch 0.55s steps(1) infinite;
-webkit-animation: scratch 0.55s steps(1) infinite;
background: url("Scratch.PNG") repeat center center;
}
.inner-scratch:after {
left: 30%;
animation: inner-scratch 2s infinite;
-webkit-animation: inner-scratch 2s infinite;
}
@keyframes grain{0%,100%{-moz-transform:translate(0,0);-ms-transform:translate(0,0);-webkit-transform:translate(0,0);transform:translate(0,0)}10%{-moz-transform:translate(-5%,-10%);-ms-transform:translate(-5%,-10%);-webkit-transform:translate(-5%,-10%);transform:translate(-5%,-10%)}20%{-moz-transform:translate(-15%,5%);-ms-transform:translate(-15%,5%);-webkit-transform:translate(-15%,5%);transform:translate(-15%,5%)}30%{-moz-transform:translate(7%,-25%);-ms-transform:translate(7%,-25%);-webkit-transform:translate(7%,-25%);transform:translate(7%,-25%)}40%{-moz-transform:translate(-5%,25%);-ms-transform:translate(-5%,25%);-webkit-transform:translate(-5%,25%);transform:translate(-5%,25%)}50%{-moz-transform:translate(-15%,10%);-ms-transform:translate(-15%,10%);-webkit-transform:translate(-15%,10%);transform:translate(-15%,10%)}60%{-moz-transform:translate(15%,0%);-ms-transform:translate(15%,0%);-webkit-transform:translate(15%,0%);transform:translate(15%,0%)}70%{-moz-transform:translate(0%,15%);-ms-transform:translate(0%,15%);-webkit-transform:translate(0%,15%);transform:translate(0%,15%)}80%{-moz-transform:translate(3%,35%);-ms-transform:translate(3%,35%);-webkit-transform:translate(3%,35%);transform:translate(3%,35%)}90%{-moz-transform:translate(-10%,10%);-ms-transform:translate(-10%,10%);-webkit-transform:translate(-10%,10%);transform:translate(-10%,10%)}}
@keyframes scratch{0%,100%{transform:translateX (0);opacity:0.075}10%{transform:translateX (-1%)}20%{transform:translateX (1%)}30%{transform:translateX (-2%);opacity:0.09}40%{transform:translateX (3%)}50%{transform:translateX (-3%);opacity:0.05}60%{transform:translateX (8%)}70%{transform:translateX (-3%)}80%{transform:translateX (10%);opacity:0.02}90%{transform:translateX (-2%)}}
@keyframes inner-scratch{0%{transform:translateX (0);opacity:0.08}10%{transform:translateX (-1%)}20%{transform:translateX (1%)}30%{transform:translateX (-2%)}40%{transform:translateX (3%)}50%{transform:translateX (-3%);opacity:0.06}60%{transform:translateX (8%)}70%{transform:translateX (-3%)}80%{transform:translateX (10%);opacity:0.03}90%{transform:translateX (20%)}100%{transform:translateX (30%)}}
<div class="grain">
<div class="outer-scratch"><div class="inner-scratch">
<img src="LINK-IMAGE" alt=""/>
  <span>Keterangan or Kata-Kata</span>
</div></div>
</div>
BONUS:
Material Multi-Button Pure CSS - Drop the CAPS! 🎤🎤 - Too many icons... - A Pen by Stefan Göllner - CSS Animation/Transition Demos - Text Shadow Generator - Halftone Newspaper Effect with SVG Filters (Chrome) - pure CSS, 1 element crossbrowser reflection - The Matrix GIF Maker - 3D accordion (simple folding paper effect) - React Markdown Previewer - Form with a bunch of HTML5 Validation and CSS3 Help - jrreeJ reveal navigation - Css3 Transform - Invisible Ink | Mouse Over! iOS 10 - Expounder - Show container height/width using SVG - Social share urls
al-Quran

MISC

Resources

1 2 3 4 5 6 7 8 9

FACEBOOK PAGE