1. Adding show/hide button to lengthy posts:
1) Locating css style sheet:
“
- Classic Blogger: Between the <style> and </style> tags. The first tag could have more in it like <style type="text/css" media="screen"> so don't let that concern you.
- Beta Blogger: Between the <b:skin><![CDATA[/* and ]]></b:skin>
locating-css-style-sheet.html (REF)
2) Hide/show expand/collapse navigation menu (2 steps)
Here are the steps involved. It has two parts. First you must enter the following code in your style sheet:
.commenthidden {display:none} .commentshown {display:inline}Second put this between the <head> and </head> tags, but not in the style sheet:
<script type="text/Javascript"> function togglecomments (postid) { var whichpost = document.getElementById(postid); if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; } } </script>hideshow-expandcollapse-navigation (REF)
3) Then, when writing the post, add this code to the post editing box:
Added bonus! If you plan on using this hack often in your posts, simply add it to the Post Template by going to the Dashboard/ Settings/ Post Template, and put it in that box. As a matter of fact, it is easier to put it there and if you don't use it for a post, simply delete the code for that particular post. Edit: Please note that each post must have a unique name for that post. I'm just going to start numbering mine. ie post100, post101, post102, etc.
<a aiotitle="click to expand" href="javascript:togglecomments('UNIQUE NAME')">+/-</a><div class="commenthidden" id="UNIQUE NAME"><p>HERE IS WHERE YOU PLACE THE HIDDEN TEXT.</div>
<p><a href="javascript:togglecomments('UNIQUE NAME')" aiotitle="click to expand"><font size="3">show/hide</font></a><br></p>
<div class="commenthidden" id="UNIQUE NAME">
2. Adding print button to posts (needs more tweak):
1) Use CTRL + F to find this closing head tag: </head> Copy and paste these lines BEFORE the closing head tag
“<!-- 8/8/09 Add Print Styling for blog page Part 1 of 2--> <style media='print' type='text/css'>
.noprint {display: none;} #header-wrapper {display: none;} #sidebar {display: none;} .sidebar {display: none;} #footer-wrapper {display: none;} .post-meta-data {display: none;} .post-footer {display: none;} .comment-link {display: none;} #blog-pager {display: none;} .feed-links {display: none;} #backlinks-container {display: none;} #google_ads_frame1, #google_ads_frame2,#google_ads_frame3 {display: none;} <!-- Override the screen styling when printing --> body {color:black; background-color:white !important; border:0px; padding:0px; margin:0px;}
#outer-wrapper {float:none !important; border:0px; margin:0px; padding:0px;}
#main-wrapper {width:100%; overflow:visible !important; float:none; border:0px; margin:0px; padding:0px;}
<!-- Optional - if show comments, force a page break --> #comments, .comments { page-break-before: always; }
<!-- Optional - if want to show urls for links --> div#main p a:after {content: " ("attr(href)") "; font-size: 8pt; }
<!-- Optional - if want links underlined & different color --> a:link, a:visited {color: #0000ff; background: transparent; text-decoration: underline;} </style>
<!-- 8/8/09 end print blog page Part 1 of 2—>”
how-to-create-print-this-post-button-on (REF)
2) Add a "Print this post" link
To add the print link, go to the "Edit HTML" page again, and this time ensure that you've ticked the "expand widget templates" box.
Now search for this line:
<p><data:post.body/></p>Immediately after this line, paste the code: “<b:if cond='data:blog.pageType == "item"'> <form> <input type="button" value="Print This Page" onClick="window.print()" /> </form> </b:if>”
Once you have added this code, save your template. These links will only be visible on post pages (to enable visitors to print the full post and any comments which appear beneath the post), so visit one of your post pages to see the link in action.
how-to-print-your-blogger-posts.html (ORG)
No comments:
Post a Comment