Selasa

pop up keren

1. Login ke Blogger
2. Masuk ke "Rancangan - Elemen Laman"
3. Klik "Tambah Gadget" dan pilih type "HTML/JavaScript"
4. Masukan kode dibawah ini pada bagian konten.


    <style type="text/css">
    #topbar {
     position:absolute;
     z-index: 100;
     padding: 8px;
     background: #eee;
     background: -moz-linear-gradient(top, rgba(255, 255, 255, .9), rgba(211, 211, 211, .9));
     background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .9)),to(rgba(211, 211, 211, .9)));
     border: 1px solid #fff;
     border-radius: 10px;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     -webkit-box-shadow: #600 0 2px 15px;
     -moz-box-shadow: #600 0 2px 10px;
     margin:0 auto 10px;
     float:left;
     color:rgba(0, 0, 0, 0.75);
     font-size: 12px;
     font-family: Verdana, serif;
     text-shadow:0 1px 0 #FFFFFF;
    }
    #topbar img {
     border:none;
    }
    #topbar .tombol {
     margin:0;
     padding-bottom:5px;
     text-align:right;
    }

    #topbar .tombol button {
     color:#FFFFFF;
     border: solid 1px #494949;
     margin:0;
     padding:2px 15px;
     cursor: pointer;
     text-shadow: 0 1px 1px rgba(0,0,0,.6);
     background: #5f5f5f;
     background: -webkit-gradient(linear, left top, left bottom, from(red), to(#454545));
     background: -moz-linear-gradient(top, red,  #454545);
    }

    #topbar .isi_iklan {
     background-color:#FFFFFF;
     margin:0;
     padding:4px;
     width: 468px;
     border: 1px solid #999;
    }
    </style>
    <script src="https://sites.google.com/site/mibatsblog/js/js_pop_up.js"></script>
    <script type="text/javascript">
    var persistclose=1
    var startX = 20
    var startY = 20
    var verticalpos="fromtop"
    </script>
    <div id="topbar">
    <div class="tombol"><a href="#" onclick="closebar(); return false" style="text-decoration: none;"><button>X</button></a></div>
    <div class="isi_iklan">

    <!-- Kode Iklan-->

    </div>
    </div>

5. Klik tombol simpan dan preview.  

Keterangan:
Untuk mengatur kode CSS yang baru, baca penjelasan dibawah ini.
Perhatikan kode dibawah ini (lihat langkah 4):

  • #topbar .isi_iklan 
  • { background-color:#FFFFFF; Untuk mengubah warna latar (background) 
  • margin:0; padding:4px; width: 468px; Untuk mengatur lebar wadah iklan, ini disesuaikan dengan lebar iklan yang akan digunakan border: 1px solid #999; untuk untuk mengatur garis tepi wadah iklan }
  • Untuk kode dengan warna merah ganti dengan link iklan (#) 
  • Isi dengan script iklan.

Tidak ada komentar:

Posting Komentar