Home disini
widget by sy@ms

Latest Posts

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


    <style type='text/css'>
    #fade { /*--Transparent background layer--*/
    display: none; /*--hidden by default--*/
    background: #000;
    position: fixed; left: 0; top: 0;
    width: 100%; height: 100%;
    opacity: .50;
    z-index: 9999;
    }
    .popup_block{
    display: none; /*--hidden by default--*/
    background: #fff url(https://lh6.googleusercontent.com/_yGG-MhUR9yI/TXFMYpBenOI/AAAAAAAABHY/b_3oEQHF0oU/bgc.png) repeat-x;
    padding: 20px;
    border: 5px solid #ddd;
    float: left;
    font-size: 10px;
    position: fixed;
    top: 50%; left: 50%;
    z-index: 99999;
    /*--CSS3 Box Shadows--*/
    -webkit-box-shadow: 0px 0px 20px #000;
    -moz-box-shadow: 0px 0px 20px #000;
    box-shadow: 0px 0px 20px #000;
    /*--CSS3 Rounded Corners--*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    }
    img.btn_close {
    float: right;
    margin: -25px -25px 0 0;

    }
    /*--Making IE6 Understand Fixed Positioning--*/
    *html #fade {
    position: absolute;
    }
    *html .popup_block {
    position: absolute;
    }
    </style>


  5. Setelah itu letakan script dibawah ini dibawah script no.4


    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
    <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>


    <div class='popup_block' id='blog1'>
    <div align='center'>
    <p>Terserah sobat mau tulis apa</p>
    <img alt='loading Redirect...' src='http://2.bp.blogspot.com/_lbYltfBShOw/TGpGAkqjTjI/AAAAAAAAAY8/GNSuQ-M58rg/s1600/rss_icon.jpg'/>
    </div>
    </div>


  7. Setelah itu, masukan script dibawah ini umtuk link teksnya


    <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,
Salam senyum dariku........





Salam senyum dariku untuk semuanya, tetaplah untuk bersemangat. Jangan lupa Comment atau isi buku tamu ya sob. Sedikit pemberitahuan untuk sobat yang ingin mengambil [Copy-Paste], Owner tidak melarang sobat untuk memperbanyak artikel namun Owner berharap sobat berlaku dengan bijak agar mencantumkan link active maupun yang tidak. Owner berharap partisipasinya ya sob.



16 komentar:

Just Share mengatakan...

koq gag ngefek gan?? di blog ane...
http://h4ck1n9y0urs3lf.blogspot.com/

sy@ms mengatakan...

Sebelumnya salam kenal sob.....
Yang sobat maksud gimana, saya dah cek di blog sobat, dan sudah berefek tuh linknya.....
Jika selai sobat tulis di html sobat juga bisa memasukan pada html postingan/artikel.

Trims sob, semoga dapat dimengerti.

15 September 2011 15.23
Dian Ardi mengatakan...

ko di blog ane http://obatuntukpenyakit15.blogspot.com ga muncul secara langsung ya harus di klik dulu, kenapa ya.?

Dian Ardi mengatakan...

ko di blog ane tidak lagsung muncul ya, harus di klik dulu yang diatas sebelah kirinya. http://obatuntukpenyakit15.blogspot.com

sy@ms mengatakan...

Salam kenal sebelumnya sob, sorry ane baru bales.
Script diatas memang bekerja jika diclick, namun jika sobat ingin mengotomatiskan/keluar jika blog sobat di akses, silahkan ganti script :
http://syamsjs.googlecode.com/files/jquery2.js
dengan
http://syamsjs.googlecode.com/files/jqueryautopopup.js
nah jika tulisan "link teks klik disini" mau disembunyikan, hapus saja tulisan "link teks klik disini".
ok, selamat mencoba.

21 Januari 2013 00.34
Dian Ardi mengatakan...

Terimakasih ya sob atas informasinya.
mau ane coba dulu nih.

Dian Ardi mengatakan...

udah berhasil nih sob.
terimakasih ya atas tutorial yang bener bener sangat bermanfaat ini.

Dian Ardi mengatakan...

sob punya ane udah di coba dan hasilnya berhasil.
terimakasih ya atas tutorialnya.

sy@ms mengatakan...

Seep, trims kunjunganya.

22 Januari 2013 14.54
Dian Ardian mengatakan...

ia sama sama.
terimakasih juga atas tutorialnya.

Dian Ardian mengatakan...

sob ada menu pop up yang kerennya lagi ga.?
hehehehe :D

sy@ms mengatakan...

Ada sob, tapi sebelumnya ma'f nih sob, ane lum bisa ngepost, alnya ane lagi ujian nih.
Tpi ntr ane posin deh. Ditunggu aja sob.
Trims sebelumnya.

24 Januari 2013 14.45
Dian Ardi mengatakan...

ohh ia.
ka tolong konfir ym ane saya ya.
agar bisa nanyain langsung seputar ngeblog.

sy@ms mengatakan...

Ok, siip
Trims ya sebelumnya.

21 Februari 2013 23.01
Dian Ardi mengatakan...

ia sama sama SOB.
kalo udah bikin fostingannya kasih tau ane ya SOB.

sy@ms mengatakan...

siip, di tunggu aja

28 Februari 2013 09.42

Jam Sekarang
Tanggal
Salam Sapa :
Status Blogging :

*ket. status : Terjadwal : Berarti yang punya blog tidak bisa berinternet [ More... ]





sy@ms
skyNET program


Join the conversation for skyNET program

 
 free web counter Counter Powered by  RedCounter

© 2011 || Copyright by sy@ms || Thanks for skyNET program All Reserved

Technology Blogs TopOfBlogs Top Blogs Internet Internet Blogs Phil Backlink Display Pagerank
Yahoo bot last visit powered by MyPagerank.Net
USA Backlinks Free Backlinks Service at USABacklinks.com! Auto Backlink Gratis Indonesia : Top Link Indo My Ping in TotalPing.com ping fast  my blog, website, or RSS feed for Free