pop-up-ask

2

THEME :OVERDOSE 
Static preview // Download

This theme is in celebration of EXO's comeback "Overdose"
  • 250/400/500 post size
  • Sidebar image shuffle
    (up to three images that will be on shuffle)
  • Logo image in top bar
  • description (long descriptions look best)
  • Title (keep it short, down to 1 word)
  • 4 extra links
  • Show caption Option
  • Popup ask Option
  • Infinite Scroll Option
  • Notes/ Tags / Reblog on posts
  • Customizable colors and backgrounds
EXO LOGO - [X] You can change the color in PS (thanks to my wonderful followers)
Background images from - Starious
POP UP ASK TUTORIAL!!

ok so ive been getting a lot of questions on how to do the pop up ask so i made a tutorial for you guys!!!

1. paste this code under <head>

2. paste this code before </style>

3. past this code under </body>

4. now in the <div> tags find <a href=“/ask” and replace that tag with this code 

it should look like this when youre done

also you MUST put your url in the 3rd code for it to work!!!!!

if you have any troubles or need help with anything else just come ask! i am more than willing to help you!!

2
THEME #7 SUOMI

static preview | pastebin | freetexthost

features:

  • 500px posts
  • 70x70px sidebar image (keep it square!)
  • pop up with 4 custom links
  • pop up ask box (don’t forget to add your url!!!)
  • tooltips
  • hover tags option
  • if you have any questions, feel free to ask away :)

if using, please like/reblog and follow the rules (ノ◕ヮ◕)ノ*:・゚✧

click here for more themes!~

misscapaldi  asked:

hey Marcie how did you get the ultra-cool popup pages for your message/navi? I've been trying to find a good tutorial but dammit none of the codes are working for me and I can't write javascript :/ did you get the codes off of a certain tutorial? thanks in advance ;)

Hello dear! I actually built my pop up pages through a combination of different tutorials and examples I saw around Tumblr, most of which can be rather confusing. So I am gonna go ahead and explain the way I did it. Please let me know if at any point you get confused!

Keep reading

Background images in pop ups

In reference to this tutorial and/or this tutorial.

For an image as the background behind the pop up:
Example:

1. From the code in step 2 of the tutorial, find background:#000; (as shown below):
 

2. Then replace it with this code:
background-image:url(“URL OF BACKGROUND IMAGE”);

You can get the url of the background image by right-clicking on the background you want to use and selecting ‘copy image address’. For example:
background-image:url(“http://slowbuddy.com/wp-content/uploads/2012/04/PowerPoint-Background-Pale-Pink-Rust.jpg”);



For an image as the background inside the pop up:
Example:

1. From the code in step 2 of the tutorial, find background:#fff; (as shown below):

2. Then replace it with this code:
background-image:url(“URL OF BACKGROUND IMAGE”);

You can get the url of the background image by right-clicking on the background you want to use and selecting 'copy image address’. For example:

background-image:url(“http://slowbuddy.com/wp-content/uploads/2012/04/PowerPoint-Background-Pale-Pink-Rust.jpg”);


Please ‘like’ this tutorial if it was helpful! x

How to have Multiple Pop Up Boxes

For more animations click here
To add a background click here
To add a fade background click here

Paste this code under your <head> tag

<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>

<style>
#fade { /*--Transparent background layer--*/
    display: none; /*--hidden by default--*/
	background: #fcf; /*--Other Stuff Background Color--*/
	position: fixed; left: 0; top: 0;
	width: 100%; height: 100%;
	opacity: .80;
	z-index: 9999;
}
.popup_block{
	
	-webkit-animation: fly 3s linear  normal ;
	-webkit-animation-duration: 3s;
	-moz-animation: fly 3s linear  normal ;
	-moz-animation-duration: 3s;
	animation: fly 3s linear  normal ;
	animation-duration: 3s;
    
	display: none; /*--hidden by default--*/
	background: #fff; /*Pop Up background Color*/
	padding: 20px; 
	border: 20px solid #ddd; /*--Border color and width--*/
	float: left;
	font-size: 1.2em;
	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: -5px -5px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
	position: absolute;
}
*html .popup_block {
	position: absolute;
}
</style>

Now paste this code right BEFORE your </body> tag

Click here for the ask box code to insert if you want a pop up ask
Click here for styled ask boxes code

Click here for the submit box to instert 

<div id="02" class="popup_block">

<a href="http://everythingtumblr.4lison.com/">Pop boxes by {Everything} Tumblr</a><center>YOUR POP UP STUFF HERE</a></div>
<div id="03" class="popup_block">
<a href="http://everythingtumblr.4lison.com/">Pop boxes by {Everything} Tumblr</a><center>MORE POP UP STUFF HERE</a></div>


</div></div></div></div></div></div></div></div></div></div>

Now paste these codes where you want your pop up links to be

<a href="#?w=500" rel="02" class="poplight">Pop Up Box 1</a>
<a href="#?w=500" rel="03" class="poplight">Pop Up Box 2</a>

Now to add even more pop ups, just copy the codes and change the div id # and the rel # for each box you add!

Pop up links and ask tutorial by lchiban

~*PLEASE FOLLOW THE STEPS CAREFULLY*~

Pop up links and ask boxes are as hard as they look, I wish there were an easy way that I knew of but sadly there isn’t, but I will explain it as easily as possible for you as I can. I’ve divided the codes into 4 sets on Paste Bin so it doesn’t look so long and scary on here

All right, to start off, add this code AFTER <head>

Then paste this code AFTER <style type=“text/css”>

Now, paste this code BEFORE </body>

To make it an actual link in your sidebar, instead of using the usual a href code, use this code instead

~*FOR POP UP ASK BOX + FAQ (IF WANTED) FOLLOW THESE STEPS*~

Following the same steps above, except instead of using #3 coding, use this code instead

~*IF YOU’RE NOT USING ONE OF MY (lCHIBAN) THEMES, FOLLOW THESE STEPS FOR COLOURS*~

As you know, every theme makers coding is different, so the colours used in this tutorial are colour codes for my themes (Example: {color:Post Link};)

To change the colours to your theme codes colours, you can do it two ways

You can either do it manually, meaning going to #2 code and find h2 { and h2 a { and changing {color:Post Text}; and {color:Post Link}; to the actual HTML colour code by using colorpicker.com

-OR-

You could change {color:Post Text}; and {color:Post Link}; to your themes colour code (Example: {color:Sidebar Text} -or- {color:Text} etc etc)

It will take some time to work for beginners, it’s not an easy thing to do, it was even hard for me to get the hang of it! But I hope I helped and explained it as easy as I could because I know a lot of people were waiting for me to make a tutorial!

Pop up ask

1. Copy THIS CODE and paste it before </head> or after <head> in your theme code (use Control F to find it).

The url highlighted below is for the close button. You can change what it looks like by replacing the highlighted URL with another image URL. If you want the url of one of these close buttons, right click on the button you want and click ‘copy image url' and paste it into the code.

External image
External image
External image
External image
External image
External image
External image

External image

2. Paste THIS CODE before </style> or if you can’t find that, put it after <style> or <style type=“text/css”>

The codes highlighted below are the colours of the pop up box background and the border, you can change them if you like using this website.
 

3. Find your ask link. It can be tricky to find for some people, but you have to replace it with THIS CODE.
It might look like <a href=“/ask”>ask</a> or <a href=“/ask”>message</a> or <a href=“{text:Link one url}”>{text:Link one}</a>
Message me for help with step 3 of adding a pop up ask box if you can’t find it.
You can change 'MESSAGE’ to whatever you want the title of the link to be.

4. Paste THIS CODE after </body> in your theme code.
If you want to add an faq to your pop up ask box, find <center> and put your faq directly after it. Then, add <p> directly after your faq.


Please 'like’ this tutorial if it was helpful! x

Adding a cool whole page faded background to a pop up box

Here are the instructions for making a pop up box

Find the #fade css code.
(you can do this by press ctrl+f and searching “#fade”, make sure you are looking at the css code and not java script)

Now look for the background: #fcf; code

Now replace the #fcf; or hex code with the code below,
Don’t forget to include your own image url of the background of your choice

	background: url(YOURIMAGEURL); /*--Other Stuff Background Color--*/
    background-size: 100%; 100%;
3

THEME 5 - Special. by ILOVEPACKSS

RULES
Like if use;
Do NOT repost or claim as your own;
Do NOT use as base;
Do NOT remove the credit;
You can edit, but just for your personal use!


FEATURES
240X670px sidebar image;
500px posts;
One column;
5 custom links;
Pop Up Links;
Pop Up Ask;
Tooltip;
Tiny Cursor option;
Appearance.

preview - code

don’t forget to change (YOURURL) for your url, otherwise the ask won’t work!

POP UP ASK+FAQ& LINKS~

1. Copy and paste this code under <head> Tag.

2.Copy and paste this code under <style type=”text/css”> tags.

3. Paste this code under </body> tag.

4. Paste this code where you want your ask link to be.

*STOP HERE IF YOU ONLY WANT POP UP ASK IF YOU WANT THE FAQ CONTINUE*

FOR THE FAQ ALL YOU HAVE TO DO IS THIS.

*STOP HERE IF YOU ONLY WANT THE POP ASK+FAQ CONTINUE IF YOU WANT POP UP LINKS*

1.PASTE THIS CODE BEFORE </boby> TAG.

PASTE THIS CODE UNDER THE ASK POP UP LINK.

.

*AND THAT’S IT U CAN CHANGE THE BORDER STYLE AND STUFF * 

IN THE SEND THE POP ASK AND LINK SHOULD LOOK LIKE THIS

*YOU CAN CHANGE THE COLOUR,BORDER STYLE,CLOSE BUTTON,BACKGROUND*

theme 6 | bitter and sick

preview | code

  • basecode by hawtorns
  • sidebar 240x240
  • posts 500px
  • four custom links
  • regular cursor
  • updates tab (instructions to remove and customize within the coding)
  • pop up ask (instructions to remove and customize within the coding)
  • IMPORTANT: unless you are going to remove the popup ask you must scroll to the bottom of the coding and add in your URL where it is indicated

please like or reblog if using

CM@$
live preview | code

–theme features—

2 columns
250px photos
show links
change text/title/link/hover color
change text/title/link font size
optional fade on images
endless scroll
back to top button
banner and sidebar
change background/image color
italic upon hover
show title
fixed follow/dashboard button
optional tiny black arrow cursor
add two custom link
pop-up ask box
enable field box around links
enable/change border color

pop up links

its easier if you already have the pop up ask installed in your html, so if you don’t. HERE IS THE TUTORIAL

the background and close button will be the same for all the pop ups 


once you have installed the pop ups and everything form the tutorial then follow these steps: 

  • so you notice in your pop up ask link it looks like this right:                          <a href=“#?w=500” rel=“02” class=“poplight”>ask </a>
  • so what you’re gonna do it, use that same code but different number because that number  "02" is for the ask link so you’re gonna use a different number for the pop up  links one .you can use any other number i.e.: “03” or “04” dosent matter , pick any number . 
  • but im gonna use “03” so its easier 
  • now add this code [with the number you chose] above the </body> tag i your html and add ’ </div> under it and
  • so this is how it looks: [supposed to look like]
  • So click HERE for the code [again]
  • NOWW add this code wherever you want your links code to be 
  • so make sure the number is the same: “03" 
  • example: 

  • thats it, i tried to explain it in details, hope you understand :) x

A VERY LATE RESPONSE TO @askponyaiko‘s PART OF THE ART TRADE WE DID. Thank you soo much for being patient with me, I was super busy at the time. Well here you go anyway, I hope you enjoy! ʚ♡⃛ɞ(ू•ᴗ•ू❁)