NEWS
Loading...
  • Posted by : Johanes Djogan 15 Jan 2012

    Trik membuat Fullscreen background slideshow dengan CSS3

    Memasang wallpaper pada background blog kita,terlihat menarik dan unik.tapi menggunakan trik ini juga akan membuat blog sobat agak berat karena lamanya proses loading gambar yang akan ditampilkan.
    tapi itu juga tergantung dari size gambar yang dijadikan background,saya sarankan sebelum mengupload dan memasang background,cari gambar yang ukuran filenya kecil(100-200kb),dan bila perlu,edit dulu gambarnya di photoshop menjadi kecil.contohnya blog saya sekarang,mungkin masih agak berat saat pertama kali buka blog saya,tapi kalau cache sudah tersimpan di browser kamu,maka otomatis tidak akan terlalu berat lagi saat membuka blog saya.sebelum mencoba trik ini,saya ingatkan untuk membackup terlebih dahulu template blogger kamu.

    Contohnya kamu bisa liat blog saya,atau disini:
    Trik membuat Fullscreen background slideshow dengan CSS3

    dan ini contoh yang saya gunakan pada template blog experiment : http://akatsukimangaindo.blogspot.com/

    ok,yang pertama buka rancangan=> edit HTML,lalu copy kode html dibawah ini di bawah kode <body>

    <ul class="cb-slideshow">
    <li><span>Gambar 01</span><div><h3>textkamu1</h3></div></li>
    <li><span>Gambar 02</span><div><h3>textkamu2</h3></div></li>
    <li><span>Gambar 03</span><div><h3>textkamu3</h3></div></li>
    <li><span>Gambar 04</span><div><h3>textkamu4</h3></div></li>
    <li><span>Gambar 05</span><div><h3>textkamu5</h3></div></li>
    <li><span>Gambar 06</span><div><h3>textkamu6</h3></div></li>
    </ul>


    #Note:kamu bisa mengganti pesannya pada tiap slide.


    yang kedua,pilih/COPY SALAH SATU Style/CSS yang ada dibawah ini,Sesuai yang ada dicontoh.


    Slide effect 1

    .cb-slideshow,
    .cb-slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
    }
    .cb-slideshow:after {
    content: '';
    background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
    }
    .cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s;
    }
    .cb-slideshow li div {
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    -webkit-animation: titleAnimation 36s linear infinite 0s;
    -moz-animation: titleAnimation 36s linear infinite 0s;
    -o-animation: titleAnimation 36s linear infinite 0s;
    -ms-animation: titleAnimation 36s linear infinite 0s;
    animation: titleAnimation 36s linear infinite 0s;
    }
    .cb-slideshow li div h3 {
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 240px;
    padding: 0;
    line-height: 200px;
    }
    .cb-slideshow li:nth-child(1) span {
    background-image: url(http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg)
    }
    .cb-slideshow li:nth-child(2) span {
    background-image: url(http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
    }
    .cb-slideshow li:nth-child(3) span {
    background-image: url(http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
    }
    .cb-slideshow li:nth-child(4) span {
    background-image: url(http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
    }
    .cb-slideshow li:nth-child(5) span {
    background-image: url(http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
    }
    .cb-slideshow li:nth-child(6) span {
    background-image: url(http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s;
    }
    .cb-slideshow li:nth-child(2) div {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
    }
    .cb-slideshow li:nth-child(3) div {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
    }
    .cb-slideshow li:nth-child(4) div {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
    }
    .cb-slideshow li:nth-child(5) div {
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
    }
    .cb-slideshow li:nth-child(6) div {
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s;
    }
    /* Animation for the slideshow images */
    @-webkit-keyframes imageAnimation {
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
    -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
    }
    @-moz-keyframes imageAnimation {
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
    -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
    }
    @-o-keyframes imageAnimation {
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
    -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
    }
    @-ms-keyframes imageAnimation {
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
    -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
    }
    @keyframes imageAnimation {
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
    animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
    }
    /* Animation for the title */
    @-webkit-keyframes titleAnimation {
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
    }
    @-moz-keyframes titleAnimation {
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
    }
    @-o-keyframes titleAnimation {
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
    }
    @-ms-keyframes titleAnimation {
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
    }
    @keyframes titleAnimation {
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
    }
    /* Show at least something when animations not supported */
    .no-cssanimations .cb-slideshow li span{
    opacity: 1;
    }

    @media screen and (max-width: 1140px) {
    .cb-slideshow li div h3 { font-size: 140px }
    }
    @media screen and (max-width: 600px) {
    .cb-slideshow li div h3 { font-size: 80px }
    }


    Slide effect 2

    .cb-slideshow,
    .cb-slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
    }
    .cb-slideshow:after {
    content: '';
    background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
    }
    .cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s;
    }
    .cb-slideshow li div {
    z-index: 1000;
    position: absolute;
    bottom: 10px;
    left: 0px;
    width: 100%;
    text-align: right;
    opacity: 0;
    -webkit-animation: titleAnimation 36s linear infinite 0s;
    -moz-animation: titleAnimation 36s linear infinite 0s;
    -o-animation: titleAnimation 36s linear infinite 0s;
    -ms-animation: titleAnimation 36s linear infinite 0s;
    animation: titleAnimation 36s linear infinite 0s;
    }
    .cb-slideshow li div h3 {
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 160px;
    padding: 0 30px;
    line-height: 120px;
    color: rgba(169,3,41, 0.8);
    }
    .cb-slideshow li:nth-child(1) span { background-image: url(http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg) }
    .cb-slideshow li:nth-child(2) span {
    background-image: url(http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
    }
    .cb-slideshow li:nth-child(3) span {
    background-image: url(http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
    }
    .cb-slideshow li:nth-child(4) span {
    background-image: url(http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
    }
    .cb-slideshow li:nth-child(5) span {
    background-image: url(http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
    }
    .cb-slideshow li:nth-child(6) span {
    background-image: url(http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s;
    }
    .cb-slideshow li:nth-child(2) div {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
    }
    .cb-slideshow li:nth-child(3) div {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
    }
    .cb-slideshow li:nth-child(4) div {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
    }
    .cb-slideshow li:nth-child(5) div {
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
    }
    .cb-slideshow li:nth-child(6) div {
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s;
    }
    @-webkit-keyframes imageAnimation {
    0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
    }
    8% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -webkit-animation-timing-function: ease-out;
    }
    17% {
    opacity: 1;
    -webkit-transform: scale(1.1) rotate(3deg);
    }
    25% {
    opacity: 0;
    -webkit-transform: scale(1.1) rotate(3deg);
    }
    100% { opacity: 0 }
    }
    @-moz-keyframes imageAnimation {
    0% {
    opacity: 0;
    -moz-animation-timing-function: ease-in;
    }
    8% {
    opacity: 1;
    -moz-transform: scale(1.05);
    -moz-animation-timing-function: ease-out;
    }
    17% {
    opacity: 1;
    -moz-transform: scale(1.1) rotate(3deg);
    }
    25% {
    opacity: 0;
    -moz-transform: scale(1.1) rotate(3deg);
    }
    100% { opacity: 0 }
    }
    @-o-keyframes imageAnimation {
    0% {
    opacity: 0;
    -o-animation-timing-function: ease-in;
    }
    8% {
    opacity: 1;
    -o-transform: scale(1.05);
    -o-animation-timing-function: ease-out;
    }
    17% {
    opacity: 1;
    -o-transform: scale(1.1) rotate(3deg);
    }
    25% {
    opacity: 0;
    -o-transform: scale(1.1) rotate(3deg);
    }
    100% { opacity: 0 }
    }
    @-ms-keyframes imageAnimation {
    0% {
    opacity: 0;
    -ms-animation-timing-function: ease-in;
    }
    8% {
    opacity: 1;
    -ms-transform: scale(1.05);
    -ms-animation-timing-function: ease-out;
    }
    17% {
    opacity: 1;
    -ms-transform: scale(1.1) rotate(3deg);
    }
    25% {
    opacity: 0;
    -ms-transform: scale(1.1) rotate(3deg);
    }
    100% { opacity: 0 }
    }
    @keyframes imageAnimation {
    0% {
    opacity: 0;
    animation-timing-function: ease-in;
    }
    8% {
    opacity: 1;
    transform: scale(1.05);
    animation-timing-function: ease-out;
    }
    17% {
    opacity: 1;
    transform: scale(1.1) rotate(3deg);
    }
    25% {
    opacity: 0;
    transform: scale(1.1) rotate(3deg);
    }
    100% { opacity: 0 }
    }
    @-webkit-keyframes titleAnimation {
    0% {
    opacity: 0;
    -webkit-transform: translateX(200px);
    }
    8% {
    opacity: 1;
    -webkit-transform: translateX(0px);
    }
    17% {
    opacity: 1;
    -webkit-transform: translateX(0px);
    }
    19% {
    opacity: 0;
    -webkit-transform: translateX(-400px);
    }
    25% { opacity: 0 }
    100% { opacity: 0 }
    }
    @-moz-keyframes titleAnimation {
    0% {
    opacity: 0;
    -moz-transform: translateX(200px);
    }
    8% {
    opacity: 1;
    -moz-transform: translateX(0px);
    }
    17% {
    opacity: 1;
    -moz-transform: translateX(0px);
    }
    19% {
    opacity: 0;
    -moz-transform: translateX(-400px);
    }
    25% { opacity: 0 }
    100% { opacity: 0 }
    }
    @-o-keyframes titleAnimation {
    0% {
    opacity: 0;
    -o-transform: translateX(200px);
    }
    8% {
    opacity: 1;
    -o-transform: translateX(0px);
    }
    17% {
    opacity: 1;
    -o-transform: translateX(0px);
    }
    19% {
    opacity: 0;
    -o-transform: translateX(-400px);
    }
    25% { opacity: 0 }
    100% { opacity: 0 }
    }
    @-ms-keyframes titleAnimation {
    0% {
    opacity: 0;
    -ms-transform: translateX(200px);
    }
    8% {
    opacity: 1;
    -ms-transform: translateX(0px);
    }
    17% {
    opacity: 1;
    -ms-transform: translateX(0px);
    }
    19% {
    opacity: 0;
    -ms-transform: translateX(-400px);
    }
    25% { opacity: 0 }
    100% { opacity: 0 }
    }
    @keyframes titleAnimation {
    0% {
    opacity: 0;
    transform: translateX(200px);
    }
    8% {
    opacity: 1;
    transform: translateX(0px);
    }
    17% {
    opacity: 1;
    transform: translateX(0px);
    }
    19% {
    opacity: 0;
    transform: translateX(-400px);
    }
    25% { opacity: 0 }
    100% { opacity: 0 }
    }
    /* Show at least something when animations not supported */
    .no-cssanimations .cb-slideshow li span{
    opacity: 1;
    }
    @media screen and (max-width: 1140px) {
    .cb-slideshow li div h3 { font-size: 100px }
    }
    @media screen and (max-width: 600px) {
    .cb-slideshow li div h3 { font-size: 50px }
    }


    Slide effect 3

    .cb-slideshow,
    .cb-slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
    }
    .cb-slideshow:after {
    content: '';
    background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
    }
    .cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s;
    }
    .cb-slideshow li div {
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    -webkit-animation: titleAnimation 36s linear infinite 0s;
    -moz-animation: titleAnimation 36s linear infinite 0s;
    -o-animation: titleAnimation 36s linear infinite 0s;
    -ms-animation: titleAnimation 36s linear infinite 0s;
    animation: titleAnimation 36s linear infinite 0s;
    }
    .cb-slideshow li div h3 {
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 160px;
    padding: 0 30px;
    line-height: 120px;
    color: rgba(255,255,255,0.8);
    }
    .cb-slideshow li:nth-child(1) span { background-image: url(http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg) }
    .cb-slideshow li:nth-child(2) span {
    background-image: url(http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
    }
    .cb-slideshow li:nth-child(3) span {
    background-image: url(http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
    }
    .cb-slideshow li:nth-child(4) span {
    background-image: url(http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
    }
    .cb-slideshow li:nth-child(5) span {
    background-image: url(http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
    }
    .cb-slideshow li:nth-child(6) span {
    background-image: url(http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s;
    }
    .cb-slideshow li:nth-child(2) div {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
    }
    .cb-slideshow li:nth-child(3) div {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
    }
    .cb-slideshow li:nth-child(4) div {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
    }
    .cb-slideshow li:nth-child(5) div {
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
    }
    .cb-slideshow li:nth-child(6) div {
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s;
    }
    @-webkit-keyframes imageAnimation {
    0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
    }
    8% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -webkit-animation-timing-function: ease-out;
    }
    17% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    }
    22% {
    opacity: 0;
    -webkit-transform: scale(1.1) translateY(-20%);
    }
    25% {
    opacity: 0;
    -webkit-transform: scale(1.1) translateY(-100%);
    }
    100% { opacity: 0 }
    }
    @-moz-keyframes imageAnimation {
    0% {
    opacity: 0;
    -moz-animation-timing-function: ease-in;
    }
    8% {
    opacity: 1;
    -moz-transform: scale(1.05);
    -moz-animation-timing-function: ease-out;
    }
    17% {
    opacity: 1;
    -moz-transform: scale(1.1);
    }
    22% {
    opacity: 0;
    -webkit-transform: scale(1.1) translateY(-20%);
    }
    25% {
    opacity: 0;
    -moz-transform: scale(1.1) translateY(-100%);
    }
    100% { opacity: 0 }
    }
    @-o-keyframes imageAnimation {
    0% {
    opacity: 0;
    -o-animation-timing-function: ease-in;
    }
    8% {
    opacity: 1;
    -o-transform: scale(1.05);
    -o-animation-timing-function: ease-out;
    }
    17% {
    opacity: 1;
    -o-transform: scale(1.1);
    }
    22% {
    opacity: 0;
    -webkit-transform: scale(1.1) translateY(-20%);
    }
    25% {
    opacity: 0;
    -o-transform: scale(1.1) translateY(-100%);
    }
    100% { opacity: 0 }
    }
    @-ms-keyframes imageAnimation {
    0% {
    opacity: 0;
    -ms-animation-timing-function: ease-in;
    }
    8% {
    opacity: 1;
    -ms-transform: scale(1.05);
    -ms-animation-timing-function: ease-out;
    }
    17% {
    opacity: 1;
    -ms-transform: scale(1.1);
    }
    22% {
    opacity: 0;
    -webkit-transform: scale(1.1) translateY(-20%);
    }
    25% {
    opacity: 0;
    -ms-transform: scale(1.1) translateY(-100%);
    }
    100% { opacity: 0 }
    }
    @keyframes imageAnimation {
    0% {
    opacity: 0;
    animation-timing-function: ease-in;
    }
    8% {
    opacity: 1;
    transform: scale(1.05);
    animation-timing-function: ease-out;
    }
    17% {
    opacity: 1;
    transform: scale(1.1);
    }
    22% {
    opacity: 0;
    -webkit-transform: scale(1.1) translateY(-20%);
    }
    25% {
    opacity: 0;
    -transform: scale(1.1) translateY(-100%);
    }
    100% { opacity: 0 }
    }
    @-webkit-keyframes titleAnimation {
    0% {
    opacity: 0;
    -webkit-transform: translateY(-300%);
    }
    8% {
    opacity: 1;
    -webkit-transform: translateY(0%);
    }
    17% {
    opacity: 1;
    -webkit-transform: translateY(0%);
    }
    19% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    }
    25% { opacity: 0 }
    100% { opacity: 0 }
    }
    @-moz-keyframes titleAnimation {
    0% {
    opacity: 0;
    -moz-transform: translateY(-300%);
    }
    8% {
    opacity: 1;
    -moz-transform: translateY(0%);
    }
    17% {
    opacity: 1;
    -moz-transform: translateY(0%);
    }
    19% {
    opacity: 0;
    -moz-transform: translateY(100%);
    }
    25% { opacity: 0 }
    100% { opacity: 0 }
    }
    @-o-keyframes titleAnimation {
    0% {
    opacity: 0;
    -o-transform: translateY(-300%);
    }
    8% {
    opacity: 1;
    -o-transform: translateY(0%);
    }
    17% {
    opacity: 1;
    -o-transform: translateY(0%);
    }
    19% {
    opacity: 0;
    -o-transform: translateY(100%);
    }
    25% { opacity: 0 }
    100% { opacity: 0 }
    }
    @-ms-keyframes titleAnimation {
    0% {
    opacity: 0;
    -ms-transform: translateY(-300%);
    }
    8% {
    opacity: 1;
    -ms-transform: translateY(0%);
    }
    17% {
    opacity: 1;
    -ms-transform: translateY(0%);
    }
    19% {
    opacity: 0;
    -ms-transform: translateY(100%);
    }
    25% { opacity: 0 }
    100% { opacity: 0 }
    }
    @keyframes titleAnimation {
    0% {
    opacity: 0;
    transform: translateY(-300%);
    }
    8% {
    opacity: 1;
    transform: translateY(0%);
    }
    17% {
    opacity: 1;
    transform: translateY(0%);
    }
    19% {
    opacity: 0;
    transform: translateY(100%);
    }
    25% { opacity: 0 }
    100% { opacity: 0 }
    }
    /* Show at least something when animations not supported */
    .no-cssanimations .cb-slideshow li span{
    opacity: 1;
    }
    @media screen and (max-width: 1140px) {
    .cb-slideshow li div h3 { font-size: 100px }
    }
    @media screen and (max-width: 600px) {
    .cb-slideshow li div h3 { font-size: 50px }
    }


    Slide effect 4

    .cb-slideshow,
    .cb-slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
    }
    .cb-slideshow:after {
    content: '';
    background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
    }
    .cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s;
    }
    .cb-slideshow li div {
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    -webkit-animation: titleAnimation 36s linear infinite 0s;
    -moz-animation: titleAnimation 36s linear infinite 0s;
    -o-animation: titleAnimation 36s linear infinite 0s;
    -ms-animation: titleAnimation 36s linear infinite 0s;
    animation: titleAnimation 36s linear infinite 0s;
    }
    .cb-slideshow li div h3 {
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 240px;
    padding: 0;
    line-height: 200px;
    color: rgba(169,3,41, 0.8);
    }
    .cb-slideshow li:nth-child(1) span { background-image: url(http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg) }
    .cb-slideshow li:nth-child(2) span {
    background-image: url(http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
    }
    .cb-slideshow li:nth-child(3) span {
    background-image: url(http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
    }
    .cb-slideshow li:nth-child(4) span {
    background-image: url(http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
    }
    .cb-slideshow li:nth-child(5) span {
    background-image: url(http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
    }
    .cb-slideshow li:nth-child(6) span {
    background-image: url(http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s;
    }
    .cb-slideshow li:nth-child(2) div {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
    }
    .cb-slideshow li:nth-child(3) div {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
    }
    .cb-slideshow li:nth-child(4) div {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
    }
    .cb-slideshow li:nth-child(5) div {
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
    }
    .cb-slideshow li:nth-child(6) div {
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s;
    }
    /* Animation for the slideshow images */
    @-webkit-keyframes imageAnimation {
    0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
    }
    8% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -webkit-animation-timing-function: ease-out;
    }
    17% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    }
    25% {
    opacity: 0;
    -webkit-transform: scale(1.1);
    }
    100% { opacity: 0 }
    }
    @-moz-keyframes imageAnimation {
    0% {
    opacity: 0;
    -moz-animation-timing-function: ease-in;
    }
    8% {
    opacity: 1;
    -moz-transform: scale(1.05);
    -moz-animation-timing-function: ease-out;
    }
    17% {
    opacity: 1;
    -moz-transform: scale(1.1);
    }
    25% {
    opacity: 0;
    -moz-transform: scale(1.1);
    }
    100% { opacity: 0 }
    }
    @-o-keyframes imageAnimation {
    0% {
    opacity: 0;
    -o-animation-timing-function: ease-in;
    }
    8% {
    opacity: 1;
    -o-transform: scale(1.05);
    -o-animation-timing-function: ease-out;
    }
    17% {
    opacity: 1;
    -o-transform: scale(1.1);
    }
    25% {
    opacity: 0;
    -o-transform: scale(1.1);
    }
    100% { opacity: 0 }
    }
    @-ms-keyframes imageAnimation {
    0% {
    opacity: 0;
    -ms-animation-timing-function: ease-in;
    }
    8% {
    opacity: 1;
    -ms-transform: scale(1.05);
    -ms-animation-timing-function: ease-out;
    }
    17% {
    opacity: 1;
    -ms-transform: scale(1.1);
    }
    25% {
    opacity: 0;
    -ms-transform: scale(1.1);
    }
    100% { opacity: 0 }
    }
    @keyframes imageAnimation {
    0% {
    opacity: 0;
    animation-timing-function: ease-in;
    }
    8% {
    opacity: 1;
    transform: scale(1.05);
    animation-timing-function: ease-out;
    }
    17% {
    opacity: 1;
    transform: scale(1.1);
    }
    25% {
    opacity: 0;
    transform: scale(1.1);
    }
    100% { opacity: 0 }
    }
    /* Animation for the title */
    @-webkit-keyframes titleAnimation {
    0% {
    opacity: 0;
    -webkit-transform: translateY(200px);
    }
    8% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    }
    17% {
    opacity: 1;
    -webkit-transform: scale(1);
    }
    19% { opacity: 0 }
    25% {
    opacity: 0;
    -webkit-transform: scale(10);
    }
    100% { opacity: 0 }
    }
    @-moz-keyframes titleAnimation {
    0% {
    opacity: 0;
    -moz-transform: translateY(200px);
    }
    8% {
    opacity: 1;
    -moz-transform: translateY(0px);
    }
    17% {
    opacity: 1;
    -moz-transform: scale(1);
    }
    19% { opacity: 0 }
    25% {
    opacity: 0;
    -moz-transform: scale(10);
    }
    100% { opacity: 0 }
    }
    @-o-keyframes titleAnimation {
    0% {
    opacity: 0;
    -o-transform: translateY(200px);
    }
    8% {
    opacity: 1;
    -o-transform: translateY(0px);
    }
    17% {
    opacity: 1;
    -o-transform: scale(1);
    }
    19% { opacity: 0 }
    25% {
    opacity: 0;
    -o-transform: scale(10);
    }
    100% { opacity: 0 }
    }
    @-ms-keyframes titleAnimation {
    0% {
    opacity: 0;
    -ms-transform: translateY(200px);
    }
    8% {
    opacity: 1;
    -ms-transform: translateY(0px);
    }
    17% {
    opacity: 1;
    -ms-transform: scale(1);
    }
    19% { opacity: 0 }
    25% {
    opacity: 0;
    -webkit-transform: scale(10);
    }
    100% { opacity: 0 }
    }
    @keyframes titleAnimation {
    0% {
    opacity: 0;
    transform: translateY(200px);
    }
    8% {
    opacity: 1;
    transform: translateY(0px);
    }
    17% {
    opacity: 1;
    transform: scale(1);
    }
    19% { opacity: 0 }
    25% {
    opacity: 0;
    transform: scale(10);
    }
    100% { opacity: 0 }
    }
    /* Show at least something when animations not supported */
    .no-cssanimations .cb-slideshow li span{
    opacity: 1;
    }
    @media screen and (max-width: 1140px) {
    .cb-slideshow li div h3 { font-size: 100px }
    }
    @media screen and (max-width: 600px) {
    .cb-slideshow li div h3 { font-size: 50px }
    }




    Kalau sudah dicopy,paste di atas kode ]]></b:skin> ,lalu simpan dan lihat hasilnya.

    Saya ingatkan,tidak semua template blogger sobat bisa menggunakan trik ini,jika gagal,maka akan menjadi speri dibawah ini:
    saran saya,cek lagi template blogger sobat,mungkin template sobat tidak valid dan menurut saya ganti template lagi kalau niat banget ==v

    Oia,sobat perhatikan CSS yang seperti dibawah ini:
    .cb-slideshow li:nth-child(1) span {
    background-image: url(http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg)
    }
    .cb-slideshow li:nth-child(2) span {
    background-image: url(http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
    }
    .cb-slideshow li:nth-child(3) span {
    background-image: url(http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
    }
    .cb-slideshow li:nth-child(4) span {
    background-image: url(http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
    }
    .cb-slideshow li:nth-child(5) span {
    background-image: url(http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
    }
    .cb-slideshow li:nth-child(6) span {
    background-image: url(http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s;
    }

    bila sobat perhatikan,ada css .cb-slideshow li:nth-child 1 sampai 6,yang artinya kamu bisa pasang 6 background yang berbeda.yang sobat,lakukan selanjutnya ganti URL gambar yang sudah ada,dengan URL gambar kamu.
    (http://2.bp.blogspot.com/-ykZ7dmXxXzw/Tw2aGtvU9xI/AAAAAAAAA3k/MgWmTn8Sw_8/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg)

    (づ ̄ ³ ̄)づ  

    Untuk CSS,saya tidak jelaskan secara rinci,karena untuk pengeditan css,merubah tipe font,warna dan efek animasi,akan lebih panjang ceritanya,tapi saya yakin sobat pasti sudah jago ngedit css.tapi kalau ada masalah atau galat(misal navbar ketutup gambar,ada widget yg ketutup gambar,dan mungkin juga ada element lain sehingga background tidak muncul karena tertutup oleh posting,sidebar,header),kalau masalahnya seperti itu,menurut saya element" kamu dibuat trasparant,atau cari blogger template yang luas posting'a tidak terlalu besar.
    nah bila masalahnya semua halaman blog kamu ketutup ama slide ini,klo masalah yg kaya gitu udah gw duga.sbenarnya cuma tambahin css z-index:-99; ke css slide'a itu,jadi nanti posisinya ada di paling blakang.karena slide ini maen'a juga pakai sistem layer.
    .cb-slideshow,
    .cb-slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; <===,diganti jadi z-index: -99; (atau lebih minus juga boleh ==v }


    Ibaratnya kaya photoshop,kalo layer'a diposisi paling atas,yg diblakangnya akan ketutup sama yang diatas,kalau di blog,slidenya itu bisa menimpa sidebar ataupun yg lain,jadi kita cuma harus posisiin slidenya itu dipaling belakang aja.

    jika ada masalah tinggal tanyakan saja~xDD

    Terima kasih,dan selamat mencoba :)


    { 14 comments... read them below or Comment }

    1. PERTAMAAX :D ini dia yang saya tunggu2 :D makasih master XD

      BalasHapus
    2. MANTAB NIH GAN INFONYA, SEKALIAN BLOGWALKING, VISIT ME YA

      BalasHapus
    3. wuih mantab .. mas request template anime tapi temanya komputer, maturnuwun :)

      BalasHapus
    4. hhaha,thx sob.hooo,boleh tuh request'a :)

      BalasHapus
    5. okeh saya tunggu mas .. klo udah jadi kirim ke blogku ya mas dichatbox :D

      BalasHapus
    6. Today is good weather, isn't it?

      BalasHapus
    7. mau nanya nih... agar gambarnya pas dilayar gimana ????? cek blog saya >>> http://adamrivai09.blogspot.com/

      BalasHapus
    8. Balasan
      1. gan kok template Fairy Tail nggak support javascript di bawah kod .....
        trik ini juga nggak bisa guna kerana kode < body > nggak ad .... -_-

        Hapus
    9. om bsa di jelasin dri chat ndak?
      maklum msih newbie :/
      baru blajar dari 0

      BalasHapus
    10. Gan itu "Gambar 01" (html paling atas) trus seterusnya perlu diganti gak ???
      soalnya gambarnya gak keluar,Sorry masih Newbie

      Thx

      BalasHapus

    "Maaf komentar anda tidak akan dibalas, karena blog ini sudah tidak aktif. Terima kasih"

    "Sorry your comment will not be replied, because this blog has been inactive. Thank you"

  • Translate

    Thank you for choosing Blogger Template from Blog Johanes! (*≧∇≦*)

    - Copyright ©DJogzs 2009-2013 - Some Right Reserve. - DJogzs - Powered by Blogger - Designed by Johanes Djogan -