-
Notifications
You must be signed in to change notification settings - Fork 1
How to Install ap_shortcodes.js on ( insert platform here)
This page will list out the various ways to install ap_shortcodes.js on various platforms.
The first step is to take a backup of your theme, and then make a copy of that elsewhere, say an external drive, Dropbox, or Google Drive, and leave that copy alone, "pristine". To be doubly safe, you could even write-protect it (aka "read only"). You might need it to restore your theme to its current settings if anything goes haywire.
Do this by logging into Blogger and click on Theme > Backup/Restore (button at top right). A modal window will appear where you'll click the Download button and receive an XML file backup of your theme. To restore your theme, visit this page again and upload your backup file.
There's several ways to do this. You can edit a copy of the XML theme file you downloaded as backup and then go back to the Backup/Restore button and upload it. Or, go into the Theme settings and click the Edit HTML button.
To use ap_shortcodes.js on Blogger, you'll want to add the below tags in the <head> of your HTML, so locate that in your theme. Be sure you're not adding it in between some conditional statements like <b:if cond="blah blah">, or it may not load properly on every page (or the desktop vs mobile sites).
...blahblahblahblah...
<title><data:blog.pageTitle/></title>
<script src="https://cdn.rawgit.com/sdsalyer/ap_shortcodes.js/master/js/shortcode.js"></script>
<script src="https://cdn.rawgit.com/sdsalyer/ap_shortcodes.js/master/js/ap_shortcodes.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/sdsalyer/ap_shortcodes.js/master/css/ap_shortcodes.css">
<b:skin ...blahblahblah....You'll be using a 3rd party CDN service that links directly to raw files on GitHub.
You can simply download the .js and .css files from the project site, upload them to your web server, and paste the same code into your <head> tag, updating the src and href tags appropriately.
Alternatively, you can paste the contents of each file directly into the <head> between <script> and <style> tags. One note, however, is that with Blogger, you'll need to use commented-out CDATA tags inside these tags (for the CSS you could instead add it in the Advanced Theme settings menu). The reason? Your theme is actually XML and the JavaScript syntax "breaks" the XML.
...blahblahblahblah...
<title><data:blog.pageTitle/></title>
<script>
// <[[CDATA
// all your javascript here
// ]]>
</script>
<style>
// <[[CDATA
/* all your styles here */
// ]]>
</style>
<b:skin ...blahblahblah....It came to my attention that the shortcodes were not being translated in the mobile version of my theme. This fix may not be appropriate for all themes, but in my case it worked. Go back to your Theme settings page and click the "gear" icon below the mobile site preview, then select Custom in the dropdown and save.
For me, the look of my mobile site remained unchanged, but the JavaScript was now being executed. It may be that some of those <b:if tags can be used to specify that the additions to the <head> are loaded in the mobile theme without changing this setting.
At this point, you can be done and just start using the shortcodes in your actual-play posts. Or:
- You can override the CSS with local styles in your
<head>(below the<link>tag we pasted in). - If you aren't using the CDN links:
- You can modify the CSS in those files
- You can modify the JavaScript to change the HTML that's inserted
- Create your own shortcodes (and share them back here, of course)!