Membuat Iklan Baris Menggunakan jQuery

Membuat iklan teks atau iklan baris tidaklah sulit, cukup membuat sebuah link biasa saja. Namun tentu tampilannyapun biasa saja alias kurang...

Membuat iklan teks atau iklan baris tidaklah sulit, cukup membuat sebuah link biasa saja. Namun tentu tampilannyapun biasa saja alias kurang menarik. Padahal iklan haruslah menarik agar pengunjung mau membaca dan kemudian mengelik iklan tersebut.


Artikel ini menuntun Anda mempercantik iklan baris agar terlihat lebih menarik menggunakan CSS dan jQuery.


Bagaimana membuatnya?

HTML
<div class='iklan-teks-sidebar' id='iklan-teks'>
    <!-- iklan ke 1 -->
    <div data-header='Yujikop'> <span class='isi-iklan'><a class='judul' href='http://yujikop.com' target='_blank'>Yujikop</a><a href='http://yujikop.com' target='_blank'>www.yujikop.com</a><span class='isi'>Windows and Full Version legal Software<a class='panah-besar' href='http://yujikop.com' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCbV-9FV3F6RGrgtV9bR25tJSaK1mNawRA2mnkWONAXI0Crv1Z17Nux7_v_MwryBJptHxrSKa5Acpp2LiIBi3P0onfrXjuO3h7lENSFiKrhucjxZKup-d-i6bHlGcYBk_BqmnqxHnwkSQ/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
    <!-- iklan ke 2 -->
    <div data-header='Dzulqarnain'> <span class='isi-iklan'><a class='judul' href='http://dzulqarnain.net' target='_blank'>Dzulqarnain</a><a href='/' target='_blank'>dzulqarnain.net</a><span class='isi'>Dosa Firanda terhadap ilmu & ulama.<a class='panah-besar' href='http://dzulqarnain.net/membela-dakwah-salafiyah-dan-ulama-umat-dari-kenistaan-pemikiran-firanda-bagian-kedua-dosa-firanda-terhadap-ilmu-dan-ulama-12.html' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCbV-9FV3F6RGrgtV9bR25tJSaK1mNawRA2mnkWONAXI0Crv1Z17Nux7_v_MwryBJptHxrSKa5Acpp2LiIBi3P0onfrXjuO3h7lENSFiKrhucjxZKup-d-i6bHlGcYBk_BqmnqxHnwkSQ/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
    <!-- iklan ke 3 -->
    <div data-header='Scanner Mobil'> <span class='isi-iklan'><a class='judul' href='http://rbas.co.id' target='_blank'>Scanner Mobil</a><a href='http://rbas.co.id' target='_blank'>rbas.co.id</a><span class='isi'>Pusat scanner mobil terlengkap, termurah dan terpecaya di Indonesia.<a class='panah-besar' href='http://rbas.co.id' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCbV-9FV3F6RGrgtV9bR25tJSaK1mNawRA2mnkWONAXI0Crv1Z17Nux7_v_MwryBJptHxrSKa5Acpp2LiIBi3P0onfrXjuO3h7lENSFiKrhucjxZKup-d-i6bHlGcYBk_BqmnqxHnwkSQ/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
    <!-- iklan ke 4 -->
    <div data-header='Iklan bagi yang mampu'> <span class='isi-iklan'><a class='judul' href='http://jelasinblog.blogspot.com/p/cara-pasang-iklan-di-blog.html' target='_blank'>Pasang Iklan di Sini</a><a href='/' target='_blank'>jelasinblog.blogspot.com</a><span class='isi'>Pasang iklan Anda di sini, hanya 120 ribu / bulan.<a class='panah-besar' href='/' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCbV-9FV3F6RGrgtV9bR25tJSaK1mNawRA2mnkWONAXI0Crv1Z17Nux7_v_MwryBJptHxrSKa5Acpp2LiIBi3P0onfrXjuO3h7lENSFiKrhucjxZKup-d-i6bHlGcYBk_BqmnqxHnwkSQ/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
</div>


CSS

#iklan-teks {
    height:275px;
    width:300px;
    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:120px;
    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;
}


jQuery
(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")
});


Bagaimana memasang iklan baris ini di blog?

Mula-mula letakkan CSS dalam template, di atas ]]></b:skin> atau jika Anda menggunakan custom template letakkan di atas </style>.

Setelah template di simpan, berikutnya tambahkan gadget HTML/JavaScript. Judul tidak perlu diisi. Dalam kolom konten salin struktur berikut.

<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>

<div style="background : #ecf0f1; overflow : hidden; margin : 0 0 10px 0; padding : 0; border-radius : 0;">
<div class='iklan-teks-sidebar' id='iklan-teks'>
    <!-- iklan ke 1 -->
    <div data-header='Yujikop'>
        <span class='isi-iklan'><a class='judul' href='http://yujikop.com' target='_blank'>Yujikop</a><a href='http://yujikop.com' target='_blank'>www.yujikop.com</a><span class='isi'>Windows and Full Version legal Software<a class='panah-besar' href='http://yujikop.com' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCbV-9FV3F6RGrgtV9bR25tJSaK1mNawRA2mnkWONAXI0Crv1Z17Nux7_v_MwryBJptHxrSKa5Acpp2LiIBi3P0onfrXjuO3h7lENSFiKrhucjxZKup-d-i6bHlGcYBk_BqmnqxHnwkSQ/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
    <!-- iklan ke 2 -->
    <div data-header='Dzulqarnain'>
        <span class='isi-iklan'><a class='judul' href='http://dzulqarnain.net' target='_blank'>Dzulqarnain</a><a href='/' target='_blank'>dzulqarnain.net</a><span class='isi'>Dosa Firanda terhadap ilmu & ulama.<a class='panah-besar' href='http://dzulqarnain.net/membela-dakwah-salafiyah-dan-ulama-umat-dari-kenistaan-pemikiran-firanda-bagian-kedua-dosa-firanda-terhadap-ilmu-dan-ulama-12.html' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCbV-9FV3F6RGrgtV9bR25tJSaK1mNawRA2mnkWONAXI0Crv1Z17Nux7_v_MwryBJptHxrSKa5Acpp2LiIBi3P0onfrXjuO3h7lENSFiKrhucjxZKup-d-i6bHlGcYBk_BqmnqxHnwkSQ/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
    <!-- iklan ke 3 -->
    <div data-header='Scanner Mobil'>
        <span class='isi-iklan'><a class='judul' href='http://rbas.co.id' target='_blank'>Scanner Mobil</a><a href='http://rbas.co.id' target='_blank'>rbas.co.id</a><span class='isi'>Pusat scanner mobil terlengkap, termurah dan terpecaya di Indonesia.<a class='panah-besar' href='http://rbas.co.id' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCbV-9FV3F6RGrgtV9bR25tJSaK1mNawRA2mnkWONAXI0Crv1Z17Nux7_v_MwryBJptHxrSKa5Acpp2LiIBi3P0onfrXjuO3h7lENSFiKrhucjxZKup-d-i6bHlGcYBk_BqmnqxHnwkSQ/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
    <!-- iklan ke 4 -->
    <div data-header='Iklan bagi yang mampu'>
        <span class='isi-iklan'><a class='judul' href='http://jelasinblog.blogspot.com/p/cara-pasang-iklan-di-blog.html' target='_blank'>Pasang Iklan di Sini</a><a href='/' target='_blank'>jelasinblog.blogspot.com</a><span class='isi'>Pasang iklan Anda di sini, hanya 120 ribu / bulan.<a class='panah-besar' href='/' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCbV-9FV3F6RGrgtV9bR25tJSaK1mNawRA2mnkWONAXI0Crv1Z17Nux7_v_MwryBJptHxrSKa5Acpp2LiIBi3P0onfrXjuO3h7lENSFiKrhucjxZKup-d-i6bHlGcYBk_BqmnqxHnwkSQ/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
    <span class='info-iklan'>Ads</span><span class='info-icon'><a href='/' target='_blank'><i class='fa fa-power-off'/></i></a></span>
</div></div>


Selamat belajar :)

COMMENTS

BLOGGER: 5
  1. Pertamax Gan..
    Itu jquerynya dipasang dimna...

    sukses slalu ya.. |o|

    ReplyDelete
    Replies
    1. Seperti memeasang JavaScript, letakkan di atas </head>

      Delete
  2. gagal kang :( jquery ane kagak berfungsi ....

    ReplyDelete
    Replies
    1. Mungkin konflik atau belum tepat masangnya :)

      Delete
  3. Kayaknya berat di blog

    ReplyDelete

Name

Adsense,2,Blockquote,1,Blogger,17,Blogger Tool,1,Blogspot,1,Contact Form,3,CSS,23,CSS3,1,Domain,1,Font,2,Halaman,3,HTML,5,JavaScript,17,jQuery,6,Komentar,2,Page Loading,1,SEO,1,Share Button,1,Sidebar,1,Tag Kondisional,1,Tema,11,Trik,1,Website,1,WordPress,2,
ltr
item
Jelas in Blog: Membuat Iklan Baris Menggunakan jQuery
Membuat Iklan Baris Menggunakan jQuery
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0Wxlk-is_dglvoVjXkSLNDhadaLhl8MRR6VatXvku9HPHT35-sg8NgwfUpnA_2m5eHSatIzIeWlNAjusSdfxBAdw5kcLGKEqrZqXUvydYrv3fBi6in1w5haT1r3y1MoQb11Gm5xSLLuM/s1600/iklan+baris+dengan+jQuery.PNG
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0Wxlk-is_dglvoVjXkSLNDhadaLhl8MRR6VatXvku9HPHT35-sg8NgwfUpnA_2m5eHSatIzIeWlNAjusSdfxBAdw5kcLGKEqrZqXUvydYrv3fBi6in1w5haT1r3y1MoQb11Gm5xSLLuM/s72-c/iklan+baris+dengan+jQuery.PNG
Jelas in Blog
https://jelasinblog.blogspot.com/2013/11/membuat-iklan-baris-menggunakan-jquery.html
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/2013/11/membuat-iklan-baris-menggunakan-jquery.html
true
2350744749749285503
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content