SimpleModal OSX Style Popup For Blogger Tutorial

on Dec 3, 2011
1. Go to Design > Edit HTML




2. Find the code

</head>


3. Paste the code below ABOVE </head>

<link href='https://sites.google.com/site/blogosxmodal/home/osx.css' media='screen' rel='stylesheet' type='text/css'/>
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.js'></script>
<script type='text/javascript' src='https://sites.google.com/site/blogosxmodal/home/jquery.simplemodal.js'></script>
<script type='text/javascript' src='https://sites.google.com/site/blogosxmodal/home/osx.js'></script>



4. Next Go to DESIGN > PAGE ELEMENT



5. Add Gadget anywhere you like it and choose for HTML/JavaScript




6. Paste the following code and save it.

<div id="osx-modal-content">
<div id="osx-modal-title">OSX Style Modal Dialog</div>
<div class="close"><a href="#" class="simplemodal-close">x</a></div>
<div id="osx-modal-data">
<h2>Hello! I'm SimpleModal!</h2>
<p>SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework.</p>
<p>SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development..</p>
<p>As you can see by this example, SimpleModal can be easily configured to behave like an OSX dialog. With a handful options, 2 custom callbacks and some styling, you have a visually appealing dialog that is ready to use!</p>
<p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
</div>
</div>



Change Your title and content ready that code!

7. ENJOY! Do Share, follow and comment! xD

Info: This Popup will pop once per visit and will pop again after 1hour if the same visitor visit your blog!

Demo as you can see at my blog or here DEMO

Source: SimpleModal Eric Martin

0 comments:

Post a Comment