Cara Membuat Label Keren Di Blog Dengan Efek CSS3

/*--- KxMadagascar Custom Label With CSS3 --- */ .Label a{ padding-left:20px; background:#FFA500; padding:0 20px; color:#000!important; border-radius:100px; -moz-border-radius:100px; height:17px; line-height:17px; text-transform:uppercase; text-decoration:none; border:none !important; -webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px; float:left; margin-left:5px; margin-top:5px; font-size:14px; } .Label a:hover{ color:#000 !important; background:#fff; }

• Yang Hitam Tebal Di Klik
• Yang Merah Di Cari
• Yang Orange Kotak Label Pertama
• Yang Hijau Text Label Pertama
• Yang Biru Kotak Label Berubah Warna
• Yang Ungu Text Label Berubah Warna

Go to link Download

Cara Membuat Efek Kembang Api di Blog

Go to link Download

Cara Membuat Efek Cermin di Foto Android Foto Kembar

Go to link Download

Cara Membuat Popular Post dengan Efek Hover

.popular-posts ul{padding-left:0px;}.popular-posts ul li {list-style-type: none;margin: 0px 0px 5px;padding: 5px 5px 5px 20px !important;border: 1px solid #dddddd;border-radius: 30px 0 30px 0;    -moz-border-radius: 30px 0 30px 0;    -webkit-border-radius: 30px 0 30px 0;    -o-border-radius: 30px 0 30px 0;    transition: all 0.5s;    -moz-transition: all 0.5s;    -webkit-transition: all 0.5s;    -o-transition: all 0.5s;}.popular-posts ul li:hover {border:1px solid #666666; box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);    border-radius:0;    -moz-border-radius:0;    -webkit-border-radius:0;    -o-border-radius:0;}.popular-posts ul li a:hover {text-decoration:none;}

• Untuk mengatur jumlah popular post yang muncul dalam blog kita silahkan sobat masuk ke dashboard blogger kemudian pilih tata letak kemudian tambahkan gadget kemudian pilih popular post dan pada pilihan tampilkan hingga masukkan jumlah artikel yang sobat ingin tampilkan di popular post kemudian simpan setelan.
• Jika ingin menampilkan thumbnail gambar dari artikel kita supaya muncul dipopular post maka centang pada thumbnail gambar yang berada di widget popular post yang terdapat di tata letak.

Go to link Download

Cara Membuat Efek Meteor Jatuh di Blog

Cara Membuat Efek Meteor Jatuh di Blog

Sobat blogger sudah pernah belum melihat efek meteor yang jatuh pada blog. Efek yang satu ini bisa dikatakan cukup menarik karena disertai dengan suara saat meteor bertabrakan. Efek meteor jatuh merupakan efek yang cukup saya sukai karena berbeda dengan efek-efek lainnya. Efek ini dibuat oleh Stephen Chapman. Jika sobat blogger penasaran bagaimana tampilan dari efek meteor jatuh silahkan coba langkahnya dibawah ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Elemen Laman
3. Tambahkan gadjet lalu pilih HTML/Javascript
4. Masukkan kode dibawah ini:

<script language="javascript">
nd_mode="meteor";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_top";
</script>
<script language="javascript" src="http://blogtrikdantips-blogspot.googlecode.com/files/meteor_jatuh.js">
</script>

5. Simpan gadjet lalu lihat hasilnya

Go to link Download

Cara Membuat Efek Gelembung di Blog

• Login ke blogger.com
• Pilih Tata Letak.
• Tambahkan gadget.
• Pilih HTML / JavaScript.
• Copy & Paste code di bawah ini :

Go to link Download

cara membuat efek bintang jatuh pada link

1.  Buka Akun blogger anda
2. buka rancangan
3. buka tatatelak
4. tambah gadget,lalu buka HTML/JAVA SPIRT 
5. copy kan file code daun,yang ada paling ATAS 

Go to link Download

Cara Membuat Efek Bunga Mekar di Blog

• Login ke blogger.com
• Pilih Tata Letak.
• Tambahkan gadget.
• Pilih HTML / JavaScript.
• Copy & Paste code di bawah ini :

Go to link Download

Cara Membuat Efek Loading Dengan Animasi Keyframes

Animation Bounce and Rotate

@keyframes BounceRate{
0%{transform:translate(0px,0px) scale(0.50);opacity:1}
20%{transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{transform:translate(0px,-200px) scale(0.50);opacity:1;transform:rotate(-360deg);}
100%{transform:translate(0px,0px) scale(1);opacity:1;}
}

#main-wrapper { animation : BounceRate 3s; }

Animation Earthquake Effect

@keyframes Earthquake{
0%{opacity:1;transform:rotate(0deg);}
5%{opacity:1;transform:rotate(5deg);}
10%{opacity:1;transform:rotate(-5deg);}
15%{opacity:1;transform:rotate(5deg);}
20%{opacity:1;transform:rotate(-5deg);}
25%{opacity:1;transform:rotate(5deg);}
30%{opacity:1;transform:rotate(-5deg);}
35%{opacity:1;transform:rotate(-5deg);}
40%{opacity:1;transform:rotate(5deg);}
45%{opacity:1;transform:rotate(-5deg);}
50%{opacity:1;transform:rotate(5deg);}
55%{opacity:1;transform:rotate(-5deg);}
60%{opacity:1;transform:rotate(5deg);}
65%{opacity:1;transform:rotate(-5deg);}
70%{opacity:1;transform:rotate(5deg);}
80%{opacity:1;transform:rotate(-5deg);}
85%{opacity:1;transform:rotate(5deg);}
90%{opacity:1;transform:rotate(-5deg);}
95%{opacity:1;transform:rotate(5deg);}
35%{opacity:1;transform:rotate(0deg);}
}

#main-wrapper { animation : Earthquake 3s; }

Animation Sliding Effect

@keyframes Sliding{
from{transform:translate(-1000px,0px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}
}

#main-wrapper { animation : Sliding 2s; }

Go to link Download

Cara Membuat Efek Hati bertaburan di Blog

• Login ke blogger.com
• Pilih Tata Letak.
• Tambahkan gadget.
• Pilih HTML / JavaScript.
• Copy & Paste code di bawah ini :

Go to link Download

Cara Membuat Efek Salju Daun Bintang Berjatuhan

Go to link Download

Cara Membuat Efek Kelap Kelip Pada Link

Cara Membuat Efek Kelap Kelip Pada Link

Bulan lalu saya pernah menulis sebuah posting cara membuat link berwarna warni, kali ini kita akan membuat link tersebut dengan efek bintang berkedip. Efek ini akan muncul apabila link tersebut disorot oleh cursor. Jika sobat ingin membuat blog lebih menarik dengan berbagai macam animasi maka trik yang satu ini mungkin saja bermanfaat. Efek bintang pada link udah saya terapkan di demo blog dan hasilnya sukses. Berikut ini saya akan berikan langkahnya kepada sobat:

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Carilah kode a:link{ atau a:visited{
4. Lalu letakkan kode dibawah ini dibawah kode tadi

a:hover {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgElegpHvSEfy9EDRqijkF9113hCn863fb01lqLorzLC9n0UkYdlXWommwyLerIqNkbERp6U7RzdSII6gtv4vQr0rsnUEJU7o5tUvUYEB6lRhOsXBlrCM-b-Qgd1pxHb6f8s160vRO7eg8/s1600/stars.gif);}

Link akan mengeluarkan gambar seperti ini:

5. Simpan template anda lalu lihat hasilnya

Jika sobat kurang menyukai efek animasi gambar diatas maka sobat tinggal ganti dengan url gambar yang lain. Selamat mencoba!

Go to link Download

Cara Membuat Efek Telur Ceplok Pada Blog

<script language="javascript"> nd_mode="eggs"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://blogtrikdantips-blogspot.googlecode.com/files/efektelur.js"></script>

Go to link Download

Cara Membuat Efek Kupu kupu terbang di Blog

• Login ke blogger.com
• Pilih Tata Letak.
• Tambahkan gadget.
• Pilih HTML / JavaScript.
• Copy & Paste code di bawah ini :

Go to link Download

Cara Memberi Background atau efek di judul posting

Go to link Download

Cara Memberikan Efek Pada Icon Saat Di Klik Caya Techno

Go to link Download

Cara Membuat Efek Fadeout Di Bagian Bawah Blog CSS

 Sebenarnya saya sudah tau cara ini dari dulu tapi karena sekarang-sekarang banyak yang make jadi tidak ada salahnya juga saya postingin Cara Membuat Efek Fadeout Di Bagian Bawah Blog, Efek ini di bilang cukup keren juga buat saya karena kalo diliat liat serasa gimana gitu hahaha

#bottom_fade {
    position:fixed;
    bottom: 0;
    height:100px;
    width: 100%;
    background: linear-gradient(bottom, white, transparent);
    background:-o-linear-gradient(bottom, white, transparent);
    background:-moz-linear-gradient(bottom, white, transparent);
    background:-ms-linear-gradient(bottom, white, rgba(0, 0, 0, 0));
    background:-webkit-linear-gradient(bottom, white, transparent);
    background:-webkit-gradient(linear, left bottom, left top, from(white), to(transparent));
    z-index: 999;
}

<div id=bottom_fade/></div>

Go to link Download

Cara Membuat efek Foto Instagram dengan Photoshop

• Jika sobat ingin mencoba efek yang lain tekan saja undo dengan shortkey alt + ctrl + z ( untuk kembali ke saat sebelum pengeditan ).
• Khusus untuk filter sutro, toaster, walden dan xpro tidak dapat diundo hingga ke awal saat sebelum kita memberi filter, sebaiknya gambar yang sudah diedit kita save ( format .psd ) dulu agar dapat dicoba lagi dengan efek yang lain.
• Sobat bisa memadukan beberapa filter sekaligus dengan menggabungkan filter-filter yang dipilih, jadi lebih banyak variasi filter.
• Contoh yang saya ambil misal lomo-fi. sobat juga bisa memadukannya dengan filter lain contohnya : sutro.
• Saat ingin menggabungkan satu filter dengan yang lain ada baiknya sobat gunakan tingkatan filter yang rendah misal filter 2( nashvile ) dengan filter 3 ( sutro ) agar warna yang dihasilkan tidak gelap.

Go to link Download

Cara Membuat Efek Read More Pada Blogger

<!-- Auto read more script -http://http://bloggerkerendanhebat.blogspot.com/- Start -->

<script type=text/javascript>
var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 150;
</script>
<script type=text/javascript>
//<![CDATA[
function removeHtmlTag(strx,chop){
    if(strx.indexOf("<")!=-1)
    {
        var s = strx.split("<");
        for(var i=0;i<s.length;i++){
            if(s[i].indexOf(">")!=-1){
                s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
            }
        }
        strx =  s.join("");
    }
    chop = (chop < strx.length-1) ? chop : strx.length-2;
    while(strx.charAt(chop-1)!= && strx.indexOf( ,chop)!=-1) chop++;
    strx = strx.substring(0,chop-1);
    return strx+...;
}

function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
    if(img.length>=1) {  
        imgtag = <span style="float:left; padding:0px 10px 5px 0px;"><img src="+img[0].src+" width="+img_thumb_width+px" height="+img_thumb_height+px"/></span>;
        summ = summary_img;
    }
    }
    var summary = imgtag + <div> + removeHtmlTag(div.innerHTML,summ) + </div>;
    div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script -http://Sopyan-7.blogspot.com- End -->

<b:if cond=data:blog.pageType != &quot;item&quot;>
<div expr_id=&quot;summary&quot; + data:post.id><data:post.body/></div>
<script type=text/javascript>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class=rmlink style=float:right;padding-top:20px;>
<a expr_href=data:post.url>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond=data:blog.pageType == &quot;item&quot;><data:post.body/></b:if>

Go to link Download

Cara Membuat Efek Salju Di Blog

Go to link Download