Pages

Home » Posts filed under Slide
Showing posts with label Slide. Show all posts
Showing posts with label Slide. Show all posts

Slide gambar dengan efek 3D

type='html'>Ini adalah sebuah demonstrasi menggunakan 3D perspective, yang dapat Menciptakan "Slide Carousel". Dengan menggunaan keyframes dan translate3d (x, y, z), Slide Carousel ini dapat Berputar seperti layaknya jari-jari dan dapat "auto-run".

Jika dilihat dari atas, Slide Carousel ini terlihat berputar berlawanan dengan arah jarum jam dan ketika sebuah gambar dari slides mencapai sisi kiri, gambar tersebut akan keluar dari lingkaran slides dan membesar selama beberapa detik, kemudian kembali lagi pada susunannya kedalam "Slide Carousel"







DEMO


Untuk proses pembuatannya ikuti langkah berikut,

Loggin Blogger > Rancangan > Edit html
Cari kode ]]> dan pastekan kode berikut diatasnya


/* ================================================================

This copyright notice must be untouched at all times.
Copyright (c) Buku Catatan si Ugi. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.carousel {width:750px; margin:0 auto;
-webkit-perspective: 1600px;
-webkit-perspective-origin: 50% -500px;
}
.ring {position:relative; margin:0 0 0 440px; height:120px; width:180px;
-webkit-transform-style: preserve-3d;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration:36s;
-webkit-animation-name: rotateMe;
}
.spoke {position:absolute; height:120px; width:180px;}
.ring img {border:5px solid #fff;
-o-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
-ms-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0,0.5);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration:36s;
}
.ring img {display:block; width:180px; height:120px;}
.ring .p1 {-webkit-animation-name: enlargeMe12;}
.ring .p2 {-webkit-animation-name: enlargeMe11;}
.ring .p3 {-webkit-animation-name: enlargeMe10;}
.ring .p4 {-webkit-animation-name: enlargeMe9;}
.ring .p5 {-webkit-animation-name: enlargeMe8;}
.ring .p6 {-webkit-animation-name: enlargeMe7;}
.ring .p7 {-webkit-animation-name: enlargeMe6;}
.ring .p8 {-webkit-animation-name: enlargeMe5;}
.ring .p9 {-webkit-animation-name: enlargeMe4;}
.ring .p10 {-webkit-animation-name: enlargeMe3;}
.ring .p11 {-webkit-animation-name: enlargeMe2;}
.ring .p12 {-webkit-animation-name: enlargeMe1;}
@-webkit-keyframes rotateMe {
0% { -webkit-transform: rotateY(0deg);}
8.33% { -webkit-transform: rotateY(30deg);}
16.66% { -webkit-transform: rotateY(60deg);}
24.99% { -webkit-transform: rotateY(90deg);}
33.33% { -webkit-transform: rotateY(120deg);}
41.66% { -webkit-transform: rotateY(150deg);}
49.99% { -webkit-transform: rotateY(180deg);}
58.33% { -webkit-transform: rotateY(210deg);}
66.66% { -webkit-transform: rotateY(240deg);}
74.99% { -webkit-transform: rotateY(270deg);}
83.33% { -webkit-transform: rotateY(300deg);}
91.66% { -webkit-transform: rotateY(330deg);}
100% { -webkit-transform: rotateY(360deg);}
}
@-webkit-keyframes enlargeMe1 {
0% {-webkit-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
5.33% {-webkit-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
8.33% {-webkit-transform: rotateY(330deg) scale(2) translate3d(-190px, 0, 0);}
11.33% {-webkit-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe2 {
0% {-webkit-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
13.66% {-webkit-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
16.66% { -webkit-transform: rotateY(300deg) scale(2) translate3d(-190px, 0, 0);}
19.66% {-webkit-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe3 {
0% {-webkit-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
21.991% {-webkit-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
24.99% {-webkit-transform: rotateY(270deg) scale(2) translate3d(-190px, 0, 0);}
27.99% {-webkit-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe4 {
0% {-webkit-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
30.33% {-webkit-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
33.33% {-webkit-transform: rotateY(240deg) scale(2) translate3d(-190px, 0, 0);}
36.33% {-webkit-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe5 {
0% {-webkit-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
38.66% {-webkit-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
41.66% {-webkit-transform: rotateY(210deg) scale(2) translate3d(-190px, 0, 0);}
44.66% {-webkit-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe6 {
0% {-webkit-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
46.99% {-webkit-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
49.99% {-webkit-transform: rotateY(180deg) scale(2) translate3d(-190px, 0, 0);}
52.99% {-webkit-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe7 {
0% {-webkit-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
55.33% {-webkit-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
58.33% {-webkit-transform: rotateY(150deg) scale(2) translate3d(-190px, 0, 0);}
61.33% {-webkit-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe8 {
0% {-webkit-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
63.66% {-webkit-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
66.66% {-webkit-transform: rotateY(120deg) scale(2) translate3d(-190px, 0, 0);}
69.66% {-webkit-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe9 {
0% {-webkit-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
71.99% {-webkit-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
74.99% {-webkit-transform: rotateY(90deg) scale(2) translate3d(-190px, 0, 0);}
77.99% {-webkit-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe10 {
0% {-webkit-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
80.33% {-webkit-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
83.33% {-webkit-transform: rotateY(60deg) scale(2) translate3d(-190px, 0, 0);}
86.33% {-webkit-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe11 {
0% {-webkit-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
88.66% {-webkit-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
91.66% {-webkit-transform: rotateY(30deg) scale(2) translate3d(-190px,0, 0);}
94.66% {-webkit-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe12 {
0% {-webkit-transform: rotateY(0deg) scale(2) translate3d(-190px, 0, 0);}
3% {-webkit-transform: rotateY(0deg) translate3d(-120px, 0, 0);}
96.9% {-webkit-transform: rotateY(0deg) translate3d(-120px, 0, 0);}
97% {-webkit-transform: rotateY(0deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(0deg) scale(2) translate3d(-190px, 0, 0);}
}
/* for Firefox */
.carousel {
-moz-perspective: 1600px;
-moz-perspective-origin: 50% -500px;
}
.ring {
-moz-transform-style: preserve-3d;
-moz-animation-iteration-count: infinite;
-moz-animation-duration:36s;
-moz-animation-name: rotateMe;
}
.ring img {
-moz-animation-iteration-count: infinite;
-moz-animation-duration:36s;
}
.ring .p1 {-moz-animation-name: enlargeMe12;}
.ring .p2 {-moz-animation-name: enlargeMe11;}
.ring .p3 {-moz-animation-name: enlargeMe10;}
.ring .p4 {-moz-animation-name: enlargeMe9;}
.ring .p5 {-moz-animation-name: enlargeMe8;}
.ring .p6 {-moz-animation-name: enlargeMe7;}
.ring .p7 {-moz-animation-name: enlargeMe6;}
.ring .p8 {-moz-animation-name: enlargeMe5;}
.ring .p9 {-moz-animation-name: enlargeMe4;}
.ring .p10 {-moz-animation-name: enlargeMe3;}
.ring .p11 {-moz-animation-name: enlargeMe2;}
.ring .p12 {-moz-animation-name: enlargeMe1;}
@-moz-keyframes rotateMe {
0% { -moz-transform: rotateY(0deg);}
8.33% { -moz-transform: rotateY(30deg);}
16.66% { -moz-transform: rotateY(60deg);}
24.99% { -moz-transform: rotateY(90deg);}
33.33% { -moz-transform: rotateY(120deg);}
41.66% { -moz-transform: rotateY(150deg);}
49.99% { -moz-transform: rotateY(180deg);}
58.33% { -moz-transform: rotateY(210deg);}
66.66% { -moz-transform: rotateY(240deg);}
74.99% { -moz-transform: rotateY(270deg);}
83.33% { -moz-transform: rotateY(300deg);}
91.66% { -moz-transform: rotateY(330deg);}
100% { -moz-transform: rotateY(360deg);}
}
@-moz-keyframes enlargeMe1 {
0% {-moz-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
5.33% {-moz-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
8.33% {-moz-transform: rotateY(330deg) scale(2) translate3d(-190px, 0, 0);}
11.33% {-moz-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe2 {
0% {-moz-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
13.66% {-moz-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
16.66% { -moz-transform: rotateY(300deg) scale(2) translate3d(-190px, 0, 0);}
19.66% {-moz-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe3 {
0% {-moz-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
21.991% {-moz-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
24.99% {-moz-transform: rotateY(270deg) scale(2) translate3d(-190px, 0, 0);}
27.99% {-moz-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe4 {
0% {-moz-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
30.33% {-moz-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
33.33% {-moz-transform: rotateY(240deg) scale(2) translate3d(-190px, 0, 0);}
36.33% {-moz-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe5 {
0% {-moz-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
38.66% {-moz-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
41.66% {-moz-transform: rotateY(210deg) scale(2) translate3d(-190px, 0, 0);}
44.66% {-moz-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe6 {
0% {-moz-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
46.99% {-moz-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
49.99% {-moz-transform: rotateY(180deg) scale(2) translate3d(-190px, 0, 0);}
52.99% {-moz-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe7 {
0% {-moz-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
55.33% {-moz-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
58.33% {-moz-transform: rotateY(150deg) scale(2) translate3d(-190px, 0, 0);}
61.33% {-moz-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe8 {
0% {-moz-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
63.66% {-moz-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
66.66% {-moz-transform: rotateY(120deg) scale(2) translate3d(-190px, 0, 0);}
69.66% {-moz-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe9 {
0% {-moz-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
71.99% {-moz-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
74.99% {-moz-transform: rotateY(90deg) scale(2) translate3d(-190px, 0, 0);}
77.99% {-moz-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe10 {
0% {-moz-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
80.33% {-moz-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
83.33% {-moz-transform: rotateY(60deg) scale(2) translate3d(-190px, 0, 0);}
86.33% {-moz-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe11 {
0% {-moz-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
88.66% {-moz-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
91.66% {-moz-transform: rotateY(30deg) scale(2) translate3d(-190px,0, 0);}
94.66% {-moz-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe12 {
0% {-moz-transform: rotateY(0deg) scale(2) translate3d(-190px, 0, 0);}
3% {-moz-transform: rotateY(0deg) translate3d(-120px, 0, 0);}
96.9% {-moz-transform: rotateY(0deg) translate3d(-120px, 0, 0);}
97% {-moz-transform: rotateY(0deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(0deg) scale(2) translate3d(-190px, 0, 0);}
}

Selanjutnya untuk kode pemanggil anda bisa letakkan dimana saja mau di posting, sidebar dll
















Oke cukup itu saja.. Semoga bermanfaat
Sumber : Buku catatan Si ugi
Labels: , ,

Fancy Apple-Style Icon Slide Out Navigation

type='html'>
Fancy Apple-Style Icon Slide Out Navigation adalah suatu navigasi yang bergaya apple.. agak beda sih.. navigasi ini letaknya di atas bentuknya biasa sih tapi saat disentuh mouse baru kelihatan ajibnya navigasi ini..hehehe navigasi ini saya temukan sudah terdampar di suatu website, ya udah  saya pungut aja..oke langsung saja kita lihat demo dan cara pembuatannya




Langsung ke proses pembuatannya 

  • Loggin blogger.com >>Rancangan >> Edit Html
  •  
  • cari kode ]]> dan pastekan kode berikut diatasnya


.navigation{
    position:relative;
    margin:0 auto;
    width:915px;
}
ul.menu{
    list-style:none;
    font-family:"Verdana",sans-serif;
    border-top:1px solid #bebebe;
    margin:0px;
    padding:0px;
    float:left;
}
ul.menu li{
    float:left;
}
ul.menu li a{
    text-decoration:none;
    background:#7E7E7E url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0rUBBSanjucrR15ypVH2_ZGuPNsn5i8Dw7VITCcP9at67yijc6U2JxqzSP1m6L0ei9HV7ExsMmp2BJ-BW3ycadIf7kYrHqI-8HWMIU6nTAXq-Rhkzj9JLkCzc_KLEEqxp9CvldZCW4WuO/s1600/bgMenu.png) repeat-x top left;
    padding:15px 0px;
    width:128px;
    color:#333333;
    float:left;
    text-align:center;
    border-right:1px solid #a1a1a1;
    border-left:1px solid #e8e8e8;
    font-weight:bold;
    font-size:13px;
    -moz-box-shadow: 0 1px 3px #555;
    -webkit-box-shadow: 0 1px 3px #555;
    text-shadow: 0 1px 1px #fff;
}
ul.menu li a.hover{
    background-image:none;
    color:#fff;
    text-shadow: 0 -1px 1px #000;
}
ul.menu li a.first{
    -moz-border-radius:0px 0px 0px 10px;
    -webkit-border-bottom-left-radius: 10px;
    border-left:none;
}
ul.menu li a.last{
    -moz-border-radius:0px 0px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
}
ul.menu li span{
    width:64px;
    height:64px;
    background-repeat:no-repeat;
    background-color:transparent;
    position:absolute;
    z-index:-1;
    top:80px;
    cursor:pointer;
}
ul.menu li span.ipod{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN8y_aoIxTFxiqSQzZ1__KTqUJ9K7IL0M2O_bgaw56s00sVwe6-VDbnkg_iuX-FO4XZk5LRb4Bx4fZpUjEZ-MKdB1jedBKIRHJxfh0IBo93lfVHmRFGyB-Lg_HKP-vp-AUungfYjGUffme/s1600/ipod.png);
    left:33px; /*128/2 - 32(half of icon) +1 of border*/
}
ul.menu li span.video_camera{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzwibB1lLMoDKJhiyHulBAmv9MWBwTZ0HfrlIf1Zx8S7dF4y7H5pfS93UkxfZkvILwwqTa2wlk_1mnwkBtyowso8cONr0n9tGKIvjmiCxwTvCjUabiThkr06Y32ylX5PiPBqp6mNRx15jx/s1600/video_camera.png);
    left:163px; /* plus 128 + 2px of border*/
}
ul.menu li span.television{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh676e0fCN84tS0mBhPq2ZAPVoTpb7XoVALkvdt6eY4bib59m9FYtGiYB4p_hjYNtYWZK8ngYGTSBuPR2YtAfMpxibXMdmWu3yBRnAixp-5K-USa2GPd4bXiSLgMN6Jgn9pN8dCpDzwL5V/s1600/television.png);
    left:293px;
}
ul.menu li span.monitor{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ4jBi7KZX_vHu1uWzQe6YLzOGdtPIGM3Im2e2l9oJ1ww06BPWDJFHJurT5dlxID1bl3G39xbkTGO-bNl7ghcWos5mPwUADdCkeqjVPbTEBFuCeC3uSwpkSvMjS7Rw4B2v-APDbcZVr0Cx/s1600/monitor.png);
    left:423px;
}
ul.menu li span.toolbox{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYaXmeLtWMj7GBAlROQiL9QQgAlZLM0lV3KzjNyAQrLamZHzZsgpe0DoA5fcONvDuhTU_RrOzRs354MiYP5hrKTFeZ34LL0vS_yytsbpEiBuUftpbWO2fNhzcNxKXUygGnR72in-GnWWIp/s1600/toolbox.png);
    left:553px;
}
ul.menu li span.telephone{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeptc-d80GbE6GWb7c5grOx-nRui6wlNOPw15zzExzfM7vMOLkH669bOxIZEID70PU8ckWyoAYeGcBnXaD0ZZvHLy6ISK82p_p_ZXQFNwbGKqlYUjFUJb_Tl6pZD5577dvmNYEWopsLv1S/s1600/telephone.png);
    left:683px;
}
ul.menu li span.print{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_ggK0F5kih0clQECifece-19-ADLUCnjYLH_xCFemrTO5WiBnNMHNzZkwS-BGsvAH0hZWETY5guEaEwpxaQl3cU50-F75IQSteIxwDW1fXoEFXcx-Wvf-4TDn2xmXeTNU1jPOPb-8zqhS/s1600/print.png);
    left:813px;
}

  • oke lanjut cari kode dan pastekan kode berikut diatasnya 


 

warning: jika blog anda sudah memiliki kode berwarna merah, jangan anda tambahkan.. cukup satu

  • lanjut cari kode  
  • dan pastekan kode berikut di bawahnya


 


  • oke.. simpan.. semoga bermanfaat 
Labels: , , ,
Subscribe to: Posts (Atom)