Pop up ask code to put in your own background and header!
This is the code to put in your theme to have a pop up ask where you can choose your own pop up ask, header, and header text (i.e. ask my anything, read my faq)
Step one, find the meta options in your theme by searching “Meta” and you should find a block that looks like this
After you have found that, add the following codes to it
<meta name="image:AskBackground" content=""/> <meta name="image:AskBanner" content=""/>
<meta name="text:AskHeader" content=""/>
Now after you have put those codes in, if you go to your appearance tab, you should see the options are now there
Now do not upload or do anything to these just yet, because we have to add a few more things first
Now you have to paste the following code under the <head> tag
</script> <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>
Now find the <style type=”css/text”> tag
Note: If you are using the Narnia theme, you do not have this tag. Just add it in the EXACT tag in the <head> section, then the code below, and then </style> at the end.
If you do not add </style> at the end, your coding will be completely messed up
.popup_block{ display: none; background: {color:askcolor}; background-image: url({image:AskBackground}); 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; }
Now we are almost done. Now just find the </body> tag and add the following code under it.
Note: If you do not have a </body> tag, then just add it to the bottom of your theme code
<div id="02" class="popup_block"> <Center><p><IMG SRC="{image:askbanner}" ALT="Ask Banner" width="400" height="80"></p> <font size="5" color="{color:text}"><p><small><small>Pop up ask by 4lisonwonderland</small></small></p><p>{text:AskHeader}<p></font><iframe frameborder="0" scrolling="yes" width="100%" height="150" src="http://www.tumblr.com/ask_form/YOURTUMBLRUSERNAME.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"> </center></div> </div></div></div></div></div></div></div></div></div></div>
IMPORTANT: Replace YOURUSERNAMEHERE with your tumblr user name, or else the ask box will not appear
Last step, find your ask code, by searching {askenabled}, /ask, message, ask me anything, ask, ect.
And then paste this code to replace it
<a href="#?w=500" rel="02" class="poplight">ask me</a>
And now we are done, and you can start customizing!
Note: If you are still confused, i have a video tutorial posted here
