Cari Artikel Blog Ini

Total Tayangan Laman

CARA MENAMPILKAN MENU POP UP

Menu Pop Up merupakan sejenis widget melayang yang penampilnnya muncul ketika blog dibuka. Agar tidak mengganggu, menu tersebut telah dilengkapi dengan tombol close sehingga setelah pengunjung membaca isi dari menu tersebut dapat menutupnnya kembali.
Isi dari menu pop up dapat digunakan untuk menampilkan iklan atau apa saja berupa hal-hal yang penting anda sampaikan kepada pengunjung sebelum pengunjung itu membuka blog secara penuh.
Anda ingin menampilkannya..?? Ikuti langkah-langkahnya dibawah ini :
  1. LANGKAH PERTAMA

    1. Login ke Blogger.
    2. Masuk ke Rancangan pilih Edit HTML.
    3. Cari kode ]]></b:skin>
    4. copy kode dibawah ini kemudian paste tepat diatasnya

      #topbar{
      position:absolute;
      visibility: hidden;
      width: 350px;
      z-index: 100;
      padding:5px;
      background-color: #FFFFFF;
      border: 1px solid #333333;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      margin:0 auto 10px;
      float:left;
      color: #505050;
      text-align: justify;
      font-size: 12px;
      font-family: Verdana, serif;
      }
  2. LANGKAH KEDUA
    1. Copy kode dibawah ini, kemudian paste tepat dibawah kode </head>


    2. <script src="http://sites.google.com/site/epgstudiosite/javascript/pop_up.js" type="text/javascript"></script>
      <script type="text/javascript">
      var persistclose=0
      var startX = 20
      var startY = 20
      var verticalpos="fromtop"
      </script>


  3. LANGKAH KETIGA
    1. Copy kode dibawah ini, kemudian paste tepat diatas kode </body>

      <div id="topbar">
      <div align="right"><a href="" onclick="closebar(); return false"><img src="http://sites.google.com/site/epgstudiosite/image/Close.png" /></a></div>
      Masukan isi dari menu pop up yang ingin anda tampilkan
      </div>
  4. Klik tombol Simpan Template, sekarang lihat blog anda


Menu pop up dapat juga anda tampilkan dengan cara berikut ini :
  1. Masuk ke Rancangan pilih Elemen Halaman.
  2. Klik Tambah Gadget.
  3. klik tanda + pada HTML/Javascript.
  4. Copy kode dibawah ini, kemudian paste pada kolom yang tersedia

    <style type="text/css">

    #gb{

    position:fixed;

    top:10px;

    z-index:+1000;

    }

    * html #gb{position:relative;}

    .gbcontent{

    float:right;

    border:2px solid #000000;

    background:#ffffff;

    padding:10px;

    }

    </style>

    <script type="text/javascript">

    function showHideGB(){

    var gb = document.getElementById("gb");

    var w = gb.offsetWidth;

    gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);

    gb.opened = !gb.opened;

    }

    function moveGB(x0, xf){

    var gb = document.getElementById("gb");

    var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

    var dir = xf>x0 ? 1 : -1;

    var x = x0 + dx * dir;

    gb.style.top = x.toString() + "px";

    if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

    }

    </script>

    <div id="gb">

    <div class="gbtab" onclick="showHideGB()"> </div>

    <div class="gbcontent">

    <div style="text-align:right">

    <a href="javascript:showHideGB()">

    .:[Close][Klik 2x]:.

    </a>

    </div>

    <center>

    Masukan isi menu pop up disini

    </center>

    <script type="text/javascript">

    var gb = document.getElementById("gb");

    gb.style.center = (30-gb.offsetWidth).toString() + "px";

    </script></div></div>

  5. Klik tombol simpan.
  6. Lihat blog anda sekarang.

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
9 Comments

9 komentar :

Agus Bambang Achtiar mengatakan...

tanks gan , ntar tak coba

Fahrizal Adi W mengatakan...

Sob!!
Pas aku ikutin tutorial ini kenapa kok, buku tamu yang melayang di blog-ku malah ikut error..,??
Saya tunggu di "sunjacow@hotmail.com"

DISTRIBUTOR PULSA PALING MURAH mengatakan...

thank gan. .aq sngt terbantu skali u/ maksimalkan blog ku.
beruntung skali bisa ktmu blog agan,tips'y bagus"
mampir gan ke blog ane,
http://mazterpulsa.blogspot.com

Dealer Pulsa Elektrik Murah Indonesia mengatakan...

Jangan Lupa Mampir Juga Kesini yah Gan...!

QOMARCELL.blogspot.com

alfian mengatakan...

jangaan lupa mampir sob
http://elmejor04.blogspot.com/

NUR IMROATUS SHOLIKHAH mengatakan...

jangan lupa mampir mampir dulu di blog ku
http://nurimroatus.blogspot.com

Tips dan Trik mengatakan...

nice posting gan, come back to my blog

obatuntukpenyakitkelenjartiroidalami mengatakan...

makasih informasinya

obatuntukpenyakitkelenjartiroidalami mengatakan...

informasi yang sangat menarik dan makasih sudah disampaikan

Posting Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!