Popup Modal jQuery

Modal Popup ini bernama Reveal. Popup Reveal ini adalah modal popup jquery yang paling mudah digunakan dibanding plugin popup modal jquery lainnya. Karena hanya dalam 3 langkah, anda sudah dapat melihat popup reveal ini bekerja. Saya jamin popup ini pasti bekerja dengan baik di blog anda apabila anda memasangnya dengan instruksi yang benar. Sangat mudah dipasang, baik itu di blog maupun web.

Untuk memasang popup modal ini anda harus menjalani 3 langkah :

1. Melampirkan plugin Jquery ke blog anda dan file Javascript yang sudah hostingkan,
2. Menambahkan CSS ke blog anda.
3. Menambahkan popup modal.

Melampirkan Plugin jQuery dan File Javascript

1. Login ke akun Blogger anda
2. Masuk ke Dashboard > Template > Edit HTML
3. Klik Proceed dan cari kode </head> . Lalu tambahkan kode dibawah ini tepat sebelum kode tersebut. 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/622173211711/jquery.reveal.js"></script>

Menambahkan CSS 

1. Tetap di HTML Editor, cari kode ]]></b:skin> . Ganti kode tersebut dengan kode dibawah ini :

/* Reveal Modals
-------------------------------------------------- */
.reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: #000;
background: rgba(0,0,0,.5);
z-index: 100;
display: none;
top: 0;
left: 0;
}
.reveal-modal {
visibility: hidden;
top: 100px; left: 50%;
border:7px #545454 solid;
margin-left: -300px;
width: 520px;
background: #eee;
position: absolute;
z-index: 101;
padding: 15px 30px;
font:12px Arial;line-height:23px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
-box-shadow: 0 0 10px rgba(0,0,0,.4);
}
.reveal-modal h1 {border-left:5px solid #0099FF;padding-left:7px;font-family:arial;}
.reveal-modal.small { width: 200px; margin-left: -140px;}
.reveal-modal.medium { width: 400px; margin-left: -240px;}
.reveal-modal.large { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge { width: 800px; margin-left: -440px;}

.reveal-modal .close-reveal-modal {
font-size: 22px;line-height: .5;position: absolute;
top: 8px;right: 11px;color: #aaa;
text-shadow: 0 -1px 1px rbga(0,0,0,.6);
font-weight: bold;cursor: pointer;
}
]]></b:skin>

2. Klik Preview dahulu (untuk menghindari pesan error)

3. Jika tidak ada pesan error pada halaman Preview maka klik Save Template

Menambahkan Popup Modal ke Blog 

Info :
Sebenarnya anda dapat memasang popup modal jquery ini bukan hanya di postingan saja, tetapi juga bisa di sidebar ataupun dimana saja. Yang anda perlu hanya menambahkan kode pada Langkah kedua ke tempat dimana anda akan menaruh popup modal tersebut.

1. Pada Post Editor klik HTML

2. Lalu tambahkan kode berikut ini :

<a href="#" class="big-link" data-reveal-id="myModal">link-kalian</a>

<div id="myModal" class="reveal-modal">
<h1>Popup jQuery</h1>
<p>Text...</p>
<a class="close-reveal-modal">×</a>
</div>

Keterangan :

• Kode yang diberi warna kuning adalah judul dari popup tersebut.
• Kode yang diberi warna ungu adalah isi  dari popup tersebut.
• Kode yang diberi warna hijau adalah link yang jika diklik akan muncul popup tersebut.

3. Lalu klik Publish dan lihat hasilnya.