Selection Good Resources in June

Bagaimana membuat efek shadow (bayangan) tanpa menggunakan variabel box-shadow Yang beginian efek box shadow jika belum pada tahu play CSS3 box-shadow Koben sekarang akan berbagi link resource tools & tutorial. Sobat akan diajak have fun dengan generator yg berbeda! Mengasah skill dengan sedikit pemalasan diri :d Sebelum itu coba bedakan efek shadow gambar berikut?
Use box-shadow propertyUse Css versi 2Cara membuat efek CSS paper pada sebuah element textarea?
Dimulai dengan preview editor, mari kita jalan-jalan...:))

demos.kendoui.com/web/editor/index.html, zippypractice.com, www.isdntek.com/editor.htm, www.isdntek.com/tagbot/zippyslots.htm, and wusiwyg.online-toolz.com/tools/wysiwyg-editor.php Bonus www.isdntek.com/demo/internetcolors.htm & www.isdntek.com/tagbot/shadow.htm
Lanjut blog walking ke...
Create Apple navigation using Greensock ihatetomatoes.net/tutorial-apple-navigation-using-greensock/. Responsive multi-level flat menu tutorial www.flashuser.net/responsive-flat-menu-tutorial.
Pilihan from codepen...
codepen.io/marceloag/pen/nzLmu, codepen.io/danielemoraschi/pen/xFoet, codepen.io/bfred-it/pen/GHbxp, codepen.io/kindofone/full/scuwD, codepen.io/aptary/pen/swypI, codepen.io/tbleckert/full/CkufH + cssdeck.com/labs/profile-expand
Pilihan from jsdo.it...
jsdo.it/dbwest/t1b8, jsdo.it/dbwest/lvNe, jsdo.it/dbwest/ZDTg, jsdo.it/dbwest/yx0E
Bonus
www.ipixel.com.sg/blog/web-design/fresh-resources-for-designers-and-developers-june-2013/, cssdeck.com/labs/nwnleja7, tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin & tympanus.net/codrops/2013/05/30/simple-icon-hover-effects
Semoga bermanfaat :)
Happy blogging \m/

Add Google URL Shortener API for Blogger

Akhirnya tergantikan juga short urls for blogger posts via bit.ly Koben sudah ganti dengan kepunyaan google url shortener Dengan adanya fasilitas goo.gl sebenarnya bagi pemilik account google dan tentunya blogspot, secara otomatis link postingan yg publish sudah di render ke sana :d Lebih jauh lagi kita bisa melihat detailnya juga b-)
Karena saya tidak paham JavaScript, jadi edit script asal jalan saja. Untuk bisa menampilkan google url shortener API pada setiap link postingan blog, sobat harus memiliki API key! Kalau belum punya harus buat dulu di Google API Console: https://code.google.com/apis/console Bagi yg sudah punya tinggal klik API Access menu sebelah kiri. Disanalah keberadaan API key.

Please Backup Download full template before editing your template!

Letakan script berikut sebelum taging </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <script src='//apis.google.com/js/client.js'/>
<script>//<![CDATA[
function makeShort(){var longUrl=document.getElementById("longurl").value;var request=gapi.client.urlshortener.url.insert({'resource':{'longUrl': longUrl}});request.execute(function(response){if(response.id!=null){str="";str+="<b>Short URL: </b> <a title='Right click and Copy Link Location' href='"+response.id+"'>"+response.id+"</a>";document.getElementById("output").innerHTML=str;}else
{alert("ERROR: creating short url \n"+response.error);}});}function load(){gapi.client.setApiKey('XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX');gapi.client.load('urlshortener','v1',function(){document.getElementById("output").innerHTML="";});}window.onload=load;//]]></script>
</b:if>

Gantikan XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX dengan API key masing² Masalah peletakan markup HTML atur sendiri, tag/code template kan beda-beda ;))
Markup-HTML

Snippet Markup HTML Google URL Shortener API for Blogger

Dont change Snippet Markup HTML Coded

Hasil akhir akan tampak sebuah tombol Setelah di klik, muncul deh link pendek postingan blog :)

Resource by: Google url shortener api example
Demo on post area blogger Google url shortener api on blogger.
Happpy short URL \m/

Three Amazing Hover Effect for Image

Lagi-lagi dapat artikel tentang hover image Sekarang kita akan bermain dengan kerumitan variabel CSS background images properties! Pada dasarnya pelajaran CSS background-position terlihat mudah. Jika image yang digunakan satu full mudah, tapi bagaimana jika image yg ditampilkan lebih dari satu? Dari beberapa background image dirangkai menjadi satu kesatuan yg di atur dengan posisi image, di tambah dengan effect hover dan tentunya CSS3 coded b-)
Memang sedikit sulit jika diterangkan dengan kata-kata ilmu CSS itu, lebih baik lihat saja deh langsung demo dan tutorialnya :d

Curtain Effect

Ada Apa Yach!

#curtains {
color: #333;
margin: auto;
width: 400px;
height: 300px;
border: 5px ridge #eee;
transition-duration: 2s;
transition-timing-function: ease-out;
transition-property: background-position;
background: url(IMAGE-GORDEN-KIRI-200px x 300px) 0 0 no-repeat, url(IMAGE-GORDEN-KANAN-200px x 300px) right top no-repeat, url(IMAGE-GORDEN-Di-DALAM-400px x 300px) center center no-repeat;
}
#curtains:hover {
transition-duration: 2s;
background-color:#A90101;
color: rgba(255,255,255,.2);
transition-timing-function: ease-out;
transition-property: background-position;
background-position: -201px 0, 405px 0, center center;
}

Planing HTML<div id="curtains"> </div>

Jangan lupa isikan link image dengan resolusi yg sudah disesuikan width dan height pada rumusan kode CSS! Tambahkan dan aturlah variabel CSS sesuai dengan kebutuhan.

Collapsing Image Wipe

Ada Apa Yach!!!

Sekilas seperti 2 image kan, padahal itu terdiri dari 6 image! 5 img yg membangun efek tarikan ke kiri, 1 img background dalam.

#sengklek {
height: 300px;
width: 400px;
color: #fff;
margin: auto;
border: 5px ridge #0cf;
transition-duration: 1s;
transition-timing-function: ease-out;
transition-property: background-position;
background: url(LINK-IMAGE1.JPG) 0 0 no-repeat, url(LINK-IMAGE2.JPG) 85px 0 no-repeat, url(LINK-IMAGE3.JPG) 171px 0 no-repeat, url(LINK-IMAGE4.JPG) 257px 0 no-repeat, url(LINK-IMAGE5.JPG) 325px 0 no-repeat, url(LINK-IMAGE-BACKGROUND-DALAM.JPG) center center no-repeat;
}
#sengklek:hover {
background-color: #8BF1F3;
transition-duration: 1s;
transition-timing-function: ease-out;
transition-property: background-position;
background-position: -90px 0, -110px 0, -130px 0, -150px 0, -170px 0, center center;
}

Markup HTML<div id="sengklek"></div>

Hal yg perlu di ingat untuk membangun trick ini adalah, panjang & lebar gambar yg kemudian di potong² dengan skill photoshop kalian. Nominal yg ada (background-position) sangat berpengaruh pada hasil jadi.

Segmented Effect

Ada Apa Yach!!!

#sedeng {
height: 300px;
width: 400px;
color: #0f0;
font-size: 150%;
font-weight: bold;
margin: 5px auto;
border: 5px ridge #0cf;
background: url(LINK-IMAGE1.PNG) 0 0 no-repeat, url(LINK-IMAGE2.PNG) 85px 0 no-repeat, url(LINK-IMAGE3.PNG) 171px 0 no-repeat, url(LINK-IMAGE4.PNG) 257px 0 no-repeat, url(LINK-IMAGE5.PNG) 325px 0 no-repeat, url(LINK-IMAGE-BACKGROUND.PNG) center center no-repeat;
transition-duration: 1s;
transition-timing-function: ease-out;
transition-property: background-position;
}
#sedeng:hover {
background-color: #8BF1F3;
transition-duration: 1s;
transition-timing-function: ease-out;
transition-property: background-position;
background-position: 0 -301px, 81px 301px, 161px -301px, 241px 301px, 321px -301px, center center;
}

Kode HTML<div id="sedeng"></div>

Trik ini pun membutuhkan kepandaian sama dengan yg sebelumnya. Nominal akan berpengaruh sekali pada width & height image. Silahkan dipelajari sendiri saja, dan ide ini dapat dari coboldinosaur.com/pages/CSS_Background_Images.html Acak-acak kategori yg ada disana ;)
Happy coding \m/

Free Download HTML Editor and CLEditor

Apakah sobat menikmati free tools 12 live html editor? Bagi yang belum punya silahkan download dulu, biar jagoan coding ;)) Koben sekarang mau berbagi lagi tools HTML editor! Menu navigasi yg ada bisa dikatakan sudah mewakili apa-apa yg berada pada HTML editor post blogger. Navigasi di sini adalah fitur shortcut/alat bantu dalam berkerja menulis sebuah postingan.

Terlihat bagian² apa saja yg ada pada blogger's post editor! Gue sudah buat 2 biji, yaitu CLEditor and WYSIWYG HTML Editor. Semoga fitur navigasi yg ada dapat mewakili.Bila kepengen lihat demo datang saja ke web sumber premiumsoftware.net/cleditor/ & www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/HTMLEditor/HTMLEditor.aspx
Selain ke dua buah editor tersebut, Koben juga sudah sisipkan bonus berupa 1 tools convert code google punya dan 3 buah HTML live preview with simple code :)) Sudah ngiler tuh pengen download saja =P~

Demikian postingan singkat dari AA Beben Koben, semoga kalian menjadi blogger yg makin pandai dan terlatih :)
Happy blogging \m/

Get Free 12 Live HTML Editor

Aaahhh pasti sudah bosan deh dengar istilah html editor Advanced mode seperti ini bos Live HTML Editor on the Blog. Kegunaan dari HTML live editor, content editable, markdown editor, quick editor atau apapun namanya memang sangat multi fungsi ;)) Embed web resource berikut juga memakai fasilitas live HTML editor HeHeHe! Koben sudah mengumpulkan beberapa live-HTML-editor simpel sederhana tetapi cuamik punya, yang kebanyakan gue ambil dari web github. Ada 12 biji editor HTML yg gue bikinkan buat kalian semua b-)
Berikut adalah salah satu contoh aplikasi .html editor dari mini HTML/CSS/Js editor yg merupakan paling simpel tetapi benar² mempunyai gaya WOW towewewewww!!!Mini HTML/CSS/JS EditorBerikut hanya sekedar screenshot ke dua belas live html editor yg gue buat, untuk pengunjung setia blog aku. Yang belum setia harus jadi visitor setia dulu baru boleh download :d

Semoga menjadi blogger yg lebih kreatif ya :)
Happy editor \m/

LinkinTips is Tooltip jQuery Plugin for Image

Satu tema postingan yang belum habis untuk dibahas yakni mengenai Tooltip Artikel easy jquery tooltip plugin sudah mewakili jenis tooltips yg ada. Koben menemukan juiz linkintips yaitu tooltip pada image, yg dapat menyertakan syntax link di area title? Karena merupakan trick script jQuery plugin, berarti harus punya<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

(function(a){var b;a.fn.juizLinkinTips=function(c){b=a.extend({},e,c);a(this).each(function(){var c=a(this).attr("title"),d='<span class="jTips">';d+=c.replace(RegExp(b.beforeURL+" (.*) "+b.beforeTitle+" (.*)","gi"),'<a href="$1" title="$2">$1</a>');d+="</span>";a(this).wrap('<span class="jTWrapper"></span>');a(this).parents("span:first").prepend(d);a(this).removeAttr("title")});a(".jTips").css("opacity","0");a("span.jTWrapper").mouseover(function(){a(this).children("span.jTips").stop(!0); a(this).children("span.jTips").css("display")=="none"&&a(this).children("span.jTips").css({display:"block"});a(this).children("span.jTips").animate({opacity:b.gotoOpacity,top:b.gotoTop,left:b.gotoLeft},b.duration)});a("span.jTWrapper").mouseout(function(){a(this).children("span.jTips").delay(b.tipsDelay);a(this).children("span.jTips").animate({opacity:0,top:"0px",left:"0px"},b.duration,function(){a(this).css({display:"none"})})})};var e={beforeURL:"go to the page",beforeTitle:"in order to", gotoOpacity:"0.9",gotoTop:"-17px",gotoLeft:"25px",duration:"300",tipsDelay:"300"}})(jQuery);

Script Pemanggil

$(document).ready(function() {
$("img[title]").juizLinkinTips();
});

.jTips {
 position: absolute;
 text-align: left;
 top: 0; left: 0;
 display: none;
 width: 150px;
 padding: 7px;
 font-size: 1em;
 line-height: 1.3em;
 color: #111;
 background: #fff;
 overflow: hidden;
 z-index: 500;
 border: 1px solid #555;
 -webkit-border-radius: 8px;
 border-radius: 8px;
 -webkit-box-shadow: 2px 2px 9px #000;
 box-shadow: 2px 2px 9px #000;
 word-wrap: break-word;
}
.jTWrapper {
 position: relative;
 display: inline-block;
 cursor: help;
}

Resource by: jq.creativejuiz.fr
Bonus links
purecss.io
brandcolors.net
luis-almeida.github.io/unveil
stylifyme.com
screensiz.es
Happy blogging \m/

Add Hover or Multi Hover Effect for Image

Walau agak sedikit membosankan bila berbicara mengenai hover image Tapi apa mau dikata ide postingan yang didapat ya mengenai hal itu. Salah satu ide postingan tentang trik hover dan trick jQuery script seperti tidak ada ujungnya :p Koben akan berbagi kode simple, namun nilai seni tetap dipertahankan agar full stylish punya :))
Cek gi dot how to make fading magnifying glass overlay on image hover with jQuery and CSS3! Gue share yg versi CSS3 nya saja ya :">

span.rollover {
 opacity: 0;
 height: 250px;
 width: 500px;
 cursor: pointer;
 position: absolute;
 transition-duration: 1s;
 -o-transition-duration: 1s;
 -webkit-transition: -webkit-transform 1s;
 background:url(IMAGE-ICON-SEARCH-72px x 83px.PNG) center center no-repeat #000;
}
span.rollover:hover {
 opacity: .7;
 transition-duration: 1s;
 -o-transition-duration: 1s;
 -webkit-transition: -webkit-transform 1s;
}

Syntax HTML<a href="#">
<span class="rollover"></span>
<img src="LINK-IMAGE-HERE" alt="" />
</a>DEMO

Itu murni pake atribut CSS3, kalau mau menyertakan dgn jQuery, silahkan lihat resource originalnya dan jangan lupa acak2 artikel yg ada di sana ya webdesignandsuch.com/create-overlay-on-image-hover-jquery-css3 ;)

Teknik penyisipan variabel <span> kunci trik ini. Agar tidak nanggung bagaimana jika variable <span> kita terapkan sekaligus untuk ke 4 sisi gambar :-O Ketika di hover pada kiri-kanan dan atas-bawah sebuah gambar, akan terlihat effect hover!
DEMO

hover dari kananhover dari atashover dari kirihover dari bawah

div.multi-hover {
overflow: hidden;
position: relative;
vertical-align: middle;
width: 100%;
height: 358px;
line-height: 358px;
}
div.multi-hover img {width: 100%;}
div.multi-hover span {
color: #FFF;
height: 100%;
width: 100%;
opacity: 0;
font-size: 32px;
text-align: center;
position: absolute;
transition: all 0.3s linear 0s;
}
div.multi-hover span:nth-child(1) { /* kanan */
background: none repeat scroll 0 0 rgba(255,0,0,0.7);
left: 90%;
top: 0;
}
div.multi-hover span:nth-child(2) { /* atas */
background: none repeat scroll 0 0 rgba(255,255,0,0.7);
left: 0;
top: -80%;
}
div.multi-hover span:nth-child(3) { /* kiri */
background: none repeat scroll 0 0 rgba(0,204,0,0.7);
left: -90%;
top: 0;
}
div.multi-hover span:nth-child(4) { /* bawah */
background: none repeat scroll 0 0 rgba(0,102,255,0.7);
left: 0;
top: 80%;
}
div.multi-hover span:hover {opacity: 1;}
div.multi-hover span:nth-child(2n+1):hover {left: 0;}
div.multi-hover span:nth-child(2n):hover {top: 0;}

Plain HTML<div class="multi-hover">
<span>hover dari kanan</span>
<span>hover dari atas</span>
<span>hover dari kiri</span>
<span>hover dari bawah</span>
<img src="LINK-IMAGE-HERE" alt="" />
</div>Apa masih tidak percaya penyisipan attr span bisa jadi begitu, nih salah satu cobtoh lagi www.gograybox.com/blog/hover-animations
Bonus link pilihan dr codepen dev mozilla
codepen.io/kindofone/pen/slnGx
codepen.io/calweb/pen/EAhCJ
codepen.io/simeydotme/pen/sunhf
codepen.io/chad/pen/uhgpe
codepen.io/anthonybruno/pen/bcwlj
codepen.io/ferronsays/pen/cuDqm
codepen.io/CreativeJuiz/pen/jGgIo
developer.mozilla.org/en-US/demos/detail/snake
developer.mozilla.org/en-US/demos/detail/jqeditor
Happy hover \m/