<$BlogMetaData$>Then place the following code right after it.
<link rel="icon" href="FAVICON URL" type="favicon" />
<link rel="shortcut icon" href="FAVICON URL" type="favicon" />
]]></b:skin>
PASTE ICON CODE HERE
</head>
.post h3 {This is the line of code that you add to the .post h3 section.
background:url(YOUR POST IMAGE) no-repeat;
padding: 20px;
margin: 20px;
margin-top:.25em;
margin-left: 0px;
margin-bottom: 20px;
border-top:1px dashed #42c4de;
border-bottom: 1px dashed #42c4de;
padding:10 0 4px;
font: normal normal 100% Georgia, Times, serif;
font-size:240%;
font-weight:bold;
line-height:1.4em;
color: #49331c;
text-transform:uppercase;
text-align: center;
}
.feed-links {That did it! Who knows why. Certainly I don't...I'm just happy it worked and thought I'd share.
display:none;
}
<data:post.body/>Step 2: Place this code after the code you just located:
<b:if cond='data:blog.pageType == "item"'>Save your work and all is done.
<div class='similiar'>
<!-- ***http://hoctro.blogspot.com***Jan,2007**** -->
<!-- ***Related Articles by Labels - Take Two*** -->
<!--
Modified by JackBook.Com to make it easier to use.
1. Now, users don't need to change anything to use this widget. just copy and paste, and done!
2. The current article will also be listed, now it's no more.
-->
<div class='widget-content'>
<h3>Related Posts by Categories</h3>
<div id='data2007'/><br/><br/>
<div id='hoctro'>
Widget by <u><a href='http://hoctro.blogspot.com'>Hoctro</a></u> | <u><a href='http://www.jackbook.com/' title='Related Posts on Blogger Modified by JackBook.Com. Read More?'>Jack Book</a></u>
</div>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfD95WXFoBJGXok5hUIQcZdFNzS208heTaWHIIk3WYuNPb5KC33ktW-v9WIbZsu_mNn06GyrMouRrp45I6yL-KVCTaDbSTkEUWGnu2gbjubwDocmeFyC3t58a9zq_hkpsPkjZa12z1pfv4/s1600-h/DSC_2693.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfD95WXFoBJGXok5hUIQcZdFNzS208heTaWHIIk3WYuNPb5KC33ktW-v9WIbZsu_mNn06GyrMouRrp45I6yL-KVCTaDbSTkEUWGnu2gbjubwDocmeFyC3t58a9zq_hkpsPkjZa12z1pfv4/s400/DSC_2693.JPG" alt="" id="BLOGGER_PHOTO_ID_5237868380194789154" border="0" /></a>All you change is the s400 to s800! Then you have a nice large image on your blog.
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA0xM0T2ufp5aJb1Qds4Awt07xPmbWWNY_2glvdgwg6BVaw5Opm7BZaGuSd-VRW3kK5oQ9Fhv720kgSl82lV9Xx7FZa0gfuDITsQ3F1kpqv7wDBq7iOT3JwNtEdSt075iLEpCOT9qfS06v/s1600-h/DSC_2689.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_OFh1WWXWCHM/SLDBAvBlhrI/AAAAAAAAB7g/kTUthEX2IYc/s320-R/DSC_2689.JPG" /></a></div>Change this s320-R to this s800-R. Where there's a will, there's a way!
<b:widget id='Label1' locked='false' title='Labels' type='Label'>Step 2 - Replace that line with this code:
<b:widget id='Label2' locked='false' title='Labels and Feeds' type='Label'>TaDa! Label those posts!
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
</li>
</b:loop>
</ul>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
<b:widget id='Label1' locked='false' title='Labels' type='Label'>Step 2 - replace that line with this:
<b:widget id='Label1' locked='false' title='Labels' type='Label'>There are a few places in this code to customize it. Change this number to change the width of the box to fit in your sidebar. Change the wording that shows in the first line of your drop down box...to whatever you like.
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<br/>
<select onchange='location=this.options[this.selectedIndex].value;' style='width:200px'>
<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
</option>
</b:loop>
</select>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
<b:widget id='Label1' locked='false' title='Labels' type='Label'>EDIT 09/07/08: Here is an example of the drop down box before expanded and after:
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<br/>
<select onchange='location=this.options[this.selectedIndex].value;' style='width:200px'>
<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
I'm a visual person, so the best way for me to explain this is with the exact code that I used for the above box:<center>Grab this button:</center><center><img style="border: 0px none ;" alt="BlogU Button link" src="http://farm4.static.flickr.com/3092/2505649265_9cb03e574d_o.png" title="Steal my button!" width="80" height="15" /></center>And here is the code showing what you need to change:
<center><textarea id="code-source" rows="3" cols="28" name="code-source"><a href="http://bloggeruniversity.blogspot.com/"><img border="0" src="http://farm4.static.flickr.com/3092/2505649265_9cb03e574d_o.png" /></a></textarea></center>
<center>TEXT EXPLAINING WHAT IS IN BOX</center><center><img style="border: 0px none ;" alt="LINK TITLE" src="IMAGE URL" title="LINK TOOLTIP TITLE" width="XX" height="XX" /></center>The pink code is where you can adjust the size of the box. All that is left to do is place it in a HTML/Javascript widget!
<center><textarea id="code-source" rows="3" cols="28" name="code-source"><a href="LINK"><img border="0" src="IMAGE URL" /></a></textarea></center>
<img src="TITLE IMAGE URL"/>You can add as many links as you want by opening (edit) the widget and adding this code:
<a href="LINK URL" target="_blank">LINK TITLE</a><br/>
<a href="LINK URL" target="_blank">LINK TITLE</a><br/>
<a href="LINK URL" target="_blank">LINK TITLE</a><br/>for each new link. It certainly is a fun way to dress up your sidebar and coordinate it with other design elements in your blog.
<div style="border: 1px solid #000000;background-color:#ffffff; width:200px; height:250px; overflow:auto; color:#555555;"><p> ADD TEXT OR CODE SCRIPT HEREYou will adjust these bits of code for width and height. Each blog will be different, so play with the numbers until the scroll box fits in the area you want. You will add the code you want displayed here...be it javascript or plain text. You may want to put a <br/> or two between lines of code to separate the items.
</p>
Oh, happy days!! Blogger, in it's infinite wisdom, has decided to give us inline comments!!! I have waited and waited. Tried hack after hack, but couldn't get any to work. Now it is there for the clicking!
If you have a straightforward template the change is extremely simple. You must got to the Blogger in Draft dashboard. Go to Settings | Comments | Comment Form Placement. Then select Embedded below post. Save and that is it.
For those of us that have done extensive customization to the template, there are a few more steps. First, follow the above instructions. Then do a quick check on a post page and see if the inline comment form is in place. If not, this is what I had to do to my template. Remember each template is different, and it may take some trial and error. Save your template before beginning.Go to your Dashboard | Layout | Edit HTML | Expand Widget Templates. The key word I looked for to get me where I needed was comment-footer.
Side note: did you know that in Firefox you can go to Edit | Find in This Page... That will open a little bar at the bottom of the window. Type in the word you want to search for. In this instance, I typed in comment-footer. Then click next. Each time you click it, you will be taken to the next instance of that word or phrase in the page!!
Find:
<p class='comment-footer'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>Post a Comment</a> </p>
Change to:
<p class='comment-footer'><b:if cond='data:post.embedCommentForm'> <b:include data='post' name='comment-form'/> <b:else/><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>Post a Comment</a></b:if> </p>
Your template may be tweaked differently. Basically, this is the line of code I had to add which made the inline comment form appear:
<b:if cond='data:post.embedCommentForm'> <b:include data='post' name='comment-form'/> <b:else/></b:if>
Now commenting has been taken to a whole new level on BlogU and blogs across the world! It is quick and simple for readers to leave a comment without leaving the page.
<b:widget id='LinkListXX' locked='false' title='+/- YOUR TITLE' type='LinkList'>Changes to the above code:
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;">');
//]]>
</script>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
.commenthidden {display:none}Second put this between the <head> and </head> tags, but not in the style sheet:
.commentshown {display:inline}
<script type="text/Javascript">I'm so sorry, Amy. I hope this clears up your problem!
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>
.sidebar .widget, .main .widget {Then you will replace it with this code:
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .Blog {
border-bottom-width: 0;
}
.sidebar .widget, .main .widget {That will give you a nice border around your posts and your sidebar widgets!
background:#ffffff;
margin:1.5em 0 1.5em;
padding:8px 8px 8px;
border:1px solid $bordercolor;
border-bottom:1px solid $bordercolor;
border-width:1px 1px 1px;
border-bottom:1px line $bordercolor;
}
.main .Blog {
background:#ffffff;
margin:1.5em 0 1.5em;
padding:8px 8px 8px;
border:1px solid $bordercolor;
border-bottom:1px solid $bordercolor;
border-width:1px 1px 1px;
border-bottom:1px line $bordercolor;
}
