]
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/AVvXsEhi2Nn_L6ob76zeLlZI5SE-Og8FljKd7f4Kx8BB4uonpLf8wUfPidBOZaSbQU0rzTy8016gNZkmjzQHohm2tyewHMaP8kLLPvTPQUoNYyTah2CeSgX3OK4vHHJRZfzsYa32dVAA4se1SJrK/) 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/AVvXsEidij5C1O4MCkWEFIaIbgj-Vghg7M-Mq1M16LppxeocMhyphenhyphenDzvfrG2pWkVFG2nUtrGVMUMtWmXlm50jNIrxJZAfdLc7hB3OzO-P1Vt4uvw19KVcPaTGpdj8DgdI1FjvSoNld3r8z1t0kOdg/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:
alam senyum dariku untuk semuanya, tetaplah untuk bersemangat. Jangan lupa 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.
15 komentar:
koq gag ngefek gan?? di blog ane...
http://h4ck1n9y0urs3lf.blogspot.com/
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.
ko di blog ane tidak lagsung muncul ya, harus di klik dulu yang diatas sebelah kirinya. http://obatuntukpenyakit15.blogspot.com
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.
Terimakasih ya sob atas informasinya.
mau ane coba dulu nih.
udah berhasil nih sob.
terimakasih ya atas tutorial yang bener bener sangat bermanfaat ini.
sob punya ane udah di coba dan hasilnya berhasil.
terimakasih ya atas tutorialnya.
Seep, trims kunjunganya.
ia sama sama.
terimakasih juga atas tutorialnya.
sob ada menu pop up yang kerennya lagi ga.?
hehehehe :D
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.
ohh ia.
ka tolong konfir ym ane saya ya.
agar bisa nanyain langsung seputar ngeblog.
Ok, siip
Trims ya sebelumnya.
ia sama sama SOB.
kalo udah bikin fostingannya kasih tau ane ya SOB.
siip, di tunggu aja