Example
<script src="processing.js"></script>should become
<script src="processingjs.org/js/processing.min.js"></script>
Updated Solution
Saturday, November 29, 2014
Processing on Blogger
Lets say you have a digital maker space and your like "How do I spice up my header? I can't find any images that I like and a color is just to boring" Well I myself was in that place until I came across Processing. I came across it a few years ago when programing in Arduino. Its commonly references and the IDE that the Arduino IDE is based off of. Anyways I wanted to make a header that had a geometric triangle shape but I wanted to make them move so I use processing and a bit of Trig (whoever said cos() and sin() were useless never tired to make triangles move along circular paths) to make some moving triangles. There are five moving points that are used to draw three triangles. Once you have your processing sketch you can use it by taking advantage of processing.js. They turn processing sketches into javascript. You can follow these instructions on how to use it. The only problem that I ran into is blogger won't let me host files (If you know how PLEASE tell me in the comments). Solution: Steal from processing.js. They host the file you need on their server so that they can use it on their awesome website. So instead of linking to a file called processing.min.js, link to processingjs.org/js/processing.min.js.
Example
Updated Solution
Example
Updated Solution
Thursday, November 27, 2014
Sub Domain Happiness
So I'm really happy about having this blog now be a subdomain of peterfoxflick and no longer a subdomain of blogger. This quick tutorial is assuming that you already have a domain purchased from a provider. (I recommend Hover). All you have to do is go to Settings in blogger. From here you should see Publishing and Blog Address. Click on "+ Setup a 3rd party URL for your blog" and go ahead and enter in your new domain (subdomain.maindomain.com example make.peterfoxflick.com) and click save. Blogger will now give you two names and destinations that you need to add to your domain. Now all you need to do is add these to you domain name provider. Go to your domain name provider and navigated to edit your domain. Then you want to select DNS and add the two new names and destinations as CNAMEs. All you have to do is save in hover and then go back to blogger and click save again. This time it shouldn't give you an error code.
Bonus: How to set up Two Blogger Subdomain Names
If you try to set up two blogger subdomain names you might run into the same problem I did. Blogger will not give you the first error code with the two names and destinations that you need to add. Simple solution, enter a main-domain of a website you don't own (subdomain.gibberish.com example make.alskdjfl.com). Gibberish is amazing. Now you can proceed as before but remember to change the main-domain back to the domain you want in blogger before you click save (the second time).
Tuesday, November 25, 2014
How to Make Code Look Like Code in Blogger
Ok thats a mouth full. Heres another behind the scenes glimpse of this blog. To make my code snippets look like code all I do is change my view to HTML when I'm writing a blog post and add <pre> to the beginning of my code and </pre> to the end. This creates a good monospace code look.
Adding Fonts to Blogger
To add a font to blogger go ahead and find one from http://www.google.com/fonts. Once you have one follow their instruction to get a piece of code that looks like this
Go ahead and paste that code right under the <head> tag in your blogs html (Find it by going to Template then Edit HTML). Using control F really helps. Now find the group name of the font you want to change. Google has done a great job of naming them. I wanted to change my blog title so I found this chunk of code.
Go ahead and change the value from Crushed (or whatever font name it has) to be your new font name. In my case it looks like this.
You'll notice that I also have FreeSans and Sans-Serif added in there. These are backup fonts. In case Raleway doesn't load it will use these fonts to still try and maintain the general look of my blog.
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'/>
Go ahead and paste that code right under the <head> tag in your blogs html (Find it by going to Template then Edit HTML). Using control F really helps. Now find the group name of the font you want to change. Google has done a great job of naming them. I wanted to change my blog title so I found this chunk of code.
<Group description="Blog Title" selector=".header h1">
<Variable name="header.font" description="Font" type="font"
default="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 80px Crushed"/>
Go ahead and change the value from Crushed (or whatever font name it has) to be your new font name. In my case it looks like this.
default="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 80px Raleway, FreeSans, sans-serif"/>
You'll notice that I also have FreeSans and Sans-Serif added in there. These are backup fonts. In case Raleway doesn't load it will use these fonts to still try and maintain the general look of my blog.
Hopes this helps. Comment if you have any questions.... or comments
Program ATtiny with Arduino IDE
Monday, November 24, 2014
Javascript Countdown
Heres some code for a countdown that I'm using for my Missionary blog. I stole most/all of the code from Mindgrader, and only made a few changes (like only showing days and adding the whole days till I report to the MTC). You can use this in a blogger sidebar gadget by just adding a html/javascript gadget.
<h1><span id="countdown"></span></h1>Days till I report to the MTC
<script>
var target_date = new Date("Aug 15, 2015").getTime();
// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countdown = document.getElementById("countdown");
// update the tag with id "countdown" every 1 second
setInterval(function () {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
// do some time calculations
days = parseInt(seconds_left / 86400);
// format countdown string + set tag value
countdown.innerHTML = days ;
}, 1000);
</script>
It should look like this Days till I report to the MTC
Behind the Scenes
A peak behind the scenes of this blog, Im currently working on how it looks. Here are some of my references.
Profile image size change
Change the social media icons
http://www.theblogdecorator.com/2013/02/tutorial-how-to-change-bloggers-share.html
Change the Favicon by creating one at favicon.cc
Tabs Background color (My own personal code)
.tabs-outer {
background-color:$(tabs.background.color);
}
http://www.theblogdecorator.com/2013/02/tutorial-how-to-change-bloggers-share.html
Change the Favicon by creating one at favicon.cc
Tabs Background color (My own personal code)
.tabs-outer {
background-color:$(tabs.background.color);
}
Subscribe to:
Posts (Atom)