Membuat Menu Pop Up Keren




Kedengaranya menarik bukan, membuat Menu Pop Up keren. Dengan Pop Up ini sobat bisa buat menu, sapaan, pemberitahuan, bukutamu, dan lain-lain.
Untuk lihat demonya klik Disini.
Nah untuk memasangnya, silahkan sobat ikuti step-stepnya ok......
Jangan lupa unutk membackup template terlebih dahulu, untuk jaga-jaga kalau templatenya rusak.

  1. Silahkan sobat login ke bloger
  2. Pilih Rancangan, Edit Html
  3. Cari kode </head>
  4. Letakan script dibawah ini diatas kode no.3, ini adalah kode CSS-nya
    view plainprint?
    1. <style type='text/css'>  
    2. #fade { /*--Transparent background layer--*/  
    3.  display: none; /*--hidden by default--*/  
    4.  background: #000;  
    5.  position: fixed; left: 0; top: 0;  
    6.  width: 100%; height: 100%;  
    7.  opacity: .50;  
    8.  z-index: 9999;  
    9. }  
    10. .popup_block{  
    11.  display: none; /*--hidden by default--*/  
    12.  background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjohDluUFO6wfA0qZfparl-CiBf8OomO4C6LwNsn0ssTMTh8NLnJMf0im0y8VZo32HpndBRVN6LN_jHprMTjuOB-hlZwEwo6YPf94PaJAHBhHPJjPzukWDtElTo4ABkK24Qphudu_RWVWRi/) repeat-x;  
    13.  padding: 20px;  
    14.  border: 5px solid #ddd;  
    15.  float: left;  
    16.  font-size: 10px;  
    17.  position: fixed;  
    18.  top: 50%; left: 50%;  
    19.  z-index: 99999;  
    20.  /*--CSS3 Box Shadows--*/  
    21.  -webkit-box-shadow: 0px 0px 20px #000;  
    22.  -moz-box-shadow: 0px 0px 20px #000;  
    23.  box-shadow: 0px 0px 20px #000;  
    24.  /*--CSS3 Rounded Corners--*/  
    25.  -webkit-border-radius: 10px;  
    26.  -moz-border-radius: 10px;  
    27.  border-radius: 10px;  
    28. }  
    29. img.btn_close {  
    30.  float: right;  
    31.  margin: -25px -25px 0 0;  
    32.   
    33. }  
    34. /*--Making IE6 Understand Fixed Positioning--*/  
    35. *html #fade {  
    36.  position: absolute;  
    37. }  
    38. *html .popup_block {  
    39.  position: absolute;  
    40. }  
    41. </style>  
  5. Setelah itu letakan script dibawah ini dibawah script no.4
    view plainprint?
    1. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>  
    2. <script src='http://syamsjs.googlecode.com/files/jquery2.js' type='text/javascript'/>  
  6. Setelah itu, masukan sript dibawah ini kedalam tag <body>, terserah sobat mau diletakan di manasaj yang penting di dalam tag <body>
    view plainprint?
    1. <div class='popup_block' id='blog1'>  
    2. <div align='center'>  
    3. <p>Terserah sobat mau tulis apa</p>  
    4. <img alt='loading Redirect...' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF5jScxbHP0KIEOHE58a06MhEsKOyTBNyN7pBDwPmgNtRubKQWSzNnCfXaiePR_PFe-qXMKNpucSexeq1vStWTawHjMsjUSA0pqNrGkYfqNG1uE7FEdR4_4cEiF8WRQXwTyZlRQJFXab8/s1600/rss_icon.jpg'/>  
    5. </div>  
    6. </div>  
  7. Setelah itu, masukan script dibawah ini umtuk link teksnya
    view plainprint?
    1. <a class='poplight' href='#?w=500' rel='blog1'>link teks klik disini</a>  

Sobat dapat mengedit tampilan kotak popup pada script CSS-nya, setelah itu ID pada kode no.6 dan no.7 harus sama. Sobat dapat memodifikasi teks yang akan ditampilkan pada script no.6. Dan jangan lupa klik save dan lihat blog.

Gimana........

Woke, Semoga bermanfaat,

Penulis : ALSYA ~ Sebuah blog yang menyediakan berbagai macam informasi

Artikel Membuat Menu Pop Up Keren ini dipublish oleh ALSYA pada hari . Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 0 komentar: di postingan Membuat Menu Pop Up Keren
 

0 komentar:

Post a Comment

Subscribe to: Post Comments (Atom)