Pada postingan kali ini saya akan share lagi ke anda tentang cara membuat 4 style widget iklan di blog. Widget ini memiliki efek CSS yang keren dan lebih atraktif. Dengan style widget iklan ini membuat blog anda akan terlihat lebih keren dan tidak ada pengaruhnya sama sekali terhadap loading blog. Widget iklan ini cukup mengagumkan dan untuk menambahkannya di blog cukup mudah.
Langkah-langkahnya:
- Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
- Kemudian pilih->Tata letak->Tambahkan gadget-> HTML/Javascript
- Kemudian kopi dan pastekan kode berikut didalamnya:
Style 1
<style id="TechBlogGuide_css" type="text/css">
div.TechBlogGuide_1263441{width:100%;display:block}div.TechBlogGuide_1263441 a{width:468px}div.TechBlogGuide_1263441 a img{padding:0}div.TechBlogGuide_1263441 a em{font-style:normal}div.TechBlogGuide_1263441 a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0 4px 10px 0;text-align:center;text-decoration:none;overflow:hidden;float:left;}div.TechBlogGuide_1263441 img{border:0;clear:right;}div.TechBlogGuide_1263441 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;}div.TechBlogGuide_1263441 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}div.TechBlogGuide_1263441 a{line-height:100%}div.TechBlogGuide_1263441 a.adhere{width:468px;height:60px;line-height:480%}
</style>
<div class="widget-content">
<!--style widget iklan by http://jalu-pangna.blogspot.com -->
<div id="TechBlogGuide_1263441" class="TechBlogGuide_1263441 TechBlogGuide"><a title="Advertise Here" href="http://jalu-pangna.blogspot.com/" class="adhere ad1 odd" target="_blank">Advertise Here</a></div>
<!-- style widget iklan by http://jalu-pangna.blogspot.com -->
</div>
Style 2
<style>div.TechBlogGuide_1263441 a.adhere:hover {
border: 1px solid rgb(153, 153, 153);
background: none repeat scroll 0% 0% rgb(221, 221, 221);
color: rgb(51, 51, 51);
}
html > body div.TechBlogGuide_1263441 a.adhere {
height: 58px;
width: 466px;
}
div.TechBlogGuide_1263441 a.adhere {
width: 468px;
height: 60px;
line-height: 480%;
}
div.TechBlogGuide_1263441 a.adhere {
color: rgb(102, 102, 102);
font-weight: bold;
font-size: 12px;
border: 1px solid rgb(204, 204, 204);
background: none repeat scroll 0% 0% rgb(231, 231, 231);
text-align: center;
}
.TechBlogGuide a:hover {
border-top-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.TechBlogGuide .ad1 {
background: none repeat scroll 0% 0% rgb(17, 108, 165) !important;
}
div.TechBlogGuide_1263441 a {
line-height: 100%;
}
div.TechBlogGuide_1263441 a {
display: block;
font-size: 11px;
color: rgb(136, 136, 136);
font-family: verdana,sans-serif;
margin: 0px 4px 10px 0px;
text-align: center;
text-decoration: none;
overflow: hidden;
float: left;
}
div.TechBlogGuide_1263441 a {
width: 468px;
}
.TechBlogGuide a {
text-shadow: 1px 1px 1px rgb(17, 17, 17) !important;
color: rgb(238, 238, 238) !important;
padding: 0px !important;
margin: 0px 10px 10px 0px !important;
overflow: visible !important;
transition: all 0.2s ease 0s;
border: 0px none !important;
border-top-left-radius: 80px;
border-bottom-right-radius: 80px;
}
#nav ul li a.current, #nav ul li a.current:visited, a:hover {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
:focus {
outline: 0px none;
}
</style>
<div class="widget-content">
<div style="margin-top:35px;">
<!--style widget iklan by http://jalu-pangna.blogspot.com -->
<div id="TechBlogGuide_1263441" class="TechBlogGuide_1263441 TechBlogGuide"><a title="Advertise Here" href="http://jalu-pangna.blogspot.com/" class="adhere ad1 odd" target="_blank">Advertise Here</a></div>
<!--style widget iklan by http://jalu-pangna.blogspot.com -->
</div>
</div>
Style 3
<style>html > body div.TechBlogGuide_1264012 a.adhere {
width: 123px;
height: 123px;
}
div.TechBlogGuide_1264012 a.adhere {
width: 125px;
height: 125px;
line-height: 1000%;
}
div.TechBlogGuide_1264012 a.adhere {
color: rgb(102, 102, 102);
font-weight: bold;
font-size: 12px;
border: 1px solid rgb(204, 204, 204);
background: none repeat scroll 0% 0% rgb(231, 231, 231);
text-align: center;
}
.TechBlogGuide a:hover {
border-top-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.TechBlogGuide .ad5 {
background: none repeat scroll 0% 0% rgb(61, 164, 21) !important;
}
.TechBlogGuide .ad6 {
background: none repeat scroll 0% 0% rgb(182, 118, 6) !important;
}
.TechBlogGuide .even {
margin-right: 0px !important;
}
div.TechBlogGuide_1264012 a {
line-height: 100%;
}
div.TechBlogGuide_1264012 a {
display: block;
font-size: 11px;
color: rgb(136, 136, 136);
font-family: verdana,sans-serif;
margin: 0px 8px 15px 0px;
text-align: center;
text-decoration: none;
overflow: hidden;
float: left;
}
div.TechBlogGuide_1264012 a {
width: 125px;
}
.TechBlogGuide a {
text-shadow: 1px 1px 1px rgb(17, 17, 17) !important;
color: rgb(238, 238, 238) !important;
padding: 0px !important;
margin: 0px 10px 10px 0px !important;
overflow: visible !important;
transition: all 0.2s ease 0s;
border: 0px none !important;
border-top-left-radius: 80px;
border-bottom-right-radius: 80px;
}
#nav ul li a.current, #nav ul li a.current:visited, a:hover {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
:focus {
outline: 0px none;
}
</style>
<div class="widget-content">
<!--style widget iklan by http://jalu-pangna.blogspot.com -->
<div id="TechBlogGuide_1264012" class="TechBlogGuide_1264012 TechBlogGuide">
<a href="http://jalu-pangna.blogspot.com/" title="Advertise Here" class="adhere ad5 odd" target="_blank">Advertise Here</a>
<a href="http://jalu-pangna.blogspot.com/" title="Advertise Here" class="adhere ad6 even" target="_blank">Advertise Here</a>
</div>
<!--style widget iklan by http://jalu-pangna.blogspot.com -->
</div>
Style 4
<style>Semoga bermanfa'at..
html > body div.TechBlogGuide_1272098 a.adhere {
width: 258px;
height: 258px;
}
div.TechBlogGuide_1272098 a.adhere {
width: 260px;
height: 260px;
line-height: 2080%;
}
div.TechBlogGuide_1272098 a.adhere {
color: rgb(102, 102, 102);
font-weight: bold;
font-size: 12px;
border: 1px solid rgb(204, 204, 204);
background: none repeat scroll 0% 0% rgb(231, 231, 231);
text-align: center;
}
.TechBlogGuide a:hover {
border-top-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.TechBlogGuide .ad1 {
background: none repeat scroll 0% 0% rgb(17, 108, 165) !important;
}
div.TechBlogGuide_1272098 a {
line-height: 100%;
}
div.TechBlogGuide_1272098 a {
display: block;
font-size: 11px;
color: rgb(136, 136, 136);
font-family: verdana,sans-serif;
margin: 0px;
text-align: center;
text-decoration: none;
overflow: hidden;
}
div.TechBlogGuide_1272098 a {
width: 260px;
}
.TechBlogGuide a {
text-shadow: 1px 1px 1px rgb(17, 17, 17) !important;
color: rgb(238, 238, 238) !important;
padding: 0px !important;
margin: 0px 10px 10px 0px !important;
overflow: visible !important;
transition: all 0.2s ease 0s;
border: 0px none !important;
border-top-left-radius: 80px;
border-bottom-right-radius: 80px;
}
#nav ul li a.current, #nav ul li a.current:visited, a:hover {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
:focus {
outline: 0px none;
}
</style>
<div class="widget-content">
<div id="TechBlogGuide_1272098" class="TechBlogGuide_1272098 TechBlogGuide"><a href="http://jalu-pangna.blogspot.com/" title="Advertise Here" class="adhere ad1 odd" target="_blank">Advertise Here</a></div>
</div>
Written by: jalupangna
Wawasan spiritual dan blogging, Updated at: 04.37
mantap..makasih om buat tips nya..sangat membantu.
BalasHapuskunjungi blog saya : http://metro-urban.blogspot.com
Sama-sama, ok..segera ke TKP. Terima kasih kunjungnnya..
HapusMantab Nih Buat Blog Yang Banyak Iklannya ... Jadi Kelihatan Lebih Stylish Da Professional :)
BalasHapusTerima kasih atas apresiasi anda juga kunjungannya, salam..
Hapusmakasih pak sanga membantu
BalasHapusom, itu widgetnya hover apa nemplok aja om???
BalasHapusMantap mas, banyak info baru yg sy dapat disini (h)
BalasHapusBtw, templatenya keren bgt mas, boleh di share?
Gimana cara measukan scrip iklan untuk tampil di banner iklan yang telah disiapkan
BalasHapusInfonya oke punya disini
BalasHapus