Resources blog. Angel, 14, China. I code, I write, and I sleep a lot. That's about it. Here, you'll find resources of all kinds, from writing to coding to photoshop! I hope you'll find something that will be useful for you.
SLIDE MENU TUTORIAL :::: BY TRENZATHEMES :::: LEVEL :::: INTERMEDIATE :::: RULES :::: NO REPASTING // NO CLAIMING AS YOUR OWN // LINK TO THE TUTORIAL WHEN ASKED WOULD BE COOL. ::::
I finally decided to post how I code my slide menus. I use them for asks, theme rules, update tabs, etc. Pretty much anything you want to put content into! I use Codrops tutorial and this is how I get it to work with tumblr. :D
This tutorial will cover how to make themes with more than one column in which the posts are nested (aka. Grid theme), in particular, themes in which the columns are in only one specified width.
I have not yet made a theme in which the column sizes change thus I do not how to do it, but the script are the same, you probably just need to add extra features to the script so perhaps you can figure it out on your own.
Anyways, let’s get started.
The Concept
We are going to use one div layer to wrap ALL the content, and then another div layer to wrap each post. Then, we use the CSS element, float:left; so that each post is stacked next to each other. The Masonry script will be used so that the post becomes nested. So we’re going to seperate this tutorial into three main ideas:
The HTML: set-up
The CSS: making things stack into columns
The script: incorporating masonry to make it nester
The HTML
In my tutorial series, I mentioned there were two ways to set up the posts block, one with tables and another with div layers. However, in those lessons, I also mentioned to not put div layers around the post blocks (only inside) since it interrupts with the infinite scrolling script by cody sherman.
Well, scrap all that. It won’t matter since we’re not using the same infinite scrolling script. We’ll be working with div layers and you’ll need two. One will be outside the post block, to wrap around all posts, and the other, will be for each individual post (inside the post block). Similar to this…
Please, please, PLEASE use your own wrapper (div layer) IDs.
The CSS
In the CSS, you want to make the content wrapper be big in accordance to the number of columns you want and the size of your columns. For example, you plan to have 400px wide posts (container wrapper), and want two columns, you would need at last 800px width for your content wrapper. Make sure you take into consideration, the margin and padding of your layers (ie. if you had 5px margins, your content wrapper should be about 820 or more,). Just trial and error until you get the right look!
Next, you need to make sure your container wrapper is floated to the left:
.container{
float:left;
}
The Script
Next, you are going to incorporate the script so that it displays the way you want it to.
First, you need to include to external script links (place codings anywhere between <head> and </head>. One link is to jquery and the other is to the masonry script.
The important parts are bolded, replace with the names of your wrappers/div layers.
Ta-da! You’re basically done. This all you need for masonry to work. Simple, eh? Though I think most people are familiar with multi-columns in combination with infinite scrolling, but the above code DOES NOT include infinite scrolling, so you will need to add in pagination codes (explained here).
There are many other options, code that customizes the masonry, you may include (add after itemSelector : ‘.container’,) as well as other methods, effects that you can add to masonry, such as infinite scrolling which I will explain here.
Masonry with Infinite Scrolling
First, you need to add a link to a masonry-specific infinite scrolling script.
For some reason not specified on the site, it is necessary to include all those options (buffer, loading text and images, next page selectors) for infinite scrolling to work. As well, additional HTML (for the next/previous pagination codes) is needed:
Now, because everyone has different screen resolutions, people with bigger screens meet a problem. Sometimes, the content at first will not reach the bottom of the window on bigger screens, and since infinite scrolling relies on the whole scroll aspect, the next page content will not load (since no scrolling is in effect).
To prevent this, I add an extra div layer with no content inside the div layer…
<div id ="over"></div>
And specify a certain height in the CSS so that it will stretch the screen.
So in the end, you will have the following for your masonry with infinite scrolling codes:
infinite scrolling script
jquery script
masonry script
basic masonry initial codes (with infinite scrolling method and options)
navigation HTML
navigation CSS
The End
I think I’ve covered all the basics. If you have any questions, feel free to ask, though I did not develop this script nor am I too familiar with it, so I can’t guarantee thorough answers. My advice is to TRIAL AND ERROR! Good luck, and happy coding!
UPDATED WITH INFINITE SCROLL FIXES. I am so silly, I always make so many stupid small mistakes that really shouldn’t happen in the first place.
The reason why the codes weren’t working was because I forgot to include the blocks that renders the tumblr variables for the pagination (ex: {block:Pagination}, {block:NextPage} etc etc).
Without it, tumblr won’t read for the following pages, and thus, infinite scrolling won’t work because what the infinite scrolling script does is uploads the codes for the next page. *SMACKS SELF* That was silly.
Copy all of the above code, and paste it above the </body> tag in your code (tip: use ctrl+f on your keyboard to find </body>). You may need to refresh the page a couple times to see the changes, and may need also retype all the quotation marks (if they appear slanted). The cool thing about this code is that the snow stays for a little while once it reaches the bottom of your blog, and then “melts” so it doesn’t start blocking the page like many other codes. Enjoy! I found the original code here.
ATTENTION: If you have an autoplay, if you post any triggering/NSFW content, if you are going on hiatus, or simply need to alert your followers of something, this post is for you.
A lot of people are triggered by sudden noises that they have no idea were coming, or just plain out not being ready for a sound or music. I’ve found a code for your tumblr that you can set to display your own message. I think it’d be really helpful if you have followers afraid of things that will suddenly startle them. You can find the code here. You can also use this for your own alert. Ex: “I am on hiatus!” “This blog contains ____.” This is good for many triggers. Simply copy and paste the code below your <head> and insert your own message into ‘YOUR MESSAGE HERE’. This has been a PSA. Please reblog this so people will know how to make their tumblrs a little safer. It’s not a must, but it’s a nice addition to help your followers feel safer on your blog.
Photoshop tutorials I did this past week for class, I made a list of the links for the tutorials so you could do them yourself if you like the way they look.
I’ve been trying to find the style of Music Player, I had before. Now, I am going to share my experiment what I’ve done. As you can see, this is more complicated and is relatively different from my music tab, earlier. Just try to adjust the position of the music player if the position is not fit with your taste!
And then, put this code between <style type=”text/css”> and </style>
#music-rounded {
position:fixed;
left:75px;
top:150px;
width:50px;
height:50px;
background-color:#000;
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px;
opacity:1;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#music-rounded img {
margin-top:17px;
margin-left:-2px;
}
#music-rounded:hover .music-player-embed {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
margin-top:-20px;
opacity:1;
background-color:#000;
color:#fff;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.music-border {
position:absolute;
margin-top:-42px;
margin-left:-15px;
border:10px solid rgba(0, 0, 0, 0.4);
width:60px;
height:59px;
background-color:none;
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.music-border:hover {
margin-top:-48px;
margin-left:-20px;
border:15px solid rgba(0, 0, 0, 0.4);
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
transition: all 0.7s ease;
-webkit-transform:rotateY(360deg);
-moz-transform:rotateY(360deg);
-o-transform: rotateY(360deg);
}
.music-player-embed {
font-family:Consolas;
font-size:11px;
position:absolute;
min-width:100px;
background-color:#FFF;
padding:9px;
margin-left:90px;
margin-top:0px;
overflow:hidden;
opacity:0;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
transition: all 0.7s ease;
}
And, WA-LA! I hope you all like it! I was trying to make it with my sincerity from my knowledge of HTML and CSS—any form of Credit, Like and Reblog are appreciated!
Paste this script underneath INSTALL JQUERY in the HTML document.
STEP 003 | HTML
Underneath TOPBAR in the HTML document, type the div class for the topbar, as well as the links that you want in the topbar (links are optional, can be replaced with a title or whatever).
You can copy and paste the example below or type your own:
200px in top:200px can be changed to any number (e.g. 250, 100, 50, 500).
You are also going to need to add another class, I will explain why later on in this tutorial. Name the div class whatever you want but you must include the following…
position:fixed;
top:0;
Example
.blazeit{ position:fixed; top:0; }
STEP 005 | JQUERY
This is the final step, not much to do except for copy and paste underneath JQUERY SCRIPT (some minor editing for those that have different div id’s).
