Jumat, 27 Juni 2014

Download Pelajaran Tajwid ilma95 Offline

ilma95Sudah sepatutnya kita panjatkan rasa syukur yang sebesar-besarnya kepada Alloh Subhaanahu Wa Ta'ala, yang masih memberikan nikmat umur kepada kita sekalian. Semoga dengan sisa umur kita yg sekarang, kita masih diberi kesempatan bertemu dengan 1 bulan mulia yg penuh dengan rahmat-Nya yakni bulan ramadhan. Serta tak lupa kita curahkan shalawat dan salam kepada junjungan alam nabi & rasul terakhir Rasululloh Muhammad Shallallahu 'Alaihi Wa Sallam beserta keluarga, sahabat dan pengikutnya hingga akhir zaman.

Salah satu kemuliaan di dalam bulan ramadhan seperti yg sudah kita ketahui bersama, pada bulan tersebut telah diturunkannya kitab suci mulia umat Islam Al Qur'an Al Kariim (Nuzulul Quran). Mari sobat sebagai blogger taqwa, isi bulan yg penuh dengan bonus pahala dengan memperbanyak membaca Al-Qur'an. Lebih hebat lagi mentadaburi isinya dan mengamalkannya pada kehidupan sehari-hari O:-)
Supaya membaca Al Qur'an kalian pada lancar alias tartil, maka dari itu harus tau aturan maennya! Beberapa aturan dalam membaca Al-Qur'an adalah: paham tajwid, tau huruf hijaiyah, tanda-tanda baris, bentuk-bentuk huruf, makhraj huruf, sifat-sifat huruf, hukum bacaan,...etc.

AA Koben dapat satu web yg mengkemas pelajaran tajwid dengan tampilan & navigasi sederhana agar enak dalam membaca.

www.ilma95.net/tajwid.htm

Setelah mengambil seluruh source n file yg ada pada web tersebut, gue melakukan satu misi penting lagi yakni meminta izin kepada empunya agar bisa di sěring 'n kêring secara offline.
Izin pun diberikan ;)) :">gmail
Sederhana, bahasa lugas, contoh ayat beserta file .mp3 ready, mungkin satu kelebihan yg dimiliki web ini. Bagi sobat yg kepengen memliki web pelajaran tajwid situs keluarga ilma95 [erman, ema malini, fadhil ilma, ihsan ilma & salsabila saumi ilma] offline, monggo dihajar bleh :D

Via Ziddu: downloads.ziddu.com/download/23861321/ilma95.net-tajwid.zip.html

Via 4share: www.4shared.com/zip/LDOq_p92ba/ilma95net-tajwid.html

Password: www.ilma95.net/tajwid.htm

Dengan tidak mengurangi rasa hormat, Koben sudah menghilangkan beberapa bagian HTML yg terasa memberatkan size file ;) Semoga dengan adanya apps embed .html pelajaran tajwid, sobat semakin tartil dalam membaca Al-Qur'an. Semoga empunya situs dapat pahala :) gue mah dapat capeknya saja lah :))
Akhirul kalam...Wassalamu'alaikum Warahmatullãhi Wabarakãtuh.

Happy iqra` \m/

Diposting oleh di Tidak ada komentar:
Label: , , , ,
Lokasi: Bandung, West Java, Indonesia

Rabu, 25 Juni 2014

Add Splash Opening Page use CSS input

Kita adalah umat muslim. Telah dipilih Islam sebagai agama satu-satunya yang diridhoi oleh Allah Subhaanahu Wa Ta’alaa. Telah dipilih hari besar kita yaitu hari jum'at, dan telah dipilihkan penghulunya bulan, bulan istimewa bagi umat Islam yakni bulan Ramadhan. Bulan yang didalamnya terdapat berlimpah-limpah keutamaan, antara lain diturunkannya Al-Quran, ditutupnya pintu neraka dibukanya pintu syurga, ...and satu malam kemuliaan yg lebih baik dari seribu bulan Lailatul Qadar.
... Pada hari ini telah Kusempurnakan untuk kamu agamamu, dan telah Ku-cukupkan kepadamu nikmat-Ku, dan telah Ku-ridhai Islam itu jadi agama bagimu. ...Al Maa'idah : 3
Hari jum’at adalah penghulu hari-hari dan hari yang paling mulia di sisi Allah, hari jum’at ini lebih mulia dari hari raya Idhul Fitri dan Idul Adha di sisi Allah, pada hari jum’at terdapat lima peristiwa, diciptakannya Adam dan diturunkannya ke bumi, pada hari jum’at juga Adam dimatikan, di hari jum’at terdapat waktu yang mana jika seseorang meminta kepada Allah maka akan dikabulkan selama tidak memohon yang haram, dan di hari jum’at pula akan terjadi kiamat, tidaklah seseorang malaikat yang dekat di sisi Allah, di bumi dan di langit kecuali dia dikasihi pada hari jum’at.HR. Ahmad
(Beberapa hari yang ditentukan itu ialah) bulan Ramadhan, bulan yang di dalamnya diturunkan (permulaan) Al Quran sebagai petunjuk bagi manusia dan penjelasan-penjelasan mengenai petunjuk itu dan pembeda (antara yang hak dan yang bathil). Karena itu, barangsiapa di antara kamu hadir (di negeri tempat tinggalnya) di bulan itu, maka hendaklah ia berpuasa pada bulan itu, dan barangsiapa sakit atau dalam perjalanan (lalu ia berbuka), maka (wajiblah baginya berpuasa), sebanyak hari yang ditinggalkannya itu, pada hari-hari yang lain. Allah menghendaki kemudahan bagimu, dan tidak menghendaki kesukaran bagimu. Dan hendaklah kamu mencukupkan bilangannya dan hendaklah kamu mengagungkan Allah atas petunjuk-Nya yang diberikan kepadamu, supaya kamu bersyukur.Al Baqarah : 185
Mari kita sambut bulan ramadhan dengan gaya blogger \m/ Master Adhy Suryadi sudah membuatkan satu tutorial cuamik, membuat pesan pembuka ketika masuk blog www.kompiajaib.com/2014/06/membuat-pesan-pembuka-ketika-masuk-blog.html

Gue sudah melakukan optimasi kode, silahkan masukan semua bumbu ► Add a Gadget ► HTML/JavaScript

<div id='welcomeoverlay' onclick='document.getElementById( &quot;welcomebox&quot; ).style.display=&quot;none&quot;;welcomeoverlay.style.display=&quot;none&quot;;'/>
<div id='welcomebox'>
<p>&#8220;Marhaban Ya Ramadhan&#8221;<br/>
Saya, NAMA SOBAT selaku admin mengucapkan...<br/>
&quot;Selamat menunaikan ibadah shaum,<br/>
semoga kita selalu diberkahi di bulan yang penuh berkah ini...amin.&quot;</p>
</div>
<style>
#welcomebox{position:absolute;top:5%;left:3%;width:70%;z-index:1000;text-align: left}
#welcomebox p{color:#fff;font-size:150%;line-height:1.6em;margin:-5px 0 50px;}
#welcomeoverlay {position:fixed;z-index:9999;top:0px;right:0px;bottom:0px;left:0px;background:#005629 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbo7wKwi0VDsiGD_Ubpz1n9qhaZNBViEGWKoroMvC9K7ttgVfod2e_FvYicLzcfOSZvQoBdvZUYXQAkj-Nk1a3WXpaq2TWhhvfNQHoXHuYzwua0x65wzSiGxTaEDhk8wYM89Nf5G2CkyqF/s1600/Wallpaper.jpg) no-repeat top center;}
</style>
Gantikan tulisan NAMA SOBAT dengan nama anda!

Koben buat juga satu tut guna menyambut bulan shaum ramadhan. Cari tagging <body> Tepat dibawahnya masukan syntax berikut<input type="checkbox" id="is_loading" checked="true"/>
<label id="load_switch" for="is_loading"></label>
<article>Kemudian cari tagging </body> Tepat diatasnya masukan syntax brkt <section id="loader">
<div id="loading_animation"></div>
<div id="message"></div>
</section>
</article>Setelah melakukan itu semua, cari kembali kode </b:skin> Masukin bumbu CSS brikut...

#is_loading {
 display: none;
}
#load_switch {
 position: fixed;
 z-index: 10;
 bottom: 5px;
 right: 5px;
 height: 32px;
 width: 75px;
 background-color: #539B9F;
 line-height: 32px;
 text-align: center;
 border-radius: 5px;
 cursor: pointer;
}
#load_switch:before {
 display: block;
 content: "Buka";
}
#is_loading:checked+#load_switch {
 background-color: #539B9F;
}
#is_loading:checked+#load_switch:before {
 content: "Tutup";
}
#loader {
 position: fixed;
 height: 100%;
 width: 100%;
 top: -100%;
 background-color: rgba(0,0,0,0.9);
 opacity: 0;
 z-index: 1;
 -webkit-transition: opacity 0.5s ease-in-out 0.5s, top 0s ease 1s;
 transition: opacity 0.5s ease-in-out 0.5s, top 0s ease 1s;
}
#is_loading:checked~article #loader,#is_loading_done:checked~article #loader {
 top: 0;
 opacity: 1;
 -webkit-transition: opacity 0.5s ease-in-out, top 0s ease 0s;
 transition: opacity 0.5s ease-in-out, top 0s ease 0s;
}
#is_loading:checked~article #loading_animation {
 -webkit-transform: none;
 transform: none;
}
#is_loading:checked~article #loading_animation,#is_loading:checked~article #loading_animation>div:after {
 background-color: #111;
 opacity: 1;
}
#message {
 position: absolute;
 height: 100px;
 width: 100%;
 top: 50%;
 margin-top: -50px;
 font-size: 24px;
 color: #539B9F;
 line-height: 100px;
 text-align: center;
 z-index: 100;
}
#message:before {
 content: "Maafkan Lahir & Bathin Yaaa ^_^!";
}
#is_loading:checked~article #message:before {
 content: "Selamat menunaikan ibadah shaum \a
 Semoga amal shaum kita diterima Alloh Subhaanahu Wa Ta'ala";
 white-space: pre;
 line-height: normal;
}
CSS tingkat master :D
Source code by: jsdo.it/blogparts/2LtN?view=css

Maafkan lahir dan bathin O:-)
Diposting oleh di Tidak ada komentar:
Label: , , , , ,
Lokasi: Bandung, West Java, Indonesia

Senin, 23 Juni 2014

Envelope Subscribe Feed Box For Blogger

Sebenarnya Koben belum meminta izin untuk sharing tutorial berikut kepada empunya blog :"> Tapi gue yakin, bakalan tidak keberatan kalau saya share ;)) Make subscribe box alias membuat kotak berlangganan via email dengan gaya tampilan amplop, dan ketika disorot akan keluar kotak langganan via email! Memang rada sulit menerangkan kode-kode ke bentuk kalimat :D
Beberapa tut serupa siapa tauk berkenan bagi anda:Okay, mari kita buat envelope subscribe feed box for blogger. Berikut ini ramuan & bumbu kotak langganan dengan tema amplop plus animasi CSS on hover.envelope-subscribe-feed-box
#wrap_amplop {
width:530px;
margin:20px auto 0;
}
#form_wrap {
overflow:hidden;
height:446px;
position:relative;
top:0;
-webkit-transition:all 1s ease-in-out .3s;
transition:all 1s ease-in-out .3s;
}
#form_wrap:before {
content:"";
position:absolute;
bottom:128px;
left:0;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRfiAFjz7lQHbYBm9Tsa5QfC3NJ5PAdVJDJABUDM6SlODKpcfzioQ54ODu2IUC0zOcglvwOdwhSyqeFSlmK2aVis2fi9A56Was5nNvBRjW5OiEYBi85LGyMAud0KKbTkrCGdp_ERutLWo/s1600/before.png');
width:530px;
height:316px;
}
#form_wrap:after {
content:"";
position:absolute;
bottom:0;
left:0;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe6P5UBsO2nHSTuC0nUfPdnSRDZnJkvZ_LfoZFRh2JbgYtfyLuBhuAGOHAHYZeQcCFbAUI86oDWx9W5SvqLi13xzP7GH9LOFwwcFrZmF4K6JwNTrUtX7v4MpdmX9cb0OYHsAj8Cg4sdUE/s1600/after.png');
width:530px;
height:260px;
}
#form_wrap.hide:after,#form_wrap.hide:before {
display:none;
}
#form_wrap:hover {
height:777px;
top:-200px;
}
#form_wrap form {
background:#f9f3eb;
position:relative;
top:200px;
overflow:hidden;
height:190px;
width:400px;
margin:0 auto;
padding:25px 30px;
border:1px solid #fff;
border-radius:3px;
-webkit-border-radius:3px;
box-shadow:0 0 3px #9d9d9d,inset 0 0 27px #fff;
-webkit-box-shadow:0 0 3px #9d9d9d,inset 0 0 27px #fff;
-webkit-transition:all 1s ease-in-out .3s;
transition:all 1s ease-in-out .3s;
}
#form_wrap:hover form {
height:400px;
}
#form_wrap label {
margin:11px 20px 0 0;
font-size:16px;
color:#b3aba1;
text-transform:uppercase;
text-shadow:0 1px 0 #fff;
}
#form_wrap input[type=text] {
display:inline-block;
color:#777;
background-color:#fff;
width:70%;
height:36px;
padding:0 10px;
margin:0 0 0 17px;
border:1px solid #f8f5f1;
-webkit-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:inset 0 0 1px #b3a895;
box-shadow:inset 0 0 1px #b3a895;
}
#form_wrap input[type=submit] {
position:relative;
width:20%;
height:33px;
opacity:0;
background:-webkit-gradient(linear,0% 0%,0% 100%,from(rgb(255,255,255)),to(rgb(221,221,221)));
cursor:pointer;
color:#333;
text-decoration:none;
text-align:center;
display:inline-block;
border:solid 1px #ddd;
-webkit-border-radius:2px;
border-radius:2px;
-webkit-transition:opacity .6s ease-in-out 0s;
transition:opacity .6s ease-in-out 0s;
}
#form_wrap:hover input[type=submit] {
z-index:1;
opacity:1;
-webkit-transition:opacity .5s ease-in-out 1s;
transition:opacity .5s ease-in-out 1s;
}
#form_wrap:hover input:hover[type=submit] {
color:#435c70;
}
<div id='wrap_amplop'>
<div id='form_wrap'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=YOUR-ACCOUNT", "popupwindow", "scrollbars=yes,width=550,height=520"); return true' target='popupwindow'>
<div align='center'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUvUsIiqPN0qwx502AoGaAqMJy9XMM67nyAhQKSVpTwRDtK8z5Wdc33s_Svoo2mmW4KvMtgbDrVImBrK1WCmr0FiMDKbV7hO_ziQsn3r0HwjByywRgy1iZITa_ZKn_BYYywVf8HJjMwXM/s1600/RSS.png' style='width:200px; height:160px;'/><p>Subscribe to my feed and articles delivered to your inbox or feed reader, ABSOLUTELY FREE!</p></div>
<input id='email' name='email' placeholder='Your.Name@email.com' required='' type='text'/><input name='submit' onClick='javascript:alert("Thank you for Signup, Go to your mailbox and click on confirmation link!");' type='submit' value='Go'/>
<p align="center">Now, Sign up for get free email updates, Thanks!</p>
<input name='uri' type='hidden' value='YOUR-ACCOUNT'/>
<input name='loc' type='hidden' value='id_ID'/>
</form>
</div>
</div>
Jika kepengen melihat demo, silahkan datangi web master Pawan Mall www.pawanmall.net. Nanti kalian juga bakal menemukan artikel game super mario bros yg bisa dimainkan pada browser engine!

Thanks master Pawan Mall :)

Diposting oleh di Tidak ada komentar:
Label: , , , , , , ,
Lokasi: Bandung, West Java, Indonesia

Jumat, 20 Juni 2014

Add HTML Table Sholat n Free Download Lorem Ipsum

Sebentar lagi kita sebagai umat Rasulullah Muhammad صلى الله عليه و سلم di belahan dunia manapun, sebagai muslim & muslimat diwajibkan melaksanakan ibadah shaum Ramadhan. Mari kita bersiap-siap menyambut kedatangan bulan paling mulia, dimana Alloh سبحانه و تعالى‎ dengan kasih sayang-Nya membukakan pintu langit, dan menutup pintu neraka. Bersihkan diri kita, rendahkan diri kita dihadapan Alloh سبحانه و تعالى‎ Bukakan pintu maaf bagi sesama, dengan tujuan akhir mendapatkan kemenangan yang hakiki.
Bagi sobat blogger yg mau memasang kode HTML tabel jadwal sholat untuk Bandung dan sekitarnya, silahkan di copy/paste saja bumbu berikut!Source by: rukyatulhilal.org/imsakiyah/index.php?id=21

Sebagai bonusnya AA Koben sudah membuatkan tools lorem ipsum dengan penggunaan kata/kalimat dari Asmaul Husna, nama surat dan terjemahan Al-Qur'an :)

Gue sudah buatkan 3 jenis ipsum-ipsuman, lorem, GenomeIpsum and downton-ipsum. Berikut resource kalau sobat mau membuat sendiri:

  • github.com/oliverdodd/jslorem
  • github.com/jacoblwe20/wowipsum
  • github.com/Erik-J-D/Genome-Ipsum
  • github.com/euangoddard/holder-ipsum
  • github.com/starquake/derpinator
  • github.com/alignedleft/downton-ipsum
  • github.com/polevaultweb/DeLorean-Ipsum
Download...
Via 4shared www.4shared.com/zip/wtH7NTprba/Lorem_Ipsum.html
Via Ziddu downloads.ziddu.com/download/23849904/Lorem-Ipsum.zip.html

Beben Koben si bloglang anu ganteng kalem tea mengucapkan
Tiada kata seindah dzikir, tiada hari seindah hari Ramadhan. Untuk itu ijinkan kedua tangan bersimpuh maaf untuk "insan yang tak terjaga", "janji yang terabaikan", "hati yang berprasangka & semua sikap yang pernah menyakitkan", maaf lahir & bathin, selamat menunaikan" ibadah shaum.
Marhaban Ya Ramadhan O:-)
Diposting oleh di Tidak ada komentar:
Label: , , , ,
Lokasi: Bandung, West Java, Indonesia

Selasa, 17 Juni 2014

Converts Image Into HTML Table

Apakah sobat masih ingat dan kenal dengan web img to css! Web yang berjasa melakukan convert gambar menjadi bahasa CSS. HTML yg dihasilkan dari hasil converter tersebut berupa HTML table. Dahulu sangkin penasaran, AA Koben sampai register untuk mengetahui bagaimana sih hasil akshirnya ;)) Karena dibatasi dalam melakukan convert, karena you can buy 2 conversions for a dollar tapi mendukung akan API key :P Sebelumnya gue pernah berbagi juga convert image to css, html application. Namun hasil generate dari aplikasi tersebut berupa properti box-shadow yg dijubeli dengan buanyak's kode warna #-o

Saya menemukan apps yg sama dengan imgtocss, dimana hasil generator sama berupa property table ;)) TETAPI perbedaan mencolok terlihat pada jumlah karakter & kata @-)
Screenshot perbandingan dengan gambar yg sama!image-to-css-tableAje gile tenan brooo...

Bagi sobat yg berminat silahkan kunjungi halaman codepen.io/johndjameson/pen/qcaAm Klik tombol Share ► pilih Export.zip
Hati-hati dalam melakukan konversi!!!
Any images larger than 256 x 256 have a pretty good chance of slowing down your browser and/or crashing it. Don't say I didn't warn you!John D. Jameson
Bonus: codepen.io/teolitto/pen/cdxFm - codeb.it/fonticonpicker

Happy CSS \m/

Diposting oleh di Tidak ada komentar:
Label: , , , ,
Lokasi: Bandung, West Java, Indonesia

Sabtu, 14 Juni 2014

Make Beautiful Tag Input

Koben akan melakukan update artikel dengan tema seputaran the input tag! Jika diperhatikan dengan seksama tag input ternyata memiliki kelebihan tersendiri. Dengan majunya bahasa style-sheet, telah jebol banjir trik tutorial menggunakan tag input itu sendiri :) Silahkan searching pd kotak pencarian dengan keyword input maka akan tampak tutorial full stylish punya :D So, are you ready to start the adventure today :)) Anda ingin memasang plugin jQuery add clear skorecky.github.io/Add-Clear Ketika mengetikan sesuatu di dalam kotak, tombol ✖ (clear) akan muncul. Full menggunakan CSS how to make CSS form validation codepen.io/benschwarz/pen/HBrDJ, sobat dapat mengcustomize kode yg sudah ada agar lebih keren.

Fancy text imputs use CSS. Coba ketikan apapun di dalam kotak!Source by: codepen.io/abergin/pen/jIplf
Itu di buat dengan bahasa CSS modus SASS! Lakukan klik tombol mirip gambar mata dgn title Toggle Compiled View pada kotak kode tujuan. Kalau pusing disini ajah.

.kotax button, .kotax .question label, .kotax .question input[type="text"] {
-o-transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
-webkit-transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
}
.kotax {
position: relative;
display: inline-block;
max-width: 700px;
min-width: 500px;
box-sizing: border-box;
padding: 30px 25px;
background-color: white;
border-radius: 10px;
border: 1px solid #aaa;
margin: 40px 0;
left: 50%;
-ms-transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.kotax button {
margin-top: 35px;
background-color: white;
border: 1px solid #ff4a56;
line-height: 0;
font-size: 17px;
display: inline-block;
box-sizing: border-box;
padding: 20px 15px;
border-radius: 10px;
color: #ff4a56;
font-weight: 100;
letter-spacing: 0.01em;
position: relative;
z-index: 1;
}
.kotax button:hover, form button:focus {
color: white;
background-color: #ff4a56;
}
.kotax .question {
position: relative;
padding: 10px 0;
}
.kotax .question:first-of-type {
padding-top: 0;
}
.kotax .question:last-of-type {
padding-bottom: 0;
}
.kotax .question label {
transform-origin: left center;
color: #ff4a56;
font-weight: 100;
letter-spacing: 0.01em;
font-size: 17px;
box-sizing: border-box;
padding: 10px 15px;
display: block;
position: absolute;
margin-top: -40px;
z-index: 2;
pointer-events: none;
}
.kotax .question input[type="text"] {
appearance: none;
background-color: none;
border: 1px solid #ff4a56;
line-height: 0;
font-size: 17px;
width: 100%;
display: block;
box-sizing: border-box;
padding: 10px 15px;
border-radius: 10px;
color: #ff4a56;
font-weight: 100;
letter-spacing: 0.01em;
position: relative;
z-index: 1;
}
.kotax .question input[type="text"]:focus {
outline: none;
background: #ff4a56;
color: white;
margin-top: 30px;
}
.kotax .question input[type="text"]:valid {
margin-top: 30px;
}
form .question input[type="text"]:focus ~ label {
-ms-transform: translate(0, -35px);
-webkit-transform: translate(0, -35px);
transform: translate(0, -35px);
}
.kotax .question input[type="text"]:valid ~ label {
text-transform: uppercase;
font-style: italic;
-ms-transform: translate(5px, -35px) scale(0.6);
-webkit-transform: translate(5px, -35px) scale(0.6);
transform: translate(5px, -35px) scale(0.6);
}
<form class="kotax">
  <div class="question">
    <input type="text" required/>
    <label>First Name</label>
  </div>
  <div class="question">
    <input type="text" required/>
    <label>Last Name</label>
  </div>
  <div class="question">
    <input type="text" required/>
    <label>Email Address</label>
  </div>
  <div class="question">
    <input type="text" required/>
    <label>Email Confirm</label>
  </div>
  <button>Submit</button>
</form>
Bonusnya bray:
  • Text input love.
    • codepen.io/MichaelArestad/pen/ohLIa
  • Single input 3D form.
    • thecodeplayer.com/walkthrough/single-input-3d-form
  • Animating float labels using jQuery and CSS3.
    • thecodeplayer.com/walkthrough/animating-float-labels-jquery-css3
  • Create fancy contact form with CSS 3 and jQuery.
    • youhack.me/2010/07/22/create-a-fancy-contact-form-with-css-3-and-jquery
Segitu saja informasi tentang dunia tag input. Sebenarnya banyak sekali rujukan yg bisa kalian lihat. Karena keterbatasan niat gue, jadi cuman itu lah 3:-O

Happy input \m/

Diposting oleh di Tidak ada komentar:
Label: , , , , ,
Lokasi: Bandung, West Java, Indonesia

Jumat, 13 Juni 2014

Popbox Spoiler with Blurred Effect

Ada tutorial anyar nih sob mengenai tutorial membuat spoiler. Dengan majunya bahasa CSS, maka spoiler dapat dibuatkan dengan attribute CSS doang click CSS input is like spoiler! Tapi spoiler yg baru sekarang ditambahkan sedikit dengan sentuhan jQuery script dan blurred text (text-shadow) Jadi kreasi blurred text spoiler by Adam Dillon pas banget untuk menyembunyikan kata-kata rahasia/terlarang karena ada efek ngeblur gitoooh :D
.spoiler {
width: 50%;
margin: 0 auto;
cursor: pointer;
position: relative;
font-size: .9em;
}
.spoiler.on {
color: rgba(0, 0, 0, 0);
text-shadow: 0 0 10px #000;
}
.spoiler.on:before {
content: 'Show Spoiler Text';
position: absolute;
text-shadow: none;
color: #fff;
width: 140px;
height: 28px;
line-height: 28px;
text-align: center;
left: 50%;
top: 50%;
background-color: #233870;
margin-left: -70px;
margin-top: -14px;
}
<div class="spoiler on">

------- ADD YOUR TEXT HERE -------

</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
  $(document).on('click', '.spoiler', function() {
    $(this).removeClass('on');
  });
});
//]]>
</script>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Source: codepen.io/asdillon/pen/lGnaL

Sip blurrr :-bd

Diposting oleh di Tidak ada komentar:
Label: , , , ,
Lokasi: Bandung, West Java, Indonesia

Rabu, 11 Juni 2014

Sassmatic be Like This!!!

Kekurangan dan kelebihan dalam dunia web browser besar kecilnya turut andil mendukung para developer menunjukan kabisanya! Semakin canggih fitur yang ditawarkan belum tentu memenuhi kebutuhan para pemakai. Kekurangan yg terdapat pada sebuah mesin penjelajah web bisa ditutupi dengan semakin canggihnya koding/script yg tercipta. Point utama tidak lepas dari kita sbg user (pemakai) mengakali or memakai fasilitas (feature) yg ada atau belum ada :D Pusing² dengan opening post gue :))

Seperti kita ketahui bersama browser mozilla belum bisa mendukung terhadap beberap fitur yg sudah ada pada browser lain (google chrome) Salah satu contoh adalah fitur CSS image filter pada mozilla masih masih sukar dalam penulisan kode! Oleh karena itu maka dibantu dengan penulisan syntax svg.

  1. Trick CSS filter effects for mozilla.
  2. Snippet inline CSS filter code for mozilla.
  3. Snippet inline CSS filter for mozilla ii.
AA Koben dapat satu referensi lagi, bagaimana cara supaya gambar dikasih sentuhan trik SCSS mixin library! Ternyata setelah dibandingkan dengan chrome, hasil sangat berbeda :D Dari 14 contoh yg terlihat perubahan efeknya, pada browser mozilla cuma 11 yg tampak berubah. Dan perubahan hasil efekpun jadi melencong dari judul yg ditetapkan ;))

Efeknya jadi begitu x_x
Source: github.com/darbybrown/sassmatic or codepen.io/hugo/full/atpFx (buka pakai google chrome)
Diposting oleh di Tidak ada komentar:
Label: , , , ,
Lokasi: Bandung, West Java, Indonesia

Sabtu, 07 Juni 2014

Install Script Ouibounce to Blogger

Dapat lagi artikel fresh and unique! Ouibounce memungkinkan kita untuk menampilkan sebuah modal/popup konten sebelum pengunjung meninggalkan blog/web anda. Membantu untuk meningkatkan tingkat konversi halaman arahan. Ouibounce ini sangat mudah untuk diinstal dan dilengkapi dengan fitur canggih, yang membantu sobat mengendalikan setiap aspek dari pengalaman pengguna. Itu penjelasan versi google translate singkat ceritanya versi AA begini...ouibounceBuka screenshot secara full-image, perhatikan tanda anak bawang, eh salah anak panah mksdx! Setiap kalian mengarahkan ke daerah tersebut (ketika mau menutup tab browser) maka akan muncul modal/popup karya master Carl Sednaoui :-"ouibounceDemo, source file, keterangan script bisa dilihat pada halaman sumber!
github.com/carlsednaoui/ouibounce

Cara memasukan ramuan Ouibounce ke dalam template blog sebenarnya sama dengan tutorial lainnya :D Jika bagi sobat yg sudah mempunyai konten modal/popup/lightbox sendiri, berarti tinggal memasangkan bumbu ouibouncenya saja! Koben akan membantu pemasangan seperti demo berikut jsfiddle.net/bebenkoben/A9uQn/show

#ouibounce-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-family: 'Open Sans', sans-serif;
}
#ouibounce-modal .underlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
cursor: pointer;
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#ouibounce-modal .modal {
width: 600px;
height: 400px;
background-color: #f0f1f2;
z-index: 1;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 4px;
-webkit-animation: popin 0.3s;
animation: popin 0.3s;
}
#ouibounce-modal .modal-title {
font-size: 18px;
background-color: #252525;
color: #fff;
padding: 10px;
margin: 0;
border-radius: 4px 4px 0 0;
text-align: center;
}
#ouibounce-modal h3 {
color: #fff;
font-size: 1em;
margin: 0.2em;
text-transform: uppercase;
font-weight: 500;
}
#ouibounce-modal .modal-body {
padding: 10px;
font-size: 0.9em;
}
#ouibounce-modal p {
color: #344a5f;
line-height: 1.3em;
}
#ouibounce-modal form {
text-align: center;
margin-top: 35px;
}
#ouibounce-modal form input[type=text] {
padding: 12px;
font-size: 1.2em;
width: 300px;
border-radius: 4px;
border: 1px solid #ccc;
-webkit-font-smoothing: antialiased;
}
#ouibounce-modal form input[type=submit] {
text-transform: uppercase;
padding: 12px;
font-size: 1.1em;
border-radius: 4px;
color: #fff;
background-color: #4ab471;
border: none;
cursor: pointer;
-webkit-font-smoothing: antialiased;
}
#ouibounce-modal form p {
text-align: left;
margin-left: 35px;
opacity: 0.8;
font-size: 0.9em;
}
#ouibounce-modal .modal-footer {
position: absolute;
bottom: 20px;
text-align: center;
width: 100%;
}
#ouibounce-modal .modal-footer p {
text-transform: capitalize;
cursor: pointer;
display: inline;
border-bottom: 1px solid #344a5f;
}
@-webkit-keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-ms-keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes popin {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
85% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@-ms-keyframes popin {
0% {
-ms-transform: scale(0);
transform: scale(0);
opacity: 0;
}
85% {
-ms-transform: scale(1.05);
transform: scale(1.05);
opacity: 1;
}
100% {
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes popin {
0% {
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
opacity: 0;
}
85% {
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
Letakan script Ouibounce di atas tag </head> Tetapi kalau mau mencoba di atas tag </body> boleh juga ;) Markup HTML dan script pemanggil letakan sebelum tagging </body>
<div id="ouibounce-modal">
    <div class="underlay"></div>
      <div class="modal">
        <div class="modal-title">
          <h3>Terima kasih sudah mampir!</h3>
        </div>
        <div class="modal-body">
          <p>Email Subscription Request</p><br>
          <p>Silahkan berlangganan artikel kami, tidak ada ruginya loh dan pasti kalian mendapatkan ilmu yang bermanfaat sekali!</p><br>
          <p>Tutup modal ini dengan mengklik "No Thanks" di bawah atau mengklik di mana saja di luar modal!</p>
<form action="http://feedburner.google.com/fb/a/mailverify?uri=beben-koben" method="post">
<input type="text" name="email" placeholder="Ketik email anda disini..." /> 
<input type="hidden" value="beben-koben" name="uri" />
<input type="hidden" name="loc" value="id_ID" />
<input class="button" type="submit" value="SUBCRIBE" />
</form>
     </div>
    <div class="modal-footer">
          <p>Tidak, Terima Kasih!!!</p>
  </div>
 </div>
</div>
 
<script>
var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
    aggressive: true,
    timer: 5,
    callback: function() { console.log('ouibounce fired!'); }
});
    $('body').on('click', function() {
    $('#ouibounce-modal').hide();
});
    $('#ouibounce-modal .modal-footer').on('click', function() {
    $('#ouibounce-modal').hide();
});
    $('#ouibounce-modal .modal').on('click', function(e) {
       e.stopPropagation();
});
</script>
Jika memang ingin memasang seperti yg di atas, maka ganti account feedburner beben-koben Ingat jquery script harus sudah terpasang, karena script panggilan pake teknik jquery. Untuk settingan script ouibounce sobat bisa baca di web sumber yah github.com/carlsednaoui/ouibounce. Karena AA tidak paham script ;)) :">

Isikan konten modal window sesuai dengan keperluan. Bisa kotak langganan via email, widget page facebook, pinterest embed photo or instagram, twitter gadget n etc.

Happy ouibounce \m/
Diposting oleh di Tidak ada komentar:
Lokasi: Bandung, West Java, Indonesia

Jumat, 06 Juni 2014

Selection of Links of ksk1015

Informasi postingan berikut bisa sobat jadikan ide, inspirasi atau bahkan projek! Dengan memakai nick ksk1015 with specification on friday, june 06, 2014...663 code, 405 forked, 350 favorite and 19 badge on jsdo.it Kalau sobat kepengen melihat itu semua silahkan tinggal kunjungi halaman jsdo.it/ksk1015 Koben sudah seleksi beberapa links, siapa tau berkenen bagi sodara-sodara ;)
Second shot first analog stopwatch with css
stopwatch with css
jsdo.it/ksk1015/vhfn
base64 data url generator
data url generator
jsdo.it/ksk1015/84Le
Input file preview
input file preview
jsdo.it/ksk1015/quxN
Capek juga mencari-cari screenshot, link saja yah :D Pilih² lalu pencet tombol downloadDownload

jsdo.it/ksk1015/mVo6 - jsdo.it/ksk1015/rf9p - jsdo.it/ksk1015/b9yc - jsdo.it/ksk1015/clxDj - jsdo.it/ksk1015/r7gC - jsdo.it/ksk1015/sMML - jsdo.it/ksk1015/g7r6 - jsdo.it/ksk1015/aQam - jsdo.it/ksk1015/fiuL - jsdo.it/ksk1015/aUVK - jsdo.it/ksk1015/recipe - jsdo.it/ksk1015/5WY1 - jsdo.it/ksk1015/bjLH - jsdo.it/ksk1015/vjRk - jsdo.it/ksk1015/mycode - jsdo.it/ksk1015/mE0i - jsdo.it/ksk1015/5Wlh - jsdo.it/ksk1015/qjxJ - jsdo.it/ksk1015/RxGA - jsdo.it/ksk1015/wOiZ - jsdo.it/ksk1015/6TvT - jsdo.it/ksk1015/fYGN - jsdo.it/ksk1015/3PHV - jsdo.it/ksk1015/4maT - jsdo.it/ksk1015/wUtX - jsdo.it/ksk1015/color - jsdo.it/ksk1015/kuzR - jsdo.it/ksk1015/5ApJ - jsdo.it/ksk1015/pkBJ - jsdo.it/ksk1015/wqVQ - jsdo.it/ksk1015/tCpN - jsdo.it/ksk1015/6UIo - jsdo.it/ksk1015/9erR - jsdo.it/ksk1015/a7uQ - jsdo.it/ksk1015/awkn - jsdo.it/ksk1015/frQ8 - jsdo.it/ksk1015/5biY

Bonus 2 biji

Social icon
social icon
jsdo.it/No_1026/qOYM
Retro Comments
input file preview
jsdo.it/Arbaoui.Mehdi/retro-comments-hover-icons
Semoga info pilihan AA dapat berguna bagi kalian semua sobat blogger.

Happy reading \m/

Diposting oleh di Tidak ada komentar:
Label: , , , ,
Lokasi: Bandung, West Java, Indonesia

Selasa, 03 Juni 2014

Free HTML Structure Visualization Tools

Biasanya AA Koben berbagi aplikasi page .html HTML live preview mungkin sekarang sudah saatnya gue beri kalian HTML structure visualization Original article sobat dapat membaca pada halaman jsdo.it/shirayuki/hJQB Demo fullpage jsrun.it/shirayuki/hJQB Visualization of the HTML merupakan perkembangan dari visualization of the JSON jsdo.it/shirayuki/a8DLH or jsdo.it/ogaoga/mlE0 Buat have fun mengisi waktu jenuh lumayan melihat generate markup HTML langsung akan terlihat preview dan yang paling sedap kalian dapat melihat visual struktur dari hasil generate :D Ngerti sukur gak ngerti harus bro :))

Visual dengan gaya DOM tree ini biasanya sering ditemukan pada JSON tutorial! Beben Koben si bloglang anu ganteng kalem tea selaku orang baik di alam dunia ini, sudah melakukan tweak and snippet code dari apps HTML structure visualization menjadi seperti berikut...Visualization-HTML-structureBuka screenshot gambar secara full! Perhatikan deretan angka 1 - 7 pada image. Karena itu merupakan opsi fiture yg sudah AA tambahkan, hasil mencomot kode/script yg sudah opensources :D

1 Mencari file.
2 Tombol Go! berfungsi untuk menampilkan.
3 Tombol Clear, membersihkan markup HTML (kotak atas)
4 Tombol HTML, tampilan fullscreen preview markup HTML.
5 Tombol Output, tampilan fullscreen preview visual struktur HTML.
6 Tombol ↻, reload page alias refresh keseluruhan.
7 Tombol Save Data, ya buat ngesave hasil editan anda :P

Download: downloads.ziddu.com/download/23813797/Visualization-of-the-HTML-structure.zip.html

Password: Beben Koben si bloglang anu ganteng kalem tea

Bonus buat iseng convert script to png jsdo.it/Lo-Th/UpGc ;))

BAY :-h
Diposting oleh di Tidak ada komentar:
Label: , , , ,
Lokasi: Bandung, West Java, Indonesia
Langganan: Postingan (Atom)