Adding additional header gadgets - link
Centering 'page list' links - link
Make a static home page without blog posts - link
Removing the ability to comment on posts link
Add double videos to your Footer
<table width="200" border="0">
<tr><td><iframe width="342" height="250" src="https://www.youtube.com/embed/sGbxmsDFVnE" frameborder="0" allowfullscreen></iframe></td>
<td><iframe width="342" height="250" src="https://www.youtube.com/embed/cfvEscEGWfI" frameborder="0" allowfullscreen></iframe></td>
</tr>
<tr>
<td>Click above to watch a recent PSA about my issue.</td>
<td>Click above to watch a recent PSA about my issue.</td>
</tr>
</table>
How to add rollover images
You will have to create artwork the correct size (in pixels) and upload them to an image hosting website online. Once you have the direct URL for each image, change the code below, seen in red.
How to remove subscribe to: Posts (Atom) link?
Find (CTRL + F) the following line and delete it.
<b:include data='feedLinks' name='feedLinksBody'/>
Add a 'DONATE' Form to the sidebar
Use HTML widget, paste in the below code.
<tr>
<td width="103"> </td>
<td width="103"><select name="select" id="select">
<option />£5
<option />£10
<option />£15
<option />£20
</select>
<input type="submit" name="button" id="button" value="Donate " />
<form id="form1" name="form1" method="post" action="">
<label for="select"></label>
</form></td>
<td width="81"> </td>
</tr>
Adding a slider
(code is at the bottom, its quite long)
Removing all the ugly icons below a post/page
Click 'Edit' in the bottom right of your 'Blog Post' window, under Layout.
Untick all the things you don't want.
Adding Twitter to Sidebar
Code to insert into an HTML widget to display your Twitter feed
<a class="twitter-timeline" data-height="300" href="https://twitter.com/YOURUSERNAME">Follow us!</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
Emoji keyboard
Emoji keyboard for embedding in tweets/statuses link
Uploading to Instagram from Desktop using Grambler
Download for Grambler - upload Instagram photos from your desktop
(ideal for behind the scenes photoshoots) link
Changing backgrounds
Adding a custom banner
Under layout, select Edit under the Header section.
Browse to your file (created in Photoshop or Fireworks)
Save Arrangement and preview...
Adding your Instagram Account to the sidebar...
Log into your charity Instagram account using https://lightwidget.com/
Adding a Slider
Copy and paste the below into an HTML widget in your 'cross column' area, under your pages.
You will have to create artwork the correct size (in pixels) and upload them to an image hosting website online. Once you have the direct URL for each image, change the code below, seen in red.
<style type="text/css">
/* http://dimpost.com */
#sliderFrame {
position: relative;
margin: 0px;
}
#slider {
width: 879px;
height: 318px;
/* Make sure the above are the same size as your images */
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZi9Ankhyphenhyphen0O4KUeXrNCqP6sWyNLlQ8cApixN_684Yj3rJLioxphp3ShpU38lWsG4K6N5qtlcr3F1cQGOaB45j1e22qhp3IdcUYfzvJPvLAH1TSH9pehuMpOL3Ee5oCgyYz-AkYWplwVdD3/s1600/loading.gif) no-repeat 50% 50%;
position: relative;
margin: 0 auto;
/*make the image slider center-aligned */
-webkit-box-shadow: 0px 1px 5px #999999;
-moz-box-shadow: 0px 1px 5px #999999;
box-shadow: 0px 1px 5px #999999;
}
#slider img {
position: absolute;
border: none;
display: none;
}
/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
z-index: 2;
display: none;
position: absolute;
top: 0px;
left: 0px;
border: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
/* Caption styles */
div.mc-caption-bg,
div.mc-caption-bg2 {
position: absolute;
width: 100%;
height: auto;
padding: 0;
left: 0px;
bottom: 15px;
z-index: 3;
overflow: hidden;
font-size: 0;
}
div.mc-caption-bg {
background-color: black;
}
div.mc-caption {
font: bold 14px/20px Arial;
color: #EEE;
z-index: 4;
padding: 10px 0;
text-align: center;
}
div.mc-caption a {
color: #FB0;
}
div.mc-caption a:hover {
color: #DA0;
}
/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper {
top: 90%;
left: 45%;
/* Its position is relative to the #slider */
width: 150px;
background: none;
padding-left: 20px;
position: relative;
z-index: 5;
cursor: pointer;
}
/* each bullet */
div.navBulletsWrapper div {
width: 11px;
height: 11px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtxscAIiLHPSM-mMqeVZ4CSHU8HSIQhTJOiyCeBLngSDcpAA64nNBTV944wCOCm75whyphenhyphenqHNAd1eCKihlasDl6_kPGXES4_xt4Avx1fpPRjljXkbNiyMkJTM6rqWrCu5AGCs1-nAnlV76OA/s1600/bullet.png) no-repeat 0 0;
float: left;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
margin-right: 11px;
/* distance between each bullet*/
_position: relative;
/*IE6 hack*/
}
div.navBulletsWrapper div.active {
background-position: 0 -11px;
}
.intro {
bottom: 0;
color: rgba(0, 0, 0, 0.2);
font-size: 16px;
position: absolute;
right: 0;
text-decoration: none;
z-index: 99999;
}
/* --------- Others ------- */
#slider {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
}
</style>
<script src="http://project.dimpost.com/image-slider/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="https://s15.postimg.org/enqjijigr/slider1.png" /></a>
<a href="#"><img src="https://s15.postimg.org/un9723eij/slider2.png" /></a>
<a href="#"><img src="https://s15.postimg.org/sjyrufepn/slider3.png" /></a>
</div>
</div>