Cara Membuat Iklan Baris Menggunakan JQuery - foldersoal.com
Tuesday 17 December 2013
Edit
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
Berikut ini caranya :
Pasangkan kode dibawah ini diatas kode ]]></b:skin>
CSS
Selanjutnya Anda Pasangkan kode dibawah ini sebelum </head>
Javascript
Kemudian pasangkan kode dibawah ini pada widgate Mode HTML/Javascrapt
HTML & Javascrapt
Semoga bermanfaat!
Berbagai Sumber
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
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;
}
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>
(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="ara Membuat Iklan Baris Menggunakan jQuery Cara Membuat Iklan Baris Menggunakan JQuery " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDEPzBasKOdibhUCRLgfD1xXT3ig0AekP-bkdMrQGG_OxC1Z59tym_cEVH3yTlRHpEqBV6BZZbDLKMcTtUbY-zLwlq-S-CUTC6UICtC_XTXyvmEEsojNIMACGstNcq6mTg8ckXlK20M5I/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="ara Membuat Iklan Baris Menggunakan jQuery Cara Membuat Iklan Baris Menggunakan JQuery " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDEPzBasKOdibhUCRLgfD1xXT3ig0AekP-bkdMrQGG_OxC1Z59tym_cEVH3yTlRHpEqBV6BZZbDLKMcTtUbY-zLwlq-S-CUTC6UICtC_XTXyvmEEsojNIMACGstNcq6mTg8ckXlK20M5I/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/AVvXsEjDEPzBasKOdibhUCRLgfD1xXT3ig0AekP-bkdMrQGG_OxC1Z59tym_cEVH3yTlRHpEqBV6BZZbDLKMcTtUbY-zLwlq-S-CUTC6UICtC_XTXyvmEEsojNIMACGstNcq6mTg8ckXlK20M5I/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/AVvXsEjDEPzBasKOdibhUCRLgfD1xXT3ig0AekP-bkdMrQGG_OxC1Z59tym_cEVH3yTlRHpEqBV6BZZbDLKMcTtUbY-zLwlq-S-CUTC6UICtC_XTXyvmEEsojNIMACGstNcq6mTg8ckXlK20M5I/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>
(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="ara Membuat Iklan Baris Menggunakan jQuery Cara Membuat Iklan Baris Menggunakan JQuery " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDEPzBasKOdibhUCRLgfD1xXT3ig0AekP-bkdMrQGG_OxC1Z59tym_cEVH3yTlRHpEqBV6BZZbDLKMcTtUbY-zLwlq-S-CUTC6UICtC_XTXyvmEEsojNIMACGstNcq6mTg8ckXlK20M5I/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="ara Membuat Iklan Baris Menggunakan jQuery Cara Membuat Iklan Baris Menggunakan JQuery " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDEPzBasKOdibhUCRLgfD1xXT3ig0AekP-bkdMrQGG_OxC1Z59tym_cEVH3yTlRHpEqBV6BZZbDLKMcTtUbY-zLwlq-S-CUTC6UICtC_XTXyvmEEsojNIMACGstNcq6mTg8ckXlK20M5I/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/AVvXsEjDEPzBasKOdibhUCRLgfD1xXT3ig0AekP-bkdMrQGG_OxC1Z59tym_cEVH3yTlRHpEqBV6BZZbDLKMcTtUbY-zLwlq-S-CUTC6UICtC_XTXyvmEEsojNIMACGstNcq6mTg8ckXlK20M5I/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/AVvXsEjDEPzBasKOdibhUCRLgfD1xXT3ig0AekP-bkdMrQGG_OxC1Z59tym_cEVH3yTlRHpEqBV6BZZbDLKMcTtUbY-zLwlq-S-CUTC6UICtC_XTXyvmEEsojNIMACGstNcq6mTg8ckXlK20M5I/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!
Berbagai Sumber