Moving Highlight on Post Body Blogspot

Artikel dari web top markotop mengenai Moving Highlight dimana ketika disorot oleh cursor akan memberikan efek bercahaya. Karena pada trik ini memakai teknik kode warna RGBa, dan tentunya belum support semua browsingan pada feature satu ini, maka harap diperhatikan dengan seksama yah. Keterangan mengenai warna RGBa dapat dilihat Wikipedia. Trik yg akan dibahas mengenai Moving Highlight karya web CSS Trick, seperti ketika sobat berada pada tab windows browsingan (perhatikanlah) Ketika tab aktif warnanya akan sedikit lebih terang dari tab yg lainnya kan! Begitu juga ketika tab disorot oleh cursor ;) seperti itulah kira² :D

Setelah di download, sikat bagian scriptnya saja yak;) Disini Beben si bloglang anu ganteng kalem tea hanya akan mengambil teknik menyorotnya dipasang dibagian postingan blog kita sob ;)) Jadi pas kursor digerakan pada body blog kita, ada yg ngeburunyaynyah :D

Letakan script berikut diatas tag </body>

<script type='text/javascript'>
//<![CDATA[
    // DOM Ready
    $(function() {

        var originalBGMovingHighlight = $("#MovingHighlight").css("background-color"),
         x, y, xy, bgWebKit, bgMoz, lightColor = "rgba(255,255,255,0.75)",
         gradientSize = 100;

        // Basic Demo
        $('#MovingHighlight').mousemove(function(e) {

            x = e.pageX - this.offsetLeft;
            y = e.pageY - this.offsetTop;
            xy = x + " " + y;

            bgWebKit = "-webkit-gradient(radial, " + xy + ", 0, " + xy + ", " + gradientSize + ", from(" + lightColor + "), to(rgba(255,255,255,0.0))), " + originalBGMovingHighlight;
            bgMoz = "-moz-radial-gradient(" + x + "px " + y + "px 45deg, circle, " + lightColor + " 0%, " + originalBGMovingHighlight + " " + gradientSize + "px)";

            $(this).css({
                background: bgWebKit
            }).css({
                background: bgMoz
            });

        }).mouseleave(function() {
            $(this).css({
                background: originalBGMovingHighlight
            });
        });

        var originalBG = $(".nav a").css("background-color");

        $('.nav li:not(".active") a').mousemove(function(e) {

            x = e.pageX - this.offsetLeft;
            y = e.pageY - this.offsetTop;
            xy = x + " " + y;

            bgWebKit = "-webkit-gradient(radial, " + xy + ", 0, " + xy + ", 100, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0.0))), " + originalBG;
            bgMoz = "-moz-radial-gradient(" + x + "px " + y + "px 45deg, circle, " + lightColor + " 0%, " + originalBG + " " + gradientSize + "px)";

            $(this).css({
                background: bgWebKit
            }).css({
                background: bgMoz
            });

        }).mouseleave(function() {
            $(this).css({
                background: originalBG
            });
        });

    });
//]]>
</script>

Save terlebih dahulu, lalu lakukan Expand Widget Templates cari kode<b:includable id='post' var='post'>masukin kode HTML berikut dibawah kode itu ya <div id='MovingHighlight'> Scroll kebawah cari tag penutup dari </b:includable> masukin satu tag penutup </div> tepat sebelum kode tersebut. Kalau sudah mahir dan terbiasa dengan RGBa ini, maka sobat layak mencoba menerapkan trik berikut ini Flexible Color Schemes in Layouts with RGBa.

See you :-h