April 29, 2013

CSS3 Pillow Dropdown Menu



Hmm, dari judulnya tampak aneh pake acara menambahkan kata "pillow".

Hehehe, saya sendiri pun bingung mau memberi judul apa postingan kali ini, karena kalau hanya CSS3 dropdown menu dan sebagainya terlalu sederhana, sehingga untuk menarik pembaca mungkin lebih diperlukan sebuah judul yang agak "aneh".

Setelah selesai berbasa-basi pendek sempit seperti diatas mari kita mulai dengan hal yang substansial dengan postingan ini. Oiya, bila tertarik dengan menu yang floating maka bisa di lihat disini lho...

Pertama, mengapa saya beri judul dengan embel-embel "pillow"??? hehehe karena itu hanya sebatas singkatan dari Pink & Yellow yang akan menjadi kombinasi warna utama dari menu yang akan kita buat.

Kedua, bagaimana implementasinya??? Tentu dibutuhkan kode-kode untuk membangun menu seperti diatas bukan ???

Let's see...

/* Main */
#aiizahh-menu{
    width: 100%;
    margin: 0;
    padding: 10px 0 0 0;
    list-style: none;  
    background: #FE80DF;
    background: -moz-linear-gradient(#FFFF00, #FE80DF); 
    background: -webkit-gradient(linear,left bottom,left top,
    color-stop(0, #FE80DF),color-stop(1, #FFFF00));    
    background: -webkit-linear-gradient(#FFFF00, #FE80DF);    
    background: -o-linear-gradient(#FFFF00, #FE80DF);
    background: -ms-linear-gradient(#FFFF00, #FE80DF);
    background: linear-gradient(#FFFF00, #FE80DF);
    -moz-border-radius: 50px;
    border-radius: 50px;
    -moz-box-shadow: 0 2px 1px #9c9c9c;
    -webkit-box-shadow: 0 2px 1px #9c9c9c;
    box-shadow: 0 2px 1px #9c9c9c;
}

#aiizahh-menu li{
    float: left;
    padding: 0 0 10px 0;
    position: relative;
}

#aiizahh-menu a{
    float: left;
    height: 25px;
    padding: 0 25px;
    color: #000000;
    text-transform: uppercase;
    font: bold 12px/25px Arial, Helvetica;
    text-decoration: none;
}

#aiizahh-menu li:hover > a{
    color: #FE80DF;
}

*html #aiizahh-menu li a:hover{ /* IE6 */
    color: #FE80DF;
}

#aiizahh-menu li:hover > ul{
    display: block;
}

/* Sub-aiizahh-menu */

#aiizahh-menu ul{
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;    
    background: #FFFF00;
    background: -moz-linear-gradient(#FFFF00, #FE80DF);
    background: -webkit-gradient(linear,left bottom,left top,
    color-stop(0, #FE80DF),color-stop(1, #FFFF00));
    background: -webkit-linear-gradient(#FFFF00, #FE80DF);    
    background: -o-linear-gradient(#FFFF00, #FE80DF);    
    background: -ms-linear-gradient(#FFFF00, #FE80DF);    
    background: linear-gradient(#FFFF00, #FE80DF);    
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#aiizahh-menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block;  
    -moz-box-shadow: 0 1px 0 #FE80DF111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #FE80DF111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #FE80DF111, 0 2px 0 #777777;
}

#aiizahh-menu ul li:last-child{   
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;    
}

#aiizahh-menu ul a{    
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

*html #aiizahh-menu ul a{ /* IE6 */   
    height: 10px;
    width: 150px;
}

*:first-child+html #aiizahh-menu ul a{ /* IE7 */    
    height: 10px;
    width: 150px;
}

#aiizahh-menu ul a:hover{
        background: #0186ba;
    background: -moz-linear-gradient(#04acec,  #0186ba);    
    background: -webkit-gradient(linear, left top, left bottom, 
    from(#04acec), to(#0186ba));
    background: -webkit-linear-gradient(#04acec,  #0186ba);
    background: -o-linear-gradient(#04acec,  #0186ba);
    background: -ms-linear-gradient(#04acec,  #0186ba);
    background: linear-gradient(#04acec,  #0186ba);
}

#aiizahh-menu ul li:first-child a{
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#aiizahh-menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #FFFF00;
}

#aiizahh-menu ul li:first-child a:hover:after{
    border-bottom-color: #04acec; 
}

#aiizahh-menu ul li:last-child a{
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#aiizahh-menu:after{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

<script type="text/javascript">
    $(function() {
      if ($.browser.msie && $.browser.version.substr(0,1)<7)
      {
        $('li').has('ul').mouseover(function(){
            $(this).children('ul').show();
            }).mouseout(function(){
            $(this).children('ul').hide();
            })
      }
    });        
</script>


Dan... ini finishing nya :

<ul id="aiizahh-menu">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Tutorial</a>
        <ul>
            <li><a href="#">CSS</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Other</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Tool</a>
            <ul>
            <li><a href="#">HTML Parse</a></li>
            <li><a href="#">Speed Test</a></li>
            <li><a href="#">Backlink Generator</a></li>
            <li><a href="#">Widget Twitter</a></li>
        </ul>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>


DEMO :



Terima kasih, semoga bermanfaat...


Referensi : red-team-design.com

April 24, 2013

Loading Animasi Dengan CSS3 Part 3 : Triangle Animation

Kali ini saya mau share mengenai bagaimana cara membuat segitiga dengan efek CSS sehingga tampilannya menjadi lebih menarik dan tentunya sesuai judulnya, animatif.

Segitiga ini sendiri dibangun pada abad ke-4 SM (weww...ngelantur...) dengan menggunakan kombinasi warna utama hitam, pink, dan ungu, sehingga selanjutnya dapat di modifikasi sesuai dengan warna yang disukai.

Artikel ini sekaligus menjadi akhir  dari trilogi "Loading Animasi Dengan CSS3" yang saya telah buat.(hahahaha... )

DEMO :



.aiizahh-loader {

  width: 60px; height: 60px;

  position: absolute;

  top: 50%; left: 50%;

  margin: -30px 0 0 -30px;

  background: #000000;      

  animation: rotation ease-in-out 2s infinite;

  border-radius: 30px;      

}



.triangle1, .triangle2, .triangle3 {

  border-width: 0 20px 30px 20px;

  border-style: solid;

  border-color: transparent;

  border-bottom-color: #D580FE;

  height: 0; width: 0;

  position: absolute;

  left: 10px; top: -10px;

  animation: fadecolor 2s 1s infinite;

}



.triangle2, .triangle3 {

  content: '';

  top: 20px; left: 30px;

  animation-delay: 1.1s;

}



.triangle3 {

  left: -10px;

  animation-delay: 1.2s;

}



@keyframes rotation {

    0% {transform: rotate(0deg);}

    50% {transform: rotate(180deg);}

    100% {transform: rotate(360deg);}

}



@keyframes fadecolor {

    0% {border-bottom-color: #FE80DF;}

    100%{border-bottom-color: #D580FE;}

}
<div class="aiizahh-loader">

  <div class="triangle1"></div>

  <div class="triangle2"></div>

  <div class="triangle3"></div>

</div>



Bagaimana, mudah bukan???

Terima kasih, dan semoga bermanfaat..

Baca Juga :
1. Membuat Efek Loading Animasi Beforeunload Untuk Blog.
2. Loading Animasi Dengan CSS3 Part 1.
3. Loading Animasi Dengan CSS3 Part 2 : Moving Ball vs Duocolour Animation.



Referensi : www.red-team-design.com

April 23, 2013

Update!!! Cara Membuat Emoticon Di Kotak Komentar



Melihat banyaknya pertanyaan yang disampaikan kepada admin blog, yang mengatakan bahwa kode emoticon sebelumnya tidak berhasil diterapkan, maka saya sengaja membuat sebuah postingan baru guna mengakomodir permintaan teman-teman.

Untuk tutorial cara membuat emoticon kali ini sudah saya lakukan tes, work, dan contohnya bisa dilihat disini, sehingga postingan ini sekaligus menjadi pengganti dari postingan sebelumnya. Saya katakan ini sebagai tutorial pengganti, mengapa??? Karena, baik visual dari hasilnya maupun implementasi tutorialnya pun akan berbeda dengan postingan terdahulu.

Ok, langsung saja buka editor template temen-temen dan kemudian cari kode </body> lalu letakkan kode berikut ini diatas nya :

<style type='text/css'>
.emoWrap {
background-color:#EEDE86;
border:2px solid #D3BA59;
padding:10px 14px;
color:black;
font:bold 12px Tahoma,Arial,Sans-Serif;
text-align:center;
}

img.emo, input.emoKey {
display:inline-block; /* Penting! */
*display:inline;
vertical-align:middle;
}

input.emoKey {
border:1px solid #ccc;
background-color:white;
font:bold 11px Arial,Sans-Serif;
padding:1px 2px;
margin:0px 0px 0px 2px;
color:black;
}
</style>
<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
putEmoAbove = "#comment-editor",
emoMessage = false;
//]]>
</script>
<script src='http://aiizahh-reader.googlecode.com/svn/trunk/emotj.js' 
type='text/javascript'></script>

Setelah itu, simpan template temen-temen dan lihat hasilnya. Untuk membuat emoticon tersebut tampil pada komentar, lakukan klik pada salah satu emoticon lalu copy paste pada kotak komentar.

Terima kasih dan semoga bermanfaat...

Tips 1 :Untuk emoticon alternatif dengan tambahan beberapa emoticon seperti pada postingan sebelumnya, dapat mengganti kode berwarna ungu, dengan kode berikut :

<script src='http://aiizahh-reader.googlecode.com/svn/trunk/emotj-new.js'  type='text/javascript'></script>
Tips 2 :Untuk membuat emoticon muncul di dalam postingan/artikel tambahkan kode  "div.post-body, div.post-body span" pada bagian "var emoRange".

Thanks to : Mas Taufik & Forum MT5

April 22, 2013

Menu Cantik Dengan CSS3 3D Accordion

Halo sob...

Pembahasan kali ini mengenai menu accordion, dimana menu accordion sendiri sekarang begitu populer karena penggunaannya yang sangat dibutuhkan untuk menampilkan banyak konten dalam sebuah area saja.



Kalau pada umumnya, menu accordion memberikan tampilan vertikal atau horizontal saja, maka bagaimana tampilan accordion 3D??? Menu accordion 3D ini sendiri dapat digunakan untuk menampilkan berbagai artikel yang merupakan artikel pilihan dan ditampilkan dalam bentuk 3D sehingga sangat menarik untuk dicoba...

Coba lihat DEMO dibawah, atau lihat demo disini.



Tertarik untuk menampilkannya???

1. Login dulu ke blogger.

 

2. Pilih Template - Edit HTML.







3. Letakkan kode CSS berikut diatas </style> atau ]]></b:skin> :

#accordion {
      margin: 100px;
   }
   #accordion article {
      -webkit-transform: perspective(900px) rotateY(60deg);
      -webkit-transition: all 0.7s ease-in-out;
      background: #fff;
      border: 1px solid #f3f3f3;
      box-shadow: 0px 5px 15px gray;
      float: left;
      height: 420px;
      margin-left: -180px;
      padding: 20px;
      width: 220px;
   }
   #accordion article:first-child {
      margin-left: 0px;
   }
   #accordion article img {
      float: left;
      padding: 0 10px 5px 0;
   }
   #accordion article:hover {
      -webkit-transform: perspective(0) rotateY(-10deg);
      margin: 0 140px 0 -60px;
   }

4. Simpan Template.

5. Letakkan kode HTML berikut di area dimana temen-temen ingin 3D Accordion ini ditampilkan :

<div id="accordion">
   <article>
      <h2>Section 1</h2>
      <img src="img/img1.jpg" alt="" width="100" height="88" /> 
      <p>
         ISI Section 1.
      </p>
   </article>
   <article>
      <h2>Section 2</h2>
      <img src="img/img2.jpg" alt="" width="100" height="75" /> 
      <p>
         ISI Section 2.
      </p>
   </article>
   <article>
      <h2>Section 3</h2>
      <img src="img/img3.jpg" alt="" width="100" height="67" /> 
      <p>
         ISI Section 3.
      </p>
   </article>
   <article>
      <h2>Section 4</h2>
      <img src="img/img4.jpg" alt="" width="100" height="75" /> 
      <p>
         ISI Section 4.
      </p>
   </article>
</div>

6. Enjoy.


Bagaimana sob???

Oiya, menu 3D accordion ini hanya dapat bekerja dengan baik pada browser Chrome dan Safari.

*Ganti kode hijau dengan judul artikel dan kode biru dengan isi artikel, serta kode oranye dengan gambar dari artikel tersebut.


Terima kasih...
Semoga bermanfaat...

April 20, 2013

Loading Animasi Dengan CSS3 Part 2 : Moving Ball vs Duocolour Animation



Ok, seperti janji saya sebelumnya untuk membuatkan postingan mengenai cara membuat loading animasi dengan CSS3 untuk menyambung "Loading Animasi Dengan CSS3 Part 1" maka kali ini tampilan loading animasi nya cukup berbeda meskipun dengan kombinasi warna utama yang sama seperti postingan sebelumnya.

Dan, pada postingan ini, saya akan share dua buah animasi loading yang berbeda, pertama adalah moving ball loader dan yang kedua adalah duocolour loader. Makanya judulnya pun terkesan gimana gitu pake vs-an segala...hehehe.....

Ok, langsung aja :

1. Moving ball loader.

DEMO :



.aiizahhmovingball{
position:relative;
width:128px;
height:10px;
}

.aiizahhmovingball-line span {
position:absolute;
left:0px;
top:4px;
height:2px;
width:128px;
background-color:#000000;
}

.aiizahhmovingball span {
background-color:#DB23D5;
position:absolute;
top:0;
left:0;
width:10px;
height:10px;
-moz-border-radius:5px;
-moz-animation-name:bounce_aiizahhmovingball;
-moz-animation-duration:2.9s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:5px;
-webkit-animation-name:bounce_aiizahhmovingball;
-webkit-animation-duration:2.9s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:5px;
-ms-animation-name:bounce_aiizahhmovingball;
-ms-animation-duration:2.9s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:5px;
-o-animation-name:bounce_aiizahhmovingball;
-o-animation-duration:2.9s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:5px;
animation-name:bounce_aiizahhmovingball;
animation-duration:2.9s;
animation-iteration-count:infinite;
animation-direction:linear;
}

@-moz-keyframes bounce_aiizahhmovingball{
0%{
left:0px;
}

50%{
left:118px;
}

100%{
left:0px;
}

}

@-webkit-keyframes bounce_aiizahhmovingball{
0%{
left:0px;
}

50%{
left:118px;
}

100%{
left:0px;
}

}

@-ms-keyframes bounce_aiizahhmovingball{
0%{
left:0px;
}

50%{
left:118px;
}

100%{
left:0px;
}

}

@-o-keyframes bounce_aiizahhmovingball{
0%{
left:0px;
}

50%{
left:118px;
}

100%{
left:0px;
}

}

@keyframes bounce_aiizahhmovingball{
0%{
left:0px;
}

50%{
left:118px;
}

100%{
left:0px;
}

}


<div class="aiizahhmovingball">
<span></span>
<span></span>
</div>


2. Duocolour loader.



.aiizahh-duocolourloader {text-align:center;}

.aiizahh-duocolourloader span {
display:inline-block;
background-color:#FF05FF;
top:0;
left:0;
width:10px;
height:10px;
-moz-border-radius:5px;
-moz-animation-name:bounce_aiizahh-duocolourloader;
-moz-animation-duration:1.5s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:5px;
-webkit-animation-name:bounce_aiizahh-duocolourloader;
-webkit-animation-duration:1.5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:5px;
-ms-animation-name:bounce_aiizahh-duocolourloader;
-ms-animation-duration:1.5s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:5px;
-o-animation-name:bounce_aiizahh-duocolourloader;
-o-animation-duration:1.5s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:5px;
animation-name:bounce_aiizahh-duocolourloader;
animation-duration:1.5s;
animation-iteration-count:infinite;
animation-direction:linear;
}

.aiizahh-duocolourloader span:nth-child(1) {
-moz-animation-delay:0s;
-webkit-animation-delay:0s;
-ms-animation-delay:0s;
-o-animation-delay:0s;
animation-delay:0s;
}

.aiizahh-duocolourloader span:nth-child(2) {
-moz-animation-delay:0.15s;
-webkit-animation-delay:0.15s;
-ms-animation-delay:0.15s;
-o-animation-delay:0.15s;
animation-delay:0.15s;
}

.aiizahh-duocolourloader span:nth-child(3) {
-moz-animation-delay:0.3s;
-webkit-animation-delay:0.3s;
-ms-animation-delay:0.3s;
-o-animation-delay:0.3s;
animation-delay:0.3s;
}

.aiizahh-duocolourloader span:nth-child(4) {
-moz-animation-delay:0.45s;
-webkit-animation-delay:0.45s;
-ms-animation-delay:0.45s;
-o-animation-delay:0.45s;
animation-delay:0.45s;
}


@-moz-keyframes bounce_aiizahh-duocolourloader{
0%{
left:0px;
background-color:#FF05FF;
}

50%{
left:118px;
background-color:#15FF00;
}

100%{
left:0px;
background-color:#FF05FF;
}

}

@-webkit-keyframes bounce_aiizahh-duocolourloader{
0%{
left:0px;
background-color:#FF05FF;
}

50%{
left:118px;
background-color:#15FF00;
}

100%{
left:0px;
background-color:#FF05FF;
}

}

@-ms-keyframes bounce_aiizahh-duocolourloader{
0%{
left:0px;
background-color:#FF05FF;
}

50%{
left:118px;
background-color:#15FF00;
}

100%{
left:0px;
background-color:#FF05FF;
}

}

@-o-keyframes bounce_aiizahh-duocolourloader{
0%{
left:0px;
background-color:#FF05FF;
}

50%{
left:118px;
background-color:#15FF00;
}

100%{
left:0px;
background-color:#FF05FF;
}

}

@keyframes bounce_aiizahh-duocolourloader{
0%{
left:0px;
background-color:#FF05FF;
}

50%{
left:118px;
background-color:#15FF00;
}

100%{
left:0px;
background-color:#FF05FF;
}

}


<div class="aiizahh-duocolourloader">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Bagaimana???
Terima kasih, semoga bermanfaat dan jangan lupa tinggalkan komentar....
Baca juga :
1. Membuat efek loading animasi beforeunload untuk blog.
2. Loading animasi dengan CSS3 Part 1.

April 19, 2013

Membuat Efek Loading Animasi Beforeunload Untuk Blog



Selamat pagi...

Kali ini saya membuat sebuah tutorial bagaimana sebuah efek loading animasi dapat dibuat untuk blog. Untuk efek dasarnya sendiri saya pelajari dari tutorialnya Mas Taufik sedangkan tampilannya, mari kita berkreasi...!!!

Bagaimana membuat efek loading sederhana saat kita membuka tautan-tautan internal sehingga visualisasi blog menjadi lebih menarik???

Yang kita perlukan hanya kode CSS dan Javascript, dan jadilah sebuah efek loading animasi sederhana yang akan terpicu saat kita membuka tautan-tautan internal.

Coba letakkan kode berikut diatas kode ]]></b:skin> :

#aiizahh-loader {

position:fixed !important;

position:absolute;

top:0;

right:0;

bottom:0;

left:0;

z-index:9999;

background-color:#D580FE;

color:black;

padding:1em 1.2em;

display:none;

}



Selanjutnya cari kode </body> dan letakkan kode berikut diatasnya :

<script type='text/javascript'>

//<![CDATA[

$(document.body).append('<div id="aiizahh-loader">Redirecting...</div>');

$(window).on("beforeunload", function() {

$('#aiizahh-loader').fadeIn(1000).delay(7000).fadeOut(1000);

});

//]]>

</script>



Bagaimana???
Berhasil menerapkannya??? Coba lihat DEMO dibawah ini :



Kenapa saya katakan efek loading animasi sederhana???

Ya, karena efek loading yang timbul hanya berupa sebuah halaman dengan background warna dan diisi dengan tulisan "Redirecting" sedangkan banyak yang menginginkan ditambah dengan berbagai macam gambar maupun animasi.

Sebetulnya jika ingin menambahkan sebuah gambar tentu saja bisa. Coba cek demo berikut :


Bagaimana caranya??? Coba ubah Javascript diatas dengan menghapus kode berikut :

.append('<div id="aiizahh-loader">Redirecting...</div>')

Lalu dibawah </script> tambahkan kode berikut :

<div id='aiizahh-loader'>&lt;img src=&#039;http://1.bp.blogspot.com/-YFMJvA2pVMc/UVkDV9IkCUI/AAAAAAAABI4/4XysXV1jcFg/s1600/puter2.gif&#039;&gt;&lt;/img&gt;</div>

Sampai disini bagaimana hasil kreasi temen-temen???
Sudah sesuai kah atau belum???

Lalu, bagaimana bila visualnya bukan berupa gambar, melainkan sebuah animasi progress yang dibangun dengan menggunakan kode CSS??? Menurut saya, inilah yang paling menarik...

Coba cek lagi postingan saya mengenai Loading Animasi Dengan CSS3 Part 1 dan kita akan berkreasi dengan animasi progress tersebut.

Hasil dari kombinasi efek dan progress nya akan terlihat pada demo dibawah ini :


Bagaimana menurut tement-temen???
Tertarik menerapkannya??? Coba kita kembali pada kode CSS dasar dari efek ini diatas, setelah diletakkan pada template kemudian tambahkan kode CSS ini dibawahnya :

.barload{text-align:center;}

.barload span {

display:inline-block;

top:0;

background-color:#DB23D5;

width:12px;

height:12px;

-moz-animation-name:bounce_barload;

-moz-animation-duration:1.7s;

-moz-animation-iteration-count:infinite;

-moz-animation-direction:linear;

-moz-transform:scale(.3);

-moz-border-radius:8px;

-webkit-animation-name:bounce_barload;

-webkit-animation-duration:1.7s;

-webkit-animation-iteration-count:infinite;

-webkit-animation-direction:linear;

-webkit-transform:scale(.3);

-webkit-border-radius:8px;

-ms-animation-name:bounce_barload;

-ms-animation-duration:1.7s;

-ms-animation-iteration-count:infinite;

-ms-animation-direction:linear;

-ms-transform:scale(.3);

-ms-border-radius:8px;

-o-animation-name:bounce_barload;

-o-animation-duration:1.7s;

-o-animation-iteration-count:infinite;

-o-animation-direction:linear;

-o-transform:scale(.3);

-o-border-radius:8px;

animation-name:bounce_barload;

animation-duration:1.7s;

animation-iteration-count:infinite;

animation-direction:linear;

transform:scale(.3);

border-radius:8px;

}

.barload span:nth-child(1) {

left:0;

-moz-animation-delay:0.68s;

-webkit-animation-delay:0.68s;

-ms-animation-delay:0.68s;

-o-animation-delay:0.68s;

animation-delay:0.68s;

}

.barload span:nth-child(2) {

left:12px;

-moz-animation-delay:0.85s;

-webkit-animation-delay:0.85s;

-ms-animation-delay:0.85s;

-o-animation-delay:0.85s;

animation-delay:0.85s;

}

.barload span:nth-child(3) {

left:25px;

-moz-animation-delay:1.02s;

-webkit-animation-delay:1.02s;

-ms-animation-delay:1.02s;

-o-animation-delay:1.02s;

animation-delay:1.02s;

}

.barload span:nth-child(4) {

left:37px;

-moz-animation-delay:1.19s;

-webkit-animation-delay:1.19s;

-ms-animation-delay:1.19s;

-o-animation-delay:1.19s;

animation-delay:1.19s;

}

.barload span:nth-child(5) {

left:50px;

-moz-animation-delay:1.36s;

-webkit-animation-delay:1.36s;

-ms-animation-delay:1.36s;

-o-animation-delay:1.36s;

animation-delay:1.36s;

}

.barload span:nth-child(6) {

left:62px;

-moz-animation-delay:1.53s;

-webkit-animation-delay:1.53s;

-ms-animation-delay:1.53s;

-o-animation-delay:1.53s;

animation-delay:1.53s;

}

.barload span:nth-child(7) {

left:74px;

-moz-animation-delay:1.7s;

-webkit-animation-delay:1.7s;

-ms-animation-delay:1.7s;

-o-animation-delay:1.7s;

animation-delay:1.7s;

}

.barload span:nth-child(8) {

left:87px;

-moz-animation-delay:1.87s;

-webkit-animation-delay:1.87s;

-ms-animation-delay:1.87s;

-o-animation-delay:1.87s;

animation-delay:1.87s;

}

@-moz-keyframes bounce_barload{

0%{

-moz-transform:scale(1);

background-color:#DB23D5;

}

100%{

-moz-transform:scale(.3);

background-color:#FFFFFF;

}

}

@-webkit-keyframes bounce_barload{

0%{

-webkit-transform:scale(1);

background-color:#DB23D5;

}

100%{

-webkit-transform:scale(.3);

background-color:#FFFFFF;

}

}

@-ms-keyframes bounce_barload{

0%{

-ms-transform:scale(1);

background-color:#DB23D5;

}

100%{

-ms-transform:scale(.3);

background-color:#FFFFFF;

}

}

@-o-keyframes bounce_barload{

0%{

-o-transform:scale(1);

background-color:#DB23D5;

}

100%{

-o-transform:scale(.3);

background-color:#FFFFFF;

}

}

@keyframes bounce_barload{

0%{

transform:scale(1);

background-color:#DB23D5;

}

100%{

transform:scale(.3);

background-color:#FFFFFF;

}

}


Jika sudah, maka seperti halnya saat kita menambah gambar pada efek loading nya, maka Javascript yang sudah diubah tersebutlah yang akan kita gunakan, lalu ditambah dengan kode berikut dibawahnya :

<div id='aiizahh-loader'>
<div class="barload">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
  </div>

Nah, sekarang bagaimana hasil kreasi nya???
Untuk variasi CSS progress bar yang lain mungkin akan saya share pada artikel-artikel part berikutnya...

Terima kasih, semoga bermanfaat dan jangan lupa tinggalkan komentar yah...

April 18, 2013

Cute Spinny Leaf Untuk Tampilan Menu Yang Lebih Aduhai

Kali ini saya ingin share sebuah menu yang tampilannya berbeda dan sangat "cute".

Pemilihan warna yang menarik dan terkesan girly sangat cocok digunakan bagi blogger-blogger wanita dan untuk blog-blog yang bertemakan personal blog.





Coba perhatikan warna dan juga efek yang dihasilkan oleh menu tersebut...

Sangat menarik bukan???




nav {
    width: 960px;
    height: 100px;
    margin: 120px auto;
    text-align: center;
}
.top-menu li {
    display: inline-block;
    text-align: center;
    margin: 30px 5px;
    position: relative;
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
.top-menu li:hover {
    margin: 30px 20px; 
}
.top-menu li:active {
    margin: 30px 33px; 
}
.top-menu li a  {
    width: 100px;
    height: 100px;
    z-index: 9999;
    position: absolute;
    top: 35px;
    font-weight: bold;
    display: block;
    text-decoration: none;
    font-size: 20px;
    color: #fff;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.4), 0px 4px 
    6px rgba(0,0,0,0.1), 0px 9px 11px rgba(0,0,0,0.1);
    -webkit-transition: all 0.1s linear; 
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
}
.top-menu li:active a {
    font-size: 26px;
    top: 30px;
    text-shadow: none;
}
.top-menu li div.menu-item {    
    width: 100px;
    height: 100px;
    display: block;
    -webkit-transition: all 0.2s ease; 
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -webkit-border-top-left-radius: 100px; 
    -webkit-border-bottom-right-radius: 100px; 
    -moz-border-radius-topleft: 100px; 
    -moz-border-radius-bottomright: 100px; 
    border-top-left-radius: 100px; 
    border-bottom-right-radius: 100px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
.top-menu li:hover div.menu-item{ 
    -webkit-border-top-left-radius: 80px; 
    -webkit-border-bottom-right-radius: 80px; 
    -moz-border-radius-topleft: 80px; 
    -moz-border-radius-bottomright: 80px; 
    border-top-left-radius: 80px; 
    border-bottom-right-radius: 80px; 
        -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -o-transform: rotate(225deg);
}
.top-menu li:active div.menu-item{ 
    -webkit-border-top-left-radius: 50px; 
    -webkit-border-bottom-right-radius: 50px; 
    -moz-border-radius-topleft: 50px; 
    -moz-border-radius-bottomright: 50px; 
    border-top-left-radius: 50px; 
    border-bottom-right-radius: 50px; 

}
#home { background: #41D05F; }
#cataloge { background: #FE80B9; }
#price { background: #FFFF00; }
#about { background: #a800ff; }
#contact { background: #49a7f3; }


<nav>
 <ul class="top-menu">
 <li><a href=#>Home</a><div class="menu-item" id="home"></div></li>
 <li><a href=#>Sitemap</a><div class="menu-item" id="cataloge"></div></li>
 <li><a href=#>Tools</a><div class="menu-item" id="price"></div></li>
 <li><a href=#>About</a><div class="menu-item" id="about"></div></li>
    <li><a href=#>Contact Us</a><div class="menu-item" id="contact"></div></li>
  </ul>
</nav>

Terima kasih...
Semoga bermanfaat...


Referensi : http://css-tricks.com

April 17, 2013

Loading Animasi dengan CSS3 Part 1




Bagaimana membuat efek loading animasi seperti gambar diatas???

Kali ini saya akan memberikan kode HTML dan tentu saja CSS nya dimana kode-kode ini yang nantinya akan membangun efek loading animasi ini.

Untuk aplikasi nya pada blog mungkin temen-temen bisa lakukan sendiri karena pada postingan ini murni hanya kode-kode untuk membuat efek loading animasi tersebut.

#aii-loader{
position:relative;
width:99px;
height:12px}

.aii-loader{
position:absolute;
top:0;
background-color:#DB23D5;
width:12px;
height:12px;
-moz-animation-name:bounce_aii-loader;
-moz-animation-duration:1.7s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-moz-transform:scale(.3);
-moz-border-radius:8px;
-webkit-animation-name:bounce_aii-loader;
-webkit-animation-duration:1.7s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-webkit-transform:scale(.3);
-webkit-border-radius:8px;
-ms-animation-name:bounce_aii-loader;
-ms-animation-duration:1.7s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-ms-transform:scale(.3);
-ms-border-radius:8px;
-o-animation-name:bounce_aii-loader;
-o-animation-duration:1.7s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-o-transform:scale(.3);
-o-border-radius:8px;
animation-name:bounce_aii-loader;
animation-duration:1.7s;
animation-iteration-count:infinite;
animation-direction:linear;
transform:scale(.3);
border-radius:8px;
}

#aii-loader_1{
left:0;
-moz-animation-delay:0.68s;
-webkit-animation-delay:0.68s;
-ms-animation-delay:0.68s;
-o-animation-delay:0.68s;
animation-delay:0.68s;
}

#aii-loader_2{
left:12px;
-moz-animation-delay:0.85s;
-webkit-animation-delay:0.85s;
-ms-animation-delay:0.85s;
-o-animation-delay:0.85s;
animation-delay:0.85s;
}

#aii-loader_3{
left:25px;
-moz-animation-delay:1.02s;
-webkit-animation-delay:1.02s;
-ms-animation-delay:1.02s;
-o-animation-delay:1.02s;
animation-delay:1.02s;
}

#aii-loader_4{
left:37px;
-moz-animation-delay:1.19s;
-webkit-animation-delay:1.19s;
-ms-animation-delay:1.19s;
-o-animation-delay:1.19s;
animation-delay:1.19s;
}

#aii-loader_5{
left:50px;
-moz-animation-delay:1.36s;
-webkit-animation-delay:1.36s;
-ms-animation-delay:1.36s;
-o-animation-delay:1.36s;
animation-delay:1.36s;
}

#aii-loader_6{
left:62px;
-moz-animation-delay:1.53s;
-webkit-animation-delay:1.53s;
-ms-animation-delay:1.53s;
-o-animation-delay:1.53s;
animation-delay:1.53s;

#aii-loader_7{
left:74px;
-moz-animation-delay:1.7s;
-webkit-animation-delay:1.7s;
-ms-animation-delay:1.7s;
-o-animation-delay:1.7s;
animation-delay:1.7s;
}

#aii-loader_8{
left:87px;
-moz-animation-delay:1.87s;
-webkit-animation-delay:1.87s;
-ms-animation-delay:1.87s;
-o-animation-delay:1.87s;
animation-delay:1.87s;
}
@-moz-keyframes bounce_aii-loader{
0%{
-moz-transform:scale(1);
background-color:#DB23D5;
}
100%{
-moz-transform:scale(.3);
background-color:#FFFFFF;
}
}
@-webkit-keyframes bounce_aii-loader{
0%{
-webkit-transform:scale(1);
background-color:#DB23D5;
}
100%{
-webkit-transform:scale(.3);
background-color:#FFFFFF;
}
}
@-ms-keyframes bounce_aii-loader{
0%{
-ms-transform:scale(1);
background-color:#DB23D5;
}
100%{
-ms-transform:scale(.3);
background-color:#FFFFFF;
}
}
@-o-keyframes bounce_aii-loader{
0%{
-o-transform:scale(1);
background-color:#DB23D5;
}
100%{
-o-transform:scale(.3);
background-color:#FFFFFF;
}
}
@keyframes bounce_aii-loader{
0%{
transform:scale(1);
background-color:#DB23D5;
}
100%{
transform:scale(.3);
background-color:#FFFFFF;
}
}

<div id="aii-loader">
<div id="aii-loader_1" class="aii-loader">
</div>
<div id="aii-loader_2" class="aii-loader">
</div>
<div id="aii-loader_3" class="aii-loader">
</div>
<div id="aii-loader_4" class="aii-loader">
</div>
<div id="aii-loader_5" class="aii-loader">
</div>
<div id="aii-loader_6" class="aii-loader">
</div>
<div id="aii-loader_7" class="aii-loader">
</div>
<div id="aii-loader_8" class="aii-loader">
</div>
</div> 

DEMO :



Hmm... mungkin temen-temen bingung kenapa saya membuat judul seperti itu (Part 1) ???

Next, saya akan share lagi efek loading animasi yang lain yang mungkin lebih menarik untuk temen-temen gunakan...

Terima kasih, semoga bermanfaat...

April 16, 2013

Menampilkan Kekuatan Sebuah Password

Halo sob...

Bagaimana kabarnya hari ini???

Dari judulnya pasti temen-temen bertanya apa maksudnya???
Begini, biasanya saat kita ingin registrasi di sebuah forum atau lain sebagainya saat kita memasukkan password yang ingin digunakan, biasanya bukan hanya opsi untuk mengisi kembali password yang sudah dibuat, namun terkadang akan ditampilkan seberapa kuat password yang telah kita buat.


Hal ini dilakukan untuk memproteksi akun yang temen-temen buat, dimana semakin kuat password semakin sulit akun yang dilindungi password tersebut dapat dicuri atau lain sebagainya. Benar tidak???

Biasanya kuat tidaknya sebuah password bukan ditentukan seberapa panjang password tersebut, namun lebih pada variasi antara huruf, angka, dan simbol-simbol yang digunakan untuk membangun password tersebut.

Nah, setelah penjelasan pendek sempit diatas, maka kita juga dapat menerapkannya dengan menggunakan javascript dan kemudian dieksekusi menggunakan sebuah kode HTML.



$('#pass').keyup(function(e) {

     var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])

     (?=.*[0-9])(?=.*\\W).*$", "g");

     var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|

     ((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");

     var enoughRegex = new RegExp("(?=.{6,}).*", "g");

     if (false == enoughRegex.test($(this).val())) {

             $('#passstrength').html('More Characters');

     } else if (strongRegex.test($(this).val())) {

             $('#passstrength').className = 'ok';

             $('#passstrength').html('Strong!');

     } else if (mediumRegex.test($(this).val())) {

             $('#passstrength').className = 'alert';

             $('#passstrength').html('Medium!');

     } else {

             $('#passstrength').className = 'error';

             $('#passstrength').html('Weak!');

     }

     return true;

});
<input type="password" name="pass" id="pass" />

<span id="passstrength"></span>





Nah, sebelum mencoba ada baiknya lihat dulu demo nya dibawah ini sob...
Bagaimana???
Terima kasih ya, silahkan tinggalkan komentar dan semoga bermanfaat....

April 15, 2013

Google Chrome Minimalis Dengan CSS3

Halo sob,,

Biasa browsing pake browser apa???
Firefox, Chrome, IE, atau...

Kalo biasa pake Chrome tentu ga asing dengan tampilan Google Chrome bukan???



Lalu, coba lihat tampilan yang berikutnya :



Bagaimana menurut temen-temen???

Cukup mirip bukan, hehehe...

Gambar kedua, merupakan semacam replika kali yah, hehehe yang dibuat dengan menggunakan CSS3 dimana tutorial ini sendiri saya baca dari tutorial Mas Taufik. Selanjutnya, tentu kode-kode yang diperlukan untuk membuat tampilan seperti diatas bukan???




<div class="chrome-window">
 <h1>Alya Zahra</h1>
 <div class="right-buttons">
 <a title="Minimize" class="minimize-btn" href="#minimize">Minimize</a>
 <a title="Maximize" class="maximize-btn" href="#maximize">Maximize</a>
 <a title="Close" class="close-btn" href="#close">Close</a>
 </div>
 <div class="window-header">
 <input type="text" onfocus="this.select();" 
spellcheck="false" value="http://aiizahh.blogspot.com">
 </div>
 <div class="window-inner">
     SELAMAT DATANG DI BLOG INI...
     TERIMA KASIH ATAS KUNJUNGANNYA
     SEMOGA BERMANFAAT
 </div>
</div> 

/* Window */
.chrome-window {
  background-color:#3B68B5;
  background-image:-webkit-linear-gradient(top,#5F91DC 0%,#3B68B5 
  25px,#3B68B5 100%);
  background-image:-moz-linear-gradient(top,#5F91DC 0%,#3B68B5
  25px,#3B68B5 100%);
  background-image:-ms-linear-gradient(top,#5F91DC 0%,#3B68B5
  25px,#3B68B5 100%);
  background-image:-o-linear-gradient(top,#5F91DC 0%,#3B68B5
  25px,#3B68B5 100%);
  background-image:linear-gradient(top,#5F91DC 0%,#3B68B5
  25px,#3B68B5 100%);
  width:500px;
  border:1px solid;
  border-color:#595959 #444 #444 #494949;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  -webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  -moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-300px;
  margin-top:-150px;
  overflow:hidden;
  font:normal normal 12px Segoe,"Segoe UI",Arial,Comic Sans;
  color:#222;
  z-index:999;
}

/* Window title */
.chrome-window h1 {
  font:inherit;
  font-weight:bold;
  color:white;
  margin:0 0;
  padding:4px 0 4px 10px;
}

/* Window address bar */
.window-header {
  margin:0 2px;
  padding:1px 0;
  border:1px solid #2E518C;
  border-bottom-color:#AAAAAB;
  background-color:white;
  position:relative;
}

.window-header:before {
  content:"";
  display:block;
  width:10px;
  height:13px;
  background-color:#eee;
  border:1px solid #949495;
  border-bottom-color:#838384;
  -webkit-box-shadow:inset 0 0 0 1px white,0 1px 2px #ccc;
  -moz-box-shadow:inset 0 0 0 1px white,0 1px 2px #ccc;
  box-shadow:inset 0 0 0 1px white,0 1px 2px #ccc;
  position:absolute;
  top:6px;
  left:8px;
}

.window-header input {
  width:592px;
  display:block;
  margin:0 auto;
  padding:4px 4px 5px 24px;
  font:inherit;
  color:inherit;
  border:1px solid #B4BCC7;
  outline:none;
  background-color:white;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

/* Window body */
.window-inner {
  height:200px;
  border:1px solid #2E518C;
  border-top:none;
  margin:0 2px 2px;
  background-color:white;
  -webkit-box-shadow:inset 0 0 0 1px #DFDFDF;
  -moz-box-shadow:inset 0 0 0 1px #DFDFDF;
  box-shadow:inset 0 0 0 1px #DFDFDF;
  padding:4px;
  word-wrap:break-word;
  overflow:auto;
  cursor:text;
}

/* Buttons */
.right-buttons {
  position:absolute;
  top:-1px;
  right:4px;
  font:0/0 a;
  text-shadow:none;
}

.right-buttons a {
  display:block;
  float:left;
  margin:0 0 0 -1px;
  width:26px;
  height:16px;
  border:1px solid #345181;
  -webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,.2);
  -moz-box-shadow:inset 1px 1px 0 rgba(255,255,255,.2);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.2);
  text-decoration:none;
  position:relative;
  cursor:default;
  -webkit-transition:all .2s ease-out;
  -moz-transition:all .2s ease-out;
  -ms-transition:all .2s ease-out;
  -o-transition:all .2s ease-out;
  transition:all .2s ease-out;
}

.right-buttons a:after {
  content:"";
  display:block;
  position:absolute;
}

.right-buttons .minimize-btn {
  -webkit-border-radius:0 0 0 3px;
  -moz-border-radius:0 0 0 3px;
  border-radius:0 0 0 3px;
}

.right-buttons .minimize-btn:after {
  right:7px;
  bottom:4px;
  left:7px;
  height:3px;
  background-color:#BCCFEF;
  border:1px solid #233656;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
}

.right-buttons .maximize-btn:after {
  top:4px;
  right:8px;
  bottom:4px;
  left:8px;
  border:2px solid #BCCFEF;
  -webkit-box-shadow:0 0 0 1px #233656,inset 0 0 0 1px #233656;
  -moz-box-shadow:0 0 0 1px #233656,inset 0 0 0 1px #233656;
  box-shadow:0 0 0 1px #233656,inset 0 0 0 1px #233656;
  -webkit-border-radius:1px;
  -moz-border-radius:1px;
  border-radius:1px;
}

.right-buttons .close-btn {
  -webkit-border-radius:0 0 3px 0;
  -moz-border-radius:0 0 3px 0;
  border-radius:0 0 3px 0;
}

.right-buttons .close-btn {
  width:42px;
}

.right-buttons .close-btn:after {
  content:"x";
  font:normal normal 14px/13px Verdana,Arial,Sans-Serif;
  color:#BCCFEF;
  text-shadow:0 1px #233656,1px 0 #233656,-1px 0 #233656,0 -1px #233656;
  top:0;
  right:0;
  bottom:0;
  left:0;
  text-align:center;
}

.right-buttons a:hover {
  background-color:#8BAEE4;
  -webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,.4);
  -moz-box-shadow:inset 1px 1px 0 rgba(255,255,255,.4);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.4);

}

.right-buttons a.close-btn:hover {
  background-color:#DA4D4B;
}

.right-buttons .minimize-btn:hover:after {background-color:white}
.right-buttons .maximize-btn:hover:after {border-color:white}
.right-buttons .close-btn:hover:after {color:white}

*Kode berwarna merah dapat diganti sesuai keinginan temen-temen...
DEMO :
Bagaimana sob???
Terima kasih yah, semoga bermanfaat...

April 13, 2013

Modifikasi Kotak Pesan Komentar Blog

Selamat malam sob...


Kali ini saya ingin share mengenai bagaimana cara membuat modifikasi pada kotak pesan komentar blog, dimana untuk contohnya bisa dilihat pada blog ini. Pemodifikasian kotak pesan komentar tersebut juga saya pelajari dari blog lain, namun saya lupa alamatnya...

Tutorial ini sendiri saya buat untuk mengakomodir permintaan sahabat Ariel Nicho yang bertanya mengenai kotak komentar saya ini, sehingga tidak ada salahnya saya pikir untuk membuat tutorialnya.

Ok, langsung aja sob :

1. Login ke blogger.


2. Pilih Template - Edit HTML.


3. Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya :

#pra-comment{
position: relative; 
background:#FFFFFF;/* Warna background kotak */
width:100%;
padding:10px; 
font:normal 12px trebuchet ms; 
text-align:justify; 
border:3px solid #FE80DF;/* Warna border kotak */
   border-radius: 10px;
   box-shadow: 0 0 0 2px #000000, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
margin:0 10px 10px 0; 
margin-top: 10px; 
line-height: 1.3em; 
} 
#pra-comment::after, #pra-comment::before { 
top: 100%; 
border: solid transparent; 
content: " ";
height: 0; 
width: 0; 
position: absolute; 
pointer-events: none 
} 
#pra-comment::before { 
border-top-color: #FE80DF; 
border-width: 15px; 
left: 10%; 
margin-left: -36px 
}
#pra-comment::after { 
border-top-color: #FFFFFF; /* Samakan dengan warna background */
border-width: 9px; 
left: 10%; 
margin-left: -30px
} 

4. Kemudian cari kode <p><data:blogCommentMessage/></p>  dan ganti dengan kode berikut :
<div id='pra-comment'><data:blogCommentMessage/></div>

5. Simpan Template.

6. Selanjutnya, masuk ke Setelan - Pos dan Komentar.

7. Pada kolom pesan formulir komentar, masukkan tulisan atau kata-kata mutiara yang ingin ditampilkan.

8. Enjoy.

*Keterangan : Ganti kode berwarna kuning dengan warna-warna yang disukai dan cari kodenya disini.

Gimana sob???

Semoga bermanfaat dan jangan lupa untuk tinggalkan komentar yah...

April 11, 2013

Blogroll Ganteng Dengan Efek Animasi

Dari judulnya, mungkin temen-temen sudah bisa menebak postingan apa kali ini???

Kali ini, saya ingin share mengenai cara membuat blogroll yang animatif, sehingga tampilan nya menjadi lebih menarik untuk dipandang...

DEMO :



Tutorial ini saya buat berdasarkan tutorial yang saya pelajari dari Mas Taufik, dan saya share kembali kepada temen-temen yang lain yang merasa tertarik dengan model blogroll seperti ini.

1. Login ke blogger.



2. Pilih Template - Edit HTML.



3. Centang Expand Template Widget.



4. Letakkan kode berikut diatas kode </head> :

var $ul = $('#blog-roll'),
    roll = function() {
        $ul.find('li').first().slideUp('slow', function() {
            $(this).appendTo($(this).parent()).fadeIn();
        });
    }, anim = setInterval(roll, 3000);

// Pause on hover...
$ul.hover(function() {
    clearInterval(anim);
}, function() {
    anim = setInterval(roll, 3000);
});

5. Simpan Template.

6. Letakkan link-link yang akan ditampilkan secara animasi pada tempat yang temen-temen inginkan seperti contoh dibawah :

<ul id="blog-roll">
    <li><a href="#">Alya Zahra 1</a></li>
    <li><a href="#">Alya Zahra 2</a></li>
    <li><a href="#">Alya Zahra 3</a></li>
    <li><a href="#">Alya Zahra 4</a></li>
    <li><a href="#">Alya Zahra 5</a></li>
    <li><a href="#">Alya Zahra 6</a></li>
    <li><a href="#">Alya Zahra 7</a></li>
    <li><a href="#">Alya Zahra 8</a></li>
    <li><a href="#">Alya Zahra 9</a></li>
    <li><a href="#">Alya Zahra 10</a></li>
</ul> 

7. Enjoy.

*Kode yang digaris bawah tidak perlu ditaruh di template apabila telah terdapat kode serupa

Bagaimana sob???
Semoga postingan ini bermanfaat....

April 10, 2013

"Stitched" Box Shadow

Bagaimana membuat sebuah box berisikan teks atau yang biasa disebut text box???

Tertarik membuatnya dengan CSS dan berkreasi dengan warna maupun tampilannya???

Coba lihat demo dibawah ini :





1. Login ke blogger.


2. Pilih Template - Edit HTML.



3. Centang Expand Template Widget.



4. Letakkan kode berikut diatas </style> :

.stitched {
   padding: 20px;
   margin: 10px;
   background: #FE80DF;
   color: #fff;
   font-size: 18px;
   font-weight: bold;
   line-height: 1.3em;
   border: 2px dashed #fff;
   border-radius: 10px;
   box-shadow: 0 0 0 4px #000000, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
   text-shadow: -1px -1px #aa3030;
   font-weight: normal;
} 

5. Simpan Template.

Selesai???

Belum sob, untuk menampilkan box nya sendiri mulailah pada elemen dimana box ini ingin diletakkan, misalnya di sebuah halaman posting dengan menggunakan kode HTML :

     <div class="stitched">

        ISI TEXT ANDA DISINI

    </div>

Bagaimana, mudah bukan???
Untuk berkreasi dengan warna maka bisa lihat kode-kode nya disini.

Terima kasih, semoga bermanfaat...


Referensi : CSS Tricks

Upaya Optimasi Kecepatan Blog Dengan Lazyloader

Pernahkah temen-temen mencari gambar pada google???

Tentu temen-temen pernah melihat bagaimana proses penelusuran gambar tersebut ditampilkan oleh google...



Hal tersebut merupakan sebuah sistem yang diterapkan oleh google untuk mempercepat proses penelusuran gambar yang sangat banyak sehingga gambar-gambar yang masih dalam proses loading akan digantikan dengan sebuah tampilan gambar berwarna abu-abu.

Bandingkan dengan proses loading beberapa gambar pada sebuah blog atau website pada umumnya. Tentu berbeda bukan???


Nah, cara ini pun bisa kita terapkan pada blog milik kita sendiri, terutama bagi blog yang memiliki begitu banyak sekali gambar yang ditampilkan dalam sebuah halaman. Tutorial ini sendiri saya buat setelah saya menerapkan tutorial yang dibuat oleh Mas Taufik, dan ya benar optimasi blog menjadi lebih baik sehingga proses loading beberapa gambar yang banyak muncul dalam sebuah postingan blog saya menjadi lebih baik pula...

Baik, untuk menerapkannya di blog, silahkan ikuti langkah-langkah nya :

1. Login ke blogger.



2. Pilih Template - Edit HTML.






4. Cari kode </head> dan letakkan kode berikut diatasnya :

 <script src='http://ajax.googleapis.com
/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'/>

<script src='http://aiizahh.googlecode.com/files/lazyload.js'
type='text/javascript'></script>
<script type='text/javascript'>
$(function() {
    $('img').lazyload({
        placeholder : 
"http://2.bp.blogspot.com/-sJ-tZahntLI/T9coeqmdqMI/AAAAAAAADUQ/
ztxIT1Fht4g/s1600/grey.png",
        effect      : "fadeIn",
        threshold   : 500
    });
});
</script>

5. Simpan Template.

6. Enjoy.

* Kode yang diberi garis bawah tidak perlu ditaruh di template apabila telah terdapat kode serupa.

Bagaimana sob, apakah sudah berhasil menerapkannya???
Terima kasih, semoga bermanfaat...

April 9, 2013

Menampilkan Komentar Facebook Berdampingan Di Blog

Selamat pagi sob...

Gimana kabarnya hari ini ??? Semoga baik-baik saja yah...



Ok, langsung aja sob, kali ini saya mau share bagaimana cara menampilkan komentar facebook berdampingan dengan komentar blogger. Saya pikir, cara ini cukup menarik karena selain menggunakan akun google, wordpress, live journal, dan lain sebagainya yang biasa digunakan untuk memberikan komentar di artikel sebuah blog, maka dengan menerapkan cara ini, pengunjung yang tidak memiliki akun-akun tersebut pun bisa memberikan komentarnya dengan menggunakan akun facebook mereka.

Begini caranya sob :

1. Login ke blogger.


2. Pilih Template - Edit HTML dan centang "Expand Template Widget".


3. Letakkan kode dibawah ini dibawah kode <div class='comments' id='comments'> .

<div class='commblogfb-tab' id='fb-comments' onclick='javascript:
commentToggle(&quot;#fb-comments&quot;);' title='Add Comments via Facebook'>
 <img class='commblogfb-tab-icon' src='http://1.bp.blogspot.com/-pfdCr67N0vY/URV01_6rbJI/AAAAAAAACVg/n_vDeB55BIE/s000/facebook.png'/> <fb:comments-count expr:href='data:post.url'/>
Facebook&#39;s Comments  </div>  <div class='commblogfb-tab inactive-select-tab'
id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);'
title='Add Comments via Blogger'> <img class='commblogfb-tab-icon'
src='http://4.bp.blogspot.com/-DG0bPhhycRU/URV03kQ819I/AAAAAAAACV0/PPkxhtfMJZI/s000/rss.png'/>
<data:post.numComments/> Blogger&#39;s Comments  </div><div class='clear'/>
 </div>  <div class='commblogfb-page' id='fb-comments-page'>  <b:if
cond='data:blog.pageType == &quot;item&quot;'>    <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='2' width='500px'/>
    </b:if>     </div>     <div class='comments commblogfb-page' id='blogger-comments-page'>     <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <meta content='ID FACEBOOK ANDA' property='fb:admins'/>
    <script type='text/javascript'>
    function commentToggle(selectTab) {
    $(&quot;.commblogfb-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
    $(selectTab).removeClass(&quot;inactive-select-tab&quot;);
    $(&quot;.commblogfb-page&quot;).hide();
    $(selectTab + &quot;-page&quot;).show();
    }
 </script><style type='text/css'>.commblogfb-page, .commblogfb-tab
{color:#3F3937;float:left;padding:5px;margin-right:5px;margin-left:5px;
cursor:pointer;font-weight:bold;background-color:#f2f2f2;border-radius:5px 5px 0
0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;position:relative;z-index:10;
box-shadow:0 -1px 2px #666;-moz-box-shadow:0 -1px 2px #666;-webkit-box-shadow:0 -1px 2px #666;
background-image:linear-gradient(#fff,#f2f2f2);background-image:-moz-linear-gradient(#fff,#f2f2f2);
background-image:-webkit-linear-gradient(#fff,#f2f2f2)}.commblogfb-page {background:
rgba(255,255,255,.4);margin-top:8px;}#blogger-comments-page {padding:0px 5px;display:none;}
.commblogfb-tab {background-color:#6196DB;background-image:linear-gradient(#6196DB,#9FBFE9);
background-image:-moz-linear-gradient(#6196DB,#9FBFE9);background-image:-webkit-linear-gradient
(#6196DB,#9FBFE9)}.commblogfb-tab-icon {height:14px;width:auto;margin:0 3px}.commblogfb-tab:hover
{background-color:#9FBFE9;background-image:linear-gradient(#9FBFE9,#9FBFE9);background-image:-moz-linear-gradient(#9FBFE9,#9FBFE9);background-image:-webkit-linear-gradient(#9FBFE9,#9FBFE9)}.inactive-select-tab {background:rgba(background-color:#e2e2e2;background-image:linear-gradient(#f4f4f4,#DDD);background-image:-moz-linear-gradient(#f4f4f4,#DDD);background-image:-webkit-linear-gradient(#f4f4f4,#DDD)}.inactive-select-tab,
.commblogfb-tab:hover {background-color:#3b5998;background-image:linear-gradient(#6b89d8,#3b5998);
background-image:-moz-linear-gradient(#6b89d8,#3b5998);background-image:-webkit-linear-gradient
(#6b89d8,#3b5998)}</style> 

4. Pratinjau, dan apabila tidak ada masalah maka Simpan Template.

5. Enjoy.


*Keterangan : Ganti ID FACEBOOK ANDA dengan id facebook milik anda sendiri (http://facebook.com/INI ID ANDA)

Gimana sob??? Berhasil tidak mempraktekkan cara diatas???

Semoga bermanfaat yah dan jangan lupa tinggalkan komentar di kotak komentar dibawah....