Scrippets for Blogger
Blogger doesn't allow conventional plugins, so it's a little more complicated to get Scrippets working on Blogger than other systems. But it should only take a few minutes.
1. Open your blog in a separate window or tab.
You'll need to switch back and forth between these instructions and your blog a few times for copy-and-pasting.
2. Open the HTML editing tab, and save your current template.
From your blog's front page, click on "Customize." From the "Layout" tab, choose "Edit HTML."
Click "Download Full Template." This is your backup in case something goes wrong.
3. Scroll down until you find the line <body>.
It's pretty close to the bottom in most themes. You need to change this to the following line. (Copy and paste works well.)
<body onload='convert();'>
4. Copy the following JavaScript code.
<script type='text/javascript'>
/* <![CDATA[ */
function scrippetize(text) {
var scrippet_pattern_string = '[\\[<]scrippet[\\]>]([^]*?)[\\[<]\\/scrippet[\\]>]';
var scrippet_pattern = new RegExp(scrippet_pattern_string, "i");
var scrippet_pattern_g = new RegExp(scrippet_pattern_string, "gi");
while (matches = scrippet_pattern_g.exec(text)) {
var output = '<div class="scrippet">' + "\r\n" +
matches[1].replace(/<[^>]*>/g, '\n') /* remove any tags Wordpress or Markdown may dump into the scrippet */
.replace(/\r/g, '') /* some basic character replacements to deal with bugs that Wordpress/Markdown introduce */
.replace(/&/g, '&')
.replace(/\.{3}|É/g, '...')
.replace(/\-{2}|Ñ|Ð/g, '--')
.replace(/(INT|EXT|EST)([\.\-\s]+?)(.+?)([A-Za-z0-9\)\s\.])\n/g, '<p class="sceneheader">$1$2$3$4</p>' + "\r\n")
.replace(/\n([^<>\na-z]*?:|FADE TO BLACK\.|FADE OUT\.|CUT TO BLACK\.)[\s]??\n/g, '<p class="transition">$1</p>' + "\r\n")
.replace(/\n([^<>\n]*?:[^\n]+?)\n/g, '<p class="action">$1</p>' + "\r\n")
.replace(/\n{2}(([^a-z\n\:]+?[\.\?\,\s\!]*?)\n{2}){1,2}/g, "\n" + '<p class="action">$2</p>' + "\r\n")
.replace(/\n([^<>a-z\s][^a-z:\!\?]*?[^a-z\(\.\!\?:,][\s]??)\n/g, '<p class="character">$1</p>')
.replace(/(\([^<>]*?\)[\s]??)\n/g, '<p class="parenthetical">$1</p>')
.replace(/(<p class="character">.*<\/p>|<p class="parenthetical">.*<\/p>)\n{0,1}(.+?)\n/g, '$1<p class="dialogue">$2</p>' + "\r\n")
.replace(/([^<>]*?)\n/g, '<p class="action">$1</p>' + "\r\n")
.replace(/<p class="action">[\n\s]*?<\/p>/g, '')
.replace(/\n/g, '')
+ '\r\n</div>';
text = text.replace(scrippet_pattern, output);
}
return text;
}
function convert() {
var text = document.body.innerHTML;
document.body.innerHTML = scrippetize(text);
}
/* ]]> */
</script>
5. Paste this just before the </head>.
This should be a few lines up from where you just changed <body>. Before:
After:
5. Copy the following CSS.
/*
Scrippet.css
Scrippet is a CSS template designed for including short sections of screenplay-formatted material in blog posts.
Originally developed by John August - johnaugust.com
Last modified 8/21/08
*/
div.scrippet {
width: 400px;
background: #fffffc;
color: #000000;
border: 1px solid #333;
padding: 5px 14px 15px 14px !important;
margin-bottom: 16px !important;
margin-left: 20px !important;
}
.scrippet p {
font: 12px/14px Courier, "Courier New", monospace !important;
text-align: left !important;
letter-spacing: 0 !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.sceneheader,
.action,
.character {
padding-top: 1.5ex !important;
}
.action {
padding-right: 5% !important;
font-size: 12px !important;
line-height: 14px !important;
}
.character {
padding-left: 40% !important;
}
.dialogue {
padding-left: 20% !important;
padding-right: 20% !important;
}
.parenthetical {
padding-left: 32% !important;
padding-right: 30% !important;
}
.dialogue + .parenthetical {
padding-bottom: 0 !important;
}
.transition {
padding-top: 3ex !important;
padding-left: 65% !important;
padding-bottom: 1.5ex !important;
}
7. Paste this at the end of the theme's CSS.
This should be a few lines up from where you just added the JavaScript. You're looking for a series of descriptions about page elements. If you find #footer, you're in the right ballpark. You want to make sure that you're pasting before the line that reads "]]<b:skin>".
Before:
After pasting:
8. Click "Save Template."
You should now be set to use scrippets. Try it in a new post. (NOTE: You need to use the "Edit HTML" tab rather than the "Compose" tab -- the latter one adds gibberish that can mess up your scrippet.)
If something's not working right, please join us in the Forums. If something gets messed up, you can always revert to the original template you downloaded in Step 2.