My Template Tweaks

This page lists the tweaks I've made to my template, and / or where they came from.
(Why - so I can find them again, if I need to re-apply them).

Current widths

940 / 345 / 5

Current colours:

Template said:
outer background: #670591
header background: #ff7f15

But I think it's really:
outer - #1921da
header
accents: #aefc50
selected tab #95ff15

Digital Inspiration's 10 things to do for your website

(only done some): http://www.labnol.org/internet/improve-website-tips/5007/

How to create a Chrome App

Done for BHat, 6 July 2014

Win8.1 Live tile setup

Go to buildmypinnedsite.com, upload your site’s logo, add your RSS feed URL and it will generate the meta tags that you can put in the HEAD of your website temmplate. See Scott Hanselman’s blog for the more technical details.
From http://www.labnol.org/internet/improve-website-tips/5007/
Done in GPTN so far.

Only show post titles in labels search results:

From: http://www.spiceupyourblog.com/2009/12/how-to-make-your-labels-search-and.html

Replace:
<b:include data='post' name='post'/>

With


<b:if cond='data:blog.searchLabel != ""'>
<li><a expr:href='data:post.url'><data:post.title/></a><br/></li><br/>
<b:else/><b:include data='post' name='post'/>
</b:if>

OR without using a bulleted list:

<b:if cond='data:blog.searchLabel != ""'>

<br/>

</div>

<b:else/><b:include data='post' name='post'/>

</b:if>

Note: the code given in that post is wrong it will be applied to all page types, not just search results. The one I have written is better.


<b:if cond='data:blog.homepageUrl !=data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<li><a expr:href='data:post.url'><data:post.title/></a><br/></li><br/>
<b:else/><b:include data='post' name='post'/>
</b:if>
<b:else/><b:include data='post' name='post'/>
</b:if>
<b:else/><b:include data='post' name='post'/>
</b:if>

Note: this is slightly different from the code recommended, to fix line-breaks problem, and to stop it applying to static pages.

This is another tutorial about it - better still:
http://www.bloggersentral.com/2009/06/showing-title-only-in-archive-label-and.html

It says the code to use is

<!--Label and archive page title only hack-->
<b:if cond='data:blog.searchLabel'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3> 
<b:else/> 
<b:if cond='data:blog.pageType == "archive"'> 
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3> 
<b:else/> 
<b:include data='post' name='post'/> 
</b:if> 
</b:if>

Switch the Older and Newer Link Positions

From: http://www.codeitpretty.com/2013/06/customizing-older-and-newer-post-links.html
Plus my own additions:

Add this to the template:

#blog-pager-newer-link {
float: right;
font-weight: bold;
}

#blog-pager-older-link {
float: left;
font-weight: bold;
}

Split the top header: - done

#topHeader {width:100%;display:inline-block;float:left;padding:10px;padding-top:10px;text-align:center;margin-top:10px;}

#header {width: 55%; display:inline-block;float:left;padding:0px;padding-top: 20px;padding-right:5px;padding-left:20px; text-align:center;}

#header-right {width:362px; display:inline-block;float:right;padding:20px; padding-top:10px;padding-left:0px; padding-right:10px;}

#header-right .widget {margin:0;}

After this, needed to add
.header-outer {background-color: white;}
- to stop the non-selected background coming thru

ToolTipped Text

.toolTippedText {

border-bottom: 1px dotted red;

}

font-weight: normal!important;

}

Format linked lists for something ...

#LinkList1 {width:93%;display:inline-block;float:left;}

#tabs-right {width:0%;display:inline-block;float:right;padding:0px;}

#tabs-right .widget {margin:0;}

#LinkList1{

padding-top: 0px; padding-left: 30px; padding-bottom: 0px;

border-top: 1px solid #aefc50;

}

MAKING INDEX PAGE IMAGES LINK TO THE POST PAGE

http://www.blogxpertise.com/2012/10/tip-index-page-images-link-to-post.html

Put this code just before </head>

--- didn't work. Code still there.

Random Posts widget:

http://www.stylifyyourblog.com/2012/08/random-post-widget-for-blogger.html

Issue - how can I restrict this to only Articles? No solution yet.

Jan 2014 - cannot install from that site. But the code is:

<div id='stylify_random'></div>
<div style='clear:both' class='stylify_footer'>
<small><a id='stylify_random_link' target='_blank' href='http://www.stylifyyourblog.com/?utm_src=STYLIFY_random' style='padding: 1px 0px 0px 19px;text-decoration:none;'><img src='http://img1.blogblog.com/img/blank.gif' alt='Random Posts with Thumbnails for Blogger' style='border:none' /></a>Powered By <a href='http://www.stylifyyourblog.com/?utm_src=STYLIFY_random' target='_blank' title='blogger widgets'>Blogger Gadgets</a></small></div>
<script style='text/javascript' >
//<![CDATA[
var postTitleOriginal, myLink, myDiv, myImage;
var main;

function getPost(json) {
var s;
var entry = json.feed.entry[0];
var postTitle = entry.title.$t;
postTitleOriginal = postTitle;
if (isNaN(titleLength) || titleLength == 0) {
postTitle = '';
}
else if (postTitle.length > titleLength) postTitle = postTitle.substring(0, titleLength) + "...";
var postUrl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
var commentText = entry.link[k].title;
var commentUrl = entry.link[k].href;
}
if (entry.link[k].rel == 'alternate') {
postUrl = entry.link[k].href;
break;
}
}
if (showThumbs == true) {
var thumbUrl = "";
try {
thumbUrl = entry.media$thumbnail.url;
if(imgDim=="80"||imgDim=="85"||imgDim=="90"||imgDim=="95"||imgDim=="100") thumbUrl = thumbUrl.replace("/s72-c/","/s104-c/");
} catch (error) {
if ("content" in entry) s = entry.content.$t; else s="";
if (thumbUrl == "" && mediaThumbsOnly == false) {
regex = /http\:\/\/www\.youtube(-nocookie){0,1}\.com\/(v){0,1}(embed){0,1}\/(([^"&?' ]*))/;
videoIds = s.match(regex);
if (videoIds != null) {
videoId = videoIds[4];
}
if (videoIds != null && videoId != null) thumbUrl = "http://img.youtube.com/vi/" + videoId + "/2.jpg"
}
if (thumbUrl == "" && mediaThumbsOnly == false) {
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) thumbUrl = d;

}

}
if (thumbUrl == "" && showNoImage == true) thumbUrl = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirG1DO7L2qnZb047er2q6192l7M8MsyVYsLPWCZUspvjtiBsua611wiUXziJenHQOZSi0LCk_DyyhU6p2VNqTkdXok1X3y8blA2aOMkRYBekq3E6esb4S0-NzunhYRKfJhih4jhbZEyx8/s400/noimage.png';
} //end ifposthumbs
if (showPostDate == true) {
var postdate = entry.published.$t;
var cdyear = postdate.substring(0, 4);
var cdmonth = postdate.substring(5, 7);
var cdday = postdate.substring(8, 10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
} //end if date
code = "";
main = document.getElementById('stylify_random');
myDiv = document.createElement('div');
myDiv.setAttribute("class", "stylify_item_title");
myDiv.style.clear="both";
myDiv.style.marginTop="4px";
myLink = createLink(postUrl,"_top",postTitleOriginal)

if(postTitle != '')myDiv.appendChild(myLink);
main.appendChild(myDiv);if(postTitle != '')myLink.innerHTML = postTitle;

if (showThumbs == true && thumbUrl != "") {
myImage = document.createElement('img');
myImage.style.border = "3px solid transparent";
myImage.style.margin = "5px";
myImage.style.boxShadow = "0 0 8px rgba(0, 0, 0, 0.3)";

myImage.setAttribute("src", thumbUrl);
myImage.style.cssFloat=imgFloat;
myImage.style.styleFloat=imgFloat;
//myImage.setAttribute("alt", postTitleOriginal);
myImage.setAttribute("width", imgDim);
//myImage.setAttribute("align", imgFloat);
myImage.setAttribute("height", imgDim);
myLink = document.createElement('a');
myLink.setAttribute("href", postUrl+"?utm_source=blog&utm_medium=gadget&utm_campaign=stylify_random");
myLink.setAttribute("target", "_top");
myLink.setAttribute("title", postTitleOriginal);
myLink.appendChild(myImage);

myDiv = document.createElement('div');
myDiv.setAttribute("class", "stylify_item_thumb");
myDiv.appendChild(myLink);
main.appendChild(myDiv);
}

try {
if ("content" in entry) {
var postContent = entry.content.$t;
}
else if ("summary" in entry) {
var postContent = entry.summary.$t;
}
else var postContent = "";
var re = /<\S[^>]*>/g;
postContent = postContent.replace(re, "");

if (showSummary == true) {
myDiv = createDiv("stylify_item_summary");

if (postContent.length < summaryLength) {myDiv.innerHTML=postContent;}
else {
postContent = postContent.substring(0, summaryLength);
var quoteEnd = postContent.lastIndexOf(" ");
postContent = postContent.substring(0, quoteEnd);
myDiv.innerHTML=postContent + '...';
}

main.appendChild(myDiv);
}
} //end try
catch (error) {}

myDiv = createDiv("stylify_item_meta");
myDiv.style.clear="both";
myDiv.style.marginBottom="4px";

var flag = 0;
if (showPostDate == true) {
myDiv.appendChild(document.createTextNode(monthnames[parseInt(cdmonth, 10)] + '-' + cdday + '-' + cdyear));
flag = 1;
}

if (showCommentCount == true) {
if (flag == 1) {
myDiv.appendChild(document.createTextNode(" | "));
}
if (commentText == '1 Comments') commentText = '1 Comment';
if (commentText == '0 Comments') commentText = 'No Comments';
var myLink = createLink(commentUrl,"_top",commentText + " on " + postTitleOriginal)
myDiv.appendChild(myLink);
myLink.innerHTML=commentText;
flag = 1;;
}

if (showReadMore == true) {
if (flag == 1) {
myDiv.appendChild(document.createTextNode(" | "));
}
var myLink = createLink(postUrl,"_top",postTitleOriginal)
myDiv.appendChild(myLink);
myLink.innerHTML = readMore+" »";
flag = 1;;
}

if (flag == 1 || showSummary || postTitle != "") main.appendChild(myDiv);
gadgets.window.adjustHeight();

}

function getRandom(json) {
var feedUrl = '/feeds/posts/default';
if (mediaThumbsOnly||!showThumbs) feedUrl = feedUrl.replace("posts/default", "posts/summary");
totalPosts = parseInt(json.feed.openSearch$totalResults.$t);
var rand = [];
if (numberOfPosts > totalPosts) numberOfPosts = totalPosts;
if (numberOfPosts > 15) numberOfPosts = 15;
while (rand.length < numberOfPosts) {
var randomNumber = Math.ceil(Math.random() * totalPosts);
var found = false;
for (var i = 0; i < rand.length; i++) {
if (rand[i] == randomNumber) {
found = true;
break;
}
}
if (!found) rand[rand.length] = randomNumber;
}
var head = document.getElementsByTagName("head")[0] || document.documentElement;

for (var i = 0; i < rand.length; i++) {

script = document.createElement("script");
script.src = feedUrl + "?start-index=" + rand[i] + "&max-results=1&alt=json-in-script&callback=getPost";
script.charSet = "utf-8";
head.appendChild(script);
}

}
function createDiv(className)
{
var myDiv = document.createElement('div');
myDiv.setAttribute("class", className);

return myDiv;
}

function createLink(href,target,title)
{

var myLink = document.createElement('a');
if(href.substring(href.length-13,href.length)=="#comment-form")
href= href.substring(0,href.length-13)+"?utm_source=blog&utm_medium=gadget&utm_campaign=stylify_random"+"#comment-form";
else if(href.indexOf("?utm_source=")==-1) href=href+"?utm_source=blog&utm_medium=gadget&utm_campaign=stylify_random";
myLink.setAttribute("href", href);
myLink.setAttribute("target", target);
myLink.setAttribute("title", title);

return myLink;
}

//]]>

</script>
<script style='text/javascript'>
var numberOfPosts = 10;
var showPostDate = false;
var showSummary = false;
var titleLength = 100;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 100;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='/feeds/posts/summary?max-results=10&alt=json-in-script&callback=getRandom'></script>

Prevent Duplicate Content By Blocking Archives From Search Engines

http://www.bloggersentral.com/2011/07/blocking-archives-from-search-engines.html

Add this to the head:

<b:if cond='data:blog.pageType == "archive"'>
<meta content='noindex,noarchive' name='robots'/>
</b:if>

Increase the maximum number of posts in Blogger label page#

http://www.bloggertipsandtricks.com/2012/07/Howtochangemaximumnumberpostsbloggerlabelpage.html

In short, change all instances of

expr:href='data:label.url'

expr:href='data:label.url + "?max-results=150"'

(or some other number - I used 999)

Stop archive pages from being indexed: DONE

--- anywhere in the <head>
--- from http://www.bloggersentral.com/2011/07/blocking-archives-from-search-engines.html



<b:if cond='data:blog.pageType == "archive"'>
<meta content='noindex,noarchive' name='robots'/>
</b:if>

Put the post-name before the blog name: DONE

Replace <title><data:blog.pageTitle/></title>

with



<b:if cond='data:blog.pageType == "index"'>

<title><data:blog.pageTitle/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

From ..... http://www.bloggersentral.com/2010/09/search-engine-optimize-blogger-title.html

Facebook Open Graph tags: DONE

--- anywhere in the <head>

<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:blog.postImageThumbnailUrl'>

</b:if>

<b:else/>

</b:if>

Make pics no more than 98% of width: done

.post img {max-width:98% !important}

Blog pager link formatting:

.blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;}

.blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}

#blog-pager-newer-link {padding:5px;font-size:130%;font-weight: bold;width:220px;text-align:left;}

#blog-pager-older-link {padding:5px;font-size:130%;font-weight: bold;width:220px;text-align:right;}

Threaded comments formatting:

From: http://www.spiceupyourblog.com/2012/06/highlight-author-comments-blogger-color.html

/*START OF Blogger Threaded Comments Styles From SPICE UP YOUR BLOG*/

#comments{overflow:hidden}

#comments h4{display:inline;padding:10px;line-height:40px}

#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}

#comments h4,.comments .continue a{background:#56d805}

#comments h4,.comments .user a,.comments .continue a{font-size:16px}

#comments h4,.comments .continue a{font-weight:normal;color:#fff}

#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #56d805;border-right:20px solid transparent;width:0;height:0;line-height:0}

#comments .avatar-image-container img{border:0}

.comment-thread{color:#111}

.comment-thread a{color:#777}

.comment-thread ol{margin:0 0 20px}

.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#56d805}

.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}

.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}

.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}

.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}

.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK8SLIIw80pnOryLfrh_PQWQNAx6GBibyqTkafxMdmvt4nV0Y1ScTc6mosiXuWVspeb-e8X1LUDHg-SVrNJtVtgPhZuHBnIUShMnXVZiWUgp3En_GO8nCJdqyoMljWaa0KxsGZ_uKgwdbD/s37/author-comment-flag-green.png);width:36px;height:36px}

.comments .comments-content .inline-thread{padding:0 0 0 20px}

.comments .comments-content .comment-replies{margin-top:0}

.comments .comment-content{padding:5px 0;line-height:1.4em}

.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}

.comments .comment-thread.inline-thread .comment{width:auto}

.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}

.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}

.comments .comment-thread.inline-thread .comment-block{margin-left:48px}

.comments .comment-thread.inline-thread .user a{font-size:13px}

.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}

.comments .continue{border-top:0;width:100%}

.comments .continue a{padding:10px 0;text-align:center}

.comment .continue{display:none}

#comment-editor{width:103%!important}

.comment-form{width:100%;max-width:100%}

/* END OF Blogger Threaded Comments Styles From SPICE UP YOUR BLOG*/

Fix The Blogger Comment Form Message Below Threaded Comments Error On Blogger

Ref: http://www.spiceupyourblog.com/2012/06/fix-blogger-comment-form-below-comments.html

(not done yet - check it out)

Notepad format for the back of quotes:

http://techgod8.blogspot.com/2012/08/css-blockquote-blogger-paper-style.html

Have applied it to Mary's Travails - not 100% successful, doesn't expand to the right side.

blockquote { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_1uVrgwH8opQg4LYm4iIsA27oxa1XtTIqsNq4QO4z0g2TNtchBNqsBqDUghfbf47p7Eaau5S3hF15aNRqyV91vnFNVHY7IpqyjimM1QvzyxoduBAnvI8Y4nl7jvV6MY9jFwhR8dovURmL/s986/note.png) repeat-y scroll 0 0 transparent; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF; -moz-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF; -ms-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF; -o-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF; box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF; margin: 10px 13px; padding: 21px 45px 14px; line-height: 1.65em; font-famliy:georgia,sarif; font-size:13px;
}

Above Post codes - advert and linking options:

<!-- Share button row START -- NOTE REPLACED MOST OF THE CODE BELOW WITH CODE FROM addthis>

<div class='post-header-line-2'>

<b:if cond='data:blog.pageType == "item"'>

<table style='margin-top:30px; border-top: 0px dotted grey; padding-top: 5px; margin-bottom: 20px; border-bottom: 0px dotted grey; padding-bottom: 5px;'>
<tr style='padding-top: 5px; padding-bottom:5px;'>
<td style='padding-right: 30px'>

<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_counter addthis_pill_style'/>
</div>
<script src='http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4efa478457edcfa2' type='text/javascript'/>

</td>
<td style='padding-right: 30px'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/><fb:like action='like' colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='false' show_faces='false'/>
</td>
<td style='padding-right: 2px'>
<a class='twitter-share-button' data-via='LitTools' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</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>

</td>

<td style='padding-right: 0px'>

<g:plusone expr:href='data:post.url' size='medium'/>

</td>

<td style='padding-right: 2px'>
<a href="http://www.reddit.com/submit" onclick="window.location = 'http://www.reddit.com/submit?url=' + encodeURIComponent(window.location); return false"> <img src="http://www.reddit.com/static/spreddit7.gif" height="20px" alt="submit to reddit" border="0" /> </a>
</td>

</tr>
</table>



</b:if>

</div>

<b:if cond='data:blog.pageType == "item"'>

google_ad_client = "ca-pub-4862549906412680";

/* BHAT - bigRect imageOnly underPosts */

google_ad_slot = "2002925060";

google_ad_width = 336;

google_ad_height = 280;

//-->

</script>

src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script>

</b:if>

</div>

<!-- post Description metaTag -- HAVE FOUND THIS IS THE WRONG PLACE FOR A META-TAG, SO IT MAY NOT WORK. BUT POST.SNIPPER NOT AVAILABLE OUTSIDE OF THE POST WIDGET I THINK>

<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:post.snippet'> <meta expr:content='data:post.snippet' name='description'/>

</b:if>

<b:if cond='data:blog.pageType != "item"'>

</div>

</b:if>

<b:if cond='data:blog.pageType == "item"'>

</b:if>

Make it work ok on different IE's DONE

<!--

BHAT verification tags: DONE

After the last +1 on the page:

(function() {

var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

po.src = 'https://apis.google.com/js/plusone.js';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

})();

</script>

Below post codes - put them just before <div class='post-footer'> ie under post dharing codes

<b:if cond='data:blog.pageType == "item"'>

google_ad_client = "ca-pub-4862549906412680";

/* BHAT - bigRect bottom of post */

google_ad_slot = "5520543836";

google_ad_width = 336;

google_ad_height = 280;

//-->

</script>

src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script>

</div>

</b:if>

Under Post linking codes

<b:if cond='data:blog.pageType == "item"'>

<h2>Links for sharing this article:</h2><br/>

<b>BB (forum) link code:</b>

</b:if>

<b:if cond='data:blog.pageType == "item"'>

</div>

</td>

</td>

<a class='twitter-share-button' data-count='horizontal' data-via='BloggerHAT' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

</td>

<g:plusone expr:href='data:post.url' size='medium'/>

</td>

</tr>

</table>

</b:if>

thumbnails for summary page

This goes just above the post.body div start



<b:if cond='data:blog.pageType != "item"'>
<div style='display: inline; text-align: left; float: left; margin-right: 2em; '>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>



<b:if cond='data:blog.pageType == "item"'>
<div style='clear: both;'/> 
</b:if>

PInterest Rich Pins

from http://www.blogxpertise.com/2013/09/validating-for-rich-pins-for-pinterest.html

Put the following code just below <b:includable id='post' var='post'>

I left the following out 'cos they're OG so I've already got them:
<meta expr:content='data:post.title' property='og:title'/>

Then validate with this: http://developers.pinterest.com/rich_pins/validator/

Pinch to Zoom - make it work on mobile

From http://www.spiceupyourblog.com/2014/03/allow-mobile-touch-screen-pinch-to-zoom.html

Add this meta-tag just before </head>

<meta content='width=device-width, initial-scale=1.0, maximum-scale=12.0, minimum-scale=.25, user-scalable=yes' name='viewport'/>

Under Post Subscription

<b:if cond='data:blog.pageType == "item"'>

<h2 style='margin-top:3em;'>Subscribe to Blogger-hints-and-tips</h2><br/>

</div>

Enter your email address: <a href="http://feedburner.google.com" target="_blank">FeedBurner</a> will send a confirmation message.

Click the <span style="font-weight:bold;">verify link</span> in it to start your subscription.

<br />

</div>

</b:if>

To make thumbnails render OK at higher resolutions:

http://www.blogxpertise.com/2012/03/resize-your-thumbnails-in-bloggers.html



<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
/**
this script was written by Confluent Forms LLC http://www.confluentforms.com
for the BlogXpertise website http://www.blogxpertise.com
any updates to this script will be posted to BlogXpertise
please leave this message and give credit where credit is due!
**/
$(document).ready(function() {
// change the dimension variable below to be the pixel size you want
var dimension = 90;
// this identifies the PopularPosts1 div element, finds each image in it, and resizes it
$('#PopularPosts1').find('img').each(function(n, image){
var image = $(image);
image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + dimension)});
image.attr('width',dimension);
image.attr('height',dimension);
});
});
//]]></script>

To Hide Empty AdSense Slots When No Ads are not Available

Add this to he <head> section of the blog.

<style> 
  ins.adsbygoogle[data-ad-status='unfilled'] { 
    display: none !important; 
  } 
</style>

Pages