Tutorial Blog: Popup like dan popup ads(iklan)

Apa itu popup like dan popup ads(iklan)
Pada asasnya popup adalah satu paparan yang timbul apabila kita melawat sesetengah laman web. Popup yang melampau menyukarkan pembaca untuk membaca isi kandungan blog tersebut tambahan pula popup tersebut sukar di padamkan. ini akan menyebabkan pembaca kurang minat terhadap blog tersebut. Popup yang sedarhana akan memberikan keselesaan kepada pembaca
untuk membaca isi kandungan blog tersebut akan tetapi penggunaan popup kurang disenangi oleh pelawat kerana ia memberi sedikit ganguan kepada mereka. Bagi pemasang popup pula ianya memberikan mereka satu kelebihan untuk mendapatkan like pada fanpage di facebook atau mendapatkan klik pada iklan mereka.

Ada beberapa code popup yang anda boleh cuba gunakan seperti berikut:-

<style type="text/css">
 #adstitle{
    opacity: 1.0;height: auto;width: auto;position: fixed;top: 100px;border-bottom: 1px #CCC solid;border-bottom: 0px #CCC solid;color: #333;padding: 0px;z-index: 1001;left: 300px;font-size: 13px;
 } 
 #adsheader{
    height: auto;width: auto;
    }
    #adsbody {
    height: auto;margin: auto;width: auto;background: #fff;text-align: Center;background: aliceblue;
    }
    </style>
    <script type="text/javascript">
    function getValue()
    {
    document.getElementById("adstitle").style.display = 'none';
    }
    </script>
 
    <div id="adstitle">
    <div id="adsheader">
   
    <span><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzX_Hmd4zbm2fl86JRAVt8f_tTE1w-enUHq5uYW_wOeMJG805URQYZJEISbg6GwD-EXsVsbB9J5qAb36PTMDefilpjxVLlErE6Qa7Y4XMI4RBz6U1Jq_t4tH7baNmAK1if5UqImCwLTsSx/s1600/PhoXo2.png" onclick="getValue()"></a></span>
    </div>
<div id="adsbody">
Letakkan code iklan anda disini:- <a href="LINK IKLAN" target="_blank"><img src="LINK GAMBAR" style="width: 125px;height: 125px;" /></a>
</div>
</div>

atau yang ini:-

<style type="text/css">
 #adstitle{
  opacity: 1.0;height: auto;width: auto;left: 300px;position: fixed;top: 100px;border-bottom: 0px #CCC solid;color: #333;padding: 0px;z-index: 1001;font-size: 13px;
    
  background:#9C1919;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#9C1919)30%, to(#D15656)); 
  background-image: -webkit-linear-gradient(top, #9C1919 30%, #D15656); 
  background-image:    -moz-linear-gradient(top, #9C1919 30%, #D15656); 
  background-image:     -ms-linear-gradient(top, #9C1919 30%, #D15656); 
  background-image:      -o-linear-gradient(top, #9C1919 30%, #D15656); 
  background-image:         linear-gradient(top, #9C1919 30%, #D15656);
  
  border-top:1px solid #F5EBF1;
  -moz-box-shadow: 0px 5px 10px #121B29;
  -webkit-box-shadow: 0px 5px 10px #121B29;
  box-shadow: 0px 5px 10px #121B29;

  -moz-border-radius:10px; 
  -webkit-border-radius:10px;
  border-radius:10px;
 }
 #adsheader{
  height: 3auto;width: auto;background-repeat: repeat-x;text-align: right;
 }
 #adsbody{
        height:auto;width: auto;margin:auto;font-size:16px;margin-left: 10px;margin-right: 10px;margin-bottom: 30px;background: aliceblue;
    }  

.clear { clear: both;}
</style>
<script type="text/javascript">
    function getValue()
    {
    document.getElementById("adstitle").style.display = 'none';
    }
</script>
 <div id="adstitle" style="height: 280px;">
 <div id="adsheader">
  <span><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixwn9yMRKikon9wR1L01QJOR_3SXHzJrKI0HPmAvNCNgd7HbofZ9QUFOuSRyClf9_jQkeWsjAjKGIPkDZdi6uQhyphenhyphenBCu1YG5VTM7fz0X4I62QgWfdJ2Yta-77tGyvlJjJnt6vbwYdY81Po2/s1600/close-icon.png" onclick="getValue()"></a></span>
  </div>
<div id="adsbody">
Letakkan code iklan anda disini:- <a href="LINK IKLAN" target="_blank"><img src="LINK GAMBAR" style="width: 125px;height: 125px;" /></a>
 </div>
<div class="clear">
</div>
</div>

Boleh juga yang ini:- untuk bahagian bawah

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'>
</script><br />
<script type='text/javascript'>
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(90);
});
});
</script>
<style type='text/css'>
div#btm_banner {bottom: 0;position: fixed;width: 100%;opacity: 0.9;left: 0;}
div#btm_banner img {border:0;cursor:pointer;}
</style>
<div style='height: 0px;'>
</div>
<div align='center' id='btm_banner' style='height: 115px; z-index: 9999;'>
<div style='text-align: right; width: 728px; height: 1px;'>
<a href="#"><img id='closed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixwn9yMRKikon9wR1L01QJOR_3SXHzJrKI0HPmAvNCNgd7HbofZ9QUFOuSRyClf9_jQkeWsjAjKGIPkDZdi6uQhyphenhyphenBCu1YG5VTM7fz0X4I62QgWfdJ2Yta-77tGyvlJjJnt6vbwYdY81Po2/s1600/close-icon.png'/></a></div>
<div style='clear: both;'>
</div>
<p>
<p>
<center>
Letakkan code iklan anda disini:- <a href="LINK IKLAN" target="_blank"><img src="LINK GAMBAR" style="width: 125px;height: 125px;" /></a>
</center>
</p>
</p>
</div>

dan yang ini:- untuk bahagian sisi kiri dan kanan

<script type='text/javascript'>
    $(document).ready(function() {
    $('img#closed').click(function(){
    $('#btm_banner').hide(90);
    });
    });
    </script>

    <script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",i="?m=1";function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var k=j();k&&window.location.replace(k)};
    </script><script type="text/javascript">
    if (window.jstiming) window.jstiming.load.tick('headEnd');
    </script>

    <!--start: floating ads left-->
    <div id="teaser2" style="width:autopx; height:0; text-align:left; display:scroll;position:fixed; top:0px;left:0px;">
    <div>
<a href="#" id="close-teaser" onclick="document.getElementById('teaser2').style.display = 'none';" style="cursor:pointer;"><center>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzX_Hmd4zbm2fl86JRAVt8f_tTE1w-enUHq5uYW_wOeMJG805URQYZJEISbg6GwD-EXsVsbB9J5qAb36PTMDefilpjxVLlErE6Qa7Y4XMI4RBz6U1Jq_t4tH7baNmAK1if5UqImCwLTsSx/s1600/PhoXo2.png'/></center>
</a></div>
<!--Start--> 
Letakkan code iklan anda disini:- <a href="LINK IKLAN" target="_blank"><img src="LINK GAMBAR" style="width: 125px;height: 125px;" /></a> 
    <!--End-->
    </div>
<!--end: floating ads left-->
    <!--start: floating ads right-->
    <div id="teaser3" style="width:autopx; height:600; text-align:right; display:scroll;position:fixed; top:0px;right:0px;">
    <div>
<a href="#" id="close-teaser" onclick="document.getElementById('teaser3').style.display = 'none';" style="cursor:pointer;"><center>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzX_Hmd4zbm2fl86JRAVt8f_tTE1w-enUHq5uYW_wOeMJG805URQYZJEISbg6GwD-EXsVsbB9J5qAb36PTMDefilpjxVLlErE6Qa7Y4XMI4RBz6U1Jq_t4tH7baNmAK1if5UqImCwLTsSx/s1600/PhoXo2.png'/></center>
</a></div>
<!--Start-->
Letakkan code iklan anda disini:- <a href="LINK IKLAN" target="_blank"><img src="LINK GAMBAR" style="width: 125px;height: 125px;" /></a> 
 <!--End-->
    </div>
<!--end: floating ads right-->

Nota:- Sekiranya anda mahu meletakkan link URL untuk ianya berfungsi sebagai pembuka kepada new windows anda cari perkataan href="#" dan anda gantikan link tersebut dengan link yang ingin anda letakkan sebagai contoh saya letakkan link ini href="http://www.google.com.my". Apabila pelawat menekan butang close pada iklan tersebut dengan secara outomatik ia akan membuka windows baru dan menuju ke link yang telah anda setkan tadi.

Letakkan code iklan anda disini anda boleh tukarkannya dengen code iklan atau code like fanpage anda. Anda boleh mendapatkan code like fanpage anda disini.

Rasanya setakat ni saja tutorial saya buat kali ini, selamat mencuba dan semoga berjaya!!!

Anda mungkin juga berminat dengan tutorial ini:-

Tutorial Blog

Popup like dan popup ads(iklan)

0 comments:

Popular Posts

iklan

Hubungi Saya

About

Pelawat