Saturday, 27 October 2012

autohotkey automating common (blogger) tasks

Sometimes you will hit a dead or end or one of your blogs may malfunction so that you cannot update it.

It's usually best to do something different but if you can't stand the idea of going outside and the TV guide is saying, “No”, then you can do something else to add content to a blog and keep it live.

Yesterday was such a dismal day and I stumbled upon autohotkey

Once you have installed the software it will automatically run at Windows startup and then you can write and call ahk scripts, either at startup or with a mouse click.

Here's an example of an ahk script - the classes in the html relate to my personal modifications to the blogger stylesheet, substitue your own - the semi-colon (;) indicates a comment line:

#NoEnv ; Recommended for performance and compatibility with future AutoHotkey releases.
#Warn ; Recommended for catching common errors. SendMode Input ; Recommended for new scripts due to its superior speed and reliability.
SetWorkingDir %A_ScriptDir% ; Ensures a consistent starting directory.

^!':: ; ctrl alt ' calls this
Send ‘’
SendInput {left}{left}{left}{left}{left}{left}{left}
return

^!2:: ; ctrl alt 2 calls this
Send “”
SendInput {left}{left}{left}{left}{left}{left}{left}
return

^!u:: ; ctrl alt u calls this
Send Thanks for following, Alex
return

^!f:: ; ctrl alt f calls this
Run "C:\Program Files\Mozilla Firefox\firefox.exe" "uk.yahoo.com" "www.blogger.com" "twitter.com"
return

^!p:: ; ctrl alt p calls this
Send <p>
Send `n`n
Send </p>
SendInput {up}
return

^!n:: ; ctrl alt n calls this
Send <p class="note">`n`n</p><br /> SendInput {up}
return

^!a:: ; ctrl alt a calls this Send <a href="">`n<acronym title="">`n</acronym></a>
SendInput {up}{up}{left}{left} return

^!d:: ; ctrl alt d calls this
Send <div class="note">`n
Send <p></p>`n`n</p>`n</div>
SendInput {up}{up} return

^!r:: ; ctrl alt r calls this
Send <br />
return

^!b:: ; ctrl alt b calls this
Send <b></b>
SendInput {left}{left}{left}{left}
return

^!i:: ; ctrl alt i calls this
Send <i></i>
SendInput {left}{left}{left}{left}
return

N.B. The ` is not the same as the apostrophe character so if in doubt copy then paste it here:
`

; Usually when you hit a dead end it's best to
Send zzzzzzzz
Wait 10000000000
Send TryAgain

note in order to get this working you need to install autohotkeys and put this keys.afk file somewhere on your desktop - then activate it with a doubleclick - it will appear in your taskbar and after that you're good to go.

Friday, 26 October 2012

blogger template building 4

If you manually edit the html of your template from the dashboard you will come across entries like these:

<Group description="Backgrounds" selector=".body-fauxcolumns-outer"> <Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#fffaf0"/> <Variable name="content.background.color" description="Main Background" type="color" default="#ffffff" value="#fffaf0"/> <Variable name="header.background.color" description="Header Background" type="color" default="transparent" value="#fffaf0"/> </Group>

The above are variable declarations which correspond to entries later in the template stylesheet declaration such as these:

.Header h1 { font: $(header.font); color: $(header.text.color); text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2); }

In order to glue all the style changes together I will need to edit various parts of both of the entries. for new values, i.e., a background-image for my heading I can choose to assign a value to the group description then call that using the $ sign or code them directly into the stylesheet portion of the template. I choose the latter option because it seems easier, so, for example:

.Header h1 { font: $(header.font); color: $(header.text.color); text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2); background-position: left top; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj5NtHrBZYcLKm7Y4MALvMh9am3FXPzFij9fVt-Az4lhTYriumLCIqnvTDL8dcKT044VNcSc6-xDsj4dl7QcA64i-27O8ePbwBWwkA3x8OoSSwa0410Mu4CbDwZfX2dm67OuG19Wwjkzc/s1600/light-header-lg.jpg); text-align: left; background-repeat: no-repeat; background-size: cover; }

Just keep repeating like this as you design your template. I will continue to blog here as I make additions to my main blog, this design blog is just a subsidiary of that.

blogger template building 3 (ie8 searchqu)

A bit of pain today, booted up internet explorer 8 and found something had insidiously installed the searchqu toolbar so I checked the computer for viruses using avg free and malware bytes anti-malware - searchqu is technically neither malware or a virus, just a nuisance.

Removed searchqu using steps outlined in Malware Removal Instructions.

Checked appearance in internet explorer 8:, it looks awful because Internet explorer doesn't support the background-size: cover CSS3 property:

screenshot of blog in internet explorer 8

Replacement images:

decorative image, detail of dollar bill
decorative fractal image

<div class="illuminati" style="padding:1em;width:60%;margin-left:auto;margin-right:auto;text-align:left;background-color:#fffaf0;clear:left;margin-top:1em;margin-bottom:1em;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKvcMvqvaGTHQu81ccW-ehAgAB74ysy9XeDJGy3FSw_wo_wFdqDQ2vsXG6fVpOp-dHvbQTMhAijEDJBv3BBPGAc01ndGC8hdgNY2u3K4pd5NLukhyZth4r777x_Qnr0VfiA04_HP4RcFc/s320/meth-lab-lg.jpg);background-repeat:no-repeat;background-size:cover;background-position:center;">

Have also fixed the background-color (to match intended page background) and the alignment of the image in the code ("center") so that it should look better on browsers which don't support background-size property, e.g., internet explorer 8.

This is a lighter, larger decorative link header

<a class="decorative" href="http://www.google.co.uk" style="text-align:left; background-color: #fffaf0; background-position: left top; font-type: 24px Georgia, Utopia, 'Palatino Linotype', Palatino, serif; background-color: #dcdcdc; clear:left;float:left;margin-right:1em; margin-bottom:1em; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj5NtHrBZYcLKm7Y4MALvMh9am3FXPzFij9fVt-Az4lhTYriumLCIqnvTDL8dcKT044VNcSc6-xDsj4dl7QcA64i-27O8ePbwBWwkA3x8OoSSwa0410Mu4CbDwZfX2dm67OuG19Wwjkzc/s1600/light-header-lg.jpg); text-align:left; background-repeat: no-repeat; background-size: cover;">This is a lighter, larger decorative link header</a>

Now, I'll work on the blog title text:

Philosophical Reflections

<p class="title" style="font: normal normal 48px Georgia, Utopia, 'Palatino Linotype', Palatino, serif; color: #000000; background-color: #fffaf0; background-position: left top; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj5NtHrBZYcLKm7Y4MALvMh9am3FXPzFij9fVt-Az4lhTYriumLCIqnvTDL8dcKT044VNcSc6-xDsj4dl7QcA64i-27O8ePbwBWwkA3x8OoSSwa0410Mu4CbDwZfX2dm67OuG19Wwjkzc/s1600/light-header-lg.jpg); text-align: left; background-repeat: no-repeat; background-size: cover;">Philosophical Reflections</p>

Thursday, 25 October 2012

blogger template building 2

Upload image to get url:

decorative image

Upload image to get url:

detail of dollar bill reference image, Illuminati symbol

Test code:

This is a decorative link header

<a class="decorative" href="http://www.google.co.uk" style="text-align:left; background-color:rgb(220,220,220); font: 24px Georgia, Utopia, 'Palatino Linotype', Palatino, serif; background-color: #dcdcdc; margin-bottom:1em; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3aGVhByS2qFC2eT0Jah5CBQoR3wIlLxsbmJjHeVMMVosi5cOE0LH1X9W6uKhsI_vnxTJS4uCEtkK8eqNdacHaKHKm_HjqmbcPD4jV6qV7c8Rc-BmyeQcB9WuvO3DcnePcc0CvPFO4Ve4/s320/header.jpg); text-align:left; background-repeat: no-repeat; background-size: cover;">This is a decorative link header</a>

Poor contrast upload edit in GIMP (gimp opacity tutorial on youtube) and upload another:

lighter decorative image

This is a lighter decorative link header

Used in this post:

background-size css

css clear

css font

css background

css text

As well as pages mentioned in css template building 1

This is a normal paragraph

Wednesday, 19 September 2012

blogger template building 1

Here's some links va google for editing blogger CSS: goggle search: edit blogger CSS

The easiest way it to start with an acceptable standard template and customise it - got to "template" on your blog's dashboard - the click “adavanced” and then use the option “Add CSS”.

Add the following CSS code to your blogger template (for example):

.note
{
padding: .5em;
background-color: rgb(222,184,135);
color: rgb(0,0,0);
margin-top:10px;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
width:85%;
}
.note2
{
padding: .5em;
background-color: rgb(255,222,173);
color: rgb(0,0,0);
color: rgb(0,0,0);
margin-top:10px;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
width:85%;
}
.note3
{
padding: .5em;
background-color: rgb(220,220,220);
color: rgb(0,0,0);
color: rgb(0,0,0);
margin-top:10px;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
width:85%;
}

this is a note

this is a note2

this is a note3

Code used in this post and template:

To get my “follow RandomFutures” widget where it appears I actually manually edited my template - I pasted the code into the place where my template says: <div class='posts footer' thus:

<div class='post-footer'>
<p> <!-- Twitter follow button start -->
<a href="http://twitter.com/RandomFutures" class="twitter-follow-button"> Follow @RandomFutures</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </p> <!-- Twitter follow button end -->

As you get deeper into your editing you will want to make regular stable copies of your template but for now you can just revert to a standard template if you make a mistake first time out.

Important:
When making changes to your blogger template it's advisable to keep a working copy of old versions - see:
Digital K online - How to Backup your Blogger Template
google: Edit the HTML of your blog's layout
Chron.com: How to Customize CSS in Blogspot