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.
- Silahkan sobat login ke bloger
- Pilih Rancangan, Edit Html
- Cari kode </head>
- 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Xn9m-YAgs71Mb7MWJ2v11eOxPAn8QIVOwqOwMlMTZ3UwAa_1xCLuK0z0P0Ksrlp3OOW8qACu2nfdmBlGbEPStCug7M9HdcQC39F8diZPf8wO0wAt9t4URL7QuxNVc55iUomV_hwP9z_-/) 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> - 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'/> - 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEituZwktNvW7WI_d2dxLQxDd7ikkBqr3pWaZrYJmV2WowwpTsu39jCSganofB8hJNfCdya-n6oe4J9uUYHq9IIMdIII-5TPbGODG29pZLsSoU1WxQpY_vvaLkPACgIL28rkdcAQBmkZQxg/s1600/rss_icon.jpg'/>
</div>
</div> - 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........
Tags:
Judul :
Membuat Menu Pop Up Keren
Rating : 4.5
Ditulis Oleh : sy@ms
Rating : 4.5
Ditulis Oleh : sy@ms
Jika mengutip harap berikan link yang menuju ke artikel Membuat Menu Pop Up Keren ini. Sesama blogger mari saling menghargai. Terima kasih atas perhatiannya
Copyright © 2011.
koq gag ngefek gan?? di blog ane...
BalasHapushttp://h4ck1n9y0urs3lf.blogspot.com/
zgdfxgzdgxgzxcxv
HapusSebelumnya salam kenal sob.....
BalasHapusYang 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.
ko di blog ane http://obatuntukpenyakit15.blogspot.com ga muncul secara langsung ya harus di klik dulu, kenapa ya.?
BalasHapusSalam kenal sebelumnya sob, sorry ane baru bales.
BalasHapusScript 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.
Terimakasih ya sob atas informasinya.
BalasHapusmau ane coba dulu nih.
udah berhasil nih sob.
BalasHapusterimakasih ya atas tutorial yang bener bener sangat bermanfaat ini.
sob punya ane udah di coba dan hasilnya berhasil.
BalasHapusterimakasih ya atas tutorialnya.
Seep, trims kunjunganya.
BalasHapusia sama sama.
BalasHapusterimakasih juga atas tutorialnya.
sob ada menu pop up yang kerennya lagi ga.?
BalasHapushehehehe :D
Ada sob, tapi sebelumnya ma'f nih sob, ane lum bisa ngepost, alnya ane lagi ujian nih.
BalasHapusTpi ntr ane posin deh. Ditunggu aja sob.
Trims sebelumnya.
ohh ia.
BalasHapuska tolong konfir ym ane saya ya.
agar bisa nanyain langsung seputar ngeblog.
Ok, siip
BalasHapusTrims ya sebelumnya.
ia sama sama SOB.
BalasHapuskalo udah bikin fostingannya kasih tau ane ya SOB.
siip, di tunggu aja
BalasHapus