it was requested that i release the above popup i used previously on this blog - it’s just a hiatus message that will fade away on click so people can browse your blog as normal after seeing it. instructions for installation are under the cut, you don’t need to credit me if you use this!
finally, paste the following under <body> - this is where you can edit the content of your popup, if you like:
{block:HomePage} <!--so it only shows up on the home page of your blog - delete this and the corresponding {/block:HomePage} below if you want it to show up on other pages as well-->
<div class="popup"><div class="fade"></div>
<div class="pop"><!--start editing-->
<b>hiatus</b>
<br> click anywhere to view posts<!--end editing-->
</div>
</div>
{/block:HomePage}
See the bit that says popUp(true);? That is where you change between a fade layer and fading elements out. If you want a fade layer, leave it as it is.
If you want to fade elements out you will need to replace it with a string containing the elements id’s and or classes you want to fade out, separated by commas.
For my themes, to fade out the posts when you open the popup, you will need to change the line to popUp('#wrapper');.
Say you want to fade out the posts and an updates tab. Then you would do this popup('#wrapper, #updates');.
Part 2: The CSS
Next you will need to add the CSS to your blog. This is near identical to the original popup tutorial, but I’ve added an entry animation. This goes above </style>.
The 500 is the width of the popup. The rel will correspond to the id of the popup box you make.
ALTERNATIVELY
If you have space in the customise menu to add your own links you can add the following code like so
#?w=500" rel="popup_example" class="poplight
Step 4: HTML Part 2 - The popup
Now for the final part, you need to add this above </body>.
<div id="popup_example" class="popup_block"> whatever you want goes here! </div>
See how it has popup_example as the id? This is related to the link as we saw above. For every new popup you need to have a different id. This is how the link talks to the popup and tells it to open up. You could have popup_ask and popup_navi etc.
Now all you do is put whatever layout you want where I have put “whatever you want goes here!” and you’re done!
Please like and / or reblog this if you found it helpful!
This is a quick tutorial that will show you how to make a basic popup. It’s entirely copy and paste apart from where you actually input your content so it shouldn’t be too hard to follow! There are a ton of different ways you can create a popup but this is the method I like to use.
Credit isn’t required but please like or reblog this post if you find this useful. You can access the demo and the tutorial here.
If you click on him, it'll take you to this blog and there are a whole bunch of other people there that you can put on your blog! (The instructions are there for them, so don't worry about that)
Or idk, if you meant position wise, then I changed the html around a little bit, so instead of