Bagi sobat blogger yang membutuhkan tools dan aplikasi buat memperindah blognya BEN TOOLS
Buat kawan yang mau pasang iklan Silahkan hubungi pada halaman kontak yah...xixixi.
Blog untuk melihat konten berplat-form blogspot di seluruh dunia dan kumpulan tools pendukung operasional blog.
Your ads here!!!
Assalamu'alaikum
Selamat datang di Tutorial Blog for Stylish Blogger. Semoga tidak keberatan untuk membukanya. Sssttt...MOZILLA pakainya yah...! Jangan lupa mampir lagi ya huehuehue. This is blog looks better in FIREFOX. Get MOZILLA™ Happy blogging \m/
Wassalamu'alaikum ☺

Resources

1 2 3 4 5 6 7 8
18 Februari 2014

GRAPHICS STATUS

27 Juli 2011

0 Komentar WTF  X
wavesDatang dari artikel milik google mengenai google material design, yang mana tertulis kata-kata "We challenged ourselves to create a visual language..." dan ternyata responpun berdatangan bak virus penyakit :D Para developer, coderer, scripter whatever the name berlomba menunjukan kabisanya masing-masing! Berikut beberapa contoh hasil karya orang-orang hebat yg terhosting on web codepen codepen.io/search?q=Google+Material+Design.
Setelah melihat karya para maestro kode, dapat kita lihat seksama apa yg menjadi pusat perhatian mereka :-?? Sebagian besar fokus terhadap trick/tutorial animation effect! CMIIW...;)) Berikut salah satu contoh animation click effect inspirasi dari google's material design.

Pokoknya efek blink-blink buricak burinong seperti itulah! Karena banyak master yg berkreasi mengenai hal ini, maka AA Koben pilihkan buat anda master Fians dari Indonesia?
Take a look: publicis-indonesia.github.io/Waves/Planning code
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
 <html>
  <head>
   <meta charset='utf-8'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.pageTitle/></title>
<b:else/>
        <title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>
        <link rel="stylesheet" type="text/css" href=".../waves.css" />
 <b:skin>
  <![CDATA[

  ]]>
 </b:skin>
  </head>
<body>  

 <script type="text/javascript" src=".../waves.js"></script>
 <script type="text/javascript">
  var w = new Waves();
  w.displayEffect();
 </script>
</body>
</html>
Masukan kode CSS (waves.css) mau di hosting atau enggak, terserah kalian. Host JavaScript (waves.js) biar cepat rendering.
Beberapa markup HTML waves:

Flat buttons<a class="waves-effect waves-button">Button A</a>
<button class="waves-effect waves-button">Button B</button>
<input class="waves-effect waves-button" type="submit" value="Button C">
<input class="waves-effect waves-button" type="button" value="Button D">

DIVs<div class="waves-effect waves-block">Plain Box</div>
<div class="colored-box waves-effect waves-light waves-block">Colored Box</div>
<div class="raised-box waves-effect waves-float waves-block">Raised Box</div>

Images<span class="waves-effect">
<img src="LINK-IMAGE.jpg">
</span>
<span class="waves-effect waves-light waves-float">
<img src="LINK-IMAGE.jpg">
</span>

Si yu :-h

0 Komentar WTF  X
Spoiler alert salah satu jenis gaya spoiler yang cukup unik. Mungkin agak-agak mirip dengan trik spoiler popbox spoiler with blurred effect. Full 100% menggunakan bahasa CSS. Jika pada pop-box spoiler teks terlihat blur dan akan jelas ketika melakukan klik. Kalau pada gaya spoiler-alert, teks blur tampak dan akan jelas ketika dilakukan hover!

Vyyavlyayetʹsya , vin buv mertvyy vesʹ tsey chas. Tsey khlopetsʹ povnistyu yoho batʹko i pryntsesa yoho sestra . Vony vse alerhiya na vodu i vse vidbuvayetʹsya z prychyny. Vin vybrav odyn zaraz , ale vin ne buv pershym. Shcho dumav , shcho vin chuzhiy planeti bulo naspravdi Zemlya. Vony zvertayutʹsya lyudy odyn proty odnoho , shchob zrobyty vtorhnennya prostishe. Te , shcho vy dumaly , buly spohady diysno mayutʹ mistse v maybutnʹomu. Modelyuvannya buly realʹnymy .

Apakah sobat tertarik memasang spoiler content full stylish di atas ke dalam blog kalian?

Kode CSS:
.spoiler {
cursor: wait;
position: relative;
color: transparent;
text-align: justify;
text-shadow: 0 0 19px #000;
}
.spoiler::before, .spoiler::after {
color: #000;
display: block;
line-height: 1;
text-align: center;
text-shadow: none;
position: absolute;
font-family: arial, sans-serif;
}
.spoiler::before {
top: 19px;
left: 0;
right: 0;
font-size: inherit;
content: 'Please hover n wait 3 seconds...';
}
.spoiler::after {
top: 0;
opacity: 0;
width: 25px;
font-size: 25px;
content: '3 2 1';
line-height: 72px;
text-align: center;
left: calc(50% - 36px);
clip: rect(0, 72px, 72px, 0);
}
.spoiler:hover {
color: #000;
transition: all 1s;
transition-delay: 3s;
text-shadow: 0 0 0 transparent;
}
.spoiler:hover::before {
animation: countdown-before 4s forwards;
}
.spoiler:hover::after {
animation: countdown-after 4s forwards;
}
@keyframes countdown-before {
25% {
transform: translateY(-24px);
}
75% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(-24px);
}
}
@keyframes countdown-after {
25% {
opacity: 1;
clip: rect(0, 72px, 72px, 0);
transform: translateY(0);
animation-timing-function: steps(1, start);
}
50% {
clip: rect(72px, 72px, 144px, 0);
transform: translateY(-72px);
animation-timing-function: steps(1, start);
}
75% {
opacity: 1;
clip: rect(144px, 72px, 216px, 0);
transform: translateY(-144px);
}
100% {
opacity: 0;
clip: rect(144px, 72px, 216px, 0);
transform: translateY(-144px);
}
}

Planning HTML:<p class="spoiler">

--------- CONTENT HERE ---------

</p>
Source by: codepen.io/lonekorean/details/kocrl

Happy spoiler \m/

0 Komentar WTF  X
Pada artikel sebelumnya bercerita tentang bagaimana cara menyembunyikan image gif menjadi sebuah link dan akan muncul ketika melakukan hover, AA dapat lagi source unik how to stop autoplaying your gifs! Gifffer [github.com/krasimir/gifffer] adalah sebuah perpustakaan JavaScript size kecil (1.8K) yang mencegah autoplaying dari animasi gifs. Kalau biasanya kita melihat gambar bergerak-gerak dengan format gif, maka gambar tersebut akan bergerak simultan tanpa ada henti! Dengan hadirnya Giffer by master Krasimir Tsonev, gif image akan diberikan sentuhan stop/play seperti video :P

Demo: work.krasimirtsonev.com/git/gifffer/example

Masukan gifffer.min.js pada blog sobat.<script type="text/javascript" src="gifffer.min.js"></script>Script pemanggil harus ikut masuk juga dong ;))
<script>
window.onload = function() {
    Gifffer();
}
</script>
Syntax img sedikit berbeda, yg biasa memakai src=".." sekarang di ganti pakai data-gifffer
Default syntax img.<img data-gifffer="image.gif" />Control syntax img.<img data-gifffer="image.gif" data-gifffer-width="123" data-gifffer-height="456" />Demo (Kalo jalan, lakukan klik klik pd image)




Maaf lahir dan bathin :)

0 Komentar WTF  X
Sebetulnya AA Koben lagi malas mosting, sudah nggak ada bahan yg menarik plus di waktu ramadhan membuang waktu buat beramal saja (tidur) :)) Gue melihat artikel tentang Giflinks tholman.com/giflinks by Tim Holman. Apakah Giflinks itu...sebuah javascript sederhana yang digunakan untuk menambahkan tindakan gif layar penuh sebagai efek hover
Singkat cerita menyembunyikan gambar berekstensi .GIF (yg mana notabene gambar .gif memakan waktu loading) dan akan muncul ketika sobat melakukan hover pada link giflinks.

Letakan JavaScript berikut sebelum tag </body>

<script type='text/javascript'>
//<![CDATA[
var GifLinks=function(){"use strict";function n(n,e){for(var t in e)t in n||(n[t]=e[t]);return n}function e(n,e){for(var t in e)n.style[t]=e[t]}function t(n,e){if(n.length)for(var t=0;t<n.length;t++)e===!0?o(n[t]):i(n[t]);else e===!0?o(n):i(n)}function o(n){var e=n.getAttribute("data-src");if(e){var t=new Image;t.onload=function(){n.className+=" preloaded",i(n)},t.src=e}}function i(n){n.addEventListener("mouseover",function(){c(this)},!1),n.addEventListener("touchstart",function(){c(this)},!1),n.addEventListener("mouseout",function(){s()},!1),n.addEventListener("touchmove",function(n){n.preventDefault(),s()},!1),n.addEventListener("click",function(){s()},!1),n.addEventListener("dblclick",function(){s()},!1),a(n)}function a(n){n.className+=" giflink ready",n.className+=n.href?" has-link":" no-link"}function r(){var n={backgroundPosition:"50% 50%",backgroundSize:"cover",pointerEvents:"none",position:"fixed",zIndex:"999999",display:"none",height:"100%",width:"100%",margin:"0px",left:"0px",top:"0px"};l=document.createElement("div"),e(l,n),u.appendChild(l)}function c(n){var e=n.getAttribute("data-src");e?(l.style.backgroundImage="url("+e+")",l.style.display="block"):console.log("Sorry, an element doesn't have a data-src!")}function s(){console.log("stop!"),l.style.display="none",l.style.backgroundImage=""}function d(n,e){u=document.body,r();var o=!1;e&&e.preload&&(o=!!e.preload),t(n,o)}var u,l;return n(d,{})}();
//]]>
</script>

<script type='text/javascript'>
var elements = document.querySelectorAll( '.post-body a' );
GifLinks( elements );
</script>
Perhatikan pada script bertuliskan .post-body, gantikan sesuai dengan tagging bagian post template blog kalian masing-masing! Jika ingin memberi sentuhan CSS pada gif links...
.giflink {
 font-style: italic;
 color: rgb(245, 90, 3);
 /* BLAH-BLEH-BLOH HERE */ 
}
Syntax HTML<a data-src="LINK-IMG.gif">Title</a>DONE.

Buat bonusnya, silahkan sobat buka live HTML editor kepunyaan kalian masing² kemudian masukan bumbu ramuan berikut ini Open it atau ini juga boleh Open it

Semoga rakyat Palestina diberikan kesabaran dalam menghadapi cobaan dari tindakan rakyat bar-bar zionis yahudi israel.

Allohu Akbar...
al-Quran

ARSIP

blank

BLANK

FACEBOOK PAGE