More from the web

Monday 29 June 2015

How to Position a Blogger Site Header

You’ve uploaded your Blogger header on the Layout page but it’s aligned to the left. You want it centered horizontally over the content section of your blog instead.
Here is how to easily do that!

1. In Blogger, go to Template > Customize

2. Click on the Advanced tab then scroll to the bottom of the second menu and choose Add CSS.

3. Copy and paste this code into the text box (click then press CTRL + C to copy, then CTRL + V to paste):

#header-inner {text-align:center !important;} #header-inner img {margin: 0 auto !important;}

But of course there are other options you can select for the header in blogger, namely:


Option A:  If you used “INSTEAD OF TITLE AND DESCRIPTION“ option:

With this option the image was added as a <img> HTML element. Use these code snippets to align the element.

To Center:
#header-inner img {margin: 0 auto !important;} #header-inner {text-align:center !important;}

To Align Right:
#header-inner img {margin: 0 auto 0 300px;}
The ‘300’ number can be adjusted higher or lower to move your image left or right.

To Align Vertically:

#header-inner img {padding-top: 50px ;}
The ’50’ number can be adjusted higher or lower to move your image up or down. This code snippet can be used in conjunction with the 2 above.

Option B:   If you used “BEHIND TITLE AND DESCRIPTION“ option:

When you choose this option, Blogger added your header image as a background to the header.  To align it you need to add one of the follow snippets of code:

To Center:
#header-inner {background-position: center !important; width: 100% !important;}

To Align Right:
#header-inner {background-position: right !important; width: 100% !important;}

If you would like to Line Up your Header Text (Title & Description) then use of one these snippet codes: These codes will work with text-only header and the text in “Behind Title & Description” image placement option.

To Center:
#header-inner {text-align: center ;}

To Align Right:
#header-inner {text-align: right ;}

To Align Vertically:(apply top padding)
.titlewrapper {padding-top: 50px  !important;}
The ’50’ number can be adjusted higher or lower to move your image up or down. This code snippet can be used in conjunction with the 2 above.  Also, to adjust the Description use .descriptionwrapper
Line Up Image & Text Side by Side

Use one of these snippets if you want to split up your header into 2 parts positioned side by side, an image and text: These codes will work with the “Behind Title & Description” image placement option.

To Place Image on Left & Text on Right:
#header-inner {background-position: left !important; width: 100% !important;} .titlewrapper, .descriptionwrapper {padding-left: 100px !important;}
Increase left padding to push away texts to the right of the image header

To Place Text on Left & Image on Right:
#header-inner {background-position: right !important; width: 100% !important;} .titlewrapper, .descriptionwrapper {padding-right: 100px !important;}
Increase right padding to push away texts to the left of the image header.

Saturday 27 June 2015

Raspberry Pi Torrent Downloader

we’re going to install Transmission, which is lightweight and has a nice web GUI.

First install the transmission daemon
sudo apt-get install transmission-daemon

After it's finished installing we are going to stop the daemon so that we can do some configurations
sudo /etc/init.d/transmission-daemon stop

Edit the following settings file
sudo nano /etc/transmission-daemon/settings.json

Change “rpc-authentication-required” to false; change “rpc-whitelist” to include your local subnet – for example:
"rpc-whitelist": ",10.0.1.*",

Add or adjust the following if already present:
"download-dir": "/mnt/torrents",
"watch-dir": "\/mnt\/torrents\/",
"watch-dir-enabled": true,
"umask": 2,

Next, edit the daemon startup file itself to deal with some permission problems.
sudo nano /etc/init.d/transmission-daemon
Change the USER=transmission-daemon to USER=root.

Reload the daemon.
sudo service transmission-daemon reload

You should be able to access the web interface from
http://raspberrypi.address:9091/transmission/web/ or http://raspberrypi.address:9091

Just in case it prompts you for a user name / password try the following:
transmission for both username and password

A nice addition to store your torrents or just for better performance of the Pi is to use a class 10
memory card such as this  click on image to view

Thursday 25 June 2015

Creating a contact page in Blogger

This is a nice addition to have your 
blog look more like a standard web site.

Having the contact page separated helps
to keep the information nicely compartmentalized.

Firstly create a "Page"

Then insert the following code into your Page while viewing in HTML view

var blogId = '=6299745683323777241';
//this number should be edited.
//The below message 5 Strings can also be edited
var contactFormMessageSendingMsg ='Sending...';
var contactFormMessageSentMsg = 'Your message has been sent.';
var contactFormMessageNotSentMsg = 'Message could not be sent. Please try again later.';
var contactFormEmptyMessageMsg ='Message field cannot be empty.';
var contactFormInvalidEmailMsg = 'A valid email is required.'

var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
new _WidgetInfo('ContactForm1', 'sidebar', null, 
{'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 
'contactFormMessageSentMsg': contactFormMessageSentMsg , 
'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg ,
'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 
'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 
'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 
'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 
'contactFormSendMsg': 'Send', 'submitUrl': ''}, 
return true;
<form name='contact-form'>
<div>Your Name : </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30'
 type='text' value=''/>
<div>Your Email: <em>(required)</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' 
type='text' value=''/>
<div>Your Message: <em>(required)</em></div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' 
name='email-message' rows='5'></textarea>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' 
type='button' value='Send' onclick="sendEmailMsg()"/>
<div style='text-align: center; max-width: 450px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>

Change the number highlighted in red to the id of your blog.
This id can be found in the url of your blog when viewing 

Webmin Setup On Raspberry Pi

Webmin essentially gives you a web interface of most of the functions you would normally need to carry out using SSH on your server.

First download the setup file

pi@raspberrypi/$ wget

The file is a gzipped file so we can use the gunzip command to get to the tar.

pi@raspberrypi/$ gunzip webmin-1.580.tar.gz

Now we have our tar we need to extract the contents

pi@raspberrypi/$ tar xf webmin-1.580.tar

Create a folder in my /var/www to hold webmin.

pi@raspberrypi/$ sudo mkdir /var/www/webmin

Now we can run the setup script.

pi@raspberrypi/$ cd webmin-1.580

pi@raspberrypi/webmin-1.580$ sudo ./ /var/www/webmin

You will have a number of options as the setup script runs but the defaults are okay,

the following you will have to enter a password

Web server port (default 10000):
Login name (default admin):
Login password:
Password again:
Use SSL (y/n): y
Start Webmin at boot time (y/n): y

You can access the webmin page using:


Replacing locahost with either your domain or ip address.

Once logged into the web interface you can update the version if required.