Cara Membuat Iklan Baris Menggunakan JQuery

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

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

Demo

Aak-sharewww.aak-share.comBlog menyediakan berbagai informasi

kuyhAa-android19www.kuyhaa-android19.comSitus menyediakan berbagai Software

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

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

Ads

Berikut ini caranya :

Pasangkan kode 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 kode 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 kode 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 berbagai informasi<a class="panah-besar" href="http://www.aak-share.com/" target="_blank"><img alt="arrow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG6zCJr30vjV0EFpOGD6DTS6X4a_PfTo4pR6dlop61aevOPffOrKJMkCtp8tkHvGNHHUmNWqFWjWUEo01Fe5Rc_PmpDtEa6CNMd9tHFI0gmrBJjA-bao7I-6FZLnGbFEw7nb1x4ZYwCeo/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 berbagai Software<a class="panah-besar" href="http://www.kuyhAa-android19.com" target="_blank"><img alt="arrow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG6zCJr30vjV0EFpOGD6DTS6X4a_PfTo4pR6dlop61aevOPffOrKJMkCtp8tkHvGNHHUmNWqFWjWUEo01Fe5Rc_PmpDtEa6CNMd9tHFI0gmrBJjA-bao7I-6FZLnGbFEw7nb1x4ZYwCeo/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="arrow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG6zCJr30vjV0EFpOGD6DTS6X4a_PfTo4pR6dlop61aevOPffOrKJMkCtp8tkHvGNHHUmNWqFWjWUEo01Fe5Rc_PmpDtEa6CNMd9tHFI0gmrBJjA-bao7I-6FZLnGbFEw7nb1x4ZYwCeo/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="arrow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG6zCJr30vjV0EFpOGD6DTS6X4a_PfTo4pR6dlop61aevOPffOrKJMkCtp8tkHvGNHHUmNWqFWjWUEo01Fe5Rc_PmpDtEa6CNMd9tHFI0gmrBJjA-bao7I-6FZLnGbFEw7nb1x4ZYwCeo/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!