Cara Menciptakan Iklan Baris Memakai Jquery

Cara Membuat Iklan Baris Menggunakan jQuery - Pariwara atau iklan untuk memperlihatkan isu produk barang dan jasa. Mungkin Anda pernah melihat sebuah iklan di Website atau Blog dengan pribadi beberapa iklan didalamnya, dengan kata lain disebut iklan baris.

Membuat iklan baris pada Website atau Blog tentunya harus menarik, bertujuan untuk menarik pengunjung semoga membaca dan membuka halaman pada iklan tersebut. Membuat iklan menjadi lebih menarik kita dapat menciptakannya dengan memakai Jquery.

Demo

Aak-sharewww.aak-share.comBlog menyediakan aneka macam informasi

kuyhAa-android19www.kuyhaa-android19.comSitus menyediakan aneka macam Software

Aak-sharewww.aak-share.comStyle Number di Blogger

Blog-nya Aakwww.aak-share.comSelamat datang.

Ads

Berikut ini caranya :

Pasangkan instruksi dibawah ini diatas kode   ]]></b:skin>

CSS

#iklan-teks {
    height:470px;
    width:330px;
    background-color:white;
    position:relative;
    overflow:hidden;
    margin:20px auto;
}
#iklan-teks h2.iklan-header {
    cursor:pointer;
    background-color:white;
    background-image:none;
    font:normal 13px Verdana, Tahoma, Serif;
    color:#f0523f;
    border-top:1px solid #d8d8d8;
    padding:10px;
    margin:0;
    position:relative;
    text-transform:none;
    letter-spacing:0;
}
.iklan-teks-post-footer .iklan-header {
    border-bottom:0;
}
#iklan-teks h2.iklan-header:first-child {
    border-top:0;
}
#iklan-teks h2.iklan-header:before {
    content:"
    "
    ;
    width:0;
    height:0;
    position:absolute;
    top:20px;
    right:15px;
    border:5px solid transparent;
    border-color:#b2b2b2 transparent transparent;
}
#iklan-teks div {
    height:80px;
    padding:10px 70px 10px 10px;
    z-index:1;
    background:white;
    font:normal 13px Verdana, Tahoma, Serif;
    color:white;
    position:relative;
    border-top:1px solid #d8d8d8;
}
.judul {
    font:normal 20px Verdana, Tahoma, Serif;
    color:#f0523f;
    margin:0 0 5px 0;
}
a.judul {
    font:normal 20px Verdana, Tahoma, Serif !important;
    color:#f0523f !important;
    text-decoration:none;
    display:inline-block;
}
.isi-iklan a {
    font:normal 13px Verdana, Tahoma, Serif;
    color:green;
    text-decoration:none;
    display:block;
    margin-bottom:10px;
}
.isi-iklan a:hover {
    color:green;
    text-decoration:underline;
}
.isi {
    padding-top:15px;
    color:#222;
    text-align:left !important;
}
.panah-besar {
    background:#f0523f;
    border-radius:50%;
    cursor:pointer;
    height:34px;
    float:right;
    margin-right:-60px;
    margin-top:-40px;
    width:34px;
    text-align:center;
    line-height:34px;
}
.panah-besar:hover {
    background:#2c343e;
}
.info-icon {
    width:15px;
    height:15px;
    position:absolute;
    top:0;
    z-index:2;
    right:0;
    cursor:pointer;
}
.info-iklan {
    background:#f2f2f2;
    height:15px;
    border-bottom-left-radius:4px;
    position:absolute;
    top:0;
    right:0;
    color:#000;
    z-index:2;
    font:normal 11px Arial, Sans-Serif;
    text-align:left;
    overflow:hidden;
    padding:5px 19px 0 5px;
}

Selanjutnya Anda Pasangkan instruksi dibawah ini sebelum </head>

Javascript

<script type="text/javascript">
(function (a) {
    a.fn.hoverTimeout = function (c, e, b, d) {
        return this.each(function () {
            var f = null,
                g = a(this);
            g.hover(function () {
                clearTimeout(f);
                f = setTimeout(function () {
                    e.call(g)
                }, c)
            }, function () {
                clearTimeout(f);
                f = setTimeout(function () {
                    d.call(g)
                }, b)
            })
        })
    }
})(jQuery);
(function (b) {
    b.fn.iklanaccordion = function (a) {
        a = jQuery.extend({
            active: 1,
            hovertimeout: 300,
            sUpSpeed: 500,
            sDownSpeed: 500,
            sUpEasing: null,
            sDownEasing: null
        }, a);
        return this.each(function () {
            var g = b(this),
                h = g.children("div[data-header]"),
                f = a.active - 1;
            h.each(function () {
                b(this).hide().before('<h2 class="iklan-header">
' + b(this).data("header") + "</h2>
")
            });
            g.children("div:eq(" + f + ")").show().prev().css("margin-top", "-47px").addClass("active");
            g.find(".iklan-header").hoverTimeout(a.hovertimeout, function () {
                g.children("h2").removeClass("active").animate({
                    marginTop: 0
                });
                h.slideUp(a.sUpSpeed, a.sUpEasing).animate({
                    marginTop: -47
                });
                b(this).addClass("active").next().slideDown(a.sDownSpeed, a.sDownEasing)
            })
        })
    }
})(jQuery);
$(function () {
    $(".iklan-teks-sidebar").iklanaccordion();
    $(".iklan-teks-post-footer").iklanaccordion()
});
$(".info-icon").hover(function () {
    $(".info-iklan").animate({
        right: 0
    }, 500, "easeInOutExpo")
}, function () {
    $(".info-iklan").animate({
        right: -103
    }, 500, "easeInOutExpo")
});
</script>

Kemudian pasangkan instruksi dibawah ini pada widgate Mode HTML/Javascrapt

HTML & Javascrapt

<script type="text/javascript">
(function(a){a.fn.hoverTimeout=function(c,e,b,d){return this.each(function(){var f=null,g=a(this);g.hover(function(){clearTimeout(f);f=setTimeout(function(){e.call(g)},c)},function(){clearTimeout(f);f=setTimeout(function(){d.call(g)},b)})})}})(jQuery);(function(b){b.fn.iklanaccordion=function(a){a=jQuery.extend({active:1,hovertimeout:300,sUpSpeed:500,sDownSpeed:500,sUpEasing:null,sDownEasing:null},a);return this.each(function(){var g=b(this),h=g.children("div[data-header]"),f=a.active-1;h.each(function(){b(this).hide().before('<h2 class="iklan-header">
'+b(this).data("header")+"</h2>
")});g.children("div:eq("+f+")").show().prev().css("margin-top","-47px").addClass("active");g.find(".iklan-header").hoverTimeout(a.hovertimeout,function(){g.children("h2").removeClass("active").animate({marginTop:0});h.slideUp(a.sUpSpeed,a.sUpEasing).animate({marginTop:-47});b(this).addClass("active").next().slideDown(a.sDownSpeed,a.sDownEasing)})})}})(jQuery);$(function(){$(".iklan-teks-sidebar").iklanaccordion();$(".iklan-teks-post-footer").iklanaccordion()});$(".info-icon").hover(function(){$(".info-iklan").animate({right:0},500,"easeInOutExpo")},function(){$(".info-iklan").animate({right:-103},500,"easeInOutExpo")});

<div style="background: #ecf0f1; border-radius: 0; height: 300px; margin: 0 0 10px 0; overflow: hidden; padding: 0; width: 250px;">
<div class="iklan-header" id="iklan-teks">
<!-- iklan ke 1 -->
<div data-header="iklan-teks">
<span class="isi-iklan"><a class="judul" href="http://www.aak-share.com/" target="_blank">Aak-share</a><a href="http://www.aak-share.com/" target="_blank">www.aak-share.com</a><span class="isi">Blog menyediakan aneka macam informasi<a class="panah-besar" href="http://www.aak-share.com/" target="_blank"><img alt="ara Membuat Iklan Baris Menggunakan jQuery Cara Membuat Iklan Baris Menggunakan JQuery " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw7pFH-8I7U0wuzKswVi-2DykFdQ0k2Li7SHpLggu9N5jY5YovCHuePWVHZQ7GARv20bFuqfGk3_OQwJ9PsvLd30fuX-u45ytQJsQOzAlOngmcqZskBkwCmXg2NoOfBBfLu1Semq-bsa4/s1600/icon_chevron_white.png" style="height: 19px; margin-left: 2px; margin-top: 7px; width: 12px;" /></a></span></span></div>
<!-- iklan ke 2 -->
<div data-header="iklan-teks">
<span class="isi-iklan"><a class="judul" href="http://www.kuyhAa-android19.com/" target="_blank">kuyhAa-android19</a><a href="http://www.aak-share.com/" target="_blank">www.kuyhAa-android19.com</a><span class="isi">Situs menyediakan aneka macam Software<a class="panah-besar" href="http://www.kuyhAa-android19.com" target="_blank"><img alt="ara Membuat Iklan Baris Menggunakan jQuery Cara Membuat Iklan Baris Menggunakan JQuery " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw7pFH-8I7U0wuzKswVi-2DykFdQ0k2Li7SHpLggu9N5jY5YovCHuePWVHZQ7GARv20bFuqfGk3_OQwJ9PsvLd30fuX-u45ytQJsQOzAlOngmcqZskBkwCmXg2NoOfBBfLu1Semq-bsa4/s1600/icon_chevron_white.png" style="height: 19px; margin-left: 2px; margin-top: 7px; width: 12px;" /></a></span></span></div>
<!-- iklan ke 3 -->
<div data-header="iklan-teks">
<span class="isi-iklan"><a class="judul" href="http://www.aak-share.com/" target="_blank">Aak-share</a><a href="http://www.aak-share.com/" target="_blank">www.aak-share.com</a><span class="isi">Style Number di Blogger<a class="panah-besar" href="http://www.aak-share.com" target="_blank"><img alt="ara Membuat Iklan Baris Menggunakan jQuery Cara Membuat Iklan Baris Menggunakan JQuery " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw7pFH-8I7U0wuzKswVi-2DykFdQ0k2Li7SHpLggu9N5jY5YovCHuePWVHZQ7GARv20bFuqfGk3_OQwJ9PsvLd30fuX-u45ytQJsQOzAlOngmcqZskBkwCmXg2NoOfBBfLu1Semq-bsa4/s1600/icon_chevron_white.png" style="height: 19px; margin-left: 2px; margin-top: 7px; width: 12px;" /></a></span></span></div>
<!-- iklan ke 4 -->
<div data-header="iklan-teks">
<span class="isi-iklan"><a class="judul" href="http://www.aak-share.com" target="_blank">Blog-nya Aak</a><a href="https://www.aak-share.com/" target="_blank">www.aak-share.com</a><span class="isi">Selamat datang.<a class="panah-besar" href="http://www.aak-share.com" target="_blank"><img alt="ara Membuat Iklan Baris Menggunakan jQuery Cara Membuat Iklan Baris Menggunakan JQuery " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw7pFH-8I7U0wuzKswVi-2DykFdQ0k2Li7SHpLggu9N5jY5YovCHuePWVHZQ7GARv20bFuqfGk3_OQwJ9PsvLd30fuX-u45ytQJsQOzAlOngmcqZskBkwCmXg2NoOfBBfLu1Semq-bsa4/s1600/icon_chevron_white.png" style="height: 19px; margin-left: 2px; margin-top: 7px; width: 12px;" /></a></span></span></div>
<span class="info-iklan">Ads</span><span class="info-icon"><a href="https://www.blogger.com/" target="_blank"><i class="fa fa-power-off"></i></a></span>
</div></div>

Semoga bermanfaat!



Sumber http://www.websiteedukasi.com/