D2D :]

Tampilkan postingan dengan label Kreasiku. Tampilkan semua postingan

Menambah Emotikon Di Komentar Dan Di Artikel Blogger

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvfwTeoA0BEqZIqVWhAchgoj84zokdMOuOe08jtaom55T_-j7SOp6lKImOoLPzO7whm4J6GCB7L5UM74cp4f4McbV9dwrgHUVyJEY-MD0aOMSHw9-BeCaHp8_tTYoJGgEitSZFfPDZ55Xk/s1600/Emotikon+Artikel.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Menambah Emotikon Di Komentar Dan Di Artikel Blogger" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvfwTeoA0BEqZIqVWhAchgoj84zokdMOuOe08jtaom55T_-j7SOp6lKImOoLPzO7whm4J6GCB7L5UM74cp4f4McbV9dwrgHUVyJEY-MD0aOMSHw9-BeCaHp8_tTYoJGgEitSZFfPDZ55Xk/s640/Emotikon+Artikel.png" title="Menambah Emotikon Di Komentar Dan Di Artikel Blogger" width="640" /></a></div>Menambah Emotikon Di Komentar Dan Di Artikel Blogger | Santai sejenak, siapkan  (c)  hangat, mainkan music Daft Punk... Kalau kemarin aku pernah share, model emotikon terbaru dari <a href="http://www.bocahit.com/2013/10/membuat-emotikon-kaskus-di-komentar.html" target="_blank">Kaskus</a> untuk Blogger :D yang ada di komentar. Ada yang bertanya di "Bisa ga kalau di artikel ?" jadi kali ini model emotikon untuk di artikel dan komentar. Model javascript yang sama hanya di tambah dengan .post-body saja. <pre><script type='text/javascript'> //<![CDATA[ jQuery(document).ready(function () {emoticonx({ emoRange:"#comments p, div.emoWrap", .post-body, putEmoAbove:"iframe#comment-editor", topText:"Klik untuk melihat code!", emoMessage:"Untuk memasukkan emoticon setidaknya ada satu spasi sebelum kode emoticon." }) }); //]]> </script></pre> <blockquote class="tr_bq">#comments p sebegai tempat emotikon akan di panggil. Lebih tepatnya pada threaded. Kemudian ditambahkan dengan .post-body sebagai pemanggilan untuk emotikon muncul di halaman post.</blockquote>Letakkan Javascript di atas kode </head> <pre><script src='http://yourjavascript.com/11303911312/emotikon.js' type='text/javascript'/></pre> <h3>Backup Javascript</h3><pre><script type='text/javascript'> // Emotikon Edited & add by Wammy San //www.bocahit.com //original from MKR //<![CDATA[ window.emoticonx=(function(){var a=function(c){var f=c||{},d=f.emoRange||"#comments p, div.emoWrap",e=f.putEmoAbove||"iframe#comment-editor",b=f.emoMessage||"To insert emoticon you must added at least one space before the code.";$(e).before('<div style="text-align:center" class="emoWrap"> :) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :&gt;) (o) [-( :-? (p) :-s (m) 8-) :-t :-b  b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer Click to see the code! '+b+"</div>");var g=function(j,i,h){$(d).each(function(){$(this).html($(this).html().replace(/ :/g," :").replace(/ ;/g," ;").replace(/ =/g," =").replace(/ \^/g," ^").replace(j," <img style='max-height:24px' src='"+i+"' class='emo delayLoad' alt='"+h+"' />"))})};g(/\s:\)\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBQPb0L_zoLjF7J15vuPkuOiKNSvN0kCbcn1UjE_60FKJGk7tn7yC5OONzNzEgEy_EjCn8w7jhhWxOIL7RZxyzsmzKSSXMaub9rB10dNm7QKjaJeq5RzjBhdL-5NOavqXEQ-ER1ZxJ3DM/s36/03.gif",":))");g(/\s;$\(+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxld1S1gK2Q9zRUAhZhbycRgw7v9pJaRHecrX1r9Q5HirjpPadsi3pJQauMPVLYA2CX2xFYFlakU4JiD0zyYFy_LUyYAHvz5WdgXz-6l40am5CXgOvlKcV3_xdyZzpojYbsfZg7LGma7k/s47/06.gif",";((");g(/\s:$+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtmdeD-zbLaWgWrcKTcNheNsBBxeH0TaB9acl6OmrwTvMRW1x5cwG4PL1dhrXLcCg0FSw6mr7_r6PqWv2c-aRcZBwpfX27sMW-HUwBYmOJKY12I_apdrYpvXGid2XszqNuGJkOOn0BcQM/s36/01.gif",":)");g(/\s:-\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXEd-n1I-sM_fWY6MWYN_GGcC62UjREfZ88gbnZkqFP_SPIO0SA9IW25vuKf5hSC5zfI1uHOAhFOQNAI8Lv1KIYsm9-OwUdKre2rdE27mpYqeFZOll0aifKWlfft1ekXDLpaTpdwJo5_o/s36/02.gif",":-)");g(/\s=\)\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrRQ_xVGok-XlFNEHKiEZHGeI0Gmv8NXytf-NWEiB3cTgb9zK_k9Qzm-YzewwN4l7YyNTYuidovSOvmtNbLL9wN03TkaQ9NCms6ta6gMi8mnTgkxOIOl6HD2yCIfTjPpnWH1deQAjUg4k/s36/03a.gif","=))");g(/\s;$+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg161tqrsuWQGE5F5VaF8M_w5DUEHP0lXa-kaDAdf1vUu2vYQrtUbuObxLX1o8aj-WNEoLrnZ5Aq9s4oaJoMlyTwUbeFJOItXSidg53ONYttsGcEiGZNZVA1Vw-U8sFZyo_dUNJ9qVxcDk/s36/04.gif",";(");g(/\s;-\(+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3OZvT2NmnzSNJCNZCbcOTU8s00dQ7bEnNQjgG72YBuJc8gGzZVSB6xEI2u3dO0M-APuTFvwCklCUYtArSrDPa-hPWolMDIGJPxaoVKZKp2WCDGRrXkTzfGo35AhcwbHYmYxDtBP9sf0o/s36/05.gif",";-(");g(/\s:d/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizcMQhwuNfrrR-K7grh0diYF6pqRasNW8FhfyHe7fu-x7qTwzZf8dxTceTtpt41_HuVRGgneAJWnUFSePJpc01cQLuWgsbN1VCdK-HFNk0AcY1pbqDacYomSimpEohWvNmzkueDZ5MSek/s36/7.gif",":d");g(/\s:-d/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvQJjkl2KrB363q1gTUvaUn8MwxM6-WMhVk1Npnnf0l4J5NVIsLwmyBmRC-ixtpHffB-NvabiV1TYURAwoCeh_cXqTNobXyrc_PjsHify7OHEU3tUhkb3uGODNSzfAI6y1yZ-jmUIitGI/s36/8.gif",":-d");g(/\s@-$+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXZKNRx_JMntDm9QAbRHS2VjovCOseri9Xx-_msdJMMTPnVhXj5nM2ou-BlpPSuY-p64EPCznxINzEwKzkJ6tx4EhXBrNByub1avDxo9IfB-9gl15OCdNMsUq1oXk4hdMq9SIRzpQrcl0/s36/09.gif","@-)");g(/\s:p/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq8ZvJ86BeeFHHPKtTYLWiAjUGY0XBu03WMYZERDfb3bbTNNKt7sYdrqUaPRSJYik-C56lCn-_2wbLMdYwP0NsD1WF7g_7IX39sIQcYayL_tUbIMPNJVreN2w58FFcwIVHYrsP_YnOgNA/s36/10.gif",":p");g(/\s:o/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH9De3iax4qpIhE7aYsX1lvRseu3WQNSzctNc_1cuyS_vEQYuggW_ggKhbGXznJFIxm4uTA8oJrgeOq64uj3w1SSlNVm7oZl4ly82LlgsbMGEGL4iL8_QhX7rjePDnwa1id75Rc7nip2w/s36/11.gif",":o");g(/\s:&gt;\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGK20UHbF6BoIdEi7lDtXD9UnX9A3H5O5NPmpngqjrIuGmJeHhI2_aCh0H5lDylJpT8A0Jrh3QTtte2vnOF-ZAWTnfmD9OayOQdfFhURW3DP6wa6Hz3vvIRoLg3UfXhw7FN7U7_QWLUyE/s36/12.gif",":&gt;)");g(/\s$o$+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNUoTzXwtYvyVQYZFCUK_6EYPnMZEriWFSw3hzZ09aU6P6RjsIwx5QyXFT6CvEWpowKs5aHERCLgKb5tQZRs-0aPIxCDVLPQTVux3nxLftzNNeADJPP-M6eIZSsaa4nNMEaUa2SNpAo6E/s36/13.gif","(o)");g(/\s\[-$+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1kaK1OrrwhBDumvIax-8AqvfIlCACmIY-awygXLWeQj714izvPj_CzGLODbzwpMisFMHjLY3nQ4j5rudRMpgF4lxn5DASULffGM1IlCrxEMZyASc1z4oVjtu9KgYZSEJSkoAGCj4cYeI/s36/14.gif","[-(");g(/\s:-\?/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh35O0wXsv7_vmFpOAA_74PiIJBsuGuBoDMZbsguZ5HPso_Naxe9Zrv3GkLhYS4bNQ5Ni56a3ezMWTBQ9ZGwVsWZz8O0jAhp7Y-SNicEz5P-8a9jnEmc8enElcJjaBahRxfKZariXw__00/s36/15.gif",":-?");g(/\s\(p$+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_selP61l0hSueqFOXai7WoHoUmKvabfrsmU-FsTylO-nLOWmbpCxll5b6kXUK98YNkQQc9WVQCQyjCLROO1UxhB6NN9pUgipGW5Zd29KC5NJpmaI1kmuZoQ7iDLKujUlv04Wn0rzYXug/s36/16.gif","(p)");g(/\s:-s/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik6k_tL9cxMu-cMyxCsxJGcysyXk9x2MnhMF1SgmOAePJuAgCPNwNZOSc6x8vHBqMeVoi5ItXjFYiiV6f59NfiplaJQWarDBtNpwIOHoiKGRoCzBTBg4zUknt739dUEMe0czKi9dmnC-0/s36/17.gif",":-s");g(/\s$m$+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtSA352CZCUUaigEshwAfIZrEpG3LOahu6MmDMiZIFed7KxxWvb0ZjeyLbPQjOLCU8vsU2oxShu0Zk7W3uv_j_9JJ67eZtTCrGh8u0m2z6PmNKfbNmDs9a0n8N45joN489jVFCfn-jh2k/s36/18.gif","(m)");g(/\s8-\)+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRJHlGOu_tpH6ffhklOodpBU6-C2fHuo7_wxLc_Iu9g_wJYpJRyvLyrD6H6JZcFbch2sSATFLTeyFytBFELCHaOMOSHRhKvsaclZ87tyueYhoG8ooYTIUeiRj_LGEtqo83lbpwHDWHqC8/s36/19.gif","8-)");g(/\s:-t/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghNfULdIWaIRNuzJxrdvmMqBpBPpw1DRqg8SAlH9gGReHecH7VcEhg70W2LinMdStZFut7ZAOrnq9KVcYP0GYuxiiOp1hEAJZrkDZoGgqUXbqctmLOaYpK4BAY-b8QsIeeoPqhIfCVWiA/s36/20.gif",":-t");g(/\s:-b/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPqIEono7UxDM9Q9-C937Cd1pVmi2yYic7aa79LaZDVerQee4dFEzhWHXDIWOGQuCLF1i42lkFgcW726TcI4vZr6eh3J-Y11vZdfGbocGA4b0043aQLWh4GL1oLH1xi6WBfo9Kx-jsLRI/s36/21.gif",":-b");g(/\sb-$+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7AwX-i7SIGC4yoBqA_7kjYXqPceExXA4x8XHTLShQSDQ4jULmNnZXEmmAn-eRG9-a3ubWGo_5wwCvAb5IICWNj41mnooUm6frOLzRNLwFhYS3hEgSJZF2jjtX5861U7pMqVU_LYfAeA8/s35/22.gif","b-(");g(/\s:-#/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN9bAOVirNtcIOvPqUCEi_DtRp5yrGomhW5rw3HpmVru978xuHd6QJfRFXVJQUXGYzu8wSVgGf3-EOKZT7cvFc8FggwiL2UgBwSKCtzzqsEGdkowC8kyjbFgr9X_BIUM3fpuQfWeqG68o/s36/23.gif",":-#");g(/\s=p~/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijJEfAnl183liAQPzb5DKaek5YxItiob5gwrAVAHQIVYXmKgzw3z2XA-qQOKQRftd6CpygTv-vWArqXKQZgtHBhXYmPKir6k7nodkF1sdWuBUmvGnQcJhTWK6IOGn9C-V6w0qHazL9F5U/s36/24.gif","=p~");g(/\s\$-$+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDgyIjRmapgsBZdVqvU2Y6KUTSTTWyc_MbgXMoFXlG0mScQRAkZt3inEidh8uhOqh6tmrpLRjtU93LdAsael0L2Of-y8VHZk5ZwZ9fnMQjw5tnqKRbGz74nQ9R2mIhZWoti4lGJNljXzk/s36/25.gif","$-)");g(/\s$b$+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG4dOId7Wf_kFHUVF4QpcH6m8r3MbYWnBqAzFVnki_3C-woo8YUOVbRUwpzwasBtjHG1eIlUGOu81RFcCGDFCT7yOm5q0ynUAVQYQ3_qtocZsD65WeqkIjzG_KSPuWkCBP9tx5Q0jIyuQ/s36/26.gif","(b)");g(/\s$f$+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXC5OMdmztR50WaQSNp28GNTOcN-4FRXqn12U96_pnNDG1kl3n8YrkT_W6IPZAEWq2ARuX4DIzydLxiMynxb789nS7GRP_w5mmYVFAZC9hen627jVPiKk92EcdKSgzxYbxGy3rBgo0uKo/s36/27.gif'","(f)");g(/\sx-\)+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6P_S-rgv7Ke8Hq3QtvJ-KvHILQdf7pCbI8Y1kpnz0IpkdXfLT13zpgygOLs-Hw16JCVSmo2Qcll-AEP-O1Usgdj_VgEd8Jp6NFH2oUP47n0hxh2oHgBZIq-cAi6iedKOy-FsZKOgbqLo/s36/28.gif","x-)");g(/\s$k$+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitrEemFhEHCXdchT1AhS0RajRkYRPk6Sny_KZtLKio3WsTKIF3rFlEaamBiKjZP4Ov5zxv9z0LtoBrdniGIPQljvtev3ccmr-s7Fe0lhpPWWKF9waREv9f8cX78XK4Wx5EoxXFq_TIMGw/s36/29.gif","(k)");g(/\s$h$+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4rPz_7E0UmhfZzqk6cOL8DxNnY9FN8vpftwfQ_pM-HRQ2gz9ljqJ7rVg3jdxxkPbzgENdWpQFs2T58zsR9E1YMkhsaP3tNjko-iO31xsHFT73mCtk9H0PP0R03jq_op4X-3aFV9v8swg/s36/30.gif","(h)");g(/\s$c$+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGsrGRJ03RtMxLyYAQYzMYo3zKRn1_9M8dBhIwhBZSie2W-gEXHcjrzIpCRcKthKQ4Vf6cBPI9IEyzpeUh5SEIZn5-qgvU2gvEyp9eO3Vf50vGEfxx4tXTTRr6FJe67VGLHaOizp7bguc/s36/31.gif","(c)");g(/\scheer/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCcr5jIi1oJFCW6vnOoDj8lWt4MhdugICQysm4A1uQFr_6uKYE2PALNKSQwbamyL1TiTssHa01gKWRH7PmXLacp8543oCb_Oxntxszw7h6Q83UvfpqjUCQlagRsJSnr78g_MOJVwQXpEw/s36/32.gif","cheer");$("div.emoWrap").one("click",function(){if(b){alert(b)}});$(".emo").css("cursor","pointer").live("click",function(h){$(".emoKey").remove();$(this).after('<input class="emoKey" type="text" size="'+this.alt.length+'" value=" '+this.alt+'" />');$(".emoKey").trigger("select");h.stopPropagation()});$(".emoKey").live("click",function(){$(this).focus().select()})};return function(b){a(b)}})(); //]]> </script></pre> Demonya adalah artikel ini.  (h)

Menambah Emotikon Di Komentar Dan Di Artikel Blogger

Menambah Emotikon Di Komentar Dan Di Artikel Blogger | Santai sejenak, siapkan (c) hangat, mainkan music Daft Punk... Kalau kemarin aku pernah share, model emotikon terbaru dari Kaskus untuk Blogger :D yang ada di komentar. Ada yang bertanya di "Bisa ga kalau di artikel ?" jadi kali ini model emot…

Baca selengkapnya »

Oct 16, 2013

Tooltips Paling Keren Dengan CSS3

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVcMLeWLiuvSaCO5-4n9gi8sJRrxvW1hk7VMwKuqjJKSWgkBGFfLxxjVCn34059qDo-p_7pW-1V7u-TJTZFmHA-CWtuySyxy0K-Ccsl4LqoQ6oKf0hRB9jzDqW1MBuCpgJ7VBNwzrXSrea/s1600/Tooltips+Pseudo+Elemen+&+Transisi.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVcMLeWLiuvSaCO5-4n9gi8sJRrxvW1hk7VMwKuqjJKSWgkBGFfLxxjVCn34059qDo-p_7pW-1V7u-TJTZFmHA-CWtuySyxy0K-Ccsl4LqoQ6oKf0hRB9jzDqW1MBuCpgJ7VBNwzrXSrea/s400/Tooltips+Pseudo+Elemen+&+Transisi.png" /></a></div>Tooltips Paling Keren Dengan CSS3 | Belum selesai di masalah tooltips.Kemarin sudah lihat tooltips versi 1 dan 2 ? jika belum, klik <a href="http://www.bocahit.com/2013/08/iseng-iseng-dari-tooltips-pakai-pseudo.html" target="_blank">disini</a> atau <a href="http://www.bocahit.com/2013/08/tooltips-super-duper-keren-dengan-css3.html" target="_blank">disini</a>. Masih memakai Pseudo Element & Transition. Hanya saja yang menjadi ada di border radius saja. Silakan dilihat. <div style="text-align: center;"><a class="button" href="http://iframe-wammy.blogspot.com/2013/08/a_23.html" target="_blank">Ilustrasi</a></div> <h3>CSS</h3><pre>a.tooltip { position: relative; display: inline; } a.tooltip span { width: 80px; height: 80px; 	line-height: 80px; 	padding: 10px; 	left: 50%; 	margin-left: -55px; 	font-family: 'Alegreya SC', Georgia, serif; 	font-weight: 400;	 	font-style: italic; 	font-size: 14px; 	color: #719DAB; 	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); 	text-align: center; 	border: 5px solid #fff; 	background: rgba(255,255,255,0.5); 	text-indent: 0px; 	position: absolute; 	pointer-events: none; 	border-radius: 50%; 	bottom: -40px; 	opacity: 0; 	box-shadow: 0px 3px 8px rgba(0,0,0,0.1); 	-webkit-transform: scale(0.2); 	-moz-transform: scale(0.2); 	-o-transform: scale(0.2); 	-ms-transform: scale(0.2); 	transform: scale(0.2); 	-webkit-transition: all 0.3s ease-in-out; 	-moz-transition: all 0.3s ease-in-out; 	-o-transition: all 0.3s ease-in-out; 	-ms-transition: all 0.3s ease-in-out; 	transition: all 0.3s ease-in-out; } a:hover.tooltip span { opacity: 0.9; bottom: 20px; 	-webkit-transform: scale(1); 	-moz-transform: scale(1); 	-o-transform: scale(1); 	-ms-transform: scale(1); 	transform: scale(1); } </pre> <h3>HTML</h3><pre><a class="tooltip" href="#">Add On FbFacebook</a> <a class="tooltip" href="#">Add CircleGoggle +</a> <a class="tooltip" href="#">Follow MeTwitter</a></pre>

Tooltips Paling Keren Dengan CSS3

Tooltips Paling Keren Dengan CSS3 | Belum selesai di masalah tooltips.Kemarin sudah lihat tooltips versi 1 dan 2 ? jika belum, klik disini atau disini. Masih memakai Pseudo Element & Transition. Hanya saja yang menjadi ada di border radius saja. Silakan dilihat.IlustrasiCSSa.tooltip { position: r…

Baca selengkapnya »

Aug 23, 2013

Tooltips Super Duper Keren Dengan CSS3

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinggd2_hyYmgaXeyh09Bz30lY18xmw3lZvTjPU7nMg6q8CjVfWsgcvAPKiI3cYVZ6PIyTW9bDd0mWHxDgDhqS34IKzLcITjnkBksBAODdHxPoabXi7lNZfuKx7GOejtRdBOdT5-raVRBs8/s1600/Tooltips+Pseudo+Elemen+&+Transisi+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinggd2_hyYmgaXeyh09Bz30lY18xmw3lZvTjPU7nMg6q8CjVfWsgcvAPKiI3cYVZ6PIyTW9bDd0mWHxDgDhqS34IKzLcITjnkBksBAODdHxPoabXi7lNZfuKx7GOejtRdBOdT5-raVRBs8/s400/Tooltips+Pseudo+Elemen+&+Transisi+2.png" width="400" /></a></div> Tooltips Super Duper Keren Dengan CSS3 | Kalau kemarin cuma iseng - iseng aja buat <a href="http://www.bocahit.com/2013/08/iseng-iseng-dari-tooltips-pakai-pseudo.html" target="_blank">tooltips</a>, kali ini malah di ubah tetapi tetap pada transition & pseudo element. Cocok untuk blog yang mengutamakan penampilan. Silahkan lihat ilustrasinya.... <div style="text-align: center;"><a class="button" href="http://iframe-wammy.blogspot.com/2013/08/a_22.html" target="_blank">ILUSTRASI</a></div><div style="text-align: center;"> </div><div style="text-align: left;">Bagaimana? tertarik ? langsung di pasang....</div> <h3>CSS</h3> <pre>a.tooltip { position: relative; display: inline; } a.tooltip span { width: 100px; height: auto; 	line-height: 20px; 	padding: 10px; 	left: 50%; 	margin-left: -64px; 	font-family: 'Alegreya SC', Georgia, serif; 	font-weight: 400;	 	font-style: italic; 	font-size: 14px; 	color: #719DAB; 	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); 	text-align: center; 	border: 4px solid rgba(106, 131, 227, 0.4); 	background: rgba(255,255,255,0.3); 	text-indent: 0px; 	border-radius: 5px; 	position: absolute; 	pointer-events: none; 	bottom: 100px; 	opacity: 0; 	box-shadow: 1px 1px 2px rgba(0,0,0,0.1); 	-webkit-transition: all 0.3s ease-in-out; 	-moz-transition: all 0.3s ease-in-out; 	-o-transition: all 0.3s ease-in-out; 	-ms-transition: all 0.3s ease-in-out; 	transition: all 0.3s ease-in-out; } a.tooltip span:after { bottom: -14px; margin-left: -10px; 	border-top: 10px solid #fff; } a.tooltip span:before, a.tooltip span:after { content: ''; position: absolute; 	bottom: -15px; 	left: 50%; 	margin-left: -9px; 	width: 0; 	height: 0; 	border-left: 10px solid transparent; 	border-right: 10px solid transparent; 	border-top: 10px solid rgba(106, 131, 227, 0.4); } a:hover.tooltip span { visibility: visible; opacity: 0.8; bottom: 30px; z-index: 999; visibility: visible; 	opacity: 0.9; 	-webkit-transform: translate(0px) rotate(0deg) scale(1); 	-moz-transform: translate(0px) rotate(0deg) scale(1); 	-o-transform: translate(0px) rotate(0deg) scale(1); 	-ms-transform: translate(0px) rotate(0deg) scale(1); 	transform: translate(0px) rotate(0deg) scale(1); } </pre> <h3>HTML</h3><pre><a class="tooltip" href="#">Add On FbFacebook</a> <a class="tooltip" href="#">Add CircleGoggle +</a> <a class="tooltip" href="#">Follow MeTwitter</a> </pre> Selamat mencoba bro...

Tooltips Super Duper Keren Dengan CSS3

Tooltips Super Duper Keren Dengan CSS3 | Kalau kemarin cuma iseng - iseng aja buat tooltips, kali ini malah di ubah tetapi tetap pada transition & pseudo element. Cocok untuk blog yang mengutamakan penampilan. Silahkan lihat ilustrasinya....ILUSTRASIBagaimana? tertarik ? langsung di pasang....CSSa.t…

Baca selengkapnya »

Aug 22, 2013

Iseng - Iseng Dari Tooltips Pakai Pseudo Element Dan & Transisi

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioaE5zovnA9c59oZkT8R3WYAqiA7WOeaas0sRwDxOfBiMd_hlqdvJTH0LhWNPEqECAbAV7F6BG9bDjEgmT5lcUvaKzt5DWvDg5BldsSpmbtM3QeVPNEYu5krIjs00DuB1buiA4VjvEtTD2/s1600/Tooltips+Pseudo+Elemen+&+Transisi.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Iseng - Iseng Dari Tooltips Pakai Pseudo Element Dan & Transisi" border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioaE5zovnA9c59oZkT8R3WYAqiA7WOeaas0sRwDxOfBiMd_hlqdvJTH0LhWNPEqECAbAV7F6BG9bDjEgmT5lcUvaKzt5DWvDg5BldsSpmbtM3QeVPNEYu5krIjs00DuB1buiA4VjvEtTD2/s400/Tooltips+Pseudo+Elemen+&+Transisi.png" title="Iseng - Iseng Dari Tooltips Pakai Pseudo Element Dan & Transisi" width="400" /></a></div> Iseng - Iseng Dari Tooltips Pakai Pseudo Element Dan & Transisi | Dari iseng - iseng,,mainan Transisi di <a href="http://www.css3maker.com/css3-transition.html" target="_blank">CSS3 Maker</a> terus sedikit tambahan dengan Pseudo Elemen di Dreamweaver, ehh ga sengaja malah jadi tooltips. Padahal ga punya ide buat tooltips...Tooltips yang sangat super keren..(hikz) menurut saya. Maklum saya adalah Noob Designer...Keren menurut saya jelek menurut anda. Tapi seperti ini lah. <h3>HTML</h3><pre>  <a class="tooltip" href="#">Add On FbFacebook</a>   <a class="tooltip" href="#">Add CircleGoggle +</a>   <a class="tooltip" href="#">Follow MeTwitter</a>   </pre> Yups, dari markupnya memang sama seperti tutorial <a href="http://www.bocahit.com/2013/06/cara-membuat-pure-css3-tooltips-di-blog.html" target="_blank" title="Tutorial Membuat Pure Tooltips">membuat tooltips</a>. <h3>CSS</h3><pre>a.tooltip { position: relative; display: inline; } a.tooltip span { width: 100px; height: auto; line-height: 20px; 	padding: 10px; 	left: 50%; 	margin-left: -64px; 	font-family: 'Alegreya SC', Georgia, serif; 	font-weight: 400;	 	font-style: italic; 	font-size: 14px; 	color: #719DAB; 	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); 	text-align: center; 	border: 4px solid #fff; 	background: rgba(255,255,255,0.3); 	text-indent: 0px; 	border-radius: 5px; 	position: absolute; 	bottom: 70px; 	opacity: 0; 	pointer-events: none; 	box-shadow: 1px 1px 2px rgba(0,0,0,0.1); 	-webkit-transform: translate(35px) rotate(25deg) scale(1.5); 	-moz-transform: translate(35px) rotate(25deg) scale(1.5); 	-o-transform: translate(35px) rotate(25deg) scale(1.5); 	-ms-transform: translate(35px) rotate(25deg) scale(1.5); 	transform: translate(35px) rotate(25deg) scale(1.5); 	-webkit-transition: all 0.3s ease-in-out; 	-moz-transition: all 0.3s ease-in-out; 	-o-transition: all 0.3s ease-in-out; 	-ms-transition: all 0.3s ease-in-out; 	transition: all 0.3s ease-in-out; } a.tooltip span:after { bottom: -14px; 	margin-left: -10px; 	border-top: 10px solid #fff; } a.tooltip span:before, a.tooltip span:after { content: ''; position: absolute; 	bottom: -15px; 	left: 50%; 	margin-left: -9px; 	width: 0; 	height: 0; 	border-left: 10px solid transparent; 	border-right: 10px solid transparent; 	border-top: 10px solid rgba(0,0,0,0.1); } a:hover.tooltip span { visibility: visible; opacity: 0.8; bottom: 30px; z-index: 999; visibility: visible; 	opacity: 0.9; 	-webkit-transform: translate(0px) rotate(0deg) scale(1); 	-moz-transform: translate(0px) rotate(0deg) scale(1); 	-o-transform: translate(0px) rotate(0deg) scale(1); 	-ms-transform: translate(0px) rotate(0deg) scale(1); 	transform: translate(0px) rotate(0deg) scale(1); } </pre> Pseudo Elemen bisa di pelajari dan dipratekan di <a href="http://www.w3schools.com/css/css_pseudo_elements.asp" target="_blank">W3school CSS Pseudo Element</a>. Gampang kan, silakan dipakai. Dari ini saya jadi dapatkan ide lagi buat tooltips yang lainnya... <div style="text-align: center;"> <a class="button" href="http://iframe-wammy.blogspot.com/2013/08/a.html" target="_blank" title="Demo">Ilustrasi</a></div>

Iseng - Iseng Dari Tooltips Pakai Pseudo Element Dan & Transisi

Iseng - Iseng Dari Tooltips Pakai Pseudo Element Dan & Transisi | Dari iseng - iseng,,mainan Transisi di CSS3 Maker terus sedikit tambahan dengan Pseudo Elemen di Dreamweaver, ehh ga sengaja malah jadi tooltips. Padahal ga punya ide buat tooltips...Tooltips yang sangat super keren..(hikz) menurut sa…

Baca selengkapnya »

Aug 21, 2013

Membuat Mega Menu Dengan CSS

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgihq8mpJwOFAgH7Qj_oR8ir_kyZ0hQtd6lwOY55mQVcBJqm6SJmFjEfnc6vbrVp_6n9tLujQADE9wjbnzewezwVYc_BX6z3AR1lY1dJ1AsrU-U-vNgnp1DcIm2Y2U1EF0qa2G9r4KPkSkP/s1600/Mega+Menu.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Mega Menu Dengan CSS" border="0" height="176" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgihq8mpJwOFAgH7Qj_oR8ir_kyZ0hQtd6lwOY55mQVcBJqm6SJmFjEfnc6vbrVp_6n9tLujQADE9wjbnzewezwVYc_BX6z3AR1lY1dJ1AsrU-U-vNgnp1DcIm2Y2U1EF0qa2G9r4KPkSkP/s320/Mega+Menu.jpg" title="Membuat Mega Menu Dengan CSS" width="320" /></a></div> Membuat Mega Menu Dengan CSS | Sebelum lebaran, aku share dulu tutorial CSS dan HTML yang bisa anda pakai ketika membuat Mega Menu. Apa itu Mega Menu? yang jelas bukan seperti menu - menu yang biasa kita lihat. Mega Menu bisa kita artikan dengan jenis menu yang bisa mencangkup banyak indek atau sub. Jarang sekali ada blog yang menggunakan jenis menu ini. Kesuali website official arsenal, mereka memakai Mega Menu. <h3>CSS</h3> <pre>.nav, .nav a, .nav ul, .nav li, .nav div, .nav form, .nav input { margin: 0; padding: 0; border: none; outline: none; } .nav a { text-decoration: none; } .nav li { list-style: none; } .nav { display: inline-block; position: relative; cursor: default; z-index: 500; } .nav > li { display: block; float: left; } .nav > li > a { position: relative; display: block; z-index: 510; height: 54px; padding: 0 20px; line-height: 54px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 13px; color: #fcfcfc; text-shadow: 0 0 1px rgba(0,0,0,.35); background: #372f2b; border-left: 1px solid #4b4441; border-right: 1px solid #312a27; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease; } .nav > li:hover > a { background: #4b4441; } .nav > li:first-child > a { border-radius: 3px 0 0 3px; border-left: none; } .nav > li.nav-search > form { position: relative; width: inherit; height: 54px; z-index: 510; border-left: 1px solid #4b4441;} .nav > li.nav-search input[type="text"] { display: block; float: left; width: 1px; height: 24px; padding: 15px 0; line-height: 24px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 13px; color: #999999; text-shadow: 0 0 1px rgba(0,0,0,.35); background: #372f2b; -webkit-transition: all .3s ease 1s; -moz-transition: all .3s ease 1s; -o-transition: all .3s ease 1s; -ms-transition: all .3s ease 1s; transition: all .3s ease 1s; } .nav > li.nav-search input[type="text"]:focus { color: #fcfcfc; } .nav > li.nav-search input[type="text"]:focus, .nav > li.nav-search:hover input[type="text"] { width: 110px; padding: 15px 20px; -webkit-transition: all .3s ease .1s; -moz-transition: all .3s ease .1s; -o-transition: all .3s ease .1s; -ms-transition: all .3s ease .1s; transition: all .3s ease .1s; } .nav > li.nav-search input[type="submit"] { display: block; float: left; width: 20px; height: 54px; padding: 0 25px; cursor: pointer; background: #372f2b url(http://s23.postimg.org/mvvsc11ev/search_icon.png) no-repeat center center; border-radius: 0 3px 3px 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease; } .nav > li.nav-search input[type="submit"]:hover { background-color: #4b4441; } .nav > li > div { position: absolute; display: block; width: 100%; top: 50px; left: 0; opacity: 0; visibility: hidden; overflow: hidden; background: #ffffff; border-radius: 0 0 3px 3px; -webkit-transition: all .3s ease .15s; -moz-transition: all .3s ease .15s; -o-transition: all .3s ease .15s; -ms-transition: all .3s ease .15s; transition: all .3s ease .15s; } .nav > li:hover > div { opacity: 1; visibility: visible; overflow: visible; } .nav .nav-column { float: left; width: 20%; padding: 2.5%; } .nav .nav-column h3 { margin: 20px 0 10px 0; line-height: 18px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 14px; color: #372f2b; text-transform: uppercase; } .nav .nav-column h3.orange { color: #ff722b; } .nav .nav-column li a { display: block; line-height: 26px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 13px; color: #888888; } .nav .nav-column li a:hover { color: #666666; } </pre> <h3>HTML</h3><pre><ul class="nav"> <li> <a href="#">What's new</a> <div>  </div> </li> <li><a href="#">Top rated</a></li> <li> <a href="#">Earnings</a> <div>  </div> </li> <li><a href="#">Rings</a></li> <li><a href="#">Bracelets</a></li> <li><a href="#">All Categories</a></li> <li class="nav-search"> <form action="#"> <input type="text" placeholder="Search..."> <input type="submit" value=""> </form> </li> </ul> </pre> <h3>Mega Dropdown Menu</h3><pre><div class="nav-column"> <h3>Home</h3> <ul> <li><a href="#">Pampers Diapers</a></li> <li><a href="#">Huggies Diapers</a></li> <li><a href="#">Seventh Generation</a></li> <li><a href="#">Diapers</a></li> <li><a href="#">Derbies</a></li> <li><a href="#">Driving shoes</a></li> <li><a href="#">Espadrilles</a></li> <li><a href="#">Loafers</a></li> </ul> </div> <div class="nav-column"> <h3>Home</h3> <ul> <li><a href="#">Driving shoes</a></li> <li><a href="#">Espadrilles</a></li> <li><a href="#">Loafers</a></li> </ul> <h3>Home</h3> <ul> <li><a href="#">Driving shoes</a></li> <li><a href="#">Espadrilles</a></li> <li><a href="#">Loafers</a></li> </ul> </div> <div class="nav-column"> <h3>Home</h3> <ul> <li><a href="#">Pampers Diapers</a></li> <li><a href="#">Huggies Diapers</a></li> <li><a href="#">Seventh Generation</a></li> <li><a href="#">Diapers</a></li> <li><a href="#">Derbies</a></li> <li><a href="#">Driving shoes</a></li> <li><a href="#">Espadrilles</a></li> <li><a href="#">Loafers</a></li> </ul> </div> <div class="nav-column"> <h3 class="orange">Related Categories</h3> <ul> <li><a href="#">Pampers Diapers</a></li> <li><a href="#">Huggies Diapers</a></li> <li><a href="#">Diapers</a></li> </ul> <h3 class="orange">Brands</h3> <ul> <li><a href="#">Driving shoes</a></li> <li><a href="#">Espadrilles</a></li> </ul> </div> </pre> Isikan HTML Mega Dropdown Menu pada . Selesai.. Sumber:designmodo <div style="text-align: center;"><a class="button" href="http://iframe-wammy.blogspot.com/2013/07/ul.html" target="_blank">Ilustrasi</a> </div>

Membuat Mega Menu Dengan CSS

Membuat Mega Menu Dengan CSS | Sebelum lebaran, aku share dulu tutorial CSS dan HTML yang bisa anda pakai ketika membuat Mega Menu. Apa itu Mega Menu? yang jelas bukan seperti menu - menu yang biasa kita lihat. Mega Menu bisa kita artikan dengan jenis menu yang bisa mencangkup banyak indek atau sub.…

Baca selengkapnya »

Aug 04, 2013

Membuat Button Dengan CSS Pseudo Elemen V1

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhNNQwswx3yLDhiCudOrFQ9tLaE9WOVqcVvXQb44LnfDNw_-IwLHalIpinF7TdbClaTDSKZNMG9M7nMSIFZUea2t6EzMi8v0pE-q5y-xqogpQEiD6Ft0Ufdy8DYubEwNeOiunKqAosm31q/s1600/Button+Pseudo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Button Dengan CSS Pseudo Elemen V1" border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhNNQwswx3yLDhiCudOrFQ9tLaE9WOVqcVvXQb44LnfDNw_-IwLHalIpinF7TdbClaTDSKZNMG9M7nMSIFZUea2t6EzMi8v0pE-q5y-xqogpQEiD6Ft0Ufdy8DYubEwNeOiunKqAosm31q/s320/Button+Pseudo.jpg" title="Membuat Button Dengan CSS Pseudo Elemen V1" width="320" /></a></div> Membuat Button Dengan CSS Pseudo Elemen V1 | Hari sedikit membosankan, apalagi masalah yang ada di template yang belum selesai. Tapi untungnya masih sempet juga berkreasi bersama Dreamweaver tercinta. Pseudo Elemen, bisa anda baca lebih lengkapnya di W3.org. Karena disana semua perngertian masalah pemrograman disediakan. Pseudo Element dalam CSS bisa diartikan sebagai Elemen/Tag “palsu”. Karena dengan menambahkan pseudo elemen seolah olah kita menambahkan elemen atau suatu tag baru di dalam tag yang kita beri style. Ada sedikit perubahan dalam spesifikasi CSS3, yakni setiap pseudo element harus menggunakan double colon atau titik duanya ditulis dua kali seperti ::before ,::after. (Sumber:<a href="http://www.w3.org/TR/selectors/#pseudo-elements" target="_blank" title="CSS3 Pseudo-Element Specs">http://www.w3.org/TR/selectors/#pseudo-elements</a>) <h3>CSS</h3> <pre>.button {     background-color:#3bb3e0;     padding:10px;     position:relative;     font-family: 'Open Sans', sans-serif;     font-size:12px;     text-decoration:none;     color:#fff;     background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);     background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);     background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);     background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);     background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);     background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(44,160,202)),color-stop(1, rgb(62,184,229)));     -webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;     -moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;     -o-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;     box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;     -webkit-border-radius: 5px;     -moz-border-radius: 5px;     -o-border-radius: 5px;     border-radius: 5px; } .button::before {     background-color:#072239;     content:"";     display:block;     position:absolute;     width:100%;     height:100%;     padding-left:2px;     padding-right:2px;     padding-bottom:4px;     left:-2px;     top:5px;     z-index:-1;     -webkit-border-radius: 6px;     -moz-border-radius: 6px;     -o-border-radius: 6px;     border-radius: 6px;     -webkit-box-shadow: 0px 1px 0px #fff;     -moz-box-shadow: 0px 1px 0px #fff;     -o-box-shadow: 0px 1px 0px #fff;     box-shadow: 0px 1px 0px #fff; } .button:active {     color:#156785;     text-shadow: 0px 1px 1px rgba(255,255,255,0.3);     background:rgb(44,160,202);     -webkit-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;     -moz-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;     -o-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;     box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;     top:7px; } .button:active::before {     top:-2px; }</pre><h3>HTML</h3><pre class="brush:js;"><a href="#" class="button"> Click me!</a> </pre><div style="text-align: center;"> </div><div style="text-align: center;"><a class="button" href="http://iframe-wammy.blogspot.com/2013/07/blog-post.html">ILUSTRASI</a></div>

Membuat Button Dengan CSS Pseudo Elemen V1

Membuat Button Dengan CSS Pseudo Elemen V1 | Hari sedikit membosankan, apalagi masalah yang ada di template yang belum selesai. Tapi untungnya masih sempet juga berkreasi bersama Dreamweaver tercinta. Pseudo Elemen, bisa anda baca lebih lengkapnya di W3.org. Karena disana semua perngertian masalah p…

Baca selengkapnya »

Jul 16, 2013

Elegan Image Accordion Dengan CSS3 & Jquery

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinDhbuQ00aDPNF3-tMvKGHTZiooiqTjBDAKtHIl_EPi5uyzLiX8D56KNJ75FzKchUIfBr4L0y7215hvDV3CrCl7f-q2tkYus018HJ-VueVAmYCE92TdtfnVW3Goq26Um-Xzey5xCoPHeqn/s666/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Elegan Image Accordion Dengan CSS3 & Jquery" border="0" height="239" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinDhbuQ00aDPNF3-tMvKGHTZiooiqTjBDAKtHIl_EPi5uyzLiX8D56KNJ75FzKchUIfBr4L0y7215hvDV3CrCl7f-q2tkYus018HJ-VueVAmYCE92TdtfnVW3Goq26Um-Xzey5xCoPHeqn/s320/Capture.PNG" title="Elegan Image Accordion Dengan CSS3 & Jquery" width="320" /></a></div><div style="text-align: left;">Elegan Image Accordion Dengan CSS3 & Jquery | Image Accordion ini, sebagian codenya ada dari template jhony wuss dari mas kolis. Sedikit menggunakan JS dan CSS, kalau ini di pasang di blog, tidak terlalu menambah berat badan blog alias loading enteng. <h3>CSS, Image Accordion</h3><pre class="brush:js;"><style type="text/css"> ul.accordion{     list-style:none;       position:relative;     right:80px;     top:0px;     font-family: Cambria, serif;     font-size: 16px;     font-style: italic;     line-height: 1.5em; } ul.accordion li{     float:right;     width:115px;     height:480px;     display:block;     border-right:2px solid #fff;     border-bottom:2px solid #fff;     background-color:#fff;     background-repeat:no-repeat;     background-position:center center;     position:relative;     overflow:hidden;     cursor:pointer;     -moz-box-shadow:1px 3px 15px #555;     -webkit-box-shadow:1px 3px 15px #555;     box-shadow:1px 3px 15px #555; } ul.accordion li.bg1{     background-image:url(https://sphotos-b.xx.fbcdn.net/hphotos-prn2/p480x480/972359_657990040884651_1321185070_n.png);} /*URL GAMBAR*/ ul.accordion li.bg2{     background-image:url(https://sphotos-b.xx.fbcdn.net/hphotos-prn2/p480x480/972359_657990040884651_1321185070_n.png); /*URL GAMBAR*/ } ul.accordion li.bg3{     background-image:url(https://sphotos-b.xx.fbcdn.net/hphotos-prn2/p480x480/972359_657990040884651_1321185070_n.png); /*URL GAMBAR*/ } ul.accordion li.bg4{     background-image:url(https://sphotos-b.xx.fbcdn.net/hphotos-prn2/p480x480/972359_657990040884651_1321185070_n.png); /*URL GAMBAR*/ } ul.accordion li.bleft{     border-left:2px solid #fff; } ul.accordion li .heading{     background-color:#fff;     padding:10px;     margin-top:60px;     opacity:0.9;     text-transform:uppercase;     font-style:normal;     font-weight:bold;     letter-spacing:1px;     font-size:14px;     color:#444;     text-align:center;     text-shadow:-1px -1px 1px #ccc; } ul.accordion li .description{     position:absolute;     width:480px;     height:175px;     bottom:0px;     left:0px;     display:none; } ul.accordion li .description h2{     text-transform:uppercase;     font-style:normal;     font-weight:bold;     letter-spacing:1px;     font-size:45px;     color:#444;     text-align:left;     margin:0px 0px 15px 20px;     text-shadow:-1px -1px 1px #ccc; } ul.accordion li .description p{     line-height:14px;     font-color:#000;     margin:10px 22px;     font-family: "Trebuchet MS", sans-serif;     font-size: 12px;     font-style: italic;     font-weight: normal;     text-transform: none;     letter-spacing: normal;     line-height: 1.6em; } ul.accordion li .description a{     position:absolute;     bottom:5px;     left:20px;     text-transform:uppercase;     font-style:normal;     font-size:11px;     text-decoration:none;     color:#888; } ul.accordion li .description a:hover{     color:#333;     text-decoration:underline; } ul.accordion li .bgDescription{     background:transparent url(http://s20.postimg.org/h4kckk0m5/bg_Description.png) repeat-x top left;     height:340px;     position:absolute;     bottom:0px;     left:0px;     width:100%;     display:none; } </style></pre><h3>HTML, Image Accordion</h3><pre class="brush:js;"><ul class="accordion" id="accordion"> <li class="bg1"> <div class="heading"> Delete</div> <div class="bgDescription"> </div> <div class="description"> <h2>Delete</h2> Tulisan Anda <a href="http://www.blogger.com/">more →</a> </div> </li> <li class="bg2"> <div class="heading"> Write</div> <div class="bgDescription"> </div> <div class="description"> <h2>Write</h2> Tulisan Anda <a href="http://www.blogger.com/">more →</a> </div> </li> <li class="bg3"> <div class="heading"> Wammy</div> <div class="bgDescription"> </div> <div class="description"> <h2>Wammy</h2> Tulisan Anda <a href="http://www.blogger.com/">more →</a> </div> </li> <li class="bg4 bleft"> <div class="heading">Admin</div> <div class="bgDescription"> </div> <div class="description"> <h2>Admin</h2> Tulisan Anda <a href="http://www.blogger.com/">more →</a> </div> </li> </ul></pre><h3>JS, Image Accordion</h3><pre class="brush:js;"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>         <script type="text/javascript">             $(function() {                 $('#accordion > li').hover(                     function () {                         var $this = $(this);                         $this.stop().animate({'width':'480px'},500);                         $('.heading',$this).stop(true,true).fadeOut();                         $('.bgDescription',$this).stop(true,true).slideDown(500);                         $('.description',$this).stop(true,true).fadeIn();                     },                     function () {                         var $this = $(this);                         $this.stop().animate({'width':'115px'},1000);                         $('.heading',$this).stop(true,true).fadeIn();                         $('.description',$this).stop(true,true).fadeOut(500);                         $('.bgDescription',$this).stop(true,true).slideUp(700);                     }                 );             });         </script></pre> Percobaan ini, dilakukan pada Dreamweaver, jadi belum tau apakah bisa valid di blogger. </div><div style="text-align: center;"><a class="button" href="http://iframe-wammy.blogspot.com/2013/07/ul.html" target="_blank">ISLUSTRASI</a></div>

Elegan Image Accordion Dengan CSS3 & Jquery

Elegan Image Accordion Dengan CSS3 & Jquery | Image Accordion ini, sebagian codenya ada dari template jhony wuss dari mas kolis. Sedikit menggunakan JS dan CSS, kalau ini di pasang di blog, tidak terlalu menambah berat badan blog alias loading enteng. CSS, Image Accordionul.accordion{ list-style…

Baca selengkapnya »

Jul 04, 2013

Membuat Form Login Cantik Dan Simple

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4ptOnDNG1StBZECmVM0bMar6_4uxvR6qI4tD2VtnSw7kSBSvDEr_yGk_H8E_S9tfcgheHFy20k_-Uj8VBe5npNIe_UXgpp5MoHorkU7WdQ7c2M8BFlbpSi5Qu-JBxCjZlfLimtRmz2A88/s312/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Form Login Cantik Dan Simple" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4ptOnDNG1StBZECmVM0bMar6_4uxvR6qI4tD2VtnSw7kSBSvDEr_yGk_H8E_S9tfcgheHFy20k_-Uj8VBe5npNIe_UXgpp5MoHorkU7WdQ7c2M8BFlbpSi5Qu-JBxCjZlfLimtRmz2A88/s312/Capture.PNG" title="Membuat Form Login Cantik Dan Simple" /></a></div> Membuat Form Login Cantik Dan Simple | Kalau di artikel sebelumnya, adalah form login, kali ini juga form login.hehe..Dengan Javascript yang sama, dan sebernarnya HTMLnya pun sama. Ini bisa di pakai di Form Login atau Form Signup, tergantung pemakaian. <h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;">JS, Form Login Cantik Dan Simple</h3>Anda bisa download dan lihat script via Dropbox. Atau sama seperti punya saya. (Upload Via Yourjavascript.com). <pre><script type="text/javascript" src="http://yourjavascript.com/232147282/modernizr-custom-63321.js"></script></pre> <div style="text-align: center;"> <a alt="js" class="button" href="https://www.dropbox.com/s/s85gd77xln8a1ys/modernizr.custom.63321.js" title="JSnya">Download JS Via Dropbox</a></div><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;">CSS3, Form Login Cantik Dan Simple</h3><pre class="brush:js;"><style type="text/css"> *, *:after, *:before {     -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     -ms-box-sizing: border-box;     -o-box-sizing: border-box;     box-sizing: border-box;     padding: 0;     margin: 0; } .clearfix:after {     content: "";     display: table;     clear: both; } .bocahitform {     /* Size and position */     width: 300px;     margin: 60px auto 30px;     padding: 10px;     position: relative;     /* Font styles */     font-family: 'Raleway', 'Lato', Arial, sans-serif;     color: white;     text-shadow: 0 2px 1px rgba(0,0,0,0.3); } .bocahitform, #open {     font-size: 22px;     padding-bottom: 20px; } .bocahitform input[type=text], .bocahitform input[type=password] {     /* Size and position */     width: 100%;     padding: 8px 4px 8px 10px;     margin-bottom: 15px;     /* Styles */     border: 1px solid #4e3043; /* Fallback */     border: 1px solid rgba(78,48,67, 0.8);     background: rgba(0,0,0,0.15);     border-radius: 2px;     box-shadow:         0 1px 0 rgba(255,255,255,0.2),         inset 0 1px 1px rgba(0,0,0,0.1);     -webkit-transition: all 0.3s ease-out;     -moz-transition: all 0.3s ease-out;     -ms-transition: all 0.3s ease-out;     -o-transition: all 0.3s ease-out;     transition: all 0.3s ease-out;     /* Font styles */     font-family: 'Raleway', 'Lato', Arial, sans-serif;     color: #fff;     font-size: 13px; } /* Placeholder style (from http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css) */ .bocahitform input::-webkit-input-placeholder {     color: rgba(37,21,26,0.5);     text-shadow: 0 1px 0 rgba(255,255,255,0.15); } .bocahitform input:-moz-placeholder {     color: rgba(37,21,26,0.5);     text-shadow: 0 1px 0 rgba(255,255,255,0.15); } .bocahitform input:-ms-input-placeholder {     color: rgba(37,21,26,0.5);     text-shadow: 0 1px 0 rgba(255,255,255,0.15); } .bocahitform input[type=text]:hover, .bocahitform input[type=password]:hover {     border-color: #333; } .bocahitform input[type=text]:focus, .bocahitform input[type=password]:focus, .bocahitform input[type=submit]:focus {     box-shadow:         0 1px 0 rgba(255,255,255,0.2),         inset 0 1px 1px rgba(0,0,0,0.1),         0 0 0 3px rgba(255,255,255,0.15);     outline: none; } /* Fallback */ .no-boxshadow .bocahitform input[type=text]:focus, .no-boxshadow .bocahitform input[type=password]:focus {     outline: 1px solid white; } .bocahitform input[type=submit] {     /* Size and position */     width: 100%;     padding: 8px 5px;        /* Styles */     background: #634056;     background: -moz-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));     background: -ms-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));     background: -o-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));     background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(99,64,86,0.5)), to(rgba(76,49,65,0.7)));     background: -webkit-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));     background: linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));       border-radius: 5px;     border: 1px solid #4e3043;     box-shadow: inset 0 1px rgba(255,255,255,0.4), 0 2px 1px rgba(0,0,0,0.1);     cursor: pointer;     -webkit-transition: all 0.3s ease-out;     -moz-transition: all 0.3s ease-out;     -ms-transition: all 0.3s ease-out;     -o-transition: all 0.3s ease-out;     transition: all 0.3s ease-out;     /* Font styles */     color: white;     text-shadow: 0 1px 0 rgba(0,0,0,0.3);     font-size: 16px;     font-weight: bold;     font-family: 'Raleway', 'Lato', Arial, sans-serif; } .bocahitform input[type=submit]:hover {     box-shadow:         inset 0 1px rgba(255,255,255,0.2),         inset 0 20px 30px rgba(99,64,86,0.5); } /* Fallback */ .no-boxshadow .bocahitform input[type=submit]:hover {     background: #594642; } .bocahitform label {     display: none;     padding: 0 0 5px 2px;     cursor: pointer; } .bocahitform label:hover ~ input {     border-color: #333; } .no-placeholder .bocahitform label {     display: block; } </style> </pre><blockquote class="tr_bq">Anda bisa mengganti #open, dengan tag <H1>, bentuknya menjadi .bocahitform h1 {</blockquote><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;">HTML, Form Login Cantik Dan Simple</h3><pre class="brush:js;"><section class="main">                 <form class="bocahitform">                     <div id="open">Login or Register</div>                                             <label for="login">Username or email</label>                         <input type="text" name="login" placeholder="Username or email" required>                                                                 <label for="password">Password</label>                         <input type="password" name='password' placeholder="Password" required>                                                                 <input type="submit" name="submit" value="Continue">                                           </form>             </section></pre> <div style="text-align: center;"><a alt="demo" class="button" href="http://iframe-wammy.blogspot.com/2013/07/cantik-dan-simple.html" title="DEMO">ISLUSTRASI</a></div>

Membuat Form Login Cantik Dan Simple

Membuat Form Login Cantik Dan Simple | Kalau di artikel sebelumnya, adalah form login, kali ini juga form login.hehe..Dengan Javascript yang sama, dan sebernarnya HTMLnya pun sama. Ini bisa di pakai di Form Login atau Form Signup, tergantung pemakaian.JS, Form Login Cantik Dan SimpleAnda bisa downlo…

Baca selengkapnya »

Jul 01, 2013

Modifikasi Form Login Dengan CSS3 Dan Javascript

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPXMSXNYR1BAYNM6J2Q6oNB9lzAy7entYNasdZ6HnQNXRpepg0g2LAQXAk9sYg5N0_Ev_QotdFDduG8eovm-zSmFFi4dGKmxpd3jXdXfnf70yH5bMoaHQuWan4ZhvkSeNOH0UvHNUEG5c-/s324/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Modifikasi Form Login Dengan CSS3 Dan Javascript" border="0" height="167" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPXMSXNYR1BAYNM6J2Q6oNB9lzAy7entYNasdZ6HnQNXRpepg0g2LAQXAk9sYg5N0_Ev_QotdFDduG8eovm-zSmFFi4dGKmxpd3jXdXfnf70yH5bMoaHQuWan4ZhvkSeNOH0UvHNUEG5c-/s320/Capture.PNG" title="Modifikasi Form Login Dengan CSS3 Dan Javascript" width="320" /></a></div> Modifikasi Form Login Dengan CSS3 Dan Javascript | Form login biasa muncul di web dinamis. Yang awalnya hanya kumpulan dari <table> dan <input>, kali ini hanya <input> yang di modifikasi dengan CSS3 dan JS. Hanya sedikit dan tidak terlalu rumit. Pemakaian yang hemat tempat. <h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;">JS, Form Login</h3>Anda bisa download dan lihat script via Dropbox. Atau sama seperti punya saya. (Upload Via Yourjavascript.com). <pre><script type="text/javascript" src="http://yourjavascript.com/232147282/modernizr-custom-63321.js"></script></pre> <div style="text-align: center;"> <a alt="js" class="button" href="https://www.dropbox.com/s/s85gd77xln8a1ys/modernizr.custom.63321.js" title="JSnya">Download JS Via Dropbox</a></div><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;">CSS3, Form Login</h3><pre class="brush:js;"><style type="text/css"> *, *:after, *:before {     -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     -ms-box-sizing: border-box;     -o-box-sizing: border-box;     box-sizing: border-box;     padding: 0;     margin: 0; } .clearfix:after {     content: "";     display: table;     clear: both; } .bocahform {     font-family: 'Coda';     font-weight: 400;     /* Size and position */     width: 300px;     position: relative;     margin: 60px auto 30px;     padding: 10px;     overflow: hidden;     /* Styles */     background: #111;     border-radius: 0.4em;     border: 1px solid #191919;     box-shadow:         inset 0 0 2px 1px rgba(255,255,255,0.08),         0 16px 10px -8px rgba(0, 0, 0, 0.6); } .bocahform label {     /* Size and position */     width: 50%;     float: left;     padding-top: 9px;     /* Styles */     color: #ddd;     font-size: 12px;     text-transform: uppercase;     letter-spacing: 1px;     text-shadow: 0 1px 0 #000;     text-indent: 10px;     font-weight: 700;     cursor: pointer; } .bocahform input[type=text], .bocahform input[type=password] {     /* Size and position */     width: 50%;     float: left;     padding: 8px 5px;     margin-bottom: 10px;     font-size: 12px;     /* Styles */     background: #1f2124; /* Fallback */     background: -moz-linear-gradient(#1f2124, #27292c);     background: -ms-linear-gradient(#1f2124, #27292c);     background: -o-linear-gradient(#1f2124, #27292c);     background: -webkit-gradient(linear, 0 0, 0 100%, from(#1f2124), to(#27292c));     background: -webkit-linear-gradient(#1f2124, #27292c);     background: linear-gradient(#1f2124, #27292c);       border: 1px solid #000;     box-shadow:         0 1px 0 rgba(255,255,255,0.1);     border-radius: 3px;     /* Font styles */     font-family: 'Ubuntu', 'Lato', sans-serif;     color: #fff; } .bocahform input[type=text]:hover, .bocahform input[type=password]:hover, .bocahform label:hover ~ input[type=text], .bocahform label:hover ~ input[type=password] {     background: #27292c; } .bocahform input[type=text]:focus, .bocahform input[type=password]:focus {     box-shadow: inset 0 0 2px #000;     background: #494d54;     border-color: #51cbee;     outline: none; /* Remove Chrome outline */ } .bocahform p:nth-child(3), .bocahform p:nth-child(4) {     float: left;     width: 50%; } .bocahform label[for=remember] {     width: auto;     float: none;     display: inline-block;     text-transform: capitalize;     font-size: 11px;     font-weight: 400;     letter-spacing: 0px;     text-indent: 2px; } .bocahform input[type=checkbox] {     margin-left: 10px;     vertical-align: middle; } .bocahform input[type=submit] {     /* Width and position */     width: 100%;     padding: 8px 5px;       /* Styles */     border: 1px solid #0273dd; /* Fallback */     border: 1px solid rgba(0,0,0,0.4);     box-shadow:         inset 0 1px 0 rgba(255,255,255,0.3),         inset 0 10px 10px rgba(255,255,255,0.1);     border-radius: 3px;     background: #38a6f0;     cursor:pointer;       /* Font styles */     font-family: 'Ubuntu', 'Lato', sans-serif;     color: white;     font-weight: 700;     font-size: 15px;     text-shadow: 0 -1px 0 rgba(0,0,0,0.8); } .bocahform input[type=submit]:hover {     box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); } .bocahform input[type=submit]:active {     background: #287db5;     box-shadow: inset 0 0 3px rgba(0,0,0,0.6);     border-color: #000; /* Fallback */     border-color: rgba(0,0,0,0.9); } .no-boxshadow .bocahform input[type=submit]:hover {     background: #2a92d8; } .bocahform:after {     /* Size and position */     content: "";     height: 1px;     width: 33%;     position: absolute;     left: 20%;     top: 0;     /* Styles */     background: -moz-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);     background: -ms-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);     background: -o-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);     background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), color-stop(0.25, #444), color-stop(0.5, #b6b6b8), color-stop(0.75, #444), to(transparent));     background: -webkit-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);     background: linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent); } .bocahform:before {     /* Size and position */     content: "";     width: 8px;     height: 5px;     position: absolute;     left: 34%;     top: -7px;         /* Styles */     border-radius: 50%;     box-shadow: 0 0 6px 4px #fff; } .bocahform p:nth-child(1):before{     /* Size and position */     content:"";     width:250px;     height:100px;     position:absolute;     top:0;     left:45px;     /* Styles */     -webkit-transform: rotate(75deg);     -moz-transform: rotate(75deg);     -ms-transform: rotate(75deg);     -o-transform: rotate(75deg);     transform: rotate(75deg);     background: -moz-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));     background: -ms-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));     background: -o-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));     background: -webkit-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));     background: linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));     pointer-events:none; } .no-pointerevents .bocahform p:nth-child(1):before {     display: none; } </style> </pre> <h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;">HTML, Form Login</h3><pre class="brush:js;"><section class="main">                 <form class="bocahform">                                             <label for="login">Username</label>                         <input type="text" name="login" id="login" placeholder="Username">                                                                 <label for="password">Password</label>                         <input type="password" name="password" id="password" placeholder="Password">                                                                 <input type="checkbox" name="remember" id="remember">                         <label for="remember">Remember me</label>                                                                 <input type="submit" name="submit" value="Sign in">                                           </form>             </section></pre> <div style="text-align: center;"><a alt="demo" class="button" href="http://iframe-wammy.blogspot.com/2013/06/afterbefore-webkit-box-sizing-border.html" target="_blank" title="ILUSTRASI">ILUSTRASI</a></div>

Modifikasi Form Login Dengan CSS3 Dan Javascript

Modifikasi Form Login Dengan CSS3 Dan Javascript | Form login biasa muncul di web dinamis. Yang awalnya hanya kumpulan dari dan , kali ini hanya yang di modifikasi dengan CSS3 dan JS. Hanya sedikit dan tidak terlalu rumit. Pemakaian yang hemat tempat.JS, Form LoginAnda bisa download dan lihat scri…

Baca selengkapnya »

Jul 01, 2013

Membuat Waktu Pemberitahuan Konyol Dengan CSS3 & Modernizr

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTLiABIZ0a2oZiz5hAwe2gAOhYWFvmZvJ1Ndc5-zIUikNXOPzMaaf-_pWnpOw__p6ZDMhtXcgmFrmmVsF23-4O3bUJGTIV46P1d5qFTLschFvzZrafeAQ-26N9u8aQzhqk1IYJiNTbBtDp/s419/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Waktu Pemberitahuan Konyol Dengan CSS3 & Modernizr" border="0" height="224" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTLiABIZ0a2oZiz5hAwe2gAOhYWFvmZvJ1Ndc5-zIUikNXOPzMaaf-_pWnpOw__p6ZDMhtXcgmFrmmVsF23-4O3bUJGTIV46P1d5qFTLschFvzZrafeAQ-26N9u8aQzhqk1IYJiNTbBtDp/s320/Capture.PNG" title="Membuat Waktu Pemberitahuan Konyol Dengan CSS3 & Modernizr" width="320" /></a></div>Membuat Waktu Pemberitahuan Dengan CSS3 & Modernizr | Masih di kategori <a href="http://www.bocahit.com/search/label/Kreasiku" target="_blank">Kreasiku</a>. Dan masih di CSS. Sekarang apa yang anda pikirkan tentang judul diatas? aku sendiri juga tidak paham. Pokoknya Waktu Pemberitahuan Dengan CSS3 dan Javascript. Asal mula javascript dari Modernizr, jadi bukan dari Wammy yang masih bodoh ini. Kalau tidak percaya, lihat <a href="http://modernizr.com/">modernizr.com</a>. <h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;">MODERNIZR, Waktu Pemberitahuan Konyol</h3><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigCzVbIaGgkZNcHNyN0LocTtOuDmJrAVTTvREPxQurh5KW8CnaBP7rnUPyd0v1pxqjbrVnEo8GrGAOQFBjSW-tuk0Bg4MCUyqM6P5lE5qBeCEygShGdhn6qlgY0mSoB-NEWhEL4FoL-6FO/s1100/js.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Waktu Pemberitahuan Konyol Dengan CSS3 & Modernizr" border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigCzVbIaGgkZNcHNyN0LocTtOuDmJrAVTTvREPxQurh5KW8CnaBP7rnUPyd0v1pxqjbrVnEo8GrGAOQFBjSW-tuk0Bg4MCUyqM6P5lE5qBeCEygShGdhn6qlgY0mSoB-NEWhEL4FoL-6FO/s400/js.PNG" title="Membuat Waktu Pemberitahuan Konyol Dengan CSS3 & Modernizr" width="400" /></a></div> Kelihatan tidak? kalau ingin yang simple <pre><script type="text/javascript" src="<a href="http://yourjavascript.com/21189526931/modernizr-custom-39460.js" target="_blank">http://yourjavascript.com/21189526931/modernizr-custom-39460.js</a>"></script></pre> Tapi kalau mau download. <div style="text-align: center;"><a href="http://www.mediafire.com/download/ej6sncw74zcnh4s/modernizr.custom.39460.js" target="_blank">DOWNLOAD MODERNIZR</a> </div><div style="text-align: center;"> </div><div style="text-align: center;"><a class="button" href="http://iframe-wammy.blogspot.com/2013/06/check-this-hai-there-im-herlambang.html" target="_blank">ILUSTRASI 1</a>                   <a class="button" href="http://herlambang.net78.net/?menu=profil" target="_blank">ILUSTRASI 2</a></div><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;">CSS, Waktu Pemberitahuan Konyol</h3><pre class="brush:js;"><style type="text/css"> .wammy-box {     width: 360px;     position: relative;     margin: 0 auto 20px auto;     padding: 25px 15px;     text-align: left;     border-radius: 5px;         box-shadow: 0 1px 1px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.6);      opacity: 0;     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";     filter: alpha(opacity=0);        cursor: default;     display: none; } .wammy-box p {     font-weight: bold;     font-size: 16px;     margin: 0;     padding: 0 10px 0 60px;     text-shadow: 0 1px 1px rgba(255,255,255,0.6); } .wammy-box p:before{     text-align: center;     border: 3px solid rgba(255, 255, 255, 1);     margin-top: -17px;     top: 50%;     left: 20px;     width: 30px;     content: 'i';     font-size: 30px;     color: rgba(255, 255, 255, 1);     position: absolute;     height: 30px;     line-height: 30px;     border-radius: 50%;     text-shadow: 1px 1px 1px rgba(0,0,0,0.1);     box-shadow: 1px 1px 1px rgba(0,0,0,0.1); } .wammy-progress {     width: 0;     height: 4px;     background: rgba(255,255,255,0.3);     position: absolute;     bottom: 5px;     left: 2%;     border-radius: 3px;     box-shadow:         inset 0 1px 1px rgba(0,0,0,0.05),         0 -1px 0 rgba(255,255,255,0.6); } /* Warna Kotak */ .wammy-box-color-1{     background: #ff00b6;     border: 1px solid #ff00b6; } .wammy-box-color-1 p {     color: #7d5912; } .wammy-box-color-2{     background: #99ffb1;     border: 1px solid #7ce294; } .wammy-box-color-2 p {     color: #2d8241; } .wammy-box-color-3{     background: #a6fdbf;     border: 1px solid #a6fdbf; } .wammy-box-color-3 p {     color: #69288b; } input.klo-check:checked ~ section .wammy-box {     display: block;     -webkit-animation: fadeOut 5s linear forwards;     -moz-animation: fadeOut 5s linear forwards;     -o-animation: fadeOut 5s linear forwards;     -ms-animation: fadeOut 5s linear forwards;     animation: fadeOut 5s linear forwards; } input.klo-check:checked ~ section .wammy-box .wammy-progress {     -webkit-animation: runProgress 4s linear forwards 0.5s;     -moz-animation: runProgress 4s linear forwards 0.5s;     -o-animation: runProgress 4s linear forwards 0.5s;     -ms-animation: runProgress 4s linear forwards 0.5s;     animation: runProgress 4s linear forwards 0.5s; } /* Jika menggunakan JavaScript anda bisa menambahkan class: */ .wammy-box.wammy-box-active {     display: block;     -webkit-animation: fadeOut 5s linear forwards;     -moz-animation: fadeOut 5s linear forwards;     -o-animation: fadeOut 5s linear forwards;     -ms-animation: fadeOut 5s linear forwards;     animation: fadeOut 5s linear forwards; } .wammy-box.wammy-box-active .wammy-progress {     -webkit-animation: runProgress 4s linear forwards 0.5s;     -moz-animation: runProgress 4s linear forwards 0.5s;     -o-animation: runProgress 4s linear forwards 0.5s;     -ms-animation: runProgress 4s linear forwards 0.5s;     animation: runProgress 4s linear forwards 0.5s; } @-webkit-keyframes fadeOut {     0% { opacity: 0; }     10% { opacity: 1; }     90% { opacity: 1; -webkit-transform: translateY(0px);}     99% { opacity: 0; -webkit-transform: translateY(-30px);}     100% { opacity: 0; } } @-moz-keyframes fadeOut {     0% { opacity: 0; }     10% { opacity: 1; }     90% { opacity: 1; -moz-transform: translateY(0px);}     99% { opacity: 0; -moz-transform: translateY(-30px);}     100% { opacity: 0; } } @-o-keyframes fadeOut {     0% { opacity: 0; }     10% { opacity: 1; }     90% { opacity: 1; -o-transform: translateY(0px);}     99% { opacity: 0; -o-transform: translateY(-30px);}     100% { opacity: 0; } } @-ms-keyframes fadeOut {     0% { opacity: 0; }     10% { opacity: 1; }     90% { opacity: 1; -ms-transform: translateY(0px);}     99% { opacity: 0; -ms-transform: translateY(-30px);}     100% { opacity: 0; } } @keyframes fadeOut {     0% { opacity: 0; }     10% { opacity: 1; }     90% { opacity: 1; transform: translateY(0px);}     99% { opacity: 0; transform: translateY(-30px);}     100% { opacity: 0; } } @-webkit-keyframes runProgress {     0%{ width: 0%; background: rgba(255,255,255,0.3); }     100%{ width: 96%; background: rgba(255,255,255,1); } } @-moz-keyframes runProgress {     0%{ width: 0%; background: rgba(255,255,255,0.3); }     100%{ width: 96%; background: rgba(255,255,255,1); } } @-o-keyframes runProgress {     0%{ width: 0%; background: rgba(255,255,255,0.3); }     100%{ width: 96%; background: rgba(255,255,255,1); } } @-ms-keyframes runProgress {     0%{ width: 0%; background: rgba(255,255,255,0.3); }     100%{ width: 96%; background: rgba(255,255,255,1); } } @keyframes runProgress {     0%{ width: 0%; background: rgba(255,255,255,0.3); }     100%{ width: 96%; background: rgba(255,255,255,1); } } /*Membedakan durasi*/ input.klo-check:checked ~ section .wammy-box:nth-child(2) {     -webkit-animation-duration: 6s;     -moz-animation-duration: 6s;     -o-animation-duration: 6s;     -ms-animation-duration: 6s;     animation-duration: 6s;         -webkit-animation-delay: 0.2s;     -moz-animation-delay: 0.2s;     -o-animation-delay: 0.2s;     -ms-animation-delay: 0.2s;     animation-delay: 0.2s; } input.klo-check:checked ~ section .wammy-box:nth-child(2) .wammy-progress {     -webkit-animation-duration: 5s;     -moz-animation-duration: 5s;     -o-animation-duration: 5s;     -ms-animation-duration: 5s;     animation-duration: 5s;         -webkit-animation-delay: 0.7s;     -moz-animation-delay: 0.7s;     -o-animation-delay: 0.7s;     -ms-animation-delay: 0.7s;     animation-delay: 0.7s; } input.klo-check:checked ~ section .wammy-box:nth-child(3) {     -webkit-animation-duration: 9s;     -moz-animation-duration: 9s;     -o-animation-duration: 9s;     -ms-animation-duration: 9s;     animation-duration: 9s;         -webkit-animation-delay: 0.4s;     -moz-animation-delay: 0.4s;     -o-animation-delay: 0.4s;     -ms-animation-delay: 0.4s;     animation-delay: 0.4s; } input.klo-check:checked ~ section .wammy-box:nth-child(3) .wammy-progress {     -webkit-animation-duration: 7.5s;     -moz-animation-duration: 7.5s;     -o-animation-duration: 7.5s;     -ms-animation-duration: 7.5s;     animation-duration: 7.5s;         -webkit-animation-delay: 0.9s;     -moz-animation-delay: 0.9s;     -o-animation-delay: 0.9s;     -ms-animation-delay: 0.9s;     animation-delay: 0.9s; } /* hover mengatasi masalah browser */ .wammy-box.wammy-box-hoverpause:hover, .wammy-box.wammy-box-hoverpause:hover .wammy-progress{     -webkit-animation-play-state: paused;     -moz-animation-play-state: paused;     -o-animation-play-state: paused;     -ms-animation-play-state: paused;     animation-play-state: paused; }</pre><pre class="brush:js;"></style> </pre> <h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;">HTML, Waktu Pemberitahuan Konyol</h3><pre class="brush:js;"><section>                             <div class="wammy-box wammy-box-color-1">                     Hai, There! I'm Herlambang!                     <div class="wammy-progress"></div>                 </div>                                 <div class="wammy-box wammy-box-color-2">                     Wammy! Just my nick! I'm Developer!</                     <div class="wammy-progress"></div>                 </div>                                 <div class="wammy-box wammy-box-color-3">                     Visit, www.bocahit.com                     <div class="wammy-progress"></div>                 </div>                             </section></pre> Hauf, sering - sering klik back to top ya. <div style="text-align: center;"><a class="button" href="http://iframe-wammy.blogspot.com/2013/06/check-this-hai-there-im-herlambang.html" target="_blank">ILUSTRASI</a> </div>

Membuat Waktu Pemberitahuan Konyol Dengan CSS3 & Modernizr

Membuat Waktu Pemberitahuan Dengan CSS3 & Modernizr | Masih di kategori Kreasiku. Dan masih di CSS. Sekarang apa yang anda pikirkan tentang judul diatas? aku sendiri juga tidak paham. Pokoknya Waktu Pemberitahuan Dengan CSS3 dan Javascript. Asal mula javascript dari Modernizr, jadi bukan dari Wammy …

Baca selengkapnya »

Jun 28, 2013

Membuat Pure Slider Dengan CSS3

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoeQ5yHyB_XPQ3l_ehKYXA7e8qNtOgrovzPzvTcluhyCJXZasL-niIlM3YCc_5TpbetCwIBCmDM2d4h-dhjjzJngirhFYGXiqZrfUuVVFHlAPslczMPCE-RLScK11kti3YCtAeaEjLjN6U/s612/Pure.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Pure Slider Dengan CSS3 " border="0" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoeQ5yHyB_XPQ3l_ehKYXA7e8qNtOgrovzPzvTcluhyCJXZasL-niIlM3YCc_5TpbetCwIBCmDM2d4h-dhjjzJngirhFYGXiqZrfUuVVFHlAPslczMPCE-RLScK11kti3YCtAeaEjLjN6U/s320/Pure.PNG" title="Membuat Pure Slider Dengan CSS3 " width="320" /></a></div> Membuat Pure Slider Dengan CSS3 | Seperti janji ku kemarin, kalau akan share tentang slider. Nah seperti kemarin menggunakan CSS3 tanpa JS atau jquery. Jadi mudah ketika mengatur ini dan itu. Slider ini pantas di letakkan pada homepage saja, memang karena ukuran yang relatif membuat sesak blog. Jadi silakan bagi anda yang ingin memakai slider ini. <div style="text-align: center;"><a class="button" href="http://iframe-wammy.blogspot.com/2013/06/layout.html" target="_blank">ILUSTRASI</a> </div> Kalau ada link download kan itu terlalu mainstream, sekarang anda ambil saja code di bawah ini. <h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;">CSS, CSS3 PURE SLIDER</h3><pre class="brush:js;"><style type="text/css"> /* LAYOUT */ .bocahit { margin:0 auto; overflow:hidden; width:960px; } /* CONTENT SLIDER */ #content-slider { width:100%; height:360px; margin:10px auto 0; } /* SLIDER */ #slider { background:#000; border:5px solid #eaeaea; box-shadow:1px 1px 5px rgba(0,0,0,0.7); height:320px; width:600px; overflow:visible; position:relative; } #wammy { overflow:hidden; height:320px; } #slider ul { margin:0; padding:0; position:relative; } #slider li { width:680px; height:320px; position:absolute; top:-325px; list-style:none; } #slider li.firstanimation { -moz-animation:cycle 25s linear infinite; -webkit-animation:cycle 25s linear infinite; } #slider li.secondanimation { -moz-animation:cycletwo 25s linear infinite; -webkit-animation:cycletwo 25s linear infinite; } #slider li.thirdanimation { -moz-animation:cyclethree 25s linear infinite; -webkit-animation:cyclethree 25s linear infinite; } #slider li.fourthanimation { -moz-animation:cyclefour 25s linear infinite; -webkit-animation:cyclefour 25s linear infinite; } #slider li.fifthanimation { -moz-animation:cyclefive 25s linear infinite; -webkit-animation:cyclefive 25s linear infinite; } #slider .tooltip { background:rgba(0,0,0,0.7); width:300px; height:60px; position:relative; bottom:75px; left:-320px; -moz-transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; } #slider .tooltip p { color:#fff; font:"Coda"; font-size:24px; font-weight:300; line-height:60px; padding:0 0 0 20px; } #slider li#first:hover .tooltip, #slider li#second:hover .tooltip, #slider li#third:hover .tooltip, #slider li#fourth:hover .tooltip, #slider li#fifth:hover .tooltip { left:0px; } #slider:hover li, #slider:hover .progress-bar { -moz-animation-play-state:paused; -webkit-animation-play-state:paused; } /* PROGRESS BAR */ .progress-bar { position:relative; top:-5px; width:680px; height:5px; background:#000; -moz-animation:fullexpand 25s ease-out infinite; -webkit-animation:fullexpand 25s ease-out infinite; } /* ANIMATION */ @-moz-keyframes cycle { 0% { top:0px; } 4% { top:0px; } 16% { top:0px; opacity:1; z-index:0; } 20% { top:325px; opacity:0; z-index:0; } 21% { top:-325px; opacity:0; z-index:-1; } 92% { top:-325px; opacity:0; z-index:0; } 96% { top:-325px; opacity:0; } 100%{ top:0px; opacity:1; } } @-moz-keyframes cycletwo { 0% { top:-325px; opacity:0; } 16% { top:-325px; opacity:0; } 20% { top:0px; opacity:1; } 24% { top:0px; opacity:1; } 36% { top:0px; opacity:1; z-index:0; } 40% { top:325px; opacity:0; z-index:0; } 41% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-moz-keyframes cyclethree { 0% { top:-325px; opacity:0; } 36% { top:-325px; opacity:0; } 40% { top:0px; opacity:1; } 44% { top:0px; opacity:1; } 56% { top:0px; opacity:1; } 60% { top:325px; opacity:0; z-index:0; } 61% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-moz-keyframes cyclefour { 0% { top:-325px; opacity:0; } 56% { top:-325px; opacity:0; } 60% { top:0px; opacity:1; } 64% { top:0px; opacity:1; } 76% { top:0px; opacity:1; z-index:0; } 80% { top:325px; opacity:0; z-index:0; } 81% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-moz-keyframes cyclefive { 0% { top:-325px; opacity:0; } 76% { top:-325px; opacity:0; } 80% { top:0px; opacity:1; } 84% { top:0px; opacity:1; } 96% { top:0px; opacity:1; z-index:0; } 100%{ top:325px; opacity:0; z-index:0; } } @-webkit-keyframes cycle { 0% { top:0px; } 4% { top:0px; } 16% { top:0px; opacity:1; z-index:0; } 20% { top:325px; opacity:0; z-index:0; } 21% { top:-325px; opacity:0; z-index:-1; } 50% { top:-325px; opacity:0; z-index:-1; } 92% { top:-325px; opacity:0; z-index:0; } 96% { top:-325px; opacity:0; } 100%{ top:0px; opacity:1; } } @-webkit-keyframes cycletwo { 0% { top:-325px; opacity:0; } 16% { top:-325px; opacity:0; } 20% { top:0px; opacity:1; } 24% { top:0px; opacity:1; } 36% { top:0px; opacity:1; z-index:0; } 40% { top:325px; opacity:0; z-index:0; } 41% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-webkit-keyframes cyclethree { 0% { top:-325px; opacity:0; } 36% { top:-325px; opacity:0; } 40% { top:0px; opacity:1; } 44% { top:0px; opacity:1; } 56% { top:0px; opacity:1; z-index:0; } 60% { top:325px; opacity:0; z-index:0; } 61% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-webkit-keyframes cyclefour { 0% { top:-325px; opacity:0; } 56% { top:-325px; opacity:0; } 60% { top:0px; opacity:1; } 64% { top:0px; opacity:1; } 76% { top:0px; opacity:1; z-index:0; } 80% { top:325px; opacity:0; z-index:0; } 81% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-webkit-keyframes cyclefive { 0% { top:-325px; opacity:0; } 76% { top:-325px; opacity:0; } 80% { top:0px; opacity:1; } 84% { top:0px; opacity:1; } 96% { top:0px; opacity:1; z-index:0; } 100%{ top:325px; opacity:0; z-index:0; } } /* ANIMATION BAR */ @-moz-keyframes fullexpand { 0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; } 4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; } 16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; } 17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; } 18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } } @-webkit-keyframes fullexpand { 0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; } 4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; } 16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; } 17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; } 18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } } </style></pre> <h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;">HTML, CSS3 PURE SLIDER </h3><pre class="brush:js;"><div class="bocahit"> <div id="content-slider"> <div id="slider"> <div id="wammy"> <ul> <li id="first" class="firstanimation"> <a href="http://www.bocahit.com/search/label/Pemrograman"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3iFEXFHk6Uz61UFh3PIxy3ANZjosKmt2kTnz-od6fYmGsmWqmnsOJ10I72Mi_PCFoeC-ibk-Albtd8owmJpLKC9AMKPvzxyg7KMNdWzwuVOB8-VWEVsE2gU9LatKf4v-wojJx-WGLXBmv/s680/C.png" alt="Pemrograman Bahasa C"/> </a> <div class="tooltip"> Pemrograman C </div> </li> <li id="second" class="secondanimation"> <a href="http://www.bocahit.com/search/label/Cosplay"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJcYHZcAgze_SKmULrmsKRi3mYsxgJcAg0SDUfXNRiWvqsrSjG5vF_oRdKSvQZH902i7HQZGgjyfwwnW6e5yZWWRjHMMV-KJRyOJYoTxSgVeXlpXMpiL5FDMTzXmrMZk4EqzO7qLtdur9f/s680/CZ.png" alt="Tips Jitu Cosplayer"/> </a> <div class="tooltip"> Tips Jitu Cosplayer </div> </li> <li id="third" class="thirdanimation"> <a href="#"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg56CpbT0egHIjh0BBMcGkNXTvhVNyFz1dLKOTG8Fx5J0SrnM9NMfx3pNepp42Y3awvUe7LjIzWIguoc03SbJ8lQUwfAhtF_lm4oOni9TUNQfPgGIeae_2fvJLk2uIKCP1qrlZ99BE6KC44/s680/City%2520Hunter.png" alt="Info Figure"/> </a> <div class="tooltip"> Info Figure </div> </li> <li id="fourth" class="fourthanimation"> <a href="http://www.bocahit.com/search/label/SEO"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfWVhoo-H5ht0LlZJ9ix4LmjEE_Yy3V8K3i15RE8jMw7S8rGui0VWbgY6wPAzPo0nVCSl3qFGa4nGbJDOZrJE5woAaOP0tHVL8tVYRbFPlX2TAy-EB0lQPVC3_ISK9BMyJQwToUohyphenhyphenoizP/s680/SEO.png" alt="Tips SEO"/> </a> <div class="tooltip"> Tips SEO </div> </li> <li id="fifth" class="fifthanimation"> <a href="http://www.bocahit.com/search/label/Blogger"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBJaUC2yrwfvMOu8C9LTFJTIr-CefDuX2ElBFZMwUGXK4Cv6ybZTBsdWiJmUtltkKTUolztWPshvHPD-hPzMlLPIr8zRMKZNVfLvi8eLljFfac6rTP6RvUwOHOBSTLTFTLCtDP7xH-fjDf/s680/blog.png" alt="Tutorial Blog"/> </a> <div class="tooltip"> Tutorial Blogger </div> </li> </ul> </div> <div class="progress-bar"></div> </div> </div> </div></pre> Panjangkah?semakin panjang semakin asik aja,,Selamat Mencoba :D

Membuat Pure Slider Dengan CSS3

Membuat Pure Slider Dengan CSS3 | Seperti janji ku kemarin, kalau akan share tentang slider. Nah seperti kemarin menggunakan CSS3 tanpa JS atau jquery. Jadi mudah ketika mengatur ini dan itu. Slider ini pantas di letakkan pada homepage saja, memang karena ukuran yang relatif membuat sesak blog. Jadi…

Baca selengkapnya »

Jun 28, 2013

Load more posts

D2D :]

Menambah Emotikon Di Komentar Dan Di Artikel Blogger

Tooltips Paling Keren Dengan CSS3

Tooltips Super Duper Keren Dengan CSS3

Iseng - Iseng Dari Tooltips Pakai Pseudo Element Dan & Transisi

Membuat Mega Menu Dengan CSS

Membuat Button Dengan CSS Pseudo Elemen V1

Elegan Image Accordion Dengan CSS3 & Jquery

Membuat Form Login Cantik Dan Simple

Modifikasi Form Login Dengan CSS3 Dan Javascript

Membuat Waktu Pemberitahuan Konyol Dengan CSS3 & Modernizr

Membuat Pure Slider Dengan CSS3

Entri Populer

Arsip Blog