Click Page Layout->Edit HTML. Check the box saying "Expand Widget Templates"
Look for the </head> tag in your template. Insert the following code just above that.
| <style type='text/css'> #indicator {position:fixed;z-index:1000;padding:15px 0;top:40%;background-color:#FFFFFF;border:1px solid #AAAAAA;width:176px;left:50%;margin-left:-88px;text-align:center;} #search-result {border:1px solid #AAAAAA;padding:10px;padding-bottom:30px;font-size:85%;} .search-result-meta {background:#EFEFEF;padding:2px;} .search-result-meta img {border-width:0;vertical-align:text-bottom;} .search-title {font-size:1em;padding-bottom:3px;font-weight:bold;text-align:left;text-decoration:underline;} .search-cat {display:block;padding:3px;font-size:1em;margin-top:5px;margin-bottom:5px;border-bottom:1px solid #C0C0C0;font-weight:bold;} .search-close {color:silver;float:right;border:1px solid #F5F5F5;margin-top:10px;cursor:pointer;} .search-result-nav {font-size:1.4em;font-weight:bold;padding:5px 0pt;text-align:center;} </style> <script type='text/javascript' src='http://bloggerhacked.googlepages.com/prototype.js' /> <script type='text/javascript'> //<![CDATA[ // User customisable parameters // ---------------------------- // maxresults - Number of results to show per page // navFlag - Set Navigation ON or OFF. Give 1 for ON and 0 for OFF. // feedLabel - Text to show for the label feed link. // catLabel - Label for categories. // closeLabel - Label for Close button. You can use hypertext also. var maxresults = 5; var navFlag = 1; //ON by default var feedLabel = "Subscribe to"; var catLabel = "Sorted into:"; var closeLabel = "Click to close"; //]]> </script> <script type='text/javascript' src='http://bloggerhacked.googlepages.com/ajaxlabels.js' /> |
Eg: Lets say, you have 13 posts with a particular label in your blog.
Case 1: maxresults=5 and navFlag=1
You will have 3 pages (peekaboo blocks) with 5 results each. There will be a navbar which will let you go to any of those 3 pages.
Case 2: maxresults=5 and navFlag=0
You will have a single page with 5 recently updated posts with the particular label.
You won't be able to view other results
Case 3: maxresults=20 and navFlag=1
You will have a single page with 13 results (Because 13 is less than 20).
If you know CSS, you can modify the look of your result block as well.
2. Locate the following code in your template:
<b:loop values='data:post.labels' var='label'> |
Replace it with this:
<b:loop values='data:post.labels' var='label'> |
3. Optional: If you already have the labels widget in your template.
Locate the following code in your template:
<b:if cond='data:blog.url == data:label.url'> |
Replace it with this:
<b:if cond='data:blog.url == data:label.url'> |
Add below widget
| <div id="indicator" style="display: none;"> <img alt="Indicator" src="http://bloggerhacked.googlepages.com/indicator.gif"/> Loading... </div> <div id="search-result" style="display:none"></div> |
Upgraded Automatic widget
| <div id="indicator" style="display:none"><img alt="Indicator" src="http://bloggerhacked.googlepages.com/indicator.gif"/> Loading...</div><div id="search-result" style="display:none"><a name="sres"></a><div class="search-close" onclick="javascript:Element.hide('search-result')"><script type="text/javascript">document.write(closeLabel);</script></div><div id="show-result"></div><div class="search-close" onclick="javascript:Element.hide('search-result')"><script type="text/javascript">document.write(closeLabel);</script></div></div> |
UPGRADATION
Caution!
If you are installing AJAX Labels for the first time, don't proceed any further. You are already finished with your installation. This section is only for upgrading from the previous version.
1. Back up your template first. (Be pessimistic in these matters )
2. Go to Edit HTML. Look for my previous installation of Javascript. It is very easy to find. It is enclosed within <!-- Begin Categories --> and <!-- End Categories -->
Delete that entire portion.
3. Now check Step 1 of the FRESH INSTALLATION section. Follow that step and come back here.
4. Search for the following snippet in your template.
| '"javascript:getCat(\"" + data:label.name + "\")"' |
There will be two places where this occurs.
Replace both places with this
| '"javascript:getCat(\"" + data:label.name + "\",null)"' |
5. Save your template and go to page layout screen and delete the HTML/Javascript widget you had created when you installed the previous version.
6. Go to step 4 of FRESH INSTALLATION section. Follow that step and come back here.
7. Save your template and you are done. There! That was not very difficult.
showCat