Pop Up Ask Box on Your Main Page
1. Copy and paste the code below right after <head> tags.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script> $(document).ready(function() { // $('a.poplight[href^=#]').click(function() { var popID = $(this).attr('rel'); //Get Popup Name var popURL = $(this).attr('href'); //Get Popup href to define size var query= popURL.split('?'); var dim= query[1].split('&'); var popWidth = dim[0].split('=')[1]; //Gets the first query string value $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://png.findicons.com/files/icons/1714/dropline_neu/24/dialog_close.png" class="btn_close" title="Close" alt="Close" /></a>'); var popMargTop = ($('#' + popID).height() + 80) / 2; var popMargLeft = ($('#' + popID).width() + 80) / 2; //Apply Margin to Popup $('#' + popID).css({ 'margin-top' : -popMargTop, 'margin-left' : -popMargLeft }); $('body').append('<div id="fade"></div>'); $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) return false; }); $('a.close, #fade').live('click', function() { $('#fade , .popup_block').fadeOut(function() { $('#fade, a.close').remove(); //fade them both out }); return false; }); }); </script>
**the highlighted is a image of ācloseā button. if you want change the image just replace with your url of image or you can chooseĀ here
2. Paste this code underĀ <style type=ātext/cssā>Ā tags
.popup_block{ display: none; background: #D3D3D3; background-image: url(); padding: 10px; font-family: Garamond; float: left; font-size: 10px; position: fixed; top: 50%; left: 50%; z-index: 2; border: 2px solid #363636; -moz-box-shadow: 0 0 5px #CFCFCF; -webkit-box-shadow: 0 0 5px #CFCFCF; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } img.btn_close { float: right; margin: -5px -5px 0 0; } *html .popup_block { position: absolute; }
** if you want to customize your ask box, just change what you want, i already highlight the tags of color. you can insert image background if you like, just put the url between (url)
3. paste this code afterĀ </body>Ā tags.
<div id="02" class="popup_block"> <Center><font size="5" color="#1C1C1C">Ask Me Anything<p></font><iframe frameborder="0" scrolling="yes" width="100%" height="150" src="http://www.tumblr.com/ask_form/USERNAME.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"> </center></div> </div></div></div></div></div></div></div></div></div></div>
** make sure you replace the USERNAME wit your username!
4. Change the code of your āaskā link to this code.
<a href="#?w=500" rel="02" class="poplight">ask me</a>
** change the āask meā to title of your ask link
CHECK THIS FOR EXTRA EXPLANATION WITH STEP 4
PLEASE FOLLOW THE INSTRUCTION CAREFULLY. FEEL FREE TO ASK ME IF YOU HAVE PROBLEM WITH IT.
vaporwave
prguitarman
romaincrisis
izzy806
