Sudah lama AA Koben tidak memostingkan artikel bertemakan religi! Saatnya beramal sholih bagi seluruh blogger muslim di seluruh dunia o:-) Gue mau berbagi embed file .chm dan .htmlkisah nabi-nabi Allah Subhanahu Wa Ta'Ala. Khusus 25 Nabi dalam agama Islam dan tentunya 5 Nabi yang mendapatkan gelar Ulul Azmi. Di ambil dari web www.harmoni-my.org karya Bapak Dahalan bin Che Mat.
Dahalan bin Che Mat seorang mantan perwira angkatan laut (Regular Special Duty) di Royal Malaysian Navy. Telah pensiun pada bulan Januari 2004 dengan pangkat Letnan Komandan.
Selain cerita Nabi ada juga artikel dengan judul 1001 kisah dan teladan. Dikarenakan orang malaysia, maka jikalau menemukan bahasa yang sedikit rancu jangan heran yah :) Download terlebih dahulu Harmoni.zip kemudian ekstrak file tersebut. Buka folder berjudul Harmoni, di sana sobat bisa langsung melihat file output.chm Tinggal dibaca-baca saja kalau file itu ;) Buka file harmoni-my.org ► arkib ► kisahnabi ► buka deh di browsingan aplikasi dengan format index.htm Beginilah penampakannya
Data yang ada bisa sobat cari kembali keakuratannya dengan Ilmu Hadits (ilmu agama) yg ada di dunia ini.
Bonus jika mau mencari downloadan ebook, software, site offline dsb seputar ilmu agama Islam bukalah blog sobat kita samudera ilmu Perhatikan pada main menu dan lihat kategori DOWNLOAD. Sikat!!! Semoga bermanfaat :)
Apa yang mau dipostingkan nih! Tidak ada ide buat artikel. Ternyata setelah lama melakukan blogging, ketika mentok tidak punya bahan repot juga :d Tak semudah membalikan telapak tangan, semua hal memang membutuhkan perjuangan dan pengorbanan O:-) Kalau begini keadaannya terpaksa mengangkat tema-tema yg sudah lawas untuk di ulang kembali alias dimodernisasikan ;)) Sobat kenal dengan atribut form Bila akan membuat sebuah syntax form action, pasti ada varibael input! Tag input juga masih banyak lagi variannya it's all about input html tag. Koben mau berbagi cara membuat area input untuk syntax form, agar terlihat futuristik ;) KODE CSS
MARKUP HTML<input />Tutorial yg ringan-ringan saja, kan enggak ada ide :D Sekarang kita buat box (kotak) biar lebih fancy macam begini fancy box style Yang sekarang kita tambahkan dengan garis pinggir di dalam area box
Bikin tampilan video (youtube) terlihat lebih atraktif dengan teknik penulisan inline style.Kodenya<div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi08XbIZOdOVUqOf3AQaUVmWCuL1Yev0c0UGv2Z2fTUiEz9_zhhyDP9Ztz7TECryO5-3V0NVS4qQ2DLBMQzcIgYA-s4axIwW2YZNvH0w6LN_RJ4Y1IniBxiMGJB8Vo4wObd6BGDeAiKshQ/s1600/Youtube-background.png) no-repeat top left;height: 364px;margin: 0 auto;padding: 19px 0 0 22px;text-align: left;width: 532px;"> <iframe src="http://www.youtube.com/embed/ID-VIDEO" frameborder="0" height="298" width="498"></iframe> </div>Semoga bermanfaat :) Happy coding \m/
Tidak ada rotan akar pun jadi. Postingan khusus blogger sepi waktu² ini, ya sudah berbagi resource keren punya. Siapa tahu bermanfaat bagi kalian para pelancong blog ini ;) Kenal dengan web youtube? Koben akan berbagi tips mencari, melihat, dan mendownload konten video youtube tetapi tidak langsung dari web youtube. Pencarian berdasarkan pada top rated, top favourites, most popular, most discussed, featured, uploaded, trending videos & most shared dll. Contoh:
Embed for your blog<iframe src="http://vspy.org/?frame=2&columns=4&invert=&type=top_rated" width="100%" height="500" scrolling="no" style="position:absolute;top:0px;left:0px;overflow:hidden" frameBorder="0"><p>Your browser not support iframe atribut, please updated LoL</p></iframe>Artikel pilihan dari web CodePen and developer mozilla
Jika tampilan responsive kalian ingin mengeluarkan bunyi nada, cobain tutorial berikut www.artpolikarpov.github.io/garmoshka Login/Register form berikut memang lain dari yang lain, mantap punya www.cssdeck.com/labs/yze3ymgf Selanjutnya 2 link source pengetahuan seputar HTML5 tools and usefully CSS tut's www.graphicdesignjunction.com/2013/04/html5-tools-for-designers-developers/ & www.grafixdesignmag.com/tutorials/useful-css-tutorials/ bonus tools www.bestfreewebresources.com/2013/05/free-css3-animations-tools.html
Ke dua embed diatas adalah form action melihat variasi warna dari sebuah web dan embed popular hot google search. Artikel mengenai tooltip teranyar www.calebjacob.com/tooltipster/Flexisel is responsive carousel jQuery plugin www.9bitstudios.github.io/flexisel/ Urusan lightbox you can use Magnific Popupwww.dimsemenov.com/plugins/magnific-popup/For fun
www.jsdares.com
www.geoguessr.com
www.viewlike.us
www.layoutit.com
www.shapecatcher.com
www.flowplayer.org
Source yang terakhir bukalah blog sobat kita ini Code Handling. Update artikelnya keren punya b-) Happy blogging \m/
Koben mau berbagi resource from design it & code it. ± ada 25 tutorial keren punya yang bisa sobat pelajari. Master Kasper Mikiewicz berkebangsaan Poland sudah berbaik hati berbagi ilmu kepada kita. Kode yang sederhana dan penulisan yang dioptimasi membuat artikel resource kali ini akan sedikit gereget :d Tampilan web yg biasa saja tidak memperlihatkan gaya berlebihan, namun artikel dan project yg ada di sana sangat full stylish. Ini dia webnya...Gue akan memilihkan buat kalian artikel pilihan dari proyek yg ada disana. I. Flat Checkbox and Radio Button
Mungkin sobat agak bosan dengan postingan bertemakan HTML editor yang ada di blog ini! Sudah beberapa gue berbagi mengenai aplikasi offline .html Walau boring Koben tetap akan berbagi kembali :d Berawal dari melihat www.jsdo.it/zied-saidi/link-source-code-viewer apps untuk melihat source code (Ctrl + U) Teliti punya telaah ternyata itu merupakan live view editor HTML juga. Link source code viewer dibangun dengan menggunakan jQuery script, jQuery UI, dan UI layout b-) Live demo full page www.jsrun.it/zied-saidi/link-source-code-viewer Screenshot setelah gw benah-benahin :d Kurang lebih tidak berbeda dengan aslinya! Koben sudah masukan contoh penulisan syntax view source blog atau blog Bagi kalian yang belum tahu cara pemakaian HTML editor silahkan baca di sini tata cara memakai editor html :) Monggo disikat bro...
Ternyata web yg punya proyek memang suka membuat tools keren punya bos! Lihat deh koleksi tools dari riverdrift berikut www.riverdrift.com/pg1/web-tools.php Semoga bermanfaat :)
Ada tutorial dan trik keren punya mengenai seputaran penerapan embed youtube. Seperti yang di ketahui jika kita mau membawa satu embed full dari web lain pasti memakai syntax iframe! Itulah salah satu fungsi dari atribut iframe. Sekarang apa jadinya jika variabel iframe yang akan kita ambil lebih dari satu bahkan bisa berpuluh-puluh? Satu embed iframe saja file yg terpanggil sebesar ± 400kB. Berikut screenshot prakiraan jumlah size pemanggilan 1 iframe video youtubeMenjadikan beban bertambah berat >:) Oleh karena itu bagi blogger yang blognya berisikan konten embed video terutama dari web youtube, mari cari tahu bagaimana solusinya ;)
Trik berikut khusus embed dari web youtube
Masukan script diatas tag </body>
<script> //<![CDATA[ var i, c, y, v, s, n; v = document.getElementsByClassName("youtube"); if (v.length > 0) { s = document.createElement("style"); s.type = "text/css"; s.innerHTML = '.youtube{background-color:#000;max-width:100%;overflow:hidden;position:relative;cursor: pointer}.youtube .thumb{bottom:0;display:block;left:0;margin:auto;max-width:100%;position:absolute;right:0;top:0;width:100%;height:auto}.youtube .play{opacity:.7;left:50%;margin:-38px 0 0 -38px;position:absolute;top:50%;height:77px;width:77px;background:url("PLAY-BUTTON-77x77.PNG") no-repeat}'; document.body.appendChild(s) } for (n = 0; n < v.length; n++) { y = v[n]; i = document.createElement("img"); i.setAttribute("src", "http://i.ytimg.com/vi/" + y.id + "/hqdefault.jpg"); i.setAttribute("class", "thumb"); c = document.createElement("div"); c.setAttribute("class", "play"); y.appendChild(i); y.appendChild(c); y.onclick = function () { var a = document.createElement("iframe"); a.setAttribute("src", "https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1&border=0&wmode=opaque&enablejsapi=1"); a.style.width = this.style.width; a.style.height = this.style.height; this.parentNode.replaceChild(a, this) } }; //]]> </script>
Pasang link image pada kode yg bertuliskan PLAY-BUTTON-77x77.PNG Markup HTML<div style="margin:1em auto;width:370px"> <div class="youtube" id="LcIytqkbdlo" style="width:370px;height:278px;"> </div> </div>Gantikan ID LcIytqkbdlo dengan ID video tujuan! DEMO
Urusan script bisa sobat hosting. Begitulah tut's metode embedding lebih efisien untuk video youtube :)
Trick selanjutnya masih seputar embed video youtube. Kali ini bagaimana memulai video youtube dengan waktu yang sudah kita kondisikan terlebih dahulu! Pada umumnya kalau kita memencet tombol play video youtube pasti akan dimulai pada waktu 0 detik. Lantas kalau kita mau memulai dari menit ke 17 bagaimana? Mau tidak mau ya kita tarik tanda laju streamingannya kan! Dengan trik yg akan gue share, sobat bakal bisa melakukan start dan finish sesuka hati :p JavaScript youtube embed code
var node = "youtube-player"; var youtube = document.createElement('script'); youtube.type = "text/javascript"; youtube.src = "//www.youtube.com/iframe_api"; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(youtube, s);
var player; var params = document.getElementById(node); var startTime = params.getAttribute("startTime"); var endTime = params.getAttribute("endTime"); var videoID = params.getAttribute("videoID"); var playerHeight = params.getAttribute("height"); var playerWidth = params.getAttribute("width");
function onYouTubeIframeAPIReady() { player = new YT.Player(node, { height: playerHeight, width: playerWidth, playerVars: {'rel': 0, 'showinfo': 0, 'hidecontrols': 1 }, events: { 'onReady': loadVideo } }); }
Markup HTML<div style="margin:5px auto;width:370px"> <div videoID="t2MOwQ089eQ" startTime="1333" endTime="1444" height="278" width="370" id="youtube-player"> </div> </div>Gantikan videoID dengan ID video tujuan. Isikan startTime waktu untuk memulai dan endTime untuk waktu berhenti. Jika kurang jelas silahkan kunjungi sumber how to embed youtube videos without increasing page load time & how to embed a part of a youtube video in your website Thanks a lot Mr Amit Agarwal :) Happy coding \m/
Sepertinya tutorial membuat sosial media icons dengan efek CSS3 animasi belum menggelitik nih! Biar lebih variasi gue tambahin tut's serupa ah :d Original title is Create 3D Social Media Buttons with CSS3. Membuat tombol berbagi (sosial) dengan efek 3D Link berbagi sekarang akan meliputi 8 web jejaring yaitu: RSS, Twitter, Linkedin, Stumbleupon, Facebook, Google Plus, Flickr dan Pinterest. Berikut gambaran efek 3D dengan CSS
3D CSS Text
Dengan menambahkan atribut a:active maka akan terlihat kental efek 3 dimensinya ketika memencet ;)Markup HTML<div class="set-1"> <ul> <li><a href="/" class="rss-small">RSS</a></li> <li><a href="/" class="twitter-small">Twitter</a></li> <li><a href="/" class="linkedin-small">Linkedin</a></li> <li><a href="/" class="stumble-small">Stumbleupon</a></li> <li><a href="/" class="facebook-small">Facebook</a></li> <li><a href="/" class="gplus-small">GPlus</a></li> <li><a href="/" class="flickr-small">Flickr</a></li> <li><a href="/" class="pinterest-small">Pinterest</a></li> </ul> </div>Kode CSS
.set-1 ul li { display: inline-block; margin: 5px 0 0 3px; } .set-1 a { position: relative; display: block; width: 60px; height: 54px; text-align: center; cursor: pointer; overflow: hidden; color: transparent; -webkit-border-radius: 6px; border-radius: 6px; -webkit-transform: translate(0,0); transform: translate(0,0); -webkit-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease;
Markup HTML
Markup HTML